Skip to content

Commit

Permalink
More work toward re-hauling the user interface
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@gorhill
gorhill committed Apr 27, 2020
1 parent a733944 commit db9c321
Show file tree
Hide file tree
Showing 13 changed files with 120 additions and 72 deletions.
12 changes: 8 additions & 4 deletions src/_locales/en/messages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions src/css/document-blocked.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
1 change: 1 addition & 0 deletions src/css/fa-icons.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@

.fa-icon > svg {
height: 1em;
overflow: visible;
width: 1em;
}

Expand Down
46 changes: 30 additions & 16 deletions src/css/popup-fenix.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}
2 changes: 1 addition & 1 deletion src/css/popup.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
14 changes: 5 additions & 9 deletions src/css/themes/default.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
}

/**
Expand Down
7 changes: 4 additions & 3 deletions src/img/material-design.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions src/img/photon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/js/background.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ const µBlock = (( ) => { // jshint ignore:line
selfieAfter: 3,
strictBlockingBypassDuration: 120,
suspendTabsUntilReady: 'unset',
uiPopupConfig: 'undocumented',
uiFlavor: 'unset',
updateAssetBypassBrowserCache: false,
userResourcesLocation: 'unset',
Expand Down
15 changes: 11 additions & 4 deletions src/js/fa-icons.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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') ) {
Expand Down
4 changes: 4 additions & 0 deletions src/js/messaging.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
45 changes: 24 additions & 21 deletions src/js/popup-fenix.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
};

Expand All @@ -533,6 +525,13 @@ const tooltipTargetSelectors = new Map([
i18n: 'popupPowerSwitchInfo',
}
],
[
'#no-popups',
{
state: '#no-popups.on',
i18n: 'popupTipNoPopups'
}
],
[
'#no-large-media',
{
Expand Down Expand Up @@ -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');
}
};

/******************************************************************************/
Expand Down Expand Up @@ -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',
Expand Down
Loading

8 comments on commit db9c321

@gwarser
Copy link
Contributor

@gwarser gwarser commented on db9c321 Apr 29, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

This commit changed color of the ---/+++ in overview panel when rule is modified/temporary to red. Now these signs are not visible when rule is changed to block [also red].

var(--bg-popup-cell-block-own)?

@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.

Addendum: If you set to allow/noop, the +/- signs appears in red

@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.

Ok I understand the change was wrong. However I don't understand why I am not seeing this on my side.

@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.

Ok never mind, this affects only the classic popup panel, I was testing with the new one.

@gwarser
Copy link
Contributor

@gwarser gwarser commented on db9c321 Apr 29, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

Is this something to be fixed? Looks completely out of place.

image
image

You did not noticed because it looks ok without list?

image

@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.

Is this something to be fixed?

Probably, I haven't received feedback for that one -- probably because they didn't stumble on it. Is there such a drop-down list somewhere in Firefox Preview? If not the general rule is that Firefox Preview follows Material Design guidelines.

@gwarser
Copy link
Contributor

Choose a reason for hiding this comment

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

I can test stable only and looks good here. It's most likely ok then.

Screenshot_20200429-211454

@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 could force the use of a list even with a single item to keep the look consistent. I use <code>...</code> when there is a single item.

Please sign in to comment.