feat: incoming, outgoing, running working

debugger/devtool/explorer/setup.ts

@@ -5,23 +5,40 @@ import { setInspectedTab } from './actions/actionCreators'
 
 export declare const chrome: GlobalChrome
 
+function sendStoreInfo(object, path) {
+  const parts = path.split('.').filter((_) => _ !== '')
+  const end = parts.reduce((prev, next) => prev[next], object)
+  const canExpand = end !== undefined && end !== null && typeof end === 'object'
+  return {
+    path: path,
+    hasKeys: true,
+    keys: canExpand ? Object.keys(end) : [],
+    values: canExpand
+      ? Object.keys(end).reduce((prev, next) => {
+          prev[next] =
+            typeof end[next] === 'object'
+              ? { hasKeys: false }
+              : typeof end[next] === 'function'
+              ? 'function'
+              : typeof end[next] === 'undefined'
+              ? 'undefined'
+              : end[next] === null
+              ? 'null'
+              : end[next]
+          return prev
+        }, {})
+      : typeof end === 'function'
+      ? 'function'
+      : typeof end === 'undefined'
+      ? 'undefined'
+      : end === null
+      ? 'null'
+      : end,
+  }
+}
+
 export function setup(connection: any, tabId: number) {
-  chrome.devtools.inspectedWindow.eval(`window.__sendStoreInfo = function (object, path) {
-       const parts = path.split('.').filter((_) => _ !== '')
-       const end = parts.reduce((prev, next) => prev[next], object)
-       return {
-         path: path,
-         hasKeys: true,
-         keys: typeof end === 'object' ? Object.keys(end) : [],
-         values:
-           typeof end === 'object'
-             ? Object.keys(end).reduce((prev, next) => {
-                 prev[next] = typeof end[next] === 'object' ? { hasKeys: false } : end[next]
-                 return prev
-               }, {})
-             : end,
-       }
-     }`)
+  chrome.devtools.inspectedWindow.eval(`window.__sendStoreInfo = ${sendStoreInfo.toString()}`)
   connection.onMessage.addListener((event: any) => {
     try {
       if (typeof event === 'object' && event.name === 'dcl-explorer-state') {

debugger/devtool/layout/Sections.ts

@@ -39,15 +39,7 @@ export const Sections: Section[] = [
       {
         section: 'Running scenes',
         logo: '👟',
-      },
-      {
-        section: 'ECS State',
-        logo: '⏯',
-      },
-      {
-        section: 'Messages',
-        logo: '📨',
-      },
+      }
     ],
   },
   {

debugger/devtool/page.tsx

@@ -22,6 +22,12 @@ import { setup as setupRenderer } from './renderer/setup'
  */
 import { createStore as createRenderStore } from './renderer/store'
 import * as Renderer from './renderer/present'
+/**
+ * Scenes module
+ */
+import { setup as setupScenes } from './scenes/setup'
+import { createStore as createSceneStore } from './scenes/store'
+import { Scenes } from './scenes/present'
 
 export declare const chrome: GlobalChrome
 const FILE_LOCAL_VERBOSE_BUGS = false
@@ -60,11 +66,17 @@ function setupBackground() {
    */
   setupRenderer(backgroundPageConnection)
   const rendererStore = createRenderStore()
+  /**
+   * Tap for scene messages
+   */
+  setupScenes(backgroundPageConnection, chrome.devtools.inspectedWindow.tabId)
+  const scenesStore = createSceneStore()
 
   mapSections.Status.component = Explorer
   mapSections.Networking.component = CommsPresenter
   mapSections.Outgoing.component = Renderer.Outgoing
   mapSections.Incoming.component = Renderer.Incoming
+  mapSections['Running scenes'].component = Scenes
 
   /**
    * Create a panel and continue there
@@ -77,6 +89,7 @@ function setupBackground() {
           explorerStore={explorerStore}
           commsStore={commsStore}
           rendererStore={rendererStore}
+          scenesStore={scenesStore}
         />,
         panelWin.document.getElementById('root')
       )

debugger/devtool/renderer/hooks/incoming.ts

@@ -1,43 +1,47 @@
 import { tapFunction } from '../../jslibs/tapFunction'
 
+declare var window: any
+
+function tryInjectIn() {
+  try {
+    if (typeof window === undefined) {
+      console.log('ℹ️ tried to inject into undefined window :/')
+    }
+    if (window.browserInterface && !window.__browserSendMessage) {
+      console.log('ℹ️ browser interface intervened')
+      var browserBackup = window.browserInterface
+      var backup = window.browserInterface.onMessage
+      Object.defineProperty(window, 'browserInterface', {
+        get: () => browserBackup,
+        set: (newBrowser) => {
+          console.log('ℹ️ browser interface reinsert')
+          browserBackup = newBrowser
+          backup = newBrowser.onMessage
+          newBrowser.onMessage = tapOnMessage
+        },
+      })
+      function tapOnMessage(a, b, c, d) {
+        window.postMessage({
+          name: 'dcl-explorer-incoming',
+          source: 'dcl-debugger',
+          payload: {
+            name: a,
+            key: b,
+          },
+        })
+        backup.apply(backup, [a, b, c, d])
+      }
+    } else if (window.browserInterface) {
+      console.log('ℹ️ browser interface inject called twice')
+    } else {
+      console.log('ℹ️ browser interface not found yet')
+      setTimeout(tryInjectIn, 1000)
+    }
+  } catch (e) {
+    console.log('🥂', e)
+  }
+}
+
 export function setup(connection: any, tap: Function) {
-  tapFunction(
-    connection,
-    'incoming',
-    tap,
-    `
-      function tryInject() {
-        if (typeof window === undefined) {
-          console.log("ℹ️ tried to inject into undefined window :/");
-        }
-        if (window.browserInterface && !window.__browserSendMessage) {
-          console.log("ℹ️ browser interface intervened");
-          const backup = window.browserInterface.OnMessage;
-          window.browserInterface.OnMessage = function(a, b, c, d) {
-            console.log("ℹ️ ---", a, b)
-            try {
-              window.postMessage({
-                name: 'dcl-explorer-incoming',
-                source: 'dcl-debugger',
-                 payload: {
-                   name: a
-                   key: b
-                 }
-              })
-            } catch (e) {
-              console.log(e)
-            }
-            backup.apply(window.browserInterface, [a, b, c, d])
-          }
-        } else if (window.browserInterface) {
-          console.log("ℹ️ browser interface inject called twice");
-        } else {
-          console.log("ℹ️ browser interface not found yet");
-          setTimeout(tryInject, 1000)
-        }
-     }
-     console.log('🥂')
-     tryInject()
-    `
-  )
+  tapFunction(connection, 'incoming', tap, `${tryInjectIn.toString()};tryInjectIn()`)
 }

debugger/devtool/renderer/hooks/outgoing.ts

@@ -1,49 +1,49 @@
 import { tapFunction } from '../../jslibs/tapFunction'
 
+declare var window: any
+
+function tryInjectOut() {
+  try {
+    if (typeof window === undefined) {
+      console.log('ℹ️ unity tried to inject into undefined window :/')
+    }
+    if (window.unityInterface && window.unityInterface.SendGenericMessage) {
+      console.log('ℹ️ unity interface intervened')
+      for (let triggerSend in window.unityInterface) {
+        if (window.unityInterface.hasOwnProperty(triggerSend) && triggerSend !== 'debug') {
+          const backup = window.unityInterface[triggerSend]
+          window.unityInterface[triggerSend] = function (a) {
+            console.log('ℹ️ unity interface outgoing', a)
+            try {
+              backup.apply(window.unityInterface, arguments)
+              window.postMessage(
+                {
+                  name: 'dcl-explorer-outgoing',
+                  source: 'dcl-debugger',
+                  payload: {
+                    name: triggerSend,
+                    value: a,
+                  },
+                },
+                '*'
+              )
+            } catch (e) {
+              console.log('🥂', e.stack)
+            }
+          }
+        }
+      }
+    } else if (window.unityInterface) {
+      console.log('ℹ️ unity interface exists -- no SendMessage though')
+      setTimeout(tryInjectOut, 1000)
+    } else {
+      console.log('ℹ️ unity interface not found yet')
+      setTimeout(tryInjectOut, 1000)
+    }
+  } catch (e) {
+    console.log('ℹ️ unity intercept problem:', e)
+  }
+}
 export function setup(connection: any, tap: Function) {
-  tapFunction(
-    connection,
-    'outgoing',
-    tap,
-    `function tryInject() {
-       if (typeof window === undefined) {
-         console.log("ℹ️ tried to inject into undefined window :/");
-       }
-       if (window.unityInterface && window.unityInterface.SendGenericMessage) {
-         console.log("ℹ️ unity interface intervened");
-         for (let triggerSend in window.unityInterface) {
-           if (window.unityInterface.hasOwnProperty(triggerSend) && triggerSend !== 'debug') {
-             const backup = window.unityInterface[triggerSend]
-             window.unityInterface[triggerSend] = function(a, b, c, d, e) {
-               if (b || c || d || e) {
-                 console.log('ℹ️ unexpected extra argument')
-               }
-               backup.apply(window.unityInterface, arguments)
-               try {
-                 window.postMessage({
-                   name: 'dcl-explorer-outgoing',
-                   source: 'dcl-debugger',
-                   payload: {
-                     name: triggerSend,
-                     value: a,
-                     extra: [b, c, d, e]
-                   }
-                 }, '*')
-               } catch (e) {
-                 console.log("ℹ️ unity intercept problem:", triggerSend, e, arguments);
-               }
-             }
-           }
-         }
-       } else if (window.unityInterface) {
-         console.log("ℹ️ unity interface exists -- no SendMessage though");
-         setTimeout(tryInject, 1000)
-       } else {
-         console.log("ℹ️ unity interface not found yet");
-         setTimeout(tryInject, 1000)
-       }
-     }
-     tryInject()
-     `
-  )
+  tapFunction(connection, 'outgoing', tap, `${tryInjectOut.toString()};tryInjectOut();`)
 }

debugger/devtool/renderer/reducer.ts

@@ -16,7 +16,7 @@ export function Reducer(state: RendererState, action: RendererAction | AnyAction
     case INCOMING_MESSAGE:
       return { ...state, incoming: [action.payload, ...state.incoming.slice(0, 9)] }
     case OUTGOING_MESSAGE:
-      return { ...state, incoming: [action.payload, ...state.incoming.slice(0, 9)] }
+      return { ...state, outgoing: [action.payload, ...state.outgoing.slice(0, 9)] }
     default:
       return state
   }

debugger/devtool/renderer/setup.ts

@@ -7,14 +7,12 @@ const store = createStore()
 
 export function setup(connection: any) {
   outgoing(connection, (data: any) => {
-    console.log('a', data)
     store.dispatch({
       type: OUTGOING_MESSAGE,
       payload: data,
     })
   })
   incoming(connection, (data: any) => {
-    console.log('b', data)
     store.dispatch({
       type: INCOMING_MESSAGE,
       payload: data,

debugger/devtool/scenes/BUILD.bazel

@@ -7,12 +7,19 @@ ts_library(
     srcs = glob(
         include = [
             "*.ts",
+            "*.tsx",
+            "**/*.ts",
+            "**/*.tsx",
         ],
     ),
     module_name = "@dcl/debugger/devtool/scenes",
     deps = [
+        "//debugger/devtool/explorer",
+        "//debugger/devtool/jslibs",
         "//debugger/types",
         "//jslibs/hooks",
+        "@npm//@types/react",
+        "@npm//react",
         "@npm//redux",
     ],
 )