Make the nodes which caused the issue searchable

Author: dadaa

extension/experiments/highlighter/api-client.js

@@ -0,0 +1,47 @@
+"use strict";
+
+// We can not call any experimental APIs in devtools page context.
+// https://searchfox.org/mozilla-central/source/toolkit/components/extensions/docs/basics.rst#155-156
+// Thus, introduce api-server / api-client that provides pseudo api to make experimental
+// api accessible even in devtools page context.
+//
+// This script should run on devtools page context.
+
+(async function install() {
+  if (browser.experiments && browser.experiments.highlighter) {
+    return;
+  }
+
+  if (!browser.experiments) {
+    browser.experiments = {};
+  }
+
+  const port = browser.runtime.connect();
+
+  browser.experiments.highlighter = {
+    async highlight(selector) {
+      this._invoke("highlight", selector);
+    },
+
+    async _invoke(method, parameter) {
+      return new Promise(resolve => {
+        const timestamp = Date.now();
+
+        const listener = response => {
+          if (method === response.method && timestamp === response.timestamp) {
+            port.onMessage.removeListener(listener);
+            resolve(response.result);
+          }
+        };
+
+        port.onMessage.addListener(listener);
+        port.postMessage({
+          namespace: "browser.experiments.highlighter",
+          method,
+          parameter,
+          timestamp,
+        });
+      });
+    }
+  };
+})();

extension/experiments/highlighter/api-server.js

@@ -0,0 +1,27 @@
+"use strict";
+
+// We can not call any experimental APIs in devtools page context.
+// https://searchfox.org/mozilla-central/source/toolkit/components/extensions/docs/basics.rst#155-156
+// Thus, introduce api-server / api-client that provides pseudo api to make experimental
+// api accessible even in devtools page context.
+//
+// This script should run on addon parent context (as background).
+
+browser.runtime.onConnect.addListener(port => {
+  const onMessage = async ({ namespace, method, parameter, timestamp }) => {
+    if (namespace !== "browser.experiments.highlighter") {
+      return;
+    }
+
+    const result = await browser.experiments.highlighter[method](parameter);
+    port.postMessage({ method, timestamp, result });
+  };
+  port.onMessage.addListener(onMessage);
+
+  const onDisconnect = () => {
+    browser.experiments.inspectedNode.onChange.removeListener(onChange);
+    port.onDisconnect.removeListener(onDisconnect);
+    port.onMessage.removeListener(onMessage);
+  };
+  port.onDisconnect.addListener(onDisconnect);
+});

extension/experiments/highlighter/api.js

@@ -0,0 +1,29 @@
+"use strict";
+
+this.highlighter = class extends ExtensionAPI {
+  getAPI(context) {
+    const { Services } = Cu.import("resource://gre/modules/Services.jsm");
+    const { require } = Cu.import("resource://devtools/shared/Loader.jsm");
+    const { gDevTools } = require("devtools/client/framework/devtools");
+
+    async function _highlight(selector) {
+      const navigator = Services.wm.getMostRecentWindow("navigator:browser");
+      const tab = navigator.gBrowser.selectedTab;
+      const target = await gDevTools.getTargetForTab(tab);
+      const toolbox = gDevTools.getToolbox(target);
+      const inspector = toolbox.getPanel("inspector");
+      inspector.searchBox.value = selector;
+      inspector.search.doFullTextSearch(selector, false);
+    }
+
+    return {
+      experiments: {
+        highlighter: {
+          async highlight(selector) {
+            await _highlight(selector);
+          }
+        },
+      },
+    };
+  }
+}

extension/experiments/highlighter/schema.json

@@ -0,0 +1,18 @@
+[
+  {
+    "namespace": "experiments.highlighter",
+    "functions": [
+      {
+        "name": "highlight",
+        "type": "function",
+        "parameters": [
+          {
+            "type": "string",
+            "name": "selector"
+          }
+        ],
+        "async": true
+      }
+    ]
+  }
+]

extension/manifest.json

@@ -13,12 +13,21 @@
   ],
   "background": {
     "scripts": [
+      "experiments/highlighter/api-server.js",
       "experiments/inspectedNode/api-server.js",
       "proxy/tabs/api-server.js"
     ]
   },
   "devtools_page": "devtools.html",
   "experiment_apis": {
+    "highlighter": {
+      "schema": "experiments/highlighter/schema.json",
+      "parent": {
+        "scopes": ["addon_parent"],
+        "script": "experiments/highlighter/api.js",
+        "paths": [["experiments", "highlighter"]]
+      }
+    },
     "inspectedNode": {
       "schema": "experiments/inspectedNode/schema.json",
       "parent": {

extension/sidebar-pane.html

@@ -142,6 +142,7 @@
     .occurrences li {
       font-family: monospace;
       font-size: 12px;
+      cursor: pointer;
     }
 
     .occurrences .node-name {
@@ -191,6 +192,7 @@
       to { transform: rotate(1turn); }
     }
     </style>
+    <script src="experiments/highlighter/api-client.js"></script>
     <script src="experiments/inspectedNode/api-client.js"></script>
     <script src="proxy/tabs/api-client.js"></script>
     <script type="module" src="sidebar-pane.js"></script>

extension/sidebar-pane.js

@@ -184,6 +184,8 @@ function _renderOccurrences({ nodes }) {
     } else if (className.length) {
       nodeEl.append(_renderTerm(`.${ className.replace(/\s+/g, ".") }`, ["node-class"]));
     }
+
+    nodeEl.addEventListener("click", _onClickNodeSelector);
     nodelistEl.append(nodeEl);
   }
 
@@ -375,6 +377,13 @@ function _onClickLink(e) {
   browser.tabs.create({ url: e.target.href });
 }
 
+function _onClickNodeSelector(e) {
+  e.stopPropagation();
+  e.preventDefault();
+  const selector = e.target.closest("li").textContent;
+  browser.experiments.highlighter.highlight(selector);
+}
+
 async function _updateCSSValueEnabled() {
   const isCSSValueEnabled = await _userSettings.isCSSValueEnabled();
   _webcompat.setCSSValueEnabled(isCSSValueEnabled);