Initial UI support for Fennec

platform/firefox/bootstrap.js

@@ -44,6 +44,25 @@ const restartListener = {
     }
 };
 
+const optionsObserver = {
+    observe: function (aSubject, aTopic, aData) {
+        if (aTopic === "addon-options-displayed" && aData === "{2b10c1c8-a11f-4bad-fe9c-1c11e82cac42}") {
+            var doc = aSubject;
+            setupOptionsButton(doc, "showDashboardButton", "dashboard.html");
+            setupOptionsButton(doc, "showNetworkLogButton", "devtools.html");
+        }
+    }
+};
+
+function setupOptionsButton(doc, id, page) {
+    var vAPI = bgProcess.contentWindow.vAPI;
+    var button = doc.getElementById(id);
+    button.addEventListener("command", function () {
+        vAPI.tabs.open({ url: vAPI.getURL(page), index: -1 });
+    });
+    button.label = vAPI.i18n(id);
+}
+
 /******************************************************************************/
 
 function startup(data, reason) {
@@ -74,7 +93,11 @@ function startup(data, reason) {
         );
     };
 
-    if ( reason !== APP_STARTUP ) {
+    let obs = Components.classes['@mozilla.org/observer-service;1']
+        .getService(Components.interfaces.nsIObserverService);
+    obs.addObserver(optionsObserver, "addon-options-displayed", false);
+
+    if (reason !== APP_STARTUP) {
         onReady();
         return;
     }
@@ -118,6 +141,10 @@ function shutdown(data, reason) {
         hostName + '-restart',
         restartListener
     );
+
+    let obs = Components.classes['@mozilla.org/observer-service;1']
+        .getService(Components.interfaces.nsIObserverService);
+    obs.removeObserver(optionsObserver, "addon-options-displayed");
 }
 
 /******************************************************************************/

platform/firefox/install.rdf

@@ -10,8 +10,7 @@
         <type>2</type>
         <bootstrap>true</bootstrap>
         <multiprocessCompatible>true</multiprocessCompatible>
-        <optionsType>3</optionsType>
+        <optionsType>2</optionsType>
-        <optionsURL>chrome://ublock/content/dashboard.html</optionsURL>
 {localized}
 
         <!-- Firefox -->

platform/firefox/vapi-background.js

@@ -269,17 +269,20 @@ var windowWatcher = {
             return;
         }
 
-        if ( tabBrowser.tabContainer ) {
+        if ( tabBrowser.deck ) {
+            // Fennec
+            tabContainer = tabBrowser.deck;
+        } else if ( tabBrowser.tabContainer ) {
             // desktop Firefox
             tabContainer = tabBrowser.tabContainer;
             tabBrowser.addTabsProgressListener(tabWatcher);
+            vAPI.contextMenu.register(this.document);
         } else {
             return;
         }
 
         tabContainer.addEventListener('TabClose', tabWatcher.onTabClose);
         tabContainer.addEventListener('TabSelect', tabWatcher.onTabSelect);
-        vAPI.contextMenu.register(this.document);
 
         // when new window is opened TabSelect doesn't run on the selected tab?
     },
@@ -417,7 +420,10 @@ vAPI.tabs.registerListeners = function() {
                 continue;
             }
 
