More work toward re-hauling the user interface

This commit specifically address bringing the desktop version of the new popup panel's look and feel more inline with the classic one: - Hide tool captions on desktop - Bring back no-popups switch on desktop - Bring back tooltips on desktop (though they are now rendered natively by the browser) - Use the Photon icons suggested by @brampitoyo for the no-popups and no-remote-fonts switches
2024-11-06 19:02:30 +01:00 · 2020-04-27 10:33:49 -04:00 · 2020-04-27 10:33:49 -04:00 · db9c321855
commit db9c321855
parent a733944624
13 changed files with 120 additions and 72 deletions
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@ -179,21 +179,25 @@
    "message":"Click to no longer disable JavaScript on this site",
    "description":"Tooltip for the no-scripting per-site switch"
  },
+  "popupNoPopups_v2":{
+    "message":"Pop-up windows",
+    "description":"Caption for the no-popups per-site switch"
+  },
  "popupNoLargeMedia_v2":{
    "message":"Large media elements",
-    "description":"Tip for the no-large-media per-site switch"
+    "description":"Caption for the no-large-media per-site switch"
  },
  "popupNoCosmeticFiltering_v2":{
    "message":"Cosmetic filtering",
-    "description":"Tip for the no-cosmetic-filtering per-site switch"
+    "description":"Caption for the no-cosmetic-filtering per-site switch"
  },
  "popupNoRemoteFonts_v2":{
    "message":"Remote fonts",
-    "description":"Tip for the no-remote-fonts per-site switch"
+    "description":"Caption for the no-remote-fonts per-site switch"
  },
  "popupNoScripting_v2":{
    "message":"JavaScript",
-    "description":"Tip for the no-scripting per-site switch"
+    "description":"Caption for the no-scripting per-site switch"
  },
  "popupMoreButton_v2":{
    "message":"More",
--- a/src/css/document-blocked.css
+++ b/src/css/document-blocked.css
@ -88,8 +88,8 @@ body[dir="rtl"] #theURL > p > span {
    left: 0;
    }
 #theURL > p:hover > span {
-    color: var(--fg-0);
-    fill: var(--fg-0);
+    color: var(--default-ink);
+    fill: var(--default-ink);
    }
 #theURL > p > span:before {
    content: '\f010';
--- a/src/css/fa-icons.css
+++ b/src/css/fa-icons.css
@ -40,6 +40,7 @@

 .fa-icon > svg {
    height: 1em;
+    overflow: visible;
    width: 1em;
    }

--- a/src/css/popup-fenix.css
+++ b/src/css/popup-fenix.css
@ -127,39 +127,35 @@ body.needSave #revertRules {
 .toolRibbon {
    align-items: start;
    display: grid;
-    grid-template: auto / 25% 25% 25% 25%;
+    grid-auto-columns: 1fr;
+    grid-auto-flow: column;
+    grid-template: auto / repeat(4, 1fr);
    justify-items: center;
    margin: 1em 0;
    white-space: normal;
    }
 .toolRibbon .tool {
+    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: 1.4em;
    min-width: 32px;
-    }
-
-.tool {
-    cursor: pointer;
    padding: 0 0.5em;
    unicode-bidi: embed;
    visibility: hidden;
    }
