Get each the style by actorID in client in order to begin to display as soon as possible

Author: dadaa

extension/experiments/inspectedNode/api-client.js

@@ -48,15 +48,15 @@
       return this._invoke("getNodesInSubtree");
     },
 
-    async getStyle() {
-      return this._invoke("getStyle");
+    async getStyle(actoriID, skipPseudo) {
+      return this._invoke("getStyle", [actoriID, skipPseudo]);
     },
 
     async getStylesInSubtree() {
       return this._invoke("getStylesInSubtree");
     },
 
-    async _invoke(method) {
+    async _invoke(method, parameters) {
       return new Promise(resolve => {
         const timestamp = Date.now();
 
@@ -71,6 +71,7 @@
         port.postMessage({
           namespace: "browser.experiments.inspectedNode",
           method,
+          parameters,
           timestamp,
         });
       });

extension/experiments/inspectedNode/api-server.js

@@ -14,7 +14,7 @@ browser.runtime.onConnect.addListener(port => {
     port.postMessage({ method: "onChange" });
   }
 
-  const onMessage = async ({ namespace, method, timestamp }) => {
+  const onMessage = async ({ namespace, method, parameters = [], timestamp }) => {
     if (namespace !== "browser.experiments.inspectedNode") {
       return;
     }
@@ -25,7 +25,8 @@ browser.runtime.onConnect.addListener(port => {
         break;
       }
       default: {
-        const result = await browser.experiments.inspectedNode[method](clientId);
+        const result =
+          await browser.experiments.inspectedNode[method](clientId, ...parameters);
         port.postMessage({ method, timestamp, result });
         break;
       }

extension/experiments/inspectedNode/api.js

@@ -60,25 +60,22 @@ this.inspectedNode = class extends ExtensionAPI {
         await inspector.pageStyle.getApplied(node, option);
 
       return styles.map(({ rule }) => {
-        const { actorID: ruleId } = rule;
         let { declarations } = rule;
         declarations = declarations.filter(d => !d.commentOffsets);
-        return declarations.length
-                 ? { ruleId, declarations, node: _getNodeInfo(node) }
-                 : null;
-      }).filter(rule => !!rule);
+        return declarations.length ? declarations : null;
+      }).filter(declarations => !!declarations);
     };
 
-    const _getStyle = async (clientId) => {
+    const _getStyle = async (clientId, actorID, skipPseudo) => {
       await _setupClientIfNeeded(clientId);
 
       const { inspector } = _clients.get(clientId);
       if (!inspector.selection.isConnected()) {
         return [];
       }
 
-      const node = inspector.selection.nodeFront;
-      return _getAppliedStyle(inspector, node, { skipPseudo: true });
+      const node = await inspector.walker.conn.getFrontByID(actorID);
+      return _getAppliedStyle(inspector, node, { skipPseudo });
     };
 
     const _getStylesInSubtree = async (clientId) => {
@@ -98,6 +95,7 @@ this.inspectedNode = class extends ExtensionAPI {
 
     const _getNodeInfo = node => {
       const {
+        actorID,
         id,
         className,
         attributes,
@@ -107,6 +105,7 @@ this.inspectedNode = class extends ExtensionAPI {
       } = node;
 
       return {
+        actorID,
         id,
         className: className.trim(),
         attributes,
@@ -163,8 +162,8 @@ this.inspectedNode = class extends ExtensionAPI {
             return _getNodesInSubtree(clientId);
           },
 
-          async getStyle(clientId) {
-            return _getStyle(clientId);
+          async getStyle(clientId, actorID, skipPseudo) {
+            return _getStyle(clientId, actorID, skipPseudo);
           },
 
           async getStylesInSubtree(clientId) {

extension/experiments/inspectedNode/schema.json

@@ -31,6 +31,14 @@
           {
             "type": "string",
             "name": "clientId"
+          },
+          {
+            "type": "string",
+            "name": "actorID"
+          },
+          {
+            "type": "boolean",
+            "name": "skipPseudo"
           }
         ],
         "async": true

extension/sidebar-pane.js

@@ -24,12 +24,13 @@ async function _updateSelectedNode(selectedNode) {
 
   const issues = [];
 
-  const { attributes, nodeName } = selectedNode;
+  const { actorID, attributes, nodeName } = selectedNode;
   issues.push(
     ..._webcompat.getHTMLElementIssues(nodeName, attributes, _targetBrowsers));
 
-  const declarationBlocks = await browser.experiments.inspectedNode.getStyle();
-  for (const { declarations } of declarationBlocks) {
+  const declarationBlocks =
+    await browser.experiments.inspectedNode.getStyle(actorID, true);
+  for (const declarations of declarationBlocks) {
     issues.push(
       ..._webcompat.getCSSDeclarationBlockIssues(declarations, _targetBrowsers));
   }
@@ -71,19 +72,24 @@ async function _updateSubtree(selectedNode) {
     )
   }
 
-  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 { node, declarations } of declarationBlocks) {
-    issues.push(
-      ...
-       _webcompat.getCSSDeclarationBlockIssues(declarations, _targetBrowsers)
-                 .map(issue => {
-                   issue.node = node;
-                   return issue;
-                 })
-    )
+  for (const node of nodesInSubtree) {
+    if (!_isValidElement(node)) {
+      continue
+    }
+
+    const declarationBlocks =
+      await browser.experiments.inspectedNode.getStyle(node.actorID, false);
+    for (const declarations of declarationBlocks) {
+      issues.push(
+        ...
+         _webcompat.getCSSDeclarationBlockIssues(declarations, _targetBrowsers)
+        .map(issue => {
+          issue.node = node;
+          return issue;
+        })
+      );
+    }
   }
 
   progressEl.textContent = "Grouping all issues";