From 157045924b46814ba4b2152c2e33d8935d4d2ddc Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Sat, 16 Dec 2017 09:28:57 -0500
Subject: [PATCH] fine tune various UI aspects

- more choices of matrix text size
- more accurate wording for matrix switches
- info links for various matrix switches
---
 src/_locales/en/messages.json |  10 ++-
 src/css/popup.css             | 116 +++++++++++++++++-----------------
 src/js/background.js          |   2 +-
 src/js/popup.js               |  29 +++++----
 src/js/settings.js            |  10 ++-
 src/js/start.js               |  12 ----
 src/popup.html                |  25 ++++----
 src/settings.html             |   4 +-
 8 files changed, 100 insertions(+), 108 deletions(-)

diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index a79b536..fb9446a 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -112,15 +112,19 @@
         "description": "Appears in the metadata row of bottom-most group: **mind the limited width**"
     },
     "matrixSwitchNoMixedContent" : {
-        "message": "Strict HTTPS",
+        "message": "Forbid mixed content",
+        "description": "A menu entry in the matrix popup"
+    },
+    "matrixSwitchNoWorker" : {
+        "message": "Forbid web workers",
         "description": "A menu entry in the matrix popup"
     },
     "matrixSwitchReferrerSpoof" : {
-        "message": "Referrer spoofing",
+        "message": "Spoof <code>Referer</code> header",
         "description": "A menu entry in the matrix popup"
     },
     "matrixSwitchNoscriptSpoof" : {
-        "message": "<code><noscript></code> tags spoofing",
+        "message": "Spoof <code><noscript></code> tags",
         "description": "A menu entry in the matrix popup"
     },
     "matrixRevertAllEntry" : {
diff --git a/src/css/popup.css b/src/css/popup.css
index 3f746b2..79dc5a1 100644
--- a/src/css/popup.css
+++ b/src/css/popup.css
@@ -2,7 +2,7 @@ body {
     background-color: white;
     border: 0;
     float: left;
-    font: 13px httpsb,sans-serif;
+    font: 14px httpsb,sans-serif;
     margin: 0;
     min-height: 16em;
     min-width: 32em;
@@ -72,88 +72,103 @@ body[dir="rtl"] #gotoDashboard > span:last-of-type {
     font-family: sans-serif;
     line-height: 12px;
     margin: 0;
-    padding: 02px 0;
+    padding: 2px 0;
     text-align: center;
     }
 #toolbarContainer {
     display: flex;
-    flex-direction: row;
     justify-content: space-between;
 }
 .toolbar {
     border: 0;
-    display: inline-block;
+    display: inline-flex;
     margin: 0;
     padding: 0;
-    vertical-align: top;
-    white-space: nowrap;
     }
 
 body .toolbar button {
-    margin: 0;
-    border: 0;
-    padding: 4px;
-    font: inherit;
     background-color: white;
+    border: 0;
     color: black;
-    opacity: 0.9;
     cursor: pointer;
-    vertical-align: top;
+    margin: 0;
+    padding: 0.2em 0.2em 0.1em 0.2em;
+    position: relative;
     }
 body .toolbar button:hover {
     background-color: #eee;
-    opacity: 1;
     }
 body .toolbar button.disabled {
     color: #ccc;
     }
 body .toolbar button.fa {
-    font: 1.75em FontAwesome;
-    min-width: 1.1em;
+    font: 1.7em FontAwesome;
+    min-width: 1.4em;
     }
 #mtxSwitch_matrix-off.switchTrue {
     color: #a00;
     }
 
 #mtxSwitches > li  {
+    align-items: baseline;
     color: #888;
+    display: flex;
+    justify-content: space-between;
     }
 #mtxSwitches > li.switchTrue {
     color: #000;
     }
-#mtxSwitches > li:before {
+#mtxSwitches > li > span:before {
     font: 110% FontAwesome;
     }
-body[dir="ltr"] #mtxSwitches > li:before {
-    padding-right: 0.5em;
+#mtxSwitches > li > span:first-of-type:before {
+    content: '\f204\a0';
     }
-body[dir="rtl"] #mtxSwitches > li:before {
-    padding-left: 0.5em;
+#mtxSwitches > li.switchTrue > span:first-of-type:before {
+    content: '\f205\a0';
     }
-#mtxSwitches > li:before {
-    content: '\f204';
-    }
-#mtxSwitches > li.switchTrue:before {
+#mtxSwitches > li > a {
     color: #000;
-    content: '\f205';
+    opacity: 0;
+    }
+#mtxSwitches > li:hover > a {
+    opacity: 0.1;
+    }
+#mtxSwitches > li > a:hover {
+    opacity: 0.8;
     }
 
