Make the new "fenix" popup panel the default one

The old "classic" popup panel will still be used
when at least one of the following is true:

- advanced setting `uiFlavor` is set to `classic`; or
- the browser is Chromium 65 or older; or
- the browser is Firefox 67 or older

The default configuration of the new popup panel
at installation time is to show the power button,
statistics and the basic tool icons, i.e. access
to dashboard, logger, pickers.

For existing installations, the new popup panel
will be configured by respecting the existing
configuration of the classic one.

The new popup panel is currently already in use
on Firefox for Android, and the visual redesign
was made according to suggestions and feedback
from <https://github.com/brampitoyo> to be
optimal for Firefox for Android.

The new popup panel will allow closing the following
pending issues:

- uBlockOrigin/uBlock-issues#255
- uBlockOrigin/uBlock-issues#178

Author: gorhill

platform/chromium/manifest.json

@@ -9,7 +9,7 @@
       "32": "img/icon_32.png"
     },
     "default_title": "uBlock Origin",
-    "default_popup": "popup.html"
+    "default_popup": "popup-fenix.html"
   },
   "commands": {
     "launch-element-zapper": {

platform/firefox/manifest.json

@@ -10,7 +10,7 @@
       "32": "img/icon_32.png"
     },
     "default_title": "uBlock Origin",
-    "default_popup": "popup.html"
+    "default_popup": "popup-fenix.html"
   },
   "browser_specific_settings": {
     "gecko": {

platform/opera/manifest.json

@@ -8,7 +8,7 @@
       "16": "img/icon_16.png",
       "32": "img/icon_32.png"
     },
-    "default_popup": "popup.html",
+    "default_popup": "popup-fenix.html",
     "default_title": "uBlock Origin"
   },
   "commands": {

src/_locales/en/messages.json

@@ -201,7 +201,11 @@
   },
   "popupMoreButton_v2":{
     "message":"More",
-    "description":"Label to be used to toggle overview panel"
+    "description":"Label to be used to show popup panel sections"
+  },
+  "popupLessButton_v2":{
+    "message":"Less",
+    "description":"Label to be used to hide popup panel sections"
   },
   "popupTipGlobalRules":{
     "message":"Global rules: this column is for rules which apply to all sites.",
@@ -259,6 +263,10 @@
     "message":"{{count}} out of {{total}}",
     "description":"appears in popup"
   },
+  "popupVersion":{
+    "message":"Version",
+    "description":"Example of use: Version 1.26.4"
+  },
   "pickerCreate":{
     "message":"Create",
     "description":"English: Create"

src/css/popup-fenix.css

@@ -56,11 +56,11 @@ hr {
     align-items: stretch;
     display: flex;
     justify-content: space-between;
-    margin: var(--popup-default-gap) 0.5em;
+    margin: 0.5em 0.5em var(--popup-default-gap) 0.5em;
     }
 #switch {
     display: flex;
-    flex-grow: 2;
+    flex-grow: 3;
     justify-content: center;
     }
 #switch .fa-icon {
@@ -71,10 +71,6 @@ hr {
     margin: 0;
     padding: 0;
     }
-#switch .fa-icon:hover {
-    color: var(--popup-power-ink-hover);
-    fill: var(--popup-power-ink-hover);
-    }
 body.off #switch .fa-icon {
     color: var(--fg-0-20);
     fill: var(--fg-0-20);
@@ -85,15 +81,15 @@ body.off #switch .fa-icon {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    flex-grow: 1;
+    flex-grow: 2;
     justify-content: space-evenly;
     }
 .rulesetTools [id] {
     background-color: var(--bg-transient-notice);
     border: 1px solid #ddc;
     border-radius: 4px;
     cursor: pointer;
-    fill: #888;
+    fill: var(--default-ink-a50);
     flex-grow: 1;
     font-size: 2.2em;
     padding: 0;
@@ -177,9 +173,23 @@ body.mobile.no-tooltips .toolRibbon .tool {
     visibility: visible;
     }
 
-body:not(.dfEnabled) #moreButton .fa-icon {
+.moreOrLess > span {
+    cursor: pointer;
+    }
+#moreButton .fa-icon {
     transform: rotate(180deg);
     }
