hopefully this fixes #111

Author: gorhill

css/popup.css

@@ -57,7 +57,7 @@ body {
     border: 0;
     padding: 3px 0 0 0;
     position: absolute;
-    z-index: 20;
+    z-index: 1000;
     font-size: 110%;
     display: none;
     }
@@ -92,10 +92,27 @@ body {
     font-size: 110%;
     color: #aaa;
     }
-.dropdown-menu-button ~ .dropdown-menu {
+.dropdown-menu {
+    display: none;
+    }
+.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: 900;
     }
-.dropdown-menu-button:focus ~ .dropdown-menu {
+.dropdown-menu-capture.show {
     display: block;
     }
 

js/popup.js

@@ -1425,6 +1425,18 @@ function gotoExternalURL() {
 
 /******************************************************************************/
 
+function dropDownMenuShow() {
+    $('.dropdown-menu-capture').addClass('show');
+    $(this).next('.dropdown-menu').addClass('show');
+}
+
+function dropDownMenuHide() {
+    $('.dropdown-menu-capture').removeClass('show');
+    $('.dropdown-menu').removeClass('show');
+}
+
+/******************************************************************************/
+
 // make menu only when popup html is fully loaded
 
 function initAll() {
@@ -1467,9 +1479,9 @@ function initAll() {
         .on('mouseenter', '.matCell', mouseenterMatrixCellHandler)
         .on('mouseleave', '.matCell', mouseleaveMatrixCellHandler);
     $('#buttonPersist').on('click', persistScope);
-    $('#scopeKeyGlobal').on('mousedown', createGlobalScope);
-    $('#scopeKeyDomain').on('mousedown', createDomainScope);
-    $('#scopeKeySite').on('mousedown', createSiteScope);
+    $('#scopeKeyGlobal').on('click', createGlobalScope);
+    $('#scopeKeyDomain').on('click', createDomainScope);
+    $('#scopeKeySite').on('click', createSiteScope);
     $('#buttonReload').on('click', forceReload);
     $('#buttonRevert')
         .on('mouseenter', function() { showMessage(chrome.i18n.getMessage('matrixRevert')); })
@@ -1478,9 +1490,13 @@ function initAll() {
     $('#buttonRuleManager span').text(chrome.i18n.getMessage('ruleManagerPageName'));
     $('#buttonInfo span').text(chrome.i18n.getMessage('statsPageName'));
     $('#buttonSettings span').text(chrome.i18n.getMessage('settingsPageName'));
-    $('.extensionURL').on('mousedown', gotoExtensionURL);
-    $('.externalURL').on('mousedown', gotoExternalURL);
-    $('#buttonPower').on('mousedown', togglePower);
+    $('.extensionURL').on('click', gotoExtensionURL);
+    $('.externalURL').on('click', gotoExternalURL);
+    $('#buttonPower').on('click', togglePower);
+
+    $('body').on('click', '.dropdown-menu-button', dropDownMenuShow);
+    $('body').on('click', '.dropdown-menu-capture', dropDownMenuHide);
+
     $('#matList').on('click', '.g3Meta', function() {
         var separator = $(this);
         separator.toggleClass('g3Collapsed');

manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 2,
     "name": "__MSG_extName__",
-    "version": "0.7.3.0",
+    "version": "0.7.3.1",
     "description": "__MSG_extShortDesc__",
     "icons": {
         "16": "icon_16.png",

popup.html

@@ -30,6 +30,7 @@
                 <li id="buttonPower" class="dropdown-menu-entry"><i class="fa">&#xf011;</i><span>On/off</span></li>
             </ul>
         </div>
+        <div class="dropdown-menu-capture"></div>
         <!-- <div id="message"></div> -->
     </div>
 
@@ -42,7 +43,8 @@
                 <li id="scopeKeySite" class="dropdown-menu-entry">
             </ul>
         </div>
-    </div>
+        <div class="dropdown-menu-capture"></div>
+     </div>
 
     <div class="toolbar">
         <button id="buttonPersist" type="button" class="fa">&#xf023;</button>