[mv3] Open options page at first install

To be sure first time users are properly informed about the
possibility to enable broad permissions for better filtering.

platform/mv3/extension/3p-filters.html

@@ -16,13 +16,13 @@
 <div class="body">
 
 <div id="actions">
-    <p>
+    <p class="firstRun">
         <label id="omnipotenceWidget"><span class="input checkbox"><input type="checkbox"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="omnipotenceLabel">_</span></label>
         <legend data-i18n="omnipotenceLegend">_</legend>
     </p>
     <hr>
-    <p><button id="buttonApply" class="preferred disabled iconified" type="button" data-i18n-title="genericApplyChanges"><span class="fa-icon">check</span><span data-i18n="genericApplyChanges">_</span><span class="hover"></span></button>
     <p id="listsOfBlockedHostsPrompt">
+    <p><button id="buttonApply" class="preferred disabled iconified" type="button" data-i18n-title="genericApplyChanges"><span class="fa-icon">check</span><span data-i18n="genericApplyChanges">_</span><span class="hover"></span></button>
 </div>
 
 <div>

platform/mv3/extension/css/3p-filters.css

@@ -17,6 +17,11 @@ legend {
     top: 0;
     z-index: 10;
     }
+body.firstRun .firstRun {
+    background-color: rgb(var(--dashboard-highlight-surface-rgb));
+    padding: 8px;
+    zoom: 1.1;
+    }
 #buttonUpdate.active {
     pointer-events: none;
     }

platform/mv3/extension/css/dashboard-common.css

@@ -1,6 +1,5 @@
 body > div.body {
     margin: 0 1em;
-    max-width: min(600px, 100vw);
     }
 h2, h3 {
     margin: 1em 0;

platform/mv3/extension/css/dashboard.css

@@ -0,0 +1,116 @@
+html, body {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    justify-content: stretch;
+    overflow: hidden;
+    position: relative;
+    width: 100vw;
+    }
+body > * {
+    width: min(641px, 100vw);
+    }
+#dashboard-nav {
+    border: 0;
+    border-bottom: 1px solid var(--border-1);
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    overflow-x: hidden;
+    padding: 0;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    }
+.tabButton {
+    background-color: transparent;
+    border: 0;
+    border-bottom: 3px solid transparent;
+    border-radius: 0;
+    color: var(--dashboard-tab-ink);
+        fill: var(--dashboard-tab-ink);
+    font-family: var(--font-family);
+    font-size: var(--font-size);
+    padding: 0.7em 1.4em calc(0.7em - 3px);
+    text-decoration: none;
+    white-space: nowrap;
+    }
+.tabButton:focus {
+    outline: 0;
+    }
+/* 
+ * TODO: support keyboard-driven navigation
+ * 
+.tabButton:not(:active):focus {
+    background-color: var(--dashboard-tab-focus-surface);
+    }
+ */
+.tabButton.selected {
+    background-color: var(--dashboard-tab-active-surface);
+    border-bottom: 3px solid var(--dashboard-tab-active-ink);
+    color: var(--dashboard-tab-active-ink);
+        fill: var(--dashboard-tab-active-ink);
+    }
+iframe {
+    background-color: transparent;
+    border: 0;
+    flex-grow: 1;
+    margin: 0;
+    padding: 0;
+    }
+#unsavedWarning {
+    display: none;
+    left: 0;
+    position: absolute;
+    width: 100%;
+    z-index: 20;
+    }
+#unsavedWarning.on {
+    display: initial;
+    }
+#unsavedWarning > div:first-of-type {
+    padding: 0.5em;
+    }
+#unsavedWarning > div:last-of-type {
+    height: 100vh;
+    position: absolute;
+    }
+
+body:not(.canUpdateShortcuts) .tabButton[data-pane="shortcuts.html"] {
+    display: none;
+    }
+body .tabButton[data-pane="no-dashboard.html"] {
+    display: none;
+    }
+body.noDashboard #dashboard-nav {
+    display: none;
+    }
+
+/* high dpi devices */
+:root.hidpi .tabButton {
+    font-family: Metropolis, sans-serif;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    }
+
+/* hover-able devices */
+:root.desktop .tabButton {
+    cursor: default;
+    }
+:root.desktop .tabButton:not(.selected) {
+    cursor: pointer;
+    }
+:root.desktop .tabButton:not(.selected):hover {
+    background-color: var(--dashboard-tab-hover-surface);
+    border-bottom-color: var(--dashboard-tab-hover-border);
+    }
+
+/* touch-screen devices */
+:root.mobile #dashboard-nav {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    }
+:root.mobile #dashboard-nav .logo {
+    display: none;
+    }

