Bug 1528855 - [release 126] Use different labels for start and end Pa…

…neToggleButtons (#7741) (#7935). r=dwalsh

devtools/client/debugger/new/src/components/shared/Button/PaneToggleButton.js

@@ -9,23 +9,34 @@ import AccessibleImage from "../AccessibleImage";
 import { CommandBarButton } from "./";
 import "./styles/PaneToggleButton.css";
 
+type Position = "start" | "end";
+
 type Props = {
   collapsed: boolean,
-  handleClick: (string, boolean) => void,
+  handleClick: (Position, boolean) => void,
   horizontal: boolean,
-  position: string
+  position: Position
 };
 
 class PaneToggleButton extends PureComponent<Props> {
   static defaultProps = {
-    horizontal: false
+    horizontal: false,
+    position: "start"
   };
 
+  label(position: Position, collapsed: boolean) {
+    switch (position) {
+      case "start":
+        return L10N.getStr(collapsed ? "expandSources" : "collapseSources");
+      case "end":
+        return L10N.getStr(
+          collapsed ? "expandBreakpoints" : "collapseBreakpoints"
+        );
+    }
+  }
+
   render() {
     const { position, collapsed, horizontal, handleClick } = this.props;
-    const title = collapsed
-      ? L10N.getStr("expandPanes")
-      : L10N.getStr("collapsePanes");
 
     return (
       <CommandBarButton
@@ -34,7 +45,7 @@ class PaneToggleButton extends PureComponent<Props> {
           vertical: !horizontal
         })}
         onClick={() => handleClick(position, !collapsed)}
-        title={title}
+        title={this.label(position, collapsed)}
       >
         <AccessibleImage
           className={collapsed ? "pane-expand" : "pane-collapse"}

devtools/client/debugger/new/src/components/shared/Button/tests/PaneToggleButton.spec.js

@@ -14,7 +14,7 @@ describe("PaneToggleButton", () => {
     <PaneToggleButton
       handleClick={handleClickSpy}
       collapsed={false}
-      position={""}
+      position="start"
     />
   );
 
@@ -44,7 +44,7 @@ describe("PaneToggleButton", () => {
   });
 
   it("handleClick is called", () => {
-    const position = "testPosition";
+    const position = "end";
     const collapsed = false;
     wrapper.setProps({ position, collapsed });
     wrapper.simulate("click");

devtools/client/debugger/new/src/components/shared/Button/tests/__snapshots__/PaneToggleButton.spec.js.snap

@@ -2,9 +2,9 @@
 
 exports[`PaneToggleButton renders default 1`] = `
 <CommandBarButton
-  className="toggle-button vertical"
+  className="toggle-button start vertical"
   onClick={[Function]}
-  title="Collapse panes"
+  title="Collapse Sources and Outline panes"
 >
   <AccessibleImage
     className="pane-collapse"

devtools/client/locales/en-US/debugger.properties

@@ -10,9 +10,13 @@
 # A good criteria is the language in which you'd find the best
 # documentation on web development on the web.
 
-# LOCALIZATION NOTE (collapsePanes): This is the tooltip for the button
-# that collapses the left and right panes in the debugger UI.
-collapsePanes=Collapse panes
+# LOCALIZATION NOTE (collapseSources): This is the tooltip for the button
+# that collapses the Sources and Outlines panes in the debugger UI.
+collapseSources=Collapse Sources and Outline panes
+
+# LOCALIZATION NOTE (collapseBreakpoints): This is the tooltip for the button
+# that collapses the Breakpoints panes in the debugger UI.
+collapseBreakpoints=Collapse Breakpoints pane
 
 # LOCALIZATION NOTE (copyToClipboard.label): This is the text that appears in the
 # context menu to copy the complete source of the open file.
@@ -58,9 +62,13 @@ copyFunction.accesskey=F
 copyStackTrace=Copy stack trace
 copyStackTrace.accesskey=c
 
-# LOCALIZATION NOTE (expandPanes): This is the tooltip for the button
-# that expands the left and right panes in the debugger UI.
-expandPanes=Expand panes
+# LOCALIZATION NOTE (expandSources): This is the tooltip for the button
+# that expands the Sources and Outlines panes in the debugger UI.
+expandSources=Expand Sources and Outline panes
+
+# LOCALIZATION NOTE (expandBreakpoints): This is the tooltip for the button
+# that expands the Breakpoints panes in the debugger UI.
+expandBreakpoints=Expand Breakpoints pane
 
 # LOCALIZATION NOTE (evaluateInConsole.label): Editor right-click menu item
 # to execute selected text in browser console.