chrome-devtools-frontend 1.0.1657110 → 1.0.1660788

package/front_end/panels/recorder/components/ExtensionView.ts

@@ -1,14 +1,11 @@
 // Copyright 2023 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
-
-import '../../../ui/legacy/legacy.js';
-import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as PublicExtensions from '../../../models/extensions/extensions.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
+import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as Extensions from '../extensions/extensions.js';
@@ -27,106 +24,100 @@ const UIStrings = {
    */
   extension: 'Content provided by a browser extension',
 } as const;
-const str_ = i18n.i18n.registerUIStrings(
-    'panels/recorder/components/ExtensionView.ts',
-    UIStrings,
-);
+const str_ = i18n.i18n.registerUIStrings('panels/recorder/components/ExtensionView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-recorder-extension-view': ExtensionView;
-  }
-  interface HTMLElementEventMap {
-    recorderextensionviewclosed: ClosedEvent;
-  }
+export interface ViewInput {
+  descriptor: PublicExtensions.RecorderPluginManager.ViewDescriptor;
+  iframe: HTMLElement;
 }
 
-export class ClosedEvent extends Event {
-  static readonly eventName = 'recorderextensionviewclosed';
-  constructor() {
-    super(ClosedEvent.eventName, {bubbles: true, composed: true});
-  }
+export interface ViewOutput {
+  closeView: () => void;
 }
 
-export class ExtensionView extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const {descriptor, iframe} = input;
+  // clang-format off
+  Lit.render(
+    html`
+      <style>${extensionViewStyles}</style>
+      <div class="extension-view">
+        <header>
+          <div class="title">
+            <devtools-icon
+              class="icon"
+              title=${i18nString(UIStrings.extension)}
+              name="extension">
+            </devtools-icon>
+            ${descriptor.title}
+          </div>
+          <devtools-button
+            title=${i18nString(UIStrings.closeView)}
+            jslog=${VisualLogging.close().track({click: true})}
+            .data=${
+              {
+                variant: Buttons.Button.Variant.ICON,
+                size: Buttons.Button.Size.SMALL,
+                iconName: 'cross',
+              } as Buttons.Button.ButtonData
+            }
+            @click=${output.closeView}
+          ></devtools-button>
+        </header>
+        <main>
+          ${iframe}
+        </main>
+    </div>
+  `, target, {container: {attributes: {jslog: VisualLogging.section('extension-view')}}});
+  // clang-format on
+};
+
+export class ExtensionView extends UI.Widget.VBox {
   #descriptor?: PublicExtensions.RecorderPluginManager.ViewDescriptor;
-
-  constructor() {
-    super();
-
-    this.setAttribute('jslog', `${VisualLogging.section('extension-view')}`);
+  #view: View;
+  #onClose?: () => void;
+  #viewOutput: ViewOutput = {
+    closeView: () => {
+      this.#onClose?.();
+    },
+  };
+
+  set onClose(callback: () => void) {
+    this.#onClose = callback;
   }
 
-  connectedCallback(): void {
-    this.#render();
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
   }
 
-  disconnectedCallback(): void {
-    if (!this.#descriptor) {
-      return;
-    }
-    Extensions.ExtensionManager.ExtensionManager.instance().getView(this.#descriptor.id).hide();
+  get descriptor(): PublicExtensions.RecorderPluginManager.ViewDescriptor|undefined {
+    return this.#descriptor;
   }
 
-  set descriptor(
-      descriptor: PublicExtensions.RecorderPluginManager.ViewDescriptor,
-  ) {
+  set descriptor(descriptor: PublicExtensions.RecorderPluginManager.ViewDescriptor|undefined) {
     this.#descriptor = descriptor;
-    this.#render();
-    Extensions.ExtensionManager.ExtensionManager.instance().getView(descriptor.id).show();
+    if (descriptor) {
+      Extensions.ExtensionManager.ExtensionManager.instance().getView(descriptor.id).show();
+    }
+    this.requestUpdate();
   }
 
-  #closeView(): void {
-    this.dispatchEvent(new ClosedEvent());
+  override willHide(): void {
+    super.willHide();
+    if (this.#descriptor) {
+      Extensions.ExtensionManager.ExtensionManager.instance().getView(this.#descriptor.id).hide();
+    }
   }
 
-  #render(): void {
+  override performUpdate(): void {
     if (!this.#descriptor) {
       return;
     }
     const iframe = Extensions.ExtensionManager.ExtensionManager.instance().getView(this.#descriptor.id).frame();
-    // clang-format off
-    Lit.render(
-      html`
-        <style>${extensionViewStyles}</style>
-        <div class="extension-view">
-          <header>
-            <div class="title">
-              <devtools-icon
-                class="icon"
-                title=${i18nString(UIStrings.extension)}
-                name="extension">
-              </devtools-icon>
-              ${this.#descriptor.title}
-            </div>
-            <devtools-button
-              title=${i18nString(UIStrings.closeView)}
-              jslog=${VisualLogging.close().track({click: true})}
-              .data=${
-                {
-                  variant: Buttons.Button.Variant.ICON,
-                  size: Buttons.Button.Size.SMALL,
-                  iconName: 'cross',
-                } as Buttons.Button.ButtonData
-              }
-              @click=${this.#closeView}
-            ></devtools-button>
-          </header>
-          <main>
-            ${iframe}
-          </main>
-      </div>
-    `,
-      this.#shadow,
-      { host: this },
-    );
-    // clang-format on
+    this.#view({descriptor: this.#descriptor, iframe}, this.#viewOutput, this.contentElement);
   }
 }
-
-customElements.define(
-    'devtools-recorder-extension-view',
-    ExtensionView,
-);

package/front_end/panels/recorder/components/RecordingListView.ts

@@ -18,11 +18,11 @@ const {html} = Lit;
 
 const UIStrings = {
   /**
-   * @description The title of the page that contains a list of saved recordings that the user has..
+   * @description The title of the page that contains a list of saved recordings.
    */
   savedRecordings: 'Saved recordings',
   /**
-   * @description The title of the button that leads to create a new recording page.
+   * @description The title of the button that leads to the page for creating a new recording.
    */
   createRecording: 'Create a new recording',
   /**
@@ -34,7 +34,7 @@ const UIStrings = {
    */
   deleteRecording: 'Delete recording',
   /**
-   * @description The title of the row corresponding to a recording. By clicking on the row, the user open the recording for editing.
+   * @description The title of the row corresponding to a recording. By clicking on the row, the user opens the recording for editing.
    */
   openRecording: 'Open recording',
 } as const;

package/front_end/panels/recorder/components/RecordingView.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import '../../../ui/kit/kit.js';
-import './ExtensionView.js';
 
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -28,6 +27,7 @@ import {PlayRecordingSpeed} from '../models/RecordingPlayer.js';
 import * as Actions from '../recorder-actions/recorder-actions.js';
 
 import {ControlButton} from './ControlButton.js';
+import {ExtensionView} from './ExtensionView.js';
 import recordingViewStyles from './recordingView.css.js';
 import {ReplaySection} from './ReplaySection.js';
 import {
@@ -80,11 +80,11 @@ const UIStrings = {
    */
   environment: 'Environment',
   /**
-   * @description The title of the screenshot image that is shown for every section in the recordign view.
+   * @description The title of the screenshot image that is shown for every section in the recording view.
    */
   screenshotForSection: 'Screenshot for this section',
   /**
-   * @description The title of the button that edits the current recording's title.
+   * @description The title of the button that edits the current recording’s title.
    */
   editTitle: 'Edit title',
   /**
@@ -138,7 +138,7 @@ const UIStrings = {
    */
   addAssertion: 'Add assertion',
   /**
-   * @description The title of the button that open current recording in Performance panel.
+   * @description The title of the button that opens the current recording in the Performance panel.
    */
   performancePanel: 'Performance panel',
   /**
@@ -148,7 +148,7 @@ const UIStrings = {
   /**
    * @description The announcement when the code sidebar is closed.
    */
-  codeSidebarClosed: 'Code sidebar closed'
+  codeSidebarClosed: 'Code sidebar closed',
 } as const;
 const str_ = i18n.i18n.registerUIStrings(
     'panels/recorder/components/RecordingView.ts',
@@ -381,8 +381,8 @@ function renderTimelineArea(input: ViewInput, output: ViewOutput): Lit.LitTempla
   if (input.extensionDescriptor) {
     // clang-format off
       return html`
-        <devtools-recorder-extension-view .descriptor=${input.extensionDescriptor}>
-        </devtools-recorder-extension-view>
+        <devtools-widget class="recorder-extension-view" ${widget(ExtensionView, {descriptor: input.extensionDescriptor})}>
+        </devtools-widget>
       `;
     // clang-format on
   }
@@ -802,9 +802,12 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         ${
           input.extensionDescriptor
             ? html`
-            <devtools-recorder-extension-view .descriptor=${
-              input.extensionDescriptor
-            }></devtools-recorder-extension-view>` : html`
+            <devtools-widget class="recorder-extension-view" ${widget(ExtensionView, {
+              descriptor: input.extensionDescriptor,
+              onClose: () => {
+                target.dispatchEvent(new Event('recorderextensionviewclosed', {bubbles: true, composed: true}));
+              }
+            })}></devtools-widget>` : html`
           ${renderSettings(input)}
           ${renderTimelineArea(input, output)}
         `}

package/front_end/panels/recorder/components/ReplaySection.ts

@@ -19,39 +19,39 @@ const {html, Directives: {ifDefined, repeat}} = Lit;
 
 const UIStrings = {
   /**
-   * @description Replay button label
+   * @description Replay button label.
    */
   Replay: 'Replay',
   /**
-   * @description Button label for the normal speed replay option
+   * @description Button label for the normal speed replay option.
    */
   ReplayNormalButtonLabel: 'Normal speed',
   /**
-   * @description Item label for the normal speed replay option
+   * @description Item label for the normal speed replay option.
    */
   ReplayNormalItemLabel: 'Normal (Default)',
   /**
-   * @description Button label for the slow speed replay option
+   * @description Button label for the slow speed replay option.
    */
   ReplaySlowButtonLabel: 'Slow speed',
   /**
-   * @description Item label for the slow speed replay option
+   * @description Item label for the slow speed replay option.
    */
   ReplaySlowItemLabel: 'Slow',
   /**
-   * @description Button label for the very slow speed replay option
+   * @description Button label for the very slow speed replay option.
    */
   ReplayVerySlowButtonLabel: 'Very slow speed',
   /**
-   * @description Item label for the very slow speed replay option
+   * @description Item label for the very slow speed replay option.
    */
   ReplayVerySlowItemLabel: 'Very slow',
   /**
-   * @description Button label for the extremely slow speed replay option
+   * @description Button label for the extremely slow speed replay option.
    */
   ReplayExtremelySlowButtonLabel: 'Extremely slow speed',
   /**
-   * @description Item label for the slow speed replay option
+   * @description Item label for the extremely slow speed replay option.
    */
   ReplayExtremelySlowItemLabel: 'Extremely slow',
   /**