Popup refinements, SVG icons, sizing improvements

src/css/popup.css

@@ -1,21 +1,23 @@
 body {
-    background-color: white;
+    background-color: #fafafa;
+    color: #333;
     border: 0;
-    float: left;
+    font: 13px Helvetica Neue, Helvetica, sans-serif;
-    font: 13px sans-serif;
     margin: 0;
-    overflow: hidden;
     padding: 0;
+    overflow: hidden;
     white-space: nowrap;
+    display: inline-block;
     }
 h2 {
     background-color: #eee;
     border: 0;
+    border-top: 1px solid #ccc;
     color: #666;
     font-size: 14px;
     font-weight: normal;
-    margin:  1em 0 0.5em 0;
+    margin:  10px 0 5px 0;
-    padding: 2px 0;
+    padding: 5px 2px 4px 2px;
     text-align: center;
     }
 h2:nth-of-type(1) {
@@ -33,7 +35,8 @@ a {
     margin: 0;
     border: 0;
     padding: 4px;
-    color: white;
+    padding-top: 5px;
+    color: #eee;
     font-weight: bold;
     background-color: #444;
     text-align: center;
@@ -44,15 +47,21 @@ a {
     font-weight: normal;
     margin-left: 1em;
     }
+html {
+    font-size: 0;
+    }
+html, body, #panes {
+    text-align: right;
+    }
+#panes {
+    white-space: nowrap;
+    }
 body[dir="ltr"] #panes {
     direction: rtl;
     }
 body[dir="rtl"] #panes {
     direction: ltr;
     }
-body, #panes {
-    text-align: right; /* this helps the popup render better at "intermediate" widths */
-    }
 #panes > div {
     display: inline-block;
     position: relative;
@@ -64,25 +73,26 @@ body[dir="ltr"] #panes > div {
 body[dir="rtl"] #panes > div {
     direction: rtl;
     }
-#panes > div:nth-of-type(2) {
+#panes > #dfPane {
     overflow-y: auto;
     overflow-x: hidden;
     width: 320px;
+    border-right: 1px solid #444;
     }
-body[dir="ltr"] #panes > div:nth-of-type(2) {
+body[dir="ltr"] #panes > #dfPane {
     direction: rtl; /* scroll bar to the left */
     margin-right: 1px;
     }
-body[dir="rtl"] #panes > div:nth-of-type(2) {
+body[dir="rtl"] #panes > #dfPane {
     direction: ltr; /* scroll bar to the right */
     margin-left: 1px;
     }
-#panes:not(.dfEnabled) > div:nth-of-type(2) {
+#panes:not(.dfEnabled) > #dfPane {
     display: none;
     }
-#panes > div:nth-of-type(1) {
+#panes > #switchPane {
+    box-sizing: border-box;
     min-width: 150px;
-    padding: 0;
     }
 p {
     text-align: center;
@@ -90,17 +100,17 @@ p {
     }
 #switch {
     margin: 8px 0;
+    font-size:0;
     }
-#switch .fa {
+#switch .icon {
-    color: #0046ff;
+    color: dodgerblue;
     cursor: pointer;
     font-size:96px;
-    margin: 0;
     }
-#switch .fa:hover {
+#switch .icon:hover {
     opacity: 0.9;
     }
-body.off #switch .fa {
+body.off #switch .icon {
     color: #ccc;
     }
 #switch-hint {
@@ -112,54 +122,26 @@ body.off #switch .fa {
     }
 .statName {
     color: #666;
-    margin: 1em 0.2em 0.2em 0.2em;
+    margin: 0;
+    margin-top: 10px;
     text-align: center;
     }
 .statValue {
     font-size: 14px;
-    margin: 0;
+    margin: 4px 0;
     text-align: center;
     }
 .tool {
     color: #aaa;
     cursor: pointer;
-    display: none;
     font-size: 14px;
-    unicode-bidi: embed;
     }
