Opera uBlock Error

...
18
19
20
21
22...

1015
1016
...
<17 lines not shown>

    Home: https://github.com/gorhill/uBlock
*/

import { dom, qs$, qsa$ } from './dom.js';
import { i18n$ } from './i18n.js';
import punycode from '../lib/punycode.js';

/******************************************************************************/

let popupFontSize = 'unset';
vAPI.localStorage.getItemAsync('popupFontSize').then(value => {
    if ( typeof value !== 'string' || value === 'unset' ) { return; }
    document.body.style.setProperty('--font-size', value);
    popupFontSize = value;
});

// https://github.com/chrisaljoudi/uBlock/issues/996
//   Experimental: mitigate glitchy popup UI: immediately set the firewall
//   pane visibility to its last known state. By default the pane is hidden.
vAPI.localStorage.getItemAsync('popupPanelSections').then(bits => {
    if ( typeof bits !== 'number' ) { return; }
    setSections(bits);
});

/******************************************************************************/

const messaging = vAPI.messaging;
const scopeToSrcHostnameMap = {
    '/': '*',
    '.': ''
};
const hostnameToSortableTokenMap = new Map();
const statsStr = i18n$('popupBlockedStats');
const domainsHitStr = i18n$('popupHitDomainCount');

let popupData = {};
let dfPaneBuilt = false;
let dfHotspots = null;
const allHostnameRows = [];
let cachedPopupHash = '';
let forceReloadFlag = 0;

// https://github.com/gorhill/uBlock/issues/2550
// Solution inspired from
// - https://bugs.chromium.org/p/chromium/issues/detail?id=683314
// - https://bugzilla.mozilla.org/show_bug.cgi?id=1332714#c17
// Confusable character set from:
// - http://unicode.org/cldr/utility/list-unicodeset.jsp?a=%5B%D0%B0%D1%81%D4%81%D0%B5%D2%BB%D1%96%D1%98%D3%8F%D0%BE%D1%80%D4%9B%D1%95%D4%9D%D1%85%D1%83%D1%8A%D0%AC%D2%BD%D0%BF%D0%B3%D1%B5%D1%A1%5D&g=gc&i=
// Linked from:
// - https://www.chromium.org/developers/design-documents/idn-in-google-chrome
const reCyrillicNonAmbiguous = /[\u0400-\u042b\u042d-\u042f\u0431\u0432\u0434\u0436-\u043d\u0442\u0444\u0446-\u0449\u044b-\u0454\u0457\u0459-\u0460\u0462-\u0474\u0476-\u04ba\u04bc\u04be-\u04ce\u04d0-\u0500\u0502-\u051a\u051c\u051e-\u052f]/;
const reCyrillicAmbiguous = /[\u042c\u0430\u0433\u0435\u043e\u043f\u0440\u0441\u0443\u0445\u044a\u0455\u0456\u0458\u0461\u0475\u04bb\u04bd\u04cf\u0501\u051b\u051d]/;

/******************************************************************************/

const cachePopupData = function(data) {
    popupData = {};
    scopeToSrcHostnameMap['.'] = '';
    hostnameToSortableTokenMap.clear();

    if ( typeof data !== 'object' ) {
        return popupData;
    }
    popupData = data;
    popupData.cnameMap = new Map(popupData.cnameMap);
    scopeToSrcHostnameMap['.'] = popupData.pageHostname || '';
    const hostnameDict = popupData.hostnameDict;
    if ( typeof hostnameDict !== 'object' ) {
        return popupData;
    }
    for ( const hostname in hostnameDict ) {
        if ( Object.hasOwn(hostnameDict, hostname) === false ) { continue; }
        let domain = hostnameDict[hostname].domain;
        let prefix = hostname.slice(0, 0 - domain.length - 1);
        // Prefix with space char for 1st-party hostnames: this ensure these
        // will come first in list.
        if ( domain === popupData.pageDomain ) {
            domain = '\u0020';
        }
        hostnameToSortableTokenMap.set(
            hostname,
            domain + ' ' + prefix.split('.').reverse().join('.')
        );
    }
    return popupData;
};

/******************************************************************************/

