From ee6de37b6e952efa4f900cf1f864ec6b30fe0cf6 Mon Sep 17 00:00:00 2001 From: Raymond Hill Date: Sat, 16 Sep 2023 11:46:39 -0400 Subject: [PATCH] [mv3] Rework dashboard to avoid usage of `iframe` Related issue: https://github.com/uBlockOrigin/uBOL-home/issues/67 --- platform/mv3/extension/about.html | 45 ------ .../mv3/extension/css/dashboard-common.css | 2 - platform/mv3/extension/css/dashboard.css | 73 ++-------- platform/mv3/extension/css/settings.css | 8 +- platform/mv3/extension/dashboard.html | 131 ++++++++++++++++-- platform/mv3/extension/js/about.js | 33 ----- platform/mv3/extension/js/dashboard-common.js | 30 ---- platform/mv3/extension/js/dashboard.js | 102 ++------------ platform/mv3/extension/settings.html | 110 --------------- 9 files changed, 145 insertions(+), 389 deletions(-) delete mode 100644 platform/mv3/extension/about.html delete mode 100644 platform/mv3/extension/js/about.js delete mode 100644 platform/mv3/extension/js/dashboard-common.js delete mode 100644 platform/mv3/extension/settings.html diff --git a/platform/mv3/extension/about.html b/platform/mv3/extension/about.html deleted file mode 100644 index 7743e524d..000000000 --- a/platform/mv3/extension/about.html +++ /dev/null @@ -1,45 +0,0 @@ - - - - - -uBlock Origin Lite — About - - - - - - - - -
-
-
-
Copyright (c) Raymond Hill 2014-present
-
-
-
-
-
-
-
-
-
-
-
-
-
Metropolis font family by Chris Simpson
-
Inter font family by Rasmus Andersson
-
FontAwesome font family by Dave Gandy
-
Punycode.js by Mathias Bynens
-
Flags of the World by David Krmela
-
-
- - - - - - - - diff --git a/platform/mv3/extension/css/dashboard-common.css b/platform/mv3/extension/css/dashboard-common.css index 47852e7d6..41d641621 100644 --- a/platform/mv3/extension/css/dashboard-common.css +++ b/platform/mv3/extension/css/dashboard-common.css @@ -1,5 +1,3 @@ -body { - } h2, h3 { margin: 1em 0; } diff --git a/platform/mv3/extension/css/dashboard.css b/platform/mv3/extension/css/dashboard.css index 4dded0f10..e98bcc9a4 100644 --- a/platform/mv3/extension/css/dashboard.css +++ b/platform/mv3/extension/css/dashboard.css @@ -1,19 +1,14 @@ -html, body { +body { align-items: center; box-sizing: border-box; display: flex; flex-direction: column; - height: 100vh; - justify-content: stretch; - padding: 0 1em; - overflow: hidden; - position: relative; - width: 100vw; } body > * { - width: min(641px, 100vw); + width: min(640px, 100%); } #dashboard-nav { + background-color: var(--surface-1); border: 0; border-bottom: 1px solid var(--border-1); display: flex; @@ -23,7 +18,7 @@ body > * { padding: 0; position: sticky; top: 0; - z-index: 10; + z-index: 100; } .tabButton { background-color: transparent; @@ -41,53 +36,25 @@ body > * { .tabButton:focus { outline: 0; } -/* - * TODO: support keyboard-driven navigation - * -.tabButton:not(:active):focus { - background-color: var(--dashboard-tab-focus-surface); +.tabButton:hover { + background-color: var(--dashboard-tab-hover-surface); + border-bottom-color: var(--dashboard-tab-hover-border); } - */ -.tabButton.selected { + +body[data-pane="settings"] #dashboard-nav .tabButton[data-pane="settings"], +body[data-pane="about"] #dashboard-nav .tabButton[data-pane="about"] { 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; - min-height: 600px; - 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"] { +body > section { display: none; } -body .tabButton[data-pane="no-dashboard.html"] { - display: none; - } -body.noDashboard #dashboard-nav { - display: none; +body[data-pane="settings"] > section[data-pane="settings"], +body[data-pane="about"] > section[data-pane="about"] { + display: block; } /* high dpi devices */ @@ -97,18 +64,6 @@ body.noDashboard #dashboard-nav { 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; diff --git a/platform/mv3/extension/css/settings.css b/platform/mv3/extension/css/settings.css index 8bb04a6db..eb5c6db10 100644 --- a/platform/mv3/extension/css/settings.css +++ b/platform/mv3/extension/css/settings.css @@ -2,9 +2,6 @@ 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } -body { - margin-bottom: 6rem; - } legend { color: var(--ink-3); font-size: var(--font-size-smaller); @@ -18,11 +15,8 @@ body.firstRun .firstRun { display: block; padding: 8px; } -body > div { - margin: 1em 0; - } h3 { - margin: 0; + margin: 1em 0; } p { white-space: pre-line; diff --git a/platform/mv3/extension/dashboard.html b/platform/mv3/extension/dashboard.html index deb6efb15..154f6fc74 100644 --- a/platform/mv3/extension/dashboard.html +++ b/platform/mv3/extension/dashboard.html @@ -8,31 +8,142 @@ + + + + + + - +
+ -->
-
-
-   -   - +
+
+

+

+
+ +
+

+

+
+ + + +
+
+ +
+

+

+

+
+ +
+

Filter lists

+
+

+
+
+
+
+
+ +
+
+
+
+
+
+ +
-
- +
+
+
+
+
Copyright (c) Raymond Hill 2014-present
+
+
+
+
+
+
+
+
+
+
+
+
+
Metropolis font family by Chris Simpson
+
Inter font family by Rasmus Andersson
+
FontAwesome font family by Dave Gandy
+
Punycode.js by Mathias Bynens
+
Flags of the World by David Krmela
+
+
+
+ + diff --git a/platform/mv3/extension/js/about.js b/platform/mv3/extension/js/about.js deleted file mode 100644 index 2717501a5..000000000 --- a/platform/mv3/extension/js/about.js +++ /dev/null @@ -1,33 +0,0 @@ -/******************************************************************************* - - uBlock Origin - a browser extension to block requests. - Copyright (C) 2014-present Raymond Hill - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU General Public License for more details. - - You should have received a copy of the GNU General Public License - along with this program. If not, see {http://www.gnu.org/licenses/}. - - Home: https://github.com/gorhill/uBlock -*/ - -'use strict'; - -import { runtime } from './ext.js'; -import { dom } from './dom.js'; - -/******************************************************************************/ - -(async ( ) => { - const manifest = runtime.getManifest(); - - dom.text('#aboutNameVer', `${manifest.name} ${manifest.version}`); -})(); diff --git a/platform/mv3/extension/js/dashboard-common.js b/platform/mv3/extension/js/dashboard-common.js deleted file mode 100644 index 80a520653..000000000 --- a/platform/mv3/extension/js/dashboard-common.js +++ /dev/null @@ -1,30 +0,0 @@ -/******************************************************************************* - - uBlock Origin - a browser extension to block requests. - Copyright (C) 2014-present Raymond Hill - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU General Public License for more details. - - You should have received a copy of the GNU General Public License - along with this program. If not, see {http://www.gnu.org/licenses/}. - - Home: https://github.com/gorhill/uBlock -*/ - -'use strict'; - -import { dom } from './dom.js'; - -/******************************************************************************/ - -// Open links in the proper window -dom.attr('a', 'target', '_blank'); -dom.attr('a[href*="dashboard.html"]', 'target', '_parent'); diff --git a/platform/mv3/extension/js/dashboard.js b/platform/mv3/extension/js/dashboard.js index 34edf9c05..1410a40e3 100644 --- a/platform/mv3/extension/js/dashboard.js +++ b/platform/mv3/extension/js/dashboard.js @@ -21,104 +21,20 @@ 'use strict'; -import { dom, qs$ } from './dom.js'; +import { runtime } from './ext.js'; +import { dom } from './dom.js'; /******************************************************************************/ -const discardUnsavedData = function(synchronous = false) { - const paneFrame = qs$('#iframe'); - const paneWindow = paneFrame.contentWindow; - if ( - typeof paneWindow.hasUnsavedData !== 'function' || - paneWindow.hasUnsavedData() === false - ) { - return true; - } - - if ( synchronous ) { - return false; - } - - return new Promise(resolve => { - const modal = document.querySelector('#unsavedWarning'); - dom.cl.add(modal, 'on'); - modal.focus(); - - const onDone = status => { - dom.cl.remove(modal, 'on'); - document.removeEventListener('click', onClick, true); - resolve(status); - }; - - const onClick = ev => { - const target = ev.target; - if ( target.matches('[data-i18n="dashboardUnsavedWarningStay"]') ) { - return onDone(false); - } - if ( target.matches('[data-i18n="dashboardUnsavedWarningIgnore"]') ) { - return onDone(true); - } - if ( modal.querySelector('[data-i18n="dashboardUnsavedWarning"]').contains(target) ) { - return; - } - onDone(false); - }; - - document.addEventListener('click', onClick, true); - }); -}; - -const loadDashboardPanel = function(pane, first) { - const tabButton = document.querySelector(`[data-pane="${pane}"]`); - if ( tabButton === null || dom.cl.has(tabButton, 'selected') ) { - return; - } - const loadPane = ( ) => { - self.location.replace(`#${pane}`); - for ( const node of document.querySelectorAll('.tabButton.selected') ) { - dom.cl.remove(node, 'selected'); - } - dom.cl.add(tabButton, 'selected'); - tabButton.scrollIntoView(); - document.querySelector('#iframe').contentWindow.location.replace(pane); - }; - if ( first ) { - return loadPane(); - } - const r = discardUnsavedData(); - if ( r === false ) { return; } - if ( r === true ) { - return loadPane(); - } - r.then(status => { - if ( status === false ) { return; } - loadPane(); - }); -}; - -const onTabClickHandler = function(ev) { - loadDashboardPanel(dom.attr(ev.target, 'data-pane')); -}; - -if ( self.location.hash.slice(1) === 'no-dashboard.html' ) { - dom.cl.add(dom.body, 'noDashboard'); +{ + const manifest = runtime.getManifest(); + dom.text('#aboutNameVer', `${manifest.name} ${manifest.version}`); } -(async ( ) => { - let pane = null; - if ( self.location.hash !== '' ) { - pane = self.location.hash.slice(1) || null; - } - loadDashboardPanel(pane !== null ? pane : 'settings.html', true); +dom.attr('a', 'target', '_blank'); - dom.on('#dashboard-nav', 'click', '.tabButton', onTabClickHandler); - - // https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event - window.addEventListener('beforeunload', ( ) => { - if ( discardUnsavedData(true) ) { return; } - event.preventDefault(); - event.returnValue = ''; - }); -})(); +dom.on('#dashboard-nav', 'click', '.tabButton', ev => { + dom.body.dataset.pane = ev.target.dataset.pane; +}); /******************************************************************************/ diff --git a/platform/mv3/extension/settings.html b/platform/mv3/extension/settings.html deleted file mode 100644 index 7bd0edaca..000000000 --- a/platform/mv3/extension/settings.html +++ /dev/null @@ -1,110 +0,0 @@ - - - - - -uBlock Origin Lite — Filter lists - - - - - - - - - - -
-

-

-
- -
-

-

-
- - - -
-
- -
-

-

-

-
- -
-

Filter lists

-
-

-
-
-
-
-
- -
-
-
-
-
-
- -
-
- - - - - - - - -