Add the node information to the issue

Author: dadaa

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/sidebar-pane.js

@@ -62,16 +62,28 @@ 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 = "Rendering all issues";