-.tool.enabled {
+.toolRibbon .tool.enabled {
    visibility: visible;
    }
-.tool [data-i18n] {
+.toolRibbon .tool .caption {
    font: 10px/12px sans-serif;
    margin-top: 0.5em;
    text-align: center;
    }
-body.no-tooltips .tool [data-i18n] {
-    display: none;
+body.mobile.no-tooltips .toolRibbon .tool {
+    font-size: 1.6em;
    }

-.statValue {
-    margin: 0;
-    }
 #extraTools .fa-icon {
    align-self: center;
    position: relative;
@ -470,10 +466,31 @@ body.advancedUser #firewall > div > span.noopRule.ownRule,
    width: 100%;
    }

+/* configurable UI elements */
+:root.desktop .toolRibbon .caption,
+:root.mobile body.no-tooltips .toolRibbon .caption,
+:root.mobile body[data-ui~="-captions"] .toolRibbon .caption {
+    display: none;
+    }
+:root.mobile .toolRibbon .caption,
+:root.desktop body[data-ui~="+captions"] .toolRibbon .caption {
+    display: inherit;
+    }
+:root.mobile #no-popups,
+:root body[data-ui~="-no-popups"] #no-popups {
+    display: none;
+    }
+:root.desktop #no-popups,
+:root body[data-ui~="+no-popups"] #no-popups {
+    display: flex;
+    }
+
 /* mouse-driven devices */
+:root.desktop {
+    overflow: hidden;
+    }
 :root.desktop body {
    max-width: max(100vw, 800px);
-    overflow: auto;
    }
 :root.desktop #panes {
    flex-direction: row-reverse;
@ -499,6 +516,3 @@ body.advancedUser #firewall > div > span.noopRule.ownRule,
 :root.desktop .tool:hover {
    background-color: var(--button-surface);
    }
-:root.desktop .tool [data-i18n] {
-    width: min-content;
-    }
--- a/src/css/popup.css
+++ b/src/css/popup.css
@ -433,7 +433,7 @@ body.advancedUser #firewallContainer > div > span.noopRule,
    }
 body.advancedUser #firewallContainer > div > span.ownRule,
 #firewallContainer > div > span.ownRule {
-    color: var(--bg-0);
+    color: var(--bg-popup-cell-block-own);
    }
 body.advancedUser #firewallContainer > div > span.allowRule.ownRule,
 #actionSelector > #dynaAllow:hover {
