Feature/history reducer 🎉 (firefox-devtools#5106)

* working replay with nice styling 🎉

* finish up test for now

* cleanup from rebase

Author: codehag

assets/images/back.svg

@@ -598,6 +598,14 @@ pauseOnUncaughtExceptions=Pause on uncaught exceptions. Click to pause on all ex
 # when the debugger will pause on all exceptions.
 pauseOnExceptions=Pause on all exceptions. Click to ignore exceptions
 
+# LOCALIZATION NOTE (replayPrevious): The replay previous button tooltip
+# when the debugger will go back in stepping history.
+replayPrevious=Go back one step in history
+
+# LOCALIZATION NOTE (replayNext): The replay next button tooltip
+# when the debugger will go forward in stepping history.
+replayNext=Go forward one step in history
+
 # LOCALIZATION NOTE (loadingText): The text that is displayed in the script
 # editor when the loading process has started but there is no file to display
 # yet.

assets/images/forward.svg

@@ -56,3 +56,4 @@ pref("devtools.debugger.features.code-coverage", false);
 pref("devtools.debugger.features.event-listeners", false);
 pref("devtools.debugger.features.code-folding", false);
 pref("devtools.debugger.features.outline", true);
+pref("devtools.debugger.features.replay", false);

assets/panel/debugger.properties

@@ -14,6 +14,7 @@ import * as fileSearch from "./file-search";
 import * as ast from "./ast";
 import * as coverage from "./coverage";
 import * as projectTextSearch from "./project-text-search";
+import * as replay from "./replay";
 import * as quickOpen from "./quick-open";
 import * as sourceTree from "./source-tree";
 import * as sources from "./sources";
@@ -33,6 +34,7 @@ export default {
   ...ast,
   ...coverage,
   ...projectTextSearch,
+  ...replay,
   ...quickOpen,
   ...sourceTree,
   ...debuggee,

assets/panel/prefs.js

@@ -0,0 +1,33 @@
+/* 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
+
+/**
+ * Redux actions for replay
+ * @module actions/replay
+ */
+
+import { getHistoryFrame } from "../selectors";
+import { selectLocation } from "./sources";
+
+export function timeTravelTo(position: Number) {
+  return ({ dispatch, getState }: any) => {
+    const data = getHistoryFrame(getState(), position);
+    dispatch({
+      type: "TRAVEL_TO",
+      data,
+      position
+    });
+    dispatch(selectLocation(data.paused.frames[0].location));
+  };
+}
+
+export function clearHistory() {
+  return ({ dispatch, getState }: any) => {
+    dispatch({
+      type: "CLEAR_HISTORY"
+    });
+  };
+}

src/actions/index.js

@@ -222,6 +222,25 @@ type UIAction =
       type: "CLOSE_PROJECT_SEARCH"
     };
 
+type ReplayAction =
+  | {
+      type: "TRAVEL_TO",
+      data: {
+        paused: {
+          why: Why,
+          scopes: Scope[],
+          frames: Frame[],
+          selectedFrameId: string,
+          loadedObjects: Object
+        },
+        expressions?: Object[]
+      },
+      position: number
+    }
+  | {
+      type: "CLEAR_HISTORY"
+    };
+
 type PauseAction =
   | { type: "BREAK_ON_NEXT", value: boolean }
   | { type: "RESUME", value: void }
@@ -397,4 +416,5 @@ export type Action =
   | FileTextSearchAction
   | ProjectTextSearchAction
   | CoverageAction
-  | DebugeeAction;
+  | DebugeeAction
+  | ReplayAction;

src/actions/replay.js

@@ -109,6 +109,21 @@ class PrimaryPanes extends Component<Props> {
     }
   }
 
