inspector-fixes-layout.diff

exporting patch:
# HG changeset patch
# User Patrick Brosset <[email protected]>
# Date 1540391188 -7200
#      Wed Oct 24 16:26:28 2018 +0200
# Node ID f65095a765a557f6f3c039bb7209dbce37657f68
# Parent  079c7a062b23950449e9ce1ef809ff43026cc259
WIP investigating why inspector 'fixes' layout

diff --git a/devtools/server/actors/inspector/walker.js b/devtools/server/actors/inspector/walker.js
--- a/devtools/server/actors/inspector/walker.js
+++ b/devtools/server/actors/inspector/walker.js
@@ -750,18 +750,18 @@ var WalkerActor = protocol.ActorClassWit
         //   of any anonymous tree and cannot be used with anonymous tree walkers.
         return this.getNonAnonymousWalker(documentWalkerNode, whatToShow, skipTo);
       }
       return this.getDocumentWalker(documentWalkerNode, whatToShow, skipTo);
     };
 
     // Need to know the first and last child.
     const rawNode = node.rawNode;
-    const firstChild = getFilteredWalker(rawNode).firstChild();
-    const lastChild = getFilteredWalker(rawNode).lastChild();
+    const firstChild = rawNode.firstElementChild;
+    const lastChild = rawNode.lastElementChild;
 
     if (!firstChild && !shadowHost) {
       // No children, we're done.
       return { hasFirst: true, hasLast: true, nodes: [] };
     }
 
     let nodes = [];
 
@@ -778,73 +778,76 @@ var WalkerActor = protocol.ActorClassWit
       // A shadow root is not included in the children returned by the walker, so we can
       // not use it as start node. However it will be displayed as the first node, so
       // we use firstChild as a fallback.
       if (isShadowRoot(start)) {
         start = firstChild;
       }
 
       // Start by reading backward from the starting point if we're centering...
-      const backwardWalker = getFilteredWalker(start);
-      if (backwardWalker.currentNode != firstChild && options.center) {
-        backwardWalker.previousSibling();
-        const backwardCount = Math.floor(maxNodes / 2);
-        const backwardNodes = this._readBackward(backwardWalker, backwardCount);
-        nodes = backwardNodes;
-      }
+      // const backwardWalker = getFilteredWalker(start);
+      // if (backwardWalker.currentNode != firstChild && options.center) {
+      //   backwardWalker.previousSibling();
+      //   const backwardCount = Math.floor(maxNodes / 2);
+      //   const backwardNodes = this._readBackward(backwardWalker, backwardCount);
+      //   nodes = backwardNodes;
+      // }
 
       // Then read forward by any slack left in the max children...
-      const forwardWalker = getFilteredWalker(start);
-      const forwardCount = maxNodes - nodes.length;
-      nodes = nodes.concat(this._readForward(forwardWalker, forwardCount));
+      // const forwardWalker = getFilteredWalker(start);
+      // const forwardCount = maxNodes - nodes.length;
+      // nodes = nodes.concat(this._readForward(forwardWalker, forwardCount));
 
       // If there's any room left, it means we've run all the way to the end.
       // If we're centering, check if there are more items to read at the front.
-      const remaining = maxNodes - nodes.length;
-      if (options.center && remaining > 0 && nodes[0].rawNode != firstChild) {
-        const firstNodes = this._readBackward(backwardWalker, remaining);
+      // const remaining = maxNodes - nodes.length;
+      // if (options.center && remaining > 0 && nodes[0].rawNode != firstChild) {
+      //   const firstNodes = this._readBackward(backwardWalker, remaining);
 
-        // Then put it all back together.
-        nodes = firstNodes.concat(nodes);
-      }
+      //   // Then put it all back together.
+      //   nodes = firstNodes.concat(nodes);
+      // }
     }
 
+    // Avoid using the document walker, and just return the node's children instead.
+    nodes = [...rawNode.children];
+
     let hasFirst, hasLast;
     if (nodes.length > 0) {
       // Compare first/last with expected nodes before modifying the nodes array in case
       // this is a shadow host.
       hasFirst = nodes[0] == firstChild;
       hasLast = nodes[nodes.length - 1] == lastChild;
     } else {
       // If nodes is still an empty array, we are on a host element with a shadow root but
       // no direct children.
       hasFirst = hasLast = true;
     }
 
-    if (shadowHost) {
-      // Use anonymous walkers to fetch ::before / ::after pseudo elements
-      const firstChildWalker = this.getDocumentWalker(node.rawNode);
-      const first = firstChildWalker.firstChild();
-      const hasBefore = first && first.nodeName === "_moz_generated_content_before";
+    // if (shadowHost) {
+    //   // Use anonymous walkers to fetch ::before / ::after pseudo elements
+    //   const firstChildWalker = this.getDocumentWalker(node.rawNode);
+    //   const first = firstChildWalker.firstChild();
+    //   const hasBefore = first && first.nodeName === "_moz_generated_content_before";
 
-      const lastChildWalker = this.getDocumentWalker(node.rawNode);
-      const last = lastChildWalker.lastChild();
-      const hasAfter = last && last.nodeName === "_moz_generated_content_after";
+    //   const lastChildWalker = this.getDocumentWalker(node.rawNode);
+    //   const last = lastChildWalker.lastChild();
+    //   const hasAfter = last && last.nodeName === "_moz_generated_content_after";
 
-      nodes = [
-        // #shadow-root
-        node.rawNode.openOrClosedShadowRoot,
-        // ::before
-        ...(hasBefore ? [first] : []),
-        // shadow host direct children
-        ...nodes,
-        // ::after
-        ...(hasAfter ? [last] : []),
-      ];
-    }
+    //   nodes = [
+    //     // #shadow-root
+    //     node.rawNode.openOrClosedShadowRoot,
+    //     // ::before
+    //     ...(hasBefore ? [first] : []),
+    //     // shadow host direct children
+    //     ...nodes,
+    //     // ::after
+    //     ...(hasAfter ? [last] : []),
+    //   ];
+    // }
 
     return { hasFirst, hasLast, nodes };
   },
 
   /**
    * Get the next sibling of a given node.  Getting nodes one at a time
    * might be inefficient, be careful.
    *