chrome-devtools-frontend 1.0.1675430 → 1.0.1676824

package/front_end/panels/common/GdpSignUpDialog.ts

@@ -22,45 +22,45 @@ import styles from './gdpSignUpDialog.css.js';
 
 const UIStrings = {
   /**
-   * @description Aria label for the Google Developer Program sign up dialog
+   * @description ARIA label for the Google Developer Program sign up dialog.
    */
   gdpDialogAriaLabel: 'Google Developer Program sign up dialog',
   /**
-   *
-   * @description Button text for canceling GDP sign up.
+   * @description Button text for canceling Google Developer Program sign up.
    */
   cancel: 'Cancel',
   /**
-   * @description Button text for confirming GDP sign up.
+   * @description Button text for confirming Google Developer Program sign up.
    */
   signUp: 'Sign up',
   /**
-   * @description Title for the first section of the GDP sign up dialog.
+   * @description Title for the first section of the Google Developer Program sign up dialog.
    */
   designedForSuccess: 'Designed for your success',
   /**
-   * @description Body for the first section of the GDP sign up dialog.
+   * @description Body for the first section of the Google Developer Program sign up dialog.
    */
-  designedForSuccessBody: 'Grow your skills, build with AI, and earn badges you can showcase in your developer profile',
+  designedForSuccessBody:
+      'Grow your skills, build with AI, and earn badges you can showcase in your developer profile.',
   /**
-   * @description Title for the second section of the GDP sign up dialog.
+   * @description Title for the second section of the Google Developer Program sign up dialog.
    */
   keepUpdated: 'Keep me updated',
   /**
-   * @description Body for the second section of the GDP sign up dialog.
+   * @description Body for the second section of the Google Developer Program sign up dialog.
    */
-  keepUpdatedBody: 'The latest DevTools features, event invites, and tailored insights land directly in your inbox',
+  keepUpdatedBody: 'The latest DevTools features, event invites, and tailored insights land directly in your inbox.',
   /**
-   * @description Title for the third section of the GDP sign up dialog.
+   * @description Title for the third section of the Google Developer Program sign up dialog.
    */
   tailorProfile: 'Tailor your profile',
   /**
-   * @description Body for the third section of the GDP sign up dialog.
+   * @description Body for the third section of the Google Developer Program sign up dialog.
    */
   tailorProfileBody:
-      'The name on your Google Account and your interests will be used in your Google Developer Profile. Your name may appear where you contribute and can be changed at any time.',
+      'The name on your Google account and your interests will be used in your Google Developer Profile. Your name may appear where you contribute and can be changed at any time.',
   /**
-   * @description Body for the third section of the GDP sign up dialog.
+   * @description Disclaimer text for tailoring profile in the Google Developer Program sign up dialog.
    * @example {Content Policy} PH1
    * @example {Terms of Service} PH2
    * @example {Privacy Policy} PH3
@@ -88,9 +88,9 @@ const UIStrings = {
    */
   privacyPolicy: 'Privacy Policy',
   /**
-   * @description Error message shown in a snackbar when GDP sign up fails.
+   * @description Error message shown in a snackbar when Google Developer Profile creation fails.
    */
-  signUpFailed: 'Your Google Developer Program profile couldn’t be created. Please try again later.',
+  signUpFailed: 'Your Google Developer Profile couldn’t be created. Please try again later.',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/common/GdpSignUpDialog.ts', UIStrings);

package/front_end/panels/common/GeminiRebrandPromoDialog.ts

@@ -24,11 +24,10 @@ import styles from './geminiRebrandPromoDialog.css.js';
 
 const UIStrings = {
   /**
-   * @description Aria label for the dialog
+   * @description ARIA label for the dialog.
    */
   dialogAriaLabel: 'Gemini 3 Flash in DevTools',
   /**
-   *
    * @description Button text for dismissing the dialog.
    */
   dismiss: 'Dismiss',
@@ -37,19 +36,19 @@ const UIStrings = {
    */
   getStarted: 'Get started',
   /**
-   * @description Detail message shown in the dialog.
+   * @description Feature item describing Gemini as an AI companion for web development.
    */
   detailAiCompanion: 'Meet your AI-powered companion for web dev',
   /**
-   * @description Detail message shown in the dialog.
+   * @description Feature item describing instant answers for console errors.
    */
   detailConsoleErrors: 'Get instant, accurate answers for console errors',
   /**
-   * @description Detail message shown in the dialog.
+   * @description Feature item describing CSS and JS snippet generation.
    */
   detailGenerateCode: 'Generate CSS and JS snippets on the fly',
   /**
-   * @description Detail message shown in the dialog.
+   * @description Feature item describing automatic issue detection in performance traces.
    */
   detailPerformance: 'Automatically find issues in performance traces',
 } as const;

package/front_end/panels/common/PersistenceUtils.ts

@@ -14,12 +14,12 @@ import {html, type LitTemplate} from '../../ui/lit/lit.js';
 
 const UIStrings = {
   /**
-   * @description Text in Persistence Utils of the Workspace settings in Settings
+   * @description Tooltip text indicating that a file is linked to a source map.
    * @example {example.url} PH1
    */
   linkedToSourceMapS: 'Linked to source map: {PH1}',
   /**
-   * @description Text to show something is linked to another
+   * @description Tooltip text indicating that a file is linked to another file.
    * @example {example.url} PH1
    */
   linkedToS: 'Linked to {PH1}',

package/front_end/panels/common/common.ts

@@ -2,105 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/* eslint-disable @devtools/no-imperative-dom-api */
-
-import * as Host from '../../core/host/host.js';
-import * as i18n from '../../core/i18n/i18n.js';
-import type * as Platform from '../../core/platform/platform.js';
-import * as Geometry from '../../models/geometry/geometry.js';
-import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as UI from '../../ui/legacy/legacy.js';
-
-import commonStyles from './common.css.js';
-
-const UIStrings = {
-  /**
-   * @description Text for the cancel button in the dialog.
-   */
-  cancel: 'Cancel',
-  /**
-   * @description Text for the allow button in the "type to allow" dialog.
-   */
-  allow: 'Allow',
-} as const;
-
-const str_ = i18n.i18n.registerUIStrings('panels/common/common.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
-export class TypeToAllowDialog {
-  static async show(options: {
-    jslogContext: {
-      dialog: string,
-      input: string,
-    },
-    header: Platform.UIString.LocalizedString,
-    message: Platform.UIString.LocalizedString,
-    typePhrase: Platform.UIString.LocalizedString,
-    inputPlaceholder: Platform.UIString.LocalizedString,
-  }): Promise<boolean> {
-    const dialog = new UI.Dialog.Dialog(options.jslogContext.dialog);
-    dialog.setMaxContentSize(new Geometry.Size(504, 340));
-    dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.SET_EXACT_WIDTH_MAX_HEIGHT);
-    dialog.setDimmed(true);
-    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(dialog.contentElement, {cssFile: commonStyles});
-    const content = shadowRoot.createChild('div', 'type-to-allow-dialog');
-
-    const result = await new Promise<boolean>(resolve => {
-      const header = content.createChild('div', 'header');
-      header.createChild('div', 'title').textContent = options.header;
-
-      const closeButton = header.createChild('dt-close-button', 'dialog-close-button');
-      closeButton.setTabbable(true);
-      self.onInvokeElement(closeButton, event => {
-        dialog.hide();
-        event.consume(true);
-        resolve(false);
-      });
-      closeButton.setSize(Buttons.Button.Size.SMALL);
-
-      content.createChild('div', 'message').textContent = options.message;
-
-      const input = UI.UIUtils.createInput('text-input', 'text', options.jslogContext.input);
-      input.placeholder = options.inputPlaceholder;
-      content.appendChild(input);
-
-      const buttonsBar = content.createChild('div', 'button');
-      const cancelButton =
-          UI.UIUtils.createTextButton(i18nString(UIStrings.cancel), () => resolve(false), {jslogContext: 'cancel'});
-
-      const allowButton = UI.UIUtils.createTextButton(i18nString(UIStrings.allow), () => {
-        resolve(input.value === options.typePhrase || input.value === `'${options.typePhrase}'`);
-      }, {jslogContext: 'confirm', variant: Buttons.Button.Variant.PRIMARY});
-      allowButton.disabled = true;
-
-      buttonsBar.appendChild(allowButton);
-      buttonsBar.appendChild(cancelButton);
-
-      input.addEventListener('input', () => {
-        allowButton.disabled = !Boolean(input.value);
-      }, false);
-      input.addEventListener('paste', e => e.preventDefault());
-      input.addEventListener('drop', e => e.preventDefault());
-
-      dialog.setOutsideClickCallback(event => {
-        event.consume();
-        resolve(false);
-      });
-      dialog.show();
-      Host.userMetrics.actionTaken(Host.UserMetrics.Action.SelfXssWarningDialogShown);
-    });
-    dialog.hide();
-    return result;
-  }
-}
-
-export {AiCodeCompletionTeaser} from './AiCodeCompletionTeaser.js';
-export * as AiCodeGenerationTeaser from './AiCodeGenerationTeaser.js';
-export {AiCodeGenerationUpgradeDialog} from './AiCodeGenerationUpgradeDialog.js';
-export {FreDialog} from './FreDialog.js';
 export {GdpSignUpDialog} from './GdpSignUpDialog.js';
 export {GeminiRebrandPromoDialog} from './GeminiRebrandPromoDialog.js';
-export {AiCodeCompletionDisclaimer, type DisclaimerTextVariant} from './AiCodeCompletionDisclaimer.js';
 export * as AiCodeCompletionSummaryToolbar from './AiCodeCompletionSummaryToolbar.js';
 export * from './BadgeNotification.js';
 export * as CPUThrottlingOption from './CPUThrottlingOption.js';

package/front_end/panels/console/ConsoleInsightTeaser.ts

@@ -12,11 +12,11 @@ import * as Root from '../../core/root/root.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as Dialogs from '../../ui/components/dialogs/dialogs.js';
 import type * as Tooltips from '../../ui/components/tooltips/tooltips.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 PanelCommon from '../common/common.js';
 
 import consoleInsightTeaserStyles from './consoleInsightTeaser.css.js';
 import {ConsoleViewMessage} from './ConsoleViewMessage.js';
@@ -500,7 +500,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     const noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
         Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
     const iconName = AiAssistanceModel.AiUtils.getIconName();
-    const result = await PanelCommon.FreDialog.show({
+    const result = await Dialogs.FreDialog.FreDialog.show({
       header: {iconName, text: lockedString(UIStringsNotTranslate.freDisclaimerHeader)},
       reminderItems: [
         {

package/front_end/panels/console/ConsolePinPane.ts

@@ -10,6 +10,7 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as Dialogs from '../../ui/components/dialogs/dialogs.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 // eslint-disable-next-line @devtools/es-modules-import
@@ -17,7 +18,6 @@ import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
-import * as PanelCommon from '../common/common.js';
 
 import consolePinPaneStyles from './consolePinPane.css.js';
 
@@ -437,7 +437,7 @@ export class ConsolePinPresenter extends UI.Widget.Widget {
   }
 
   async #showSelfXssWarning(): Promise<void> {
-    const allowPasting = await PanelCommon.TypeToAllowDialog.show({
+    const allowPasting = await Dialogs.TypeToAllowDialog.TypeToAllowDialog.show({
       jslogContext: {
         dialog: 'self-xss-warning',
         input: 'allow-pasting',

package/front_end/panels/console/ConsoleView.ts

@@ -58,6 +58,7 @@ import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as SettingUIRegistration from '../../ui/settings/settings.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import {AiCodeCompletionSummaryToolbar} from '../common/common.js';
 
@@ -498,30 +499,30 @@ export class ConsoleView extends UI.Widget.VBox implements
     settingsPane.append(
         SettingsUI.SettingsUI.createSettingCheckbox(
             i18nString(UIStrings.networkMessages), this.filter.networkMessagesSetting,
-            this.filter.networkMessagesSetting.title()),
+            SettingUIRegistration.SettingUIRegistration.resolve(this.filter.networkMessagesSetting.descriptor()).title),
+        SettingsUI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.logXMLHttpRequests),
+                                                    monitoringXHREnabledSetting),
+        SettingsUI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.preserveLog), preserveConsoleLogSetting,
+                                                    i18nString(UIStrings.doNotClearLogOnPageReload)),
         SettingsUI.SettingsUI.createSettingCheckbox(
-            i18nString(UIStrings.logXMLHttpRequests), monitoringXHREnabledSetting),
+            SettingUIRegistration.SettingUIRegistration.resolve(consoleEagerEvalSetting.descriptor()).title,
+            consoleEagerEvalSetting, i18nString(UIStrings.eagerlyEvaluateTextInThePrompt)),
+        SettingsUI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.selectedContextOnly),
+                                                    this.filter.filterByExecutionContextSetting,
+                                                    i18nString(UIStrings.onlyShowMessagesFromTheCurrentContext)),
         SettingsUI.SettingsUI.createSettingCheckbox(
-            i18nString(UIStrings.preserveLog), preserveConsoleLogSetting,
-            i18nString(UIStrings.doNotClearLogOnPageReload)),
+            SettingUIRegistration.SettingUIRegistration.resolve(this.consoleHistoryAutocompleteSetting.descriptor())
+                .title,
+            this.consoleHistoryAutocompleteSetting, i18nString(UIStrings.autocompleteFromHistory)),
         SettingsUI.SettingsUI.createSettingCheckbox(
-            consoleEagerEvalSetting.title(), consoleEagerEvalSetting,
-            i18nString(UIStrings.eagerlyEvaluateTextInThePrompt)),
+            SettingUIRegistration.SettingUIRegistration.resolve(this.groupSimilarSetting.descriptor()).title,
+            this.groupSimilarSetting, i18nString(UIStrings.groupSimilarMessagesInConsole)),
         SettingsUI.SettingsUI.createSettingCheckbox(
-            i18nString(UIStrings.selectedContextOnly), this.filter.filterByExecutionContextSetting,
-            i18nString(UIStrings.onlyShowMessagesFromTheCurrentContext)),
+            SettingUIRegistration.SettingUIRegistration.resolve(userActivationEvalSetting.descriptor()).title,
+            userActivationEvalSetting, i18nString(UIStrings.treatEvaluationAsUserActivation)),
         SettingsUI.SettingsUI.createSettingCheckbox(
-            this.consoleHistoryAutocompleteSetting.title(), this.consoleHistoryAutocompleteSetting,
-            i18nString(UIStrings.autocompleteFromHistory)),
-        SettingsUI.SettingsUI.createSettingCheckbox(
-            this.groupSimilarSetting.title(), this.groupSimilarSetting,
-            i18nString(UIStrings.groupSimilarMessagesInConsole)),
-        SettingsUI.SettingsUI.createSettingCheckbox(
-            userActivationEvalSetting.title(), userActivationEvalSetting,
-            i18nString(UIStrings.treatEvaluationAsUserActivation)),
-        SettingsUI.SettingsUI.createSettingCheckbox(
-            this.showCorsErrorsSetting.title(), this.showCorsErrorsSetting,
-            i18nString(UIStrings.showCorsErrorsInConsole)),
+            SettingUIRegistration.SettingUIRegistration.resolve(this.showCorsErrorsSetting.descriptor()).title,
+            this.showCorsErrorsSetting, i18nString(UIStrings.showCorsErrorsInConsole)),
     );
 
     if (!this.showSettingsPaneSetting.get()) {

package/front_end/panels/elements/LayoutPane.ts

@@ -461,15 +461,9 @@ export class LayoutPane extends UI.Widget.Widget {
       const mappedSetting = {
         type: settingType,
         name: setting.name,
-        title: uiDescriptor?.title?.() ?? setting.title(),
+        title: uiDescriptor?.title ?? '',
       };
-      const options = uiDescriptor?.options?.map(opt => ({
-                                                   value: opt.value,
-                                                   title: opt.title(),
-                                                   text: typeof opt.text === 'function' ? opt.text() : opt.text,
-                                                   raw: opt.raw,
-                                                 })) ??
-          setting.options();
+      const options = uiDescriptor?.options ?? [];
 
       if (typeof settingValue === 'boolean') {
         settings.push({

package/front_end/panels/event_listeners/EventListenersView.ts

@@ -14,6 +14,7 @@ import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {frameworkEventListeners, type FrameworkEventListenersObject} from './EventListenersUtils.js';
@@ -325,10 +326,13 @@ export class ObjectEventListenerBar extends UI.TreeOutline.TreeElement {
   private setTitle(object: SDK.RemoteObject.RemoteObject, linkifier: Components.Linkifier.Linkifier): void {
     const title = this.listItemElement.createChild('span', 'event-listener-details');
 
-    const propertyValue = ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.createPropertyValue(
-        object, /* wasThrown */ false, /* showPreview */ false);
-    this.valueTitle = propertyValue;
-    title.appendChild(this.valueTitle);
+    const propertyValue = ObjectUI.ObjectPropertiesSection.renderPropertyValue(
+        object, /* wasThrown */ false, /* showPreview */ false, linkifier, /* isSyntheticProperty */ false,
+        /* variableName */ undefined, /* includeNullOrUndefined */ undefined, /* useCustomPreview */ false, element => {
+          this.valueTitle = element;
+        });
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(propertyValue, title);
 
     if (this.#eventListener.canRemove()) {
       const deleteButton = new Buttons.Button.Button();

package/front_end/panels/issues/AffectedTrackingSitesView.ts

@@ -1,10 +1,10 @@
 // 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-imperative-dom-api */
 
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
+import {html, render} from '../../ui/lit/lit.js';
 
 import {AffectedResourcesView} from './AffectedResourcesView.js';
 
@@ -21,24 +21,35 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/issues/AffectedTrackingSitesView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+export interface ViewInput {
+  trackingSites: readonly string[];
+}
+export type ViewOutput = object;
+export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+
+export function defaultView(input: ViewInput, output: ViewOutput, target: HTMLElement): void {
+  render(html`
+      <tbody>
+        ${input.trackingSites.map(site => html`
+          <tr class="affected-resource-directive">
+            <td class="affected-resource-cell" title=${site}>${site}</td>
+          </tr>
+        `)}
+      </tbody>
+    `,
+         target);
+}
+
 export class AffectedTrackingSitesView extends AffectedResourcesView {
+  #view: View = defaultView;
+
   protected override getResourceNameWithCount(count: number): Platform.UIString.LocalizedString {
     return i18nString(UIStrings.nTrackingSites, {n: count});
   }
 
   override update(): void {
-    this.clear();
-    const trackingSites = this.issue.getBounceTrackingSites();
-    let count = 0;
-
-    for (const site of trackingSites) {
-      const row = document.createElement('tr');
-      row.classList.add('affected-resource-directive');
-
-      this.appendIssueDetailCell(row, site);
-      this.affectedResources.appendChild(row);
-      count++;
-    }
-    this.updateAffectedResourceCount(count);
+    const trackingSites = Array.from(this.issue.getBounceTrackingSites());
+    this.#view({trackingSites}, {}, this.affectedResources);
+    this.updateAffectedResourceCount(trackingSites.length);
   }
 }