Bug 1486870 - [release] Redesign call stack group (#7624); r=jlast.

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

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

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

@@ -1068,6 +1068,10 @@ html[dir="rtl"] .managed-tree .tree .node > div {
   mask-size: 100%;
 }
 
+.img.arrow.arrow.expanded {
+  transform: rotate(0deg);
+}
+
 .img.arrow.arrow.expanded {
   transform: rotate(0deg);
 }
@@ -2326,10 +2330,6 @@ 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);
 }
@@ -3782,6 +3782,11 @@ 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/>. */
@@ -3841,12 +3846,12 @@ html[dir="rtl"] .breakpoints-list .breakpoint .breakpoint-line {
 
 .frames ul {
   list-style: none;
-  margin: 0;
+  margin-top: 4px;
   padding: 0;
 }
 
 .frames ul li {
-  padding: 7px 10px 7px 21px;
+  padding: 2px 10px 2px 20px;
   overflow: hidden;
   display: flex;
   justify-content: space-between;
@@ -3943,7 +3948,6 @@ 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,10 +99,6 @@
   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: 0;
+  margin-top: 4px;
   padding: 0;
 }
 
 .frames ul li {
-  padding: 7px 10px 7px 21px;
+  padding: 2px 10px 2px 20px;
   overflow: hidden;
   display: flex;
   justify-content: space-between;
@@ -106,7 +106,6 @@
   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,3 +35,7 @@
 .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,12 +6,11 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
-import AccessibleImage from "../../shared/AccessibleImage";
-import {
-  getLibraryFromUrl,
-  formatDisplayName
-} from "../../../utils/pause/frames";
+
+import { getLibraryFromUrl } from "../../../utils/pause/frames";
+
 import FrameMenu from "./FrameMenu";
+import AccessibleImage from "../../shared/AccessibleImage";
 
 import "./Group.css";
 
@@ -20,17 +19,19 @@ import FrameComponent from "./Frame";
 import type { LocalFrame } from "./types";
 import Badge from "../../shared/Badge";
 
-type FrameLocationProps = { frame: LocalFrame };
-function FrameLocation({ frame }: FrameLocationProps) {
+type FrameLocationProps = { frame: LocalFrame, expanded: boolean };
+function FrameLocation({ frame, expanded }: FrameLocationProps) {
   const library = frame.library || getLibraryFromUrl(frame);
   if (!library) {
     return null;
   }
 
+  const arrowClassName = classNames("arrow", { expanded });
   return (
-    <span className="location">
-      {library}
+    <span className="group-description">
+      <AccessibleImage className={arrowClassName} />
       <AccessibleImage className={`annotation-logo ${library.toLowerCase()}`} />
+      <span className="group-description-name">{library}</span>
     </span>
   );
 }
@@ -130,8 +131,7 @@ export default class Group extends Component<Props, State> {
     const { l10n } = this.context;
 
     const frame = this.props.group[0];
-    const displayName = formatDisplayName(frame, undefined, l10n);
-
+    const expanded = this.state.expanded;
     const l10NEntry = this.state.expanded
       ? "callStack.group.collapseTooltip"
       : "callStack.group.expandTooltip";
@@ -145,9 +145,8 @@ export default class Group extends Component<Props, State> {
         tabIndex={0}
         title={title}
       >
-        <span className="title">{displayName}</span>
+        <FrameLocation frame={frame} expanded={expanded} />
         <Badge>{this.props.group.length}</Badge>
-        <FrameLocation frame={frame} />
       </li>
     );
   }

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

@@ -7,3 +7,7 @@
   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,9 +107,7 @@ 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(".location").textContent, "Angular",
+  is($group.querySelector(".group-description-name").textContent, "Angular",
     "Group has expected location");
 });