feat: charts on chrome extension

debugger/.gitignore

@@ -0,0 +1 @@
+dist

debugger/background/index.ts

@@ -1,4 +1,4 @@
-type GlobalChrome = {
+type _GlobalChrome = {
   devtools: {
     panels: {
       create: (name: string, icon: string, page: string, code: Function) => void
@@ -15,15 +15,16 @@ type GlobalChrome = {
     onInstalled: {
       addListener: (handler: unknown) => EventListener
     }
-    connect: (what: { name: string }) => WebSocketLike
+    connect: (what: { name: string }) => _WebSocketLike
     sendMessage: (what: unknown) => void
   }
   tabs: {
     executeScript: (tab: number | string, data: unknown) => void
   }
 }
+declare var chrome: _GlobalChrome
 
-type WebSocketLike = {
+type _WebSocketLike = {
   onMessage: {
     addListener: (handler: unknown) => EventListener
     removeListener: (listener: unknown) => void
@@ -35,16 +36,14 @@ type WebSocketLike = {
   postMessage: Function
 }
 
-type DevToolConnection = WebSocketLike
-
-declare var chrome: GlobalChrome
+type _DevToolConnection = _WebSocketLike
 
 const connections: {
-  [port: number]: DevToolConnection
+  [port: number]: _DevToolConnection
 } = {}
 
 // Background page -- background.js
-chrome.runtime.onConnect.addListener(function (port: WebSocketLike) {
+chrome.runtime.onConnect.addListener(function (port: _WebSocketLike) {
   var devToolsListener = function (
     message: { name: string; tabId: number; scriptToInject: string },
     sender: number,
@@ -61,7 +60,7 @@ chrome.runtime.onConnect.addListener(function (port: WebSocketLike) {
 
   port.onMessage.addListener(devToolsListener)
 
-  port.onDisconnect.addListener(function (devToolDisconnected: WebSocketLike) {
+  port.onDisconnect.addListener(function (devToolDisconnected: _WebSocketLike) {
     port.onMessage.removeListener(devToolsListener)
     const allTabs = Object.keys(connections)
     for (let i = 0; i < allTabs.length; i++) {

debugger/devtool/BUILD.bazel

@@ -3,31 +3,50 @@ package(default_visibility = ["//visibility:public"])
 load("@npm_bazel_typescript//:index.bzl", "ts_library")
 load("@npm_bazel_rollup//:index.bzl", "rollup_bundle")
 
-filegroup(
-    name = "static",
+ts_library(
+    name = "devtool",
     srcs = glob(
         include = [
-            "static/**/*",
+            "page.tsx",
         ],
     ),
+    module_name = "@dcl/debugger/devtool",
+    deps = [
+        "//debugger/devtool/comms",
+        "//debugger/devtool/jslibs",
+        "//debugger/devtool/scenes",
+        "//debugger/types",
+        "//jslibs/hooks",
+        "@npm//@types/react",
+        "@npm//@types/react-dom",
+        "@npm//@types/redux",
+        "@npm//react",
+        "@npm//react-dom",
+        "@npm//redux",
+    ],
 )
 
 ts_library(
-    name = "devtool",
+    name = "bundled_devtool",
     srcs = glob(
         include = [
-            "comms/*.ts",
-            "jslibs/*.ts",
+            "**/*.ts",
+            "**/*.tsx",
             "page.tsx",
         ],
     ),
-    module_name = "@dcl/debugger/devtool",
+    module_name = "@dcl/debugger/bundled_devtool",
     deps = [
+        "//debugger/devtool/comms",
+        "//debugger/devtool/jslibs",
+        "//debugger/devtool/scenes",
         "//debugger/types",
+        "//jslibs/hooks",
         "@npm//@types/react",
         "@npm//@types/react-dom",
         "@npm//@types/redux",
         "@npm//react",
+        "@npm//chart.js",
         "@npm//react-dom",
         "@npm//redux",
     ],
@@ -39,9 +58,15 @@ rollup_bundle(
     entry_point = "page.tsx",
     format = "amd",
     deps = [
-        ":devtool",
+        ":bundled_devtool",
+        "//debugger/devtool/comms",
+        "//debugger/devtool/jslibs",
+        "//debugger/devtool/scenes",
+        "//debugger/devtool/static",
+        "//debugger/types",
+        "//jslibs/hooks",
+        "@npm//chart.js",
         "@npm//react",
         "@npm//react-dom",
-        "@npm//redux",
     ],
 )

debugger/devtool/Render.tsx

@@ -0,0 +1,28 @@
+import { useStore2 } from '../../jslibs/hooks/useStore2'
+import React, { useCallback } from 'react'
+import { commsStore } from './comms/store'
+import { GlobalChrome } from '../types/chrome'
+import { LineChart } from './comms/chart'
+
+declare var chrome: GlobalChrome
+
+export function Render(props: { panelWindow: Window }) {
+  const test = useCallback(() => {
+    chrome.devtools.inspectedWindow.eval(`window.postMessage(
+         {
+           name: '[dcl-debugger:panel] Pong!',
+           source: 'dcl-debugger',
+         },
+         '*'
+       )`)
+  }, [])
+  const [state] = useStore2(commsStore)
+  return (
+    <div>
+      <div style={{ color: 'white' }}>Render 5</div>
+      <pre>{JSON.stringify(state, null, 2)}</pre>
+      <button onClick={test}>Send Test `Ping`</button>
+      <LineChart {...props} />
+    </div>
+  )
+}

debugger/devtool/comms/BUILD.bazel

@@ -0,0 +1,24 @@
+package(default_visibility = ["//visibility:public"])
+
+load("@npm_bazel_typescript//:index.bzl", "ts_library")
+
+ts_library(
+    name = "comms",
+    srcs = glob(
+        include = [
+            "*.ts",
+            "*.tsx",
+        ],
+    ),
+    module_name = "@dcl/debugger/devtool/comms",
+    deps = [
+        "//debugger/devtool/jslibs",
+        "//debugger/types",
+        "//jslibs/hooks",
+        "@npm//redux",
+        "@npm//react",
+        "@npm//@types/react",
+        "@npm//chart.js",
+        "@npm//@types/chart.js",
+    ],
+)

debugger/devtool/comms/chart.tsx

@@ -0,0 +1,119 @@
+import Chart from 'chart.js'
+import React, { useEffect, useLayoutEffect, useState } from 'react'
+import { useStore2 } from '../../../jslibs/hooks/useStore2'
+import { getCommsStore } from './store'
+
+function getContextFromCanvas(panelWindow: Window) {
+  const document = panelWindow.document
+  if (!document) {
+    return
+  }
+  const canvas = panelWindow.document.getElementById('canvas') as HTMLCanvasElement
+  if (canvas) {
+    return canvas.getContext('2d')
+  }
+}
+
+export function LineChart(props: { panelWindow: Window }) {
+  const [state] = useStore2(getCommsStore())
+  const [context, setContext] = useState(null as CanvasRenderingContext2D | null)
+  useEffect(() => {
+    if (!context) {
+      const tryContext = getContextFromCanvas(props.panelWindow)
+      if (tryContext) {
+        setContext(tryContext)
+      }
+    }
+  })
+  const [myLine, setMyLine] = useState(null as Chart | null)
+  useEffect(() => {
+    if (context && !myLine) {
+      setMyLine(new Chart(context, initialConfig))
+    }
+  }, [context, myLine, setMyLine])
+  const [configChangeRequests, setChangeRequests] = useState([])
+  useLayoutEffect(() => {
+    if (myLine && configChangeRequests.length) {
+      for (let change of configChangeRequests) {
+        change(initialConfig)
+      }
+      setChangeRequests([])
+      myLine.update()
+    }
+  }, [configChangeRequests, myLine, setChangeRequests])
+  return (
+    <ul>
+      {state &&
+        state.history &&
+        state.history.map((_: any, index: number | string) => {
+          return <li key={index}>{_.totalBytes}</li>
+        })}
+    </ul>
+  )
+}
+
+export var MONTHS = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+]
+var initialConfig = {
+  type: 'line',
+  data: {
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+    datasets: [
+      {
+        label: 'My First dataset',
+        labels: MONTHS,
+        backgroundColor: '#ffffff',
+        borderColor: '#ff0000',
+        data: [0.1, 0.2, 0.3, 0.25, 0.35, 0.5, 0.7],
+        fill: false,
+      },
+      {
+        label: 'My Second dataset',
+        labels: MONTHS,
+        fill: false,
+        backgroundColor: '#0000ff',
+        borderColor: '#0000ff',
+        data: [0.15, 0.12, 0.26, 0.37, 0.29, 0.4, 0.65],
+      },
+    ],
+  },
+  options: {
+    responsive: true,
+    title: {
+      display: true,
+      text: 'Chart.js Line Chart',
+    },
+    scales: {
+      xAxes: [
+        {
+          display: true,
+          scaleLabel: {
+            display: true,
+            labelString: 'Month',
+          },
+        },
+      ],
+      yAxes: [
+        {
+          display: true,
+          scaleLabel: {
+            display: true,
+            labelString: 'Value',
+          },
+        },
+      ],
+    },
+  },
+}

debugger/devtool/comms/reducer.ts

@@ -0,0 +1,30 @@
+import {
+  CommsState,
+  COMMS_REPORT,
+  COMMS_DISCONNECTED,
+  ReportAction,
+  INITAL_COMMS_STATE,
+  DisconnectedAction,
+} from './types'
+
+export function CommsReducer(state: CommsState, action: ReportAction | DisconnectedAction) {
+  if (!action) {
+    if (!state) {
+      return INITAL_COMMS_STATE
+    }
+    return state
+  }
+  if (!state) {
+    return CommsReducer(INITAL_COMMS_STATE, action)
+  }
+  switch (action.type) {
+    case COMMS_DISCONNECTED:
+      return {}
+    case COMMS_REPORT:
+      return {
+        ...action.payload,
+        history: [action.payload, ...(state.history || [])].filter((_, index) => index < 10),
+      }
+  }
+  return state
+}

debugger/devtool/comms/setup.ts

@@ -1,6 +1,7 @@
-import type { GlobalChrome, DevToolConnection } from 'dcl/debugger/types/chrome'
-import { getCommsStore, COMMS_REPORT } from './store'
 import { clientLog } from '../jslibs/clientLog'
+import type { DevToolConnection, GlobalChrome } from '../../types/chrome'
+import { getCommsStore } from './store'
+import { COMMS_REPORT, COMMS_DISCONNECTED } from './types'
 export declare var chrome: GlobalChrome
 
 export function setupComms(connection: DevToolConnection) {
@@ -37,3 +38,7 @@ export function setupComms(connection: DevToolConnection) {
     }
   })
 }
+
+export function resetComms() {
+  getCommsStore().dispatch({ type: COMMS_DISCONNECTED })
+}

debugger/devtool/comms/store.ts

@@ -1,27 +1,6 @@
-import { AnyAction, createStore } from 'redux'
+import { createStore } from 'redux'
+import { CommsReducer } from './reducer'
 
-export const COMMS_REPORT = '[Comms] Report'
-export type CommsReport = typeof COMMS_REPORT
-export type CommsState = {}
-export type ReportAction = { type: CommsReport; payload: CommsState }
-
-export const INITAL_COMMS_STATE = {}
-export function CommsReducer(state: CommsState, action: ReportAction | AnyAction) {
-  if (!action) {
-    if (!state) {
-      return INITAL_COMMS_STATE
-    }
-    return state
-  }
-  if (!state) {
-    return CommsReducer(INITAL_COMMS_STATE, action)
-  }
-  switch (action.type) {
-    case COMMS_REPORT:
-      return action.payload
-  }
-  return state
-}
 export const commsStore: any = createStore(CommsReducer)
 
 export function getCommsStore(): any {