Connected frontend changes with chrome extension. Play button now changes the app while playing

Author: victorvrv

src/app/components/App.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, Component } from 'react';
+import React, { Component } from 'react';
 import { createGlobalStyle } from 'styled-components';
 
 // containers
@@ -48,7 +48,7 @@ class App extends Component {
     };
 
     this.portToExtension = null;
-    
+
     this.addActionToView = this.addActionToView.bind(this);
     this.toTheFuture = this.toTheFuture.bind(this);
     this.toThePast = this.toThePast.bind(this);
@@ -82,6 +82,7 @@ class App extends Component {
         }));
       });
     });
+  }
 
   // functionality to change 'play' button to 'stop'
   setIsPlaying() {
@@ -120,17 +121,19 @@ class App extends Component {
 
   actionInPlay() {
     let { isPlayingIndex } = this.state;
-    if (isPlayingIndex >= this.state.data.length - 1) isPlayingIndex = 0;
+    const { isPlaying, data } = this.state;
+
+    if (isPlayingIndex >= data.length - 1) isPlayingIndex = 0;
 
     this.setState({ isPlayingIndex: isPlayingIndex + 1 });
-    const { id, action, state } = this.state.data[isPlayingIndex + 1];
-    this.toThePast();
+    const { id, action, state } = data[isPlayingIndex + 1];
+    this.toTheFuture();
 
     setTimeout(() => {
       this.setState((prev, props) => {
         return { ...prev, id, action, state };
       });
-      if (this.state.isPlaying && isPlayingIndex + 1 < this.state.data.length - 1) {
+      if (isPlaying && isPlayingIndex + 1 < data.length - 1) {
         this.actionInPlay();
       } else {
         this.setState({ isPlaying: false });
@@ -201,7 +204,6 @@ class App extends Component {
   }
 
   render() {
-    console.log(this.state.isPlayingIndex);
     const {
       action,
       id,

src/app/components/DetailCards/DetailsNav.jsx

@@ -1,10 +1,8 @@
-import React, { useState } from 'react';
-
-let NavLink = require('react-router-dom').NavLink;
-
+import React from 'react';
 // styled component imports
 import { Buttons, Button, DetailsNavWrapper } from '../../styles/Nav.jsx';
 
+const { NavLink } = require('react-router-dom');
 
 export default function RightNav(props) {
   return (

src/app/container/Details.jsx

@@ -15,7 +15,6 @@ import StateDisplay from '../components/DetailCards/State/StateDisplay.jsx'
 
 
 export default function Details(props) {
-
   // destructuring required info that's being passed down from App.jsx
   // passing these props onto children
   const {

src/browser/chrome/background.js

@@ -1,13 +1,22 @@
 const parseAndGenerate = require('./scripts/parser');
 
+let portToDevtools;
+const msgsToPanel = [];
+
 chrome.tabs.onUpdated.addListener((id, info, tab) => {
   if (tab.status !== 'complete' || tab.url.startsWith('chrome')) return;
 
+  // active page action button and inject extension.js
   chrome.pageAction.show(tab.id);
   chrome.tabs.executeScript(null, {
     file: 'extension.js',
     runAt: 'document_end',
   });
+
+  // refresh devtool panel everytime we refresh webpage
+  // console.log('port: ', portToDevtools);
+  // if (portToDevtools) portToDevtools.postMessage({ action: 'refresh_devtool' });
+  // else msgsToPanel.push({ action: 'refresh_devtool' });
 });
 
 
@@ -29,7 +38,6 @@ function handleRequest(request) {
     const syncRequest = new XMLHttpRequest();
     syncRequest.open('GET', request.url, false);
     syncRequest.send(null);
-    console.log(`Status: ${syncRequest.status} - Size of response: ${syncRequest.responseText.length}`);
 
     sendMessageToContent(parseAndGenerate(syncRequest.responseText));
 
@@ -40,6 +48,18 @@ function handleRequest(request) {
 // The App on the devtools panel start a connection so that it can
 // tell us when to start intercepting the script requests.
 chrome.runtime.onConnect.addListener((port) => {
+  portToDevtools = port;
+
+  // if (msgsToPanel.length > 0) {
+  //   for (let msg of msgsToPanel) port.postMessage(msg);
+  // }
+  // we change the port to null when we disconnect, so that when we refresh
+  // the page by start recording, we can check if (!port) and not refresh
+  // the devtools page.
+  port.onDisconnect.addListener(() => {
+    portToDevtools = null;
+  });
+
   port.onMessage.addListener((msg) => {
     if (!msg.turnOnDevtool) return;
     interceptedUrl = msg.url;
@@ -64,7 +84,6 @@ function addScriptInterception() {
 let reqIndex = 0;
 function sendMessageToContent(codeString) {
   const index = reqIndex++;
-  console.log(`Sending request ${index}.`);
   chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
     chrome.tabs.sendMessage(tabs[0].id, { codeString, index });
   });

src/browser/chrome/devtools.js

@@ -3,7 +3,11 @@ chrome.devtools.panels.create('React Rewind',
   'devtools.html',
   (extensionPanel) => {
     const port = chrome.runtime.connect({ name: 'devtools' });
-    port.onMessage.addListener(() => {});
+    port.onMessage.addListener((msg) => {
+      // console.log('got msg: ', msg);
+      if (msg.action === 'refresh_devtool') extensionPanel.setPage('devtools.html');
+    });
+
     extensionPanel.onShown.addListener((panelWindow) => {
       panelWindow.backgroundPort = port;
     });

src/browser/chrome/scripts/time_travel.js

@@ -36,14 +36,6 @@ let root = null;
 const timeTravelLList = new DoublyLinkedList();
 
 function timeTravel(direction) {
-  console.log('calling time travel...');
-  // if (timeTravelTrackerIndex === null) {
-  //   // First time we call this function. We need to remove the PLACEMENT entry
-  //   // from position [0]. This is originated from the initial mount of the App.
-  //   timeTravelTracker = timeTravelTracker.slice(1);
-  //   timeTravelTrackerIndex = timeTravelTracker.length - 1;
-  //   root = getRootContainerInstance(timeTravelTracker[0].effect);
-  // }
   if (!root) {
     root = getRootContainerInstance(timeTravelLList.current.value.effect);
     timeTravelLList.current = timeTravelLList.tail;
@@ -78,7 +70,7 @@ function timeTravel(direction) {
         // if we are moving forwards, we need to commitWork() the same
         // way the function was originally called.
         if (diff === 1) {
-          commitWork(current, effect);
+          commitWork(_.cloneDeep(current), _.cloneDeep(effect));
           break;
         }
 
@@ -100,16 +92,16 @@ function timeTravel(direction) {
 
           const currentCopy = _.cloneDeep(current);
           currentCopy.updateQueue = payload;
-          commitWork(effect, currentCopy);
+          commitWork(_.cloneDeep(effect), currentCopy);
           break;
         }
 
-        commitWork(effect, current);
+        commitWork(_.cloneDeep(effect), _.cloneDeep(current));
         break;
       }
       case 'PLACEMENT': {
         if (diff === 1) {
-          commitPlacement(effect);
+          commitPlacement(_.cloneDeep(effect));
         } else {
           // commitDeletion() will call unmountHostComponents(), which recursively
           // deletes all host nodes from the parent. This means that
@@ -127,7 +119,7 @@ function timeTravel(direction) {
           const effectCopy = _.cloneDeep(effect);
           commitDeletion(effectCopy);
         } else {
-          commitPlacement(effect);
+          commitPlacement(_.cloneDeep(effect));
         }
         break;
       }