Skip to content

Commit db9c321

Browse files
gorhillgorhill
committed
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
1 parent a733944 commit db9c321

File tree

13 files changed

+120
-72
lines changed

13 files changed

+120
-72
lines changed

‎src/_locales/en/messages.json‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -179,21 +179,25 @@
179179
"message":"Click to no longer disable JavaScript on this site",
180180
"description":"Tooltip for the no-scripting per-site switch"
181181
},
182+
"popupNoPopups_v2":{
183+
"message":"Pop-up windows",
184+
"description":"Caption for the no-popups per-site switch"
185+
},
182186
"popupNoLargeMedia_v2":{
183187
"message":"Large media elements",
184-
"description":"Tip for the no-large-media per-site switch"
188+
"description":"Caption for the no-large-media per-site switch"
185189
},
186190
"popupNoCosmeticFiltering_v2":{
187191
"message":"Cosmetic filtering",
188-
"description":"Tip for the no-cosmetic-filtering per-site switch"
192+
"description":"Caption for the no-cosmetic-filtering per-site switch"
189193
},
190194
"popupNoRemoteFonts_v2":{
191195
"message":"Remote fonts",
192-
"description":"Tip for the no-remote-fonts per-site switch"
196+
"description":"Caption for the no-remote-fonts per-site switch"
193197
},
194198
"popupNoScripting_v2":{
195199
"message":"JavaScript",
196-
"description":"Tip for the no-scripting per-site switch"
200+
"description":"Caption for the no-scripting per-site switch"
197201
},
198202
"popupMoreButton_v2":{
199203
"message":"More",

‎src/css/document-blocked.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,8 @@ body[dir="rtl"] #theURL > p > span {
8888
left: 0;
8989
}
9090
#theURL > p:hover > span {
91-
color: var(--fg-0);
92-
fill: var(--fg-0);
91+
color: var(--default-ink);
92+
fill: var(--default-ink);
9393
}
9494
#theURL > p > span:before {
9595
content: '\f010';

‎src/css/fa-icons.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040

4141
.fa-icon > svg {
4242
height: 1em;
43+
overflow: visible;
4344
width: 1em;
4445
}
4546

‎src/css/popup-fenix.css‎

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -127,39 +127,35 @@ body.needSave #revertRules {
127127
.toolRibbon {
128128
align-items: start;
129129
display: grid;
130-
grid-template: auto / 25% 25% 25% 25%;
130+
grid-auto-columns: 1fr;
131+
grid-auto-flow: column;
132+
grid-template: auto / repeat(4, 1fr);
131133
justify-items: center;
132134
margin: 1em 0;
133135
white-space: normal;
134136
}
135137
.toolRibbon .tool {
138+
cursor: pointer;
136139
display: flex;
137140
flex-direction: column;
138141
font-size: 1.4em;
139142
min-width: 32px;
140-
}
141-
142-
.tool {
143-
cursor: pointer;
144143
padding: 0 0.5em;
145144
unicode-bidi: embed;
146145
visibility: hidden;
147146
}
148-
.tool.enabled {
147+
.toolRibbon .tool.enabled {
149148
visibility: visible;
150149
}
151-
.tool [data-i18n] {
150+
.toolRibbon .tool .caption {
152151
font: 10px/12px sans-serif;
153152
margin-top: 0.5em;
154153
text-align: center;
155154
}
156-
body.no-tooltips .tool [data-i18n] {
157-
display: none;
155+
body.mobile.no-tooltips .toolRibbon .tool {
156+
font-size: 1.6em;
158157
}
159158

160-
.statValue {
161-
margin: 0;
162-
}
163159
#extraTools .fa-icon {
164160
align-self: center;
165161
position: relative;
@@ -470,10 +466,31 @@ body.advancedUser #firewall > div > span.noopRule.ownRule,
470466
width: 100%;
471467
}
472468

469+
/* configurable UI elements */
470+
:root.desktop .toolRibbon .caption,
471+
:root.mobile body.no-tooltips .toolRibbon .caption,
472+
:root.mobile body[data-ui~="-captions"] .toolRibbon .caption {
473+
display: none;
474+
}
475+
:root.mobile .toolRibbon .caption,
476+
:root.desktop body[data-ui~="+captions"] .toolRibbon .caption {
477+
display: inherit;
478+
}
479+
:root.mobile #no-popups,
480+
:root body[data-ui~="-no-popups"] #no-popups {
481+
display: none;
482+
}
483+
:root.desktop #no-popups,
484+
:root body[data-ui~="+no-popups"] #no-popups {
485+
display: flex;
486+
}
487+
473488
/* mouse-driven devices */
489+
:root.desktop {
490+
overflow: hidden;
491+
}
474492
:root.desktop body {
475493
max-width: max(100vw, 800px);
476-
overflow: auto;
477494
}
478495
:root.desktop #panes {
479496
flex-direction: row-reverse;
@@ -499,6 +516,3 @@ body.advancedUser #firewall > div > span.noopRule.ownRule,
499516
:root.desktop .tool:hover {
500517
background-color: var(--button-surface);
501518
}
502-
:root.desktop .tool [data-i18n] {
503-
width: min-content;
504-
}