--- a/src/css/themes/default.css
+++ b/src/css/themes/default.css
@ -50,8 +50,6 @@
 :root {
    --font-size: 14px;

-    --bg-0: var(--white);
-    --fg-0: var(--ink-80);
    --default-ink: var(--ink-80);
    --default-ink-a4: var(--ink-80-a4);
    --default-surface: var(--light-gray-10);
@ -142,14 +140,12 @@
    Use slightly darker inks on lower pixel-density devices to improve
    contrast.
 */
-@media (max-resolution: 150dpi) {
-    :root {
+:root:not(.hidpi) {
    --default-ink: var(--ink-90);
    --button-ink: var(--ink-90);
    --fieldset-header-ink: var(--ink-50);
    --link-ink: var(--violet-80);
 }
-}

 /**
 Source for color-blind color scheme from https://github.com/WyohKnott:
--- a/src/img/material-design.svg
+++ b/src/img/material-design.svg
@ -1,15 +1,16 @@
 <!--

    The SVG definitions were imported piecemeal from:
-        https://material.io/components/selection-controls
+        checkbox:
+        - https://material.io/develop/web/components/input-controls/checkboxes/
        
    License:
-    - https://github.com/material-components/material-components/blob/develop/LICENSE
+    - https://github.com/material-components/material-components-web/blob/master/LICENSE

 -->

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
    <defs>
-    <symbol id="checkmark" viewBox="0 0 24 24"><path d="M 1.73 12.91 L 8.1 19.28 L 22.79 4.59"/></symbol>
+    <symbol id="checkmark" viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></symbol>
    </defs>
 </svg>
--- a/src/img/photon.svg
+++ b/src/img/photon.svg
@ -0,0 +1,16 @@
+<!--
+
+    The SVG definitions were imported piecemeal from:
+        - https://design.firefox.com/icons/viewer/#
+        
+    License:
+    - [to be determined]
+
+-->
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
+    <defs>
+    <symbol id="ph-popups" viewBox="0 0 20 20"><path d="m 3.146,1.8546316 a 0.5006316,0.5006316 0 0 0 0.708,-0.708 l -1,-1 a 0.5006316,0.5006316 0 0 0 -0.708,0.708 z m -0.836,2.106 a 0.406,0.406 0 0 0 0.19,0.04 0.5,0.5 0 0 0 0.35,-0.851 0.493,0.493 0 0 0 -0.54,-0.109 0.361,0.361 0 0 0 -0.16,0.109 0.485,0.485 0 0 0 0,0.7 0.372,0.372 0 0 0 0.16,0.111 z m 3,-3 a 0.406,0.406 0 0 0 0.19,0.04 0.513,0.513 0 0 0 0.5,-0.5 0.473,0.473 0 0 0 -0.15,-0.351 0.5,0.5 0 0 0 -0.7,0 0.485,0.485 0 0 0 0,0.7 0.372,0.372 0 0 0 0.16,0.111 z m 13.19,1.04 a 0.5,0.5 0 0 0 0.354,-0.146 l 1,-1 a 0.5006316,0.5006316 0 0 0 -0.708,-0.708 l -1,1 a 0.5,0.5 0 0 0 0.354,0.854 z m 1.35,1.149 a 0.361,0.361 0 0 0 -0.16,-0.109 0.5,0.5 0 0 0 -0.38,0 0.361,0.361 0 0 0 -0.16,0.109 0.485,0.485 0 0 0 0,0.7 0.372,0.372 0 0 0 0.16,0.11 0.471,0.471 0 0 0 0.38,0 0.372,0.372 0 0 0 0.16,-0.11 0.469,0.469 0 0 0 0.15,-0.349 0.43,0.43 0 0 0 -0.04,-0.19 0.358,0.358 0 0 0 -0.11,-0.161 z m -3.54,-2.189 a 0.406,0.406 0 0 0 0.19,0.04 0.469,0.469 0 0 0 0.35,-0.15 0.353,0.353 0 0 0 0.11,-0.161 0.469,0.469 0 0 0 0,-0.379 0.358,0.358 0 0 0 -0.11,-0.161 0.361,0.361 0 0 0 -0.16,-0.109 0.493,0.493 0 0 0 -0.54,0.109 0.358,0.358 0 0 0 -0.11,0.161 0.43,0.43 0 0 0 -0.04,0.19 0.469,0.469 0 0 0 0.15,0.35 0.372,0.372 0 0 0 0.16,0.11 z m 2.544,15.1860004 a 0.5006316,0.5006316 0 0 0 -0.708,0.708 l 1,1 a 0.5006316,0.5006316 0 0 0 0.708,-0.708 z m 0.3,-2 a 0.473,0.473 0 0 0 -0.154,0.354 0.4,0.4 0 0 0 0.04,0.189 0.353,0.353 0 0 0 0.11,0.161 0.469,0.469 0 0 0 0.35,0.15 0.406,0.406 0 0 0 0.19,-0.04 0.372,0.372 0 0 0 0.16,-0.11 0.454,0.454 0 0 0 0.15,-0.35 0.473,0.473 0 0 0 -0.15,-0.351 0.5,0.5 0 0 0 -0.7,0 z m -3,3 a 0.473,0.473 0 0 0 -0.154,0.354 0.454,0.454 0 0 0 0.15,0.35 0.372,0.372 0 0 0 0.16,0.11 0.406,0.406 0 0 0 0.19,0.04 0.469,0.469 0 0 0 0.35,-0.15 0.353,0.353 0 0 0 0.11,-0.161 0.4,0.4 0 0 0 0.04,-0.189 0.473,0.473 0 0 0 -0.15,-0.351 0.5,0.5 0 0 0 -0.7,0 z M 18,5.0006316 a 3,3 0 0 0 -3,-3 H 7 a 3,3 0 0 0 -3,3 v 8.0000004 a 3,3 0 0 0 3,3 h 8 a 3,3 0 0 0 3,-3 z m -2,8.0000004 a 1,1 0 0 1 -1,1 H 7 a 1,1 0 0 1 -1,-1 V 7.0006316 H 16 Z M 16,6.0006316 H 6 v -1 a 1,1 0 0 1 1,-1 h 8 a 1,1 0 0 1 1,1 z M 11,18.000632 H 3 a 1,1 0 0 1 -1,-1 v -6 h 1 v -1 H 2 V 9.0006316 a 1,1 0 0 1 1,-1 v -2 a 3,3 0 0 0 -3,3 v 8.0000004 a 3,3 0 0 0 3,3 h 8 a 3,3 0 0 0 3,-3 h -2 a 1,1 0 0 1 -1,1 z"/></symbol>
+    <symbol id="ph-readermode-text-size" viewBox="0 0 20 12.5"><path d="M 10.422,11.223 A 0.712,0.712 0 0 1 10.295,11.007 L 6.581,0 H 4.68 L 0.933,11.309 0,11.447 V 12.5 H 3.594 V 11.447 L 2.655,11.325 A 0.3,0.3 0 0 1 2.468,11.211 0.214,0.214 0 0 1 2.419,10.974 L 3.341,8.387 h 3.575 l 0.906,2.652 a 0.18,0.18 0 0 1 -0.016,0.18 0.217,0.217 0 0 1 -0.139,0.106 L 6.679,11.447 V 12.5 h 4.62 V 11.447 L 10.663,11.325 A 0.512,0.512 0 0 1 10.422,11.223 Z M 3.659,7.399 5.063,2.57 6.5,7.399 Z M 19.27,11.464 A 0.406,0.406 0 0 1 19.009,11.337 0.368,0.368 0 0 1 18.902,11.072 V 6.779 A 3.838,3.838 0 0 0 18.67,5.318 1.957,1.957 0 0 0 18.01,4.457 2.48,2.48 0 0 0 16.987,4.044 7.582,7.582 0 0 0 15.67,3.938 a 6.505,6.505 0 0 0 -1.325,0.139 5.2,5.2 0 0 0 -1.2,0.4 2.732,2.732 0 0 0 -0.864,0.624 1.215,1.215 0 0 0 -0.331,0.833 0.532,0.532 0 0 0 0.119,0.383 0.665,0.665 0 0 0 0.257,0.172 0.916,0.916 0 0 0 0.375,0.041 h 1.723 V 4.942 A 4.429,4.429 0 0 1 14.611,4.91 2.045,2.045 0 0 1 14.836,4.885 c 0.09,0 0.192,-0.008 0.306,-0.008 a 1.849,1.849 0 0 1 0.808,0.151 1.247,1.247 0 0 1 0.71,0.89 2.164,2.164 0 0 1 0.049,0.51 c 0,0.076 -0.008,0.152 -0.008,0.228 0,0.076 -0.008,0.139 -0.008,0.221 v 0.2 q -1.152,0.252 -1.976,0.489 a 12.973,12.973 0 0 0 -1.391,0.474 4.514,4.514 0 0 0 -0.91,0.485 2.143,2.143 0 0 0 -0.527,0.523 1.594,1.594 0 0 0 -0.245,0.592 3.739,3.739 0 0 0 -0.061,0.693 2.261,2.261 0 0 0 0.171,0.9 2.024,2.024 0 0 0 0.469,0.682 2.084,2.084 0 0 0 0.693,0.432 2.364,2.364 0 0 0 0.852,0.151 3.587,3.587 0 0 0 1.068,-0.159 6.441,6.441 0 0 0 1.835,-0.877 l 0.22,0.832 H 20 v -0.783 z m -2.588,-0.719 a 4.314,4.314 0 0 1 -0.5,0.188 5.909,5.909 0 0 1 -0.493,0.123 2.665,2.665 0 0 1 -0.543,0.057 1.173,1.173 0 0 1 -0.861,-0.363 1.166,1.166 0 0 1 -0.245,-0.392 1.357,1.357 0 0 1 -0.086,-0.486 1.632,1.632 0 0 1 0.123,-0.657 1.215,1.215 0 0 1 0.432,-0.5 3.151,3.151 0 0 1 0.837,-0.392 12.429,12.429 0 0 1 1.334,-0.334 z"/></symbol>
+    </defs>
+</svg>
--- a/src/js/background.js
+++ b/src/js/background.js
@ -70,6 +70,7 @@ const µBlock = (( ) => { // jshint ignore:line
        selfieAfter: 3,
        strictBlockingBypassDuration: 120,
        suspendTabsUntilReady: 'unset',
+        uiPopupConfig: 'undocumented',
        uiFlavor: 'unset',
        updateAssetBypassBrowserCache: false,
        userResourcesLocation: 'unset',
--- a/src/js/fa-icons.js
+++ b/src/js/fa-icons.js
@ -29,12 +29,19 @@ const faIconsInit = function(root) {
        if ( icon.firstChild === null || icon.firstChild.nodeType !== 3 ) {
            continue;
        }
-        const name = icon.firstChild.nodeValue;
        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svg.classList.add('fa-icon_' + name);
        const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
-        const href = '/img/fontawesome/fontawesome-defs.svg#' + name;
-        use.setAttribute('href', href);
+        const name = icon.firstChild.nodeValue;
+        let file;
+        if ( name.startsWith('ph-') ) {
+            file = 'photon';
+        } else if ( name.startsWith('md-') ) {
+            file = 'material-design';
+        } else {
+            file = 'fontawesome/fontawesome-defs';
+        }
+        svg.classList.add('fa-icon_' + name);
+        use.setAttribute('href', `/img/${file}.svg#${name}`);
        svg.appendChild(use);
        icon.replaceChild(svg, icon.firstChild);
        if ( icon.classList.contains('fa-icon-badged') ) {
--- a/src/js/messaging.js
+++ b/src/js/messaging.js
@ -288,6 +288,10 @@ const popupDataFromTabId = function(tabId, tabTitle) {
        tooltipsDisabled: µb.userSettings.tooltipsDisabled
    };

+    if ( µb.hiddenSettings.uiPopupConfig !== 'undocumented' ) {
+        r.uiPopupConfig = µb.hiddenSettings.uiPopupConfig;
+    }
+
    const pageStore = µb.pageStoreFromTabId(tabId);
    if ( pageStore ) {
        // https://github.com/gorhill/uBlock/issues/2105
--- a/src/js/popup-fenix.js
+++ b/src/js/popup-fenix.js
@ -504,24 +504,16 @@ const renderPopup = function() {
 //   Use tooltip for ARIA purpose.

 const renderTooltips = function(selector) {
-    for ( const entry of tooltipTargetSelectors ) {
-        if ( selector !== undefined && entry[0] !== selector ) { continue; }
+    for ( const [ key, details ] of tooltipTargetSelectors ) {
+        if ( selector !== undefined && key !== selector ) { continue; }
+        const elem = uDom.nodeFromSelector(key);
+        if ( elem.hasAttribute('title') === false ) { continue; }
        const text = vAPI.i18n(
-            entry[1].i18n +
-            (uDom.nodeFromSelector(entry[1].state) === null ? '1' : '2')
+            details.i18n +
+            (uDom.nodeFromSelector(details.state) === null ? '1' : '2')
        );
-        const elem = uDom.nodeFromSelector(entry[0]);
        elem.setAttribute('aria-label', text);
-        const tip = elem.querySelector('.tip');
-        if ( tip !== null ) {
-            tip.textContent = text;
-        } else {
-            elem.setAttribute('data-tip', text);
-        }
-        if ( tip === null && selector !== undefined ) {
-            uDom.nodeFromId('tooltip').textContent =
-                elem.getAttribute('data-tip');
-        }
+        elem.setAttribute('title', text);
    }
 };

@ -533,6 +525,13 @@ const tooltipTargetSelectors = new Map([
            i18n: 'popupPowerSwitchInfo',
        }
    ],
+    [
+        '#no-popups',
+        {
+            state: '#no-popups.on',
+            i18n: 'popupTipNoPopups'
+        }
+    ],
    [
        '#no-large-media',
        {
@ -585,13 +584,17 @@ let renderOnce = function() {

    // https://github.com/uBlockOrigin/uBlock-issues/issues/22
    if ( popupData.advancedUserEnabled !== true ) {
-        uDom('#firewall [data-i18n-tip][data-src]').removeAttr('data-tip');
+        uDom('#firewall [title][data-src]').removeAttr('title');
    }

-    body.classList.toggle(
-        'no-tooltips',
-        popupData.tooltipsDisabled === true
-    );
+    if ( popupData.uiPopupConfig !== undefined ) {
+        document.body.setAttribute('data-ui', popupData.uiPopupConfig);
+    }
+
+    body.classList.toggle('no-tooltips', popupData.tooltipsDisabled === true);
+    if ( popupData.tooltipsDisabled === true ) {
+        uDom('[title]').removeAttr('title');
+    }
 };

 /******************************************************************************/
@ -986,7 +989,7 @@ const toggleHostnameSwitch = async function(ev) {
        return;
    }
    target.classList.toggle('on');
-    renderTooltips('#' + switchName);
+    renderTooltips(`#${switchName}`);

    const response = await messaging.send('popupPanel', {
        what: 'toggleHostnameSwitch',
--- a/src/popup-fenix.html
+++ b/src/popup-fenix.html
@ -16,10 +16,10 @@
    <div id="sticky">
        <div>
            <div class="rulesetTools">
-                <span id="saveRules" class="fa-icon" data-i18n-tip="popupTipSaveRules" data-tip-position="under">lock</span>
-                <span id="revertRules" class="fa-icon" data-i18n-tip="popupTipRevertRules" data-tip-position="under">eraser</span>
+                <span id="saveRules" class="fa-icon" data-i18n-title="popupTipSaveRules">lock</span>
+                <span id="revertRules" class="fa-icon" data-i18n-title="popupTipRevertRules">eraser</span>
            </div>
-            <div id="switch" role="button" aria-label data-tip-position="under" tabindex="0">
+            <div id="switch" role="button" aria-label tabindex="0" title>
                <span class="fa-icon">power-off</span>
            </div>
            <div class="rulesetTools">
@ -30,10 +30,10 @@
    </div>
    <div id="main">
        <div id="basicTools" class="toolRibbon">
-            <span id="gotoZap" class="fa-icon tool">bolt<span data-i18n="popupTipZapper"></span></span>
-            <span id="gotoPick" class="fa-icon tool">eye-dropper<span data-i18n="popupTipPicker"></span></span>
-            <a href="logger-ui.html#_" class="fa-icon tool enabled" aria-label="data-tip" target="uBOLogger" tabindex="0">list-alt<span data-i18n="popupTipLog"></span></a>
-            <a href="dashboard.html" class="fa-icon tool enabled" aria-label="data-tip" target="uBODashboard" tabindex="0">sliders<span data-i18n="popupTipDashboard"></span></a>
+            <span id="gotoZap" class="fa-icon tool" data-i18n-title="popupTipZapper">bolt<span class="caption" data-i18n="popupTipZapper"></span></span>
+            <span id="gotoPick" class="fa-icon tool" data-i18n-title="popupTipPicker">eye-dropper<span class="caption" data-i18n="popupTipPicker"></span></span>
+            <a href="logger-ui.html#_" class="fa-icon tool enabled" target="uBOLogger" tabindex="0" data-i18n-title="popupTipLog">list-alt<span class="caption" data-i18n="popupTipLog"></span></a>
+            <a href="dashboard.html" class="fa-icon tool enabled" target="uBODashboard" tabindex="0" data-i18n-title="popupTipDashboard">sliders<span class="caption" data-i18n="popupTipDashboard"></span></a>
        </div>
        <hr>
        <div id="basicStats" class="itemRibbon">
@ -43,10 +43,11 @@
        </div>
        <hr>
        <div id="extraTools" class="toolRibbon">
-            <span id="no-large-media" class="hnSwitch tool enabled" role="button" aria-label tabindex="0"><span class="fa-icon fa-icon-badged">film<svg class="nope" viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span><span data-i18n="popupNoLargeMedia_v2"></span></span>
-            <span id="no-cosmetic-filtering" class="hnSwitch tool enabled" role="button" aria-label tabindex="0"><span class="fa-icon fa-icon-badged">eye-slash<svg class="nope" viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span><span data-i18n="popupNoCosmeticFiltering_v2"></span></span>
-            <span id="no-remote-fonts" class="hnSwitch tool enabled" role="button" aria-label tabindex="0"><span class="fa-icon fa-icon-badged">font<svg class="nope" viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span><span data-i18n="popupNoRemoteFonts_v2"></span></span>
-            <span id="no-scripting" class="hnSwitch tool enabled" role="button" aria-label tabindex="0"><span class="fa-icon fa-icon-badged">code<svg class="nope" viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span><span data-i18n="popupNoScripting_v2"></span></span>
+            <span id="no-popups" class="hnSwitch tool enabled" role="button" aria-label tabindex="0" title><span class="fa-icon fa-icon-badged">ph-popups<svg class="nope" viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span><span class="caption" data-i18n="popupNoPopups_v2"></span></span>
+            <span id="no-large-media" class="hnSwitch tool enabled" role="button" aria-label tabindex="0" title><span class="fa-icon fa-icon-badged">film<svg class="nope" viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span><span class="caption" data-i18n="popupNoLargeMedia_v2"></span></span>
+            <span id="no-cosmetic-filtering" class="hnSwitch tool enabled" role="button" aria-label tabindex="0" title><span class="fa-icon fa-icon-badged">eye-slash<svg class="nope" viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span><span class="caption" data-i18n="popupNoCosmeticFiltering_v2"></span></span>
+            <span id="no-remote-fonts" class="hnSwitch tool enabled" role="button" aria-label tabindex="0" title><span class="fa-icon fa-icon-badged">ph-readermode-text-size<svg class="nope" viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span><span class="caption" data-i18n="popupNoRemoteFonts_v2"></span></span>
+            <span id="no-scripting" class="hnSwitch tool enabled" role="button" aria-label tabindex="0" title><span class="fa-icon fa-icon-badged">code<svg class="nope" viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span><span class="caption" data-i18n="popupNoScripting_v2"></span></span>
        </div>
        <hr>
        <div id="moreButton" class="itemRibbon">
@ -54,7 +55,7 @@
        </div>
    </div>
    <div id="firewall">
-        <div data-des="*" data-type="*"><span data-i18n="popupAnyRulePrompt"></span><span data-src="/" data-i18n-tip="popupTipGlobalRules" data-tip-position="under"> </span><span data-src="." data-i18n-tip="popupTipLocalRules" data-tip-position="under"> </span></div>
+        <div data-des="*" data-type="*"><span data-i18n="popupAnyRulePrompt"></span><span data-src="/" data-i18n-title="popupTipGlobalRules"> </span><span data-src="." data-i18n-title="popupTipLocalRules"> </span></div>
        <div data-des="*" data-type="image"><span data-i18n="popupImageRulePrompt"></span><span data-src="/"> </span><span data-src="."> </span></div>
        <div data-des="*" data-type="3p"><span data-i18n="popup3pAnyRulePrompt"></span><span data-src="/"> </span><span data-src="."> </span></div>
        <div data-des="*" data-type="inline-script"><span data-i18n="popupInlineScriptRulePrompt"></span><span data-src="/"> </span><span data-src="."> </span></div>