platform/mv3/extension/dashboard.html

@@ -12,22 +12,24 @@
 </head>
 
 <body>
-<div id="dashboard-nav">
+    <!-- -------- -->
-    <span class="logo"><img data-i18n-title="extName" src="img/ublock.svg"></span><!--
+    <div id="dashboard-nav">
- --><button class="tabButton" type="button" data-pane="3p-filters.html" data-i18n="3pPageName" tabindex="0"></button><!--
+        <span class="logo"><img data-i18n-title="extName" src="img/ublock.svg"></span><!--
- --><button class="tabButton" type="button" data-pane="about.html" data-i18n="aboutPageName" tabindex="0"></button>
+     --><button class="tabButton" type="button" data-pane="3p-filters.html" data-i18n="3pPageName" tabindex="0"></button><!--
-</div>
+     --><button class="tabButton" type="button" data-pane="about.html" data-i18n="aboutPageName" tabindex="0"></button>
-<section id="unsavedWarning" class="notice">
-    <div>
-        <span data-i18n="dashboardUnsavedWarning"></span>&emsp;
-        <button type="button" data-i18n="dashboardUnsavedWarningStay">_<span class="hover"></span></button>&ensp;
-        <button type="button" data-i18n="dashboardUnsavedWarningIgnore">_<span class="hover"></span></button>
     </div>
-    <div></div>
+    <!-- -------- -->
-</section>
+    <section id="unsavedWarning" class="notice">
-
+        <div>
-<iframe id="iframe" src=""></iframe>
+            <span data-i18n="dashboardUnsavedWarning"></span>&emsp;
-
+            <button type="button" data-i18n="dashboardUnsavedWarningStay">_<span class="hover"></span></button>&ensp;
+            <button type="button" data-i18n="dashboardUnsavedWarningIgnore">_<span class="hover"></span></button>
+        </div>
+        <div></div>
+    </section>
+    <!-- -------- -->
+    <iframe id="iframe" src=""></iframe>
+    <!-- -------- -->
 <script src="js/i18n.js" type="module"></script>
 <script src="js/dashboard.js" type="module"></script>
 

platform/mv3/extension/js/3p-filters.js

@@ -214,6 +214,8 @@ function renderFilterLists(soft = false) {
 /******************************************************************************/
 
 const renderWidgets = function() {
+    dom.cl.toggle(dom.body, 'firstRun', cachedRulesetData.firstRun === true);
+
     qs$('#omnipotenceWidget input').checked = cachedRulesetData.hasOmnipotence;
 
     dom.cl.toggle(

platform/mv3/extension/js/background.js

@@ -56,6 +56,7 @@ import {
 const rulesetConfig = {
     version: '',
     enabledRulesets: [],
+    firstRun: false,
 };
 
 /******************************************************************************/
@@ -69,6 +70,7 @@ async function loadRulesetConfig() {
     const configRule = dynamicRuleMap.get(CURRENT_CONFIG_BASE_RULE_ID);
     if ( configRule === undefined ) {
         rulesetConfig.enabledRulesets = await defaultRulesetsFromLanguage();
+        rulesetConfig.firstRun = true;
         return;
     }
 
@@ -167,7 +169,9 @@ function onMessage(request, sender, callback) {
                 enabledRulesets,
                 rulesetDetails: Array.from(rulesetDetails.values()),
                 hasOmnipotence,
+                firstRun: rulesetConfig.firstRun,
             });
+            rulesetConfig.firstRun = false;
         });
         return true;
     }
@@ -243,4 +247,8 @@ async function start() {
 
     browser.permissions.onAdded.addListener(onPermissionsAdded);
     browser.permissions.onRemoved.addListener(onPermissionsRemoved);
+
+    if ( rulesetConfig.firstRun ) {
+        runtime.openOptionsPage();
+    }
 })();

