Optimize addToTree function. (firefox-devtools#4263)

Author: yurydelendik

src/components/PrimaryPanes/SourcesTree.js

@@ -19,7 +19,6 @@ import {
   createParentMap,
   isDirectory,
   addToTree,
-  sortEntireTree,
   collapseTree,
   createTree,
   getDirectories
@@ -145,8 +144,7 @@ class SourcesTree extends Component {
       for (const source of newSet) {
         addToTree(uncollapsedTree, source, this.props.debuggeeUrl);
       }
-      const unsortedTree = collapseTree(uncollapsedTree);
-      sourceTree = sortEntireTree(unsortedTree, nextProps.debuggeeUrl);
+      sourceTree = collapseTree(uncollapsedTree);
     }
 
     this.setState({

src/utils/sources-tree/addToTree.js

@@ -7,15 +7,29 @@ import {
   partIsFile,
   createNode
 } from "./utils";
+import {
+  createTreeNodeMatcher,
+  findNodeInContents,
+  getDomain
+} from "./treeOrder";
 import { getURL, getFilenameFromPath } from "./getURL";
 
 import type { Node } from "./types";
 import type { SourceRecord } from "../../reducers/types";
 
-function createNodeInTree(part: string, path: string, tree: Node) {
+function createNodeInTree(
+  part: string,
+  path: string,
+  tree: Node,
+  index: number
+) {
   const node = createNode(part, path, []);
+
   // we are modifying the tree
-  tree.contents = [...tree.contents, node];
+  const contents = tree.contents.slice(0);
+  contents.splice(index, 0, node);
+  tree.contents = contents;
+
   return node;
 }
 
@@ -31,23 +45,28 @@ function findOrCreateNode(
   path: string,
   part: string,
   index: number,
-  url: Object
+  url: Object,
+  debuggeeHost: ?string
 ) {
-  const child = subTree.contents.find(c => c.name === part);
+  const addedPartIsFile = partIsFile(index, parts, url);
+  const { found: childFound, index: childIndex } = findNodeInContents(
+    subTree,
+    createTreeNodeMatcher(part, !addedPartIsFile, debuggeeHost)
+  );
 
   // we create and enter the new node
-  if (!child) {
-    return createNodeInTree(part, path, subTree);
+  if (!childFound) {
+    return createNodeInTree(part, path, subTree, childIndex);
   }
 
   // we found a path with the same name as the part. We need to determine
   // if this is the correct child, or if we have a naming conflict
-  const addedPartIsFile = partIsFile(index, parts, url);
+  const child = subTree.contents[childIndex];
   const childIsFile = !nodeHasChildren(child);
 
   // if we have a naming conflict, we'll create a new node
   if ((childIsFile && !addedPartIsFile) || (!childIsFile && addedPartIsFile)) {
-    return createNodeInTree(part, path, subTree);
+    return createNodeInTree(part, path, subTree, childIndex);
   }
 
   // if there is no naming conflict, we can traverse into the child
@@ -58,7 +77,7 @@ function findOrCreateNode(
  * walk the source tree to the final node for a given url,
  * adding new nodes along the way
  */
-function traverseTree(url: Object, tree: Node) {
+function traverseTree(url: Object, tree: Node, debuggeeHost: ?string) {
   url.path = decodeURIComponent(url.path);
 
   const parts = url.path.split("/").filter(p => p !== "");
@@ -67,7 +86,16 @@ function traverseTree(url: Object, tree: Node) {
   let path = "";
   return parts.reduce((subTree, part, index) => {
     path = `${path}/${part}`;
-    return findOrCreateNode(parts, subTree, path, part, index, url);
+    const debuggeeHostIfRoot = index === 0 ? debuggeeHost : null;
+    return findOrCreateNode(
+      parts,
+      subTree,
+      path,
+      part,
+      index,
+      url,
+      debuggeeHostIfRoot
+    );
   }, tree);
 }
 
@@ -84,18 +112,24 @@ function addSourceToNode(node: Node, url: Object, source: SourceRecord) {
   }
 
   const name = getFilenameFromPath(url.path);
-  const existingNode = node.contents.find(childNode => childNode.name === name);
+  const { found: childFound, index: childIndex } = findNodeInContents(
+    node,
+    createTreeNodeMatcher(name, false, null)
+  );
 
   // if we are readding an existing file in the node, overwrite the existing
   // file and return the node's contents
-  if (existingNode) {
+  if (childFound) {
+    const existingNode = node.contents[childIndex];
     existingNode.contents = source;
     return node.contents;
   }
 
   // if this is a new file, add the new file;
   const newNode = createNode(name, source.get("url"), source);
-  return [...node.contents, newNode];
+  const contents = node.contents.slice(0);
+  contents.splice(childIndex, 0, newNode);
+  return contents;
 }
 
 /**
@@ -108,11 +142,12 @@ export function addToTree(
   debuggeeUrl: string
 ) {
   const url = getURL(source.get("url"), debuggeeUrl);
+  const debuggeeHost = getDomain(debuggeeUrl);
 
   if (isInvalidUrl(url, source)) {
     return;
   }
 
-  const finalNode = traverseTree(url, tree);
+  const finalNode = traverseTree(url, tree, debuggeeHost);
   finalNode.contents = addSourceToNode(finalNode, url, source);
 }

src/utils/sources-tree/createTree.js

@@ -2,7 +2,6 @@
 
 import { createNode, createParentMap } from "./utils";
 import { collapseTree } from "./collapseTree";
-import { sortEntireTree } from "./sortTree";
 import { addToTree } from "./addToTree";
 
 import type { SourcesMap } from "../../reducers/types";
@@ -13,7 +12,7 @@ export function createTree(sources: SourcesMap, debuggeeUrl: string) {
     addToTree(uncollapsedTree, source, debuggeeUrl);
   }
 
-  const sourceTree = sortEntireTree(collapseTree(uncollapsedTree), debuggeeUrl);
+  const sourceTree = collapseTree(uncollapsedTree);
 
   return {
     uncollapsedTree,

src/utils/sources-tree/tests/__snapshots__/addToTree.spec.js.snap

@@ -45,21 +45,21 @@ exports[`sources-tree addToTree excludes javascript: URLs from the tree 1`] = `
 exports[`sources-tree addToTree replaces a file with a directory 1`] = `
 " - root path= 
   - unpkg.com path=/unpkg.com 
-    - codemirror@5.1 path=/unpkg.com/codemirror@5.1 source_id=server1.conn13.child1/37 
     - codemirror@5.1 path=/unpkg.com/codemirror@5.1 
       - mode path=/unpkg.com/codemirror@5.1/mode 
         - xml path=/unpkg.com/codemirror@5.1/mode/xml 
           - xml.js path=/unpkg.com/codemirror@5.1/mode/xml/xml.js source_id=server1.conn13.child1/39 
+    - codemirror@5.1 path=/unpkg.com/codemirror@5.1 source_id=server1.conn13.child1/37 
 "
 `;
 
 exports[`sources-tree addToTree uses debuggeeUrl as default 1`] = `
 " - root path= 
   - localhost:4242 path=/localhost:4242 
     - components path=/localhost:4242/components 
-      - TodoTextInput.js path=/localhost:4242/components/TodoTextInput.js source_id=undefined 
       - Header.js path=/localhost:4242/components/Header.js source_id=undefined 
       - TodoItem.js path=/localhost:4242/components/TodoItem.js source_id=undefined 
+      - TodoTextInput.js path=/localhost:4242/components/TodoTextInput.js source_id=undefined 
     - reducers path=/localhost:4242/reducers 
       - index.js path=/localhost:4242/reducers/index.js source_id=undefined 
     - index.js path=/localhost:4242/index.js source_id=undefined 

src/utils/sources-tree/tests/addToTree.spec.js

@@ -51,7 +51,7 @@ describe("sources-tree", () => {
       });
       const tree = createNode("root", "", []);
 
-      addToTree(tree, source1);
+      addToTree(tree, source1, "http://example.com/");
       expect(tree.contents.length).toBe(1);
 
       const base = tree.contents[0];
@@ -121,9 +121,9 @@ describe("sources-tree", () => {
       });
       const tree = createNode("root", "", []);
 
-      addToTree(tree, source1);
-      addToTree(tree, source2);
-      addToTree(tree, source3);
+      addToTree(tree, source1, "http://example.com/");
+      addToTree(tree, source2, "http://example.com/");
+      addToTree(tree, source3, "http://example.com/");
 
       const base = tree.contents[0];
       expect(tree.contents.length).toBe(1);
@@ -140,7 +140,7 @@ describe("sources-tree", () => {
       });
       const tree = createNode("root", "", []);
 
-      addToTree(tree, source);
+      addToTree(tree, source, "file:///a/index.html");
       expect(tree.contents.length).toBe(1);
 
       const base = tree.contents[0];
@@ -170,7 +170,7 @@ describe("sources-tree", () => {
 
       const sources = createSourcesList(testData);
       const tree = createNode("root", "", []);
-      sources.forEach(source => addToTree(tree, source));
+      sources.forEach(source => addToTree(tree, source, "https://unpkg.com/"));
       expect(formatTree(tree)).toMatchSnapshot();
     });
 
@@ -189,7 +189,7 @@ describe("sources-tree", () => {
 
       const sources = createSourcesList(testData);
       const tree = createNode("root", "", []);
-      sources.forEach(source => addToTree(tree, source));
+      sources.forEach(source => addToTree(tree, source, "https://unpkg.com/"));
       expect(formatTree(tree)).toMatchSnapshot();
     });
 

src/utils/sources-tree/tests/collapseTree.spec.js

@@ -25,7 +25,7 @@ describe("sources tree", () => {
   describe("collapseTree", () => {
     it("can collapse a single source", () => {
       const fullTree = createNode("root", "", []);
-      addToTree(fullTree, abcSource);
+      addToTree(fullTree, abcSource, "http://example.com/");
       expect(fullTree.contents.length).toBe(1);
       const tree = collapseTree(fullTree);
 
@@ -45,8 +45,8 @@ describe("sources tree", () => {
 
     it("correctly merges in a collapsed source with a deeper level", () => {
       const fullTree = createNode("root", "", []);
-      addToTree(fullTree, abcSource);
-      addToTree(fullTree, abcdeSource);
+      addToTree(fullTree, abcSource, "http://example.com/");
+      addToTree(fullTree, abcdeSource, "http://example.com/");
       const tree = collapseTree(fullTree);
 
       sortEntireTree(tree);
@@ -73,8 +73,8 @@ describe("sources tree", () => {
 
     it("correctly merges in a collapsed source with a shallower level", () => {
       const fullTree = createNode("root", "", []);
-      addToTree(fullTree, abcSource);
-      addToTree(fullTree, abxSource);
+      addToTree(fullTree, abcSource, "http://example.com/");
+      addToTree(fullTree, abxSource, "http://example.com/");
       const tree = collapseTree(fullTree);
 
       expect(tree.contents.length).toBe(1);
@@ -97,8 +97,8 @@ describe("sources tree", () => {
 
     it("correctly merges in a collapsed source with the same level", () => {
       const fullTree = createNode("root", "", []);
-      addToTree(fullTree, abcdeSource);
-      addToTree(fullTree, abcSource);
+      addToTree(fullTree, abcdeSource, "http://example.com/");
+      addToTree(fullTree, abcSource, "http://example.com/");
       const tree = collapseTree(fullTree);
 
       expect(tree.contents.length).toBe(1);

src/utils/sources-tree/tests/sortTree.spec.js

@@ -21,9 +21,9 @@ describe("sources-tree", () => {
       });
       const _tree = createNode("root", "", []);
 
-      addToTree(_tree, source1);
-      addToTree(_tree, source2);
-      addToTree(_tree, source3);
+      addToTree(_tree, source1, "http://example.com/");
+      addToTree(_tree, source2, "http://example.com/");
+      addToTree(_tree, source3, "http://example.com/");
       const tree = sortEntireTree(_tree);
 
       const base = tree.contents[0];
@@ -71,7 +71,9 @@ describe("sources-tree", () => {
       ];
 
       const _tree = createNode("root", "", []);
-      sources.forEach(source => addToTree(_tree, source));
+      sources.forEach(source =>
+        addToTree(_tree, source, "http://example.com/")
+      );
       const tree = sortEntireTree(_tree);
       const domain = tree.contents[0];
 
@@ -119,7 +121,9 @@ describe("sources-tree", () => {
       ];
 
       const _tree = createNode("root", "", []);
-      sources.forEach(source => addToTree(_tree, source));
+      sources.forEach(source =>
+        addToTree(_tree, source, "http://example.com/")
+      );
       const tree = sortEntireTree(_tree);
       const [
         bFolderNode,

src/utils/sources-tree/tests/utils.spec.js

@@ -50,7 +50,7 @@ describe("sources tree", () => {
       ];
 
       const tree = createNode("root", "", []);
-      sources.forEach(source => addToTree(tree, source));
+      sources.forEach(source => addToTree(tree, source, "http://example.com/"));
       sortEntireTree(tree);
       const [bFolderNode, aFileNode] = tree.contents[0].contents;
       const [cFolderNode] = bFolderNode.contents;
@@ -101,9 +101,9 @@ describe("sources tree", () => {
       });
 
       const tree = createNode("root", "", []);
-      addToTree(tree, source1);
-      addToTree(tree, source2);
-      addToTree(tree, source3);
+      addToTree(tree, source1, "http://a/");
+      addToTree(tree, source2, "http://a/");
+      addToTree(tree, source3, "http://a/");
       const paths = getDirectories("http://a/b.js", tree);
 
       expect(paths[1].path).toBe("/a");
@@ -122,8 +122,8 @@ describe("sources tree", () => {
       });
 
       const tree = createNode("root", "", []);
-      addToTree(tree, source1);
-      addToTree(tree, source2);
+      addToTree(tree, source1, "http://a/");
+      addToTree(tree, source2, "http://a/");
       const paths = getDirectories("http://a/b.js?key=hi", tree);
 
       expect(paths[1].path).toBe("/a");
@@ -142,8 +142,8 @@ describe("sources tree", () => {
       });
 
       const tree = createNode("root", "", []);
-      addToTree(tree, source1);
-      addToTree(tree, source2);
+      addToTree(tree, source1, "http://a/");
+      addToTree(tree, source2, "http://a/");
       const paths = getDirectories("https://a/b.js", tree);
 
       expect(paths[1].path).toBe("/a");