const hashFromPopupData = function(reset = false) {
    // It makes no sense to offer to refresh the behind-the-scene scope
    if ( popupData.pageHostname === 'behind-the-scene' ) {
        dom.cl.remove(dom.body, 'needReload');
        return;
    }

    const hasher = [];
    const rules = popupData.firewallRules;
    for ( const key in rules ) {
        const rule = rules[key];
        if ( rule === undefined ) { continue; }
        hasher.push(rule);
    }
    hasher.sort();
    hasher.push(
        dom.cl.has('body', 'off'),
        dom.cl.has('#no-large-media', 'on'),
        dom.cl.has('#no-cosmetic-filtering', 'on'),
        dom.cl.has('#no-remote-fonts', 'on'),
        dom.cl.has('#no-scripting', 'on')
    );

    const hash = hasher.join('');
    if ( reset ) {
        cachedPopupHash = hash;
        forceReloadFlag = 0;
    }
    dom.cl.toggle(dom.body, 'needReload',
        hash !== cachedPopupHash || popupData.hasUnprocessedRequest === true
    );
};

/******************************************************************************/

// greater-than-zero test

const gtz = n => typeof n === 'number' && n > 0;

/******************************************************************************/

const formatNumber = function(count) {
    if ( typeof count !== 'number' ) { return ''; }
    if ( count < 1e6 ) { return count.toLocaleString(); }

    if (
        intlNumberFormat === undefined &&
        Intl.NumberFormat instanceof Function
    ) {
        const intl = new Intl.NumberFormat(undefined, {
            notation: 'compact',
            maximumSignificantDigits: 4
        });
        if (
            intl.resolvedOptions instanceof Function &&
            Object.hasOwn(intl.resolvedOptions(), 'notation')
        ) {
            intlNumberFormat = intl;
        }
    }

    if ( intlNumberFormat ) {
        return intlNumberFormat.format(count);
    }

    // https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-629696676
    //   For platforms which do not support proper number formatting, use
    //   a poor's man compact form, which unfortunately is not i18n-friendly.
    count /= 1000000;
    if ( count >= 100 ) {
        count = Math.floor(count * 10) / 10;
    } else if ( count > 10 ) {
        count = Math.floor(count * 100) / 100;
    } else {
        count = Math.floor(count * 1000) / 1000;
    }
    return (count).toLocaleString(undefined) + '\u2009M';
};

let intlNumberFormat;

/******************************************************************************/

const safePunycodeToUnicode = function(hn) {
    const pretty = punycode.toUnicode(hn);
    return pretty === hn ||
           reCyrillicAmbiguous.test(pretty) === false ||
           reCyrillicNonAmbiguous.test(pretty)
        ? pretty
        : hn;
};

/******************************************************************************/

const updateFirewallCellCount = function(cells, allowed, blocked) {
    for ( const cell of cells ) {
        if ( gtz(allowed) ) {
            dom.attr(cell, 'data-acount',
                Math.min(Math.ceil(Math.log(allowed + 1) / Math.LN10), 3)
            );
        } else {
            dom.attr(cell, 'data-acount', '0');
        }
        if ( gtz(blocked) ) {
            dom.attr(cell, 'data-bcount',
                Math.min(Math.ceil(Math.log(blocked + 1) / Math.LN10), 3)
            );
        } else {
            dom.attr(cell, 'data-bcount', '0');
        }
    }
};

/******************************************************************************/

const updateFirewallCellRule = function(cells, scope, des, type, rule) {
    const ruleParts = rule !== undefined ? rule.split(' ') : undefined;

    for ( const cell of cells ) {
        if ( ruleParts === undefined ) {
            dom.attr(cell, 'class', null);
            continue;
        }

        const action = updateFirewallCellRule.actionNames[ruleParts[3]];
        dom.attr(cell, 'class', `${action}Rule`);

        // Use dark shade visual cue if the rule is specific to the cell.
        if (
            (ruleParts[1] !== '*' || ruleParts[2] === type) &&
            (ruleParts[1] === des) &&
            (ruleParts[0] === scopeToSrcHostnameMap[scope])

        ) {
            dom.cl.add(cell, 'ownRule');
        }
    }
};

updateFirewallCellRule.actionNames = { '1': 'block', '2': 'allow', '3': 'noop' };

/******************************************************************************/