+#lessButton {
+    text-align: right;
+    }
+body[data-more="a b c d e"] #moreButton {
+    pointer-events: none;
+    visibility: hidden;
+    }
+body[data-more=""] #lessButton {
+    pointer-events: none;
+    visibility: hidden;
+    }
 
 #tooltip {
     background-color: var(--bg-tooltip);
@@ -224,9 +234,6 @@ body[dir="rtl"] #tooltip {
     text-align: right;
     --rule-cell-width: 5em;
     }
-body:not(.dfEnabled) #firewall {
-    display: none;
-    }
 #firewall > div {
     border: 0;
     direction: ltr;
@@ -246,11 +253,11 @@ body:not(.dfEnabled) #firewall {
 #firewall.expanded > div.isSubDomain.expandException:not(.isRootContext) {
     display: none;
     }
-#firewall > div > span {
+#firewall > div > span,
+#actionSelector > #dynaCounts {
     background-color: var(--bg-popup-cell-2);
     border: none;
     box-sizing: border-box;
-    -moz-box-sizing: border-box;
     display: inline-flex;
     padding: 0.4em 0;
     position: relative;
@@ -313,7 +320,8 @@ body:not(.dfEnabled) #firewall {
 #firewall.expanded > div:not(.expandException) > span:nth-of-type(3),
 #firewall:not(.expanded) > div.expandException > span:nth-of-type(3),
 #firewall:not(.expanded) > div.isDomain:not(.expandException) > span:nth-of-type(4),
-#firewall.expanded > div.isDomain.expandException > span:nth-of-type(4) {
+#firewall.expanded > div.isDomain.expandException > span:nth-of-type(4),
+#actionSelector > #dynaCounts {
     display: inline-flex;
     justify-content: space-between;
     }
@@ -423,15 +431,15 @@ body.advancedUser #firewall > div > span.ownRule,
     color: var(--default-surface);
     }
 body.advancedUser #firewall > div > span.allowRule.ownRule,
-#actionSelector > #dynaAllow:hover {
+:root.desktop #actionSelector > #dynaAllow:hover {
     background-color: var(--bg-popup-cell-allow-own);
     }
 body.advancedUser #firewall > div > span.blockRule.ownRule,
-#actionSelector > #dynaBlock:hover {
+:root.desktop #actionSelector > #dynaBlock:hover {
     background-color: var(--bg-popup-cell-block-own);
     }
 body.advancedUser #firewall > div > span.noopRule.ownRule,
-#actionSelector > #dynaNoop:hover {
+:root.desktop #actionSelector > #dynaNoop:hover {
     background-color: var(--bg-popup-cell-noop-own);
     }
 
@@ -458,11 +466,8 @@ body.advancedUser #firewall > div > span.noopRule.ownRule,
     width: 33.5%;
     }
 #actionSelector > #dynaCounts {
-    align-items: center;
     background-color: transparent;
-    display: inline-flex;
     height: 100%;
-    justify-content: space-between;
     left: 0;
     pointer-events: none;
     position: absolute;
@@ -488,6 +493,19 @@ body.advancedUser #firewall > div > span.noopRule.ownRule,
 :root body[data-ui~="+no-popups"] #no-popups {
     display: flex;
     }
+body:not([data-more~="a"]) [data-more="a"],
+body:not([data-more~="b"]) [data-more="b"],
+body:not([data-more~="c"]) [data-more="c"],
+body:not([data-more~="e"]) [data-more="e"] {
+    height: 0;
+    margin-bottom: 0;
+    margin-top: 0;
+    overflow-y: hidden;
+    visibility: hidden;
+    }
+body:not([data-more~="d"]) [data-more="d"] {
+    display: none;
+    }
 
 /* mouse-driven devices */
 :root.desktop {
@@ -505,6 +523,13 @@ body.advancedUser #firewall > div > span.noopRule.ownRule,
     max-width: 300px;
     width: max-content;
     }
