Skip to content

Commit

Permalink
Make the new "fenix" popup panel the default one
Browse files Browse the repository at this point in the history 
The old "classic" popup panel will still be used
when at least one of the following is true:

- advanced setting `uiFlavor` is set to `classic`; or
- the browser is Chromium 65 or older; or
- the browser is Firefox 67 or older

The default configuration of the new popup panel
at installation time is to show the power button,
statistics and the basic tool icons, i.e. access
to dashboard, logger, pickers.

For existing installations, the new popup panel
will be configured by respecting the existing
configuration of the classic one.

The new popup panel is currently already in use
on Firefox for Android, and the visual redesign
was made according to suggestions and feedback
from <https://github.com/brampitoyo> to be
optimal for Firefox for Android.

The new popup panel will allow closing the following
pending issues:

- uBlockOrigin/uBlock-issues#255
- uBlockOrigin/uBlock-issues#178
  • Loading branch information
@gorhill
gorhill committed Apr 30, 2020
1 parent 557e06f commit b295d4a
Show file tree
Hide file tree
Showing 13 changed files with 196 additions and 104 deletions.
2 changes: 1 addition & 1 deletion platform/chromium/manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"32": "img/icon_32.png"
},
"default_title": "uBlock Origin",
"default_popup": "popup.html"
"default_popup": "popup-fenix.html"
},
"commands": {
"launch-element-zapper": {
Expand Down
2 changes: 1 addition & 1 deletion platform/firefox/manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"32": "img/icon_32.png"
},
"default_title": "uBlock Origin",
"default_popup": "popup.html"
"default_popup": "popup-fenix.html"
},
"browser_specific_settings": {
"gecko": {
Expand Down
2 changes: 1 addition & 1 deletion platform/opera/manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"16": "img/icon_16.png",
"32": "img/icon_32.png"
},
"default_popup": "popup.html",
"default_popup": "popup-fenix.html",
"default_title": "uBlock Origin"
},
"commands": {
Expand Down
10 changes: 9 additions & 1 deletion src/_locales/en/messages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,11 @@
},
"popupMoreButton_v2":{
"message":"More",
"description":"Label to be used to toggle overview panel"
"description":"Label to be used to show popup panel sections"
},
"popupLessButton_v2":{
"message":"Less",
"description":"Label to be used to hide popup panel sections"
},
"popupTipGlobalRules":{
"message":"Global rules: this column is for rules which apply to all sites.",
Expand Down Expand Up @@ -259,6 +263,10 @@
"message":"{{count}} out of {{total}}",
"description":"appears in popup"
},
"popupVersion":{
"message":"Version",
"description":"Example of use: Version 1.26.4"
},
"pickerCreate":{
"message":"Create",
"description":"English: Create"
Expand Down
72 changes: 50 additions & 22 deletions src/css/popup-fenix.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,11 +56,11 @@ hr {
align-items: stretch;
display: flex;
justify-content: space-between;
margin: var(--popup-default-gap) 0.5em;
margin: 0.5em 0.5em var(--popup-default-gap) 0.5em;
}
#switch {
display: flex;
flex-grow: 2;
flex-grow: 3;
justify-content: center;
}
#switch .fa-icon {
Expand All @@ -71,10 +71,6 @@ hr {
margin: 0;
padding: 0;
}
#switch .fa-icon:hover {
color: var(--popup-power-ink-hover);
fill: var(--popup-power-ink-hover);
}
body.off #switch .fa-icon {
color: var(--fg-0-20);
fill: var(--fg-0-20);
Expand All @@ -85,15 +81,15 @@ body.off #switch .fa-icon {
box-sizing: border-box;
display: flex;
flex-direction: column;
flex-grow: 1;
flex-grow: 2;
justify-content: space-evenly;
}
.rulesetTools [id] {
background-color: var(--bg-transient-notice);
border: 1px solid #ddc;
border-radius: 4px;
cursor: pointer;
fill: #888;
fill: var(--default-ink-a50);
flex-grow: 1;
font-size: 2.2em;
padding: 0;
Expand Down Expand Up @@ -177,9 +173,23 @@ body.mobile.no-tooltips .toolRibbon .tool {
visibility: visible;
}

body:not(.dfEnabled) #moreButton .fa-icon {
.moreOrLess > span {
cursor: pointer;
}
#moreButton .fa-icon {
transform: rotate(180deg);
}
#lessButton {
text-align: right;
}
body[data-more="a b c d e"] #moreButton {
pointer-events: none;
visibility: hidden;
}
body[data-more=""] #lessButton {
pointer-events: none;
visibility: hidden;
}

