From db9c32185538c0943cb3f52a037bd11f6f60cbf9 Mon Sep 17 00:00:00 2001 From: Raymond Hill Date: Mon, 27 Apr 2020 10:33:49 -0400 Subject: [PATCH] More work toward re-hauling the user interface 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 --- src/_locales/en/messages.json | 12 ++++++--- src/css/document-blocked.css | 4 +-- src/css/fa-icons.css | 1 + src/css/popup-fenix.css | 46 +++++++++++++++++++++++------------ src/css/popup.css | 2 +- src/css/themes/default.css | 14 ++++------- src/img/material-design.svg | 7 +++--- src/img/photon.svg | 16 ++++++++++++ src/js/background.js | 1 + src/js/fa-icons.js | 15 +++++++++--- src/js/messaging.js | 4 +++ src/js/popup-fenix.js | 45 ++++++++++++++++++---------------- src/popup-fenix.html | 25 ++++++++++--------- 13 files changed, 120 insertions(+), 72 deletions(-) create mode 100644 src/img/photon.svg diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index ecacb9363..9bcd6c43e 100644 --- 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 index 7db2407f5..0b6fdbd04 100644 --- 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 index 0494a7af0..ba98eb96e 100644 --- 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 index ef0fcb8d1..d99c8eb8d 100644 --- 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 index 567e1895c..39848977e 100644 --- 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 index cace841fc..a81afe82e 100644 --- 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 index ea515017e..3b5e72720 100644 --- a/src/img/material-design.svg +++ b/src/img/material-design.svg @@ -1,15 +1,16 @@ - + diff --git a/src/img/photon.svg b/src/img/photon.svg new file mode 100644 index 000000000..e6c42d5ee --- /dev/null +++ b/src/img/photon.svg @@ -0,0 +1,16 @@ + + + + + + + + diff --git a/src/js/background.js b/src/js/background.js index c3b074592..febc58d33 100644 --- 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 index e464888d1..0d930b98b 100644 --- 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('http://www.w3.org/2000/svg', 'svg'); - svg.classList.add('fa-icon_' + name); const use = document.createElementNS('http://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 index b57b482fc..92c897917 100644 --- 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 index 5eb8da63a..2841c333e 100644 --- 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 index 9e050e1be..094c4d674 100644 --- a/src/popup-fenix.html +++ b/src/popup-fenix.html @@ -16,10 +16,10 @@
- lock - eraser + lock + eraser
-
+
power-off
@@ -30,10 +30,10 @@
- bolt - eye-dropper - list-alt - sliders + bolt + eye-dropper + list-alt + sliders
@@ -43,10 +43,11 @@
- film - eye-slash - font - code + ph-popups + film + eye-slash + ph-readermode-text-size + code
@@ -54,7 +55,7 @@
-
+