Re-order sections in the new popup panel

The blocking-stuff button icons have been brought
closer to the power button.

The go-somewhere button icons have been moved at
the bottom.

The hostname of the current site is now shown below
the power button. The base domain is bolded.

This re-ordering is for a few reasons:

- The blocking-stuff button icons are now closer
  to the revert/persist/reload transient buttons
  which show up when modifying the blocking
  behavior of uBO.

- The makes it easier to potentially bring in a
  very basic view where only the power button and
  the statistics are shown and all the button
  icons are hidden from view.
This commit is contained in:
Raymond Hill 2020-04-27 19:01:16 -04:00
parent bdf9030a98
commit 9a6feb34d5
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
5 changed files with 61 additions and 37 deletions

View File

@ -10,6 +10,7 @@
/* Internal CSS values */
:root body,
:root.mobile body {
--popup-default-gap: 1em;
font-size: 14px;
line-height: 20px;
transition-duration: 0.2s;
@ -51,16 +52,16 @@ hr {
top: 0;
z-index: 100;
}
#sticky > div {
#basicTools {
align-items: stretch;
display: flex;
justify-content: space-between;
margin: var(--popup-default-gap) 0.5em;
}
#switch {
display: flex;
flex-grow: 2;
justify-content: center;
margin: 0.5em 0;
}
#switch .fa-icon {
color: var(--popup-power-ink);
@ -86,7 +87,6 @@ body.off #switch .fa-icon {
flex-direction: column;
flex-grow: 1;
justify-content: space-evenly;
padding: 0.5em;
}
.rulesetTools [id] {
background-color: var(--bg-transient-notice);
@ -107,22 +107,25 @@ body.needSave #saveRules,
body.needSave #revertRules {
visibility: visible;
}
#hostname {
margin: var(--popup-default-gap) 0.2em;
text-align: center;
}
#hostname > span + span {
font-weight: 600;
}
.itemRibbon {
display: grid;
gap: 0.8em 1em;
gap: var(--popup-default-gap);
grid-template: auto / auto auto;
padding: 1em 1em;
margin: var(--popup-default-gap);
}
.itemRibbon > [data-i18n] + span {
justify-self: end;
text-align: end;
white-space: nowrap;
}
.itemRibbon > .h-gutter {
display: inline-block;
height: 1em;
}
.toolRibbon {
align-items: start;
@ -131,7 +134,7 @@ body.needSave #revertRules {
grid-auto-flow: column;
grid-template: auto / repeat(4, 1fr);
justify-items: center;
margin: 1em 0;
margin: var(--popup-default-gap) 0;
white-space: normal;
}
.toolRibbon .tool {
@ -161,13 +164,14 @@ body.mobile.no-tooltips .toolRibbon .tool {
position: relative;
}
#extraTools .fa-icon > .nope {
height: 1.1em;
left: 50%;
position: absolute;
stroke: var(--fg-popup-icon-x);
stroke: var(--popup-icon-x-ink);
stroke-width: 2;
transform: translateX(-50%);
visibility: hidden;
width: 1em;
width: 1.1em;
}
#extraTools > span.on .fa-icon >.nope {
visibility: visible;
@ -490,6 +494,7 @@ body.advancedUser #firewall > div > span.noopRule.ownRule,
overflow: hidden;
}
:root.desktop body {
--popup-default-gap: 0.8em;
max-width: max(100vw, 800px);
}
:root.desktop #panes {

View File

@ -165,7 +165,7 @@ body.responsive #extraTools {
#extraTools > span > .nope {
left: 50%;
position: absolute;
stroke: var(--fg-popup-icon-x);
stroke: var(--popup-icon-x-ink);
stroke-width: 2;
transform: translateX(-50%);
visibility: hidden;

View File

