Initial livemate panel entrypoint

Author: sbuggay

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/panels/livemate/BUILD.gn

@@ -0,0 +1,47 @@
+# 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 = [ "LivematePanel.ts" ]
+
+  deps = [ "../../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/*" ]
+}

front_end/panels/livemate/LivematePanel.ts

@@ -0,0 +1,36 @@
+// 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 * as UI from '../../ui/legacy/legacy.js';
+import livematePanelStyles from './livematePanel.css.js';
+
+let livematePanelInstance: LivematePanel;
+
+export class LivematePanel extends UI.Widget.VBox {
+  static instance(): LivematePanel {
+    if (!livematePanelInstance) {
+      livematePanelInstance = new LivematePanel();
+    }
+    return livematePanelInstance;
+  }
+
+  private constructor() {
+    super(true, true);
+    this.registerRequiredCSS(livematePanelStyles);
+    this.contentElement.classList.add('livemate-panel');
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    this.renderContent();
+  }
+
+  private renderContent(): void {
+    this.contentElement.removeChildren();
+
+    const header = this.contentElement.createChild('div', 'livemate-header');
+    header.textContent = 'Livemate Panel';
+  }
+}

front_end/panels/livemate/livemate-meta.ts

@@ -0,0 +1,43 @@
+// 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 * as i18n from '../../core/i18n/i18n.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import type * as Livemate from './livemate.js';
+
+const UIStrings = {
+  /**
+   *@description Title of the Livemate panel
+   */
+  livemate: 'Livemate',
+  /**
+   *@description Command for showing the Livemate panel
+   */
+  showLivemate: 'Show Livemate',
+} as const;
+
+const str_ = i18n.i18n.registerUIStrings('panels/livemate/livemate-meta.ts', UIStrings);
+const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
+
+let loadedLivemateModule: (typeof Livemate | undefined);
+
+async function loadLivemateModule(): Promise<typeof Livemate> {
+  if (!loadedLivemateModule) {
+    loadedLivemateModule = await import('./livemate.js');
+  }
+  return loadedLivemateModule;
+}
+
+UI.ViewManager.registerViewExtension({
+  location: UI.ViewManager.ViewLocationValues.PANEL,
+  id: 'livemate',
+  title: i18nLazyString(UIStrings.livemate),
+  commandPrompt: i18nLazyString(UIStrings.showLivemate),
+  order: 100,
+  async loadView() {
+    const Livemate = await loadLivemateModule();
+    return Livemate.LivematePanel.LivematePanel.instance();
+  },
+});

front_end/panels/livemate/livemate.ts

@@ -0,0 +1,10 @@
+// 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 * as LivematePanel from './LivematePanel.js';
+
+export {
+  LivematePanel,
+};

front_end/panels/livemate/livematePanel.css

@@ -0,0 +1,20 @@
+.livemate-panel {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  padding: 12px;
+  background-color: var(--sys-color-cdt-base-container);
+}
+
+.livemate-header {
+  font-size: 18px;
+  font-weight: 500;
+  margin-bottom: 16px;
+  color: var(--sys-color-on-surface);
+}
+
+.livemate-content {
+  font-size: 14px;
+  color: var(--sys-color-on-surface);
+  line-height: 1.6;
+}