chrome-devtools-frontend 1.0.1534717 → 1.0.1536371

package/front_end/panels/ai_assistance/components/ChatView.ts

@@ -19,6 +19,7 @@ import * as Marked from '../../../third_party/marked/marked.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type * as MarkdownView from '../../../ui/components/markdown_view/markdown_view.js';
 import type {MarkdownLitRenderer} from '../../../ui/components/markdown_view/MarkdownView.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';
@@ -1546,16 +1547,16 @@ function renderConsentViewContents(): Lit.TemplateResult {
     return html`${i18nString(UIStrings.notAvailableInIncognitoMode)}`;
   }
   if (config.devToolsAiAssistancePerformanceAgent?.enabled) {
-    consentViewContents = i18n.i18n.getFormatLocalizedString(
+    consentViewContents = uiI18n.getFormatLocalizedString(
         str_, UIStrings.turnOnForStylesRequestsPerformanceAndFiles, {PH1: settingsLink});
   } else if (config.devToolsAiAssistanceFileAgent?.enabled) {
     consentViewContents =
-        i18n.i18n.getFormatLocalizedString(str_, UIStrings.turnOnForStylesRequestsAndFiles, {PH1: settingsLink});
+        uiI18n.getFormatLocalizedString(str_, UIStrings.turnOnForStylesRequestsAndFiles, {PH1: settingsLink});
   } else if (config.devToolsAiAssistanceNetworkAgent?.enabled) {
     consentViewContents =
-        i18n.i18n.getFormatLocalizedString(str_, UIStrings.turnOnForStylesAndRequests, {PH1: settingsLink});
+        uiI18n.getFormatLocalizedString(str_, UIStrings.turnOnForStylesAndRequests, {PH1: settingsLink});
   } else {
-    consentViewContents = i18n.i18n.getFormatLocalizedString(str_, UIStrings.turnOnForStyles, {PH1: settingsLink});
+    consentViewContents = uiI18n.getFormatLocalizedString(str_, UIStrings.turnOnForStyles, {PH1: settingsLink});
   }
 
   return html`${consentViewContents}`;

package/front_end/panels/ai_assistance/components/ExploreWidget.ts

@@ -2,7 +2,6 @@
 // Copyright 2025 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 * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
@@ -105,7 +104,6 @@ export const DEFAULT_VIEW = (
       </div>
     `,
     target,
-    { host: target },
   );
   // clang-format on
 };

package/front_end/panels/application/AppManifestView.ts

@@ -11,6 +11,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -704,7 +705,7 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
           Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(recommendedId);
         });
         suggestedIdNote.appendChild(
-            i18n.i18n.getFormatLocalizedString(str_, UIStrings.appIdNote, {PH1: suggestedIdSpan, PH2: copyButton}));
+            uiI18n.getFormatLocalizedString(str_, UIStrings.appIdNote, {PH1: suggestedIdSpan, PH2: copyButton}));
       }
     } else {
       this.identitySection.removeField(i18nString(UIStrings.computedAppId));
@@ -781,7 +782,7 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
         'https://web.dev/maskable-icon/', i18nString(UIStrings.documentationOnMaskableIcons), undefined, undefined,
         'learn-more');
     this.iconsSection.appendRow().appendChild(
-        i18n.i18n.getFormatLocalizedString(str_, UIStrings.needHelpReadOurS, {PH1: documentationLink}));
+        uiI18n.getFormatLocalizedString(str_, UIStrings.needHelpReadOurS, {PH1: documentationLink}));
 
     let squareSizedIconAvailable = false;
     for (const icon of icons) {
@@ -938,8 +939,8 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
       const wco = document.createElement('code');
       wco.classList.add('wco');
       wco.textContent = 'window-controls-overlay';
-      wcoStatusMessage.appendChild(i18n.i18n.getFormatLocalizedString(
-          str_, UIStrings.wcoFound, {PH1: wco, PH2: displayOverrideText, PH3: link}));
+      wcoStatusMessage.appendChild(
+          uiI18n.getFormatLocalizedString(str_, UIStrings.wcoFound, {PH1: wco, PH2: displayOverrideText, PH3: link}));
 
       if (this.overlayModel) {
         await this.appendWindowControlsToSection(this.overlayModel, url, stringProperty('theme_color'));
@@ -950,14 +951,14 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
       wcoStatusMessage.appendChild(infoIcon);
 
       wcoStatusMessage.appendChild(
-          i18n.i18n.getFormatLocalizedString(str_, UIStrings.wcoNotFound, {PH1: displayOverrideText}));
+          uiI18n.getFormatLocalizedString(str_, UIStrings.wcoNotFound, {PH1: displayOverrideText}));
     }
 
     const wcoDocumentationLink = UI.XLink.XLink.create(
         'https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay',
         i18nString(UIStrings.customizePwaTitleBar), undefined, undefined, 'customize-pwa-tittle-bar');
     this.windowControlsSection.appendRow().appendChild(
-        i18n.i18n.getFormatLocalizedString(str_, UIStrings.wcoNeedHelpReadMore, {PH1: wcoDocumentationLink}));
+        uiI18n.getFormatLocalizedString(str_, UIStrings.wcoNeedHelpReadMore, {PH1: wcoDocumentationLink}));
 
     this.dispatchEventToListeners(Events.MANIFEST_RENDERED);
   }

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -2478,7 +2478,7 @@ class FrameWindowTreeElement extends ApplicationPanelTreeElement {
     this.targetInfo = targetInfo;
     if (this.view) {
       this.view.setTargetInfo(targetInfo);
-      this.view.update();
+      this.view.requestUpdate();
     }
   }
 
@@ -2487,7 +2487,7 @@ class FrameWindowTreeElement extends ApplicationPanelTreeElement {
     this.isWindowClosed = true;
     if (this.view) {
       this.view.setIsWindowClosed(true);
-      this.view.update();
+      this.view.requestUpdate();
     }
   }
 
@@ -2496,7 +2496,7 @@ class FrameWindowTreeElement extends ApplicationPanelTreeElement {
     if (!this.view) {
       this.view = new OpenedWindowDetailsView(this.targetInfo, this.isWindowClosed);
     } else {
-      this.view.update();
+      this.view.requestUpdate();
     }
     this.showView(this.view);
     Host.userMetrics.panelShown('frame-window');
@@ -2525,7 +2525,7 @@ class WorkerTreeElement extends ApplicationPanelTreeElement {
     if (!this.view) {
       this.view = new WorkerDetailsView(this.targetInfo);
     } else {
-      this.view.update();
+      this.view.requestUpdate();
     }
     this.showView(this.view);
     Host.userMetrics.panelShown('frame-worker');

package/front_end/panels/application/OpenedWindowDetailsView.ts

@@ -136,7 +136,7 @@ async function maybeCreateLinkToElementsPanel(
   return linkElement;
 }
 
-export class OpenedWindowDetailsView extends UI.ThrottledWidget.ThrottledWidget {
+export class OpenedWindowDetailsView extends UI.Widget.VBox {
   private targetInfo: Protocol.Target.TargetInfo;
   private isWindowClosed: boolean;
   private readonly reportView: UI.ReportView.ReportView;
@@ -169,10 +169,10 @@ export class OpenedWindowDetailsView extends UI.ThrottledWidget.ThrottledWidget
     this.securitySection.setFieldVisible(i18nString(UIStrings.openerFrame), false);
     this.hasDOMAccessValue = this.securitySection.appendField(i18nString(UIStrings.accessToOpener));
     UI.Tooltip.Tooltip.install(this.hasDOMAccessValue, i18nString(UIStrings.showsWhetherTheOpenedWindowIs));
-    this.update();
+    this.requestUpdate();
   }
 
-  override async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     this.reportView.setTitle(this.buildTitle());
     this.#urlFieldValue.textContent = this.targetInfo.url;
     this.#urlFieldValue.title = this.targetInfo.url;
@@ -208,7 +208,7 @@ export class OpenedWindowDetailsView extends UI.ThrottledWidget.ThrottledWidget
   }
 }
 
-export class WorkerDetailsView extends UI.ThrottledWidget.ThrottledWidget {
+export class WorkerDetailsView extends UI.Widget.VBox {
   private readonly targetInfo: Protocol.Target.TargetInfo;
   private readonly reportView: UI.ReportView.ReportView;
   private readonly documentSection: UI.ReportView.Section;
@@ -239,7 +239,7 @@ export class WorkerDetailsView extends UI.ThrottledWidget.ThrottledWidget {
 
     this.isolationSection = this.reportView.appendSection(i18nString(UIStrings.securityIsolation));
     this.coepPolicy = this.isolationSection.appendField(i18nString(UIStrings.crossoriginEmbedderPolicy));
-    this.update();
+    this.requestUpdate();
   }
 
   workerTypeToString(type: string): Common.UIString.LocalizedString {
@@ -295,7 +295,7 @@ export class WorkerDetailsView extends UI.ThrottledWidget.ThrottledWidget {
     }
   }
 
-  override async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     await this.updateCoopCoepStatus();
   }
 }

package/front_end/panels/application/StorageView.ts

@@ -10,6 +10,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import type * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -146,7 +147,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 /**
  * @implements {SDK.TargetManager.Observer}
  */
-export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
+export class StorageView extends UI.Widget.VBox {
   private pieColors: Map<Protocol.Storage.StorageType, string>;
   private reportView: UI.ReportView.ReportView;
   private target: SDK.Target.Target|null;
@@ -163,9 +164,10 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
   private quotaOverrideEditor: HTMLInputElement;
   private quotaOverrideErrorMessage: HTMLElement;
   private clearButton: Buttons.Button.Button;
+  private readonly throttler = new Common.Throttler.Throttler(1000);
 
   constructor() {
-    super(true, 1000);
+    super({useShadowDom: true});
     this.registerRequiredCSS(storageViewStyles);
 
     this.contentElement.classList.add('clear-storage-container');
@@ -341,7 +343,7 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
       this.quotaOverrideCheckbox.checked = false;
       this.quotaOverrideErrorMessage.textContent = '';
     }
-    void this.doUpdate();
+    void this.performUpdate();
   }
 
   private updateStorageKey(mainStorageKey: string): void {
@@ -355,7 +357,7 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
       this.quotaOverrideCheckbox.checked = false;
       this.quotaOverrideErrorMessage.textContent = '';
     }
-    void this.doUpdate();
+    void this.performUpdate();
   }
 
   private async applyQuotaOverrideFromInputField(): Promise<void> {
@@ -489,7 +491,7 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
     }
   }
 
-  override async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     if (!this.securityOrigin || !this.target) {
       this.quotaRow.textContent = '';
       this.populatePieChart(0, []);
@@ -509,8 +511,7 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
     const formattedQuotaAsString = i18nString(UIStrings.storageWithCustomMarker, {PH1: quotaAsString});
     const quota =
         quotaOverridden ? UI.Fragment.Fragment.build`<b>${formattedQuotaAsString}</b>`.element() : quotaAsString;
-    const element =
-        i18n.i18n.getFormatLocalizedString(str_, UIStrings.storageQuotaUsed, {PH1: usageAsString, PH2: quota});
+    const element = uiI18n.getFormatLocalizedString(str_, UIStrings.storageQuotaUsed, {PH1: usageAsString, PH2: quota});
     this.quotaRow.appendChild(element);
     UI.Tooltip.Tooltip.install(
         this.quotaRow,
@@ -542,7 +543,7 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
       this.populatePieChart(response.usage, slices);
     }
 
-    this.update();
+    void this.throttler.schedule(this.requestUpdate.bind(this));
   }
 
   private populatePieChart(total: number, slices: PerfUI.PieChart.Slice[]): void {