From 446d7fad2e5875e0f6d27b03171520d0ecc7a43b Mon Sep 17 00:00:00 2001
From: gorhill <rhill@raymondhill.net>
Date: Sat, 5 Nov 2016 14:48:42 -0400
Subject: [PATCH] fix #2010, #2086

---
 src/css/1p-filters.css        |   1 -
 src/css/3p-filters.css        |   4 +-
 src/css/advanced-settings.css |   1 -
 src/css/common.css            |   5 +-
 src/css/dashboard.css         |   3 +-
 src/css/dyna-rules.css        |  20 ++--
 src/css/popup.css             | 186 ++++++++++++++++++++--------------
 src/css/whitelist.css         |   1 -
 src/js/background.js          |   2 +-
 src/js/popup.js               |  81 +++++----------
 src/js/ublock.js              |  20 ++--
 src/js/udom.js                |  14 ++-
 src/popup.html                |   6 +-
 13 files changed, 185 insertions(+), 159 deletions(-)

diff --git a/src/css/1p-filters.css b/src/css/1p-filters.css
index 5f71e1e66..4b7f2a42b 100644
--- a/src/css/1p-filters.css
+++ b/src/css/1p-filters.css
@@ -6,7 +6,6 @@ div > p:last-child {
     }
 .userFilters {
     box-sizing: border-box;
-    font-size: small;
     height: 60vh;
     text-align: left;
     white-space: pre;
diff --git a/src/css/3p-filters.css b/src/css/3p-filters.css
index 09942e15b..99f87cfd4 100644
--- a/src/css/3p-filters.css
+++ b/src/css/3p-filters.css
@@ -41,7 +41,6 @@ body[dir=rtl] #lists {
     display: none;
     }
 li.listEntry {
-    font-size: 14px;
     margin: 0 auto 0 auto;
     margin-left: 3em;
     margin-right: 0em;
@@ -67,7 +66,7 @@ li.listEntry > a:nth-of-type(2):hover {
     opacity: 1;
     }
 li.listEntry > a:nth-of-type(3) {
-    font-size: 13px;
+    font-size: smaller;
     opacity: 0.5;
     }
 .dim {
@@ -121,7 +120,6 @@ body[dir=rtl] #externalListsDiv {
     }
 #externalLists {
     box-sizing: border-box;
-    font-size: smaller;
     height: 10em;
     white-space: pre;
     width: 100%;
diff --git a/src/css/advanced-settings.css b/src/css/advanced-settings.css
index 9fb4a985b..1bb73055c 100644
--- a/src/css/advanced-settings.css
+++ b/src/css/advanced-settings.css
@@ -6,7 +6,6 @@ div > p:last-child {
     }
 textarea {
     box-sizing: border-box;
-    font-size: smaller;
     height: 60vh;
     text-align: left;
     white-space: pre;
diff --git a/src/css/common.css b/src/css/common.css
index 29b3e2ca0..8129dce82 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -15,7 +15,10 @@
 body {
     background-color: white;
     color: black;
-    font: 14px/1.3 sans-serif;
+    font: 14px "Noto Sans",sans-serif;
+    }
+textarea {
+    font-size: 90%;
     }
 /* I designed the button with: http://charliepark.org/bootstrap_buttons/ */
 button.custom {
diff --git a/src/css/dashboard.css b/src/css/dashboard.css
index ad800d10f..1b34a7e7d 100644
--- a/src/css/dashboard.css
+++ b/src/css/dashboard.css
@@ -9,7 +9,6 @@ html, body {
     }
 #dashboard-nav {
     border: 0;
-    font-size: 16px;
     margin: 0;
     padding: 0;
     top: 0;
@@ -36,7 +35,7 @@ html, body {
     color: black;
     cursor: pointer;
     display: inline-block;
-    font: inherit;
+    font-size: 110%;
     margin: 0;
     padding: 4px;
     position: relative;
diff --git a/src/css/dyna-rules.css b/src/css/dyna-rules.css
index 04259d7d8..033faf9ea 100644
--- a/src/css/dyna-rules.css
+++ b/src/css/dyna-rules.css
@@ -15,13 +15,12 @@ code {
     margin: 0;
     padding: 0.5em 0 0 0;
     white-space: nowrap;
-    font-size: 0; /* otherwise spaces between inline-blocks will be rendered */
 }
 #diff .pane {
     border: 0;
     box-sizing: border-box;
     display: inline-block;
-    font: 12px/1.8 monospace;
+    font: 90%/180% "Noto Mono",monospace;
     margin: 0;
     padding: 0;
     position: relative;
@@ -143,27 +142,26 @@ body[dir="rtl"] #commitButton:before {
 #diff textarea {
     background-color: #f8f8ff;
     border: 0;
-    color: black;
-    margin: 0;
     border-top: 1px solid #eee;
+    box-sizing: border-box;
+    color: black;
     direction: ltr;
-    font: 12px monospace;
-    line-height: 1.8;
+    font: inherit;
+    height: 100%;
+    left: 0;
+    margin: 0;
     overflow: hidden;
     overflow-y: auto;
     padding: 1em 0 0 3px; /* same left and top padding as ul/li */
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
     resize: none;
+    top: 0;
     visibility: hidden;
     white-space: pre; /* this implies nowrap; break only on \n and <br>.
                          nowrap doesn't consistently
                          respect \n's (example: Safari) per the CSS spec:
                          http://www.w3.org/wiki/CSS/Properties/white-space */
+    width: 100%;
     word-wrap: normal;
     }
 #diff.edit textarea {
diff --git a/src/css/popup.css b/src/css/popup.css
index ca61207dd..d03f875ab 100644
--- a/src/css/popup.css
+++ b/src/css/popup.css
@@ -23,10 +23,11 @@ h2 {
     background-color: #eee;
     border: 0;
     color: #666;
-    font-size: 14px;
+    cursor: pointer;
+    font-size: 100%;
     font-weight: normal;
-    margin:  1em 0 0.5em 0;
-    padding: 2px 0;
+    margin: 1em 0 0.8em 0;
+    padding: 0.2em;
     text-align: center;
     }
 h2:nth-of-type(1) {
@@ -45,20 +46,22 @@ a {
     color: #bbb;
     cursor: pointer;
     display: block;
-    font-size: 12px;
-    line-height: 12px;
+    font-size: 85%;
+    line-height: 1.2;
     margin: 0;
-    padding: 3px 0;
+    padding: calc(0.1em + 1px) 0;
     position: relative;
     text-align: center;
     }
 #version {
-    font-size: 10px;
+    font-size: 90%;
     font-weight: normal;
     }
 #gotoPrefs > span:nth-of-type(3) {
     opacity: 0.5;
     position: absolute;
+    top: 50%;
+    transform: translate(0, -50%);
     }
 body[dir="ltr"] #gotoPrefs > span:nth-of-type(3) {
     left: 3px;
@@ -94,7 +97,7 @@ body[dir="rtl"] #panes > div {
 #panes > div:nth-of-type(2) {
     overflow-y: auto;
     overflow-x: hidden;
-    width: 320px;
+    width: 24em;
     }
 /**
  Scroll bar to the left.
@@ -118,20 +121,23 @@ body.portrait[dir="ltr"] #panes > div:nth-of-type(2) {
     display: none;
     }
 #panes > div:nth-of-type(1) {
-    min-width: 160px;
+    min-width: 11em;
     padding: 0;
     }
 p {
     text-align: center;
     white-space: nowrap;
     }
+.fa {
+    font-size: 120%;
+    }
 #switch {
     margin: 8px 0;
     }
 #switch .fa {
     color: #0046ff;
     cursor: pointer;
-    font-size: 96px;
+    font-size: 700%;
     margin: 0;
     }
 #switch .fa:hover {
@@ -141,16 +147,15 @@ body.off #switch .fa {
     color: #ccc;
     }
 #page-blocked {
-    font-size: 20px;
+    font-size: 1.25em;
     }
 .statName {
     color: #888;
-    font-size: small;
-    margin: 1em 0.2em 0.2em 0.2em;
+    font-size: 85%;
+    margin: 0.8em 0.2em 0.1em 0.2em;
     text-align: center;
     }
 .statValue {
-    font-size: 14px;
     margin: 0;
     text-align: center;
     }
@@ -158,7 +163,6 @@ body.off #switch .fa {
     color: #aaa;
     cursor: pointer;
     display: none;
-    font-size: 14px;
     unicode-bidi: embed;
     }
 .tool.enabled {
@@ -171,21 +175,20 @@ body.off #switch .fa {
     background-color: #eee;
     border: 0;
     color: #aaa;
-    font-weight: normal;
-    margin:  1em 0 0 0;
-    padding: 4px 0 2px 0;
+    margin: 0.8em 0 0 0;
+    padding: 4px 0;
     text-align: center;
     }
 #extraTools > span {
     cursor: pointer;
-    font-size: 18px;
-    margin: 0 0.45em;
+    font-size: 1.2em;
+    margin: 0 0.4em;
     position: relative;
     }
 #extraTools > span > span.badge {
     color: #222;
     bottom: -1px;
-    font: 10.5px sans-serif;
+    font: x-small sans-serif;
     position: absolute;
     }
 body[dir="ltr"] #extraTools > span > span.badge {
@@ -196,7 +199,7 @@ body[dir="rtl"] #extraTools > span > span.badge {
     }
 #extraTools > span.on > span:last-of-type {
     color: #e00;
-    font-size: 20px;
+    font-size: 1.1em;
     left: 0;
     position: absolute;
     text-align: center;
@@ -210,17 +213,6 @@ body[dir="rtl"] #extraTools > span > span.badge {
     color: #444;
     }
 
-body.advancedUser h2 {
-    cursor: pointer;
-    }
-body.advancedUser h2:before {
-    color: #aaa;
-    content: '+ ';
-    }
-body.advancedUser #panes.dfEnabled h2:before {
-    content: '\2212  ';
-    }
-
 #refresh {
     background-color: #ffe;
     border: 1px solid #ddc;
@@ -278,7 +270,7 @@ body[dir="rtl"] #tooltip {
 
 #firewallContainer {
     border: 0;
-    font-size: 13px;
+    font-size: 85%;
     margin: 0;
     padding: 0;
     text-align: right;
@@ -286,7 +278,6 @@ body[dir="rtl"] #tooltip {
 #firewallContainer > div {
     background-color: #e6e6e6;
     border: 0;
-    border-bottom: 1px solid white;
     direction: ltr;
     margin: 0;
     padding: 0;
@@ -294,54 +285,46 @@ body[dir="rtl"] #tooltip {
 #firewallContainer > div:hover {
     background-color: #f0f0f0;
     }
+#firewallContainer > div:first-child ~ div:not([class]) {
+    display: none;
+    }
 #firewallContainer.minimized > div.isSubDomain {
     display: none;
     }
 #firewallContainer > div > span {
     background-color: transparent;
     border: none;
+    border-bottom: 1px solid white;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     color: #000;
     display: inline-block;
-    height: 22px;
-    line-height: 22px;
+    height: 1.9em;
+    line-height: 1.9em;
     overflow: hidden;
     position: relative;
-    vertical-align: middle;
-    }
-#firewallContainer > div:nth-of-type(1) > span {
-    height: 18px;
-    line-height: 20px;
+    vertical-align: top;
     }
 #firewallContainer > div:nth-of-type(1) > span:nth-of-type(1) {
     cursor: pointer;
     }
 #firewallContainer > div > span:nth-of-type(1) {
-    border-right: 1px solid white;
     padding-right: 2px;
     position: relative;
     text-overflow: ellipsis;
-    width: 70%;
+    width: calc(100% - 4em);
     }
-#firewallContainer > div > span:nth-of-type(2),
-#firewallContainer > div > span:nth-of-type(3),
-#firewallContainer > div > span:nth-of-type(4) {
-    cursor: pointer;
-    width: 15%;
+#firewallContainer > div > span:nth-of-type(2) {
+    display: none;
     }
-#firewallContainer > div > span:nth-of-type(3),
-#firewallContainer > div > span:nth-of-type(4) {
+#firewallContainer > div > span:nth-of-type(1) ~ span {
     border-left: 1px solid white;
-    color: #444;
-    font-family: monospace;
-    font-size: 11.5px;
-    text-align: center;
+    width: 4em;
     }
-body.portrait #firewallContainer > div > span:nth-of-type(3),
-body.portrait #firewallContainer > div > span:nth-of-type(4) {
-    font-family: monospace;
-    font-size: 9px;
+#firewallContainer > div > span:nth-of-type(3),
+#firewallContainer > div > span:nth-of-type(4) {
+    color: #444;
+    text-align: center;
     }
 #firewallContainer > div > span:nth-of-type(4) {
     display: none;
@@ -363,6 +346,50 @@ body.portrait #firewallContainer > div > span:nth-of-type(4) {
 #firewallContainer.minimized > div.isDomain > span:nth-of-type(4) {
     display: inline-block;
     }
+#firewallContainer > div > span[data-acount]:before,
+#firewallContainer > div > span[data-bcount]:after {
+    font-family: "Noto Mono",monospace;
+    position: absolute;
+    top: 50%;
+    transform: translate(0, -50%);
+    }
+#firewallContainer > div > span[data-acount]:before {
+    left: 0.1em;
+    }
+#firewallContainer > div > span[data-acount="1"]:before {
+    content: '+';
+    }
+#firewallContainer > div > span[data-acount="2"]:before {
+    content: '++';
+    }
+#firewallContainer > div > span[data-acount="3"]:before {
+    content: '+++';
+    }
+#firewallContainer > div > span[data-bcount]:after {
+    right: 0.1em;
+    }
+#firewallContainer > div > span[data-bcount="1"]:after {
+    content: '\2212';
+    }
+#firewallContainer > div > span[data-bcount="2"]:after {
+    content: '\2212\2212';
+    }
+#firewallContainer > div > span[data-bcount="3"]:after {
+    content: '\2212\2212\2212';
+    }
+
+body.advancedUser #firewallContainer > div > span:nth-of-type(1) {
+    width: calc(100% - 8em);
+    }
+body.advancedUser #firewallContainer > div > span:nth-of-type(2) {
+    display: inline-block;
+    }
+body.advancedUser #firewallContainer > div:first-child ~ div:not([class]) {
+    display: block;
+    }
+body.advancedUser #firewallContainer > div > span:nth-of-type(1) ~ span {
+    cursor: pointer;
+    }
 
 /**
  Small coloured label at the left of a row
@@ -405,40 +432,40 @@ body.portrait #firewallContainer > div > span:nth-of-type(4) {
     background-color: rgb(192, 160, 0);
     }
 /* Rule cells */
-#firewallContainer > div > span.aRule {
+body.advancedUser #firewallContainer > div > span.aRule {
     background-color: rgba(0, 160, 0, 0.3);
     }
