Add a "Block Element" context menu command to the Firefox Network tab (to match the one in the Inspector tab)

platform/firefox/vapi-background.js

@@ -2019,7 +2019,7 @@ vAPI.contextMenu.registerForWebInspector = function(eventName, toolbox, panel) {
                 selectedNodeFront = selectedNodeFront.parentNode();
             }
             if (selectedNodeFront) {
-                selectedNodeFront.getUniqueSelector().then(selector => µBlock.elementPickerExec(vAPI.tabs.getTabId(panel.browser), selector));
+                selectedNodeFront.getUniqueSelector().then(selector => µBlock.elementPickerExec(vAPI.tabs.getTabId(panel.browser), { type: 'element', value: selector}));
 
                 // Turn off 3D view, if it's turned on.
                 if (tiltButton && tiltButton.checked) {
@@ -2032,6 +2032,24 @@ vAPI.contextMenu.registerForWebInspector = function(eventName, toolbox, panel) {
     }
 }
 
+vAPI.contextMenu.registerForNetMonitor = function(eventName, toolbox, panel) {
+    var doc = panel.panelWin.document;
+    var menuPopup = doc.getElementById("network-request-popup");
+    var insertBeforeMenuItem = doc.getElementById("request-menu-context-separator");
+    
+    if (menuPopup && insertBeforeMenuItem) {
+        var menuitem = vAPI.contextMenu.createContextMenuItem(doc);
+        menuitem.addEventListener('command', function() {
+            var selectedRequest = panel.panelWin.NetMonitorView.RequestsMenu.selectedAttachment;
+            if (selectedRequest) {
+                µBlock.elementPickerExec(vAPI.tabs.getTabId(toolbox.target.tab), { type: 'url', value: selectedRequest.url });
+            }
+        });
+
+        menuPopup.insertBefore(menuitem, insertBeforeMenuItem);
+    }
+}
+
 /******************************************************************************/
 
 vAPI.contextMenu.create = function(details, callback) {
@@ -2086,6 +2104,7 @@ vAPI.contextMenu.create = function(details, callback) {
 
         if (this.gDevTools) {
             this.gDevTools.on("inspector-ready", this.registerForWebInspector);
+            this.gDevTools.on("netmonitor-ready", this.registerForNetMonitor);
         }
     }
 
@@ -2103,6 +2122,7 @@ vAPI.contextMenu.remove = function() {
 
     if (!vAPI.fennec && this.gDevTools) {
         this.gDevTools.off("inspector-ready", this.registerForWebInspector);
+        this.gDevTools.off("netmonitor-ready", this.registerForNetMonitor);
     }
 
     this.menuItemId = null;

src/js/background.js

@@ -138,7 +138,7 @@ return {
     contextMenuClientX: -1,
     contextMenuClientY: -1,
 
-    epickerTargetElementSelector: null,
+    epickerTarget: null,
     epickerEprom: null,
 
     // so that I don't have to care for last comma

src/js/element-picker.js

@@ -326,13 +326,18 @@ var netFilterFromElement = function(elem, out) {
     if ( src.length === 0 ) {
         return;
     }
+
+    netFilterFromUrl(src, out);
+}
+
+var netFilterFromUrl = function(url, out) {
     // Remove fragment
-    var pos = src.indexOf('#');
+    var pos = url.indexOf('#');
     if ( pos !== -1 ) {
-        src = src.slice(0, pos);
+        url = url.slice(0, pos);
     }
 
-    var filter = src.replace(/^https?:\/\//, '||');
+    var filter = url.replace(/^https?:\/\//, '||');
 
     // Anchor absolute filter to hostname
     out.push(filter);
@@ -344,7 +349,7 @@ var netFilterFromElement = function(elem, out) {
     }
 
     // Suggest a filter which is a result of combining more than one URL.
-    netFilterFromUnion(src, out);
+    netFilterFromUnion(url, out);
 };
 
 var netFilterSources = {
@@ -472,6 +477,14 @@ var filtersFromElement = function(elem) {
 
 /******************************************************************************/
 
+var filtersFromUrl = function(url) {
+    netFilterCandidates.length = 0;
+    cosmeticFilterCandidates.length = 0;
+    netFilterFromUrl(url, netFilterCandidates);
+};
+
+/******************************************************************************/
+
 var elementsFromFilter = function(filter) {
     var out = [];
 
@@ -874,20 +887,23 @@ var startPicker = function(details) {
 
     highlightElements([], true);
 
-    var elem = null;
-
-    // If a target element was provided, use it
-    if (details.targetElementSelector) {
-        elem = document.querySelector(details.targetElementSelector);
+    // If a target was provided, use it
+    if (details.target) {
+        if (details.target.type === 'element') {
+            filtersFromElement(document.querySelector(details.target.value));
+        } else if (details.target.type === 'url') {
+            filtersFromUrl(details.target.value);
+        } else {
+            console.error('uBlock> unknown element picker target details type: %s', details.target.type);
+        }
+    } else {
+        // Try using mouse position
+        if (details.clientX !== -1) {
+            filtersFromElement(elementFromPoint(details.clientX, details.clientY));
+        }
     }
 
-    // Try using mouse position
-    if (!elem && details.clientX !== -1) {
-        elem = elementFromPoint(details.clientX, details.clientY);
-    }
-
-    if (elem !== null) {
-        filtersFromElement(elem);
+    if (netFilterCandidates.length > 0 || cosmeticFilterCandidates.length > 0) {
         showDialog();
     }
 };

src/js/messaging.js

@@ -558,7 +558,7 @@ var onMessage = function(request, sender, callback) {
 
                 callback({
                     frameContent: this.responseText.replace(reStrings, replacer),
-                    targetElementSelector: µb.epickerTargetElementSelector,
+                    target: µb.epickerTarget,
                     clientX: µb.contextMenuClientX,
                     clientY: µb.contextMenuClientY,
                     eprom: µb.epickerEprom

src/js/ublock.js

@@ -276,8 +276,8 @@ var matchWhitelistDirective = function(url, hostname, directive) {
 
 /******************************************************************************/
 
-µBlock.elementPickerExec = function(tabId, targetElementSelector) {
-    this.epickerTargetElementSelector = targetElementSelector;
+µBlock.elementPickerExec = function(tabId, target) {
+    this.epickerTarget = target;
     vAPI.tabs.injectScript(tabId, { file: 'js/element-picker.js' });
 };