Mirrors/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2024-09-14 23:12:28 +02:00
Code Issues Releases Wiki Activity

More work toward re-hauling the user interface

Browse Source 
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
This commit is contained in:
Raymond Hill 2020-04-27 10:33:49 -04:00
parent a733944624
commit db9c321855
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
13 changed files with 120 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/_locales/en/messages.json
View File

@ -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",

4
src/css/document-blocked.css
View File

@ -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';

1
src/css/fa-icons.css
View File

@ -40,6 +40,7 @@
.fa-icon > svg {
height: 1em;
overflow: visible;
width: 1em;
}

46
src/css/popup-fenix.css
View File

@ -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;
@ -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;
@ -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
src/css/popup.css
View File

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

14
src/css/themes/default.css
View File

@ -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);
@ -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);
}
/**

7
src/img/material-design.svg
View File

@ -1,15 +1,16 @@
<!--
The SVG definitions were imported piecemeal from:
https://material.io/components/selection-controls
checkbox:
- https://material.io/develop/web/components/input-controls/checkboxes/
License:
- https://github.com/material-components/material-components/blob/develop/LICENSE
- https://github.com/material-components/material-components-web/blob/master/LICENSE
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<symbol id="checkmark" viewBox="0 0 24 24"><path d="M 1.73 12.91 L 8.1 19.28 L 22.79 4.59"/></symbol>
<symbol id="checkmark" viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></symbol>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 475 B

After

Width:  |  Height:  |  Size: 513 B

16
src/img/photon.svg Normal file
View File

@ -0,0 +1,16 @@
<!--
The SVG definitions were imported piecemeal from:
- https://design.firefox.com/icons/viewer/#
License:
- [to be determined]
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<symbol id="ph-popups" viewBox="0 0 20 20"><path d="m 3.146,1.8546316 a 0.5006316,0.5006316 0 0 0 0.708,-0.708 l -1,-1 a 0.5006316,0.5006316 0 0 0 -0.708,0.708 z m -0.836,2.106 a 0.406,0.406 0 0 0 0.19,0.04 0.5,0.5 0 0 0 0.35,-0.851 0.493,0.493 0 0 0 -0.54,-0.109 0.361,0.361 0 0 0 -0.16,0.109 0.485,0.485 0 0 0 0,0.7 0.372,0.372 0 0 0 0.16,0.111 z m 3,-3 a 0.406,0.406 0 0 0 0.19,0.04 0.513,0.513 0 0 0 0.5,-0.5 0.473,0.473 0 0 0 -0.15,-0.351 0.5,0.5 0 0 0 -0.7,0 0.485,0.485 0 0 0 0,0.7 0.372,0.372 0 0 0 0.16,0.111 z m 13.19,1.04 a 0.5,0.5 0 0 0 0.354,-0.146 l 1,-1 a 0.5006316,0.5006316 0 0 0 -0.708,-0.708 l -1,1 a 0.5,0.5 0 0 0 0.354,0.854 z m 1.35,1.149 a 0.361,0.361 0 0 0 -0.16,-0.109 0.5,0.5 0 0 0 -0.38,0 0.361,0.361 0 0 0 -0.16,0.109 0.485,0.485 0 0 0 0,0.7 0.372,0.372 0 0 0 0.16,0.11 0.471,0.471 0 0 0 0.38,0 0.372,0.372 0 0 0 0.16,-0.11 0.469,0.469 0 0 0 0.15,-0.349 0.43,0.43 0 0 0 -0.04,-0.19 0.358,0.358 0 0 0 -0.11,-0.161 z m -3.54,-2.189 a 0.406,0.406 0 0 0 0.19,0.04 0.469,0.469 0 0 0 0.35,-0.15 0.353,0.353 0 0 0 0.11,-0.161 0.469,0.469 0 0 0 0,-0.379 0.358,0.358 0 0 0 -0.11,-0.161 0.361,0.361 0 0 0 -0.16,-0.109 0.493,0.493 0 0 0 -0.54,0.109 0.358,0.358 0 0 0 -0.11,0.161 0.43,0.43 0 0 0 -0.04,0.19 0.469,0.469 0 0 0 0.15,0.35 0.372,0.372 0 0 0 0.16,0.11 z m 2.544,15.1860004 a 0.5006316,0.5006316 0 0 0 -0.708,0.708 l 1,1 a 0.5006316,0.5006316 0 0 0 0.708,-0.708 z m 0.3,-2 a 0.473,0.473 0 0 0 -0.154,0.354 0.4,0.4 0 0 0 0.04,0.189 0.353,0.353 0 0 0 0.11,0.161 0.469,0.469 0 0 0 0.35,0.15 0.406,0.406 0 0 0 0.19,-0.04 0.372,0.372 0 0 0 0.16,-0.11 0.454,0.454 0 0 0 0.15,-0.35 0.473,0.473 0 0 0 -0.15,-0.351 0.5,0.5 0 0 0 -0.7,0 z m -3,3 a 0.473,0.473 0 0 0 -0.154,0.354 0.454,0.454 0 0 0 0.15,0.35 0.372,0.372 0 0 0 0.16,0.11 0.406,0.406 0 0 0 0.19,0.04 0.469,0.469 0 0 0 0.35,-0.15 0.353,0.353 0 0 0 0.11,-0.161 0.4,0.4 0 0 0 0.04,-0.189 0.473,0.473 0 0 0 -0.15,-0.351 0.5,0.5 0 0 0 -0.7,0 z M 18,5.0006316 a 3,3 0 0 0 -3,-3 H 7 a 3,3 0 0 0 -3,3 v 8.0000004 a 3,3 0 0 0 3,3 h 8 a 3,3 0 0 0 3,-3 z m -2,8.0000004 a 1,1 0 0 1 -1,1 H 7 a 1,1 0 0 1 -1,-1 V 7.0006316 H 16 Z M 16,6.0006316 H 6 v -1 a 1,1 0 0 1 1,-1 h 8 a 1,1 0 0 1 1,1 z M 11,18.000632 H 3 a 1,1 0 0 1 -1,-1 v -6 h 1 v -1 H 2 V 9.0006316 a 1,1 0 0 1 1,-1 v -2 a 3,3 0 0 0 -3,3 v 8.0000004 a 3,3 0 0 0 3,3 h 8 a 3,3 0 0 0 3,-3 h -2 a 1,1 0 0 1 -1,1 z"/></symbol>
<symbol id="ph-readermode-text-size" viewBox="0 0 20 12.5"><path d="M 10.422,11.223 A 0.712,0.712 0 0 1 10.295,11.007 L 6.581,0 H 4.68 L 0.933,11.309 0,11.447 V 12.5 H 3.594 V 11.447 L 2.655,11.325 A 0.3,0.3 0 0 1 2.468,11.211 0.214,0.214 0 0 1 2.419,10.974 L 3.341,8.387 h 3.575 l 0.906,2.652 a 0.18,0.18 0 0 1 -0.016,0.18 0.217,0.217 0 0 1 -0.139,0.106 L 6.679,11.447 V 12.5 h 4.62 V 11.447 L 10.663,11.325 A 0.512,0.512 0 0 1 10.422,11.223 Z M 3.659,7.399 5.063,2.57 6.5,7.399 Z M 19.27,11.464 A 0.406,0.406 0 0 1 19.009,11.337 0.368,0.368 0 0 1 18.902,11.072 V 6.779 A 3.838,3.838 0 0 0 18.67,5.318 1.957,1.957 0 0 0 18.01,4.457 2.48,2.48 0 0 0 16.987,4.044 7.582,7.582 0 0 0 15.67,3.938 a 6.505,6.505 0 0 0 -1.325,0.139 5.2,5.2 0 0 0 -1.2,0.4 2.732,2.732 0 0 0 -0.864,0.624 1.215,1.215 0 0 0 -0.331,0.833 0.532,0.532 0 0 0 0.119,0.383 0.665,0.665 0 0 0 0.257,0.172 0.916,0.916 0 0 0 0.375,0.041 h 1.723 V 4.942 A 4.429,4.429 0 0 1 14.611,4.91 2.045,2.045 0 0 1 14.836,4.885 c 0.09,0 0.192,-0.008 0.306,-0.008 a 1.849,1.849 0 0 1 0.808,0.151 1.247,1.247 0 0 1 0.71,0.89 2.164,2.164 0 0 1 0.049,0.51 c 0,0.076 -0.008,0.152 -0.008,0.228 0,0.076 -0.008,0.139 -0.008,0.221 v 0.2 q -1.152,0.252 -1.976,0.489 a 12.973,12.973 0 0 0 -1.391,0.474 4.514,4.514 0 0 0 -0.91,0.485 2.143,2.143 0 0 0 -0.527,0.523 1.594,1.594 0 0 0 -0.245,0.592 3.739,3.739 0 0 0 -0.061,0.693 2.261,2.261 0 0 0 0.171,0.9 2.024,2.024 0 0 0 0.469,0.682 2.084,2.084 0 0 0 0.693,0.432 2.364,2.364 0 0 0 0.852,0.151 3.587,3.587 0 0 0 1.068,-0.159 6.441,6.441 0 0 0 1.835,-0.877 l 0.22,0.832 H 20 v -0.783 z m -2.588,-0.719 a 4.314,4.314 0 0 1 -0.5,0.188 5.909,5.909 0 0 1 -0.493,0.123 2.665,2.665 0 0 1 -0.543,0.057 1.173,1.173 0 0 1 -0.861,-0.363 1.166,1.166 0 0 1 -0.245,-0.392 1.357,1.357 0 0 1 -0.086,-0.486 1.632,1.632 0 0 1 0.123,-0.657 1.215,1.215 0 0 1 0.432,-0.5 3.151,3.151 0 0 1 0.837,-0.392 12.429,12.429 0 0 1 1.334,-0.334 z"/></symbol>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

1
src/js/background.js
View File

@ -70,6 +70,7 @@ const µBlock = (( ) => { // jshint ignore:line
selfieAfter: 3,
strictBlockingBypassDuration: 120,
suspendTabsUntilReady: 'unset',
uiPopupConfig: 'undocumented',
uiFlavor: 'unset',
updateAssetBypassBrowserCache: false,
userResourcesLocation: 'unset',

15
src/js/fa-icons.js
View File

@ -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') ) {

4
src/js/messaging.js
View File

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

45
src/js/popup-fenix.js
View File

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

25
src/popup-fenix.html
View File

@ -16,10 +16,10 @@
<div id="sticky">
<div>
<div class="rulesetTools">
<span id="saveRules" class="fa-icon" data-i18n-tip="popupTipSaveRules" data-tip-position="under">lock</span>
<span id="revertRules" class="fa-icon" data-i18n-tip="popupTipRevertRules" data-tip-position="under">eraser</span>
<span id="saveRules" class="fa-icon" data-i18n-title="popupTipSaveRules">lock</span>
<span id="revertRules" class="fa-icon" data-i18n-title="popupTipRevertRules">eraser</span>
</div>
<div id="switch" role="button" aria-label data-tip-position="under" tabindex="0">
<div id="switch" role="button" aria-label tabindex="0" title>
<span class="fa-icon">power-off</span>
</div>
<div class="rulesetTools">
@ -30,10 +30,10 @@
</div>
<div id="main">
<div id="basicTools" class="toolRibbon">
<span id="gotoZap" class="fa-icon tool">bolt<span data-i18n="popupTipZapper"></span></span>
<span id="gotoPick" class="fa-icon tool">eye-dropper<span data-i18n="popupTipPicker"></span></span>
<a href="logger-ui.html#_" class="fa-icon tool enabled" aria-label="data-tip" target="uBOLogger" tabindex="0">list-alt<span data-i18n="popupTipLog"></span></a>
<a href="dashboard.html" class="fa-icon tool enabled" aria-label="data-tip" target="uBODashboard" tabindex="0">sliders<span data-i18n="popupTipDashboard"></span></a>
<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">
@ -43,10 +43,11 @@
</div>
<hr>
<div id="extraTools" class="toolRibbon">
<span id="no-large-media" class="hnSwitch tool enabled" role="button" aria-label tabindex="0"><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 data-i18n="popupNoLargeMedia_v2"></span></span>
<span id="no-cosmetic-filtering" class="hnSwitch tool enabled" role="button" aria-label tabindex="0"><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 data-i18n="popupNoCosmeticFiltering_v2"></span></span>
<span id="no-remote-fonts" class="hnSwitch tool enabled" role="button" aria-label tabindex="0"><span class="fa-icon fa-icon-badged">font<svg class="nope" viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span><span data-i18n="popupNoRemoteFonts_v2"></span></span>
<span id="no-scripting" class="hnSwitch tool enabled" role="button" aria-label tabindex="0"><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 data-i18n="popupNoScripting_v2"></span></span>
<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>
<span id="no-remote-fonts" class="hnSwitch tool enabled" role="button" aria-label tabindex="0" title><span class="fa-icon fa-icon-badged">ph-readermode-text-size<svg class="nope" viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span><span class="caption" data-i18n="popupNoRemoteFonts_v2"></span></span>
<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 id="moreButton" class="itemRibbon">
@ -54,7 +55,7 @@
</div>
</div>
<div id="firewall">
<div data-des="*" data-type="*"><span data-i18n="popupAnyRulePrompt"></span><span data-src="/" data-i18n-tip="popupTipGlobalRules" data-tip-position="under"> </span><span data-src="." data-i18n-tip="popupTipLocalRules" data-tip-position="under"> </span></div>
<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>
<div data-des="*" data-type="inline-script"><span data-i18n="popupInlineScriptRulePrompt"></span><span data-src="/"> </span><span data-src="."> </span></div>