Revert "Bug 1520957 - [release 119] Redesign call stack group (#7624). r=dwalsh"

This reverts commit f2114eb41cb3a50251392bcd45f449d719a16f32.

devtools/client/debugger/new/dist/debugger.css

@@ -2313,6 +2313,10 @@ menuseparator {
   color: inherit;
 }
 
+.sources-list .tree .img.arrow.expanded {
+  transform: rotate(0deg);
+}
+
 .theme-dark .source-list .tree .node.focused {
   background-color: var(--theme-tab-toolbar-background);
 }
@@ -3765,11 +3769,6 @@ html[dir="rtl"] .breakpoints-list .breakpoint .breakpoint-line {
 .frames ul .frames-group.expanded .badge {
   color: var(--theme-highlight-blue);
 }
-
-.group-description-name {
-  padding-left: 5px;
-}
-
 /* 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/>. */
@@ -3829,12 +3828,12 @@ html[dir="rtl"] .breakpoints-list .breakpoint .breakpoint-line {
 
 .frames ul {
   list-style: none;
-  margin-top: 4px;
+  margin: 0;
   padding: 0;
 }
 
 .frames ul li {
-  padding: 2px 10px 2px 20px;
+  padding: 7px 10px 7px 21px;
   overflow: hidden;
   display: flex;
   justify-content: space-between;
@@ -3931,6 +3930,7 @@ html[dir="rtl"] .breakpoints-list .breakpoint .breakpoint-line {
   mask-size: 100%;
   display: inline-block;
   width: 12px;
+  margin-inline-start: 4px;
 }
 
 :root.theme-dark .annotation-logo:not(.angular) svg path {

devtools/client/debugger/new/src/components/PrimaryPanes/Sources.css

@@ -99,6 +99,10 @@
   color: inherit;
 }
 
+.sources-list .tree .img.arrow.expanded {
+  transform: rotate(0deg);
+}
+
 .theme-dark .source-list .tree .node.focused {
   background-color: var(--theme-tab-toolbar-background);
 }

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

@@ -4,12 +4,12 @@
 
 .frames ul {
   list-style: none;
-  margin-top: 4px;
+  margin: 0;
   padding: 0;
 }
 
 .frames ul li {
-  padding: 2px 10px 2px 20px;
+  padding: 7px 10px 7px 21px;
   overflow: hidden;
   display: flex;
   justify-content: space-between;
@@ -106,6 +106,7 @@
   mask-size: 100%;
   display: inline-block;
   width: 12px;
+  margin-inline-start: 4px;
 }
 
 :root.theme-dark .annotation-logo:not(.angular) svg path {

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

@@ -35,8 +35,3 @@
 .frames ul .frames-group.expanded .badge {
   color: var(--theme-highlight-blue);
 }
-
-.group-description-name {
-  padding-left: 5px;
-}
-

devtools/client/debugger/new/src/components/SecondaryPanes/Frames/Group.js

@@ -6,11 +6,12 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
-
-import { getLibraryFromUrl } from "../../../utils/pause/frames";
-
-import FrameMenu from "./FrameMenu";
 import AccessibleImage from "../../shared/AccessibleImage";
+import {
+  getLibraryFromUrl,
+  formatDisplayName
+} from "../../../utils/pause/frames";
+import FrameMenu from "./FrameMenu";
 
 import "./Group.css";
 
@@ -19,19 +20,17 @@ import FrameComponent from "./Frame";
 import type { LocalFrame } from "./types";
 import Badge from "../../shared/Badge";
 
-type FrameLocationProps = { frame: LocalFrame, expanded: boolean };
-function FrameLocation({ frame, expanded }: FrameLocationProps) {
+type FrameLocationProps = { frame: LocalFrame };
+function FrameLocation({ frame }: FrameLocationProps) {
   const library = frame.library || getLibraryFromUrl(frame);
   if (!library) {
     return null;
   }
 
-  const arrowClassName = classNames("arrow", { expanded });
   return (
-    <span className="group-description">
-      <AccessibleImage className={arrowClassName} />
+    <span className="location">
+      {library}
       <AccessibleImage className={`annotation-logo ${library.toLowerCase()}`} />
-      <span className="group-description-name">{library}</span>
     </span>
   );
 }
@@ -131,7 +130,8 @@ export default class Group extends Component<Props, State> {
     const { l10n } = this.context;
 
     const frame = this.props.group[0];
-    const expanded = this.state.expanded;
+    const displayName = formatDisplayName(frame, undefined, l10n);
+
     const l10NEntry = this.state.expanded
       ? "callStack.group.collapseTooltip"
       : "callStack.group.expandTooltip";
@@ -145,8 +145,9 @@ export default class Group extends Component<Props, State> {
         tabIndex={0}
         title={title}
       >
-        <FrameLocation frame={frame} expanded={expanded} />
+        <span className="title">{displayName}</span>
         <Badge>{this.props.group.length}</Badge>
+        <FrameLocation frame={frame} />
       </li>
     );
   }

devtools/client/debugger/new/src/components/SecondaryPanes/Frames/tests/__snapshots__/Group.spec.js.snap

@@ -11,8 +11,15 @@ exports[`Group displays a group 1`] = `
     tabIndex={0}
     title="Show Back frames"
   >
+    <span
+      className="title"
+    >
+      foo
+    </span>
+    <Badge>
+      1
+    </Badge>
     <FrameLocation
-      expanded={false}
       frame={
         Object {
           "displayName": "foo",
@@ -20,9 +27,6 @@ exports[`Group displays a group 1`] = `
         }
       }
     />
-    <Badge>
-      1
-    </Badge>
   </li>
 </div>
 `;
@@ -39,8 +43,15 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = `
     tabIndex={0}
     title="Collapse Back frames"
   >
+    <span
+      className="title"
+    >
+      renderFoo
+    </span>
+    <Badge>
+      3
+    </Badge>
     <FrameLocation
-      expanded={true}
       frame={
         Object {
           "displayName": "renderFoo",
@@ -55,9 +66,6 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = `
         }
       }
     />
-    <Badge>
-      3
-    </Badge>
   </li>
   <div
     className="frames-list"
@@ -156,8 +164,15 @@ exports[`Group renders group with anonymous functions 1`] = `
     tabIndex={0}
     title="Show Back frames"
   >
+    <span
+      className="title"
+    >
+      &lt;anonymous&gt;
+    </span>
+    <Badge>
+      3
+    </Badge>
     <FrameLocation
-      expanded={false}
       frame={
         Object {
           "displayName": "",
@@ -172,9 +187,6 @@ exports[`Group renders group with anonymous functions 1`] = `
         }
       }
     />
-    <Badge>
-      3
-    </Badge>
   </li>
 </div>
 `;
@@ -191,8 +203,15 @@ exports[`Group renders group with anonymous functions 2`] = `
     tabIndex={0}
     title="Collapse Back frames"
   >
+    <span
+      className="title"
+    >
+      &lt;anonymous&gt;
+    </span>
+    <Badge>
+      3
+    </Badge>
     <FrameLocation
-      expanded={true}
       frame={
         Object {
           "displayName": "",
@@ -207,9 +226,6 @@ exports[`Group renders group with anonymous functions 2`] = `
         }
       }
     />
-    <Badge>
-      3
-    </Badge>
   </li>
   <div
     className="frames-list"

devtools/client/debugger/new/src/components/shared/AccessibleImage.css

@@ -7,7 +7,3 @@
   background: var(--theme-body-color);
   mask-size: 100%;
 }
-
-.img.arrow.arrow.expanded {
-  transform: rotate(0deg);
-}

devtools/client/debugger/new/test/mochitest/browser_dbg-call-stack.js

@@ -107,7 +107,9 @@ add_task(async function() {
 
   await waitForPaused(dbg);
   const $group = findElementWithSelector(dbg, ".frames .frames-group");
+  is($group.querySelector(".title").textContent,
+    "<anonymous>", "Group has expected frame title");
   is($group.querySelector(".badge").textContent, "2", "Group has expected badge");
-  is($group.querySelector(".group-description-name").textContent, "Angular",
+  is($group.querySelector(".location").textContent, "Angular",
     "Group has expected location");
 });