fine tune various UI aspects

- more choices of matrix text size - more accurate wording for matrix switches - info links for various matrix switches
7 years ago · 157045924b
8 changed files with 100 additions and 108 deletions
--- 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" : {
--- 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;
--- 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,
--- 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) {
--- 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 =
--- 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();
 };

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