Font size detective

font-size-detective.js

javascript:(function () {

    window.fsd = {};
    const TOO_MANY_FONT_SIZES = 10;

    fsd.nukeResults = () => {
        let $result = document.querySelector('.fs-result');
        if ($result !== null) {
            $result.style.display = 'none';
        }

        var $labels = document.querySelectorAll('.fs-label');
        if ($labels.length) {
            $labels.forEach(label => label.remove());
        }
    };

    fsd.rerun = () => {
        fsd.nukeResults();
        fsd.getFontSizes();
    };

    fsd.hideLabels = () => {
        let $labels = document.querySelectorAll('.fs-label');
        $labels.forEach(label => label.style.display = 'none');
    };

    fsd.showLabels = () => {
        let $labels = document.querySelectorAll('.fs-label');
        $labels.forEach(label => label.style.display = 'inline-block');
    };

    fsd.isHidden = ($el) => {
        return $el.offsetHeight === 0;
    };
    
    fsd.isIgnoredEl = ($el) => {
        if (fsd.isHidden($el)) {
            return true;
        }
        if ($el.tagName === 'SVG') {
            return true;
        }
        let ignored = false;
        let tagClasses = typeof($el.className) === 'string' ? $el.className.split(' ') : [];
        tagClasses.forEach( cName => {
           if (cName.startsWith('fs-') || cName.startsWith('fa-')) {
              ignored = true;
           }
        });
        return ignored;
    };
    
    fsd.getFontSizes = () => {
        fsd.nukeResults();
        let fontSizes = [];
        let fontColours = [];
        for (let $tag of document.querySelectorAll('body *')) {
           if (fsd.isIgnoredEl($tag)) {
               continue;
           }
           let style = window.getComputedStyle($tag, null).getPropertyValue('font-size');
           let fontSize = parseFloat(style);
           if (fontSize > 0) {
               fontSizes.push(fontSize);
           }
           let $label = document.createElement('span');
           $label.innerText = fontSize + 'px';
           if (typeof fontColours[fontSize] === 'undefined') {
             fontColours[fontSize] = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
           }
           $label.style.backgroundColor = fontColours[fontSize];
           $label.style.color = '#fff';
           $label.style.font = `normal bold ${fontSize}px/1 Arial`;
           $label.style.marginLeft = '3px';
           $label.style.padding = '1px 3px';
           $label.classList.add('fs-label');
           $tag.appendChild($label);
        }
        let uniqueFontSizes = Array.from(new Set(fontSizes));
        uniqueFontSizes = uniqueFontSizes.sort((a, b) => a - b);
        let numFontSizes = uniqueFontSizes.length;
        let msg = `<div class="fs-result__inner" style="border:3px solid #000; border-radius:5px; font:normal 20px/1 Arial; padding:20px 25px; color:#000; box-sizing:border-box; background:#fff; display: flex;"><div>🕵 <strong>${numFontSizes} font sizes used on this page</strong><br><br>`;
        msg += '<div style="display:flex; flex-wrap:wrap;">';
        for (let size of uniqueFontSizes) {
            msg += `<span class="fs-result__size" style="background-color:${fontColours[size]}; font-style:normal; padding:2px 4px; margin:0 5px 5px 0; color:#fff;">${size}px</span>`;
        }
        msg += '</div>';
        if (numFontSizes >= TOO_MANY_FONT_SIZES) {
            msg += "<br><div class=\"fs-result__warning\">That's a lot 😱! Try merging similar font sizes.</div>";
        }
        msg += '</div>';
        msg += `<div class="fs-result__actions" style="margin-left:auto;">Labels: <button class="fs-result__btn" onclick="fsd.hideLabels()">Hide</button> | <button class="fs-result__btn" onclick="fsd.showLabels()">Show</button> | <button class="fs-result__btn" onclick="fsd.rerun()">Re-run</button></div>`;
        msg += "</div>";

        let $banner = document.createElement('div');
        $banner.classList.add('fs-result');
        $banner.style.position = 'fixed';
        $banner.style.width = '100vw';
        $banner.style.bottom = 0;
        $banner.style.left = 0;
        $banner.style.zIndex = 6969696969;
        $banner.innerHTML = msg;
        document.body.insertBefore($banner, document.body.childNodes[0]);
    };

    fsd.getFontSizes();

})();