Add a title to Group component description element.

Fixes firefox-devtools#7209. This adds a title to the group component that indicates it can be expanded/collapsed. Two location entries are added to handle both collapsed and expanded state.
nchevobbe · Nov 16, 2018 · 4bb14ab · 4bb14ab
1 parent 55f610a
commit 4bb14ab
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 6 deletions.
diff --git a/assets/panel/debugger.properties b/assets/panel/debugger.properties
@@ -416,6 +416,18 @@ callStack.collapse=Collapse rows
 # message to show more of the frames.
 callStack.expand=Expand rows
 
+# LOCALIZATION NOTE (callStack.group.expandTooltip): The text that will appear
+# when hovering a collapsed Group of frames in the callStack panel. `frames` is
+# always plural since a group can only exist if it contain more that 1 frame.
+# %S is replaced by the name of the library of the frames in the group.
+callStack.group.expandTooltip=Show %S frames
+
+# LOCALIZATION NOTE (callStack.group.collapseTooltip): The text that will appear
+# when hovering an expanded Group of frames in the callStack panel. `frames` is
+# always plural since a group can only exist if it contain more that 1 frame.
+# %S is replaced by the name of the library of the frames in the group.
+callStack.group.collapseTooltip=Collapse %S frames
+
 # LOCALIZATION NOTE (components.header): Header for the
 # Framework Components pane in the right sidebar.
 components.header=Components

diff --git a/src/components/SecondaryPanes/Frames/Group.js b/src/components/SecondaryPanes/Frames/Group.js
@@ -4,6 +4,7 @@
 
 // @flow
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import classNames from "classnames";
 import Svg from "../../shared/Svg";
 import {
@@ -127,12 +128,20 @@ export default class Group extends Component<Props, State> {
   renderDescription() {
     const frame = this.props.group[0];
     const displayName = formatDisplayName(frame);
+
+    const l10NEntry = this.state.expanded
+      ? "callStack.group.collapseTooltip"
+      : "callStack.group.expandTooltip";
+    const { l10n } = this.context;
+    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>
         <Badge>{this.props.group.length}</Badge>
@@ -157,3 +166,4 @@ export default class Group extends Component<Props, State> {
 }
 
 Group.displayName = "Group";
+Group.contextTypes = { l10n: PropTypes.object };
diff --git a/src/components/SecondaryPanes/Frames/tests/Group.spec.js b/src/components/SecondaryPanes/Frames/tests/Group.spec.js
@@ -11,7 +11,7 @@ jest.mock("../FrameMenu", () => jest.fn());
 
 function render(overrides = {}) {
   const defaultProps = {
-    group: [{ displayName: "foo" }],
+    group: [{ displayName: "foo", library: "Back" }],
     selectedFrame: {},
     frameworkGroupingOn: true,
     toggleFrameworkGrouping: jest.fn(),
@@ -21,7 +21,9 @@ function render(overrides = {}) {
   };
 
   const props = { ...defaultProps, ...overrides };
-  const component = shallow(<Group {...props} />);
+  const component = shallow(<Group {...props} />, {
+    context: { l10n: L10N }
+  });
   return { component, props };
 }
 
@@ -35,6 +37,7 @@ describe("Group", () => {
     const group = [
       {
         id: 1,
+        library: "Back",
         displayName: "renderFoo",
         location: {
           line: 55
@@ -45,7 +48,7 @@ describe("Group", () => {
       },
       {
         id: 2,
-        library: "back",
+        library: "Back",
         displayName: "a",
         location: {
           line: 55
@@ -56,7 +59,7 @@ describe("Group", () => {
       },
       {
         id: 3,
-        library: "back",
+        library: "Back",
         displayName: "b",
         location: {
           line: 55

diff --git a/src/components/SecondaryPanes/Frames/tests/__snapshots__/Group.spec.js.snap b/src/components/SecondaryPanes/Frames/tests/__snapshots__/Group.spec.js.snap
@@ -9,6 +9,7 @@ exports[`Group displays a group 1`] = `
     className="group"
     onClick={[Function]}
     tabIndex={0}
+    title="Show Back frames"
   >
     <span
       className="title"
@@ -22,6 +23,7 @@ exports[`Group displays a group 1`] = `
       frame={
         Object {
           "displayName": "foo",
+          "library": "Back",
         }
       }
     />
@@ -39,6 +41,7 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = `
     key="1"
     onClick={[Function]}
     tabIndex={0}
+    title="Collapse Back frames"
   >
     <span
       className="title"
@@ -53,6 +56,7 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = `
         Object {
           "displayName": "renderFoo",
           "id": 1,
+          "library": "Back",
           "location": Object {
             "line": 55,
           },
@@ -73,6 +77,7 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = `
         Object {
           "displayName": "renderFoo",
           "id": 1,
+          "library": "Back",
           "location": Object {
             "line": 55,
           },
@@ -98,7 +103,7 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = `
         Object {
           "displayName": "a",
           "id": 2,
-          "library": "back",
+          "library": "Back",
           "location": Object {
             "line": 55,
           },
@@ -124,7 +129,7 @@ exports[`Group passes the getFrameTitle prop to the Frame components 1`] = `
         Object {
           "displayName": "b",
           "id": 3,
-          "library": "back",
+          "library": "Back",
           "location": Object {
             "line": 55,
           },