this fixes #704

4 files changed, 91 insertions, 83 deletions

diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index 31547b9..94edc24 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -180,8 +180,8 @@
     "description":""
   },
   "popupHitDomainCountPrompt":{
-    "message":"Connected to {{count}} distinct domain(s) out of {{total}}",
-    "description":"appear in dynamic filtering pane"
+    "message":"{{count}} out of {{total}}",
+    "description":"appears in popup"
   },
   "pickerCreate":{
     "message":"Create",
diff --git a/src/css/popup.css b/src/css/popup.css
index 1af20e3..6ead129 100644
--- a/src/css/popup.css
+++ b/src/css/popup.css
@@ -8,15 +8,19 @@ body {
     white-space: nowrap;
     overflow: hidden;
     }
-h1,h2,h3,h4 {
-    background-color: #444;
+h2 {
+    background-color: #eee;
     border: 0;
-    color: white;
-    cursor: pointer;
-    margin:  0;
-    padding: 4px;
+    color: #666;
+    font-size: 14px;
+    font-weight: normal;
+    margin:  1em 0 0.5em 0;
+    padding: 2px 0;
     text-align: center;
     }
+h2:nth-of-type(1) {
+    margin-top: 0;
+    }
 a {
     color: inherit;
     text-decoration: none;
@@ -75,17 +79,19 @@ body[dir="rtl"] #panes > div:nth-of-type(2) {
 
 #panes > div:nth-of-type(1) {
     min-width: 150px;
-    padding: 4px 5px 0 5px;
+    padding: 4px 1px;
     }
 p {
-    margin: 16px 0;
     text-align: center;
     white-space: nowrap;
     }
+#switch {
+    margin: 8px 0;
+    }
 #switch .fa {
     color: green;
     cursor: pointer;
-    font-size: 108px;
+    font-size: 96px;
     margin: 0;
     }
 #switch .fa:hover {
@@ -98,20 +104,17 @@ p {
     color: #888;
     font-size: 11px;
     }
-[data-i18n="popupBlockedRequestPrompt"] {
-    font-size: 16px;
-    }
 #page-blocked {
     font-size: 20px;
-    margin-top: 4px;
     }
-#total-blocked {
-    font-size: 14px;
-    margin-bottom: 8px;
-    margin-top: 4px;
+.statName {
+    color: #666;
+    margin: 1em 0 0.2em 0;
+    text-align: center;
     }
