Merge pull request #1324 from chrisaljoudi/NetMonitor_Block_Element

Add a "Block Resource" context menu command to the Firefox Network tab in devtools

platform/firefox/vapi-background.js

@@ -1943,10 +1943,10 @@ vAPI.contextMenu.displayMenuItem = function({target}) {
 
 /******************************************************************************/
 
-vAPI.contextMenu.createContextMenuItem = function(doc) {
+vAPI.contextMenu.createContextMenuItem = function(doc, labelOverride) {
     var menuitem = doc.createElement('menuitem');
     menuitem.setAttribute('id', this.menuItemId);
-    menuitem.setAttribute('label', this.menuLabel);
+    menuitem.setAttribute('label', labelOverride || this.menuLabel);
     menuitem.setAttribute('image', vAPI.getURL('img/browsericons/icon16.svg'));
     menuitem.setAttribute('class', 'menuitem-iconic');
     return menuitem;
@@ -2018,7 +2018,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) {
@@ -2031,6 +2031,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, vAPI.i18n('netMonitorContextMenuEntry'));
+        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) {
@@ -2085,6 +2103,7 @@ vAPI.contextMenu.create = function(details, callback) {
 
         if (this.gDevTools) {
             this.gDevTools.on("inspector-ready", this.registerForWebInspector);
+            this.gDevTools.on("netmonitor-ready", this.registerForNetMonitor);
         }
     }
 
@@ -2102,6 +2121,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/_locales/en/messages.json

@@ -147,6 +147,10 @@
     "message":"Block element",
     "description":"English: Block element"
   },
+  "netMonitorContextMenuEntry":{
+    "message":"Block resource",
+    "description":"English: Block resource"
+  },
   "settingsCollapseBlockedPrompt":{
     "message":"Hide placeholders of blocked elements",
     "description":"English: Hide placeholders of blocked elements"

src/js/background.js

@@ -141,7 +141,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 (!elem && details.clientX !== -1) {
-        elem = elementFromPoint(details.clientX, details.clientY);
+        if (details.clientX !== -1) {
+            filtersFromElement(elementFromPoint(details.clientX, details.clientY));
+        }
     }
 
-    if (elem !== null) {
-        filtersFromElement(elem);
+    if (netFilterCandidates.length > 0 || cosmeticFilterCandidates.length > 0) {
         showDialog();
     }
 };

src/js/messaging.js

@@ -642,7 +642,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

@@ -287,8 +287,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' });
 };
 

tools/make-firefox-meta.py

@@ -24,7 +24,7 @@ source_locale_dir = pj(build_dir, '_locales')
 target_locale_dir = pj(build_dir, 'locale')
 language_codes = []
 descriptions = OrderedDict({})
-title_case_strings = ['pickerContextMenuEntry']
+title_case_strings = ['pickerContextMenuEntry', 'netMonitorContextMenuEntry']
 
 for alpha2 in sorted(os.listdir(source_locale_dir)):
     locale_path = pj(source_locale_dir, alpha2, 'messages.json')