Bug 1486870 - [release] Redesign call stack group (#7624); r=jlast.
authorMOHIT NAGPAL <32512296+nagpalm7@users.noreply.github.com>
Fri, 25 Jan 2019 17:13:11 +0000
changeset 515476 d32a5f9aaec5103290f63abc66bb727de9edf380
parent 515475 847b1ed7c06011fb07e153cf09e6b4775ba9768c
child 515477 c688c38605f9f12542afae478836c741d827fd03
push id1953
push userffxbld-merge
push dateMon, 11 Mar 2019 12:10:20 +0000
treeherdermozilla-release@9c35dcbaa899 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjlast
bugs1486870
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 1486870 - [release] Redesign call stack group (#7624); r=jlast. Differential Revision: https://phabricator.services.mozilla.com/D17373
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/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
@@ -1066,16 +1066,20 @@ html[dir="rtl"] .managed-tree .tree .nod
   display: inline-block;
   background: var(--theme-body-color);
   mask-size: 100%;
 }
 
 .img.arrow.arrow.expanded {
   transform: rotate(0deg);
 }
+
+.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;
@@ -2321,20 +2325,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);
 }
 
@@ -3777,16 +3777,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);
@@ -3836,22 +3841,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%;
@@ -3938,17 +3943,16 @@ 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,20 +94,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%;
@@ -101,14 +101,13 @@
 .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,8 +30,12 @@
 .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,41 +1,42 @@
 /* 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 FrameMenu from "./FrameMenu";
 import AccessibleImage from "../../shared/AccessibleImage";
-import {
-  getLibraryFromUrl,
-  formatDisplayName
-} from "../../../utils/pause/frames";
-import FrameMenu from "./FrameMenu";
 
 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} />
       <AccessibleImage className={`annotation-logo ${library.toLowerCase()}`} />
+      <span className="group-description-name">{library}</span>
     </span>
   );
 }
 
 FrameLocation.displayName = "FrameLocation";
 
 type Props = {
   group: LocalFrame[],
@@ -125,34 +126,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/shared/AccessibleImage.css
+++ b/devtools/client/debugger/new/src/components/shared/AccessibleImage.css
@@ -2,8 +2,12 @@
   /* 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,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");
 });