-#firewallContainer.colorBlind > div > span.aRule {
+body.advancedUser #firewallContainer.colorBlind > div > span.aRule {
     background-color: rgba(255, 194, 57, 0.4);
     }
-#firewallContainer > div > span.bRule {
+body.advancedUser #firewallContainer > div > span.bRule {
     background-color: rgba(192, 0, 0, 0.3);
     }
-#firewallContainer.colorBlind > div > span.bRule {
+body.advancedUser #firewallContainer.colorBlind > div > span.bRule {
     background-color: rgba(0, 19, 110, 0.4);
     }
-#firewallContainer > div > span.nRule {
+body.advancedUser #firewallContainer > div > span.nRule {
     background-color: rgba(108, 108, 108, 0.3);
     }
-#firewallContainer.colorBlind > div > span.nRule {
+body.advancedUser #firewallContainer.colorBlind > div > span.nRule {
     background-color: rgba(96, 96, 96, 0.4);
     }
-#firewallContainer > div > span.ownRule {
+body.advancedUser #firewallContainer > div > span.ownRule {
     color: white;
     }
-#firewallContainer > div > span.aRule.ownRule {
+body.advancedUser #firewallContainer > div > span.aRule.ownRule {
     background-color: rgba(0, 160, 0, 1);
     }