platform/mv3/extension/popup.html

@@ -13,6 +13,7 @@
 
 <body class="loading" data-section="">
 <div id="main">
+    <!-- -------- -->
     <div id="sticky">
         <div id="stickyTools">
             <div class="rulesetTools">
@@ -40,6 +41,7 @@
         </div>
         <div id="hostname"><span></span>&shy;<span></span></div>
     </div>
+    <!-- -------- -->
     <div class="toolRibbon pageTools">
         <span id="toggleGreatPowers">
             <span class="fa-icon tool enabled" data-i18n-title="popupGrantGreatPowers">sun-o<span class="caption"></span></span>
@@ -51,9 +53,11 @@
         <span></span>
         <a href="dashboard.html" class="fa-icon tool enabled" target="uBODashboard" tabindex="0" data-i18n-title="popupTipDashboard">cogs<span class="caption" data-i18n="popupTipDashboard"></span></a>
     </div>
+    <!-- -------- -->
     <div id="rulesetStats" data-section="a">
     </div>
     <hr data-section="a">
+    <!-- -------- -->
     <div id="moreOrLess">
         <span id="moreButton">
             <span data-i18n="popupMoreButton">_</span>&emsp;<span class="fa-icon">angle-up</span>

platform/mv3/make-rulesets.js

@@ -55,7 +55,13 @@ const outputDir = commandLineArgs.get('output') || '.';
 const cacheDir = `${outputDir}/../mv3-data`;
 const rulesetDir = `${outputDir}/rulesets`;
 const scriptletDir = `${rulesetDir}/js`;
-const env = [ 'chromium', 'ubol', 'native_css_has' ];
+const env = [
+    'chromium',
+    'native_css_has',
+    'ublock',
+    'ubol',
+    'user_stylesheet',
+];
 
 /******************************************************************************/
 

src/css/themes/default.css

@@ -5,7 +5,7 @@
       https://material.io/
 
     Color names from:
-      https://protocol.mozilla.org/fundamentals/color.html
+      https://protocol.mozilla.org/docs/fundamentals/color.html
 
     Tools:
       Lightness validator: https://www.hsluv.org/
@@ -237,6 +237,7 @@
 
     --dashboard-tab-active-ink-rgb: var(--primary-40);
     --dashboard-tab-focus-surface-rgb: var(--primary-90);
+    --dashboard-highlight-surface-rgb: var(--primary-90);
 
     /* popup panel */
     --popup-cell-cname-ink: #0054d7; /* h260 S:100 Luv:40 */;
@@ -327,6 +328,7 @@
 
     --dashboard-tab-active-ink-rgb: var(--primary-70);
     --dashboard-tab-focus-surface-rgb: var(--primary-20);
+    --dashboard-highlight-surface-rgb: var(--primary-20);
 
     /* popup panel */
     --popup-cell-cname-ink: #93a6ff; /* h260 S:100 Luv:70 */;

tools/make-mv3.sh

@@ -25,7 +25,6 @@ echo "*** uBOLite.mv3: Copying common files"
 cp -R src/css/fonts/* $DES/css/fonts/
 cp src/css/themes/default.css $DES/css/
 cp src/css/common.css $DES/css/
-cp src/css/dashboard.css $DES/css/
 cp src/css/dashboard-common.css $DES/css/
 cp src/css/fa-icons.css $DES/css/