[Tree] Switch to relative sources (firefox-devtools#6455)

Author: jasonLaster

src/components/PrimaryPanes/SourcesTree.js

@@ -18,7 +18,7 @@ import {
   getDebuggeeUrl,
   getExpandedState,
   getProjectDirectoryRoot,
-  getSources
+  getRelativeSources
 } from "../../selectors";
 
 // Actions
@@ -119,6 +119,7 @@ class SourcesTree extends Component<Props, State> {
         })
       );
     }
+
     if (nextProps.shownSource && nextProps.shownSource != shownSource) {
       const listItems = getDirectories(nextProps.shownSource, sourceTree);
 
@@ -341,18 +342,11 @@ class SourcesTree extends Component<Props, State> {
   renderProjectRootHeader() {
     const { projectRoot } = this.props;
 
-    const { sourceTree } = this.state;
-
     if (!projectRoot) {
       return null;
     }
 
-    const sourceContents = sourceTree.contents[0];
-    let rootLabel = projectRoot.split("/").pop();
-
-    if (sourceContents && sourceContents.name !== rootLabel) {
-      rootLabel = sourceContents.contents[0].name;
-    }
+    const rootLabel = projectRoot.split("/").pop();
 
     return (
       <div key="root" className="sources-clear-root-container">
@@ -460,7 +454,7 @@ const mapStateToProps = state => {
     debuggeeUrl: getDebuggeeUrl(state),
     expanded: getExpandedState(state),
     projectRoot: getProjectDirectoryRoot(state),
-    sources: getSources(state)
+    sources: getRelativeSources(state)
   };
 };
 

src/components/QuickOpenModal.js

@@ -422,10 +422,7 @@ function mapStateToProps(state) {
 
   return {
     enabled: getQuickOpenEnabled(state),
-    sources: formatSources(
-      getRelativeSources(state).toArray(),
-      getTabs(state).toArray()
-    ),
+    sources: formatSources(getRelativeSources(state), getTabs(state).toArray()),
     selectedSource,
     symbols: formatSymbols(getSymbols(state, selectedSource)),
     symbolsLoading: isSymbolsLoading(state, selectedSource),

src/selectors/getRelativeSources.js

@@ -34,7 +34,6 @@ export const getRelativeSources = createSelector(
   getProjectDirectoryRoot,
   (sources, root) => {
     return sources
-      .valueSeq()
       .filter(source => source.url && source.url.includes(root))
       .map(source => formatSource(source, root));
   }

src/utils/quick-open.js

@@ -13,6 +13,7 @@ import type { QuickOpenType } from "../reducers/quick-open";
 import type { TabList } from "../reducers/sources";
 import type { RelativeSource } from "../types";
 import type { SymbolDeclaration } from "../workers/parser";
+import type { Map } from "immutable";
 
 export const MODIFIERS = {
   "@": "functions",
@@ -125,10 +126,12 @@ export function formatShortcutResults(): Array<QuickOpenResult> {
 }
 
 export function formatSources(
-  sources: RelativeSource[],
+  sources: Map<RelativeSource>,
   tabs: TabList
 ): Array<QuickOpenResult> {
   return sources
+    .valueSeq()
+    .toArray()
     .filter(source => !isPretty(source))
     .filter(({ relativeUrl }) => !!relativeUrl)
     .map(source => formatSourcesForList(source, tabs));

src/utils/sources-tree/addToTree.js

@@ -22,19 +22,6 @@ import type { ParsedURL } from "./getURL";
 import type { Node } from "./types";
 import type { SourceRecord } from "../../types";
 
-function isUnderRoot(url, projectRoot) {
-  if (!projectRoot) {
-    return true;
-  }
-
-  return `${url.group}${url.path}`.startsWith(projectRoot);
-}
-
-function removeProjectRoot(parts, projectRoot) {
-  const rootParts = projectRoot.replace("://", "").split("/");
-  return parts.splice(0, rootParts.length - 2);
-}
-
 function createNodeInTree(
   part: string,
   path: string,
@@ -95,21 +82,12 @@ 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,
-  debuggeeHost: ?string,
-  projectRoot: string
-) {
+function traverseTree(url: Object, tree: Node, debuggeeHost: ?string) {
   url.path = decodeURIComponent(url.path);
 
   const parts = url.path.split("/").filter(p => p !== "");
   parts.unshift(url.group);
 
-  if (projectRoot) {
-    removeProjectRoot(parts, projectRoot);
-  }
-
   let path = "";
   return parts.reduce((subTree, part, index) => {
     path = path ? `${path}/${part}` : part;
@@ -172,10 +150,10 @@ export function addToTree(
   const url = getURL(source.get ? source.get("url") : source.url, debuggeeUrl);
   const debuggeeHost = getDomain(debuggeeUrl);
 
-  if (isInvalidUrl(url, source) || !isUnderRoot(url, projectRoot)) {
+  if (isInvalidUrl(url, source)) {
     return;
   }
 
-  const finalNode = traverseTree(url, tree, debuggeeHost, projectRoot);
+  const finalNode = traverseTree(url, tree, debuggeeHost);
   finalNode.contents = addSourceToNode(finalNode, url, source);
 }

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

@@ -80,8 +80,3 @@ exports[`sources-tree addToTree uses debuggeeUrl as default 1`] = `
           - TodoItem.js path=voz37vlg5.codesandbox.io/static/js/components/TodoItem.js source_id=undefined 
 "
 `;
-
-exports[`sources-tree addToTree uses projectRoot to filter the list 1`] = `
-" - root path= 
-"
-`;

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

@@ -251,40 +251,5 @@ describe("sources-tree", () => {
       sources.forEach(source => addToTree(tree, source, domain));
       expect(formatTree(tree)).toMatchSnapshot();
     });
-
-    it("uses projectRoot to filter the list", () => {
-      const testData = [
-        {
-          url: "http://example.com/components/TodoTextInput.js"
-        },
-        {
-          url: "http://example.com/components/Header.js"
-        },
-        {
-          url: "http://example.com/reducers/index.js"
-        },
-        {
-          url: "http://example.com/components/TodoItem.js"
-        },
-        {
-          url: "resource://gre/modules/ExtensionContent.jsm"
-        },
-        {
-          url:
-            "https://voz37vlg5.codesandbox.io/static/js/components/TodoItem.js"
-        },
-        {
-          url: "http://example.com/index.js"
-        }
-      ];
-
-      const domain = "http://example.com/";
-      const sources = createSourcesList(testData);
-      const root = "/example.com/components";
-
-      const tree = createNode("root", "", []);
-      sources.forEach(source => addToTree(tree, source, domain, root));
-      expect(formatTree(tree)).toMatchSnapshot();
-    });
   });
 });