const updateAllFirewallCells = function(doRules = true, doCounts = true) {
    const { pageDomain } = popupData;
    const rowContainer = qs$('#firewall');
    const rows = qsa$(rowContainer, '#firewall > [data-des][data-type]');

    let a1pScript = 0, b1pScript = 0;
    let a3pScript = 0, b3pScript = 0;
    let a3pFrame = 0, b3pFrame = 0;

    for ( const row of rows ) {
        const des = dom.attr(row, 'data-des');
        const type = dom.attr(row, 'data-type');
        if ( doRules ) {
            updateFirewallCellRule(
                qsa$(row, ':scope > span[data-src="/"]'),
                '/',
                des,
                type,
                popupData.firewallRules[`/ ${des} ${type}`]
            );
        }
        const cells = qsa$(row, ':scope > span[data-src="."]');
        if ( doRules ) {
            updateFirewallCellRule(
                cells,
                '.',
                des,
                type,
                popupData.firewallRules[`. ${des} ${type}`]
            );
        }
        if ( des === '*' || type !== '*' ) { continue; }
        if ( doCounts === false ) { continue; }
        const hnDetails = popupData.hostnameDict[des];
        if ( hnDetails === undefined ) {
            updateFirewallCellCount(cells);
            continue;
        }
        const { allowed, blocked } = hnDetails.counts;
        updateFirewallCellCount([ cells[0] ], allowed.any, blocked.any);
        const { totals } = hnDetails;
        if ( totals !== undefined ) {
            updateFirewallCellCount([ cells[1] ], totals.allowed.any, totals.blocked.any);
        }
        if ( hnDetails.domain === pageDomain ) {
            a1pScript += allowed.script; b1pScript += blocked.script;
        } else {
            a3pScript += allowed.script; b3pScript += blocked.script;
            a3pFrame += allowed.frame; b3pFrame += blocked.frame;
        }
    }

    if ( doCounts ) {
        const fromType = type =>
            qsa$(`#firewall > [data-des="*"][data-type="${type}"] > [data-src="."]`);
        updateFirewallCellCount(fromType('1p-script'), a1pScript, b1pScript);
        updateFirewallCellCount(fromType('3p-script'), a3pScript, b3pScript);
        dom.cl.toggle(rowContainer, 'has3pScript', a3pScript !== 0 || b3pScript !== 0);
        updateFirewallCellCount(fromType('3p-frame'), a3pFrame, b3pFrame);
        dom.cl.toggle(rowContainer, 'has3pFrame', a3pFrame !== 0 || b3pFrame !== 0);
    }

    dom.cl.toggle(dom.body, 'needSave', popupData.matrixIsDirty === true);
};

/******************************************************************************/

// Compute statistics useful only to firewall entries -- we need to call
// this only when overview pane needs to be rendered.

const expandHostnameStats = ( ) => {
    let dnDetails;
    for ( const des of allHostnameRows ) {
        const hnDetails = popupData.hostnameDict[des];
        const { domain, counts } = hnDetails;
        const isDomain = des === domain;
        const { allowed: hnAllowed, blocked: hnBlocked } = counts;
        if ( isDomain ) {
            dnDetails = hnDetails;
            dnDetails.totals = JSON.parse(JSON.stringify(dnDetails.counts));
        } else {
            const { allowed: dnAllowed, blocked: dnBlocked } = dnDetails.totals;
            dnAllowed.any += hnAllowed.any;
            dnBlocked.any += hnBlocked.any;
        }
        hnDetails.hasScript = hnAllowed.script !== 0 || hnBlocked.script !== 0;
        dnDetails.hasScript = dnDetails.hasScript || hnDetails.hasScript;
        hnDetails.hasFrame = hnAllowed.frame !== 0 || hnBlocked.frame !== 0;
        dnDetails.hasFrame = dnDetails.hasFrame || hnDetails.hasFrame;
    }
};

/******************************************************************************/

