Conflicts and cleanup

Author: sbuggay

front_end/core/rn_experiments/experimentsImpl.ts

@@ -191,3 +191,10 @@ Instance.register({
   unstable: true,
   enabledByDefault: () => globalThis.enableTimelineFrames ?? false,
 });
+
+Instance.register({
+  name: RNExperimentName.ENABLE_LIVEMATE_PANEL,
+  title: 'Enable Livemate Panel',
+  unstable: true,
+  enabledByDefault: false,
+});

front_end/core/root/Runtime.ts

@@ -306,6 +306,7 @@ export enum RNExperimentName {
   REACT_NATIVE_SPECIFIC_UI = 'react-native-specific-ui',
   JS_HEAP_PROFILER_ENABLE = 'js-heap-profiler-enable',
   ENABLE_TIMELINE_FRAMES = 'enable-timeline-frames',
+  ENABLE_LIVEMATE_PANEL = 'enable-livemate-panel',
 }
 
 export enum ConditionName {
@@ -341,6 +342,7 @@ export const enum ExperimentName {
   REACT_NATIVE_SPECIFIC_UI = RNExperimentName.REACT_NATIVE_SPECIFIC_UI,
   NOT_REACT_NATIVE_SPECIFIC_UI = '!' + RNExperimentName.REACT_NATIVE_SPECIFIC_UI,
   ENABLE_TIMELINE_FRAMES = RNExperimentName.ENABLE_TIMELINE_FRAMES,
+  ENABLE_LIVEMATE_PANEL = RNExperimentName.ENABLE_LIVEMATE_PANEL,
 }
 
 export enum GenAiEnterprisePolicyValue {

front_end/entrypoints/rn_fusebox/rn_fusebox.ts

@@ -79,6 +79,7 @@ RNExperiments.RNExperimentsImpl.setIsReactNativeEntryPoint(true);
 RNExperiments.RNExperimentsImpl.Instance.enableExperimentsByDefault([
   Root.Runtime.ExperimentName.JS_HEAP_PROFILER_ENABLE,
   Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI,
+  Root.Runtime.ExperimentName.ENABLE_LIVEMATE_PANEL,
 ]);
 
 document.addEventListener('visibilitychange', () => {

front_end/panels/livemate/LivematePanel.ts

@@ -34,7 +34,7 @@ export class LivematePanel extends ReactDevToolsViewBase {
     this.registerRequiredCSS(livematePanelStyles);
   }
 
-  override renderDevToolsView(): void {
+  protected override renderDevToolsView(): void {
     this.clearView();
 
     this.contentElement.classList.add('livemate-panel');
@@ -71,11 +71,6 @@ export class LivematePanel extends ReactDevToolsViewBase {
     const breadcrumb = document.createElement('div');
     breadcrumb.setAttribute('style', 'flex: 1; font-family: monospace; font-size: 12px; color: var(--sys-color-on-surface); display: flex; align-items: center; gap: 4px; flex-wrap: wrap;');
 
-    // Selected component box
-    // const selectedComponentBox = document.createElement('div');
-    // selectedComponentBox.setAttribute('style', 'padding: 4px 8px; border: 1px solid var(--sys-color-divider); border-radius: 4px; background: var(--sys-color-surface-variant); font-family: monospace; font-size: 12px; color: var(--sys-color-on-surface);');
-    // selectedComponentBox.textContent = '';
-
     // Track the current hierarchy for prompt context
     let currentHierarchy: Array<{name: string}> = [];
 
@@ -87,13 +82,7 @@ export class LivematePanel extends ReactDevToolsViewBase {
         return;
       }
 
-      // Set the selected component to the first one (most specific)
-      // selectedComponentBox.textContent = components[0].name;
-
-      // Show remaining components as breadcrumb (skip the first since it's in the selected box)
-      const breadcrumbComponents = components.slice(-5);
-
-      breadcrumbComponents.forEach((component, index) => {
+      components.forEach((component: {name: string}, index: number) => {
         const componentSpan = document.createElement('span');
         componentSpan.textContent = component.name;
         componentSpan.setAttribute('style', 'cursor: pointer; color: var(--sys-color-primary); text-decoration: underline;');
@@ -106,17 +95,17 @@ export class LivematePanel extends ReactDevToolsViewBase {
 
         breadcrumb.appendChild(componentSpan);
 
-        if (index < breadcrumbComponents.length - 1) {
+        if (index < components.length - 1) {
           const separator = document.createElement('span');
           separator.textContent = '>';
-          separator.setAttribute('style', 'color: var(--sys-color-on-surface); opacity: 0.6;');
+          separator.setAttribute('style', 'opacity: 0.6;');
           breadcrumb.appendChild(separator);
         }
       });
     };
 
     // Listen for component data from React DevTools
-    bridge.addListener('viewDataAtPoint', (data: unknown) => {
+    bridge.addListener('selectElementWithViewData', (data: unknown) => {
       currentHierarchy = data as Array<{name: string}>;
       updateBreadcrumb(currentHierarchy);
     });

front_end/panels/livemate/livemate-meta.ts

@@ -4,6 +4,7 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Root from '../../core/root/root.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import type * as Livemate from './livemate.js';
 
@@ -36,6 +37,7 @@ UI.ViewManager.registerViewExtension({
   title: i18nLazyString(UIStrings.livemate),
   commandPrompt: i18nLazyString(UIStrings.showLivemate),
   order: 100,
+  experiment: Root.Runtime.ExperimentName.ENABLE_LIVEMATE_PANEL,
   async loadView() {
     const Livemate = await loadLivemateModule();
     return Livemate.LivematePanel.LivematePanel.instance();

front_end/panels/react_devtools/ReactDevToolsViewBase.ts

@@ -77,6 +77,10 @@ export class ReactDevToolsViewBase extends UI.View.SimpleView implements
   readonly #tab: string;
   #model: ReactDevToolsModel | null = null;
 
+  protected get model(): ReactDevToolsModel | null {
+    return this.#model;
+  }
+
   constructor(
     tab: 'components' | 'profiler',
     title: Platform.UIString.LocalizedString,
@@ -213,4 +217,12 @@ export class ReactDevToolsViewBase extends UI.View.SimpleView implements
   #clearView(): void {
     this.contentElement.removeChildren();
   }
+
+  protected clearView(): void {
+    this.#clearView();
+  }
+
+  protected renderDevToolsView(): void {
+    this.#renderDevToolsView();
+  }
 }