Devtools component panel

package.json

@@ -55,6 +55,7 @@
     "properties-parser": "^0.3.1",
     "raw-loader": "^4.0.1",
     "react": "^16.8.6",
+    "react-devtools-inline": "^0.0.0-replay-7d9774a385",
     "react-dom": "^16.8.6",
     "react-dom-factories": "^1.0.2",
     "react-lottie": "^1.2.3",

src/ui/actions/app.ts

@@ -95,12 +95,6 @@ export function setupApp(recordingId: RecordingId, store: UIStore) {
   });
 
   ThreadFront.listenForLoadChanges();
-
-  ThreadFront.getAnnotations(({ annotations }) => {
-    for (const { point, time, kind, contents } of annotations) {
-      console.log("FoundAnnotation", point, time, kind, contents);
-    }
-  });
 }
 
 function onUnprocessedRegions({ regions }: unprocessedRegions): UIThunkAction {

src/ui/components/SecondaryToolbox/ReactDevTools.js

@@ -0,0 +1,101 @@
+import React from "react";
+
+import {
+  createBridge,
+  createStore,
+  initialize as createDevTools,
+} from "react-devtools-inline/frontend";
+import { ThreadFront } from "protocol/thread";
+import { features } from "ui/utils/prefs";
+
+let bridge, store, wall, DevTools;
+let currentTime = null;
+let rerenderComponentsTab;
+const messages = [];
+
+function InitReactDevTools() {
+  if (!features.reactDevtools) {
+    return null;
+  }
+
+  const target = {
+    postMessage: function () {},
+  };
+
+  wall = {
+    emit({ data }) {},
+    listen(listener) {
+      wall._listener = listener;
+    },
+    send(event, payload, transferable) {
+      wall._listener({ event, payload });
+    },
+  };
+
+  bridge = createBridge(target, wall);
+  store = createStore(bridge);
+  DevTools = createDevTools(target, { bridge, store });
+}
+
+InitReactDevTools();
+
+ThreadFront.getAnnotations(({ annotations }) => {
+  for (const { point, time, kind, contents } of annotations) {
+    const message = JSON.parse(contents);
+    messages.push({ point, time, message });
+  }
+});
+
+ThreadFront.on("paused", data => {
+  if (currentTime === data.time) {
+    return;
+  }
+
+  InitReactDevTools();
+
+  // TODO Use point AND time eventually
+  messages
+    .filter(({ time }) => time <= data.time)
+    .forEach(({ message }) => {
+      if (message.event === "operations") {
+        wall.send(message.event, message.payload);
+      }
+    });
+
+  // HACK TODO This should use a subscription
+  if (typeof rerenderComponentsTab === "function") {
+    rerenderComponentsTab();
+  }
+});
+
+// TODO Pass custom bridge
+// TODO Use portal containers for Profiler & Components
+export function ReactDevtoolsPanel() {
+  if (!features.reactDevtools) {
+    return null;
+  }
+
+  const [count, setCount] = React.useState(0);
+
+  // HACK TODO This hack handles the fact that DevTools wasn't writen
+  // with the expectation that a new Bridge or Store prop would be pasesd
+  // and doens't handle that case properly.
+  rerenderComponentsTab = () => {
+    setCount(count + 1);
+  };
+
+  React.useLayoutEffect(() => () => {
+    rerenderComponentsTab = null;
+  });
+
+  return (
+    <DevTools
+      bridge={bridge}
+      browserTheme="light"
+      enabledInspectedElementContextMenu={false}
+      overrideTab="components"
+      showTabBar={false}
+      store={store}
+    />
+  );
+}

src/ui/components/SecondaryToolbox/index.js

@@ -2,6 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import classnames from "classnames";
 import hooks from "ui/hooks";
+import { features } from "ui/utils/prefs";
 import Video from "../Video";
 import WebConsoleApp from "devtools/client/webconsole/components/App";
 import InspectorApp from "devtools/client/inspector/components/App";
@@ -10,6 +11,7 @@ import "./SecondaryToolbox.css";
 import NodePicker from "../NodePicker";
 import { selectors } from "../../reducers";
 import { actions } from "../../actions";
+import { ReactDevtoolsPanel } from "./ReactDevTools";
 
 function PanelButtons({ selectedPanel, setSelectedPanel, narrowMode }) {
   const {
@@ -53,6 +55,16 @@ function PanelButtons({ selectedPanel, setSelectedPanel, narrowMode }) {
           <div className="label">Viewer</div>
         </button>
       ) : null}
+      {features.reactDevtools && (
+        <button
+          className={classnames("components-panel-button", {
+            expanded: selectedPanel === "react-components",
+          })}
+          onClick={() => onClick("react-components")}
+        >
+          <div className="label">⚛️ Components</div>
+        </button>
+      )}
     </div>
   );
 }
@@ -93,6 +105,7 @@ function SecondaryToolbox({ selectedPanel, setSelectedPanel, narrowMode }) {
         {selectedPanel == "console" ? <ConsolePanel /> : null}
         {selectedPanel == "inspector" && show_elements ? <InspectorPanel /> : null}
         {selectedPanel == "viewer" && narrowMode ? <Video /> : null}
+        {selectedPanel == "react-components" ? <ReactDevtoolsPanel /> : null}
       </div>
     </div>
   );

src/ui/utils/devtools-toolbox.js

@@ -45,6 +45,10 @@ export class DevToolsToolbox {
   }
 
   startPanel = async name => {
+    if (name === "react-components") {
+      return;
+    }
+
     if (this.panelWaiters[name]) {
       return this.panelWaiters[name];
     }

src/ui/utils/prefs.js

@@ -37,6 +37,7 @@ pref("devtools.features.videoComments", false);
 pref("devtools.features.consoleHover", false);
 pref("devtools.features.transcriptHover", false);
 pref("devtools.features.widgetHover", false);
+pref("devtools.features.reactDevtools", false);
 
 export const prefs = new PrefsHelper("devtools", {
   splitConsole: ["Bool", "split-console"],
@@ -60,6 +61,7 @@ export const features = new PrefsHelper("devtools.features", {
   consoleHover: ["Bool", "consoleHover"],
   transcriptHover: ["Bool", "transcriptHover"],
   widgetHover: ["Bool", "widgetHover"],
+  reactDevtools: ["Bool", "reactDevtools"],
 });
 
 export const asyncStore = asyncStoreHelper("devtools", {