Bug 1520957 - [release 119] Redesign call stack group (#7624). r=dwalsh
☠☠ backed out by 5b1c54cbac38 ☠ ☠
authorMOHIT NAGPAL <32512296+nagpalm7@users.noreply.github.com>
Fri, 18 Jan 2019 12:08:13 -0500
changeset 454571 20c18820bfa077beeb5f54fd63342edc82269cb4
parent 454570 4cc5d60694d28bb6ee7eedd171e175de62bc0848
child 454572 ea1cf6443c80c01aaa99d8d11d143bdd24dc2a3d
push id35400
push usercsabou@mozilla.com
push dateSat, 19 Jan 2019 09:59:33 +0000
treeherdermozilla-central@f90bab5af97e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdwalsh
bugs1520957
milestone66.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1520957 - [release 119] Redesign call stack group (#7624). r=dwalsh
devtools/client/debugger/new/dist/debugger.css
devtools/client/debugger/new/src/components/PrimaryPanes/Sources.css
devtools/client/debugger/new/src/components/SecondaryPanes/Frames/Frames.css
devtools/client/debugger/new/src/components/SecondaryPanes/Frames/Group.css
devtools/client/debugger/new/src/components/SecondaryPanes/Frames/Group.js
devtools/client/debugger/new/src/components/SecondaryPanes/Frames/tests/__snapshots__/Group.spec.js.snap
devtools/client/debugger/new/src/components/shared/AccessibleImage.css
devtools/client/debugger/new/test/mochitest/browser_dbg-call-stack.js
--- a/devtools/client/debugger/new/dist/debugger.css
+++ b/devtools/client/debugger/new/dist/debugger.css
@@ -1269,16 +1269,20 @@ html[dir="rtl"] .managed-tree .tree .nod
 }
 .img {
   /* default height an width which will likely be overrode */
   width: 12px;
   height: 12px;
   /* makes span appear like an image */
   display: inline-block;
 }
+
+.img.arrow.arrow.expanded {
+  transform: rotate(0deg);
+}
 /* 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/>. */
 
 .close-btn {
   width: 14px;
   height: 14px;
   border: 1px solid transparent;
@@ -2123,20 +2127,16 @@ menuseparator {
   font-size: 0.9em;
   color: var(--theme-comment);
 }
 
 .sources-list .tree .focused .label .suffix {
   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);
 }
 
 .sources-list .tree .focused .label {
   background-color: var(--theme-selection-background);
 }
 
@@ -3568,16 +3568,21 @@ html[dir="rtl"] .breakpoints-list .break
 .frames ul .frames-group .frames-list {
   border-top: 1px solid var(--theme-splitter-color);
   border-bottom: 1px solid var(--theme-splitter-color);
 }
 
 .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/>. */
 
 .badge {
   --size: 17px;
   --radius: calc(var(--size) / 2);
   height: var(--size);
@@ -3627,22 +3632,22 @@ html[dir="rtl"] .breakpoints-list .break
   font-style: normal;
 }
 /* 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/>. */
 
 .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;
   column-gap: 0.5em;
   flex-direction: row;
   align-items: center;
   margin: 0;
   max-width: 100%;
@@ -3728,17 +3733,16 @@ html[dir="rtl"] .breakpoints-list .break
 
 .show-more:hover {
   background-color: var(--theme-toolbar-background-hover);
 }
 
 .annotation-logo {
   display: inline-block;
   width: 12px;
-  margin-inline-start: 4px;
 }
 
 :root.theme-dark .annotation-logo:not(.angular) svg path {
   fill: var(--theme-highlight-blue);
 }
 /* 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/>. */
--- a/devtools/client/debugger/new/src/components/PrimaryPanes/Sources.css
+++ b/devtools/client/debugger/new/src/components/PrimaryPanes/Sources.css
@@ -98,20 +98,16 @@
   font-size: 0.9em;
   color: var(--theme-comment);
 }
 
 .sources-list .tree .focused .label .suffix {
   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);
 }
 
 .sources-list .tree .focused .label {
   background-color: var(--theme-selection-background);
 }
 
--- a/devtools/client/debugger/new/src/components/SecondaryPanes/Frames/Frames.css
+++ b/devtools/client/debugger/new/src/components/SecondaryPanes/Frames/Frames.css
@@ -1,20 +1,20 @@
 /* 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/>. */
 
 .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;
   column-gap: 0.5em;
   flex-direction: row;
   align-items: center;
   margin: 0;
   max-width: 100%;
@@ -100,14 +100,13 @@
 
 .show-more:hover {
   background-color: var(--theme-toolbar-background-hover);
 }
 
 .annotation-logo {
   display: inline-block;
   width: 12px;
-  margin-inline-start: 4px;
 }
 
 :root.theme-dark .annotation-logo:not(.angular) svg path {
   fill: var(--theme-highlight-blue);
 }
--- a/devtools/client/debugger/new/src/components/SecondaryPanes/Frames/Group.css
+++ b/devtools/client/debugger/new/src/components/SecondaryPanes/Frames/Group.css
@@ -30,8 +30,13 @@
 .frames ul .frames-group .frames-list {
   border-top: 1px solid var(--theme-splitter-color);
   border-bottom: 1px solid var(--theme-splitter-color);
 }
 
 .frames ul .frames-group.expanded .badge {
   color: var(--theme-highlight-blue);
 }
