Allow hiding blocked count since install in popup panel

Also, more fine tuning of visuals.

Two new advanced settings, to be left undocumented as
"purposefully undocumented setting".
This commit is contained in:
Raymond Hill 2020-05-01 19:47:01 -04:00
parent 040253d586
commit 38cdb42348
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
9 changed files with 66 additions and 41 deletions

View File

@ -74,10 +74,11 @@ hr {
justify-content: center;
margin: 0 var(--popup-gap-thin);
padding: 0;
stroke: none;
}
body.off #switch {
color: var(--popup-power-disabled-ink);
fill: var(--popup-power-disabled-ink);
fill: var(--default-surface);
stroke: var(--checkbox-ink);
}
.rulesetTools {
background-color: transparent;
@ -116,10 +117,16 @@ body.needSave #revertRules {
}
.itemRibbon {
column-gap: var(--popup-gap);
display: grid;
gap: var(--popup-gap);
grid-template: auto / auto auto;
margin: var(--popup-gap);
margin: var(--popup-gap) var(--popup-gap) 0 var(--popup-gap);
}
.itemRibbon > span {
margin-bottom: var(--popup-gap);
}
.itemRibbon > [data-i18n] {
min-width: 10em;
}
.itemRibbon > [data-i18n] + span {
justify-self: end;
@ -183,7 +190,9 @@ body.mobile.no-tooltips .toolRibbon .tool {
}
.moreOrLess > span {
cursor: pointer;
margin: 0;
padding: var(--popup-gap);
user-select: none;
}
#moreButton .fa-icon {
transform: rotate(180deg);
@ -191,7 +200,7 @@ body.mobile.no-tooltips .toolRibbon .tool {
#lessButton {
text-align: right;
}
body[data-more="a b c d e"] #moreButton {
body[data-more="a b c d e f"] #moreButton {
pointer-events: none;
visibility: hidden;
}
@ -478,14 +487,15 @@ body.advancedUser #firewall > div > span.noopRule.ownRule,
body:not([data-more~="a"]) [data-more="a"],
body:not([data-more~="b"]) [data-more="b"],
body:not([data-more~="c"]) [data-more="c"],
body:not([data-more~="e"]) [data-more="e"] {
body:not([data-more~="d"]) [data-more="d"],
body:not([data-more~="f"]) [data-more="f"] {
height: 0;
margin-bottom: 0;
margin-top: 0;
overflow-y: hidden;
visibility: hidden;
}
body:not([data-more~="d"]) [data-more="d"] {
body:not([data-more~="e"]) [data-more="e"] {
display: none;
}

View File

@ -23,7 +23,7 @@
--light-gray-10: #f9f9fb;
--light-gray-20: #f0f0f4;
--light-gray-30: #e0e0e6;
--light-gray-30-a75: #e0e0e6bf;
--light-gray-30-a50: #e0e0e680;
--light-gray-40: #cfcfd8;
--light-gray-50: #bfbfc9;
--light-gray-60: #afafba;
@ -61,7 +61,7 @@
--default-ink-a4: var(--ink-80-a4);
--default-ink-a50: var(--ink-80-a50);
--default-surface: var(--light-gray-10);
--default-surface-hover: var(--light-gray-30-a75);
--default-surface-hover: var(--light-gray-30-a50);
--bg-1: hsla(240, 20%, 98%, 1);
--bg-1-border: hsla(240, 20%, 90%, 1);
@ -110,7 +110,7 @@
0px 1px 6px 0px rgba(14, 13, 26, 0.12);
--dashboard-tab-ink: var(--ink-80);
--dashboard-tab-active-ink: var(--violet-70);
--dashboard-tab-surface-hover: var(--default-ink-a4);
--dashboard-tab-surface-hover: var(--default-surface-hover);
--fg-icon-info-lvl-0-dimmed: #888;
--fg-icon-info-lvl-0: inherit;

View File

@ -57,7 +57,7 @@ License - https://github.com/FortAwesome/Font-Awesome/tree/a8386aae19e200ddb0f68
<symbol id="pause-circle-o" viewBox="0 0 1536 1536"><path d="M 768,0 Q 977,0 1153.5,103 1330,206 1433,382.5 1536,559 1536,768 1536,977 1433,1153.5 1330,1330 1153.5,1433 977,1536 768,1536 559,1536 382.5,1433 206,1330 103,1153.5 0,977 0,768 0,559 103,382.5 206,206 382.5,103 559,0 768,0 Z m 0,1312 q 148,0 273,-73 125,-73 198,-198 73,-125 73,-273 0,-148 -73,-273 -73,-125 -198,-198 -125,-73 -273,-73 -148,0 -273,73 -125,73 -198,198 -73,125 -73,273 0,148 73,273 73,125 198,198 125,73 273,73 z m 96,-224 q -14,0 -23,-9 -9,-9 -9,-23 l 0,-576 q 0,-14 9,-23 9,-9 23,-9 l 192,0 q 14,0 23,9 9,9 9,23 l 0,576 q 0,14 -9,23 -9,9 -23,9 l -192,0 z m -384,0 q -14,0 -23,-9 -9,-9 -9,-23 l 0,-576 q 0,-14 9,-23 9,-9 23,-9 l 192,0 q 14,0 23,9 9,9 9,23 l 0,576 q 0,14 -9,23 -9,9 -23,9 l -192,0 z"/></symbol>
<symbol id="play-circle-o" viewBox="0 0 1536 1536"><path d="m 1184,768 q 0,37 -32,55 l -544,320 q -15,9 -32,9 -16,0 -32,-8 -32,-19 -32,-56 l 0,-640 q 0,-37 32,-56 33,-18 64,1 l 544,320 q 32,18 32,55 z m 128,0 q 0,-148 -73,-273 -73,-125 -198,-198 -125,-73 -273,-73 -148,0 -273,73 -125,73 -198,198 -73,125 -73,273 0,148 73,273 73,125 198,198 125,73 273,73 148,0 273,-73 125,-73 198,-198 73,-125 73,-273 z m 224,0 q 0,209 -103,385.5 Q 1330,1330 1153.5,1433 977,1536 768,1536 559,1536 382.5,1433 206,1330 103,1153.5 0,977 0,768 0,559 103,382.5 206,206 382.5,103 559,0 768,0 977,0 1153.5,103 1330,206 1433,382.5 1536,559 1536,768 Z"/></symbol>
<symbol id="plus" viewBox="0 0 1408 1408"><path d="m 1408,608 0,192 q 0,40 -28,68 -28,28 -68,28 l -416,0 0,416 q 0,40 -28,68 -28,28 -68,28 l -192,0 q -40,0 -68,-28 -28,-28 -28,-68 l 0,-416 -416,0 Q 56,896 28,868 0,840 0,800 L 0,608 q 0,-40 28,-68 28,-28 68,-28 l 416,0 0,-416 Q 512,56 540,28 568,0 608,0 l 192,0 q 40,0 68,28 28,28 28,68 l 0,416 416,0 q 40,0 68,28 28,28 28,68 z"/></symbol>
<symbol id="power-off" viewBox="0 0 1536 1664"><path d="m 1536,896 q 0,156 -61,298 -61,142 -164,245 -103,103 -245,164 -142,61 -298,61 -156,0 -298,-61 Q 328,1542 225,1439 122,1336 61,1194 0,1052 0,896 0,714 80.5,553 161,392 307,283 q 43,-32 95.5,-25 52.5,7 83.5,50 32,42 24.5,94.5 Q 503,455 461,487 363,561 309.5,668 256,775 256,896 q 0,104 40.5,198.5 40.5,94.5 109.5,163.5 69,69 163.5,109.5 94.5,40.5 198.5,40.5 104,0 198.5,-40.5 Q 1061,1327 1130,1258 1199,1189 1239.5,1094.5 1280,1000 1280,896 1280,775 1226.5,668 1173,561 1075,487 1033,455 1025.5,402.5 1018,350 1050,308 q 31,-43 84,-50 53,-7 95,25 146,109 226.5,270 80.5,161 80.5,343 z m -640,-768 0,640 q 0,52 -38,90 -38,38 -90,38 -52,0 -90,-38 -38,-38 -38,-90 l 0,-640 q 0,-52 38,-90 38,-38 90,-38 52,0 90,38 38,38 38,90 z"/></symbol>
<symbol id="power-off" viewBox="0 0 1568 1696"><path d="m 1552,912 q 0,156 -61,298 -61,142 -164,245 -103,103 -245,164 -142,61 -298,61 -156,0 -298,-61 Q 344,1558 241,1455 138,1352 77,1210 16,1068 16,912 16,730 96.5,569 177,408 323,299 q 43,-32 95.5,-25 52.5,7 83.5,50 32,42 24.5,94.5 Q 519,471 477,503 379,577 325.5,684 272,791 272,912 q 0,104 40.5,198.5 40.5,94.5 109.5,163.5 69,69 163.5,109.5 94.5,40.5 198.5,40.5 104,0 198.5,-40.5 Q 1077,1343 1146,1274 1215,1205 1255.5,1110.5 1296,1016 1296,912 1296,791 1242.5,684 1189,577 1091,503 1049,471 1041.5,418.5 1034,366 1066,324 q 31,-43 84,-50 53,-7 95,25 146,109 226.5,270 80.5,161 80.5,343 z M 912,144 v 640 q 0,52 -38,90 -38,38 -90,38 -52,0 -90,-38 -38,-38 -38,-90 V 144 q 0,-52 38,-90 38,-38 90,-38 52,0 90,38 38,38 38,90 z" style="stroke-width:32"/></symbol>
<symbol id="question-circle" viewBox="0 0 1536 1536"><path d="m 896,1248 v -192 q 0,-14 -9,-23 -9,-9 -23,-9 H 672 q -14,0 -23,9 -9,9 -9,23 v 192 q 0,14 9,23 9,9 23,9 h 192 q 14,0 23,-9 9,-9 9,-23 z m 256,-672 q 0,-88 -55.5,-163 Q 1041,338 958,297 875,256 788,256 q -243,0 -371,213 -15,24 8,42 l 132,100 q 7,6 19,6 16,0 25,-12 53,-68 86,-92 34,-24 86,-24 48,0 85.5,26 37.5,26 37.5,59 0,38 -20,61 -20,23 -68,45 -63,28 -115.5,86.5 Q 640,825 640,892 v 36 q 0,14 9,23 9,9 23,9 h 192 q 14,0 23,-9 9,-9 9,-23 0,-19 21.5,-49.5 Q 939,848 972,829 q 32,-18 49,-28.5 17,-10.5 46,-35 29,-24.5 44.5,-48 15.5,-23.5 28,-60.5 12.5,-37 12.5,-81 z m 384,192 q 0,209 -103,385.5 Q 1330,1330 1153.5,1433 977,1536 768,1536 559,1536 382.5,1433 206,1330 103,1153.5 0,977 0,768 0,559 103,382.5 206,206 382.5,103 559,0 768,0 977,0 1153.5,103 1330,206 1433,382.5 1536,559 1536,768 Z"/></symbol>
<symbol id="refresh" viewBox="0 0 1536 1536"><path d="m 1511,928 q 0,5 -1,7 -64,268 -268,434.5 Q 1038,1536 764,1536 618,1536 481.5,1481 345,1426 238,1324 l -129,129 q -19,19 -45,19 -26,0 -45,-19 Q 0,1434 0,1408 L 0,960 q 0,-26 19,-45 19,-19 45,-19 l 448,0 q 26,0 45,19 19,19 19,45 0,26 -19,45 l -137,137 q 71,66 161,102 90,36 187,36 134,0 250,-65 116,-65 186,-179 11,-17 53,-117 8,-23 30,-23 l 192,0 q 13,0 22.5,9.5 9.5,9.5 9.5,22.5 z m 25,-800 0,448 q 0,26 -19,45 -19,19 -45,19 l -448,0 q -26,0 -45,-19 -19,-19 -19,-45 0,-26 19,-45 L 1117,393 Q 969,256 768,256 q -134,0 -250,65 -116,65 -186,179 -11,17 -53,117 -8,23 -30,23 L 50,640 Q 37,640 27.5,630.5 18,621 18,608 l 0,-7 Q 83,333 288,166.5 493,0 768,0 914,0 1052,55.5 1190,111 1297,212 L 1427,83 q 19,-19 45,-19 26,0 45,19 19,19 19,45 z"/></symbol>
<symbol id="search" viewBox="0 0 1664 1664"><path d="M 1152,704 Q 1152,519 1020.5,387.5 889,256 704,256 519,256 387.5,387.5 256,519 256,704 256,889 387.5,1020.5 519,1152 704,1152 889,1152 1020.5,1020.5 1152,889 1152,704 Z m 512,832 q 0,52 -38,90 -38,38 -90,38 -54,0 -90,-38 L 1103,1284 Q 924,1408 704,1408 561,1408 430.5,1352.5 300,1297 205.5,1202.5 111,1108 55.5,977.5 0,847 0,704 0,561 55.5,430.5 111,300 205.5,205.5 300,111 430.5,55.5 561,0 704,0 q 143,0 273.5,55.5 130.5,55.5 225,150 94.5,94.5 150,225 55.5,130.5 55.5,273.5 0,220 -124,399 l 343,343 q 37,37 37,90 z"/></symbol>

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 31 KiB

View File

@ -66,6 +66,8 @@ const µBlock = (( ) => { // jshint ignore:line
loggerPopupType: 'popup',
manualUpdateAssetFetchPeriod: 500,
popupFontSize: 'unset',
popupPanelDisabledSections: 0,
popupPanelLockedSections: 0,
requestJournalProcessPeriod: 1000,
selfieAfter: 3,
strictBlockingBypassDuration: 120,
@ -92,8 +94,7 @@ const µBlock = (( ) => { // jshint ignore:line
ignoreGenericCosmeticFilters: vAPI.webextFlavor.soup.has('mobile'),
largeMediaSize: 50,
parseAllABPHideFilters: true,
popupPanelSections: 0b111,
popupPanelDisabledSections: 0,
popupPanelSections: 0b1111,
prefetchingDisabled: true,
requestLogMaxEntries: 1000,
showIconBadge: true,

View File

@ -284,7 +284,8 @@ const popupDataFromTabId = function(tabId, tabTitle) {
pageBlockedRequestCount: 0,
popupBlockedCount: 0,
popupPanelSections: µbus.popupPanelSections,
popupPanelDisabledSections: µbus.popupPanelDisabledSections,
popupPanelDisabledSections: µb.hiddenSettings.popupPanelDisabledSections,
popupPanelLockedSections: µb.hiddenSettings.popupPanelLockedSections,
tabId: tabId,
tabTitle: tabTitle,
tooltipsDisabled: µbus.tooltipsDisabled

View File

@ -493,7 +493,7 @@ const renderPopup = function() {
setGlobalExpand(popupData.firewallPaneMinimized === false, true);
// Build dynamic filtering pane only if in use
if ( (popupData.popupPanelSections & ~popupData.popupPanelDisabledSections & 0b1000) !== 0 ) {
if ( (computedSections() & 0b10000) !== 0 ) {
buildAllFirewallRows();
}
@ -588,9 +588,7 @@ let renderOnce = function() {
uDom.nodeFromId('version').textContent = popupData.appVersion;
sectionBitsToAttribute(
popupData.popupPanelSections & ~popupData.popupPanelDisabledSections
);
sectionBitsToAttribute(computedSections());
if ( popupData.uiPopupConfig !== undefined ) {
document.body.setAttribute('data-ui', popupData.uiPopupConfig);
@ -729,7 +727,12 @@ const gotoURL = function(ev) {
// The popup panel is made of sections. Visiblity of sections can
// be toggle on/off.
const maxNumberOfSections = 5;
const maxNumberOfSections = 6;
const computedSections = ( ) =>
popupData.popupPanelSections &
~popupData.popupPanelDisabledSections |
popupData.popupPanelLockedSections;
const sectionBitsFromAttribute = function() {
const attr = document.body.dataset.more;
@ -752,17 +755,18 @@ const sectionBitsToAttribute = function(bits) {
};
const toggleSections = function(more) {
const mask = ~popupData.popupPanelDisabledSections;
const offbits = ~popupData.popupPanelDisabledSections;
const onbits = popupData.popupPanelLockedSections;
let currentBits = sectionBitsFromAttribute();
let newBits = currentBits;
for ( let i = 0; i < maxNumberOfSections; i++ ) {
const bit = 1 << (more ? i : maxNumberOfSections - i - 1);
if ( (mask & bit) === 0 ) { continue; }
if ( more ) {
newBits |= bit;
} else {
newBits &= ~bit;
}
newBits = newBits & offbits | onbits;
if ( newBits !== currentBits ) { break; }
}
if ( newBits === currentBits ) { return; }
@ -783,7 +787,7 @@ const toggleSections = function(more) {
vAPI.localStorage.setItem('popupPanelSections', newBits);
// Dynamic filtering pane may not have been built yet
if ( (newBits & 0b1000) !== 0 && dfPaneBuilt === false ) {
if ( (newBits & 0b10000) !== 0 && dfPaneBuilt === false ) {
buildAllFirewallRows();
}
};

View File

@ -506,7 +506,7 @@ const renderPopup = function() {
// https://github.com/chrisaljoudi/uBlock/issues/470
// This must be done here, to be sure the popup is resized properly
const dfPaneVisible = (popupData.popupPanelSections & 0b1000) !== 0;
const dfPaneVisible = (popupData.popupPanelSections & 0b10000) !== 0;
// https://github.com/chrisaljoudi/uBlock/issues/1068
// Remember the last state of the firewall pane. This allows to
@ -792,19 +792,19 @@ const gotoURL = function(ev) {
/******************************************************************************/
const toggleFirewallPane = function() {
popupData.popupPanelSections = popupData.popupPanelSections ^ 0b1000;
popupData.popupPanelSections = popupData.popupPanelSections ^ 0b10000;
messaging.send('popupPanel', {
what: 'userSettings',
name: 'popupPanelSections',
value: popupData.popupPanelSections | 0b0111,
value: popupData.popupPanelSections | 0b01111,
});
// https://github.com/chrisaljoudi/uBlock/issues/996
// Remember the last state of the firewall pane. This allows to
// configure the popup size early next time it is opened, which means a
// less glitchy popup at open time.
dfPaneVisibleStored = (popupData.popupPanelSections & 0b1000) !== 0;
dfPaneVisibleStored = (popupData.popupPanelSections & 0b10000) !== 0;
vAPI.localStorage.setItem('popupFirewallPane', dfPaneVisibleStored);
// Dynamic filtering pane may not have been built yet
@ -1073,7 +1073,7 @@ const toggleHostnameSwitch = async function(ev) {
hostname: popupData.pageHostname,
state: target.classList.contains('on'),
tabId: popupData.tabId,
persist: (popupData.popupPanelSections & 0b1000) === 0 || ev.ctrlKey || ev.metaKey,
persist: (popupData.popupPanelSections & 0b10000) === 0 || ev.ctrlKey || ev.metaKey,
});
cachePopupData(response);

View File

@ -116,11 +116,20 @@ const onVersionReady = function(lastVersion) {
// Configure new popup panel according to classic popup panel
// configuration.
if ( lastVersionInt !== 0 && lastVersionInt <= 1026003014 ) {
µb.userSettings.popupPanelSections =
µb.userSettings.dynamicFilteringEnabled === true ? 0b1111 : 0b0111;
µb.userSettings.dynamicFilteringEnabled = undefined;
µb.saveUserSettings();
if ( lastVersionInt !== 0 ) {
if ( lastVersionInt <= 1026003014 ) {
µb.userSettings.popupPanelSections =
µb.userSettings.dynamicFilteringEnabled === true ? 0b11111 : 0b01111;
µb.userSettings.dynamicFilteringEnabled = undefined;
µb.saveUserSettings();
} else if (
lastVersionInt <= 1026003016 &&
(µb.userSettings.popupPanelSections & 1) !== 0
) {
µb.userSettings.popupPanelSections =
(µb.userSettings.popupPanelSections << 1 | 1) & 0b111111;
µb.saveUserSettings();
}
}
vAPI.storage.set({ version: vAPI.app.version });

View File

@ -11,7 +11,7 @@
<title data-i18n="extName"></title>
</head>
<body class="loading" data-more="a b c">
<body class="loading" data-more="a b c d">
<div id="panes">
<div id="sticky">
<div id="stickyTools">
@ -29,8 +29,8 @@
<div id="hostname"><span>ephemeralnewyork.</span>&shy;<span>wordpress.com</span></div>
</div>
<div id="main">
<hr data-more="c">
<div id="extraTools" class="toolRibbon" data-more="c">
<hr data-more="d">
<div id="extraTools" class="toolRibbon" data-more="d">
<span id="no-popups" class="hnSwitch tool enabled" role="button" aria-label tabindex="0" title><span class="fa-icon fa-icon-badged">ph-popups<svg class="nope" viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span><span class="caption" data-i18n="popupNoPopups_v2"></span></span>
<span id="no-large-media" class="hnSwitch tool enabled" role="button" aria-label tabindex="0" title><span class="fa-icon fa-icon-badged">film<svg class="nope" viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span><span class="caption" data-i18n="popupNoLargeMedia_v2"></span></span>
<span id="no-cosmetic-filtering" class="hnSwitch tool enabled" role="button" aria-label tabindex="0" title><span class="fa-icon fa-icon-badged">eye-slash<svg class="nope" viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span><span class="caption" data-i18n="popupNoCosmeticFiltering_v2"></span></span>
@ -40,18 +40,18 @@
<hr data-more="a">
<div id="basicStats" class="itemRibbon" data-more="a">
<span data-i18n="popupBlockedOnThisPage_v2"></span><span></span>
<span data-i18n="popupBlockedSinceInstall_v2"></span><span></span>
<span data-i18n="popupBlockedSinceInstall_v2" data-more="b"></span><span data-more="b"></span>
<span data-i18n="popupDomainsConnected_v2"></span><span></span>
</div>
<hr data-more="b">
<div id="basicTools" class="toolRibbon" data-more="b">
<hr data-more="c">
<div id="basicTools" class="toolRibbon" data-more="c">
<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 data-more="e">
<div class="itemRibbon" data-more="e">
<hr data-more="f">
<div class="itemRibbon" data-more="f">
<span data-i18n="popupVersion"></span><span id="version"></span>
</div>
<hr>
@ -64,7 +64,7 @@
</span>
</div>
</div>
<div id="firewall" data-more="d">
<div id="firewall" data-more="e">
<div data-des="*" data-type="*"><span data-i18n="popupAnyRulePrompt"></span><span data-src="/" data-i18n-title="popupTipGlobalRules"> </span><span data-src="." data-i18n-title="popupTipLocalRules"> </span></div>
<div data-des="*" data-type="image"><span data-i18n="popupImageRulePrompt"></span><span data-src="/"> </span><span data-src="."> </span></div>
<div data-des="*" data-type="3p"><span data-i18n="popup3pAnyRulePrompt"></span><span data-src="/"> </span><span data-src="."> </span></div>