const buildAllFirewallRows = function() {
    // Do this before removing the rows
    if ( dfHotspots === null ) {
        dfHotspots = qs$('#actionSelector');
        dom.on(dfHotspots, 'click', setFirewallRuleHandler);
    }
    dfHotspots.remove();

    // This must be called before we create the rows.
    expandHostnameStats();

    // Update incrementally: reuse existing rows if possible.
    const rowContainer = qs$('#firewall');
    const toAppend = document.createDocumentFragment();
    const rowTemplate = qs$('#templates > div[data-des=""][data-type="*"]');
    const { cnameMap, hostnameDict, pageDomain, pageHostname } = popupData;

    let row = qs$(rowContainer, 'div[data-des="*"][data-type="3p-frame"] + div');

    for ( const des of allHostnameRows ) {
        if ( row === null ) {
            row = dom.clone(rowTemplate);
            toAppend.appendChild(row);
        }
        dom.attr(row, 'data-des', des);

        const hnDetails = hostnameDict[des] || {};
        const isDomain = des === hnDetails.domain;
        const prettyDomainName = des.includes('xn--')
            ? punycode.toUnicode(des)
            : des;
        const isPunycoded = prettyDomainName !== des;

        if ( isDomain && row.childElementCount < 4 ) {
            row.append(dom.clone(row.children[2]));
        } else if ( isDomain === false && row.childElementCount === 4 ) {
            row.children[3].remove();
        }

        const span = qs$(row, 'span:first-of-type');
        dom.text(qs$(span, ':scope > span > span'), prettyDomainName);

        const classList = row.classList;

        let desExtra = '';
        if ( classList.toggle('isCname', cnameMap.has(des)) ) {
            desExtra = punycode.toUnicode(cnameMap.get(des));
        } else if (
            isDomain && isPunycoded &&
            reCyrillicAmbiguous.test(prettyDomainName) &&
            reCyrillicNonAmbiguous.test(prettyDomainName) === false
        ) {
            desExtra = des;
        }
        dom.text(qs$(span, 'sub'), desExtra);

        classList.toggle('isRootContext', des === pageHostname);
        classList.toggle('is3p', hnDetails.domain !== pageDomain);
        classList.toggle('isDomain', isDomain);
        classList.toggle('hasSubdomains', isDomain && hnDetails.hasSubdomains);
        classList.toggle('isSubdomain', !isDomain);
        const { counts } = hnDetails;
        classList.toggle('allowed', gtz(counts.allowed.any));
        classList.toggle('blocked', gtz(counts.blocked.any));
        const { totals } = hnDetails;
        classList.toggle('totalAllowed', gtz(totals && totals.allowed.any));
        classList.toggle('totalBlocked', gtz(totals && totals.blocked.any));
        classList.toggle('hasScript', hnDetails.hasScript === true);
        classList.toggle('hasFrame', hnDetails.hasFrame === true);
        classList.toggle('expandException', expandExceptions.has(hnDetails.domain));

        row = row.nextElementSibling;
    }

    // Remove unused trailing rows
    if ( row !== null ) {
        while ( row.nextElementSibling !== null ) {
            row.nextElementSibling.remove();
        }
        row.remove();
    }

    // Add new rows all at once
    if ( toAppend.childElementCount !== 0 ) {
        rowContainer.append(toAppend);
    }

    if ( dfPaneBuilt !== true && popupData.advancedUserEnabled ) {
        dom.on('#firewall', 'click', 'span[data-src]', unsetFirewallRuleHandler);
        dom.on('#firewall', 'mouseenter', 'span[data-src]', mouseenterCellHandler);
        dom.on('#firewall', 'mouseleave', 'span[data-src]', mouseleaveCellHandler);
        dfPaneBuilt = true;
    }

    updateAllFirewallCells();
};

/******************************************************************************/

const hostnameCompare = function(a, b) {
    let ha = a;
    if ( !reIP.test(ha) ) {
        ha = hostnameToSortableTokenMap.get(ha) || ' ';
    }
    let hb = b;
    if ( !reIP.test(hb) ) {
        hb = hostnameToSortableTokenMap.get(hb) || ' ';
    }
    const ca = ha.charCodeAt(0);
    const cb = hb.charCodeAt(0);
    return ca !== cb ? ca - cb : ha.localeCompare(hb);
};

const reIP = /(\d|\])$/;

/******************************************************************************/

function filterFirewallRows() {
    const firewallElem = qs$('#firewall');
    const elems = qsa$('#firewall .filterExpressions span[data-expr]');
    let not = false;
    for ( const elem of elems ) {
        const on = dom.cl.has(elem, 'on');
        switch ( elem.dataset.expr ) {
        case 'not':
            not = on;
            break;
        case 'blocked':
            dom.cl.toggle(firewallElem, 'showBlocked', !not && on);
            dom.cl.toggle(firewallElem, 'hideBlocked', not && on);
            break;
        case 'allowed':
            dom.cl.toggle(firewallElem, 'showAllowed', !not && on);
            dom.cl.toggle(firewallElem, 'hideAllowed', not && on);
            break;
        case 'script':
            dom.cl.toggle(firewallElem, 'show3pScript', !not && on);
            dom.cl.toggle(firewallElem, 'hide3pScript', not && on);
            break;
        case 'frame':
            dom.cl.toggle(firewallElem, 'show3pFrame', !not && on);
            dom.cl.toggle(firewallElem, 'hide3pFrame', not && on);
            break;
        default:
            break;
        }
    }
}

dom.on('#firewall .filterExpressions', 'click', 'span[data-expr]', ev => {
    const target = ev.target;
    dom.cl.toggle(target, 'on');
    switch ( target.dataset.expr ) {
    case 'blocked':
        if ( dom.cl.has(target, 'on') === false ) { break; }
        dom.cl.remove('#firewall .filterExpressions span[data-expr="allowed"]', 'on');
        break;
    case 'allowed':
        if ( dom.cl.has(target, 'on') === false ) { break; }
        dom.cl.remove('#firewall .filterExpressions span[data-expr="blocked"]', 'on');
        break;
    }
    filterFirewallRows();
    const elems = qsa$('#firewall .filterExpressions span[data-expr]');
    const filters = Array.from(elems) .map(el => dom.cl.has(el, 'on') ? '1' : '0');
    filters.unshift('00');
    vAPI.localStorage.setItem('firewallFilters', filters.join(' '));
});

{
    vAPI.localStorage.getItemAsync('firewallFilters').then(v => {
        if ( v === null ) { return; }
        const filters = v.split(' ');
        if ( filters.shift() !== '00' ) { return; }
        if ( filters.every(v => v === '0') ) { return; }
        const elems = qsa$('#firewall .filterExpressions span[data-expr]');
        for ( let i = 0; i < elems.length; i++ ) {
            if ( filters[i] === '0' ) { continue; }
            dom.cl.add(elems[i], 'on');
        }
        filterFirewallRows();
    });
}

/******************************************************************************/

const renderPrivacyExposure = function() {
    const allDomains = {};
    let allDomainCount = 0;
    let touchedDomainCount = 0;

    allHostnameRows.length = 0;

    // Sort hostnames. First-party hostnames must always appear at the top
    // of the list.
    const { hostnameDict } = popupData;
    const desHostnameDone = new Set();
    const keys = Object.keys(hostnameDict).sort(hostnameCompare);
    for ( const des of keys ) {
        // Specific-type rules -- these are built-in
        if ( des === '*' || desHostnameDone.has(des) ) { continue; }
        const hnDetails = hostnameDict[des];
        const { domain, counts } = hnDetails;
        if ( Object.hasOwn(allDomains, domain) === false ) {
            allDomains[domain] = false;
            allDomainCount += 1;
        }
        if ( gtz(counts.allowed.any) ) {
            if ( allDomains[domain] === false ) {
                allDomains[domain] = true;
                touchedDomainCount += 1;
            }
        }
        const dnDetails = hostnameDict[domain];
        if ( dnDetails !== undefined ) {
            if ( des !== domain ) {
                dnDetails.hasSubdomains = true;
            } else if ( dnDetails.hasSubdomains === undefined ) {
                dnDetails.hasSubdomains = false;
            }
        }
        allHostnameRows.push(des);
        desHostnameDone.add(des);
    }

    const summary = domainsHitStr
        .replace('{{count}}', touchedDomainCount.toLocaleString())
        .replace('{{total}}', allDomainCount.toLocaleString());
    dom.text('[data-i18n^="popupDomainsConnected"] + span', summary);
};

/******************************************************************************/

const updateHnSwitches = function() {
    dom.cl.toggle('#no-popups', 'on', popupData.noPopups === true);
    dom.cl.toggle('#no-large-media', 'on', popupData.noLargeMedia === true);
    dom.cl.toggle('#no-cosmetic-filtering', 'on',popupData.noCosmeticFiltering === true);
    dom.cl.toggle('#no-remote-fonts', 'on', popupData.noRemoteFonts === true);
    dom.cl.toggle('#no-scripting', 'on', popupData.noScripting === true);
};

/******************************************************************************/

// Assume everything has to be done incrementally.

