Merge pull request #22 from firefox-devtools/issue-grouping

Issue grouping

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/experiments/inspectedNode/api.js

@@ -66,7 +66,9 @@ this.inspectedNode = class extends ExtensionAPI {
         const { actorID: ruleId } = rule;
         let { declarations } = rule;
         declarations = declarations.filter(d => !d.commentOffsets);
-        return declarations.length ? { ruleId, declarations } : null;
+        return declarations.length
+                 ? { ruleId, declarations, node: _getNodeInfo(node) }
+                 : null;
       }).filter(rule => !!rule);
     };
 
@@ -98,8 +100,23 @@ this.inspectedNode = class extends ExtensionAPI {
     };
 
     const _getNodeInfo = node => {
-      const { attributes, nodeName, nodeType, customElementLocation } = node;
-      return { attributes, nodeName, nodeType, isCustomElement: !!customElementLocation };
+      const {
+        id,
+        className,
+        attributes,
+        nodeName,
+        nodeType,
+        customElementLocation,
+      } = node;
+
+      return {
+        id,
+        className: className.trim(),
+        attributes,
+        nodeName,
+        nodeType,
+        isCustomElement: !!customElementLocation,
+      };
     };
 
     const _getNode = async (clientId) => {

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

@@ -15,6 +15,10 @@
       line-height: 1.8;
     }
 
+    a {
+      text-decoration: none;
+    }
+
     header {
       color: #0c0c0d;
       background-color: #f9f9fa;
@@ -27,10 +31,6 @@
       border-top: 1px solid #e0e0e2;
     }
 
-    a {
-      text-decoration: none;
-    }
-
     li {
       margin-block-end: 4px;
       list-style: none;
@@ -128,6 +128,33 @@
       font-weight: 600;
     }
 
+    /* occurrences part */
+    .occurrences details summary {
+      cursor: pointer;
+      color: #b6babf;
+    }
+
+    .occurrences ul {
+      line-height: 1.2;
+      padding-inline-start: 16px;
+      padding-block-start: 2px;
+    }
+
+    .occurrences li {
+      font-family: monospace;
+      font-size: 12px;
+      cursor: pointer;
+    }
+
+    .occurrences .node-name {
+      color: #0074e8;
+    }
+
+    .occurrences .node-id,
+    .occurrences .node-class {
+      color: #dd00a9;
+    }
+
     #subtree aside {
       display: none;
       padding-block: 12px;
@@ -166,6 +193,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

@@ -62,24 +62,80 @@ async function _updateSubtree(selectedNode) {
 
     const { attributes, nodeName } = node;
     issues.push(
-      ..._webcompat.getHTMLElementIssues(nodeName, attributes, _targetBrowsers));
+      ...
+       _webcompat.getHTMLElementIssues(nodeName, attributes, _targetBrowsers)
+                 .map(issue => {
+                   issue.node = node;
+                   return issue;
+                 })
+    )
   }
 
   progressEl.textContent = "Getting all descendants of the selected node";
   const declarationBlocks = await browser.experiments.inspectedNode.getStylesInSubtree();
 
   progressEl.textContent = "Getting web compatibility issues for CSS styles";
-  for (const { declarations } of declarationBlocks) {
+  for (const { node, declarations } of declarationBlocks) {
     issues.push(
-      ..._webcompat.getCSSDeclarationBlockIssues(declarations, _targetBrowsers));
+      ...
+       _webcompat.getCSSDeclarationBlockIssues(declarations, _targetBrowsers)
+                 .map(issue => {
+                   issue.node = node;
+                   return issue;
+                 })
+    )
   }
 
+  progressEl.textContent = "Grouping all issues";
+  const issueGroups = _groupIssues(issues);
+
   progressEl.textContent = "Rendering all issues";
-  _render(issues, issueListEl);
+  _render(issueGroups, issueListEl);
 
   subtreeEl.classList.remove("processing");
 }
 
+/**
+ * Group by the issue cause.
+ * @param {Array} issues
+ *        The issue list which WebCompat library returns. Also the issue in the list
+ *        assume to contain the node information additionaly.
+ * @return {Array}
+ *         Array of issues grouped. The issue has `nodes` attribute which contains the
+ *         node informations where caused the issue.
+ */
+function _groupIssues(issues) {
+  const issueGroups = [];
+
+  for (const issue of issues) {
+    let issueGroup = issueGroups.find(i => {
+      return i.type === issue.type &&
+             i.property === issue.property &&
+             i.element === issue.element &&
+             i.attribute === issue.attribute &&
+             i.value === issue.value;
+    });
+
+    if (!issueGroup) {
+      issueGroup = Object.assign({}, issue, { nodes: [], node: undefined });
+      issueGroups.push(issueGroup);
+    }
+
+    const isNodeContainedInGroup = issueGroup.nodes.some(n => {
+      return n.nodeName === issue.node.nodeName &&
+             n.nodeType === issue.node.nodeType &&
+             n.id === issue.node.id &&
+             n.className === issue.node.className;
+    });
+
+    if (!isNodeContainedInGroup) {
+      issueGroup.nodes.push(issue.node);
+    }
+  }
+
+  return issueGroups;
+}
+
 function _isValidElement({ nodeType, isCustomElement }) {
   return nodeType === Node.ELEMENT_NODE && !isCustomElement;
 }
@@ -107,9 +163,47 @@ function _renderIssue(issue) {
 
   issueEl.classList.add((issue.deprecated ? "warning" : "information"));
 
+  if (issue.nodes) {
+    issueEl.append(_renderOccurrences(issue));
+  }
+
   return issueEl;
 }
 
+function _renderOccurrences({ nodes }) {
+  const occurrencesEl = document.createElement("section");
+  occurrencesEl.classList.add("occurrences");
+
+  const nodelistEl = document.createElement("ul");
+  for (const { id, className, nodeName } of nodes) {
+    const nodeEl = document.createElement("li");
+    nodeEl.append(_renderTerm(nodeName.toLowerCase(), ["node-name"]));
+
+    if (id) {
+      nodeEl.append(_renderTerm(`#${ id }`, ["node-id"]));
+    } else if (className.length) {
+      nodeEl.append(_renderTerm(`.${ className.replace(/\s+/g, ".") }`, ["node-class"]));
+    }
+
+    nodeEl.addEventListener("click", _onClickNodeSelector);
+    nodelistEl.append(nodeEl);
+  }
+
+  if (nodes.length !== 1) {
+    const summaryEl = document.createElement("summary");
+    summaryEl.textContent = `${nodes.length} occurrences`;
+
+    const detailsEl = document.createElement("details");
+    detailsEl.append(summaryEl, nodelistEl);
+
+    occurrencesEl.append(detailsEl);
+  } else {
+    occurrencesEl.append(nodelistEl);
+  }
+
+  return occurrencesEl;
+}
+
 function _renderSubject(issue) {
   const { type, url } = issue;
   const subjectEl = document.createElement("span");
@@ -283,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);