-#firewallContainer.colorBlind > div > span.aRule.ownRule {
+body.advancedUser #firewallContainer.colorBlind > div > span.aRule.ownRule {
     background-color: rgba(255, 194, 57, 1);
     }
-#firewallContainer > div > span.bRule.ownRule {
+body.advancedUser #firewallContainer > div > span.bRule.ownRule {
     background-color: rgba(192, 0, 0, 1);
     }
-#firewallContainer.colorBlind > div > span.bRule.ownRule {
+body.advancedUser #firewallContainer.colorBlind > div > span.bRule.ownRule {
     background-color: rgba(0, 19, 110, 1);
     }
-#firewallContainer > div > span.nRule.ownRule {
+body.advancedUser #firewallContainer > div > span.nRule.ownRule {
     background-color: rgba(108, 108, 108, 1);
     }
 
@@ -446,14 +473,23 @@ body.portrait #firewallContainer > div > span:nth-of-type(4) {
     bottom: 0;
     left: 0;
     position: absolute;
-    right: 0;
     top: 0;
+    width: 4em;
+    z-index: 1;
     }
 #actionSelector > span {
     display: inline-block;
-    height: 22px;
+    height: 100%;
     opacity: 0.2;
-    width: 33.33%;
+    }
+#actionSelector > span:nth-of-type(1) {
+    width: 33%;
+    }
+#actionSelector > span:nth-of-type(2) {
+    width: 33.5%;
+    }
+#actionSelector > span:nth-of-type(3) {
+    width: 33.5%;
     }
 #actionSelector > span:hover {
     opacity: 0.75;
