Bug 1575987 - Update stepping buttons. r=bhackett

Differential Revision: https://phabricator.services.mozilla.com/D43164

--HG--
extra : moz-landing-system : lando

devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js

@@ -132,15 +132,12 @@ class CommandBar extends Component<Props> {
   }
 
   renderStepButtons() {
-    const { cx, canRewind } = this.props;
+    const { cx } = this.props;
     const className = cx.isPaused ? "active" : "disabled";
     const isDisabled = !cx.isPaused;
 
-    if (canRewind || (!cx.isPaused && features.removeCommandBarOptions)) {
-      return;
-    }
-
     return [
+      this.renderPauseButton(),
       debugBtn(
         () => this.props.stepOver(cx),
         "stepOver",
@@ -170,12 +167,9 @@ class CommandBar extends Component<Props> {
   }
 
   renderPauseButton() {
-    const { cx, breakOnNext, isWaitingOnBreak, canRewind } = this.props;
+    const { cx, breakOnNext, isWaitingOnBreak } = this.props;
 
     if (cx.isPaused) {
-      if (canRewind) {
-        return null;
-      }
       return debugBtn(
         () => this.resume(),
         "resume",
@@ -184,10 +178,6 @@ class CommandBar extends Component<Props> {
       );
     }
 
-    if (features.removeCommandBarOptions && !this.props.canRewind) {
-      return;
-    }
-
     if (isWaitingOnBreak) {
       return debugBtn(
         null,
@@ -206,58 +196,64 @@ class CommandBar extends Component<Props> {
     );
   }
 
-  renderTimeTravelButtons() {
-    const { cx, canRewind } = this.props;
+  renderReplayButtons() {
+    const { cx } = this.props;
 
-    if (!canRewind || !cx.isPaused) {
-      return null;
-    }
-
-    const isDisabled = !cx.isPaused;
+    const className = cx.isPaused ? "active" : "disabled";
 
     return [
       debugBtn(
-        () => this.props.rewind(cx),
-        "rewind",
-        "active",
-        "Rewind Execution"
-      ),
-
-      debugBtn(
-        () => this.props.resume(cx),
-        "resume",
-        "active",
-        L10N.getFormatStr("resumeButtonTooltip", formatKey("resume"))
+        () => this.props.breakOnNext(cx),
+        "pause",
+        !cx.isPaused ? "active" : "disabled",
+        L10N.getFormatStr("pauseButtonTooltip", formatKey("resume")),
+        cx.isPaused
       ),
       <div key="divider-1" className="divider" />,
+      debugBtn(
+        () => this.props.rewind(cx),
+        "rewind",
+        className,
+        "Rewind Execution",
+        !cx.isPaused
+      ),
+      debugBtn(
+        () => this.props.resume(cx),
+        "resume",
+        className,
+        L10N.getFormatStr("resumeButtonTooltip", formatKey("resume")),
+        !cx.isPaused
+      ),
+      <div key="divider-2" className="divider" />,
       debugBtn(
         () => this.props.reverseStepOver(cx),
         "reverseStepOver",
-        "active",
-        "Reverse step over"
+        className,
+        "Reverse step over",
+        !cx.isPaused
       ),
       debugBtn(
         () => this.props.stepOver(cx),
         "stepOver",
-        "active",
+        className,
         L10N.getFormatStr("stepOverTooltip", formatKey("stepOver")),
-        isDisabled
+        !cx.isPaused
       ),
-      <div key="divider-2" className="divider" />,
+      <div key="divider-3" className="divider" />,
       debugBtn(
         () => this.props.stepOut(cx),
         "stepOut",
-        "active",
+        className,
         L10N.getFormatStr("stepOutTooltip", formatKey("stepOut")),
-        isDisabled
+        !cx.isPaused
       ),
 
       debugBtn(
         () => this.props.stepIn(cx),
         "stepIn",
-        "active",
+        className,
         L10N.getFormatStr("stepInTooltip", formatKey("stepIn")),
-        isDisabled
+        !cx.isPaused
       ),
     ];
   }
@@ -297,10 +293,9 @@ class CommandBar extends Component<Props> {
           vertical: !this.props.horizontal,
         })}
       >
-        {this.renderPauseButton()}
-        {this.renderStepButtons()}
-
-        {this.renderTimeTravelButtons()}
+        {this.props.canRewind
+          ? this.renderReplayButtons()
+          : this.renderStepButtons()}
         <div className="filler" />
         {this.renderSkipPausingButton()}
       </div>

devtools/client/debugger/src/components/shared/Button/styles/CommandBarButton.css

@@ -15,7 +15,7 @@
 }
 
 .command-bar-button:disabled {
-  opacity: 0.8;
+  opacity: 0.6;
   cursor: default;
 }