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

13 files changed

+120
-72
lines changed

‎src/_locales/en/messages.json

+8-4
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

+2-2
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

+1
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

+30-16
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

+1-1
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

+5-9
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

+4-3
Loading

‎src/img/photon.svg

+16
Loading

‎src/js/background.js

+1
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

+11-4
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') ) {

‎src/js/messaging.js

+4
Original file line numberDiff line numberDiff line change
@@ -288,6 +288,10 @@ const popupDataFromTabId = function(tabId, tabTitle) {
288288
tooltipsDisabled: µb.userSettings.tooltipsDisabled
289289
};
290290

291+
if ( µb.hiddenSettings.uiPopupConfig !== 'undocumented' ) {
292+
r.uiPopupConfig = µb.hiddenSettings.uiPopupConfig;
293+
}
294+
291295
const pageStore = µb.pageStoreFromTabId(tabId);
292296
if ( pageStore ) {
293297
// https://github.com/gorhill/uBlock/issues/2105

‎src/js/popup-fenix.js

+24-21
Original file line numberDiff line numberDiff line change
@@ -504,24 +504,16 @@ const renderPopup = function() {
504504
// Use tooltip for ARIA purpose.
505505

506506
const renderTooltips = function(selector) {
507-
for ( const entry of tooltipTargetSelectors ) {
508-
if ( selector !== undefined && entry[0] !== selector ) { continue; }
507+
for ( const [ key, details ] of tooltipTargetSelectors ) {
508+
if ( selector !== undefined && key !== selector ) { continue; }
509+
const elem = uDom.nodeFromSelector(key);
510+
if ( elem.hasAttribute('title') === false ) { continue; }
509511
const text = vAPI.i18n(
510-
entry[1].i18n +
511-
(uDom.nodeFromSelector(entry[1].state) === null ? '1' : '2')
512+
details.i18n +
513+
(uDom.nodeFromSelector(details.state) === null ? '1' : '2')
512514
);
513-
const elem = uDom.nodeFromSelector(entry[0]);
514515
elem.setAttribute('aria-label', text);
515-
const tip = elem.querySelector('.tip');
516-
if ( tip !== null ) {
517-
tip.textContent = text;
518-
} else {
519-
elem.setAttribute('data-tip', text);
520-
}
521-
if ( tip === null && selector !== undefined ) {
522-
uDom.nodeFromId('tooltip').textContent =
523-
elem.getAttribute('data-tip');
524-
}
516+
elem.setAttribute('title', text);
525517
}
526518
};
527519

@@ -533,6 +525,13 @@ const tooltipTargetSelectors = new Map([
533525
i18n: 'popupPowerSwitchInfo',
534526
}
535527
],
528+
[
529+
'#no-popups',
530+
{
531+
state: '#no-popups.on',
532+
i18n: 'popupTipNoPopups'
533+
}
534+
],
536535
[
537536
'#no-large-media',
538537
{
@@ -585,13 +584,17 @@ let renderOnce = function() {
585584

586585
// https://github.com/uBlockOrigin/uBlock-issues/issues/22
587586
if ( popupData.advancedUserEnabled !== true ) {
588-
uDom('#firewall [data-i18n-tip][data-src]').removeAttr('data-tip');
587+
uDom('#firewall [title][data-src]').removeAttr('title');
589588
}
590589

591-
body.classList.toggle(
592-
'no-tooltips',
593-
popupData.tooltipsDisabled === true
594-
);
590+
if ( popupData.uiPopupConfig !== undefined ) {
591+
document.body.setAttribute('data-ui', popupData.uiPopupConfig);
592+
}
593+
594+
body.classList.toggle('no-tooltips', popupData.tooltipsDisabled === true);
595+
if ( popupData.tooltipsDisabled === true ) {
596+
uDom('[title]').removeAttr('title');
597+
}
595598
};
596599

597600
/******************************************************************************/
@@ -986,7 +989,7 @@ const toggleHostnameSwitch = async function(ev) {
986989
return;
987990
}
988991
target.classList.toggle('on');
989-
renderTooltips('#' + switchName);
992+
renderTooltips(`#${switchName}`);
990993

991994
const response = await messaging.send('popupPanel', {
992995
what: 'toggleHostnameSwitch',

0 commit comments

Comments
 (0)