-.dropdown-menu {
-    margin: 0;
+.dropdown-menu-capture {
+    background-color: transparent;
     border: 0;
+    bottom: 0;
     display: none;
-    font-size: 110%;
-    padding: 3px 0 0 0;
+    font: 1rem httpsb,sans-serif;
+    left: 0;
+    margin: 0;
+    padding: 0;
     position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 300;
+    }
+.dropdown-menu-capture.show {
+    display: block;
+    }
+.dropdown-menu {
+    border: 0;
+    display: inline-block;
+    margin: 0;
+    padding: 3px 0 0 0;
+    position: absolute;
     white-space: normal;
-    z-index: 50;
     }
 .dropdown-menu > ul {
     margin: 0;
     border: 0;
     border: 1px solid #ccc;
     border-radius: 4px;
-    padding: 0.25em;
+    padding: 0;
     background-color: white;
     list-style-type: none;
     }
@@ -162,7 +177,7 @@ body[dir="rtl"] #mtxSwitches > li:before {
     color: black;
     cursor: pointer;
     margin: 0;
-    padding: 4px 0.5em;
+    padding: 0.2em 0.25em;
     white-space: nowrap;
     }
 .dropdown-menu > ul > li.dropdown-menu-entry:hover {
@@ -175,23 +190,6 @@ body[dir="rtl"] #mtxSwitches > li:before {
 .dropdown-menu.show {
     display: block;
     }
-.dropdown-menu-capture {
-    margin: 0;
-    border: 0;
-    padding: 0;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: transparent;
-    opacity: 0.1;
-    display: none;
-    z-index: 40;
-    }
-.dropdown-menu.show ~ .dropdown-menu-capture {
-    display: block;
-    }
 
 #buttonReload {
     margin-left: 1em;
@@ -282,19 +280,22 @@ body .toolbar .scope {
     border: 1px solid #ccc;
     box-sizing: content-box;
     -moz-box-sizing: content-box;
+    display: inline-flex;
     color: white;
-    display: inline-block;
-    line-height: 2em;
     margin: 0;
     padding: 1px;
     cursor: pointer;
-    white-space: nowrap;
+    }
+body .toolbar .scope > span {
+    align-items: center;
+    display: inline-flex;
+    }
+body .toolbar .scope > span > span {
+    pointer-events: none;
     }
 body .toolbar #specificScope {
     direction: ltr;
-    display: inline-flex;
     justify-content: flex-end;
-    text-align: right;
     width: 16em;
     }
 body .toolbar #specificScope.on {
@@ -303,8 +304,7 @@ body .toolbar #specificScope.on {
     }
 body .toolbar #specificScope > span {
     background-color: #ccc;
-    display: inline-block;
-    height: 100%;
+    justify-content: flex-end;
     }
 body .toolbar #specificScope > span.on {
     background-color: #24c;
@@ -325,9 +325,9 @@ body .toolbar #specificScope > span:first-of-type {
     flex: 1;
     }
 body .toolbar #globalScope {
+    justify-content: center;
     margin-left: 1px;
-    text-align: center;
-    width: 2em;
+    width: 1.8em;
     }
 body .toolbar #globalScope.on {
     background-color: #000;
