[livemate] New Livemate Panel

config/gni/devtools_grd_files.gni

@@ -237,6 +237,7 @@ grd_files_release_sources = [
   "front_end/Images/psychiatry.svg",
   "front_end/Images/react_native/learn-debugging-basics.jpg",
   "front_end/Images/react_native/learn-native-debugging.jpg",
+  "front_end/Images/react_native/whats-new-083.jpg",
   "front_end/Images/react_native/learn-react-native-devtools.jpg",
   "front_end/Images/react_native/welcomeIcon.png",
   "front_end/Images/record-start.svg",

config/gni/devtools_image_files.gni

@@ -18,6 +18,7 @@ devtools_image_files = [
   "popoverArrows.png",
   "react_native/learn-debugging-basics.jpg",
   "react_native/learn-native-debugging.jpg",
+  "react_native/whats-new-083.jpg",
   "react_native/learn-react-native-devtools.jpg",
   "react_native/welcomeIcon.png",
   "toolbarResizerVertical.png",

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: () => globalThis.enableLivematePanel ?? 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/BUILD.gn

@@ -50,6 +50,7 @@ devtools_entrypoint("entrypoint") {
     "../../panels/react_devtools:components_meta",
     "../../panels/react_devtools:profiler_meta",
     "../../panels/rn_welcome:meta",
+    "../../panels/livemate:meta",
     "../../panels/security:meta",
     "../../panels/sensors:meta",
     "../../panels/timeline:meta",

front_end/entrypoints/rn_fusebox/rn_fusebox.ts

@@ -14,6 +14,7 @@ import '../../panels/network/network-meta.js';
 import '../../panels/react_devtools/react_devtools_components-meta.js';
 import '../../panels/react_devtools/react_devtools_profiler-meta.js';
 import '../../panels/rn_welcome/rn_welcome-meta.js';
+import '../../panels/livemate/livemate-meta.js';
 import '../../panels/timeline/timeline-meta.js';
 
 import * as Host from '../../core/host/host.js';

front_end/global_typings/react_native.d.ts

@@ -18,6 +18,8 @@ declare global {
     // eslint-disable-next-line no-var
     var enableTimelineFrames: boolean|undefined;
     // eslint-disable-next-line no-var
+    var enableLivematePanel: boolean|undefined;
+    // eslint-disable-next-line no-var
     var reactNativeOpenInEditorButtonImage: string|undefined;
     // eslint-disable-next-line no-var,@typescript-eslint/naming-convention
     var FB_ONLY__reactNativeFeedbackLink: string|undefined;

front_end/panels/livemate/BUILD.gn

@@ -0,0 +1,59 @@
+# Copyright (c) Meta Platforms, Inc. and affiliates.
+# Copyright 2024 The Chromium Authors. All rights reserved.
+# Use of this source code is governed by a BSD-style license that can be
+# found in the LICENSE file.
+
+import("../../../scripts/build/ninja/devtools_entrypoint.gni")
+import("../../../scripts/build/ninja/devtools_module.gni")
+import("../../../scripts/build/ninja/generate_css.gni")
+import("../visibility.gni")
+
+generate_css("css_files") {
+  sources = [ "livematePanel.css" ]
+}
+
+devtools_module("livemate") {
+  sources = [
+    "LivemateModel.ts",
+    "LivematePanel.ts",
+    "LivemateSpec.ts",
+  ]
+
+  deps = [
+    "../../core/common:bundle",
+    "../../core/i18n:bundle",
+    "../../core/platform:bundle",
+    "../../core/sdk:bundle",
+    "../../generated:protocol",
+    "../../ui/legacy:bundle",
+  ]
+}
+
+devtools_entrypoint("bundle") {
+  entrypoint = "livemate.ts"
+
+  deps = [
+    ":css_files",
+    ":livemate",
+  ]
+
+  visibility = [
+    ":*",
+    "../../entrypoints/*",
+  ]
+
+  visibility += devtools_panels_visibility
+}
+
+devtools_entrypoint("meta") {
+  entrypoint = "livemate-meta.ts"
+
+  deps = [
+    ":bundle",
+
+    "../../core/i18n:bundle",
+    "../../ui/legacy:bundle",
+  ]
+
+  visibility = [ "../../entrypoints/*" ]
+}