-.tool.enabled {
+.tool:not(.enabled) {
-    display: inline;
+    display: none;
     }
 .tool:hover {
     color: #444;
     }
-#extraTools {
-    background-color: #eee;
-    border: 0;
-    color: #aaa;
-    font-weight: normal;
-    margin:  1em 0 0 0;
-    padding: 4px 0 2px 0;
-    text-align: center;
-    }
-#extraTools > span {
-    cursor: pointer;
-    font-size: 18px;
-    margin: 0 0.5em;
-    position: relative;
-    }
-#extraTools > span.on > span {
-    color: #e00;
-    font-size: 20px;
-    left: 0;
-    position: absolute;
-    text-align: center;
-    top: 0;
-    width: 100%;
-    }
-#extraTools > span.on > span:after {
-    content: '\2715';
-    }
 
 body.advancedUser h2 {
     cursor: pointer;
@@ -173,26 +155,26 @@ body.advancedUser #panes.dfEnabled h2:before {
     }
 
 #refresh {
-    background-color: #ffe;
+    background-color: #444;
-    border: 1px solid #eec;
     border-radius: 4px;
-    bottom: 4px;
+    color: #dedede;
-    color: #888;
+    opacity: 0.7;
     cursor: pointer;
     display: none;
-    font-size: 40px;
+    height: 35px;
-    left: 4px;
+    font-size: 35px;
-    line-height: 40px;
+    padding: 8px;
-    padding: 4px 8px;
     position: absolute;
     right: 4px;
+    left: 4px;
+    bottom: 4px;
     text-align: center;
     }
 body.dirty #refresh {
     display: block;
     }
 body.dirty #refresh:hover {
-    color: black;
+    opacity: 1;
     }
 
 #firewallContainer {
@@ -219,8 +201,8 @@ body.dirty #refresh:hover {
 #firewallContainer > div > span {
     background-color: transparent;
     border: none;
-    box-sizing: border-box;
     -moz-box-sizing: border-box;
+    box-sizing: border-box;
     color: #000;
     display: inline-block;
     height: 22px;
@@ -354,15 +336,15 @@ body.dirty #refresh:hover {
     }
 
 #saveRules {
-    background-color: #ffe;
+    opacity: 0.7;
-    border: 1px solid #eec;
+    background-color: #444;
     border-radius: 4px;
-    color: #888;
+    color: rgb(255, 213, 123);
     cursor: pointer;
     display: none;
-    font-size: 30px;
+    font-size: 35px;
-    line-height: 40px;
+    height: 35px;
-    padding: 0.1em 0.4em;
+    padding: 8px;
     position: fixed;
     text-align: center;
     }
@@ -370,5 +352,5 @@ body.dirty #refresh:hover {
     display: block;
     }
 #firewallContainer.dirty ~ #saveRules:hover {
-    color: black;
+    opacity: 1;
     }

src/js/popup.js

@@ -40,9 +40,9 @@ var dfPaneVisibleStored = vAPI.localStorage.getItem('popupFirewallPane') === 'tr
 // dictate the height of the popup. The right pane dictates the height
 // of the popup, and the left pane will have a scrollbar if ever its
 // height is more than what is available.
