Popup related changes

platform/chromium/vapi-common.js

@@ -73,18 +73,22 @@ vAPI.download = function(details) {
 
 /******************************************************************************/
 
-vAPI.getURL = function(path) {
-    return chrome.runtime.getURL(path);
-};
+vAPI.getURL = chrome.runtime.getURL;
 
-vAPI.i18n = function(s) {
-    return chrome.i18n.getMessage(s);
-};
+/******************************************************************************/
+
+vAPI.i18n = chrome.i18n.getMessage;
 
 setScriptDirection(vAPI.i18n('@@ui_locale'));
 
 /******************************************************************************/
 
+vAPI.closePopup = function() {
+    window.open('','_self').close();
+};
+
+/******************************************************************************/
+
 })();
 
 /******************************************************************************/

platform/firefox/vapi-background.js

@@ -432,14 +432,14 @@ vAPI.tabs.get = function(tabId, callback) {
 /******************************************************************************/
 
 vAPI.tabs.getAll = function(window) {
-    var tabs = [];
+    var win, tab, tabs = [];
 
-    for (var win of this.getWindows()) {
+    for (win of this.getWindows()) {
         if (window && window !== win) {
             continue;
         }
 
-        for (var tab of win.gBrowser.tabs) {
+        for (tab of win.gBrowser.tabs) {
             tabs.push(tab);
         }
     }
@@ -643,8 +643,23 @@ vAPI.toolbarButton.init = function() {
         }
     });
 
+    this.closePopup = function({target}) {
+        CustomizableUI.hidePanelForNode(
+            target.ownerDocument.getElementById(vAPI.toolbarButton.panelId)
+        );
+    };
+
+    vAPI.messaging.globalMessageManager.addMessageListener(
+        location.host + ':closePopup',
+        this.closePopup
+    );
+
     vAPI.unload.push(function() {
         CustomizableUI.destroyWidget(vAPI.toolbarButton.widgetId);
+        vAPI.messaging.globalMessageManager.addMessageListener(
+            location.host + ':closePopup',
+            vAPI.toolbarButton.closePopup
+        );
     });
 };
 
@@ -763,19 +778,19 @@ vAPI.messaging.listen = function(listenerName, callback) {
 
 /******************************************************************************/
 
-vAPI.messaging.onMessage = function(request) {
-    var messageManager = request.target.messageManager;
+vAPI.messaging.onMessage = function({target, data}) {
+    var messageManager = target.messageManager;
 
     if (!messageManager) {
         // Message came from a popup, and its message manager is not usable.
         // So instead we broadcast to the parent window.
-        messageManager = request.target
+        messageManager = target
             .webNavigation.QueryInterface(Ci.nsIDocShell)
             .chromeEventHandler.ownerDocument.defaultView.messageManager;
     }
 
-    var listenerId = request.data.portName.split('|');
-    var requestId = request.data.requestId;
+    var listenerId = data.portName.split('|');
+    var requestId = data.requestId;
     var portName = listenerId[1];
     listenerId = listenerId[0];
 
@@ -799,7 +814,7 @@ vAPI.messaging.onMessage = function(request) {
 
     var sender = {
         tab: {
-            id: vAPI.tabs.getTabId(request.target)
+            id: vAPI.tabs.getTabId(target)
         }
     };
 
@@ -807,19 +822,19 @@ vAPI.messaging.onMessage = function(request) {
     var r = vAPI.messaging.UNHANDLED;
     var listener = vAPI.messaging.listeners[portName];
     if ( typeof listener === 'function' ) {
-        r = listener(request.data.msg, sender, callback);
+        r = listener(data.msg, sender, callback);
     }
     if ( r !== vAPI.messaging.UNHANDLED ) {
         return;
     }
 
     // Default handler
-    r = vAPI.messaging.defaultHandler(request.data.msg, sender, callback);
+    r = vAPI.messaging.defaultHandler(data.msg, sender, callback);
     if ( r !== vAPI.messaging.UNHANDLED ) {
         return;
     }
 
-    console.error('µBlock> messaging > unknown request: %o', request.data);
+    console.error('µBlock> messaging > unknown request: %o', data);
 
     // Unhandled:
     // Need to callback anyways in case caller expected an answer, or
@@ -883,11 +898,11 @@ var httpObserver = {
         parentFrameId: null
     },
     observe: function(httpChannel, topic) {
+        // if this check is performed, it doesn't need to be QueryInterfaced?
         if (!(httpChannel instanceof Ci.nsIHttpChannel)) {
             return;
         }
 
-        httpChannel = httpChannel.QueryInterface(Ci.nsIHttpChannel);
         var URI = httpChannel.URI, tabId, result;
 
         // the first distinct character
@@ -912,10 +927,10 @@ var httpObserver = {
                 return;
             }
 
-            var header = 'Content-Security-Policy';
+            var CSPHeader = 'Content-Security-Policy';
 
             try {
-                result = httpChannel.getResponseHeader(header);
+                result = httpChannel.getResponseHeader(CSPHeader);
             } catch (ex) {
                 result = null;
             }
@@ -924,12 +939,12 @@ var httpObserver = {
                 url: URI.spec,
                 tabId: tabId,
                 parentFrameId: -1,
-                responseHeaders: result ? [{name: header, value: result}] : []
+                responseHeaders: result ? [{name: CSPHeader, value: result}] : []
             });
 
             if (result) {
                 httpChannel.setResponseHeader(
-                    header,
+                    CSPHeader,
                     result.responseHeaders[0].value,
                     true
                 );

platform/firefox/vapi-common.js

@@ -19,6 +19,8 @@
     Home: https://github.com/gorhill/uBlock
 */
 
+/* global sendAsyncMessage */
+
 // For background page or non-background pages
 
 /******************************************************************************/
@@ -92,6 +94,12 @@ setScriptDirection(navigator.language);
 
 /******************************************************************************/
 
+vAPI.closePopup = function() {
+    sendAsyncMessage(location.host + ':closePopup');
+};
+
+/******************************************************************************/
+
 })();
 
 /******************************************************************************/

platform/safari/vapi-background.js

@@ -408,19 +408,6 @@ safari.application.addEventListener('close', function(e) {
 
 // update badge when tab is activated
 safari.application.addEventListener('activate', function(e) {
-    // hide popover, since in some cases won't close by itself
-    var items = safari.extension.toolbarItems;
-
-    for (var i = 0; i < items.length; ++i) {
-        if (items[i].browserWindow === safari.application.activeBrowserWindow) {
-            if (items[i].popover) {
-                items[i].popover.hide();
-            }
-
-            break;
-        }
-    }
-
     // ignore windows
     if (!(e.target instanceof SafariBrowserTab)) {
         return;

platform/safari/vapi-common.js

@@ -106,6 +106,23 @@ vAPI.i18n = function(s) {
 
 /******************************************************************************/
 
+vAPI.closePopup = function() {
+    var safr = safari.extension.globalPage.contentWindow.safari;
+    var items = safr.extension.toolbarItems;
+
+    for (var i = 0; i < items.length; i++) {
+        if (items[i].browserWindow !== safr.application.activeBrowserWindow) {
+            continue;
+        }
+
+        if (items[i].popover && items[i].popover.visible) {
+            items[i].popover.hide();
+        }
+    }
+};
+
+/******************************************************************************/
+
 })();
 
 /******************************************************************************/

src/css/common.css

@@ -35,8 +35,13 @@ body:not(.advancedUser) [data-tip]:hover:after {
     top: 110%;
     white-space: pre-line;
     z-index: 20;
-    animation: tooltip 0.8s;
-    -webkit-animation: tooltip 0.8s;
+    pointer-events: none;
+    opacity: 0;
+    }
+[data-tip]:hover::after {
+    opacity: 1;
+    -webkit-transition: opacity 0.2s 0.2s;
+    transition: opacity 0.2s 0.2s;
     }
 body[dir=rtl] [data-tip]:hover:after {
     text-align: right;
@@ -55,17 +60,6 @@ body[dir=rtl] [data-tip][data-tip-anchor="top"]:hover:after {
     right: -500%;
     }
 
-@keyframes tooltip {
-      0% { opacity: 0; }
-     85% { opacity: 0; }
-    100% { opacity: 1; }
-    }
-@-webkit-keyframes tooltip {
-      0% { opacity: 0; }
-     85% { opacity: 0; }
-    100% { opacity: 1; }
-    }
-
 .hiddenFileInput {
     visibility: hidden;
     width: 0;

src/css/popup.css

@@ -20,9 +20,20 @@ a {
     color: inherit;
     text-decoration: none;
     }
-*:focus {
+:focus {
     outline: 0;
     }
+#gotoPrefs {
+    display: block;
+    margin: 0;
+    border: 0;
+    padding: 4px;
+    color: white;
+    font-weight: bold;
+    background-color: #444;
+    text-align: center;
+    cursor: pointer;
+    }
 #version {
     font-size: 11px;
     font-weight: normal;
@@ -202,7 +213,7 @@ body.dirty #refresh:hover {
     border-left: 1px solid white;
     color: #444;
     cursor: pointer;
-    text-align: center;    
+    text-align: center;
     width: 15%;
     }
 #dynamicFilteringContainer > div.isDomain > span:nth-of-type(1) {

src/js/element-picker.js

@@ -986,9 +986,6 @@ var startPicker = function(details) {
 
 localMessager.send({ what: 'elementPickerArguments' }, startPicker);
 
-// This triggers the hiding of the popover in Safari
-window.focus();
-
 /******************************************************************************/
 
 // https://www.youtube.com/watch?v=sociXdKnyr8

src/js/popup.js

@@ -64,7 +64,7 @@ var cachePopupData = function(data) {
 
     if ( typeof data !== 'object' ) {
         return popupData;
-    } 
+    }
     popupData = data;
     scopeToSrcHostnameMap['.'] = popupData.pageHostname || '';
     var hostnameDict = popupData.hostnameDict;
@@ -163,8 +163,8 @@ var addDynamicFilterRow = function(des) {
 
     // Hacky? I couldn't figure a CSS recipe for this problem.
     // I do not want the left pane -- optional and hidden by defaut -- to
-    // 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 
+    // 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 larger than what is available.
     if ( popupHeight === undefined ) {
         popupHeight = uDom('#panes > div:nth-of-type(1)').nodeAt(0).offsetHeight;
@@ -310,6 +310,7 @@ var renderPopup = function() {
     // Conditions for request log:
     // - `http` or `https` scheme
     uDom('#gotoLog').toggleClass('enabled', isHTTP);
+    uDom('#gotoLog').attr('href', 'devtools.html?tabId=' + popupData.tabId);
 
     // Conditions for element picker:
     // - `http` or `https` scheme
@@ -381,44 +382,19 @@ var toggleNetFilteringSwitch = function(ev) {
 
 /******************************************************************************/
 
-var gotoDashboard = function() {
-    messager.send({
-        what: 'gotoURL',
-        details: {
-            url: 'dashboard.html',
-            select: true,
-            index: -1
-        }
-    });
-};
-
-/******************************************************************************/
-
-var gotoDevTools = function() {
-    messager.send({
-        what: 'gotoURL',
-        details: {
-            url: 'devtools.html?tabId=' + popupData.tabId,
-            select: true,
-            index: -1
-        }
-    });
-};
-
-/******************************************************************************/
-
 var gotoPick = function() {
     messager.send({
         what: 'gotoPick',
         tabId: popupData.tabId
     });
-    window.open('','_self').close();
+
+    vAPI.closePopup();
 };
 
 /******************************************************************************/
 
-var gotoLink = function(ev) {
-    if (!ev.target.href) {
+var gotoURL = function(ev) {
+    if (!this.hasAttribute('href')) {
         return;
     }
 
@@ -427,11 +403,13 @@ var gotoLink = function(ev) {
     messager.send({
         what: 'gotoURL',
         details: {
-            url: ev.target.href,
+            url: this.getAttribute('href'),
             select: true,
             index: -1
         }
     });
+
+    vAPI.closePopup();
 };
 
 /******************************************************************************/
@@ -546,14 +524,14 @@ var reloadTab = function() {
 // from the main extension process to a specific auxiliary extension process:
 //
 // - broadcasting() is not an option given there could be a lot of tabs opened,
-//   and maybe even many frames within these tabs, i.e. unacceptable overhead 
+//   and maybe even many frames within these tabs, i.e. unacceptable overhead
 //   regardless of whether the popup is opened or not.
 //
 // - Modifying the messaging API is not an option, as this would require
 //   revisiting all platform-specific code to support targeted broadcasting,
 //   which who knows could be not so trivial for some platforms.
 //
-// A well done polling is a better anyways IMO, I prefer that data is pulled 
+// A well done polling is a better anyways IMO, I prefer that data is pulled
 // on demand rather than forcing the main process to assume a client may need
 // it and thus having to push it all the time unconditionally.
 
@@ -608,11 +586,9 @@ var getPopupData = function() {
 
 uDom.onLoad(function() {
     getPopupData();
-    uDom('h1,h2,h3,h4').on('click', gotoDashboard);
     uDom('#switch').on('click', toggleNetFilteringSwitch);
-    uDom('#gotoLog').on('click', gotoDevTools);
     uDom('#gotoPick').on('click', gotoPick);
-    uDom('a[href^=http]').on('click', gotoLink);
+    uDom('a[href]').on('click', gotoURL);
     uDom('#dfToggler').on('click', toggleDynamicFiltering);
     uDom('#refresh').on('click', reloadTab);
 });

src/popup.html

@@ -9,7 +9,7 @@
 </head>
 
 <body>
-<h4 title="popupTipDashboard"><span id="appname"></span><span id="version"></span></h4>
+<a href="dashboard.html" target="_blank" id="gotoPrefs" title="popupTipDashboard"><span id="appname"></span><span id="version"></span></a>
 <div id="panes">
     <div>
         <p id="switch" data-i18n-tip="popupPowerSwitchInfo"><span class="fa">&#xf011;</span></p>
@@ -18,7 +18,7 @@
         <p class="stats">
             <span data-i18n="popupBlockedOnThisPagePrompt"></span>&ensp;
             <span id="gotoPick" class="fa tool" data-i18n-tip="popupTipPicker" data-tip-anchor="top">&#xf1fb;</span>&ensp;
-            <span id="gotoLog" class="fa tool" data-i18n-tip="popupTipLog" data-tip-anchor="top">&#xf06e;</span>
+            <a href="#" target="_blank" id="gotoLog" class="fa tool" data-i18n-tip="popupTipLog" data-tip-anchor="top">&#xf06e;</a>
             </p>
         <p id="page-blocked">?</p>
         <p class="stats" data-i18n="popupBlockedSinceInstallPrompt"></p>