spike: no progress but placeholder before cursor help

mobxjs · Oct 28, 2024 · 6f6b07a · 6f6b07a
1 parent 754a3c1
commit 6f6b07a
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 0 deletions.
diff --git a/src/frontend/App.jsx b/src/frontend/App.jsx
@@ -32,43 +32,57 @@ export default class App extends React.PureComponent {
   }
 
   componentWillMount() {
+    console.log('App.jsx componentWillMount');
     if (this.props.reloadSubscribe) {
+      console.log('App.jsx componentWillMount subscribing to reload');
       this.$unsubscribeReload = this.props.reloadSubscribe(() => this.reload());
     }
     this.props.inject((wall, teardownWall) => {
+      console.log('App.jsx componentWillMount injecting');
       this.$teardownWall = teardownWall;
       const bridge = new Bridge(wall);
 
       this.$disposables.push(
         bridge.sub('capabilities', ({ mobxFound }) => {
+          console.log('App.jsx componentWillMount subscribing to capabilities');
           this.setState({ mobxFound });
         }),
         bridge.sub('content-script-installation-error', () => {
+          console.log(
+            'App.jsx componentWillMount subscribing to content-script-installation-error',
+          );
           this.setState({ contentScriptInstallationError: true });
         }),
       );
 
+      console.log('App.jsx componentWillMount sending backend:ping');
       bridge.send('backend:ping');
       const connectInterval = setInterval(() => bridge.send('backend:ping'), 500);
       bridge.once('frontend:pong', () => {
+        console.log('App.jsx componentWillMount received frontend:pong');
         clearInterval(connectInterval);
 
         this.stores = createStores(bridge);
+        console.log('App.jsx componentWillMount created stores');
         if (__DEV__) {
+          console.log('App.jsx componentWillMount setting $$frontendStores$$');
           window.$$frontendStores$$ = this.stores;
         }
 
         this.setState({ connected: true });
+        console.log('App.jsx componentWillMount sending get-capabilities');
         bridge.send('get-capabilities');
       });
 
       if (!this.$unMounted) {
+        console.log('App.jsx componentWillMount setting loaded to true');
         this.setState({ loaded: true });
       }
     });
   }
 
   componentWillUnmount() {
+    console.log('App.jsx componentWillUnmount setting unmounted to true');
     this.$unMounted = true;
     this.reload();
   }
@@ -78,16 +92,20 @@ export default class App extends React.PureComponent {
   $disposables = [];
 
   reload() {
+    console.log('App.jsx reload');
     if (!this.$unMounted) this.setState({ loaded: false }, this.props.reload);
     this.teardown();
   }
 
   teardown() {
+    console.log('App.jsx teardown');
     if (this.$unsubscribeReload) {
+      console.log('App.jsx teardown unsubscribing from reload');
       this.$unsubscribeReload();
       this.$unsubscribeReload = undefined;
     }
     if (this.$teardownWall) {
+      console.log('App.jsx teardown calling teardownWall');
       this.$teardownWall();
       this.$teardownWall = undefined;
     }
@@ -96,18 +114,24 @@ export default class App extends React.PureComponent {
   handleContextMenu = e => e.preventDefault();
 
   renderContent() {
+    console.log('App.jsx renderContent');
     if (this.state.contentScriptInstallationError) {
+      console.log('App.jsx renderContent returning Blocker for contentScriptInstallationError');
       return <Blocker>Error while installing content-script</Blocker>;
     }
     if (!this.state.loaded) {
+      console.log('App.jsx renderContent returning Blocker for loading');
       return !this.props.quiet && <Blocker>Loading...</Blocker>;
     }
     if (!this.state.connected) {
+      console.log('App.jsx renderContent returning Blocker for connecting');
       return !this.props.quiet && <Blocker>Connecting...</Blocker>;
     }
     if (this.state.mobxFound !== true) {
+      console.log('App.jsx renderContent returning Blocker for looking for mobx');
       return !this.props.quiet && <Blocker>Looking for mobx...</Blocker>;
     }
+    console.log('App.jsx renderContent returning ContextProvider');
     return (
       <ContextProvider stores={this.stores}>
         {React.Children.only(this.props.children)}

diff --git a/src/frontend/index.jsx b/src/frontend/index.jsx
@@ -6,6 +6,7 @@ import RichPanel from './RichPanel';
 
 export default config => {
   const reload = () => {
+    console.log('Reloading');
     ReactDOM.unmountComponentAtNode(config.node);
     setTimeout(() => {
       // for some reason React 16 does unmountComponentAtNode asynchronously (?)
@@ -15,6 +16,7 @@ export default config => {
   };
 
   const render = () => {
+    console.log('Rendering');
     ReactDOM.render(
       <App
         {...config} // eslint-disable-line react/jsx-props-no-spreading

diff --git a/src/shells/webextension/panel.jsx b/src/shells/webextension/panel.jsx
@@ -20,6 +20,41 @@ const inject = done => {
         }
       }());
     `;
+  chrome.scripting.executeScript({
+    target: { tabId: chrome.devtools.inspectedWindow.tabId },
+    func: () => {
+      console.log('running script from panel');
+
+      let disconnected = false;
+
+      const port = chrome.runtime.connect({
+        name: `${chrome.devtools.inspectedWindow.tabId}`,
+      });
+
+      port.onDisconnect.addListener(() => {
+        disconnected = true;
+        if (disconnectListener) {
+          disconnectListener();
+        }
+      });
+
+      const wall = {
+        listen(fn) {
+          port.onMessage.addListener(message => {
+            debugConnection('[background -> FRONTEND]', message);
+            fn(message);
+          });
+        },
+        send(data) {
+          if (disconnected) return;
+          debugConnection('[FRONTEND -> background]', data);
+          port.postMessage(data);
+        },
+      };
+
+      done(wall, () => port.disconnect());
+    },
+  });
   // chrome.devtools.inspectedWindow.eval(code, (res, err) => {
   //   if (err) {
   //     if (__DEV__) console.log(err); // eslint-disable-line no-console

diff --git a/src/shells/webextension/window.jsx b/src/shells/webextension/window.jsx
@@ -20,6 +20,7 @@ const whenTabLoaded = (tabId, cb) => {
 
 const inject = (contentTabId, done) =>
   whenTabLoaded(contentTabId, () => {
+    console.log('Injecting content script');
     const code = `
           // the prototype stuff is in case document.createElement has been modified
           var script = document.constructor.prototype.createElement.call(document, 'script');
@@ -28,13 +29,15 @@ const inject = (contentTabId, done) =>
           script.parentNode.removeChild(script);
         `;
     chrome.tabs.executeScript(contentTabId, { code }, () => {
+      console.log('Content script injected');
       let disconnected = false;
 
       const port = chrome.runtime.connect({
         name: `${contentTabId}`,
       });
 
       port.onDisconnect.addListener(() => {
+        console.log('Port disconnected');
         debugConnection('[background -x FRONTEND]');
         disconnected = true;
         if (onDisconnect) {
@@ -44,13 +47,16 @@ const inject = (contentTabId, done) =>
 
       const wall = {
         listen(fn) {
+          console.log('Listening for messages');
           port.onMessage.addListener(message => {
+            console.log('Received message:', message);
             debugConnection('[background -> FRONTEND]', message);
             fn(message);
           });
         },
         send(data) {
           if (disconnected) return;
+          console.log('Sending message:', data);
           debugConnection('[FRONTEND -> background]', data);
           port.postMessage(data);
         },