@ -23,6 +23,7 @@
--light-gray-30: #e0e0e6;
--light-gray-40: #cfcfd8;
--light-gray-90: #80808f;
--red-70-a80: #c50042cc;
--violet-70: #592acb;
--violet-80: #45278d;
--yellow-30: #ffd567;
@ -133,7 +134,7 @@
--bg-popup-cell-block: hsla(0, 50%, 80%, 1);
--bg-popup-cell-block-own: hsla(0, 100%, 40%, 1);
--bg-popup-cell-label-mixed: hsla(45, 100%, 38%, 1);
--fg-popup-icon-x: hsla(0, 100%, 50%, 1);
--popup-icon-x-ink: var(--red-70-a80);
}
/**

View File

@ -162,6 +162,17 @@ const formatNumber = function(count) {
/******************************************************************************/
const safePunycodeToUnicode = function(hn) {
const pretty = punycode.toUnicode(hn);
return pretty === hn ||
reCyrillicAmbiguous.test(pretty) === false ||
reCyrillicNonAmbiguous.test(pretty)
? pretty
: hn;
};
/******************************************************************************/
const rulekeyCompare = function(a, b) {
let ha = a.slice(2, a.indexOf(' ', 2));
if ( !reIP.test(ha) ) {
@ -413,18 +424,27 @@ const renderPopup = function() {
document.title = popupData.appName + ' - ' + popupData.tabTitle;
}
let elem = document.body;
elem.classList.toggle(
'advancedUser',
popupData.advancedUserEnabled === true
);
elem.classList.toggle(
'off',
popupData.pageURL === '' || popupData.netFilteringSwitch !== true
);
const isFiltering = popupData.netFilteringSwitch;
const canElementPicker = popupData.canElementPicker === true &&
popupData.netFilteringSwitch === true;
const body = document.body;
body.classList.toggle('advancedUser', popupData.advancedUserEnabled === true);
body.classList.toggle('off', popupData.pageURL === '' || isFiltering !== true);
// The hostname information below the power switch
{
const [ elemHn, elemDn ] = uDom.nodeFromId('hostname').children;
const { pageDomain, pageHostname } = popupData;
if ( pageDomain !== '' ) {
elemDn.textContent = safePunycodeToUnicode(pageDomain);
elemHn.textContent = pageHostname !== pageDomain
? safePunycodeToUnicode(pageHostname.slice(0, -pageDomain.length - 1)) + '.'
: '';
} else {
elemHn.textContent = elemDn.textContent = '';
}
}
const canElementPicker = popupData.canElementPicker === true && isFiltering;
uDom.nodeFromId('gotoPick').classList.toggle('enabled', canElementPicker);
uDom.nodeFromId('gotoZap').classList.toggle('enabled', canElementPicker);
@ -478,10 +498,7 @@ const renderPopup = function() {
vAPI.localStorage.setItem('popupFirewallPane', dfPaneVisibleStored);
}
document.body.classList.toggle(
'dfEnabled',
dfPaneVisible === true
);
body.classList.toggle('dfEnabled', dfPaneVisible === true);
document.documentElement.classList.toggle(
'colorBlind',

View File

@ -14,7 +14,7 @@
<body class="loading">
<div id="panes">
<div id="sticky">
<div>
<div id="basicTools">
<div class="rulesetTools">
<span id="saveRules" class="fa-icon" data-i18n-title="popupTipSaveRules">lock</span>
<span id="revertRules" class="fa-icon" data-i18n-title="popupTipRevertRules">eraser</span>
@ -26,16 +26,10 @@
<span id="refresh" class="fa-icon">refresh</span>
</div>
</div>
<div id="hostname"><span>ephemeralnewyork.</span>&shy;<span>wordpress.com</span></div>
<hr>
</div>
<div id="main">
<div id="basicTools" class="toolRibbon">
<span id="gotoZap" class="fa-icon tool" data-i18n-title="popupTipZapper">bolt<span class="caption" data-i18n="popupTipZapper"></span></span>
<span id="gotoPick" class="fa-icon tool" data-i18n-title="popupTipPicker">eye-dropper<span class="caption" data-i18n="popupTipPicker"></span></span>
<a href="logger-ui.html#_" class="fa-icon tool enabled" target="uBOLogger" tabindex="0" data-i18n-title="popupTipLog">list-alt<span class="caption" data-i18n="popupTipLog"></span></a>
<a href="dashboard.html" class="fa-icon tool enabled" target="uBODashboard" tabindex="0" data-i18n-title="popupTipDashboard">sliders<span class="caption" data-i18n="popupTipDashboard"></span></a>
</div>
<hr>
<div id="basicStats" class="itemRibbon">
<span data-i18n="popupBlockedOnThisPage_v2"></span><span></span>
<span data-i18n="popupBlockedSinceInstall_v2"></span><span></span>
@ -50,6 +44,13 @@
<span id="no-scripting" class="hnSwitch tool enabled" role="button" aria-label tabindex="0" title><span class="fa-icon fa-icon-badged">code<svg class="nope" viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span><span class="caption" data-i18n="popupNoScripting_v2"></span></span>
</div>
<hr>
<div class="toolRibbon">
<span id="gotoZap" class="fa-icon tool" data-i18n-title="popupTipZapper">bolt<span class="caption" data-i18n="popupTipZapper"></span></span>
<span id="gotoPick" class="fa-icon tool" data-i18n-title="popupTipPicker">eye-dropper<span class="caption" data-i18n="popupTipPicker"></span></span>
<a href="logger-ui.html#_" class="fa-icon tool enabled" target="uBOLogger" tabindex="0" data-i18n-title="popupTipLog">list-alt<span class="caption" data-i18n="popupTipLog"></span></a>
<a href="dashboard.html" class="fa-icon tool enabled" target="uBODashboard" tabindex="0" data-i18n-title="popupTipDashboard">sliders<span class="caption" data-i18n="popupTipDashboard"></span></a>
</div>
<hr>
<div id="moreButton" class="itemRibbon">
<span data-i18n="popupMoreButton_v2"></span><span class="fa-icon">angle-up</span>
</div>