mirror of https://github.com/gorhill/uBlock.git
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
parent
bdf9030a98
commit
9a6feb34d5
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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>­<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue