diff --git a/src/css/popup-fenix.css b/src/css/popup-fenix.css index 47a7c24d1..53ab2fcf5 100644 --- a/src/css/popup-fenix.css +++ b/src/css/popup-fenix.css @@ -74,10 +74,11 @@ hr { justify-content: center; margin: 0 var(--popup-gap-thin); padding: 0; + stroke: none; } body.off #switch { - color: var(--popup-power-disabled-ink); - fill: var(--popup-power-disabled-ink); + fill: var(--default-surface); + stroke: var(--checkbox-ink); } .rulesetTools { background-color: transparent; @@ -116,10 +117,16 @@ body.needSave #revertRules { } .itemRibbon { + column-gap: var(--popup-gap); display: grid; - gap: var(--popup-gap); grid-template: auto / auto auto; - margin: var(--popup-gap); + margin: var(--popup-gap) var(--popup-gap) 0 var(--popup-gap); + } +.itemRibbon > span { + margin-bottom: var(--popup-gap); + } +.itemRibbon > [data-i18n] { + min-width: 10em; } .itemRibbon > [data-i18n] + span { justify-self: end; @@ -183,7 +190,9 @@ body.mobile.no-tooltips .toolRibbon .tool { } .moreOrLess > span { cursor: pointer; + margin: 0; padding: var(--popup-gap); + user-select: none; } #moreButton .fa-icon { transform: rotate(180deg); @@ -191,7 +200,7 @@ body.mobile.no-tooltips .toolRibbon .tool { #lessButton { text-align: right; } -body[data-more="a b c d e"] #moreButton { +body[data-more="a b c d e f"] #moreButton { pointer-events: none; visibility: hidden; } @@ -478,14 +487,15 @@ body.advancedUser #firewall > div > span.noopRule.ownRule, 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"] { +body:not([data-more~="d"]) [data-more="d"], +body:not([data-more~="f"]) [data-more="f"] { height: 0; margin-bottom: 0; margin-top: 0; overflow-y: hidden; visibility: hidden; } -body:not([data-more~="d"]) [data-more="d"] { +body:not([data-more~="e"]) [data-more="e"] { display: none; } diff --git a/src/css/themes/default.css b/src/css/themes/default.css index ac39af3fa..31921a315 100644 --- a/src/css/themes/default.css +++ b/src/css/themes/default.css @@ -23,7 +23,7 @@ --light-gray-10: #f9f9fb; --light-gray-20: #f0f0f4; --light-gray-30: #e0e0e6; - --light-gray-30-a75: #e0e0e6bf; + --light-gray-30-a50: #e0e0e680; --light-gray-40: #cfcfd8; --light-gray-50: #bfbfc9; --light-gray-60: #afafba; @@ -61,7 +61,7 @@ --default-ink-a4: var(--ink-80-a4); --default-ink-a50: var(--ink-80-a50); --default-surface: var(--light-gray-10); - --default-surface-hover: var(--light-gray-30-a75); + --default-surface-hover: var(--light-gray-30-a50); --bg-1: hsla(240, 20%, 98%, 1); --bg-1-border: hsla(240, 20%, 90%, 1); @@ -110,7 +110,7 @@ 0px 1px 6px 0px rgba(14, 13, 26, 0.12); --dashboard-tab-ink: var(--ink-80); --dashboard-tab-active-ink: var(--violet-70); - --dashboard-tab-surface-hover: var(--default-ink-a4); + --dashboard-tab-surface-hover: var(--default-surface-hover); --fg-icon-info-lvl-0-dimmed: #888; --fg-icon-info-lvl-0: inherit; diff --git a/src/img/fontawesome/fontawesome-defs.svg b/src/img/fontawesome/fontawesome-defs.svg index 3c633784b..7e347c439 100644 --- a/src/img/fontawesome/fontawesome-defs.svg +++ b/src/img/fontawesome/fontawesome-defs.svg @@ -57,7 +57,7 @@ License - https://github.com/FortAwesome/Font-Awesome/tree/a8386aae19e200ddb0f68 - + diff --git a/src/js/background.js b/src/js/background.js index 1ab8ff0a0..ba6da17cc 100644 --- a/src/js/background.js +++ b/src/js/background.js @@ -66,6 +66,8 @@ const µBlock = (( ) => { // jshint ignore:line loggerPopupType: 'popup', manualUpdateAssetFetchPeriod: 500, popupFontSize: 'unset', + popupPanelDisabledSections: 0, + popupPanelLockedSections: 0, requestJournalProcessPeriod: 1000, selfieAfter: 3, strictBlockingBypassDuration: 120, @@ -92,8 +94,7 @@ const µBlock = (( ) => { // jshint ignore:line ignoreGenericCosmeticFilters: vAPI.webextFlavor.soup.has('mobile'), largeMediaSize: 50, parseAllABPHideFilters: true, - popupPanelSections: 0b111, - popupPanelDisabledSections: 0, + popupPanelSections: 0b1111, prefetchingDisabled: true, requestLogMaxEntries: 1000, showIconBadge: true, diff --git a/src/js/messaging.js b/src/js/messaging.js index cb7e580f1..457c38b2d 100644 --- a/src/js/messaging.js +++ b/src/js/messaging.js @@ -284,7 +284,8 @@ const popupDataFromTabId = function(tabId, tabTitle) { pageBlockedRequestCount: 0, popupBlockedCount: 0, popupPanelSections: µbus.popupPanelSections, - popupPanelDisabledSections: µbus.popupPanelDisabledSections, + popupPanelDisabledSections: µb.hiddenSettings.popupPanelDisabledSections, + popupPanelLockedSections: µb.hiddenSettings.popupPanelLockedSections, tabId: tabId, tabTitle: tabTitle, tooltipsDisabled: µbus.tooltipsDisabled diff --git a/src/js/popup-fenix.js b/src/js/popup-fenix.js index b508ddd79..cd1af9066 100644 --- a/src/js/popup-fenix.js +++ b/src/js/popup-fenix.js @@ -493,7 +493,7 @@ const renderPopup = function() { setGlobalExpand(popupData.firewallPaneMinimized === false, true); // Build dynamic filtering pane only if in use - if ( (popupData.popupPanelSections & ~popupData.popupPanelDisabledSections & 0b1000) !== 0 ) { + if ( (computedSections() & 0b10000) !== 0 ) { buildAllFirewallRows(); } @@ -588,9 +588,7 @@ let renderOnce = function() { uDom.nodeFromId('version').textContent = popupData.appVersion; - sectionBitsToAttribute( - popupData.popupPanelSections & ~popupData.popupPanelDisabledSections - ); + sectionBitsToAttribute(computedSections()); if ( popupData.uiPopupConfig !== undefined ) { document.body.setAttribute('data-ui', popupData.uiPopupConfig); @@ -729,7 +727,12 @@ const gotoURL = function(ev) { // The popup panel is made of sections. Visiblity of sections can // be toggle on/off. -const maxNumberOfSections = 5; +const maxNumberOfSections = 6; + +const computedSections = ( ) => + popupData.popupPanelSections & + ~popupData.popupPanelDisabledSections | + popupData.popupPanelLockedSections; const sectionBitsFromAttribute = function() { const attr = document.body.dataset.more; @@ -752,17 +755,18 @@ const sectionBitsToAttribute = function(bits) { }; const toggleSections = function(more) { - const mask = ~popupData.popupPanelDisabledSections; + const offbits = ~popupData.popupPanelDisabledSections; + const onbits = popupData.popupPanelLockedSections; let currentBits = sectionBitsFromAttribute(); let newBits = currentBits; for ( let i = 0; i < maxNumberOfSections; i++ ) { const bit = 1 << (more ? i : maxNumberOfSections - i - 1); - if ( (mask & bit) === 0 ) { continue; } if ( more ) { newBits |= bit; } else { newBits &= ~bit; } + newBits = newBits & offbits | onbits; if ( newBits !== currentBits ) { break; } } if ( newBits === currentBits ) { return; } @@ -783,7 +787,7 @@ const toggleSections = function(more) { vAPI.localStorage.setItem('popupPanelSections', newBits); // Dynamic filtering pane may not have been built yet - if ( (newBits & 0b1000) !== 0 && dfPaneBuilt === false ) { + if ( (newBits & 0b10000) !== 0 && dfPaneBuilt === false ) { buildAllFirewallRows(); } }; diff --git a/src/js/popup.js b/src/js/popup.js index 3be9676c0..5442dbb24 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -506,7 +506,7 @@ const renderPopup = function() { // https://github.com/chrisaljoudi/uBlock/issues/470 // This must be done here, to be sure the popup is resized properly - const dfPaneVisible = (popupData.popupPanelSections & 0b1000) !== 0; + const dfPaneVisible = (popupData.popupPanelSections & 0b10000) !== 0; // https://github.com/chrisaljoudi/uBlock/issues/1068 // Remember the last state of the firewall pane. This allows to @@ -792,19 +792,19 @@ const gotoURL = function(ev) { /******************************************************************************/ const toggleFirewallPane = function() { - popupData.popupPanelSections = popupData.popupPanelSections ^ 0b1000; + popupData.popupPanelSections = popupData.popupPanelSections ^ 0b10000; messaging.send('popupPanel', { what: 'userSettings', name: 'popupPanelSections', - value: popupData.popupPanelSections | 0b0111, + value: popupData.popupPanelSections | 0b01111, }); // https://github.com/chrisaljoudi/uBlock/issues/996 // Remember the last state of the firewall pane. This allows to // configure the popup size early next time it is opened, which means a // less glitchy popup at open time. - dfPaneVisibleStored = (popupData.popupPanelSections & 0b1000) !== 0; + dfPaneVisibleStored = (popupData.popupPanelSections & 0b10000) !== 0; vAPI.localStorage.setItem('popupFirewallPane', dfPaneVisibleStored); // Dynamic filtering pane may not have been built yet @@ -1073,7 +1073,7 @@ const toggleHostnameSwitch = async function(ev) { hostname: popupData.pageHostname, state: target.classList.contains('on'), tabId: popupData.tabId, - persist: (popupData.popupPanelSections & 0b1000) === 0 || ev.ctrlKey || ev.metaKey, + persist: (popupData.popupPanelSections & 0b10000) === 0 || ev.ctrlKey || ev.metaKey, }); cachePopupData(response); diff --git a/src/js/start.js b/src/js/start.js index 7e2b3f74a..5d767f0f8 100644 --- a/src/js/start.js +++ b/src/js/start.js @@ -116,11 +116,20 @@ const onVersionReady = function(lastVersion) { // Configure new popup panel according to classic popup panel // configuration. - if ( lastVersionInt !== 0 && lastVersionInt <= 1026003014 ) { - µb.userSettings.popupPanelSections = - µb.userSettings.dynamicFilteringEnabled === true ? 0b1111 : 0b0111; - µb.userSettings.dynamicFilteringEnabled = undefined; - µb.saveUserSettings(); + if ( lastVersionInt !== 0 ) { + if ( lastVersionInt <= 1026003014 ) { + µb.userSettings.popupPanelSections = + µb.userSettings.dynamicFilteringEnabled === true ? 0b11111 : 0b01111; + µb.userSettings.dynamicFilteringEnabled = undefined; + µb.saveUserSettings(); + } else if ( + lastVersionInt <= 1026003016 && + (µb.userSettings.popupPanelSections & 1) !== 0 + ) { + µb.userSettings.popupPanelSections = + (µb.userSettings.popupPanelSections << 1 | 1) & 0b111111; + µb.saveUserSettings(); + } } vAPI.storage.set({ version: vAPI.app.version }); diff --git a/src/popup-fenix.html b/src/popup-fenix.html index 6fd77438b..845d33339 100644 --- a/src/popup-fenix.html +++ b/src/popup-fenix.html @@ -11,7 +11,7 @@ - +
@@ -29,8 +29,8 @@
ephemeralnewyork.­wordpress.com
-
-
+
+
ph-popups film eye-slash @@ -40,18 +40,18 @@
- +
-
-
+
+
bolt eye-dropper list-alt sliders
-
-
+
+
@@ -64,7 +64,7 @@
-
+