From 5a9d7d9e624261dca9123165f5f43ede18081750 Mon Sep 17 00:00:00 2001 From: Victor Varaschin Date: Wed, 13 Mar 2019 10:56:04 -0400 Subject: [PATCH 1/5] Fixed bug that made devtool refresh when we started recording. --- src/app/components/App.jsx | 13 ++++++-- src/browser/chrome/background.js | 54 +++++++++++++++++++++++++++++++- 2 files changed, 64 insertions(+), 3 deletions(-) diff --git a/src/app/components/App.jsx b/src/app/components/App.jsx index 8c5f8a9..f73e090 100644 --- a/src/app/components/App.jsx +++ b/src/app/components/App.jsx @@ -48,6 +48,7 @@ class App extends Component { }; this.portToExtension = null; + this.justStartedRecording = false; this.addActionToView = this.addActionToView.bind(this); this.toTheFuture = this.toTheFuture.bind(this); @@ -108,9 +109,11 @@ class App extends Component { } } - // functionality to change 'record' button to 'pause' setIsRecording() { - console.log('setIsRecording:', this.state.isRecording) + // This variable will prevent the app from refreshing when we refresh + // the userpage. + this.justStartedRecording = true; + this.setState(state => ({ isRecording: !state.isRecording, })); @@ -213,6 +216,12 @@ class App extends Component { } resetApp() { + if (this.justStartedRecording) { + console.log('not reseting...'); + this.justStartedRecording = false; + return; + } + console.log('reseting...'); this.setState({ data: [], searchField: '', diff --git a/src/browser/chrome/background.js b/src/browser/chrome/background.js index 9b2024d..7d810c6 100644 --- a/src/browser/chrome/background.js +++ b/src/browser/chrome/background.js @@ -25,7 +25,6 @@ function handleRequest(request) { // TODO: filter the request from the webRequest call. if (!interceptedUrl.startsWith(request.initiator)) return { cancel: false }; - console.log('intercepting... ', request); if (request.type === 'script' && !request.url.startsWith('chrome') && request.frameId === 0) { // TODO: adjust comment @@ -72,6 +71,59 @@ function addScriptInterception() { { urls: [''] }, ['blocking'], ); + + // chrome.webRequest.onBeforeSendHeaders.addListener( + // (request) => { + // if (!interceptedUrl.startsWith(request.initiator)) return { cancel: false }; + + // if (request.type !== 'script' || request.url.startsWith('chrome') + // || request.frameId !== 0) return; + + // request.requestHeaders.push({ + // name: 'Access-Control-Allow-Credentials', + // value: '*', + // }); + + // request.requestHeaders.push({ + // name: 'Accept', + // value: 'application/javascript', + // }); + + // request.requestHeaders.push({ + // name: 'ABC', + // value: 'abc', + // }); + + // for (let i = 0; i < request.requestHeaders.length; i++) { + // const header = request.requestHeaders[i]; + // if (header.name === 'Origin') { + // console.log('found one'); + // delete request.requestHeaders[i]; + // } + // } + + // console.log('intercepting fom beforesendheaders: ', request); + // }, + // { urls: [''] }, + // ['blocking', 'requestHeaders'], + // ); + + // chrome.webRequest.onHeadersReceived.addListener((request) => { + // if (!interceptedUrl.startsWith(request.initiator)) return { cancel: false }; + + // if (request.type !== 'script' || request.url.startsWith('chrome') + // || request.frameId !== 0) return; + + // const syncRequest = new XMLHttpRequest(); + // syncRequest.open('GET', request.url, false); + // syncRequest.send(null); + + // console.log('Got req onHeadersReceived!!!! ', request); + + // return { redirectUrl: 'data:application/javascript; charset=utf-8,'.concat(syncRequest.responseText) }; + // }, + // { urls: [''] }, + // ['blocking', 'responseHeaders']); } let reqIndex = 0; From fbe7e53e6f1c527ccc2c9af8ab77766c12a40855 Mon Sep 17 00:00:00 2001 From: Victor Varaschin Date: Wed, 13 Mar 2019 11:04:30 -0400 Subject: [PATCH 2/5] added react-json-view to package-lock --- src/app/package-lock.json | 41 ++++++++++++++++++++++++++++----------- 1 file changed, 30 insertions(+), 11 deletions(-) diff --git a/src/app/package-lock.json b/src/app/package-lock.json index 4a00f84..5fe1308 100644 --- a/src/app/package-lock.json +++ b/src/app/package-lock.json @@ -3010,7 +3010,8 @@ "ansi-regex": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", + "optional": true }, "aproba": { "version": "1.2.0", @@ -3031,12 +3032,14 @@ "balanced-match": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", + "optional": true }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3051,17 +3054,20 @@ "code-point-at": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", - "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", + "optional": true }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", + "optional": true }, "console-control-strings": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", - "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -3178,7 +3184,8 @@ "inherits": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", + "optional": true }, "ini": { "version": "1.3.5", @@ -3190,6 +3197,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3204,6 +3212,7 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3211,12 +3220,14 @@ "minimist": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", + "optional": true }, "minipass": { "version": "2.3.5", "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz", "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3235,6 +3246,7 @@ "version": "0.5.1", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", + "optional": true, "requires": { "minimist": "0.0.8" } @@ -3315,7 +3327,8 @@ "number-is-nan": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3327,6 +3340,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", + "optional": true, "requires": { "wrappy": "1" } @@ -3412,7 +3426,8 @@ "safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -3448,6 +3463,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3467,6 +3483,7 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3510,12 +3527,14 @@ "wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", + "optional": true }, "yallist": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz", - "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==" + "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", + "optional": true } } }, From 4f15e5ac4acc072d9c3b635a50f38a9b23a06bb0 Mon Sep 17 00:00:00 2001 From: Victor Varaschin Date: Wed, 13 Mar 2019 11:17:17 -0400 Subject: [PATCH 3/5] Data stays filtered after new actions get posted --- src/app/components/App.jsx | 36 ++++++++++++++++++++++-------------- 1 file changed, 22 insertions(+), 14 deletions(-) diff --git a/src/app/components/App.jsx b/src/app/components/App.jsx index 5db5d93..1fd481a 100644 --- a/src/app/components/App.jsx +++ b/src/app/components/App.jsx @@ -65,21 +65,31 @@ class App extends Component { // adds listener to the effects that are gonna be sent from // our edited useReducer from the 'react' library. chrome.runtime.onConnect.addListener((port) => { - if (port.name === 'injected-app') { - this.portToExtension = port; - - port.onMessage.addListener((msg) => { - const newData = { - action: msg.action, - state: msg.state, - id: this.state.data.length, - }; - this.setState((state) => ({ + if (port.name !== 'injected-app') return; + + this.portToExtension = port; + + port.onMessage.addListener((msg) => { + const newData = { + action: msg.action, + state: msg.state, + id: this.state.data.length, + }; + + const { searchField } = this.state; + const newDataActionType = newData.action.type.toLowerCase(); + + if (newDataActionType.includes(searchField.toLowerCase())) { + this.setState(state => ({ data: [...state.data, newData], filteredData: [...state.data, newData], })); - }); - } + } else { + this.setState(state => ({ + data: [...state.data, newData], + })); + } + }); }); // We listen to the message from devtools.js (sent originally from @@ -94,8 +104,6 @@ class App extends Component { }); } - - // functionality to change 'play' button to 'stop' setIsPlaying() { if (this.state.isPlayingIndex > this.state.data.length - 1) { From 66820b185724449fc62c47af421656704ed4fcb5 Mon Sep 17 00:00:00 2001 From: Victor Varaschin Date: Wed, 13 Mar 2019 11:49:58 -0400 Subject: [PATCH 4/5] fixed time travel forward when already at tail of linked list. --- src/app/components/App.jsx | 29 ++++++++++++++--------------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/src/app/components/App.jsx b/src/app/components/App.jsx index 1fd481a..1bc14b4 100644 --- a/src/app/components/App.jsx +++ b/src/app/components/App.jsx @@ -217,6 +217,9 @@ class App extends Component { // function to travel to the FUTURE toTheFuture() { + const { data, isPlayingIndex } = this.state; + if (isPlayingIndex === data.length - 1) return; + if (!this.portToExtension) return console.error('No connection on stored port.'); this.portToExtension.postMessage({ type: 'TIMETRAVEL', @@ -225,7 +228,6 @@ class App extends Component { // if (isPlayingIndex >= this.state.data.length - 1) isPlayingIndex = 0; - const { data, isPlayingIndex } = this.state; const { id, action, state } = data[isPlayingIndex + 1]; this.setState(prev => ({ ...prev, @@ -240,26 +242,23 @@ class App extends Component { // function to travel to the PAST toThePast() { + const { data, isPlayingIndex } = this.state; + if (isPlayingIndex === 0) return; + if (!this.portToExtension) return console.error('No connection on stored port.'); this.portToExtension.postMessage({ type: 'TIMETRAVEL', direction: 'backwards', }); - const { data, isPlayingIndex } = this.state; - - if (isPlayingIndex === 0) { - console.log('is playingIdx in toThePast is 0'); - } else { - const { id, action, state } = data[isPlayingIndex - 1]; - this.setState(prev => ({ - ...prev, - id, - action, - state, - isPlayingIndex: isPlayingIndex - 1, - })); - } + const { id, action, state } = data[isPlayingIndex - 1]; + this.setState(prev => ({ + ...prev, + id, + action, + state, + isPlayingIndex: isPlayingIndex - 1, + })); } resetApp() { From e121ee2d6f3a2afefeec2445232409904983ce7f Mon Sep 17 00:00:00 2001 From: Victor Varaschin Date: Wed, 13 Mar 2019 17:04:44 -0400 Subject: [PATCH 5/5] Fixed time-slider play functionality. --- src/app/components/App.jsx | 25 +++++++++------------ src/app/components/EventCards/FilterBar.jsx | 1 + src/app/container/Events.jsx | 3 ++- 3 files changed, 13 insertions(+), 16 deletions(-) diff --git a/src/app/components/App.jsx b/src/app/components/App.jsx index 1bc14b4..4bb7ad8 100644 --- a/src/app/components/App.jsx +++ b/src/app/components/App.jsx @@ -82,11 +82,13 @@ class App extends Component { if (newDataActionType.includes(searchField.toLowerCase())) { this.setState(state => ({ data: [...state.data, newData], - filteredData: [...state.data, newData], + isPlayingIndex: state.data.length, + filteredData: [...state.filteredData, newData], })); } else { this.setState(state => ({ data: [...state.data, newData], + isPlayingIndex: state.data.length, })); } }); @@ -106,8 +108,8 @@ class App extends Component { // functionality to change 'play' button to 'stop' setIsPlaying() { - if (this.state.isPlayingIndex > this.state.data.length - 1) { - this.setState({ isPlayingIndex: 0 }); + if (this.state.isPlayingIndex >= this.state.data.length - 1) { + return; } let { isPlaying } = this.state; @@ -142,20 +144,11 @@ class App extends Component { } actionInPlay() { - let { isPlayingIndex } = this.state; - const { isPlaying, data } = this.state; - - if (isPlayingIndex >= data.length - 1) isPlayingIndex = 0; - - this.setState({ isPlayingIndex: isPlayingIndex + 1 }); - const { id, action, state } = data[isPlayingIndex + 1]; - this.toTheFuture(); + const { data, isPlayingIndex } = this.state; setTimeout(() => { - this.setState((prev, props) => { - return { ...prev, id, action, state }; - }); - if (isPlaying && isPlayingIndex + 1 < data.length - 1) { + this.toTheFuture(); + if (this.state.isPlaying && isPlayingIndex + 1 < data.length - 1) { this.actionInPlay(); } else { this.setState({ isPlaying: false }); @@ -289,6 +282,7 @@ class App extends Component { setIsRecording, isRecording, filteredData, + searchField, } = this.state; return ( @@ -304,6 +298,7 @@ class App extends Component { activeEventId={id} searchChange={this.searchChange} filteredData={filteredData} + searchField={searchField} /> )} right={ diff --git a/src/app/components/EventCards/FilterBar.jsx b/src/app/components/EventCards/FilterBar.jsx index e620832..1b78b0d 100644 --- a/src/app/components/EventCards/FilterBar.jsx +++ b/src/app/components/EventCards/FilterBar.jsx @@ -16,6 +16,7 @@ export default function FilterBar(props) { type="text" placeholder="filter actions by name..." onChange={searchChange} + value={props.searchField} /> diff --git a/src/app/container/Events.jsx b/src/app/container/Events.jsx index 0fd20d3..4593489 100644 --- a/src/app/container/Events.jsx +++ b/src/app/container/Events.jsx @@ -18,11 +18,12 @@ class Events extends Component { data, searchChange, filteredData, + searchField, } = this.props; return ( <> - +