+:root.desktop #switch .fa-icon:hover {
+    color: var(--popup-power-ink-hover);
+    fill: var(--popup-power-ink-hover);
+    }
+:root.desktop .rulesetTools [id]:hover {
+    fill: var(--default-ink);
+    }
 :root.desktop #firewall {
     direction: rtl;
     flex-grow: 1;
@@ -513,11 +538,14 @@ body.advancedUser #firewall > div > span.noopRule.ownRule,
     max-height: max(100vh, 600px);
     min-width: 360px;
     overflow-y: auto;
-    width: max-content;
+    width: min-content;
     }
 :root.desktop .tool {
     padding: 0.5em;
     }
 :root.desktop .tool:hover {
     background-color: var(--button-surface);
     }
+:root.desktop .moreOrLess > span:hover {
+    background-color: var(--button-surface);
+    }

src/css/themes/default.css

@@ -18,6 +18,7 @@
     --ink-50: #291d4f;
     --ink-80: #20123a;
     --ink-80-a4: #20123a0a;
+    --ink-80-a50: #20123a88;
     --ink-90: #1d1133;
     --light-gray-10: #f9f9fb;
     --light-gray-30: #e0e0e6;
@@ -53,6 +54,7 @@
 
     --default-ink: var(--ink-80);
     --default-ink-a4: var(--ink-80-a4);
+    --default-ink-a50: var(--ink-80-a50);
     --default-surface: var(--light-gray-10);
 
     --bg-1: hsla(240, 20%, 98%, 1);

src/js/background.js

@@ -92,6 +92,8 @@ const µBlock = (( ) => { // jshint ignore:line
             ignoreGenericCosmeticFilters: vAPI.webextFlavor.soup.has('mobile'),
             largeMediaSize: 50,
             parseAllABPHideFilters: true,
+            popupPanelSections: 0b111,
+            popupPanelDisabledSections: 0,
             prefetchingDisabled: true,
             requestLogMaxEntries: 1000,
             showIconBadge: true,

src/js/messaging.js

@@ -264,14 +264,14 @@ const getFirewallRules = function(srcHostname, desHostnames) {
 const popupDataFromTabId = function(tabId, tabTitle) {
     const tabContext = µb.tabContextManager.mustLookup(tabId);
     const rootHostname = tabContext.rootHostname;
+    const µbus = µb.userSettings;
     const r = {
-        advancedUserEnabled: µb.userSettings.advancedUserEnabled,
+        advancedUserEnabled: µbus.advancedUserEnabled,
         appName: vAPI.app.name,
         appVersion: vAPI.app.version,
-        colorBlindFriendly: µb.userSettings.colorBlindFriendly,
+        colorBlindFriendly: µbus.colorBlindFriendly,
         cosmeticFilteringSwitch: false,
-        dfEnabled: µb.userSettings.dynamicFilteringEnabled,
-        firewallPaneMinimized: µb.userSettings.firewallPaneMinimized,
+        firewallPaneMinimized: µbus.firewallPaneMinimized,
         globalAllowedRequestCount: µb.localSettings.allowedRequestCount,
         globalBlockedRequestCount: µb.localSettings.blockedRequestCount,
         fontSize: µb.hiddenSettings.popupFontSize,
@@ -283,9 +283,11 @@ const popupDataFromTabId = function(tabId, tabTitle) {
         pageAllowedRequestCount: 0,
         pageBlockedRequestCount: 0,
         popupBlockedCount: 0,
+        popupPanelSections: µbus.popupPanelSections,
+        popupPanelDisabledSections: µbus.popupPanelDisabledSections,
         tabId: tabId,
         tabTitle: tabTitle,
-        tooltipsDisabled: µb.userSettings.tooltipsDisabled
+        tooltipsDisabled: µbus.tooltipsDisabled
     };
 
     if ( µb.hiddenSettings.uiPopupConfig !== 'undocumented' ) {