Bug 1777459 - [devtools] Set final group name for Webpack and Angular sources. r=bomsy

See previous changeset. This applies the same simplification for Webpack and Angular groups.

Differential Revision: https://phabricator.services.mozilla.com/D150746

devtools/client/debugger/src/components/PrimaryPanes/SourcesTreeItem.js

@@ -272,9 +272,9 @@ class SourceTreeItem extends Component {
   renderIcon(item, depth) {
     const { projectRoot, source, hasPrettyTab, threads } = this.props;
 
-    if (item.name === "webpack://") {
+    if (item.name === "Webpack") {
       return <AccessibleImage className="webpack" />;
-    } else if (item.name === "ng://") {
+    } else if (item.name === "Angular") {
       return <AccessibleImage className="angular" />;
     }
 
@@ -358,14 +358,7 @@ class SourceTreeItem extends Component {
       }
     }
 
-    switch (item.name) {
-      case "ng://":
-        return "Angular";
-      case "webpack://":
-        return "Webpack";
-      default:
-        return `${unescape(item.name)}`;
-    }
+    return unescape(item.name);
   }
 
   renderItemTooltip() {

devtools/client/debugger/src/components/PrimaryPanes/tests/__snapshots__/SourcesTreeItem.spec.js.snap

@@ -2037,12 +2037,12 @@ Object {
       className="arrow"
     />
     <AccessibleImage
-      className="angular"
+      className="folder"
     />
     <span
       className="label"
     >
-      Angular
+      ng://
     </span>
   </div>,
   "defaultState": null,
@@ -2216,12 +2216,12 @@ Object {
             className="arrow"
           />
           <AccessibleImage
-            className="angular"
+            className="folder"
           />
           <span
             className="label"
           >
-            Angular
+            ng://
           </span>
         </div>,
         "_rendering": false,
@@ -3656,12 +3656,12 @@ Object {
       className="arrow"
     />
     <AccessibleImage
-      className="webpack"
+      className="folder"
     />
     <span
       className="label"
     >
-      Webpack
+      webpack://
     </span>
   </div>,
   "defaultState": null,
@@ -3835,12 +3835,12 @@ Object {
             className="arrow"
           />
           <AccessibleImage
-            className="webpack"
+            className="folder"
           />
           <span
             className="label"
           >
-            Webpack
+            webpack://
           </span>
         </div>,
         "_rendering": false,

devtools/client/debugger/src/utils/sources-tree/getURL.js

@@ -68,15 +68,21 @@ export function getDisplayURL(url, extensionName = null) {
         group: `${protocol}//${host || ""}`,
       };
     case "webpack:":
+      return {
+        ...def,
+        path: pathname,
+        search,
+        filename,
+        group: `Webpack`,
+      };
     case "ng:":
       return {
         ...def,
         path: pathname,
         search,
         filename,
-        group: `${protocol}//`,
+        group: `Angular`,
       };
-
     case "about:":
       // An about page is a special case
       return {

devtools/client/debugger/src/utils/sources-tree/tests/addToTree.spec.js

@@ -92,7 +92,7 @@ describe("sources-tree", () => {
       expect(tree.contents).toHaveLength(1);
 
       const base = tree.contents[0];
-      expect(base.name).toBe("webpack://");
+      expect(base.name).toBe("Webpack");
       expect(base.contents).toHaveLength(1);
 
       const fooNode = base.contents[0];
@@ -115,7 +115,7 @@ describe("sources-tree", () => {
       expect(tree.contents).toHaveLength(1);
 
       const base = tree.contents[0];
-      expect(base.name).toBe("webpack://");
+      expect(base.name).toBe("Webpack");
       expect(base.contents).toHaveLength(1);
 
       const userNode = base.contents[0];

devtools/client/debugger/src/utils/sources-tree/tests/getUrl.spec.js

@@ -40,11 +40,11 @@ describe("getUrl", () => {
 
   it("creates a group name for webpack", () => {
     const urlObject = getDisplayURL("webpack:///src/component.jsx");
-    expect(urlObject.group).toBe("webpack://");
+    expect(urlObject.group).toBe("Webpack");
   });
 
   it("creates a group name for angular source", () => {
     const urlObject = getDisplayURL("ng://src/component.jsx");
-    expect(urlObject.group).toBe("ng://");
+    expect(urlObject.group).toBe("Angular");
   });
 });