diff --git a/src/js/background.js b/src/js/background.js
index 7d3b4ec..1a81b3b 100644
--- a/src/js/background.js
+++ b/src/js/background.js
@@ -98,7 +98,7 @@ return {
         deleteUnusedSessionCookies: false,
         deleteUnusedSessionCookiesAfter: 60,
         deleteLocalStorage: false,
-        displayTextSize: '13px',
+        displayTextSize: '14px',
         externalHostsFiles: '',
         iconBadgeEnabled: false,
         maxLoggedRequests: 1000,
diff --git a/src/js/popup.js b/src/js/popup.js
index 02c39fe..abbe3b0 100644
--- a/src/js/popup.js
+++ b/src/js/popup.js
@@ -1134,7 +1134,7 @@ function initScopeCell() {
         tld = matrixSnapshot.domain.slice(pos + 1);
         labels = matrixSnapshot.hostname.slice(0, -tld.length);
     }
-    var beg = 0, span;
+    var beg = 0, span, label;
     while ( beg < labels.length ) {
         pos = labels.indexOf('.', beg);
         if ( pos === -1 ) {
@@ -1142,18 +1142,22 @@ function initScopeCell() {
         } else {
             pos += 1;
         }
-        span = document.createElement('span');
-        span.setAttribute('data-scope', labels.slice(beg) + tld);
-        span.appendChild(
+        label = document.createElement('span');
+        label.appendChild(
             document.createTextNode(punycode.toUnicode(labels.slice(beg, pos)))
         );
+        span = document.createElement('span');
+        span.setAttribute('data-scope', labels.slice(beg) + tld);
+        span.appendChild(label);
         specificScope.appendChild(span);
         beg = pos;
     }
     if ( tld !== '' ) {
+        label = document.createElement('span');
+        label.appendChild(document.createTextNode(punycode.toUnicode(tld)));
         span = document.createElement('span');
         span.setAttribute('data-scope', tld);
-        span.appendChild(document.createTextNode(punycode.toUnicode(tld)));
+        span.appendChild(label);
         specificScope.appendChild(span);
     }
     updateScopeCell();
@@ -1200,10 +1204,9 @@ function updateMatrixSwitches() {
 
 function toggleMatrixSwitch(ev) {
     var elem = ev.currentTarget;
+    if ( elem.target.localName === 'a' ) { return; }
     var pos = elem.id.indexOf('_');
-    if ( pos === -1 ) {
-        return;
-    }
+    if ( pos === -1 ) { return; }
     var switchName = elem.id.slice(pos + 1);
     var request = {
         what: 'toggleMatrixSwitch',
@@ -1310,18 +1313,20 @@ function gotoExtensionURL(ev) {
 
 function dropDownMenuShow(ev) {
     var button = ev.target;
-    var menu = button.nextElementSibling;
+    var menuOverlay = document.getElementById(button.getAttribute('data-dropdown-menu'));
     var butnRect = button.getBoundingClientRect();
     var viewRect = document.body.getBoundingClientRect();
     var butnNormalLeft = butnRect.left / (viewRect.width - butnRect.width);
-    menu.classList.add('show');
+    menuOverlay.classList.add('show');
+    var menu = menuOverlay.querySelector('.dropdown-menu');
     var menuRect = menu.getBoundingClientRect();
     var menuLeft = butnNormalLeft * (viewRect.width - menuRect.width);
     menu.style.left = menuLeft.toFixed(0) + 'px';
+    menu.style.top = butnRect.bottom + 'px';
 }
 
 function dropDownMenuHide() {
-    uDom('.dropdown-menu').removeClass('show');
+    uDom('.dropdown-menu-capture').removeClass('show');
 }
 
 /******************************************************************************/
@@ -1502,7 +1507,7 @@ uDom('#buttonRevertAll').on('click', revertAll);
 uDom('#buttonReload').on('click', buttonReloadHandler);
 uDom('.extensionURL').on('click', gotoExtensionURL);
 
-uDom('body').on('click', '.dropdown-menu-button', dropDownMenuShow);
+uDom('body').on('click', '[data-dropdown-menu]', dropDownMenuShow);
 uDom('body').on('click', '.dropdown-menu-capture', dropDownMenuHide);
 
 uDom('#matList').on('click', '.g4Meta', function(ev) {
diff --git a/src/js/settings.js b/src/js/settings.js
index 56f73ea..70492fa 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -89,9 +89,8 @@ function onInputChanged(ev) {
     var target = ev.target;
 
     switch ( target.id ) {
-    case 'displayTextSizeNormal':
-    case 'displayTextSizeLarge':
-        changeUserSettings('displayTextSize', target.value);
+    case 'displayTextSize':
+        changeUserSettings('displayTextSize', target.value + 'px');
         break;
     case 'clearBrowserCache':
     case 'cloudStorageEnabled':
@@ -172,9 +171,8 @@ vAPI.messaging.send(
             }
         });
 
-        uDom('input[name="displayTextSize"]').forEach(function(elem) {
-            elem.prop('checked', elem.val() === userSettings.displayTextSize);
-        });
+        uDom.nodeFromId('displayTextSize').value =
+            parseInt(userSettings.displayTextSize, 10) || 14;
 
         uDom.nodeFromId('popupScopeLevel').value = userSettings.popupScopeLevel;
         uDom.nodeFromId('deleteUnusedSessionCookiesAfter').value =
diff --git a/src/js/start.js b/src/js/start.js
index d19cc62..b4aadf7 100644
--- a/src/js/start.js
+++ b/src/js/start.js
@@ -163,18 +163,6 @@ var onTabsReady = function(tabs) {
 };
 
 var onUserSettingsLoaded = function() {
-    // Version 0.9.0.0
-    // Remove obsolete user settings which may have been loaded.
-    // These are now stored as local settings:
-    delete µm.userSettings.popupCollapseDomains;
-    delete µm.userSettings.popupCollapseSpecificDomains;
-    delete µm.userSettings.popupHideBlacklisted;
-    // These do not exist anymore:
-    delete µm.smartAutoReload;
-    delete µm.userSettings.statsFilters;
-    delete µm.userSettings.subframeColor;
-    delete µm.userSettings.subframeOpacity;
-
     µm.loadHostsFiles();
 };
 
diff --git a/src/popup.html b/src/popup.html
index 8b085dc..457a9e7 100644
--- a/src/popup.html
+++ b/src/popup.html
@@ -23,20 +23,9 @@
     <div id="toolbarContainer">
         <div class="toolbar">
             <span class="scope" id="specificScope"><span>&nbsp;</span></span><!--
-         --><span class="scope" id="globalScope" data-scope="*">&#x2217;</span>
+         --><span class="scope" id="globalScope" data-scope="*"><span><span>&#x2217;</span></span></span>
             <button id="mtxSwitch_matrix-off" type="button" class="fa scopeRel tip-anchor-left" data-i18n-tip="matrixMtxButtonTip">&#xf011;<span class="badge"></span></button>
-            <div style="display:inline-block; position:relative; vertical-align:top;">
-                <button id="buttonMtxSwitches" type="button" class="dropdown-menu-button fa scopeRel" tabindex="-1">&#xf142;<span class="badge"></span></button>
-                <div class="dropdown-menu">
-                    <ul id="mtxSwitches">
-                        <li id="mtxSwitch_referrer-spoof" class="dropdown-menu-entry" data-i18n="matrixSwitchReferrerSpoof">
-                        <li id="mtxSwitch_https-strict" class="dropdown-menu-entry" data-i18n="matrixSwitchNoMixedContent">
-                        <li id="mtxSwitch_noscript-spoof" class="dropdown-menu-entry" data-i18n="matrixSwitchNoscriptSpoof">
-                    </ul>
-                </div>
-                <div class="dropdown-menu-capture"></div>
-            </div>
-
+            <button id="buttonMtxSwitches" type="button" class="fa scopeRel" tabindex="-1" data-dropdown-menu="dropDownMenuSwitches">&#xf142;<span class="badge"></span></button>
             <button id="buttonPersist" type="button" class="fa scopeRel tip-anchor-left" data-i18n-tip="matrixPersistButtonTip">&#xf023;<span class="badge"></span></button>
             <button id="buttonRevertScope" type="button" class="fa scopeRel tip-anchor-left" tabindex="-1" data-i18n-tip="matrixRevertButtonTip">&#xf12d;</button>
             <button id="buttonReload" type="button" class="fa tip-anchor-left" data-i18n-tip="matrixReloadButton">&#xf021;</button>
@@ -78,6 +67,16 @@
     <div id="noNetTrafficPrompt" style="display:none;text-align:center;font-size:large"></div>
 </div>
 
+<div id="dropDownMenuSwitches" class="dropdown-menu-capture">
+    <div class="dropdown-menu">
+        <ul id="mtxSwitches">
+            <li id="mtxSwitch_https-strict" class="dropdown-menu-entry"><span data-i18n="matrixSwitchNoMixedContent"></span>&emsp;<a class="fa" href="https://developer.mozilla.org/docs/Web/Security/Mixed_content" target="_blank">&#xf05a</a>
+            <li id="mtxSwitch_referrer-spoof" class="dropdown-menu-entry"><span data-i18n="matrixSwitchReferrerSpoof"></span>&emsp;<a class="fa" href="https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer" target="_blank">&#xf05a</a>
+            <li id="mtxSwitch_noscript-spoof" class="dropdown-menu-entry"><span data-i18n="matrixSwitchNoscriptSpoof"></span>&emsp;<a class="fa" href="https://developer.mozilla.org/docs/Web/HTML/Element/noscript" target="_blank">&#xf05a</a>
+        </ul>
+    </div>
+</div>
+
 <div id="noTabFound"></div>
 
 <!-- Convenient to auto-fetch locale strings used in scripts -->
diff --git a/src/settings.html b/src/settings.html
index f162596..02b4fe7 100644
--- a/src/settings.html
+++ b/src/settings.html
@@ -48,9 +48,7 @@ ul > li.separator {
 </ul>
 <h2 data-i18n="settingsMatrixDisplayHeader"></h2>
 <ul>
-    <li><span data-i18n="settingsMatrixDisplayTextSizePrompt"></span>
-    <input type="radio" name="displayTextSize" id="displayTextSizeNormal" value="13px"><label data-i18n="settingsMatrixDisplayTextSizeNormal" for="displayTextSizeNormal"></label>
-    <input type="radio" name="displayTextSize" id="displayTextSizeLarge" value="16px"><label data-i18n="settingsMatrixDisplayTextSizeLarge" for="displayTextSizeLarge"></label>
+    <li><span data-i18n="settingsMatrixDisplayTextSizePrompt"></span>&ensp;&minus;<input id="displayTextSize" type="range" min="12" max="18" value="14" style="vertical-align: bottom;">&plus;
     <li class="separator">
     <li>
         <label data-i18n="settingsDefaultScopeLevel"></label> <select id="popupScopeLevel"><option data-i18n="settingsDefaultScopeLevel2" value="site"><option data-i18n="settingsDefaultScopeLevel1" value="domain"><option data-i18n="settingsDefaultScopeLevel0" value="*"></select>