Removed old way of injecting timeTravel and DLL from inject_script_tags file.

package.json

@@ -27,6 +27,7 @@
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "esprima": "^4.0.1",
     "estraverse": "^4.2.0",
-    "lodash": "^4.17.11"
+    "lodash": "^4.17.11",
+    "lodash.clonedeep": "^4.5.0"
   }
 }

src/app/components/App.jsx

@@ -45,11 +45,16 @@ class App extends Component {
       isPlaying: false,
       isRecording: false,
       isPlayingIndex: 0,
+      id: 0,
+      action: {},
+      state: {},
+      prevState: {},
       eventTimes: [],
     };
 
     this.portToExtension = null;
     this.justStartedRecording = false;
+    this.hasInjectedScript = false;
 
     this.addActionToView = this.addActionToView.bind(this);
     this.toTheFuture = this.toTheFuture.bind(this);
@@ -71,9 +76,14 @@ class App extends Component {
       this.portToExtension = port;
 
       port.onMessage.addListener((msg) => {
+        // If the user paused the recording session, we return
+        const { isRecording } = this.state;
+        if (!isRecording) return;
+
         const newData = {
           action: msg.action,
           state: msg.state,
+          prevState: msg.prevState,
           id: this.state.data.length,
         };
 
@@ -115,7 +125,8 @@ class App extends Component {
 
   // functionality to change 'play' button to 'stop'
   setIsPlaying() {
-    if (this.state.isPlayingIndex >= this.state.data.length - 1) {
+    const { isPlayingIndex, data } = this.state;
+    if (isPlayingIndex >= data.length - 1) {
       return;
     }
 
@@ -130,19 +141,24 @@ class App extends Component {
 
   setIsRecording() {
     // This variable will prevent the app from refreshing when we refresh 
-    // the userpage. 
+    // the userpage.
     this.justStartedRecording = true;
-
+    const { isRecording, hasInjectedScript } = this.state;
     this.setState(state => ({
       isRecording: !state.isRecording,
     }));
 
+    // if we are hitting the pause or re-starting the record session
+    if (isRecording || hasInjectedScript) return;
+
+    this.setState({ hasInjectedScript: true });
+
     // we query the active window so we can send it to the background script
     // so it knows on which URL to run our devtool.
     chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
       const { url } = tabs[0];
 
-      // backgroundPort is a variable made avaiable by the devtools.js 
+      // backgroundPort is a variable made avaiable by the devtools.js
       backgroundPort.postMessage({
         turnOnDevtool: true,
         url,
@@ -151,11 +167,11 @@ class App extends Component {
   }
 
   actionInPlay() {
-    const { data, isPlayingIndex } = this.state;
+    const { data, isPlayingIndex, isPlaying } = this.state;
 
     setTimeout(() => {
       this.toTheFuture();
-      if (this.state.isPlaying && isPlayingIndex + 1 < data.length - 1) {
+      if (isPlaying && isPlayingIndex + 1 < data.length - 1) {
         this.actionInPlay();
       } else {
         this.setState({ isPlaying: false });
@@ -169,10 +185,10 @@ class App extends Component {
     const { data } = this.state;
     const actionToView = data.filter(action => e.target.id === String(action.id));
     const {
-      action, id, state,
+      action, id, state, prevState,
     } = actionToView[0];
     this.setState({
-      action, id, state,
+      action, id, state, prevState,
     });
   }
 
@@ -197,14 +213,15 @@ class App extends Component {
   // time travel bar change
   handleBarChange(e) {
     const { data, isPlayingIndex } = this.state;
-    const { id, action, state } = data[e.target.value];
+    const { id, action, state, prevState } = data[e.target.value];
     // forward or past
     const currentIsPlayingIndex = e.target.value;
     const forward = currentIsPlayingIndex > isPlayingIndex;
     this.setState({
       id,
       action,
       state,
+      prevState,
       isPlayingIndex: parseInt(currentIsPlayingIndex),
     });
     // Displays to screen
@@ -226,18 +243,15 @@ class App extends Component {
       direction: 'forward',
     });
 
-    // if (isPlayingIndex >= this.state.data.length - 1) isPlayingIndex = 0;
-
-    const { id, action, state } = data[isPlayingIndex + 1];
+    const { id, action, state, prevState } = data[isPlayingIndex + 1];
     this.setState(prev => ({
       ...prev,
       id,
       action,
       state,
+      prevState,
       isPlayingIndex: isPlayingIndex + 1,
     }));
-
-    console.log('isPlayingIndex', this.state.isPlayingIndex);
   }
 
   // function to travel to the PAST
@@ -251,12 +265,13 @@ class App extends Component {
       direction: 'backwards',
     });
 
-    const { id, action, state } = data[isPlayingIndex - 1];
+    const { id, action, state, prevState } = data[isPlayingIndex - 1];
     this.setState(prev => ({
       ...prev,
       id,
       action,
       state,
+      prevState,
       isPlayingIndex: isPlayingIndex - 1,
     }));
   }
@@ -275,6 +290,10 @@ class App extends Component {
       isPlaying: false,
       isRecording: false,
       isPlayingIndex: 0,
+      id: 0,
+      action: {},
+      state: {},
+      prevState: {},
     });
   }
 
@@ -284,12 +303,12 @@ class App extends Component {
       id,
       state,
       data,
-      setIsPlaying,
       isPlaying,
-      setIsRecording,
       isRecording,
       filteredData,
       searchField,
+      isPlayingIndex,
+      prevState,
       eventTimes,
     } = this.state;
 
@@ -316,6 +335,7 @@ class App extends Component {
                   action={action}
                   id={id}
                   actionState={state}
+                  prevState={prevState}
                 />
               )}
           />
@@ -324,7 +344,7 @@ class App extends Component {
             toTheFuture={this.toTheFuture}
             toThePast={this.toThePast}
             isPlaying={isPlaying}
-            isPlayingIndex={this.state.isPlayingIndex}
+            isPlayingIndex={isPlayingIndex}
             isRecording={isRecording}
             setIsPlaying={this.setIsPlaying}
             setIsRecording={this.setIsRecording}
@@ -335,4 +355,5 @@ class App extends Component {
     );
   }
 }
+
 export default App;