Revert "Bug 1520957 - [release 119] Redesign call stack group (#7624). r=dwalsh"
authorJason Laster <jlaster@mozilla.com>
Sat, 19 Jan 2019 11:45:21 -0500
changeset 511717 76d8d501986a971d6a2c8eeed9c97fa16742a373
parent 511716 fdc5d44bebd186e12c48482a0c8235c05713e773
child 511718 0a4598992141595a1baba8fb30652b59b26d4358
push id10547
push userffxbld-merge
push dateMon, 21 Jan 2019 13:03:58 +0000
treeherdermozilla-beta@24ec1916bffe [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
Revert "Bug 1520957 - [release 119] Redesign call stack group (#7624). r=dwalsh" This reverts commit f2114eb41cb3a50251392bcd45f449d719a16f32.
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
@@ -2308,16 +2308,20 @@ 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);
 }
 
@@ -3760,21 +3764,16 @@ 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);
@@ -3824,22 +3823,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-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;
   column-gap: 0.5em;
   flex-direction: row;
   align-items: center;
   margin: 0;
   max-width: 100%;
@@ -3926,16 +3925,17 @@ html[dir="rtl"] .breakpoints-list .break
 .show-more:hover {
   background-color: var(--theme-toolbar-background-hover);
 }
 
 .annotation-logo {
   mask-size: 100%;
   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
@@ -94,16 +94,20 @@
   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-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;
   column-gap: 0.5em;
   flex-direction: row;
   align-items: center;
   margin: 0;
   max-width: 100%;
@@ -101,13 +101,14 @@
 .show-more:hover {
   background-color: var(--theme-toolbar-background-hover);
 }
 
 .annotation-logo {
   mask-size: 100%;
   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,13 +30,8 @@
 .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
@@ -1,42 +1,41 @@
 /* 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/>. */
 
 // @flow
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
-
-import { getLibraryFromUrl } from "../../../utils/pause/frames";
-
+import AccessibleImage from "../../shared/AccessibleImage";
+import {
+  getLibraryFromUrl,
+  formatDisplayName
+} 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, 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>
   );
 }
 
 FrameLocation.displayName = "FrameLocation";
 
 type Props = {
   group: LocalFrame[],
@@ -126,32 +125,34 @@ export default class Group extends Compo
       </div>
     );
   }
 
   renderDescription() {
     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";
     const title = l10n.getFormatStr(l10NEntry, frame.library);
 
     return (
       <li
         key={frame.id}
         className={classNames("group")}
         onClick={this.toggleFrames}
         tabIndex={0}
         title={title}
       >
-        <FrameLocation frame={frame} expanded={expanded} />
+        <span className="title">{displayName}</span>
         <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,63 +6,71 @@ 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={
@@ -151,70 +159,78 @@ 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
@@ -2,12 +2,8 @@
   /* default height an width which will likely be overrode */
   width: 12px;
   height: 12px;
   /* makes span appear like an image */
   display: inline-block;
   background: var(--theme-body-color);
   mask-size: 100%;
 }
-
-.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,12 +102,14 @@ 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(".group-description-name").textContent, "Angular",
+  is($group.querySelector(".location").textContent, "Angular",
     "Group has expected location");
 });