const renderPopup = function() {
    if ( popupData.tabTitle ) {
        document.title = popupData.appName + ' - ' + popupData.tabTitle;
    }

    const isFiltering = popupData.netFilteringSwitch;

    dom.cl.toggle(dom.body, 'advancedUser', popupData.advancedUserEnabled === true);
    dom.cl.toggle(dom.body, 'off', popupData.pageURL === '' || isFiltering !== true);
    dom.cl.toggle(dom.body, 'needSave', popupData.matrixIsDirty === true);

    // The hostname information below the power switch
    {
        const [ elemHn, elemDn ] = qs$('#hostname').children;
        const { pageDomain, pageHostname } = popupData;
        if ( pageDomain !== '' ) {
            dom.text(elemDn, safePunycodeToUnicode(pageDomain));
            dom.text(elemHn, pageHostname !== pageDomain
                ? safePunycodeToUnicode(pageHostname.slice(0, -pageDomain.length - 1)) + '.'
                : ''
            );
        } else {
            dom.text(elemDn, '');
            dom.text(elemHn, '');
        }
    }

    const canPick = popupData.canElementPicker && isFiltering;

    dom.cl.toggle('#gotoZap', 'canPick', canPick);
    dom.cl.toggle('#gotoPick', 'canPick', canPick && popupData.userFiltersAreEnabled);
    dom.cl.toggle('#gotoReport', 'canPick', canPick);

    let blocked, total;
    if ( popupData.pageCounts !== undefined ) {
        const counts = popupData.pageCounts;
        blocked = counts.blocked.any;
        total = blocked + counts.allowed.any;
    } else {
        blocked = 0;
        total = 0;
    }
    let text;
    if ( total === 0 ) {
        text = formatNumber(0);
    } else {
        text = statsStr.replace('{{count}}', formatNumber(blocked))
                       .replace('{{percent}}', formatNumber(Math.floor(blocked * 100 / total)));
    }
    dom.text('[data-i18n^="popupBlockedOnThisPage"] + span', text);

    blocked = popupData.globalBlockedRequestCount;
    total = popupData.globalAllowedRequestCount + blocked;
    if ( total === 0 ) {
        text = formatNumber(0);
    } else {
        text = statsStr.replace('{{count}}', formatNumber(blocked))
                       .replace('{{percent}}', formatNumber(Math.floor(blocked * 100 / total)));
    }
    dom.text('[data-i18n^="popupBlockedSinceInstall"] + span', text);

    // This will collate all domains, touched or not
    renderPrivacyExposure();

    // Extra tools
    updateHnSwitches();

    // Report popup count on badge
    total = popupData.popupBlockedCount;
    dom.text(
        '#no-popups .fa-icon-badge',
        total ? Math.min(total, 99).toLocaleString() : ''
    );

    // Report large media count on badge
    total = popupData.largeMediaCount;
    dom.text(
        '#no-large-media .fa-icon-badge',
        total ? Math.min(total, 99).toLocaleString() : ''
    );

    // Report remote font count on badge
    total = popupData.remoteFontCount;
    dom.text(
        '#no-remote-fonts .fa-icon-badge',
        total ? Math.min(total, 99).toLocaleString() : ''
    );

    // Unprocessed request(s) warning
    dom.cl.toggle(dom.root, 'warn', popupData.hasUnprocessedRequest === true);

    dom.cl.toggle(dom.html, 'colorBlind', popupData.colorBlindFriendly === true);

    setGlobalExpand(popupData.firewallPaneMinimized === false, true);

    // Build dynamic filtering pane only if in use
    if ( (computedSections() & sectionFirewallBit) !== 0 ) {
        buildAllFirewallRows();
    }

    renderTooltips();
};

/******************************************************************************/

dom.on('.dismiss', 'click', ( ) => {
    messaging.send('popupPanel', {
        what: 'dismissUnprocessedRequest',
        tabId: popupData.tabId,
    }).then(( ) => {
        popupData.hasUnprocessedRequest = false;
        dom.cl.remove(dom.root, 'warn');
    });
});

/******************************************************************************/

// https://github.com/gorhill/uBlock/issues/2889
//   Use tooltip for ARIA purpose.

const renderTooltips = function(selector) {
    for ( const [ key, details ] of tooltipTargetSelectors ) {
        if ( selector !== undefined && key !== selector ) { continue; }
        const elem = qs$(key);
        if ( elem.hasAttribute('title') === false ) { continue; }
        const text = i18n$(
            details.i18n +
            (qs$(details.state) === null ? '1' : '2')
        );
        dom.attr(elem, 'aria-label', text);
        dom.attr(elem, 'title', text);
    }
};

