Expose ReactDevToolsViewBase configs and wire up bridge

Author: sbuggay

front_end/panels/livemate/BUILD.gn

@@ -15,14 +15,18 @@ generate_css("css_files") {
 devtools_module("livemate") {
   sources = [ "LivematePanel.ts" ]
 
-  deps = [ "../../ui/legacy:bundle" ]
+  deps = [
+    "../../ui/legacy:bundle",
+    "../react_devtools:bundle",
+  ]
 }
 
 devtools_entrypoint("bundle") {
   entrypoint = "livemate.ts"
 
   deps = [
     ":css_files",
+    "../react_devtools:bundle",
     ":livemate",
   ]
 
@@ -39,6 +43,7 @@ devtools_entrypoint("meta") {
 
   deps = [
     ":bundle",
+
     "../../core/i18n:bundle",
     "../../ui/legacy:bundle",
   ]

front_end/panels/livemate/LivematePanel.ts

@@ -5,32 +5,71 @@
 
 import * as UI from '../../ui/legacy/legacy.js';
 import livematePanelStyles from './livematePanel.css.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import { ReactDevToolsViewBase } from '../react_devtools/ReactDevToolsViewBase.js';
+import * as i18n from '../../core/i18n/i18n.js';
 
 let livematePanelInstance: LivematePanel;
 
-export class LivematePanel extends UI.Widget.VBox {
+const UIStrings = {
+  /**
+   *@description Title of the React DevTools view
+   */
+  title: '⚛️ Livemate',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('panels/livemate/LivematePanel.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class LivematePanel extends ReactDevToolsViewBase {
   static instance(): LivematePanel {
     if (!livematePanelInstance) {
       livematePanelInstance = new LivematePanel();
     }
     return livematePanelInstance;
   }
 
-  private constructor() {
-    super(true, true);
-    this.registerRequiredCSS(livematePanelStyles);
-    this.contentElement.classList.add('livemate-panel');
+    constructor() {
+    super('components', i18nString(UIStrings.title));
   }
 
-  override wasShown(): void {
-    super.wasShown();
-    this.renderContent();
-  }
+  override renderDevToolsView(): void {
+    this.clearView();
+
+    const model = this.model;
+    if (model === null) {
+      throw new Error('Attempted to render React DevTools panel, but the model was null');
+    }
+
+    const bridge = model.getBridgeOrThrow();
+
+    const button = document.createElement('button');
+    button.textContent = 'Start Inspecting Host';
+
+    bridge.addListener('selectElement', (element: any) => {console.log(element)});
 
-  private renderContent(): void {
-    this.contentElement.removeChildren();
+    let inspecting = false;
 
-    const header = this.contentElement.createChild('div', 'livemate-header');
-    header.textContent = 'Livemate Panel';
+    button.onclick = () => {
+      if (inspecting) {
+        (bridge as any).send('stopInspectingHost');
+        button.textContent= 'Start Inspecting Host';
+        inspecting = false;
+      } else {
+        (bridge as any).send('startInspectingHost', false);
+        button.textContent= 'Stop Inspecting Host';
+        inspecting = true;
+      }
+    }
+
+    this.contentElement.appendChild(button);
+
+
+
+    // bridge.send('stopInspectingHost');
   }
+
+    // this.contentElement.removeChildren();
+
+    // const header = this.contentElement.createChild('div', 'livemate-header');
+    // header.textContent = 'Livemate Panel';
 }

front_end/panels/react_devtools/BUILD.gn

@@ -38,6 +38,7 @@ devtools_entrypoint("bundle") {
   visibility = [
     ":*",
     "../../entrypoints/*",
+    "../livemate/*",
   ]
 
   visibility += devtools_panels_visibility

front_end/panels/react_devtools/ReactDevToolsViewBase.ts

@@ -75,7 +75,7 @@ function viewElementSourceFunction(source: ReactDevToolsTypes.Source, symbolicat
 export class ReactDevToolsViewBase extends UI.View.SimpleView implements
     SDK.TargetManager.SDKModelObserver<ReactDevToolsModel> {
   readonly #tab: string;
-  #model: ReactDevToolsModel | null = null;
+  model: ReactDevToolsModel | null = null;
 
   constructor(
     tab: 'components' | 'profiler',
@@ -92,7 +92,7 @@ export class ReactDevToolsViewBase extends UI.View.SimpleView implements
   }
 
   modelAdded(model: ReactDevToolsModel): void {
-    this.#model = model;
+    this.model = model;
 
     model.addEventListener(
         ReactDevToolsModelEvents.INITIALIZATION_COMPLETED,
@@ -113,7 +113,7 @@ export class ReactDevToolsViewBase extends UI.View.SimpleView implements
     if (model.isInitialized()) {
       // Already initialized from another rendered React DevTools panel - render
       // from initialized state
-      this.#renderDevToolsView();
+      this.renderDevToolsView();
     } else {
       // Once initialized, it will emit InitializationCompleted event
       model.ensureInitialized();
@@ -139,7 +139,7 @@ export class ReactDevToolsViewBase extends UI.View.SimpleView implements
   }
 
   #handleInitializationCompleted(): void {
-    this.#renderDevToolsView();
+    this.renderDevToolsView();
   }
 
   #handleInitializationFailed({data: errorMessage}: ReactDevToolsInitializationFailedEvent): void {
@@ -150,10 +150,10 @@ export class ReactDevToolsViewBase extends UI.View.SimpleView implements
     this.#renderLoader();
   }
 
-  #renderDevToolsView(): void {
-    this.#clearView();
+  renderDevToolsView(): void {
+    this.clearView();
 
-    const model = this.#model;
+    const model = this.model;
     if (model === null) {
       throw new Error('Attempted to render React DevTools panel, but the model was null');
     }
@@ -171,7 +171,7 @@ export class ReactDevToolsViewBase extends UI.View.SimpleView implements
   }
 
   #renderLoader(): void {
-    this.#clearView();
+    this.clearView();
 
     const loaderContainer = document.createElement('div');
     loaderContainer.setAttribute('style', 'display: flex; flex: 1; justify-content: center; align-items: center');
@@ -184,7 +184,7 @@ export class ReactDevToolsViewBase extends UI.View.SimpleView implements
   }
 
   #renderErrorView(errorMessage: string): void {
-    this.#clearView();
+    this.clearView();
 
     const errorContainer = document.createElement('div');
     errorContainer.setAttribute('style', 'display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center');
@@ -210,7 +210,7 @@ export class ReactDevToolsViewBase extends UI.View.SimpleView implements
     }
   }
 
-  #clearView(): void {
+  clearView(): void {
     this.contentElement.removeChildren();
   }
 }