#tooltip {
background-color: var(--bg-tooltip);
Expand Down Expand Up @@ -224,9 +234,6 @@ body[dir="rtl"] #tooltip {
text-align: right;
--rule-cell-width: 5em;
}
body:not(.dfEnabled) #firewall {
display: none;
}
#firewall > div {
border: 0;
direction: ltr;
Expand All @@ -246,11 +253,11 @@ body:not(.dfEnabled) #firewall {
#firewall.expanded > div.isSubDomain.expandException:not(.isRootContext) {
display: none;
}
#firewall > div > span {
#firewall > div > span,
#actionSelector > #dynaCounts {
background-color: var(--bg-popup-cell-2);
border: none;
box-sizing: border-box;
-moz-box-sizing: border-box;
display: inline-flex;
padding: 0.4em 0;
position: relative;
Expand Down Expand Up @@ -313,7 +320,8 @@ body:not(.dfEnabled) #firewall {
#firewall.expanded > div:not(.expandException) > span:nth-of-type(3),
#firewall:not(.expanded) > div.expandException > span:nth-of-type(3),
#firewall:not(.expanded) > div.isDomain:not(.expandException) > span:nth-of-type(4),
#firewall.expanded > div.isDomain.expandException > span:nth-of-type(4) {
#firewall.expanded > div.isDomain.expandException > span:nth-of-type(4),
#actionSelector > #dynaCounts {
display: inline-flex;
justify-content: space-between;
}
Expand Down Expand Up @@ -423,15 +431,15 @@ body.advancedUser #firewall > div > span.ownRule,
color: var(--default-surface);
}
body.advancedUser #firewall > div > span.allowRule.ownRule,
#actionSelector > #dynaAllow:hover {
:root.desktop #actionSelector > #dynaAllow:hover {
background-color: var(--bg-popup-cell-allow-own);
}
body.advancedUser #firewall > div > span.blockRule.ownRule,
#actionSelector > #dynaBlock:hover {
:root.desktop #actionSelector > #dynaBlock:hover {
background-color: var(--bg-popup-cell-block-own);
}
body.advancedUser #firewall > div > span.noopRule.ownRule,
#actionSelector > #dynaNoop:hover {
:root.desktop #actionSelector > #dynaNoop:hover {
background-color: var(--bg-popup-cell-noop-own);
}

Expand All @@ -458,11 +466,8 @@ body.advancedUser #firewall > div > span.noopRule.ownRule,
width: 33.5%;
}
#actionSelector > #dynaCounts {
align-items: center;
background-color: transparent;
display: inline-flex;
height: 100%;
justify-content: space-between;
left: 0;
pointer-events: none;
position: absolute;
Expand All @@ -488,6 +493,19 @@ body.advancedUser #firewall > div > span.noopRule.ownRule,
:root body[data-ui~="+no-popups"] #no-popups {
display: flex;
}
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"] {
height: 0;
margin-bottom: 0;
margin-top: 0;
overflow-y: hidden;
visibility: hidden;
}
body:not([data-more~="d"]) [data-more="d"] {
display: none;
}