+
+.group-description-name {
+  padding-left: 5px;
+}
+
--- a/devtools/client/debugger/new/src/components/SecondaryPanes/Frames/Group.js
+++ b/devtools/client/debugger/new/src/components/SecondaryPanes/Frames/Group.js
@@ -2,40 +2,40 @@
  * 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/>. */
 
 // @flow
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
 import Svg from "../../shared/Svg";
-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";
 
 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} />
       <Svg name={library.toLowerCase()} className="annotation-logo" />
+      <span className="group-description-name">{library}</span>
     </span>
   );
 }
 
 FrameLocation.displayName = "FrameLocation";
 
 type Props = {
   group: LocalFrame[],
@@ -125,34 +125,32 @@ export default class Group extends Compo
       </div>
     );
   }
 
   renderDescription() {
     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";
     const title = l10n.getFormatStr(l10NEntry, frame.library);
 
     return (
       <li
         key={frame.id}
         className={classNames("group")}
         onClick={this.toggleFrames}
         tabIndex={0}
         title={title}
       >
-        <span className="title">{displayName}</span>
+        <FrameLocation frame={frame} expanded={expanded} />
         <Badge>{this.props.group.length}</Badge>
-        <FrameLocation frame={frame} />
       </li>
     );
   }
 
   render() {
     const { expanded } = this.state;
     const { disableContextMenu } = this.props;
     return (
--- a/devtools/client/debugger/new/src/components/SecondaryPanes/Frames/tests/__snapshots__/Group.spec.js.snap
+++ b/devtools/client/debugger/new/src/components/SecondaryPanes/Frames/tests/__snapshots__/Group.spec.js.snap
@@ -6,71 +6,63 @@ exports[`Group displays a group 1`] = `
   onContextMenu={[Function]}
 >
   <li
     className="group"
     onClick={[Function]}
     tabIndex={0}
     title="Show Back frames"
   >
-    <span
-      className="title"
-    >
-      foo
-    </span>
-    <Badge>
-      1
-    </Badge>
     <FrameLocation
+      expanded={false}
       frame={
         Object {
           "displayName": "foo",
           "library": "Back",
         }
       }
     />
+    <Badge>
+      1
+    </Badge>
   </li>
 </div>
 `;
 
 exports[`Group passes the getFrameTitle prop to the Frame components 1`] = `
 <div
   className="frames-group expanded"
   onContextMenu={[Function]}
 >
   <li
     className="group"
     key="1"
     onClick={[Function]}
     tabIndex={0}
     title="Collapse Back frames"
   >
-    <span
-      className="title"
-    >
-      renderFoo
-    </span>
-    <Badge>
-      3
-    </Badge>
     <FrameLocation
+      expanded={true}
       frame={
         Object {
           "displayName": "renderFoo",
           "id": 1,
           "library": "Back",
           "location": Object {
             "line": 55,
           },
           "source": Object {
             "url": "http://myfile.com/mahscripts.js",
           },
         }
       }
     />
+    <Badge>
+      3
+    </Badge>
   </li>
   <div
     className="frames-list"
   >
     <Frame
       copyStackTrace={[MockFunction]}
       disableContextMenu={false}
       frame={
@@ -159,78 +151,70 @@ exports[`Group renders group with anonym
 >
   <li
     className="group"
     key="1"
     onClick={[Function]}
     tabIndex={0}
     title="Show Back frames"
   >
-    <span
-      className="title"
-    >
-      &lt;anonymous&gt;
-    </span>
-    <Badge>
-      3
-    </Badge>
     <FrameLocation
+      expanded={false}
       frame={
         Object {
           "displayName": "",
           "id": 1,
           "library": "Back",
           "location": Object {
             "line": 55,
           },
           "source": Object {
             "url": "http://myfile.com/mahscripts.js",
           },
         }
       }
     />
+    <Badge>
+      3
+    </Badge>
   </li>
 </div>
 `;
 
 exports[`Group renders group with anonymous functions 2`] = `
 <div
   className="frames-group expanded"
   onContextMenu={[Function]}
 >
   <li
     className="group"
     key="1"
     onClick={[Function]}
     tabIndex={0}
     title="Collapse Back frames"
   >
-    <span
-      className="title"
-    >
-      &lt;anonymous&gt;
-    </span>
-    <Badge>
-      3
-    </Badge>
     <FrameLocation
+      expanded={true}
       frame={
         Object {
           "displayName": "",
           "id": 1,
           "library": "Back",
           "location": Object {
             "line": 55,
           },
           "source": Object {
             "url": "http://myfile.com/mahscripts.js",
           },
         }
       }
     />
+    <Badge>
+      3
+    </Badge>
   </li>
   <div
     className="frames-list"
   >
     <Frame
       copyStackTrace={[MockFunction]}
       disableContextMenu={false}
       frame={
--- a/devtools/client/debugger/new/src/components/shared/AccessibleImage.css
+++ b/devtools/client/debugger/new/src/components/shared/AccessibleImage.css
@@ -1,7 +1,11 @@
 .img {
   /* default height an width which will likely be overrode */
   width: 12px;
   height: 12px;
   /* makes span appear like an image */
   display: inline-block;
 }
+
+.img.arrow.arrow.expanded {
+  transform: rotate(0deg);
+}
--- a/devtools/client/debugger/new/test/mochitest/browser_dbg-call-stack.js
+++ b/devtools/client/debugger/new/test/mochitest/browser_dbg-call-stack.js
@@ -102,14 +102,12 @@ add_task(async function() {
   is(found, null, "Call stack is hidden");
 
   ContentTask.spawn(gBrowser.selectedBrowser, null, function() {
     content.document.querySelector("button.pause").click();
   });
 
   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");
 });