+  renderOutline() {
+    const { selectLocation } = this.props;
+
+    const outlineComp = features.outline ? (
+      <Outline selectLocation={selectLocation} />
+    ) : null;
+
+    return outlineComp;
+  }
+
+  renderSources() {
+    const { sources, selectLocation } = this.props;
+    return <SourcesTree sources={sources} selectLocation={selectLocation} />;
+  }
+
   render() {
     const { selectedTab } = this.props;
 

src/actions/types.js

@@ -9,6 +9,7 @@
   overflow: hidden;
   z-index: 1;
   background-color: var(--theme-toolbar-background);
+  align-items: center;
 }
 
 html[dir="rtl"] .command-bar {
@@ -27,7 +28,10 @@ img.resume,
 img.rewind,
 img.reverseStepOver,
 img.reverseStepIn,
-img.reverseStepOut {
+img.reverseStepOut,
+img.replay-previous,
+img.replay-next,
+img.resume {
   background-color: var(--theme-body-color);
 }
 
@@ -88,6 +92,35 @@ img.reverseStepOut {
   margin-inline-start: 0.2em;
 }
 
+.command-bar .filler {
+  flex-grow: 1;
+}
+
+.command-bar img.replay-previous {
+  mask: url(/images/back.svg) no-repeat;
+  mask-size: 75%;
+  margin-top: 5px;
+}
+
+.command-bar img.replay-next {
+  mask: url(/images/forward.svg) no-repeat;
+  mask-size: 75%;
+  margin-top: 5px;
+}
+
+.command-bar .replay-inactive {
+  opacity: 0.5;
+}
+
+.command-bar .step-position {
+  color: var(--theme-comment-alt);
+  margin-inline-end: 1em;
+}
+
+.command-bar .replay-active {
+  color: var(--theme-highlight-blue);
+}
+
 .command-bar .subSettings {
   float: right;
 }

src/components/PrimaryPanes/index.js

@@ -13,6 +13,8 @@ import { features } from "../../utils/prefs";
 import {
   isPaused as getIsPaused,
   getIsWaitingOnBreak,
+  getHistory,
+  getHistoryPosition,
   getShouldPauseOnExceptions,
   getShouldIgnoreCaughtExceptions,
   getCanRewind
@@ -113,6 +115,10 @@ type Props = {
   isPaused: boolean,
   pauseOnExceptions: (boolean, boolean) => void,
   shouldPauseOnExceptions: boolean,
+  historyPosition: number,
+  history: any,
+  timeTravelTo: number => void,
+  clearHistory: () => void,
   shouldIgnoreCaughtExceptions: boolean,
   isWaitingOnBreak: boolean,
   horizontal: boolean,
@@ -153,6 +159,10 @@ class CommandBar extends Component<Props> {
     this.props[action]();
   }
 
+  setHistory(offset) {
+    this.props.timeTravelTo(this.props.historyPosition + offset);
+  }
+
   renderStepButtons() {
     const { isPaused } = this.props;
     const className = isPaused ? "active" : "disabled";
@@ -187,12 +197,17 @@ class CommandBar extends Component<Props> {
     ];
   }
 
+  resume() {
+    this.props.resume();
+    this.props.clearHistory();
+  }
+
   renderPauseButton() {
     const { isPaused, breakOnNext, isWaitingOnBreak } = this.props;
 
     if (isPaused) {
       return debugBtn(
-        this.props.resume,
+        () => this.resume(),
         "resume",
         "active",
         L10N.getFormatStr("resumeButtonTooltip", formatKey("resume"))
@@ -305,6 +320,55 @@ class CommandBar extends Component<Props> {
     ];
   }
 
+  replayPreviousButton() {
+    const historyLength = this.props.history.length;
+    if (!historyLength || !features.replay) {
+      return null;
+    }
+    const enabled = this.props.historyPosition === 0;
+    const activeClass = enabled ? "replay-inactive" : "";
+    return debugBtn(
+      () => this.setHistory(-1),
+      `replay-previous ${activeClass}`,
+      "active",
+      L10N.getStr("replayPrevious"),
+      enabled
+    );
+  }
+
+  replayNextButton() {
+    const historyLength = this.props.history.length;
+    if (!historyLength || !features.replay) {
+      return null;
+    }
+    const enabled = this.props.historyPosition + 1 === historyLength;
+    const activeClass = enabled ? "replay-inactive" : "";
+    return debugBtn(
+      () => this.setHistory(1),
+      `replay-next ${activeClass}`,
+      "active",
+      L10N.getStr("replayNext"),
+      enabled
+    );
+  }
+
+  renderStepPosition() {
+    if (!this.props.history.length || !features.replay) {
+      return null;
+    }
+    const position = this.props.historyPosition + 1;
+    const total = this.props.history.length;
+    const activePrev = position > 1 ? "replay-active" : "replay-inactive";
+    const activeNext = position < total ? "replay-active" : "replay-inactive";
+    return (
+      <div className="step-position">
+        <span className={activePrev}>{position}</span>
+        <span> | </span>
+        <span className={activeNext}>{total}</span>
+      </div>
+    );
+  }
+
   render() {
     return (
       <div
@@ -317,6 +381,10 @@ class CommandBar extends Component<Props> {
         {this.renderStepButtons()}
         {this.renderPauseOnExceptions()}
         {this.renderReverseStepButtons()}
+        <div className="filler" />
+        {this.replayPreviousButton()}
+        {this.renderStepPosition()}
+        {this.replayNextButton()}
       </div>
     );
   }
@@ -330,6 +398,8 @@ export default connect(
   state => {
     return {
       isPaused: getIsPaused(state),
+      history: getHistory(state),
+      historyPosition: getHistoryPosition(state),
       isWaitingOnBreak: getIsWaitingOnBreak(state),
       shouldPauseOnExceptions: getShouldPauseOnExceptions(state),
       shouldIgnoreCaughtExceptions: getShouldIgnoreCaughtExceptions(state),