Merge pull request #28 from firefox-devtools/performance

Implement async rendering

Author: dadaa

extension/experiments/inspectedNode/api-client.js

@@ -48,15 +48,15 @@
       return this._invoke("getNodesInSubtree");
     },
 
-    async getStyle() {
-      return this._invoke("getStyle");
+    async getStyle(actorID, skipPseudo) {
+      return this._invoke("getStyle", [actorID, 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

@@ -51,56 +51,31 @@ this.inspectedNode = class extends ExtensionAPI {
     };
 
     const _getSubtreeNodes = async (node) => {
-      if (!node.hasChildren) {
-        return [];
-      }
-
-      const nodes = [];
-
-      // At first, get the children cache in nodeFront.
-      let children = await node.treeChildren();
-
-      if (children.length === 0) {
-        // Otherwise, get via the walker.
-        await node.walkerFront.children(node);
-        children = await node.treeChildren();
-      }
-
-      // We see element type only
-      children = children.filter(node => node.nodeType === ELEMENT_NODE);
-
-      for (const child of children) {
-        nodes.push(child);
-        nodes.push(...(await _getSubtreeNodes(child)));
-      }
-
-      return nodes;
+      const result = await node.walkerFront.querySelectorAll(node, "*");
+      return await result.items();
     }
 
     const _getAppliedStyle = async (inspector, node, option) => {
       const styles =
         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) => {
@@ -120,6 +95,7 @@ this.inspectedNode = class extends ExtensionAPI {
 
     const _getNodeInfo = node => {
       const {
+        actorID,
         id,
         className,
         attributes,
@@ -129,6 +105,7 @@ this.inspectedNode = class extends ExtensionAPI {
       } = node;
 
       return {
+        actorID,
         id,
         className: className.trim(),
         attributes,
@@ -185,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.html

@@ -165,10 +165,6 @@
       display: block;
     }
 
-    #subtree.processing ul {
-      display: none;
-    }
-
     #subtree aside label {
       display: flex;
       align-items: center;