chrome-devtools-frontend 1.0.1535712 → 1.0.1537268

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

@@ -1,9 +1,7 @@
 // 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/components/icon_button/icon_button.js';
 import './ControlButton.js';
 
@@ -11,6 +9,7 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Badges from '../../../models/badges/badges.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Input from '../../../ui/components/input/input.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 Models from '../models/models.js';
@@ -18,7 +17,7 @@ import * as Actions from '../recorder-actions/recorder-actions.js';
 
 import createRecordingViewStyles from './createRecordingView.css.js';
 
-const {html, Directives: {ifDefined}} = Lit;
+const {html, Directives: {ref, createRef, repeat}} = Lit;
 
 const UIStrings = {
   /**
@@ -103,112 +102,248 @@ const str_ = i18n.i18n.registerUIStrings(
 );
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-create-recording-view': CreateRecordingView;
-  }
-  interface HTMLElementEventMap {
-    recordingstarted: RecordingStartedEvent;
-    recordingcancelled: RecordingCancelledEvent;
-  }
-}
-
-export class RecordingStartedEvent extends Event {
-  static readonly eventName = 'recordingstarted';
+export interface ViewInput {
   name: string;
-  selectorAttribute?: string;
-  selectorTypesToRecord: Models.Schema.SelectorType[];
-
-  constructor(
-      name: string,
-      selectorTypesToRecord: Models.Schema.SelectorType[],
-      selectorAttribute?: string,
-  ) {
-    super(RecordingStartedEvent.eventName, {});
-    this.name = name;
-    this.selectorAttribute = selectorAttribute || undefined;
-    this.selectorTypesToRecord = selectorTypesToRecord;
-  }
+  selectorAttribute: string;
+  selectorTypes: Array<{
+    selectorType: Models.Schema.SelectorType,
+    checked: boolean,
+  }>;
+  error?: Error;
+  onRecordingStarted: () => void;
+  onRecordingCancelled: () => void;
+  onErrorReset: () => void;
+  onUpdate: (update: {
+    selectorType: Models.Schema.SelectorType,
+    checked: boolean,
+  }|{
+    name: string,
+  }|{
+    selectorAttribute: string,
+  }) => void;
 }
 
-export class RecordingCancelledEvent extends Event {
-  static readonly eventName = 'recordingcancelled';
-  constructor() {
-    super(RecordingCancelledEvent.eventName);
-  }
-}
-
-export interface CreateRecordingViewData {
-  recorderSettings: Models.RecorderSettings.RecorderSettings;
+export interface ViewOutput {
+  focusInput?: () => void;
 }
 
-export class CreateRecordingView extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #defaultRecordingName = '';
-  #error?: Error;
-  #recorderSettings?: Models.RecorderSettings.RecorderSettings;
+export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
+  const {
+    name,
+    selectorAttribute,
+    selectorTypes,
+    error,
+    onUpdate,
+    onRecordingStarted,
+    onRecordingCancelled,
+    onErrorReset
+  } = input;
 
-  constructor() {
-    super();
-    this.setAttribute('jslog', `${VisualLogging.section('create-recording-view')}`);
-  }
+  const nameInputRef = createRef<HTMLInputElement>();
 
-  connectedCallback(): void {
-    this.#render();
-    this.#shadow.querySelector('input')?.focus();
-  }
-
-  set data(data: CreateRecordingViewData) {
-    this.#recorderSettings = data.recorderSettings;
-    this.#defaultRecordingName = this.#recorderSettings.defaultTitle;
-  }
-
-  #onKeyDown(event: KeyboardEvent): void {
-    if (this.#error) {
-      this.#error = undefined;
-      this.#render();
+  const onKeyDown = (event: KeyboardEvent): void => {
+    if (error) {
+      onErrorReset();
     }
 
     const keyboardEvent = event;
     if (keyboardEvent.key === 'Enter') {
-      this.startRecording();
+      onRecordingStarted();
       event.stopPropagation();
       event.preventDefault();
     }
+  };
+
+  output.focusInput = () => {
+    nameInputRef.value?.focus();
+  };
+
+  const selectorTypeToLabel = new Map([
+    [Models.Schema.SelectorType.ARIA, i18nString(UIStrings.selectorTypeARIA)],
+    [Models.Schema.SelectorType.CSS, i18nString(UIStrings.selectorTypeCSS)],
+    [Models.Schema.SelectorType.Text, i18nString(UIStrings.selectorTypeText)],
+    [
+      Models.Schema.SelectorType.XPath,
+      i18nString(UIStrings.selectorTypeXPath),
+    ],
+    [
+      Models.Schema.SelectorType.Pierce,
+      i18nString(UIStrings.selectorTypePierce),
+    ],
+  ]);
+
+  // clang-format off
+  Lit.render(
+    html`
+      <style>${createRecordingViewStyles}</style>
+      <style>${Input.textInputStyles}</style>
+      <style>${Input.checkboxStyles}</style>
+      <div class="wrapper" jslog=${VisualLogging.section('create-recording-view')}>
+        <div class="header-wrapper">
+          <h1>${i18nString(UIStrings.createRecording)}</h1>
+          <devtools-button
+            title=${i18nString(UIStrings.cancelRecording)}
+            jslog=${VisualLogging.close().track({click: true})}
+            .data=${
+              {
+                variant: Buttons.Button.Variant.ICON,
+                size: Buttons.Button.Size.SMALL,
+                iconName: 'cross',
+              } as Buttons.Button.ButtonData
+            }
+            @click=${onRecordingCancelled}
+          ></devtools-button>
+        </div>
+        <label class="row-label" for="user-flow-name">${i18nString(
+          UIStrings.recordingName,
+        )}</label>
+        <input
+          value=${name}
+          @focus=${() => nameInputRef.value?.select()}
+          @keydown=${onKeyDown}
+          jslog=${VisualLogging.textField('user-flow-name').track({change: true})}
+          class="devtools-text-input"
+          id="user-flow-name"
+          ${ref(nameInputRef)}
+          @input=${(e:Event) => onUpdate({
+            name: (e.target as HTMLInputElement).value.trim()
+          })}
+        />
+        <label class="row-label" for="selector-attribute">
+          <span>${i18nString(UIStrings.selectorAttribute)}</span>
+          <x-link
+            class="link" href="https://g.co/devtools/recorder#selector"
+            title=${i18nString(UIStrings.learnMore)}
+            jslog=${VisualLogging.link('recorder-selector-help').track({click: true})}>
+            <devtools-icon name="help">
+            </devtools-icon>
+          </x-link>
+        </label>
+        <input
+          value=${selectorAttribute}
+          placeholder="data-testid"
+          @keydown=${onKeyDown}
+          jslog=${VisualLogging.textField('selector-attribute').track({change: true})}
+          class="devtools-text-input"
+          id="selector-attribute"
+          @input=${(e:Event) => onUpdate({
+            selectorAttribute: (e.target as HTMLInputElement).value.trim()
+          })}
+        />
+        <label class="row-label">
+          <span>${i18nString(UIStrings.selectorTypes)}</span>
+          <x-link
+            class="link" href="https://g.co/devtools/recorder#selector"
+            title=${i18nString(UIStrings.learnMore)}
+            jslog=${VisualLogging.link('recorder-selector-help').track({click: true})}>
+            <devtools-icon name="help">
+            </devtools-icon>
+          </x-link>
+        </label>
+        <div class="checkbox-container">
+          ${repeat(selectorTypes, item => {
+            return html`
+              <label class="checkbox-label selector-type">
+                <input
+                  @keydown=${onKeyDown}
+                  .value=${item.selectorType}
+                  jslog=${VisualLogging.toggle().track({click: true}).context(`selector-${item.selectorType}`)}
+                  ?checked=${item.checked}
+                  type="checkbox"
+                  @change=${(e:Event) => onUpdate({
+                    selectorType: item.selectorType,
+                    checked: (e.target as HTMLInputElement).checked
+                  })}
+                />
+                ${selectorTypeToLabel.get(item.selectorType) || item.selectorType}
+              </label>
+            `;
+          })}
+        </div>
+        ${
+          error &&
+          html` <div class="error" role="alert"> ${error.message} </div>`
+        }
+      </div>
+      <div class="footer">
+        <div class="controls">
+          <devtools-control-button
+            @click=${onRecordingStarted}
+            .label=${i18nString(UIStrings.startRecording)}
+            .shape=${'circle'}
+            jslog=${VisualLogging.action(Actions.RecorderActions.START_RECORDING).track({click: true})}
+            title=${Models.Tooltip.getTooltipForActions(
+              i18nString(UIStrings.startRecording),
+              Actions.RecorderActions.START_RECORDING,
+            )}
+          ></devtools-control-button>
+        </div>
+      </div>
+    `,
+    target,
+  );
+  // clang-format on
+};
+
+export class CreateRecordingView extends UI.Widget.Widget {
+  #error?: Error;
+  #name = '';
+  #selectorAttribute = '';
+  #selectorTypes: Array<{
+    selectorType: Models.Schema.SelectorType,
+    checked: boolean,
+  }> = [];
+  #view: typeof DEFAULT_VIEW;
+  #output: ViewOutput = {};
+  #recorderSettings?: Models.RecorderSettings.RecorderSettings;
+
+  onRecordingStarted:
+      (data: {name: string, selectorTypesToRecord: Models.Schema.SelectorType[], selectorAttribute?: string}) => void =
+          () => {};
+  onRecordingCancelled = (): void => {};
+
+  set recorderSettings(value: Models.RecorderSettings.RecorderSettings) {
+    this.#recorderSettings = value;
+    this.#name = this.#recorderSettings.defaultTitle;
+    this.#selectorAttribute = this.#recorderSettings.selectorAttribute;
+    this.#selectorTypes = Object.values(Models.Schema.SelectorType).map(selectorType => {
+      return {
+        selectorType,
+        checked: this.#recorderSettings?.getSelectorByType(selectorType) ?? true,
+      };
+    }),
+    this.requestUpdate();
+  }
+
+  constructor(element?: HTMLElement, view?: typeof DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view || DEFAULT_VIEW;
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
+    void this.updateComplete.then(() => this.#output.focusInput?.());
   }
 
   startRecording(): void {
-    const nameInput = this.#shadow.querySelector<HTMLInputElement>('#user-flow-name');
-    if (!nameInput) {
-      throw new Error('input#user-flow-name not found');
-    }
     if (!this.#recorderSettings) {
       throw new Error('settings not set');
     }
 
-    if (!nameInput.value.trim()) {
+    if (!this.#name.trim()) {
       this.#error = new Error(i18nString(UIStrings.recordingNameIsRequired));
-      this.#render();
+      this.requestUpdate();
       return;
     }
 
-    const selectorTypeElements = this.#shadow.querySelectorAll(
-        '.selector-type input[type=checkbox]',
-    );
-    const selectorTypesToRecord: Models.Schema.SelectorType[] = [];
-    for (const selectorType of selectorTypeElements) {
-      const checkbox = selectorType as HTMLInputElement;
-      const checkboxValue = checkbox.value as Models.Schema.SelectorType;
-      if (checkbox.checked) {
-        selectorTypesToRecord.push(checkboxValue);
-      }
-    }
+    const selectorTypesToRecord = this.#selectorTypes.filter(item => item.checked).map(item => item.selectorType);
 
     if (!selectorTypesToRecord.includes(Models.Schema.SelectorType.CSS) &&
         !selectorTypesToRecord.includes(Models.Schema.SelectorType.XPath) &&
         !selectorTypesToRecord.includes(Models.Schema.SelectorType.Pierce)) {
       this.#error = new Error(i18nString(UIStrings.includeNecessarySelectors));
-      this.#render();
+      this.requestUpdate();
       return;
     }
 
@@ -219,156 +354,54 @@ export class CreateRecordingView extends HTMLElement {
       );
     }
 
-    const selectorAttributeEl = this.#shadow.querySelector(
-                                    '#selector-attribute',
-                                    ) as HTMLInputElement;
-    const selectorAttribute = selectorAttributeEl.value.trim();
-    this.#recorderSettings.selectorAttribute = selectorAttribute;
+    const selectorAttribute = this.#selectorAttribute.trim();
+    if (selectorAttribute) {
+      this.#recorderSettings.selectorAttribute = selectorAttribute;
+    }
+
+    this.onRecordingStarted({
+      name: this.#name,
+      selectorTypesToRecord,
+      selectorAttribute: this.#selectorAttribute ? this.#selectorAttribute : undefined,
+    });
 
-    this.dispatchEvent(
-        new RecordingStartedEvent(
-            nameInput.value.trim(),
-            selectorTypesToRecord,
-            selectorAttribute,
-            ),
-    );
     Badges.UserBadges.instance().recordAction(Badges.BadgeAction.RECORDER_RECORDING_STARTED);
   }
 
-  #dispatchRecordingCancelled(): void {
-    this.dispatchEvent(new RecordingCancelledEvent());
-  }
-
-  #onInputFocus = (): void => {
-    (this.#shadow.querySelector('#user-flow-name') as HTMLInputElement)?.select();
-  };
-
-  #render(): void {
-    const selectorTypeToLabel = new Map([
-      [Models.Schema.SelectorType.ARIA, i18nString(UIStrings.selectorTypeARIA)],
-      [Models.Schema.SelectorType.CSS, i18nString(UIStrings.selectorTypeCSS)],
-      [Models.Schema.SelectorType.Text, i18nString(UIStrings.selectorTypeText)],
-      [
-        Models.Schema.SelectorType.XPath,
-        i18nString(UIStrings.selectorTypeXPath),
-      ],
-      [
-        Models.Schema.SelectorType.Pierce,
-        i18nString(UIStrings.selectorTypePierce),
-      ],
-    ]);
-    // clang-format off
-    Lit.render(
-      html`
-        <style>${createRecordingViewStyles}</style>
-        <style>${Input.textInputStyles}</style>
-        <style>${Input.checkboxStyles}</style>
-        <div class="wrapper">
-          <div class="header-wrapper">
-            <h1>${i18nString(UIStrings.createRecording)}</h1>
-            <devtools-button
-              title=${i18nString(UIStrings.cancelRecording)}
-              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.#dispatchRecordingCancelled}
-            ></devtools-button>
-          </div>
-          <label class="row-label" for="user-flow-name">${i18nString(
-            UIStrings.recordingName,
-          )}</label>
-          <input
-            value=${this.#defaultRecordingName}
-            @focus=${this.#onInputFocus}
-            @keydown=${this.#onKeyDown}
-            jslog=${VisualLogging.textField('user-flow-name').track({change: true})}
-            class="devtools-text-input"
-            id="user-flow-name"
-          />
-          <label class="row-label" for="selector-attribute">
-            <span>${i18nString(UIStrings.selectorAttribute)}</span>
-            <x-link
-              class="link" href="https://g.co/devtools/recorder#selector"
-              title=${i18nString(UIStrings.learnMore)}
-              jslog=${VisualLogging.link('recorder-selector-help').track({click: true})}>
-              <devtools-icon name="help">
-              </devtools-icon>
-            </x-link>
-          </label>
-          <input
-            value=${ifDefined(this.#recorderSettings?.selectorAttribute)}
-            placeholder="data-testid"
-            @keydown=${this.#onKeyDown}
-            jslog=${VisualLogging.textField('selector-attribute').track({change: true})}
-            class="devtools-text-input"
-            id="selector-attribute"
-          />
-          <label class="row-label">
-            <span>${i18nString(UIStrings.selectorTypes)}</span>
-            <x-link
-              class="link" href="https://g.co/devtools/recorder#selector"
-              title=${i18nString(UIStrings.learnMore)}
-              jslog=${VisualLogging.link('recorder-selector-help').track({click: true})}>
-              <devtools-icon name="help">
-              </devtools-icon>
-            </x-link>
-          </label>
-          <div class="checkbox-container">
-            ${Object.values(Models.Schema.SelectorType).map(selectorType => {
-              const checked =
-                this.#recorderSettings?.getSelectorByType(selectorType);
-              return html`
-                  <label class="checkbox-label selector-type">
-                    <input
-                      @keydown=${this.#onKeyDown}
-                      .value=${selectorType}
-                      jslog=${VisualLogging.toggle().track({click: true}).context(`selector-${selectorType}`)}
-                      ?checked=${checked}
-                      type="checkbox"
-                    />
-                    ${selectorTypeToLabel.get(selectorType) || selectorType}
-                  </label>
-                `;
-            })}
-          </div>
-
-          ${
-            this.#error &&
-            html`
-          <div class="error" role="alert">
-            ${this.#error.message}
-          </div>
-        `
-          }
-        </div>
-        <div class="footer">
-          <div class="controls">
-            <devtools-control-button
-              @click=${this.startRecording}
-              .label=${i18nString(UIStrings.startRecording)}
-              .shape=${'circle'}
-              jslog=${VisualLogging.action(Actions.RecorderActions.START_RECORDING).track({click: true})}
-              title=${Models.Tooltip.getTooltipForActions(
-                i18nString(UIStrings.startRecording),
-                Actions.RecorderActions.START_RECORDING,
-              )}
-            ></devtools-control-button>
-          </div>
-        </div>
-      `,
-      this.#shadow,
-      { host: this },
-    );
-    // clang-format on
+  override performUpdate(): void {
+    this.#view(
+        {
+          name: this.#name,
+          selectorAttribute: this.#selectorAttribute,
+          selectorTypes: this.#selectorTypes,
+          error: this.#error,
+          onRecordingCancelled: this.onRecordingCancelled,
+          onUpdate: update => {
+            if ('name' in update) {
+              this.#name = update.name;
+            } else if ('selectorAttribute' in update) {
+              this.#selectorAttribute = update.selectorAttribute;
+            } else {
+              this.#selectorTypes = this.#selectorTypes.map(item => {
+                if (item.selectorType === update.selectorType) {
+                  return {
+                    ...item,
+                    checked: update.checked,
+                  };
+                }
+                return item;
+              });
+            }
+            this.requestUpdate();
+          },
+          onRecordingStarted: (): void => {
+            this.startRecording();
+          },
+          onErrorReset: () => {
+            this.#error = undefined;
+            this.requestUpdate();
+          },
+        },
+        this.#output, this.contentElement);
   }
 }
-
-customElements.define(
-    'devtools-create-recording-view',
-    CreateRecordingView,
-);

package/front_end/panels/security/CookieControlsView.ts

@@ -14,6 +14,7 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Input from '../../ui/components/input/input.js';
+import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -113,7 +114,7 @@ const UIStrings = {
 
 const str_ = i18n.i18n.registerUIStrings('panels/security/CookieControlsView.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export const i18nFormatString = i18n.i18n.getFormatLocalizedString.bind(undefined, str_);
+export const i18nFormatString = uiI18n.getFormatLocalizedString.bind(undefined, str_);
 
 export interface ViewInput {
   thirdPartyControlsDict: Root.Runtime.HostConfig['thirdPartyCookieControls'];

package/front_end/panels/security/CookieReportView.ts

@@ -12,6 +12,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import type * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as uiI18n from '../../ui/i18n/i18n.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';
@@ -448,7 +449,7 @@ export class CookieReportView extends UI.Widget.VBox {
                 'https://github.com/privacysandbox/privacy-sandbox-dev-support/blob/main/3pc-migration-readiness.md',
             i18nString(UIStrings.guidance), undefined, undefined, 'readiness-list-link');
 
-        return html`${i18n.i18n.getFormatLocalizedString(str_, UIStrings.gitHubResource, {
+        return html`${uiI18n.getFormatLocalizedString(str_, UIStrings.gitHubResource, {
           PH1: githubLink,
         })}`;
       }
@@ -461,7 +462,7 @@ export class CookieReportView extends UI.Widget.VBox {
                 (domain.charAt(0) === '.' ? domain.substring(1) : domain),
             i18nString(UIStrings.reportedIssues), undefined, undefined, 'compatibility-lookup-link');
 
-        return html`${i18n.i18n.getFormatLocalizedString(str_, UIStrings.gracePeriod, {
+        return html`${uiI18n.getFormatLocalizedString(str_, UIStrings.gracePeriod, {
           PH1: gracePeriodLink,
         })}`;
       }