-document.querySelector('#panes > div:nth-of-type(2)').style.setProperty(
+document.getElementById('dfPane').style.setProperty(
     'height',
-    document.querySelector('#panes > div:nth-of-type(1)').offsetHeight + 'px'
+    document.getElementById('switchPane').offsetHeight + 'px'
 );
 
 // The padlock must be manually positioned:
@@ -429,10 +429,6 @@ var renderPopup = function() {
     // This will collate all domains, touched or not
     renderPrivacyExposure();
 
-    // Extra tools
-    uDom('#doBlockAllPopups').toggleClass('on', popupData.doBlockAllPopups === true);
-    uDom('#dontBlockDoc').toggleClass('on', popupData.dontBlockDoc === true);
-
     // https://github.com/gorhill/uBlock/issues/470
     // This must be done here, to be sure the popup is resized properly
     var dfPaneVisible = popupData.dfEnabled && popupData.advancedUserEnabled;
@@ -655,23 +651,6 @@ var saveFirewallRules = function() {
 
 /******************************************************************************/
 
-var toggleHostnameSwitch = function() {
-    var elem = uDom(this);
-    var switchName = elem.attr('id');
-    if ( !switchName ) {
-        return;
-    }
-    elem.toggleClass('on');
-    messager.send({
-        what: 'toggleHostnameSwitch',
-        name: switchName,
-        hostname: popupData.pageHostname,
-        state: elem.hasClass('on')
-    });
-};
-
-/******************************************************************************/
-
 // Poll for changes.
 //
 // I couldn't find a better way to be notified of changes which can affect
@@ -754,7 +733,6 @@ uDom.onLoad(function () {
     uDom('a[href]').on('click', gotoURL);
     uDom('h2').on('click', toggleFirewallPane);
     uDom('#refresh').on('click', reloadTab);
-    uDom('.hnSwitch').on('click', toggleHostnameSwitch);
     uDom('#saveRules').on('click', saveFirewallRules);
     uDom('[data-i18n="popupAnyRulePrompt"]').on('click', toggleMinimize);
 });

src/popup.html

@@ -12,26 +12,21 @@
 <body>
 <a href="dashboard.html" target="_blank" id="gotoPrefs" title="popupTipDashboard"><span id="appname">&nbsp;</span><span id="version">&nbsp;</span></a>
 <div id="panes">
-    <div>
+    <div id="switchPane">
-        <p id="switch" data-i18n-tip="popupPowerSwitchInfo"><span class="fa">&#xf011;</span></p>
+        <p id="switch" data-i18n-tip="popupPowerSwitchInfo"><svg class="icon icon-power"><use xlink:href="img/icons.svg#icon-power"></use></svg></p>
-        <p id="switch-hint"></p>
         <h2 id="dfToggler" data-i18n="popupBlockedRequestPrompt">&nbsp;</h2>
         <p class="statName">
             <span data-i18n="popupBlockedOnThisPagePrompt">&nbsp;</span>&ensp;
-            <span id="gotoPick" class="fa tool" data-i18n-tip="popupTipPicker" data-tip-anchor="top">&#xf1fb;</span>&ensp;
+            <span id="gotoPick" class="tool" data-i18n-tip="popupTipPicker" data-tip-anchor="top"><svg class="icon icon-eyedropper"><use xlink:href="img/icons.svg#icon-eyedropper"></use></svg></span>&ensp;
-            <a href="#" target="_blank" id="gotoLog" class="fa tool" data-i18n-tip="popupTipLog" data-tip-anchor="top">&#xf06e;</a>
+            <a href="#" target="_blank" id="gotoLog" class="tool" data-i18n-tip="popupTipLog" data-tip-anchor="top"><svg class="icon icon-view"><use xlink:href="img/icons.svg#icon-view"></use></svg></a>
             </p>
         <p class="statValue" id="page-blocked">?</p>
         <p class="statName" data-i18n="popupBlockedSinceInstallPrompt">&nbsp;</p>
         <p class="statValue" id="total-blocked">?</p>
         <h2 data-i18n="popupHitDomainCountPrompt">&nbsp;</h2>
         <p class="statValue" id="popupHitDomainCount">&nbsp;</p>
-        <div id="extraTools">
+        <div id="refresh"><svg class="icon icon-reload"><use xlink:href="img/icons.svg#icon-reload"></use></svg></div>
-            <span id="doBlockAllPopups" class="hnSwitch fa" data-i18n-tip="popupTipNoPopups" data-tip-anchor="topcenter">&#xf0c5;<span></span></span>
+    </div><!--no spaces--><div id="dfPane">
-            <span id="dontBlockDoc" class="hnSwitch fa" data-i18n-tip="popupTipNoStrictBlocking" data-tip-anchor="topcenter">&#xf071;<span></span></span>
-            </div>
-        <div id="refresh" class="fa">&#xf021;</div>
-        </div><!-- DO NOT REMOVE --><div>
         <div id="firewallContainer">
             <div><span data-i18n="popupAnyRulePrompt"></span><span data-src="/" data-des="*" data-type="*"> </span><span data-src="." data-des="*" data-type="*"> </span></div>
             <div><span data-i18n="popupImageRulePrompt"></span><span data-src="/" data-des="*" data-type="image"> </span><span data-src="." data-des="*" data-type="image"> </span></div>
@@ -40,7 +35,7 @@
             <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><div id="saveRules" class="fa">&#xf13e;</div>
+            </div><div id="saveRules"><svg class="icon icon-lock"><use xlink:href="img/icons.svg#icon-lock"></use></svg></div>
         </div>
     </div>