const tooltipTargetSelectors = new Map([
    [
        '#switch',
        {
            state: 'body.off',
            i18n: 'popupPowerSwitchInfo',
        }
    ],
    [
        '#no-popups',
        {
            state: '#no-popups.on',
            i18n: 'popupTipNoPopups'
        }
    ],
    [
        '#no-large-media',
        {
            state: '#no-large-media.on',
            i18n: 'popupTipNoLargeMedia'
        }
    ],
    [
        '#no-cosmetic-filtering',
        {
            state: '#no-cosmetic-filtering.on',
            i18n: 'popupTipNoCosmeticFiltering'
        }
    ],
    [
        '#no-remote-fonts',
        {
            state: '#no-remote-fonts.on',
            i18n: 'popupTipNoRemoteFonts'
        }
    ],
    [
        '#no-scripting',
        {
            state: '#no-scripting.on',
            i18n: 'popupTipNoScripting'
        }
    ],
]);

/******************************************************************************/

// All rendering code which need to be executed only once.

let renderOnce = function() {
    renderOnce = function(){};

    if ( popupData.fontSize !== popupFontSize ) {
        popupFontSize = popupData.fontSize;
        if ( popupFontSize !== 'unset' ) {
            dom.body.style.setProperty('--font-size', popupFontSize);
            vAPI.localStorage.setItem('popupFontSize', popupFontSize);
        } else {
            dom.body.style.removeProperty('--font-size');
            vAPI.localStorage.removeItem('popupFontSize');
        }
    }

    dom.text('#version', popupData.appVersion);

    setSections(computedSections());

    if ( popupData.uiPopupConfig !== undefined ) {
        dom.attr(dom.body, 'data-ui', popupData.uiPopupConfig);
    }

    dom.cl.toggle(dom.body, 'no-tooltips', popupData.tooltipsDisabled === true);
    if ( popupData.tooltipsDisabled === true ) {
        dom.attr('[title]', 'title', null);
    }

    // https://github.com/uBlockOrigin/uBlock-issues/issues/22
    if ( popupData.advancedUserEnabled !== true ) {
        dom.attr('#firewall [title][data-src]', 'title', null);
    }

    // This must be done when the firewall is populated
    if ( popupData.popupPanelHeightMode === 1 ) {
        dom.cl.add(dom.body, 'vMin');
    }

    // Prevent non-advanced user opting into advanced user mode from harming
    // themselves by disabling by default features generally suitable to
    // filter list maintainers and actual advanced users.
    if ( popupData.godMode ) {
        dom.cl.add(dom.body, 'godMode');
    }
};

/******************************************************************************/

const renderPopupLazy = (( ) => {
    let mustRenderCosmeticFilteringBadge = true;

    // https://github.com/uBlockOrigin/uBlock-issues/issues/756
    //   Launch potentially expensive hidden elements-counting scriptlet on
    //   demand only.
    {
        const sw = qs$('#no-cosmetic-filtering');
        const badge = qs$(sw, ':scope .fa-icon-badge');
        dom.text(badge, '\u22EF');

        const render = ( ) => {
            if ( mustRenderCosmeticFilteringBadge === false ) { return; }
            mustRenderCosmeticFilteringBadge = false;
            if ( dom.cl.has(sw, 'hnSwitchBusy') ) { return; }
            dom.cl.add(sw, 'hnSwitchBusy');
            messaging.send('popupPanel', {
                what: 'getHiddenElementCount',
                tabId: popupData.tabId,
            }).then(count => {
                let text;
                if ( (count || 0) === 0 ) {
                    text = '';
                } else if ( count === -1 ) {
                    text = '?';
                } else {
                    text = Math.min(count, 99).toLocaleString();
                }
                dom.text(badge, text);
                dom.cl.remove(sw, 'hnSwitchBusy');
            });
        };

        dom.on(sw, 'mouseenter', render, { passive: true });
    }

    return async function() {
        const count = await messaging.send('popupPanel', {
            what: 'getScriptCount',
            tabId: popupData.tabId,
        });
        dom.text(
            '#no-scripting .fa-icon-badge',
            (count || 0) !== 0 ? Math.min(count, 99).toLocaleString() : ''
        );
        mustRenderCosmeticFilteringBadge = true;
    };
})();