@@ -490,7 +526,7 @@ body.portrait #firewallContainer > div > span:nth-of-type(4) {
     border-radius: 4px;
     cursor: pointer;
     display: inline-block;
-    font-size: 1.7em;
+    font-size: 1.8em;
     line-height: 1.0;
     margin: 0;
     margin-right: 0.1em;
diff --git a/src/css/whitelist.css b/src/css/whitelist.css
index 32a7a103f..5a0e834e8 100644
--- a/src/css/whitelist.css
+++ b/src/css/whitelist.css
@@ -6,7 +6,6 @@ div > p:last-child {
     }
 #whitelist {
     box-sizing: border-box;
-    font-size: small;
     height: 60vh;
 	text-align: left;
     white-space: pre;
diff --git a/src/js/background.js b/src/js/background.js
index a79b6f5ba..e2f699711 100644
--- a/src/js/background.js
+++ b/src/js/background.js
@@ -56,7 +56,7 @@ return {
         collapseBlocked: true,
         colorBlindFriendly: false,
         contextMenuEnabled: true,
-        dynamicFilteringEnabled: true,
+        dynamicFilteringEnabled: false,
         externalLists: defaultExternalLists,
         firewallPaneMinimized: true,
         hyperlinkAuditingDisabled: true,
diff --git a/src/js/popup.js b/src/js/popup.js
index bd1839800..e8774e972 100644
--- a/src/js/popup.js
+++ b/src/js/popup.js
@@ -90,9 +90,6 @@ var scopeToSrcHostnameMap = {
     '/': '*',
     '.': ''
 };
-var threePlus = '+++';
-var threeMinus = '−−−';
-var sixSpace = '\u2007\u2007\u2007\u2007\u2007\u2007';
 var dfHotspots = null;
 var hostnameToSortableTokenMap = {};
 var allDomains = {};
@@ -226,17 +223,15 @@ var addFirewallRow = function(des) {
 
 var updateFirewallCell = function(scope, des, type, rule) {
     var selector = '#firewallContainer span[data-src="' + scope + '"][data-des="' + des + '"][data-type="' + type + '"]';
-    var cell = uDom(selector);
-
-    // This should not happen
-    if ( cell.length === 0 ) {
+    var cells = uDom(selector);
+    if ( cells.length === 0 ) {
         return;
     }
 
-    cell.removeClass();
+    cells.removeClass();
     var action = rule.charAt(1);
     if ( action !== '' ) {
-        cell.toggleClass(action + 'Rule', true);
+        cells.toggleClass(action + 'Rule', true);
     }
 
     // Use dark shade visual cue if the rule is specific to the cell.
@@ -247,54 +242,47 @@ var updateFirewallCell = function(scope, des, type, rule) {
                   (matches[2] === des) &&
                   (matches[1] === scopeToSrcHostnameMap[scope]);
     }
-    cell.toggleClass('ownRule', ownRule);
+    cells.toggleClass('ownRule', ownRule);
 
     if ( scope !== '.' || des === '*' ) {
         return;
     }
 
-    // IMPORTANT: It is completely assumed the first node is a TEXT_NODE, so
-    //            ensure this in the HTML file counterpart when you make
-    //            changes
-    var textNode = cell.nodeAt(0).firstChild;
-
     // Remember this may be a cell from a reused row, we need to clear text
     // content if we can't compute request counts.
     if ( popupData.hostnameDict.hasOwnProperty(des) === false ) {
-        textNode.nodeValue = ' ';
+        cells.removeAttr('data-acount');
+        cells.removeAttr('data-acount');
         return;
     }
 
-    var hnDetails = popupData.hostnameDict[des];
-    var aCount = hnDetails.allowCount;
-    var bCount = hnDetails.blockCount;
-    if ( aCount !== 0 || bCount !== 0 ) {
-        // https://github.com/chrisaljoudi/uBlock/issues/471
-        aCount = Math.min(Math.ceil(Math.log(aCount + 1) / Math.LN10), 3);
-        bCount = Math.min(Math.ceil(Math.log(bCount + 1) / Math.LN10), 3);
-        textNode.nodeValue = threePlus.slice(0, aCount) +
-                             sixSpace.slice(aCount + bCount) +
-                             threeMinus.slice(0, bCount);
+    var hnDetails = popupData.hostnameDict[des],
+        cell = cells.nodeAt(0);
+    if ( hnDetails.allowCount !== 0 ) {
+        cell.setAttribute('data-acount', Math.min(Math.ceil(Math.log(hnDetails.allowCount + 1) / Math.LN10), 3));
     } else {
-        textNode.nodeValue = ' ';
+        cell.removeAttribute('data-acount');
+    }
+    if ( hnDetails.blockCount !== 0 ) {
+        cell.setAttribute('data-bcount', Math.min(Math.ceil(Math.log(hnDetails.blockCount + 1) / Math.LN10), 3));
+    } else {
+        cell.removeAttribute('data-bcount');
     }
 
     if ( hnDetails.domain !== des ) {
         return;
     }
 
-    textNode = cell.nodeAt(1).firstChild;
-    aCount = hnDetails.totalAllowCount;
-    bCount = hnDetails.totalBlockCount;
-    if ( aCount !== 0 || bCount !== 0 ) {
-        // https://github.com/chrisaljoudi/uBlock/issues/471
-        aCount = Math.min(Math.ceil(Math.log(aCount + 1) / Math.LN10), 3);
-        bCount = Math.min(Math.ceil(Math.log(bCount + 1) / Math.LN10), 3);
-        textNode.nodeValue = threePlus.slice(0, aCount) +
-                             sixSpace.slice(aCount + bCount) +
-                             threeMinus.slice(0, bCount);
+    cell = cells.nodeAt(1);
+    if ( hnDetails.totalAllowCount !== 0 ) {
+        cell.setAttribute('data-acount', Math.min(Math.ceil(Math.log(hnDetails.totalAllowCount + 1) / Math.LN10), 3));
     } else {
-        textNode.nodeValue = ' ';
+        cell.removeAttribute('data-acount');
+    }
+    if ( hnDetails.totalBlockCount !== 0 ) {
+        cell.setAttribute('data-bcount', Math.min(Math.ceil(Math.log(hnDetails.totalBlockCount + 1) / Math.LN10), 3));
+    } else {
+        cell.removeAttribute('data-bcount');
     }
 };
 
@@ -342,7 +330,7 @@ var buildAllFirewallRows = function() {
         addFirewallRow(allHostnameRows[i]);
     }
 
-    if ( dfPaneBuilt !== true ) {
+    if ( dfPaneBuilt !== true && popupData.advancedUserEnabled ) {
         uDom('#firewallContainer')
             .on('click', 'span[data-src]', unsetFirewallRuleHandler)
             .on('mouseenter', '[data-src]', mouseenterCellHandler)
@@ -388,16 +376,6 @@ var renderPrivacyExposure = function() {
         desHostnameDone[des] = true;
     }
 
-    // Domain of the page must always be included (if there is one)
-    if (
-        allDomains.hasOwnProperty(popupData.pageDomain) === false &&
-        reNetworkRelatedURL.test(popupData.rawURL)
-    ) {
-        allHostnameRows.push(popupData.pageDomain);
-        allDomains[popupData.pageDomain] = false;
-        allDomainCount += 1;
-    }
-
     var summary = domainsHitStr.replace('{{count}}', touchedDomainCount.toLocaleString())
                                .replace('{{total}}', allDomainCount.toLocaleString());
     uDom.nodeFromId('popupHitDomainCount').textContent = summary;
@@ -482,7 +460,7 @@ var renderPopup = function() {
 
     // https://github.com/chrisaljoudi/uBlock/issues/470
     // This must be done here, to be sure the popup is resized properly
-    var dfPaneVisible = popupData.dfEnabled && popupData.advancedUserEnabled;
+    var dfPaneVisible = popupData.dfEnabled;
 
     // https://github.com/chrisaljoudi/uBlock/issues/1068
     // Remember the last state of the firewall pane. This allows to
@@ -590,9 +568,6 @@ var gotoURL = function(ev) {
 /******************************************************************************/
 
 var toggleFirewallPane = function() {
-    if ( popupData.advancedUserEnabled === false ) {
-        return;
-    }
     popupData.dfEnabled = !popupData.dfEnabled;
 
     messaging.send(
diff --git a/src/js/ublock.js b/src/js/ublock.js
index f35e9fa62..c877e354c 100644
--- a/src/js/ublock.js
+++ b/src/js/ublock.js
@@ -19,12 +19,13 @@
     Home: https://github.com/gorhill/uBlock
 */
 
+'use strict';
+
+/******************************************************************************/
 /******************************************************************************/
 
 (function(){
 
-'use strict';
-
 /******************************************************************************/
 
 // https://github.com/chrisaljoudi/uBlock/issues/405
@@ -153,6 +154,11 @@ var matchWhitelistDirective = function(url, hostname, directive) {
 
 /******************************************************************************/
 
+})();
+
+/******************************************************************************/
+/******************************************************************************/
+
 µBlock.stringFromWhitelist = function(whitelist) {
     var r = {};
     var i, bucket;
@@ -266,14 +272,18 @@ var matchWhitelistDirective = function(url, hostname, directive) {
     }
 
     // Change -- but only if the user setting actually exists.
-    var mustSave = us.hasOwnProperty(name) &&
-                   value !== us[name];
+    var mustSave = us.hasOwnProperty(name) && value !== us[name];
     if ( mustSave ) {
         us[name] = value;
     }
 
     // Post-change
     switch ( name ) {
+    case 'advancedUserEnabled':
+        if ( value === true ) {
+            us.dynamicFilteringEnabled = true;
+        }
+        break;
     case 'collapseBlocked':
         if ( value === false ) {
             this.cosmeticFilteringEngine.removeFromSelectorCache('*', 'net');
@@ -533,5 +543,3 @@ var matchWhitelistDirective = function(url, hostname, directive) {
 })();
 
 /******************************************************************************/
-
-})();
diff --git a/src/js/udom.js b/src/js/udom.js
index dde91826f..a53a4afe7 100644
--- a/src/js/udom.js
+++ b/src/js/udom.js
@@ -22,6 +22,8 @@
 /* global DOMTokenList */
 /* exported uDom */
 
+'use strict';
+
 /******************************************************************************/
 
 // It's just a silly, minimalist DOM framework: this allows me to not rely
@@ -32,8 +34,6 @@
 
 var uDom = (function() {
 
-'use strict';
-
 /******************************************************************************/
 
 var DOMList = function() {
@@ -499,6 +499,16 @@ DOMList.prototype.attr = function(attr, value) {
 
 /******************************************************************************/
 
+DOMList.prototype.removeAttr = function(attr) {
+    var i = this.nodes.length;
+    while ( i-- ) {
+        this.nodes[i].removeAttribute(attr);
+    }
+    return this;
+};
+
+/******************************************************************************/
+
 DOMList.prototype.prop = function(prop, value) {
     var i = this.nodes.length;
     if ( value === undefined ) {
diff --git a/src/popup.html b/src/popup.html
index 6da2a6f60..e27f253e1 100644
--- a/src/popup.html
+++ b/src/popup.html
@@ -22,7 +22,9 @@
         </p>
         <p class="statValue" id="page-blocked">?</p>
         <div id="refresh" class="fa">&#xf021;</div>
-        <p class="statName" data-i18n="popupBlockedSinceInstallPrompt">&nbsp;</p>
+        <p class="statName">
+            <span data-i18n="popupBlockedSinceInstallPrompt">&nbsp;</span>
+        </p>
         <p class="statValue" id="total-blocked">?</p>
         <h2 data-i18n="popupHitDomainCountPrompt">&nbsp;</h2>
         <p class="statValue" id="popupHitDomainCount">&nbsp;</p>
@@ -46,7 +48,7 @@
 </div>
 
 <div id="templates" style="display: none">
-    <div><span></span><span data-src="/" data-des="" data-type="*"> </span><span data-src="." data-des="" data-type="*"> </span><span data-src="." data-des="" data-type="*"> </span></div>
+    <div><span></span><span data-src="/" data-des="" data-type="*"></span><span data-src="." data-des="" data-type="*"></span><span data-src="." data-des="" data-type="*"></span></div>
     <div id="actionSelector"><span id="dynaAllow"></span><span id="dynaNoop"></span><span id="dynaBlock"></span></div>
     <div id="hotspotTip"></div>
     <div id="tooltip"></div>