More work toward re-hauling the user interface

gorhill · gorhill · commit db9c32185538 · 2020-04-27T10:33:49.000-04:00
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
diff --git 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",
diff --git 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';
diff --git 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;
     }
 
diff --git 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;
-    }
diff --git 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 {
diff --git 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,13 +140,11 @@
     Use slightly darker inks on lower pixel-density devices to improve
     contrast.
 */
-@media (max-resolution: 150dpi) {
-    :root {
-        --default-ink: var(--ink-90);
-        --button-ink: var(--ink-90);
-        --fieldset-header-ink: var(--ink-50);
-        --link-ink: var(--violet-80);
-    }
+:root:not(.hidpi) {
+    --default-ink: var(--ink-90);
+    --button-ink: var(--ink-90);
+    --fieldset-header-ink: var(--ink-50);
+    --link-ink: var(--violet-80);
 }
 
 /**
diff --git 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="https://www.w3.org/2000/svg" xmlns:xlink="https://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>
diff --git 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="https://www.w3.org/2000/svg" xmlns:xlink="https://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>
diff --git 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',
diff --git 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('https://www.w3.org/2000/svg', 'svg');
-        svg.classList.add('fa-icon_' + name);
         const use = document.createElementNS('https://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') ) {
diff --git 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
diff --git 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',
diff --git a/src/popup-fenix.html b/src/popup-fenix.html

Original file line number	Diff line number	Diff line change
`@@ -88,8 +88,8 @@ body[dir="rtl"] #theURL > p > span {`
`88`	`88`	`left: 0;`
`89`	`89`	`}`
`90`	`90`	`#theURL > p:hover > span {`
`91`		`- color: var(--fg-0);`
`92`		`- fill: var(--fg-0);`
	`91`	`+ color: var(--default-ink);`
	`92`	`+ fill: var(--default-ink);`
`93`	`93`	`}`
`94`	`94`	`#theURL > p > span:before {`
`95`	`95`	`content: '\f010';`
Original file line number	Diff line number	Diff line change
`@@ -40,6 +40,7 @@`
`40`	`40`
`41`	`41`	`.fa-icon > svg {`
`42`	`42`	`height: 1em;`
	`43`	`+ overflow: visible;`
`43`	`44`	`width: 1em;`
`44`	`45`	`}`
`45`	`46`
Original file line number	Diff line number	Diff line change
`@@ -433,7 +433,7 @@ body.advancedUser #firewallContainer > div > span.noopRule,`
`433`	`433`	`}`
`434`	`434`	`body.advancedUser #firewallContainer > div > span.ownRule,`
`435`	`435`	`#firewallContainer > div > span.ownRule {`
`436`		`- color: var(--bg-0);`
	`436`	`+ color: var(--bg-popup-cell-block-own);`
`437`	`437`	`}`
`438`	`438`	`body.advancedUser #firewallContainer > div > span.allowRule.ownRule,`
`439`	`439`	`#actionSelector > #dynaAllow:hover {`