/* mouse-driven devices */
:root.desktop {
Expand All @@ -505,6 +523,13 @@ body.advancedUser #firewall > div > span.noopRule.ownRule,
max-width: 300px;
width: max-content;
}
:root.desktop #switch .fa-icon:hover {
color: var(--popup-power-ink-hover);
fill: var(--popup-power-ink-hover);
}
:root.desktop .rulesetTools [id]:hover {
fill: var(--default-ink);
}
:root.desktop #firewall {
direction: rtl;
flex-grow: 1;
Expand All @@ -513,11 +538,14 @@ body.advancedUser #firewall > div > span.noopRule.ownRule,
max-height: max(100vh, 600px);
min-width: 360px;
overflow-y: auto;
width: max-content;
width: min-content;
}
:root.desktop .tool {
padding: 0.5em;
}
:root.desktop .tool:hover {
background-color: var(--button-surface);
}
:root.desktop .moreOrLess > span:hover {
background-color: var(--button-surface);
}
2 changes: 2 additions & 0 deletions src/css/themes/default.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
--ink-50: #291d4f;
--ink-80: #20123a;
--ink-80-a4: #20123a0a;
--ink-80-a50: #20123a88;
--ink-90: #1d1133;
--light-gray-10: #f9f9fb;
--light-gray-30: #e0e0e6;
Expand Down Expand Up @@ -53,6 +54,7 @@

--default-ink: var(--ink-80);
--default-ink-a4: var(--ink-80-a4);
--default-ink-a50: var(--ink-80-a50);
--default-surface: var(--light-gray-10);

--bg-1: hsla(240, 20%, 98%, 1);
Expand Down
2 changes: 2 additions & 0 deletions src/js/background.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,8 @@ const µBlock = (( ) => { // jshint ignore:line
ignoreGenericCosmeticFilters: vAPI.webextFlavor.soup.has('mobile'),
largeMediaSize: 50,
parseAllABPHideFilters: true,
popupPanelSections: 0b111,
popupPanelDisabledSections: 0,
prefetchingDisabled: true,
requestLogMaxEntries: 1000,
showIconBadge: true,
Expand Down
12 changes: 7 additions & 5 deletions src/js/messaging.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -264,14 +264,14 @@ const getFirewallRules = function(srcHostname, desHostnames) {
const popupDataFromTabId = function(tabId, tabTitle) {
const tabContext = µb.tabContextManager.mustLookup(tabId);
const rootHostname = tabContext.rootHostname;
const µbus = µb.userSettings;
const r = {
advancedUserEnabled: µb.userSettings.advancedUserEnabled,
advancedUserEnabled: µbus.advancedUserEnabled,
appName: vAPI.app.name,
appVersion: vAPI.app.version,
colorBlindFriendly: µb.userSettings.colorBlindFriendly,
colorBlindFriendly: µbus.colorBlindFriendly,
cosmeticFilteringSwitch: false,
dfEnabled: µb.userSettings.dynamicFilteringEnabled,
firewallPaneMinimized: µb.userSettings.firewallPaneMinimized,
firewallPaneMinimized: µbus.firewallPaneMinimized,
globalAllowedRequestCount: µb.localSettings.allowedRequestCount,
globalBlockedRequestCount: µb.localSettings.blockedRequestCount,
fontSize: µb.hiddenSettings.popupFontSize,
Expand All @@ -283,9 +283,11 @@ const popupDataFromTabId = function(tabId, tabTitle) {
pageAllowedRequestCount: 0,
pageBlockedRequestCount: 0,
popupBlockedCount: 0,
popupPanelSections: µbus.popupPanelSections,
popupPanelDisabledSections: µbus.popupPanelDisabledSections,
tabId: tabId,
tabTitle: tabTitle,
tooltipsDisabled: µb.userSettings.tooltipsDisabled
tooltipsDisabled: µbus.tooltipsDisabled
};

if ( µb.hiddenSettings.uiPopupConfig !== 'undocumented' ) {
Expand Down
Loading

3 comments on commit b295d4a

@gwarser
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Additional height?

image

I think we had bug report about this too.

@gorhill
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I probably closed it back then as "by design". I just felt the new design does not look awkward with the unbound height. Hmm this makes me realize I forgot to remove that line.

@uBlock-user
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Toggle the popup panel button still shows the classic panel in the logger FYI

Please sign in to comment.