‎src/css/popup.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -433,7 +433,7 @@ body.advancedUser #firewallContainer > div > span.noopRule,
433433
}
434434
body.advancedUser #firewallContainer > div > span.ownRule,
435435
#firewallContainer > div > span.ownRule {
436-
color: var(--bg-0);
436+
color: var(--bg-popup-cell-block-own);
437437
}
438438
body.advancedUser #firewallContainer > div > span.allowRule.ownRule,
439439
#actionSelector > #dynaAllow:hover {

‎src/css/themes/default.css‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,6 @@
5050
:root {
5151
--font-size: 14px;
5252

53-
--bg-0: var(--white);
54-
--fg-0: var(--ink-80);
5553
--default-ink: var(--ink-80);
5654
--default-ink-a4: var(--ink-80-a4);
5755
--default-surface: var(--light-gray-10);
@@ -142,13 +140,11 @@
142140
Use slightly darker inks on lower pixel-density devices to improve
143141
contrast.
144142
*/
145-
@media (max-resolution: 150dpi) {
146-
:root {
147-
--default-ink: var(--ink-90);
148-
--button-ink: var(--ink-90);
149-
--fieldset-header-ink: var(--ink-50);
150-
--link-ink: var(--violet-80);
151-
}
143+
:root:not(.hidpi) {
144+
--default-ink: var(--ink-90);
145+
--button-ink: var(--ink-90);
146+
--fieldset-header-ink: var(--ink-50);
147+
--link-ink: var(--violet-80);
152148
}
153149

154150
/**

‎src/img/material-design.svg‎

Lines changed: 4 additions & 3 deletions
Loading

‎src/img/photon.svg‎

Lines changed: 16 additions & 0 deletions
Loading

‎src/js/background.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ const µBlock = (( ) => { // jshint ignore:line
7070
selfieAfter: 3,
7171
strictBlockingBypassDuration: 120,
7272
suspendTabsUntilReady: 'unset',
73+
uiPopupConfig: 'undocumented',
7374
uiFlavor: 'unset',
7475
updateAssetBypassBrowserCache: false,
7576
userResourcesLocation: 'unset',

‎src/js/fa-icons.js‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,19 @@ const faIconsInit = function(root) {
2929
if ( icon.firstChild === null || icon.firstChild.nodeType !== 3 ) {
3030
continue;
3131
}
32-
const name = icon.firstChild.nodeValue;
3332
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
34-
svg.classList.add('fa-icon_' + name);
3533
const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
36-
const href = '/img/fontawesome/fontawesome-defs.svg#' + name;
37-
use.setAttribute('href', href);
34+
const name = icon.firstChild.nodeValue;
35+
let file;
36+
if ( name.startsWith('ph-') ) {
37+
file = 'photon';
38+
} else if ( name.startsWith('md-') ) {
39+
file = 'material-design';
40+
} else {
41+
file = 'fontawesome/fontawesome-defs';
42+
}
43+
svg.classList.add('fa-icon_' + name);
44+
use.setAttribute('href', `/img/${file}.svg#${name}`);
3845
svg.appendChild(use);
3946
icon.replaceChild(svg, icon.firstChild);
4047
if ( icon.classList.contains('fa-icon-badged') ) {

0 commit comments

Comments
 (0)