-            if ( tabBrowser.tabContainer ) {
+            if ( tabBrowser.deck ) {
+                // Fennec
+                tabContainer = tabBrowser.deck;
+            } else if ( tabBrowser.tabContainer ) {
                 tabContainer = tabBrowser.tabContainer;
                 tabBrowser.removeTabsProgressListener(tabWatcher);
             }
@@ -740,6 +746,24 @@ vAPI.tabs.reload = function(tabId) {
 
 /******************************************************************************/
 
+vAPI.tabs.select = function(tabId) {
+    var tab = this.get(tabId);
+
+    if ( !tab ) {
+        return;
+    }
+
+    var tabBrowser = getTabBrowser(getOwnerWindow(tab));
+
+    if (vAPI.fennec) {
+        tabBrowser.selectTab(tab);
+    } else {
+        tabBrowser.selectedTab = tab;
+    }
+};
+
+/******************************************************************************/
+
 vAPI.tabs.injectScript = function(tabId, details, callback) {
     var tab = this.get(tabId);
 
@@ -752,7 +776,7 @@ vAPI.tabs.injectScript = function(tabId, details, callback) {
     }
 
     details.file = vAPI.getURL(details.file);
-    tab.linkedBrowser.messageManager.sendAsyncMessage(
+    getBrowserForTab(tab).messageManager.sendAsyncMessage(
         location.host + ':broadcast',
         JSON.stringify({
             broadcast: true,
@@ -790,23 +814,7 @@ vAPI.setIcon = function(tabId, iconStatus, badge) {
         return;
     }
 
-    var button = win.document.getElementById(tb.id);
+    tb.updateState(win, tabId);
-
-    if ( !button ) {
-        return;
-    }
-
-    var icon = tb.tabs[tabId];
-    button.setAttribute('badge', icon && icon.badge || '');
-
-    if ( !icon || !icon.img ) {
-        icon = '';
-    }
-    else {
-        icon = 'url(' + vAPI.getURL('img/browsericons/icon16.svg') + ')';
-    }
-
-    button.style.listStyleImage = icon;
 };
 
 /******************************************************************************/
@@ -995,6 +1003,7 @@ var httpObserver = {
     classDescription: 'net-channel-event-sinks for ' + location.host,
     classID: Components.ID('{dc8d6319-5f6e-4438-999e-53722db99e84}'),
     contractID: '@' + location.host + '/net-channel-event-sinks;1',
+    REQDATAKEY: location.host + 'reqdata',
     ABORT: Components.results.NS_BINDING_ABORTED,
     ACCEPT: Components.results.NS_SUCCEEDED,
     // Request types: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIContentPolicy#Constants
@@ -1141,9 +1150,6 @@ var httpObserver = {
             return;
         }
         
-        var reqDataKey = location.host + 'reqdata';
-        
-
         var URI = channel.URI;
         var channelData, result;
 
@@ -1160,7 +1166,7 @@ var httpObserver = {
                     frameId,
                     parentFrameId
                 ]*/
-                channelData = channel.getProperty(reqDataKey);
+                channelData = channel.getProperty(this.REQDATAKEY);
             } catch (ex) {
                 return;
             }
@@ -1245,10 +1251,10 @@ var httpObserver = {
         
         if ( lastRequest.type === this.MAIN_FRAME && lastRequest.frameId === 0 ) {
             vAPI.tabs.onNavigation({
-				frameId: 0,
+                frameId: 0,
-				tabId: lastRequest.tabId,
+                tabId: lastRequest.tabId,
-				url: URI.asciiSpec
+                url: URI.asciiSpec
-			});
+            });
         }
 
         if ( this.handleRequest(channel, URI, lastRequest) ) {
@@ -1258,7 +1264,7 @@ var httpObserver = {
         // If request is not handled we may use the data in on-modify-request
         if ( channel instanceof Ci.nsIWritablePropertyBag ) {
             channel.setProperty(
-                reqDataKey,
+                this.REQDATAKEY,
                 [
                     lastRequest.type,
                     lastRequest.tabId,
@@ -1295,7 +1301,7 @@ var httpObserver = {
             // TODO: what if a behind-the-scene request is being redirected?
             // This data is present only for tabbed requests, so if this throws,
             // the redirection won't be evaluated and canceled (if necessary)
-            var channelData = oldChannel.getProperty(location.host + 'reqdata');
+            var channelData = oldChannel.getProperty(this.REQDATAKEY);
 
             if ( this.handlePopup(URI, channelData[1], channelData[2]) ) {
                 result = this.ABORT;
@@ -1316,7 +1322,7 @@ var httpObserver = {
 
             // Carry the data on in case of multiple redirects
             if ( newChannel instanceof Ci.nsIWritablePropertyBag ) {
-                newChannel.setProperty(location.host + 'reqdata', channelData);
+                newChannel.setProperty(this.REQDATAKEY, channelData);
             }
         } catch (ex) {
             // console.error(ex);
@@ -1378,212 +1384,301 @@ vAPI.toolbarButton = {
     tabs: {/*tabId: {badge: 0, img: boolean}*/}
 };
 
-/******************************************************************************/
+if (vAPI.fennec) {
+    // Menu UI
+    vAPI.toolbarButton.menuItemIds = new WeakMap();
 
-vAPI.toolbarButton.init = function() {
+    vAPI.toolbarButton.getMenuItemLabel = function(tabId) {
-    var CustomizableUI;
+        var label = this.label;
-    try {
+        if (tabId !== undefined) {
-        CustomizableUI = Cu.import('resource:///modules/CustomizableUI.jsm', null).CustomizableUI;
+            var tabDetails = this.tabs[tabId];
-    } catch (ex) {
+            if (tabDetails) {
-        return;
+                if (tabDetails.img) {
+                    if (tabDetails.badge) {
+                        label = label + " (" + tabDetails.badge + ")";
+                    }
+                } else {
+                    label = label + " (" + vAPI.i18n("fennecMenuItemBlockingOff") + ")";
+                }
+            }
+        }
+        return label;
     }
 
-    this.defaultArea = CustomizableUI.AREA_NAVBAR;
+    vAPI.toolbarButton.init = function() {
-    this.styleURI = [
+        // Only actually expecting one window under Fennec (note, not tabs, windows)
-        '#' + this.id + ' {',
+        for (var win of vAPI.tabs.getWindows()) {
-            'list-style-image: url(',
+            this.addToWindow(win, this.getMenuItemLabel());
-                vAPI.getURL('img/browsericons/icon16-off.svg'),
+        }
-            ');',
-        '}',
-        '#' + this.viewId + ', #' + this.viewId + ' > iframe {',
-            'width: 160px;',
-            'height: 290px;',
-            'overflow: hidden !important;',
-        '}'
-    ];
 
-    var platformVersion = Services.appinfo.platformVersion;
+        cleanupTasks.push(this.cleanUp);
+    }
 
-    if ( Services.vc.compare(platformVersion, '36.0') < 0 ) {
+    vAPI.toolbarButton.addToWindow = function(win, label) {
-        this.styleURI.push(
+        var id = win.NativeWindow.menu.add({
-            '#' + this.id + '[badge]:not([badge=""])::after {',
+            name: label,
-                'position: absolute;',
+            callback: this.onClick
-                'margin-left: -16px;',
+        });
-                'margin-top: 3px;',
+        this.menuItemIds.set(win, id);
-                'padding: 1px 2px;',
+    }
-                'font-size: 9px;',
+
-                'font-weight: bold;',
+    vAPI.toolbarButton.cleanUp = function() {
-                'color: #fff;',
+        for (var win of vAPI.tabs.getWindows()) {
-                'background: #666;',
+            vAPI.toolbarButton.removeFromWindow(win);
-                'content: attr(badge);',
+        }
+    }
+
+    vAPI.toolbarButton.removeFromWindow = function(win) {
+        var id = this.menuItemIds.get(win);
+        if (id) {
+            win.NativeWindow.menu.remove(id);
+            this.menuItemIds.delete(win);
+        }
+    }
+
+    vAPI.toolbarButton.updateState = function (win, tabId) {
+        var id = this.menuItemIds.get(win);
+        if (!id) {
+            return;
+        }
+        win.NativeWindow.menu.update(id, { name: this.getMenuItemLabel(tabId) });
+    }
+
+    vAPI.toolbarButton.onClick = function() {
+        var win = Services.wm.getMostRecentWindow('navigator:browser');
+        var curTabId = vAPI.tabs.getTabId(getTabBrowser(win).selectedTab);
+        vAPI.tabs.open({ url: vAPI.getURL("popup.html?tabId=" + curTabId), index: -1, select: true });
+    }
+} else {
+    // Toolbar button UI
+
+    /******************************************************************************/
+
+    vAPI.toolbarButton.init = function() {
+        var CustomizableUI;
+        try {
+            CustomizableUI = Cu.import('resource:///modules/CustomizableUI.jsm', null).CustomizableUI;
+        } catch (ex) {
+            return;
+        }
+
+        this.defaultArea = CustomizableUI.AREA_NAVBAR;
+        this.styleURI = [
+            '#' + this.id + ' {',
+                'list-style-image: url(',
+                    vAPI.getURL('img/browsericons/icon16-off.svg'),
+                ');',
+            '}',
+            '#' + this.viewId + ', #' + this.viewId + ' > iframe {',
+                'width: 160px;',
+                'height: 290px;',
+                'overflow: hidden !important;',
             '}'
-        );
+        ];
-    } else {
-        this.CUIEvents = {};
 
-        this.CUIEvents.onCustomizeEnd = function() {
+        var platformVersion = Services.appinfo.platformVersion;
-            var wId = vAPI.toolbarButton.id;
+
-            var buttonInPanel = CustomizableUI.getWidget(wId).areaType === CustomizableUI.TYPE_MENU_PANEL;
+        if ( Services.vc.compare(platformVersion, '36.0') < 0 ) {
+            this.styleURI.push(
+                '#' + this.id + '[badge]:not([badge=""])::after {',
+                    'position: absolute;',
+                    'margin-left: -16px;',
+                    'margin-top: 3px;',
+                    'padding: 1px 2px;',
+                    'font-size: 9px;',
+                    'font-weight: bold;',
+                    'color: #fff;',
+                    'background: #666;',
+                    'content: attr(badge);',
+                '}'
+            );
+        } else {
+            this.CUIEvents = {};
+
+            this.CUIEvents.onCustomizeEnd = function() {
+                var wId = vAPI.toolbarButton.id;
+                var buttonInPanel = CustomizableUI.getWidget(wId).areaType === CustomizableUI.TYPE_MENU_PANEL;
+
+                for ( var win of vAPI.tabs.getWindows() ) {
+                    var button = win.document.getElementById(wId);
+                    if ( buttonInPanel ) {
+                        button.classList.remove('badged-button');
+                        continue;
+                    }
+                    if ( button === null ) {
+                        continue;
+                    }
+                    button.classList.add('badged-button');
+                }
 
-            for ( var win of vAPI.tabs.getWindows() ) {
-                var button = win.document.getElementById(wId);
                 if ( buttonInPanel ) {
-                    button.classList.remove('badged-button');
-                    continue;
-                }
-                if ( button === null ) {
-                    continue;
-                }
-                button.classList.add('badged-button');
-            }
-
-            if ( buttonInPanel ) {
-                return;
-            }
-
-            // Anonymous elements need some time to be reachable
-            setTimeout(this.updateBadgeStyle, 250);
-        }.bind(this.CUIEvents);
-
-        this.CUIEvents.updateBadgeStyle = function() {
-            var css = [
-                'background: #666',
-                'color: #fff'
-            ].join(';');
-
-            for ( var win of vAPI.tabs.getWindows() ) {
-                var button = win.document.getElementById(vAPI.toolbarButton.id);
-                if ( button === null ) {
-                    continue;
-                }
-                var badge = button.ownerDocument.getAnonymousElementByAttribute(
-                    button,
-                    'class',
-                    'toolbarbutton-badge'
-                );
-                if ( !badge ) {
                     return;
                 }
 
-                badge.style.cssText = css;
+                // Anonymous elements need some time to be reachable
-            }
+                setTimeout(this.updateBadgeStyle, 250);
-        };
+            }.bind(this.CUIEvents);
 
-        this.onCreated = function(button) {
+            this.CUIEvents.updateBadgeStyle = function() {
-            button.setAttribute('badge', '');
+                var css = [
-            setTimeout(this.CUIEvents.onCustomizeEnd, 250);
+                    'background: #666',
-        };
+                    'color: #fff'
+                ].join(';');
 
-        CustomizableUI.addListener(this.CUIEvents);
+                for ( var win of vAPI.tabs.getWindows() ) {
-    }
+                    var button = win.document.getElementById(vAPI.toolbarButton.id);
+                    if ( button === null ) {
+                        continue;
+                    }
+                    var badge = button.ownerDocument.getAnonymousElementByAttribute(
+                        button,
+                        'class',
+                        'toolbarbutton-badge'
+                    );
+                    if ( !badge ) {
+                        return;
+                    }
 
-    this.styleURI = Services.io.newURI(
+                    badge.style.cssText = css;
-        'data:text/css,' + encodeURIComponent(this.styleURI.join('')),
+                }
-        null,
+            };
-        null
-    );
 
-    this.closePopup = function({target}) {
+            this.onCreated = function(button) {
-        CustomizableUI.hidePanelForNode(
+                button.setAttribute('badge', '');
-            target.ownerDocument.getElementById(vAPI.toolbarButton.viewId)
+                setTimeout(this.CUIEvents.onCustomizeEnd, 250);
-        );
+            };
-    };
 
-    CustomizableUI.createWidget(this);
+            CustomizableUI.addListener(this.CUIEvents);
-    vAPI.messaging.globalMessageManager.addMessageListener(
-        location.host + ':closePopup',
-        this.closePopup
-    );
-
-    cleanupTasks.push(function() {
-        if ( this.CUIEvents ) {
-            CustomizableUI.removeListener(this.CUIEvents);
         }
 
-        CustomizableUI.destroyWidget(this.id);
+        this.styleURI = Services.io.newURI(
-        vAPI.messaging.globalMessageManager.removeMessageListener(
+            'data:text/css,' + encodeURIComponent(this.styleURI.join('')),
+            null,
+            null
+        );
+
+        this.closePopup = function({target}) {
+            CustomizableUI.hidePanelForNode(
+                target.ownerDocument.getElementById(vAPI.toolbarButton.viewId)
+            );
+        };
+
+        CustomizableUI.createWidget(this);
+        vAPI.messaging.globalMessageManager.addMessageListener(
             location.host + ':closePopup',
             this.closePopup
         );
 
-        for ( var win of vAPI.tabs.getWindows() ) {
+        cleanupTasks.push(function() {
-            var panel = win.document.getElementById(this.viewId);
+            if ( this.CUIEvents ) {
-            panel.parentNode.removeChild(panel);
+                CustomizableUI.removeListener(this.CUIEvents);
-            win.QueryInterface(Ci.nsIInterfaceRequestor)
+            }
-                .getInterface(Ci.nsIDOMWindowUtils)
-                .removeSheet(this.styleURI, 1);
-        }
-    }.bind(this));
-};
 
-/******************************************************************************/
+            CustomizableUI.destroyWidget(this.id);
+            vAPI.messaging.globalMessageManager.removeMessageListener(
+                location.host + ':closePopup',
+                this.closePopup
+            );
 
-vAPI.toolbarButton.onBeforeCreated = function(doc) {
+            for ( var win of vAPI.tabs.getWindows() ) {
-    var panel = doc.createElement('panelview');
+                var panel = win.document.getElementById(this.viewId);
-    panel.setAttribute('id', this.viewId);
+                panel.parentNode.removeChild(panel);
+                win.QueryInterface(Ci.nsIInterfaceRequestor)
+                    .getInterface(Ci.nsIDOMWindowUtils)
+                    .removeSheet(this.styleURI, 1);
+            }
+        }.bind(this));
+    };
 
-    var iframe = doc.createElement('iframe');
+    /******************************************************************************/
-    iframe.setAttribute('type', 'content');
 
-    doc.getElementById('PanelUI-multiView')
+    vAPI.toolbarButton.onBeforeCreated = function(doc) {
-        .appendChild(panel)
+        var panel = doc.createElement('panelview');
-        .appendChild(iframe);
+        panel.setAttribute('id', this.viewId);
 
-    var updateTimer = null;
+        var iframe = doc.createElement('iframe');
-    var delayedResize = function() {
+        iframe.setAttribute('type', 'content');
+
+        doc.getElementById('PanelUI-multiView')
+            .appendChild(panel)
+            .appendChild(iframe);
+
+        var updateTimer = null;
+        var delayedResize = function() {
         if ( updateTimer ) {
-            return;
+                return;
-        }
+            }
 
-        updateTimer = setTimeout(resizePopup, 10);
+            updateTimer = setTimeout(resizePopup, 10);
-    };
+        };
-    var resizePopup = function() {
+        var resizePopup = function() {
-        updateTimer = null;
+            updateTimer = null;
-        var body = iframe.contentDocument.body;
+            var body = iframe.contentDocument.body;
-        panel.parentNode.style.maxWidth = 'none';
+            panel.parentNode.style.maxWidth = 'none';
-        // https://github.com/gorhill/uBlock/issues/730
+            // https://github.com/gorhill/uBlock/issues/730
-        // Voodoo programming: this recipe works
+            // Voodoo programming: this recipe works
-        panel.style.height = iframe.style.height = body.clientHeight.toString() + 'px';
+            panel.style.height = iframe.style.height = body.clientHeight.toString() + 'px';
-        panel.style.width = iframe.style.width = body.clientWidth.toString() + 'px';
+            panel.style.width = iframe.style.width = body.clientWidth.toString() + 'px';
         if ( iframe.clientHeight !== body.clientHeight || iframe.clientWidth !== body.clientWidth ) {
-            delayedResize();
+                delayedResize();
-        }
+            }
-    };
+        };
-    var onPopupReady = function() {
+        var onPopupReady = function() {
-        var win = this.contentWindow;
+            var win = this.contentWindow;
 
         if ( !win || win.location.host !== location.host ) {
+                return;
+            }
+
+            new win.MutationObserver(delayedResize).observe(win.document.body, {
+                attributes: true,
+                characterData: true,
+                subtree: true
+            });
+
+            delayedResize();
+        };
+
+        iframe.addEventListener('load', onPopupReady, true);
+
+        doc.defaultView.QueryInterface(Ci.nsIInterfaceRequestor)
+            .getInterface(Ci.nsIDOMWindowUtils)
+            .loadSheet(this.styleURI, 1);
+    };
+
+    /******************************************************************************/
+
+    vAPI.toolbarButton.onViewShowing = function({target}) {
+        target.firstChild.setAttribute('src', vAPI.getURL('popup.html'));
+    };
+
+    /******************************************************************************/
+
+    vAPI.toolbarButton.onViewHiding = function({target}) {
+        target.parentNode.style.maxWidth = '';
+        target.firstChild.setAttribute('src', 'about:blank');
+    };
+
+    vAPI.toolbarButton.updateState = function(win, tabId) {
+        var button = win.document.getElementById(this.id);
+
+        if ( !button ) {
             return;
         }
 
-        new win.MutationObserver(delayedResize).observe(win.document.body, {
+        var icon = this.tabs[tabId];
-            attributes: true,
+        button.setAttribute('badge', icon && icon.badge || '');
-            characterData: true,
-            subtree: true
-        });
 
-        delayedResize();
+        if ( !icon || !icon.img ) {
-    };
+            icon = '';
+        }
+        else {
+            icon = 'url(' + vAPI.getURL('img/browsericons/icon16.svg') + ')';
+        }
 
-    iframe.addEventListener('load', onPopupReady, true);
+        button.style.listStyleImage = icon;
-
+    }
-    doc.defaultView.QueryInterface(Ci.nsIInterfaceRequestor)
+}
-        .getInterface(Ci.nsIDOMWindowUtils)
-        .loadSheet(this.styleURI, 1);
-};
-
-/******************************************************************************/
-
-vAPI.toolbarButton.onViewShowing = function({target}) {
-    target.firstChild.setAttribute('src', vAPI.getURL('popup.html'));
-};
-
-/******************************************************************************/
-
-vAPI.toolbarButton.onViewHiding = function({target}) {
-    target.parentNode.style.maxWidth = '';
-    target.firstChild.setAttribute('src', 'about:blank');
-};
 
 /******************************************************************************/
 

src/_locales/en/messages.json

@@ -499,6 +499,18 @@
     "message":"Unable to connect to {{url}}",
     "description":"English: Network error: unable to connect to {{url}}"
   },
+  "showDashboardButton":{
+    "message":"Show Dashboard",
+    "description":"English: Show Dashboard"
+  },
+  "showNetworkLogButton":{
+    "message":"Show Network Request Log",
+    "description":"English: Show Network Request Log"
+  },
+  "fennecMenuItemBlockingOff": {
+    "message": "off",
+    "description": "Appears as µBlock (off)"
+  },
   "dummy":{
     "message":"This entry must be the last one",
     "description":"so we dont need to deal with comma for last entry"

src/dashboard.html

@@ -2,6 +2,8 @@
 <html>
 <head>
 <meta charset="utf-8">
+<meta name="viewport" content="initial-scale=1">
+
 <title data-i18n="dashboardName"></title>
 <link href="css/dashboard.css" rel="stylesheet" type="text/css">
 <link href="css/common.css" rel="stylesheet" type="text/css">

src/devtools.html

@@ -2,6 +2,8 @@
 <html>
 <head>
 <meta charset="utf-8">
+<meta name="viewport" content="initial-scale=1">
+
 <title data-i18n="statsPageName"></title>
 <link rel="stylesheet" type="text/css" href="css/common.css">
 <link rel="stylesheet" type="text/css" href="css/devtools.css">

src/js/messaging.js

@@ -74,6 +74,9 @@ var onMessage = function(request, sender, callback) {
         case 'reloadTab':
             if ( vAPI.isNoTabId(request.tabId) === false ) {
                 vAPI.tabs.reload(request.tabId);
+                if (request.select && vAPI.tabs.select) {
+                    vAPI.tabs.select(request.tabId);
+                }
             }
             break;
 
@@ -187,7 +190,7 @@ var getFirewallRules = function(srcHostname, desHostnames) {
 
 /******************************************************************************/
 
-var getStats = function(tabId) {
+var getStats = function(tabId, tabTitle) {
     var r = {
         advancedUserEnabled: µb.userSettings.advancedUserEnabled,
         appName: vAPI.app.name,
@@ -201,7 +204,8 @@ var getStats = function(tabId) {
         pageURL: '',
         pageAllowedRequestCount: 0,
         pageBlockedRequestCount: 0,
-        tabId: tabId
+        tabId: tabId,
+        tabTitle: tabTitle
     };
     var pageStore = µb.pageStoreFromTabId(tabId);
     if ( pageStore ) {
@@ -269,8 +273,8 @@ var onMessage = function(request, sender, callback) {
     // Async
     switch ( request.what ) {
         case 'getPopupData':
-            vAPI.tabs.get(null, function(tab) {
+            vAPI.tabs.get(request.tabId, function(tab) {
-                callback(getStats(getTargetTabId(tab)));
+                callback(getStats(getTargetTabId(tab), tab.title));
             });
             return;
 
@@ -287,6 +291,9 @@ var onMessage = function(request, sender, callback) {
             µb.contextMenuClientX = -1;
             µb.contextMenuClientY = -1;
             µb.elementPickerExec(request.tabId);
+            if (request.select && vAPI.tabs.select) {
+                vAPI.tabs.select(request.tabId);
+            }
             break;
 
         case 'hasPopupContentChanged':

src/js/popup.js

@@ -363,7 +363,10 @@ var renderPrivacyExposure = function() {
 
 // Assume everything has to be done incrementally.
 
-var renderPopup = function() {
+var renderPopup = function () {
+    if (popupData.tabTitle) {
+        document.title = popupData.appName + " - " + popupData.tabTitle;
+    }
     uDom('#appname').text(popupData.appName);
     uDom('#version').text(popupData.appVersion);
     uDom('body').toggleClass('advancedUser', popupData.advancedUserEnabled);
@@ -449,8 +452,9 @@ var toggleNetFilteringSwitch = function(ev) {
 var gotoPick = function() {
     messager.send({
         what: 'gotoPick',
-        tabId: popupData.tabId
+        tabId: popupData.tabId,
-    });
+        select: true
+});
 
     vAPI.closePopup();
 };
@@ -577,7 +581,7 @@ var setFirewallRuleHandler = function(ev) {
 /******************************************************************************/
 
 var reloadTab = function() {
-    messager.send({ what: 'reloadTab', tabId: popupData.tabId });
+    messager.send({ what: 'reloadTab', tabId: popupData.tabId, select: true });
 
     // Polling will take care of refreshing the popup content
 
@@ -651,7 +655,7 @@ var pollForContentChange = (function() {
 
     var queryCallback = function(response) {
         if ( response ) {
-            getPopupData();
+            getPopupData(popupData.tabId);
             return;
         }
         poll();
@@ -669,22 +673,30 @@ var pollForContentChange = (function() {
 
 /******************************************************************************/
 
-var getPopupData = function() {
+var getPopupData = function(tabId) {
     var onDataReceived = function(response) {
         cachePopupData(response);
         renderPopup();
         hashFromPopupData(true);
         pollForContentChange();
     };
-    messager.send({ what: 'getPopupData' }, onDataReceived);
+    messager.send({ what: 'getPopupData', tabId: tabId }, onDataReceived);
 };
 
 /******************************************************************************/
 
 // Make menu only when popup html is fully loaded
 
-uDom.onLoad(function() {
+uDom.onLoad(function () {
-    getPopupData();
+    var tabId = null; //If there's no tab ID specified in the query string, it will default to current tab.
+
+    // Extract the tab id of the page this popup is for
+    var matches = window.location.search.match(/[\?&]tabId=([^&]+)/);
+    if (matches && matches.length === 2) {
+        tabId = matches[1];
+    }
+
+    getPopupData(tabId);
     uDom('#switch').on('click', toggleNetFilteringSwitch);
     uDom('#gotoPick').on('click', gotoPick);
     uDom('a[href]').on('click', gotoURL);

src/options.xul

@@ -0,0 +1,9 @@
+<?xml version="1.0" ?>
+<vbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+	<setting type="control">
+		<vbox>
+		<button id="showDashboardButton"/>
+		<button id="showNetworkLogButton"/>
+		</vbox>
+	</setting>
+</vbox>

src/popup.html

@@ -1,7 +1,8 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 
 <head>
+<meta name="viewport" content="width=470"> <!-- When showing as a tab in fennec, scale to full size (150px + 320px)-->
 <meta charset="utf-8">
 <link rel="stylesheet" href="css/common.css" type="text/css">
 <link rel="stylesheet" href="css/popup.css" type="text/css">

tools/make-firefox.bat

@@ -15,6 +15,7 @@ xcopy /S /I src\js %DES%\js
 xcopy /S /I src\lib %DES%\lib
 xcopy /S /I src\_locales %DES%\_locales
 xcopy src\*.html %DES%\
+xcopy src\*.xul %DES%\
 move %DES%\img\icon_128.png %DES%\icon.png
 xcopy platform\firefox\vapi-*.js %DES%\js\
 xcopy platform\firefox\bootstrap.js %DES%\
@@ -30,6 +31,7 @@ c:\python34\python "%~dp0\make-firefox-meta.py" %DES%\
 if "%1"=="all" (
     echo "*** uBlock.firefox: Creating package..."
     pushd %DES%\
+    del ..\uBlock.firefox.xpi
     "%ProgramW6432%\7-Zip\7z.exe" a -tzip -mx5 -bd ..\uBlock.firefox.xpi *
     popd
 )