-.stats {
-    margin-bottom: 4px;
+.statValue {
+    font-size: 14px;
+    margin: 0;
     text-align: center;
     }
 .tool {
@@ -128,16 +131,14 @@ p {
     color: #444;
     }
 
-body.advancedUser #dfToggler {
+body.advancedUser h2 {
     cursor: pointer;
     }
-body.advancedUser #dfToggler:before {
-    color: gray;
+body.advancedUser h2:before {
+    color: #aaa;
     content: '+\202F';
-    font-size: 14px;
-    line-height: 14px;
     }
-body.advancedUser #panes.dfEnabled #dfToggler:before {
+body.advancedUser #panes.dfEnabled h2:before {
     content: '\2212\202F';
     }
 
diff --git a/src/js/popup.js b/src/js/popup.js
index 5e814d4..75ce568 100644
--- a/src/js/popup.js
+++ b/src/js/popup.js
@@ -45,9 +45,12 @@ var dfHotspots = null;
 var hostnameToSortableTokenMap = {};
 var allDomains = {};
 var allDomainCount = 0;
+var allDomainRows = [];
 var touchedDomainCount = 0;
 var rowsToRecycle = uDom();
 var cachedPopupHash = '';
+var orStr = vAPI.i18n('popupOr');
+var domainsHitStr = vAPI.i18n('popupHitDomainCountPrompt');
 
 /******************************************************************************/
 
@@ -152,19 +155,6 @@ var addDynamicFilterRow = function(des) {
     row.toggleClass('isDomain', des === hnDetails.domain);
     row.toggleClass('allowed', hnDetails.allowCount !== 0);
     row.toggleClass('blocked', hnDetails.blockCount !== 0);
-
-    if ( allDomains.hasOwnProperty(hnDetails.domain) === false ) {
-        allDomains[hnDetails.domain] = false;
-        allDomainCount += 1;
-    }
-
-    if ( hnDetails.allowCount !== 0 ) {
-        if ( allDomains[hnDetails.domain] === false ) {
-            allDomains[hnDetails.domain] = true;
-            touchedDomainCount += 1;
-        }
-    }
-
     row.appendTo('#dynamicFilteringContainer');
 
     // Hacky? I couldn't figure a CSS recipe for this problem.
@@ -257,17 +247,37 @@ var buildAllDynamicFilters = function() {
 
     // Remove and reuse all rows: the order may have changed, we can't just
     // reuse them in-place.
-    rowsToRecycle = uDom('#privacyInfo ~ div').detach();
+    rowsToRecycle = uDom('#dynamicFilteringContainer > div:nth-of-type(7) ~ div').detach();
+
+    var n = allDomainRows.length;
+    for ( var i = 0; i < n; i++ ) {
+        addDynamicFilterRow(allDomainRows[i]);
+    }
+
+    if ( dfPaneBuilt !== true ) {
+        uDom('#dynamicFilteringContainer')
+            .on('click', 'span[data-src]', unsetDynamicFilterHandler)
+            .on('mouseenter', '[data-src]', mouseenterCellHandler)
+            .on('mouseleave', '[data-src]', mouseleaveCellHandler);
+        dfPaneBuilt = true;
+    }
+
+    updateAllDynamicFilters();
+};
 
+/******************************************************************************/
+
+var renderPrivacyExposure = function() {
     allDomains = {};
     allDomainCount = touchedDomainCount = 0;
+    allDomainRows = [];
 
     // Sort hostnames. First-party hostnames must always appear at the top
     // of the list.
     var desHostnameDone = {};
     var keys = Object.keys(popupData.dynamicFilterRules)
                      .sort(rulekeyCompare);
-    var key, des;
+    var key, des, hnDetails;
     for ( var i = 0; i < keys.length; i++ ) {
         key = keys[i];
         des = key.slice(2, key.indexOf(' ', 2));
@@ -275,24 +285,24 @@ var buildAllDynamicFilters = function() {
         if ( des === '*' || desHostnameDone.hasOwnProperty(des) ) {
             continue;
         }
-        addDynamicFilterRow(des);
+        hnDetails = popupData.hostnameDict[des] || {};
+        if ( allDomains.hasOwnProperty(hnDetails.domain) === false ) {
+            allDomains[hnDetails.domain] = false;
+            allDomainCount += 1;
+        }
+        if ( hnDetails.allowCount !== 0 ) {
+            if ( allDomains[hnDetails.domain] === false ) {
+                allDomains[hnDetails.domain] = true;
+                touchedDomainCount += 1;
+            }
+        }
+        allDomainRows.push(des);
         desHostnameDone[des] = true;
     }
 
-    var summary = vAPI.i18n('popupHitDomainCountPrompt')
-                      .replace('{{count}}', touchedDomainCount.toLocaleString())
-                      .replace('{{total}}', allDomainCount.toLocaleString());
-    uDom('#privacyInfo').text(summary);
-
-    if ( dfPaneBuilt !== true ) {
-        uDom('#dynamicFilteringContainer')
-            .on('click', 'span[data-src]', unsetDynamicFilterHandler)
-            .on('mouseenter', '[data-src]', mouseenterCellHandler)
-            .on('mouseleave', '[data-src]', mouseleaveCellHandler);
-        dfPaneBuilt = true;
-    }
-
-    updateAllDynamicFilters();
+    var summary = domainsHitStr.replace('{{count}}', touchedDomainCount.toLocaleString())
+                               .replace('{{total}}', allDomainCount.toLocaleString());
+    uDom('#privacyExposure').text(summary);
 };
 
 /******************************************************************************/
@@ -316,40 +326,36 @@ var renderPopup = function() {
                     .attr('href', 'devtools.html?tabId=' + popupData.tabId);
     uDom('#gotoPick').toggleClass('enabled', popupData.canElementPicker === true);
 
-    var or = vAPI.i18n('popupOr');
     var blocked = popupData.pageBlockedRequestCount;
     var total = popupData.pageAllowedRequestCount + blocked;
-    var html = [];
+    var text = [];
     if ( total === 0 ) {
-        html.push('0');
+        text.push('0');
     } else {
-        html.push(
+        text.push(
             formatNumber(blocked),
-            '<span class="dim">&nbsp;',
-            or,
-            '&nbsp;',
-            formatNumber(Math.floor(blocked * 100 / total)),
-            '%</span>'
+            '\u00a0', orStr, '\u00a0',
+            formatNumber(Math.floor(blocked * 100 / total)), '%'
         );
     }
-    uDom('#page-blocked').html(html.join(''));
+    uDom('#page-blocked').text(text.join(''));
 
     blocked = popupData.globalBlockedRequestCount;
     total = popupData.globalAllowedRequestCount + blocked;
-    html = [];
+    text = [];
     if ( total === 0 ) {
-        html.push('0');
+        text.push('0');
     } else {
-        html.push(
+        text.push(
             formatNumber(blocked),
-            '<span class="dim">&nbsp;',
-            or,
-            '&nbsp;',
-            formatNumber(Math.floor(blocked * 100 / total)),
-            '%</span>'
+            '\u00a0', orStr, '\u00a0',
+            formatNumber(Math.floor(blocked * 100 / total)), '%'
         );
     }
-    uDom('#total-blocked').html(html.join(''));
+    uDom('#total-blocked').text(text.join(''));
+
+    // This will collate all domains, touched or not
+    renderPrivacyExposure();
 
     // https://github.com/gorhill/uBlock/issues/470
     // This must be done here, to be sure the popup is resized properly
@@ -592,7 +598,7 @@ uDom.onLoad(function() {
     uDom('#switch').on('click', toggleNetFilteringSwitch);
     uDom('#gotoPick').on('click', gotoPick);
     uDom('a[href]').on('click', gotoURL);
-    uDom('#dfToggler').on('click', toggleDynamicFiltering);
+    uDom('h2').on('click', toggleDynamicFiltering);
     uDom('#refresh').on('click', reloadTab);
 });
 
diff --git a/src/popup.html b/src/popup.html
index f134cd0..3d08a00 100644
--- a/src/popup.html
+++ b/src/popup.html
@@ -14,15 +14,17 @@
     <div>
         <p id="switch" data-i18n-tip="popupPowerSwitchInfo"><span class="fa">&#xf011;</span></p>
         <p id="switch-hint"></p>
-        <p id="dfToggler" data-i18n="popupBlockedRequestPrompt"></p>
-        <p class="stats">
+        <h2 id="dfToggler" data-i18n="popupBlockedRequestPrompt"></h2>
+        <p class="statName">
             <span data-i18n="popupBlockedOnThisPagePrompt"></span>&ensp;
             <span id="gotoPick" class="fa tool" data-i18n-tip="popupTipPicker" data-tip-anchor="top">&#xf1fb;</span>&ensp;
             <a href="#" target="_blank" id="gotoLog" class="fa tool" data-i18n-tip="popupTipLog" data-tip-anchor="top">&#xf06e;</a>
             </p>
-        <p id="page-blocked">?</p>
-        <p class="stats" data-i18n="popupBlockedSinceInstallPrompt"></p>
-        <p id="total-blocked">?</p>
+        <p class="statValue" id="page-blocked">?</p>
+        <p class="statName" data-i18n="popupBlockedSinceInstallPrompt"></p>
+        <p class="statValue" id="total-blocked">?</p>
+        <h2>domains touched</h2>
+        <p class="statValue" id="privacyExposure"></p>
         <div id="refresh" class="fa">&#xf021;</div>
         </div><!-- DO NOT REMOVE --><div>
         <div id="dynamicFilteringContainer">
@@ -33,7 +35,6 @@
             <div><span data-i18n="popup1pScriptRulePrompt"></span><span data-src="/" data-des="*" data-type="1p-script"> </span><span data-src="." data-des="*" data-type="1p-script"> </span></div>
             <div><span data-i18n="popup3pScriptRulePrompt"></span><span data-src="/" data-des="*" data-type="3p-script"> </span><span data-src="." data-des="*" data-type="3p-script"> </span></div>
             <div><span data-i18n="popup3pFrameRulePrompt"></span><span data-src="/" data-des="*" data-type="3p-frame"> </span><span data-src="." data-des="*" data-type="3p-frame"> </span></div>
-            <div id="privacyInfo" style="display: none;"></div>
             </div>
         </div>
     </div>