/******************************************************************************/

const toggleNetFilteringSwitch = function(ev) {
    if ( !popupData || !popupData.pageURL ) { return; }
    messaging.send('popupPanel', {
        what: 'toggleNetFiltering',
        url: popupData.pageURL,
        scope: ev.ctrlKey || ev.metaKey ? 'page' : '',
        state: dom.cl.toggle(dom.body, 'off') === false,
        tabId: popupData.tabId,
    });
    renderTooltips('#switch');
    hashFromPopupData();
};

/******************************************************************************/

const gotoZap = function() {
    messaging.send('popupPanel', {
        what: 'launchElementPicker',
        tabId: popupData.tabId,
        zap: true,
    });

    vAPI.closePopup();
};

/******************************************************************************/

const gotoPick = function() {
    messaging.send('popupPanel', {
        what: 'launchElementPicker',
        tabId: popupData.tabId,
    });

    vAPI.closePopup();
};

/******************************************************************************/

const gotoReport = function() {
    const popupPanel = {
        blocked: popupData.pageCounts.blocked.any,
    };
    const reportedStates = [
        { name: 'enabled', prop: 'netFilteringSwitch', expected: true },
        { name: 'no-cosmetic-filtering', prop: 'noCosmeticFiltering', expected: false },
        { name: 'no-large-media', prop: 'noLargeMedia', expected: false },
        { name: 'no-popups', prop: 'noPopups', expected: false },
        { name: 'no-remote-fonts', prop: 'noRemoteFonts', expected: false },
        { name: 'no-scripting', prop: 'noScripting', expected: false },
        { name: 'can-element-picker', prop: 'canElementPicker', expected: true },
    ];
    for ( const { name, prop, expected } of reportedStates ) {
        if ( popupData[prop] === expected ) { continue; }
        popupPanel[name] = !expected;
    }
    if ( hostnameToSortableTokenMap.size !== 0 ) {
        const network = {};
        const hostnames =
            Array.from(hostnameToSortableTokenMap.keys()).sort(hostnameCompare);
        for ( const hostname of hostnames ) {
            const entry = popupData.hostnameDict[hostname];
            const count = entry.counts.blocked.any;
            if ( count === 0 ) { continue; }
            const domain = entry.domain;
            if ( network[domain] === undefined ) {
                network[domain] = 0;
            }
            network[domain] += count;
        }
        if ( Object.keys(network).length !== 0 ) {
            popupPanel.network = network;
        }
    }
    messaging.send('popupPanel', {
        what: 'launchReporter',
        tabId: popupData.tabId,
        pageURL: popupData.rawURL,
        popupPanel,
    });

    vAPI.closePopup();
};

/******************************************************************************/

const gotoURL = function(ev) {
    if ( this.hasAttribute('href') === false ) { return; }

    ev.preventDefault();

    let url = dom.attr(ev.target, 'href');
    if (
        url === 'logger-ui.html#_' &&
        typeof popupData.tabId === 'number'
    ) {
        url += '+' + popupData.tabId;
    }

    messaging.send('popupPanel', {
        what: 'gotoURL',
        details: {
            url: url,
            select: true,
            index: -1,
            shiftKey: ev.shiftKey
        },
    });

    vAPI.closePopup();
};

/******************************************************************************/

// The popup panel is made of sections. Visibility of sections can
// be toggled on/off.

const maxNumberOfSections = 6;
const sectionFirewallBit = 0b10000;

const computedSections = ( ) =>
    popupData.popupPanelSections &
   ~popupData.popupPanelDisabledSections |
    popupData.popupPanelLockedSections;

const sectionBitsFromAttribute = function() {
    const attr = document.body.dataset.more;
    if ( attr === '' ) { return 0; }
    let bits = 0;
    for ( const c of attr ) {
        bits |= 1 << (c.charCodeAt(0) - 97);
    }
    return bits;
};

const sectionBitsToAttribute = function(bits) {
    const attr = [];
    for ( let i = 0; i < maxNumberOfSections; i++ ) {
        const bit = 1 << i;
        if ( (bits & bit) === 0 ) { continue; }
        attr.push(String.fromCharCode(97 + i));
    }
    return attr.join('');
};

const setSections = function(bits) {
    const value = sectionBitsToAttribute(bits);
<529 lines not shown>