[Sources] Fix webpack roots (#5861)

Author: jasonLaster

src/actions/tests/ui.spec.js

@@ -102,7 +102,9 @@ describe("setProjectDirectoryRoot", () => {
     const { dispatch, getState } = store;
     await dispatch(actions.newSource(makeSource("js/scopes.js")));
     await dispatch(actions.newSource(makeSource("lib/vendor.js")));
-    dispatch(actions.setProjectDirectoryRoot("/js"));
+    dispatch(
+      actions.setProjectDirectoryRoot("http://localhost:8000/examples/js")
+    );
     const filteredSources = getRelativeSources(getState());
     const firstSource = filteredSources[0];
 

src/components/PrimaryPanes/SourcesTree.js

@@ -194,7 +194,7 @@ class SourcesTree extends Component<Props, State> {
   getIcon = (sources, item, depth) => {
     const { debuggeeUrl, projectRoot } = this.props;
 
-    if (item.path === "/Webpack") {
+    if (item.path === "webpack://") {
       return <Svg name="webpack" />;
     }
     if (item.path === "/Angular") {
@@ -307,11 +307,20 @@ class SourcesTree extends Component<Props, State> {
       >
         {arrow}
         {icon}
-        <span className="label"> {item.name} </span>
+        <span className="label"> {this.renderItemName(item.name)} </span>
       </div>
     );
   };
 
+  renderItemName(name) {
+    const hosts = {
+      "ng://": "Angular",
+      "webpack://": "Webpack"
+    };
+
+    return hosts[name] || name;
+  }
+
   renderEmptyElement(message) {
     return <div className="no-sources-message">{message}</div>;
   }

src/selectors/getRelativeSources.js

@@ -31,7 +31,6 @@ function formatSource(source: Source, root): RelativeSource {
 export function getRelativeSources(state: State): RelativeSource[] {
   const sources = getSources(state);
   const root = getProjectDirectoryRoot(state);
-
   return sources
     .valueSeq()
     .toJS()

src/test/mochitest/browser_dbg-sources.js

@@ -33,7 +33,7 @@ add_task(async function() {
 
   ok(
     expanded.has(
-      `/example.com/browser/devtools/client/debugger/new/test/mochitest/examples/nested/nested/`
+      `example.com/browser/devtools/client/debugger/new/test/mochitest/examples/nested/nested/`
     ),
     "Nodes in path are automatically expanded"
   );

src/utils/sources-tree/addToTree.js

@@ -27,7 +27,7 @@ function isUnderRoot(url, projectRoot) {
     return true;
   }
 
-  return `/${url.group}${url.path}`.startsWith(projectRoot);
+  return `${url.group}${url.path}`.startsWith(projectRoot);
 }
 
 function removeProjectRoot(parts, projectRoot) {
@@ -112,7 +112,7 @@ function traverseTree(
 
   let path = "";
   return parts.reduce((subTree, part, index) => {
-    path = `${path}/${part}`;
+    path = path ? `${path}/${part}` : part;
     const debuggeeHostIfRoot = index === 0 ? debuggeeHost : null;
     return findOrCreateNode(
       parts,

src/utils/sources-tree/getDirectories.js

@@ -34,7 +34,7 @@ function findSource(sourceTree: Node, sourceUrl: string): Node {
 
 export function getDirectories(sourceUrl: string, sourceTree: Node) {
   const url = getURL(sourceUrl);
-  const fullUrl = `/${url.group}${url.path}`;
+  const fullUrl = `${url.group}${url.path}`;
   const parentMap = createParentMap(sourceTree);
   const source = findSource(sourceTree, fullUrl);
   if (!source) {

src/utils/sources-tree/getURL.js

@@ -46,15 +46,15 @@ export function getURL(sourceUrl: string, debuggeeUrl: string = ""): ParsedURL {
       // A Webpack source is a special case
       return merge(def, {
         path: path,
-        group: "Webpack",
+        group: "webpack://",
         filename: filename
       });
 
     case "ng:":
       // An Angular source is a special case
       return merge(def, {
         path: path,
-        group: "Angular",
+        group: "ng://",
         filename: filename
       });
 

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

@@ -2,90 +2,86 @@
 
 exports[`sources-tree addToTree can add a file to an intermediate directory 1`] = `
 " - root path= 
-  - unpkg.com path=/unpkg.com 
-    - [email protected] path=/unpkg.com/[email protected] 
-      - mode path=/unpkg.com/[email protected]/mode 
-        - xml path=/unpkg.com/[email protected]/mode/xml 
-          - xml.js path=/unpkg.com/[email protected]/mode/xml/xml.js source_id=server1.conn13.child1/39 
-    - [email protected] path=/unpkg.com/[email protected] source_id=server1.conn13.child1/37 
+  - unpkg.com path=unpkg.com 
+    - [email protected] path=unpkg.com/[email protected] 
+      - mode path=unpkg.com/[email protected]/mode 
+        - xml path=unpkg.com/[email protected]/mode/xml 
+          - xml.js path=unpkg.com/[email protected]/mode/xml/xml.js source_id=server1.conn13.child1/39 
+    - [email protected] path=unpkg.com/[email protected] source_id=server1.conn13.child1/37 
 "
 `;
 
 exports[`sources-tree addToTree correctly parses file sources 1`] = `
 " - root path= 
-  - file:// path=/file:// 
-    - a path=/file:///a 
-      - b.js path=/file:///a/b.js source_id=undefined 
+  - file:// path=file:// 
+    - a path=file:///a 
+      - b.js path=file:///a/b.js source_id=undefined 
 "
 `;
 
 exports[`sources-tree addToTree does not attempt to add two of the same directory 1`] = `
 " - root path= 
-  - davidwalsh.name path=/davidwalsh.name 
+  - davidwalsh.name path=davidwalsh.name 
     - (index) path=https://davidwalsh.name/ source_id=server1.conn13.child1/37 
-    - wp-content path=/davidwalsh.name/wp-content 
-      - prism.js path=/davidwalsh.name/wp-content/prism.js source_id=server1.conn13.child1/39 
+    - wp-content path=davidwalsh.name/wp-content 
+      - prism.js path=davidwalsh.name/wp-content/prism.js source_id=server1.conn13.child1/39 
 "
 `;
 
 exports[`sources-tree addToTree does not attempt to add two of the same file 1`] = `
 " - root path= 
-  - davidwalsh.name path=/davidwalsh.name 
+  - davidwalsh.name path=davidwalsh.name 
     - (index) path=https://davidwalsh.name/ source_id=server1.conn13.child1/37 
 "
 `;
 
 exports[`sources-tree addToTree excludes javascript: URLs from the tree 1`] = `
 " - root path= 
-  - example.com path=/example.com 
-    - source1.js path=/example.com/source1.js source_id=undefined 
+  - example.com path=example.com 
+    - source1.js path=example.com/source1.js source_id=undefined 
 "
 `;
 
 exports[`sources-tree addToTree replaces a file with a directory 1`] = `
 " - root path= 
-  - unpkg.com path=/unpkg.com 
-    - [email protected] path=/unpkg.com/[email protected] 
-      - mode path=/unpkg.com/[email protected]/mode 
-        - xml path=/unpkg.com/[email protected]/mode/xml 
-          - xml.js path=/unpkg.com/[email protected]/mode/xml/xml.js source_id=server1.conn13.child1/39 
-    - [email protected] path=/unpkg.com/[email protected] source_id=server1.conn13.child1/37 
+  - unpkg.com path=unpkg.com 
+    - [email protected] path=unpkg.com/[email protected] 
+      - mode path=unpkg.com/[email protected]/mode 
+        - xml path=unpkg.com/[email protected]/mode/xml 
+          - xml.js path=unpkg.com/[email protected]/mode/xml/xml.js source_id=server1.conn13.child1/39 
+    - [email protected] path=unpkg.com/[email protected] source_id=server1.conn13.child1/37 
 "
 `;
 
 exports[`sources-tree addToTree supports data URLs 1`] = `
 " - root path= 
-  - (no domain) path=/(no domain) 
+  - (no domain) path=(no domain) 
     - data:text/html,<script>console.log(123)</script> path=data:text/html,<script>console.log(123)</script> source_id=server1.conn13.child1/39 
 "
 `;
 
 exports[`sources-tree addToTree uses debuggeeUrl as default 1`] = `
 " - root path= 
-  - localhost:4242 path=/localhost:4242 
-    - components path=/localhost:4242/components 
-      - 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 
-  - resource:// path=/resource:// 
-    - modules path=/resource:///modules 
-      - ExtensionContent.jsm path=/resource:///modules/ExtensionContent.jsm source_id=undefined 
-  - voz37vlg5.codesandbox.io path=/voz37vlg5.codesandbox.io 
-    - static path=/voz37vlg5.codesandbox.io/static 
-      - js path=/voz37vlg5.codesandbox.io/static/js 
-        - components path=/voz37vlg5.codesandbox.io/static/js/components 
-          - TodoItem.js path=/voz37vlg5.codesandbox.io/static/js/components/TodoItem.js source_id=undefined 
+  - localhost:4242 path=localhost:4242 
+    - components path=localhost:4242/components 
+      - 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 
+  - resource:// path=resource:// 
+    - modules path=resource:///modules 
+      - ExtensionContent.jsm path=resource:///modules/ExtensionContent.jsm source_id=undefined 
+  - voz37vlg5.codesandbox.io path=voz37vlg5.codesandbox.io 
+    - static path=voz37vlg5.codesandbox.io/static 
+      - js path=voz37vlg5.codesandbox.io/static/js 
+        - components path=voz37vlg5.codesandbox.io/static/js/components 
+          - 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= 
-  - components path=/components 
-    - Header.js path=/components/Header.js source_id=undefined 
-    - TodoItem.js path=/components/TodoItem.js source_id=undefined 
-    - TodoTextInput.js path=/components/TodoTextInput.js source_id=undefined 
 "
 `;

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

@@ -2,37 +2,37 @@
 
 exports[`sources tree collapseTree can collapse a single source 1`] = `
 " - root path= 
-  - example.com path=/example.com 
-    - a/b path=/example.com/a/b 
-      - c.js path=/example.com/a/b/c.js source_id=undefined 
+  - example.com path=example.com 
+    - a/b path=example.com/a/b 
+      - c.js path=example.com/a/b/c.js source_id=undefined 
 "
 `;
 
 exports[`sources tree collapseTree correctly merges in a collapsed source with a deeper level 1`] = `
 " - root path= 
-  - example.com path=/example.com 
-    - a/b path=/example.com/a/b 
-      - c/d path=/example.com/a/b/c/d 
-        - e.js path=/example.com/a/b/c/d/e.js source_id=undefined 
-      - c.js path=/example.com/a/b/c.js source_id=undefined 
+  - example.com path=example.com 
+    - a/b path=example.com/a/b 
+      - c/d path=example.com/a/b/c/d 
+        - e.js path=example.com/a/b/c/d/e.js source_id=undefined 
+      - c.js path=example.com/a/b/c.js source_id=undefined 
 "
 `;
 
 exports[`sources tree collapseTree correctly merges in a collapsed source with a shallower level 1`] = `
 " - root path= 
-  - example.com path=/example.com 
-    - a/b path=/example.com/a/b 
-      - c.js path=/example.com/a/b/c.js source_id=undefined 
-      - x.js path=/example.com/a/b/x.js source_id=undefined 
+  - example.com path=example.com 
+    - a/b path=example.com/a/b 
+      - c.js path=example.com/a/b/c.js source_id=undefined 
+      - x.js path=example.com/a/b/x.js source_id=undefined 
 "
 `;
 
 exports[`sources tree collapseTree correctly merges in a collapsed source with the same level 1`] = `
 " - root path= 
-  - example.com path=/example.com 
-    - a/b path=/example.com/a/b 
-      - c/d path=/example.com/a/b/c/d 
-        - e.js path=/example.com/a/b/c/d/e.js source_id=undefined 
-      - c.js path=/example.com/a/b/c.js source_id=undefined 
+  - example.com path=example.com 
+    - a/b path=example.com/a/b 
+      - c/d path=example.com/a/b/c/d 
+        - e.js path=example.com/a/b/c/d/e.js source_id=undefined 
+      - c.js path=example.com/a/b/c.js source_id=undefined 
 "
 `;

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

@@ -2,72 +2,72 @@
 
 exports[`sources-tree sortEntireTree alphabetically sorts children 1`] = `
 " - root path= 
-  - example.com path=/example.com 
-    - foo path=/example.com/foo 
-      - a_source3.js path=/example.com/foo/a_source3.js source_id=undefined 
-      - b_source2.js path=/example.com/foo/b_source2.js source_id=undefined 
-    - source1.js path=/example.com/source1.js source_id=undefined 
+  - example.com path=example.com 
+    - foo path=example.com/foo 
+      - a_source3.js path=example.com/foo/a_source3.js source_id=undefined 
+      - b_source2.js path=example.com/foo/b_source2.js source_id=undefined 
+    - source1.js path=example.com/source1.js source_id=undefined 
 "
 `;
 
 exports[`sources-tree sortEntireTree puts folder at the top of the sort 1`] = `
 " - root path= 
-  - example.com path=/example.com 
-    - folder path=/example.com/folder 
-      - b path=/example.com/folder/b 
-        - b.js path=/example.com/folder/b/b.js source_id=undefined 
-      - c path=/example.com/folder/c 
+  - example.com path=example.com 
+    - folder path=example.com/folder 
+      - b path=example.com/folder/b 
+        - b.js path=example.com/folder/b/b.js source_id=undefined 
+      - c path=example.com/folder/c 
         - (index) path=http://example.com/folder/c/ source_id=undefined 
-      - a.js path=/example.com/folder/a.js source_id=undefined 
+      - a.js path=example.com/folder/a.js source_id=undefined 
 "
 `;
 
 exports[`sources-tree sortEntireTree puts root debugee url at the top of the sort 1`] = `
 " - root path= 
-  - example.com path=/example.com 
-    - b.js path=/example.com/b.js source_id=undefined 
-  - api.example.com path=/api.example.com 
-    - a.js path=/api.example.com/a.js source_id=undefined 
-  - demo.com path=/demo.com 
-    - c.js path=/demo.com/c.js source_id=undefined 
+  - example.com path=example.com 
+    - b.js path=example.com/b.js source_id=undefined 
+  - api.example.com path=api.example.com 
+    - a.js path=api.example.com/a.js source_id=undefined 
+  - demo.com path=demo.com 
+    - c.js path=demo.com/c.js source_id=undefined 
 "
 `;
 
 exports[`sources-tree sortEntireTree puts root debugee url at the top of the sort 2`] = `
 " - root path= 
-  - demo.com path=/demo.com 
-    - c.js path=/demo.com/c.js source_id=undefined 
-  - api.example.com path=/api.example.com 
-    - a.js path=/api.example.com/a.js source_id=undefined 
-  - example.com path=/example.com 
-    - b.js path=/example.com/b.js source_id=undefined 
+  - demo.com path=demo.com 
+    - c.js path=demo.com/c.js source_id=undefined 
+  - api.example.com path=api.example.com 
+    - a.js path=api.example.com/a.js source_id=undefined 
+  - example.com path=example.com 
+    - b.js path=example.com/b.js source_id=undefined 
 "
 `;
 
 exports[`sources-tree sortEntireTree sorts folders first 1`] = `
 " - root path= 
-  - example.com path=/example.com 
+  - example.com path=example.com 
     - (index) path=http://example.com source_id=undefined 
-    - b.js path=/example.com/b.js 
-      - b_source.js path=/example.com/b.js/b_source.js source_id=undefined 
-    - d path=/example.com/d 
-      - d_source.js path=/example.com/d/d_source.js source_id=undefined 
-    - a.js path=/example.com/a.js source_id=undefined 
-    - b2 path=/example.com/b2 source_id=undefined 
-    - c.js path=/example.com/c.js source_id=undefined 
+    - b.js path=example.com/b.js 
+      - b_source.js path=example.com/b.js/b_source.js source_id=undefined 
+    - d path=example.com/d 
+      - d_source.js path=example.com/d/d_source.js source_id=undefined 
+    - a.js path=example.com/a.js source_id=undefined 
+    - b2 path=example.com/b2 source_id=undefined 
+    - c.js path=example.com/c.js source_id=undefined 
 "
 `;
 
 exports[`sources-tree sortEntireTree sorts folders first 2`] = `
 " - root path= 
-  - example.com path=/example.com 
+  - example.com path=example.com 
     - (index) path=http://example.com source_id=undefined 
-    - b.js path=/example.com/b.js 
-      - b_source.js path=/example.com/b.js/b_source.js source_id=undefined 
-    - d path=/example.com/d 
-      - d_source.js path=/example.com/d/d_source.js source_id=undefined 
-    - a.js path=/example.com/a.js source_id=undefined 
-    - b2 path=/example.com/b2 source_id=undefined 
-    - c.js path=/example.com/c.js source_id=undefined 
+    - b.js path=example.com/b.js 
+      - b_source.js path=example.com/b.js/b_source.js source_id=undefined 
+    - d path=example.com/d 
+      - d_source.js path=example.com/d/d_source.js source_id=undefined 
+    - a.js path=example.com/a.js source_id=undefined 
+    - b2 path=example.com/b2 source_id=undefined 
+    - c.js path=example.com/c.js source_id=undefined 
 "
 `;