From 1a9a19a91f073527766b351f0191f39db9f4cdbd Mon Sep 17 00:00:00 2001 From: Raymond Hill Date: Fri, 30 Sep 2022 09:18:52 -0400 Subject: [PATCH] [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 | 4 +- platform/mv3/extension/css/3p-filters.css | 5 + .../mv3/extension/css/dashboard-common.css | 1 - platform/mv3/extension/css/dashboard.css | 116 ++++++++++++++++++ platform/mv3/extension/dashboard.html | 32 ++--- platform/mv3/extension/js/3p-filters.js | 2 + platform/mv3/extension/js/background.js | 8 ++ platform/mv3/extension/popup.html | 4 + platform/mv3/make-rulesets.js | 8 +- src/css/themes/default.css | 4 +- tools/make-mv3.sh | 1 - 11 files changed, 164 insertions(+), 21 deletions(-) create mode 100644 platform/mv3/extension/css/dashboard.css diff --git a/platform/mv3/extension/3p-filters.html b/platform/mv3/extension/3p-filters.html index 92dbb3943..42a260862 100644 --- a/platform/mv3/extension/3p-filters.html +++ b/platform/mv3/extension/3p-filters.html @@ -16,13 +16,13 @@
-

+

_

-

+

diff --git a/platform/mv3/extension/css/3p-filters.css b/platform/mv3/extension/css/3p-filters.css index 93ca6cd21..570c03923 100644 --- a/platform/mv3/extension/css/3p-filters.css +++ b/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; } diff --git a/platform/mv3/extension/css/dashboard-common.css b/platform/mv3/extension/css/dashboard-common.css index f7e9c827b..da2c05226 100644 --- a/platform/mv3/extension/css/dashboard-common.css +++ b/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; diff --git a/platform/mv3/extension/css/dashboard.css b/platform/mv3/extension/css/dashboard.css new file mode 100644 index 000000000..c714ef810 --- /dev/null +++ b/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; + } diff --git a/platform/mv3/extension/dashboard.html b/platform/mv3/extension/dashboard.html index c981ba725..621fd850b 100644 --- a/platform/mv3/extension/dashboard.html +++ b/platform/mv3/extension/dashboard.html @@ -12,22 +12,24 @@ -
- -
-
-
-   -   - + +
+
-
-
- - - + +
+
+   +   + +
+
+
+ + + diff --git a/platform/mv3/extension/js/3p-filters.js b/platform/mv3/extension/js/3p-filters.js index 55973ad16..c1b5f3d40 100644 --- a/platform/mv3/extension/js/3p-filters.js +++ b/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( diff --git a/platform/mv3/extension/js/background.js b/platform/mv3/extension/js/background.js index 7ccab8f97..0d2866afa 100644 --- a/platform/mv3/extension/js/background.js +++ b/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(); + } })(); diff --git a/platform/mv3/extension/popup.html b/platform/mv3/extension/popup.html index 0de5b3e8d..38dd72888 100644 --- a/platform/mv3/extension/popup.html +++ b/platform/mv3/extension/popup.html @@ -13,6 +13,7 @@
+
@@ -40,6 +41,7 @@
­
+
sun-o @@ -51,9 +53,11 @@ cogs
+
+
_ angle-up diff --git a/platform/mv3/make-rulesets.js b/platform/mv3/make-rulesets.js index 20145cf95..568eb1c94 100644 --- a/platform/mv3/make-rulesets.js +++ b/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', +]; /******************************************************************************/ diff --git a/src/css/themes/default.css b/src/css/themes/default.css index e9441f761..e6ef82684 100644 --- a/src/css/themes/default.css +++ b/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 */; diff --git a/tools/make-mv3.sh b/tools/make-mv3.sh index f12d579d7..b542d1bb8 100755 --- a/tools/make-mv3.sh +++ b/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/