Bug 1626306 - Improve framework groups with async stacks. r=davidwalsh

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

--HG--
extra : moz-landing-system : lando

devtools/client/debugger/src/components/SecondaryPanes/Frames/Frames.css

@@ -27,7 +27,7 @@
 
 .frames .badge {
   flex-shrink: 0;
-  margin-inline-end: 4px;
+  margin-inline-end: 10px;
 }
 
 .frames .location {

devtools/client/debugger/src/utils/pause/frames/getLibraryFromUrl.js

@@ -12,6 +12,10 @@ const libraryMap = [
     label: "Backbone",
     pattern: /backbone/i,
   },
+  {
+    label: "Babel",
+    pattern: /node_modules\/@babel/i,
+  },
   {
     label: "jQuery",
     pattern: /jquery/i,

devtools/client/debugger/src/utils/pause/frames/tests/__snapshots__/collapseFrames.spec.js.snap

@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`collapseFrames default 1`] = `
+Array [
+  Object {
+    "displayName": "a",
+  },
+  Array [
+    Object {
+      "displayName": "b",
+      "library": "React",
+    },
+    Object {
+      "displayName": "c",
+      "library": "React",
+    },
+  ],
+]
+`;
+
+exports[`collapseFrames promises 1`] = `
+Array [
+  Object {
+    "displayName": "a",
+  },
+  Array [
+    Object {
+      "displayName": "b",
+      "library": "React",
+    },
+    Object {
+      "displayName": "c",
+      "library": "React",
+    },
+  ],
+  Object {
+    "asyncCause": "promise callback",
+    "displayName": "d",
+    "library": undefined,
+  },
+  Array [
+    Object {
+      "displayName": "e",
+      "library": "React",
+    },
+    Object {
+      "displayName": "f",
+      "library": "React",
+    },
+  ],
+  Object {
+    "asyncCause": null,
+    "displayName": "g",
+    "library": undefined,
+  },
+]
+`;

devtools/client/debugger/src/utils/pause/frames/tests/collapseFrames.spec.js

@@ -0,0 +1,37 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+import { collapseFrames } from "../collapseFrames";
+
+describe("collapseFrames", () => {
+  it("default", () => {
+    const groups = collapseFrames([
+      { displayName: "a" },
+
+      { displayName: "b", library: "React" },
+      { displayName: "c", library: "React" },
+    ]);
+
+    expect(groups).toMatchSnapshot();
+  });
+
+  it("promises", () => {
+    const groups = collapseFrames([
+      { displayName: "a" },
+
+      { displayName: "b", library: "React" },
+      { displayName: "c", library: "React" },
+      {
+        displayName: "d",
+        library: undefined,
+        asyncCause: "promise callback",
+      },
+      { displayName: "e", library: "React" },
+      { displayName: "f", library: "React" },
+      { displayName: "g", library: undefined, asyncCause: null },
+    ]);
+
+    expect(groups).toMatchSnapshot();
+  });
+});