re-worked popup UI to access dashboard from title bar (like uBlock)

src/css/popup.css

@@ -13,15 +13,18 @@ body {
 *:focus {
     outline: none;
     }
+a {
+    color: inherit;
+    text-decoration: none;
+    }
 
 .paneHead {
+    background-color: white;
+    left:0;
     padding: 0;
     position: fixed;
-    top: 0;
-    height: 5.5em;
-    left:0;
     right: 0;
-    background-color: white;
+    top: 0;
     z-index: 10;
     }
 .paneContent {
@@ -29,16 +32,35 @@ body {
     }
 
 
-.toolbar {
+.paneHead > a:first-child {
+    background-color: #444;
+    border: 0;
+    border-bottom: 1px solid white;
+    color: #bbb;
+    cursor: pointer;
+    display: block;
+    font-family: sans-serif;
+    line-height: 12px;
     margin: 0;
+    padding: 02px 0;
+    text-align: center;
+    }
+#version {
+    font-size: 10px;
+    font-weight: normal;
+    }
+
+.toolbar {
     border: 0;
-    padding: 0;
-    padding-bottom: 0.25em;
     display: inline-block;
-    white-space: nowrap;
+    margin: 0;
+    padding: 0;
+    position: relative;
     vertical-align: top;
+    white-space: nowrap;
+    }
+.toolbar.alignRight {
     position: absolute;
-    top: 0;
     }
 
 body[dir="ltr"] .toolbar.alignLeft,
@@ -108,22 +130,6 @@ body[dir="rtl"] #mtxSwitches > li:before {
     content: '\f205';
     }
 
-#extras + .dropdown-menu .dropdown-menu-entry:before {
-    font: 110% FontAwesome;
-    } 
-body[dir="ltr"] #extras + .dropdown-menu .dropdown-menu-entry:before {
-    padding-right: 0.5em;
-    } 
-body[dir="rtl"] #extras + .dropdown-menu .dropdown-menu-entry:before {
-    padding-left: 0.5em;
-    } 
-#buttonRevertAll:before {
-    content: '\f122';
-    }
-[data-i18n="matrixDashboardMenuEntry"]:before {
-    content: '\f085';
-    }
-
 .dropdown-menu {
     margin: 0;
     border: 0;
@@ -306,17 +312,13 @@ body.tScopeSite #scopeCell {
     padding: 6px 1px 3px 1px;
     display: inline-block;
     box-sizing: content-box;
-    width: 2.4em;
+    width: 2.6em;
     white-space: nowrap;
     text-align: center;
     line-height: 110%;
     position: relative;
     }
 
-.paneHead #matHead {
-    position: absolute;
-    bottom: 3px;
-    }
 .paneHead .matCell:nth-child(2) {
     letter-spacing: -0.3px;
     }

src/js/messaging.js

@@ -141,6 +141,7 @@ RowSnapshot.counts = (function() {
 var matrixSnapshot = function(pageStore, details) {
     var µmuser = µm.userSettings;
     var r = {
+        appVersion: vAPI.app.version,
         blockedCount: pageStore.requestStats.blocked.all,
         diff: [],
         domain: pageStore.pageDomain,

src/js/popup.js

@@ -951,6 +951,13 @@ var makeMenu = function() {
 
     renderMatrixHeaderRow();
 
+    // Manually adjust the position of the main matrix according to the height
+    // of the toolbar/matrix header.
+    document.querySelector('.paneContent').style.setProperty(
+        'padding-top',
+        document.querySelector('.paneHead').clientHeight + 'px'
+    );
+
     startMatrixUpdate();
     makeMatrixGroup0(groupStats[0]);
     makeMatrixGroup1(groupStats[1]);
@@ -970,6 +977,7 @@ var makeMenu = function() {
 function initMenuEnvironment() {
     uDom('body').css('font-size', getUserSetting('displayTextSize'));
     uDom('body').toggleClass('colorblind', getUserSetting('colorBlindFriendly') === true);
+    uDom('#version').text(matrixSnapshot.appVersion || '');
 
     var prettyNames = matrixHeaderPrettyNames;
     var keys = Object.keys(prettyNames);

src/popup.html

@@ -18,6 +18,7 @@
 </div>
 
 <div class="paneHead">
+    <a class="extensionURL" href="#" data-extension-url="dashboard.html" title="popupTipDashboard">uMatrix <span id="version"> </span></a>
     <div id="toolbarLeft" class="toolbar alignLeft">
         <button id="scopeCell" class="dropdown-menu-button" tabindex="-1"></button>
         <div class="dropdown-menu">
@@ -46,17 +47,9 @@
         <button id="buttonReload" type="button" class="fa tip-anchor-left" data-i18n-tip="matrixReloadButton">&#xf021;</button>
     </div>
 
-    <!-- Yandex: float works correctly only if it is the first child -->
     <div class="toolbar alignRight">
+        <button id="buttonRevertAll" class="fa tip-anchor-right" data-i18n-tip="matrixRevertAllEntry">&#xf122;</button>
         <button type="button" class="fa extensionURL tip-anchor-right" data-extension-url="logger-ui.html" data-i18n-tip="matrixLoggerMenuEntry">&#xf022;</button>
-        <button type="button" id="extras" class="dropdown-menu-button fa tip-anchor-right">&#xf067;</button>
-        <div class="dropdown-menu">
-            <ul>
-                <li id="buttonRevertAll" class="dropdown-menu-entry" data-i18n="matrixRevertAllEntry">
-                <li class="dropdown-menu-entry extensionURL" data-extension-url="dashboard.html" data-i18n="matrixDashboardMenuEntry">
-            </ul>
-        </div>
-        <div class="dropdown-menu-capture"></div>
     </div>
 
     <div id="matHead" class="matrix collapsible">