chrome-devtools-frontend 1.0.1652307 → 1.0.1656291

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -11,9 +11,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
-import * as Annotations from '../../models/annotations/annotations.js';
 import * as Badges from '../../models/badges/badges.js';
-import * as Greendev from '../../models/greendev/greendev.js';
 import type * as LHModel from '../../models/lighthouse/lighthouse.js';
 import type * as Trace from '../../models/trace/trace.js';
 import * as Workspace from '../../models/workspace/workspace.js';
@@ -51,7 +49,6 @@ import {ExploreWidget} from './components/ExploreWidget.js';
 import {MarkdownRendererWithCodeBlock} from './components/MarkdownRendererWithCodeBlock.js';
 import {OptInChangeDialog} from './components/OptInChangeDialog.js';
 import {PerformanceAgentMarkdownRenderer} from './components/PerformanceAgentMarkdownRenderer.js';
-import {StylingAgentMarkdownRenderer} from './components/StylingAgentMarkdownRenderer.js';
 import {
   WalkthroughView,
 } from './components/WalkthroughView.js';
@@ -280,10 +277,6 @@ const lockedString = i18n.i18n.lockedString;
 
 function selectedElementFilter(maybeNode: SDK.DOMModel.DOMNode|null): SDK.DOMModel.DOMNode|null {
   if (maybeNode) {
-    if (Greendev.Prototypes.instance().isEnabled('emulationCapabilities')) {
-      return maybeNode;
-    }
-
     return maybeNode.nodeType() === Node.ELEMENT_NODE ? maybeNode : null;
   }
 
@@ -311,12 +304,7 @@ async function getEmptyStateSuggestions(conversation?: AiAssistanceModel.AiConve
       return [
         {title: 'What can you help me with?', jslogContext: 'styling-default'},
         {title: 'Why isn’t this element visible?', jslogContext: 'styling-default'},
-        {
-          title: Greendev.Prototypes.instance().isEnabled('emulationCapabilities') ?
-              'Are there display issues on this page for people using an Android phone?' :
-              'How do I center this element?',
-          jslogContext: 'styling-default'
-        },
+        {title: 'How do I center this element?', jslogContext: 'styling-default'},
       ];
     case AiAssistanceModel.AiHistoryStorage.ConversationType.FILE:
       return [
@@ -371,7 +359,7 @@ function createV2MarkdownRenderer(conversation?: AiAssistanceModel.AiConversatio
   const resourceTreeModel = primaryTarget?.model(SDK.ResourceTreeModel.ResourceTreeModel);
   const context = conversation?.selectedContext;
 
-  if (context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {
+  if (context instanceof AiAssistanceModel.PerformanceTraceContext.PerformanceTraceContext) {
     const focus = context.getItem();
     options.mainFrameId = focus.parsedTrace.data.Meta.mainFrameId;
     options.lookupTraceEvent = focus.lookupEvent.bind(focus);
@@ -400,7 +388,7 @@ function getMarkdownRenderer(conversation?: AiAssistanceModel.AiConversation.AiC
 
   const context = conversation?.selectedContext;
 
-  if (context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {
+  if (context instanceof AiAssistanceModel.PerformanceTraceContext.PerformanceTraceContext) {
     const focus = context.getItem();
     return new PerformanceAgentMarkdownRenderer(focus.parsedTrace.data.Meta.mainFrameId, focus.lookupEvent.bind(focus));
   }
@@ -408,14 +396,7 @@ function getMarkdownRenderer(conversation?: AiAssistanceModel.AiConversation.AiC
     // Handle historical conversations (can't linkify anything).
     return new PerformanceAgentMarkdownRenderer();
   }
-  if (Greendev.Prototypes.instance().isEnabled('emulationCapabilities') &&
-      conversation?.type === AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING &&
-      SDK.TargetManager.TargetManager.instance().primaryPageTarget()?.model(SDK.DOMModel.DOMModel)) {
-    const domModel = SDK.TargetManager.TargetManager.instance().primaryPageTarget()?.model(SDK.DOMModel.DOMModel);
-    const resourceTreeModel = domModel?.target().model(SDK.ResourceTreeModel.ResourceTreeModel);
-    const mainFrameId = resourceTreeModel?.mainFrame?.id;
-    return new StylingAgentMarkdownRenderer(mainFrameId);
-  }
+
   if (conversation?.type === AiAssistanceModel.AiHistoryStorage.ConversationType.ACCESSIBILITY) {
     const domModel = SDK.TargetManager.TargetManager.instance().primaryPageTarget()?.model(SDK.DOMModel.DOMModel);
     const mainDocumentURL = domModel?.existingDocument()?.documentURL;
@@ -640,12 +621,12 @@ function createRequestContext(request: SDK.NetworkRequest.NetworkRequest|
   return new AiAssistanceModel.RequestContext.RequestContext(request, calculator);
 }
 
-function createPerformanceTraceContext(focus: AiAssistanceModel.AIContext.AgentFocus|null):
-    AiAssistanceModel.PerformanceAgent.PerformanceTraceContext|null {
+function createPerformanceTraceContext(focus: AiAssistanceModel.AIContext.AgentFocus|
+                                       null): AiAssistanceModel.PerformanceTraceContext.PerformanceTraceContext|null {
   if (!focus) {
     return null;
   }
-  return new AiAssistanceModel.PerformanceAgent.PerformanceTraceContext(focus);
+  return new AiAssistanceModel.PerformanceTraceContext.PerformanceTraceContext(focus);
 }
 
 function createStorageContext(item: AiAssistanceModel.StorageItem.StorageItem|null):
@@ -707,7 +688,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
   #selectedFile: AiAssistanceModel.FileContext.FileContext|null = null;
   #selectedElement: AiAssistanceModel.DOMNodeContext.DOMNodeContext|null = null;
-  #selectedPerformanceTrace: AiAssistanceModel.PerformanceAgent.PerformanceTraceContext|null = null;
+  #selectedPerformanceTrace: AiAssistanceModel.PerformanceTraceContext.PerformanceTraceContext|null = null;
   #selectedRequest: AiAssistanceModel.RequestContext.RequestContext|null = null;
 
   #selectedAccessibility: AiAssistanceModel.AccessibilityContext.AccessibilityContext|null = null;
@@ -1307,7 +1288,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         }
 
         this.#selectedPerformanceTrace =
-            Boolean(ev.data) ? new AiAssistanceModel.PerformanceAgent.PerformanceTraceContext(ev.data) : null;
+            Boolean(ev.data) ? new AiAssistanceModel.PerformanceTraceContext.PerformanceTraceContext(ev.data) : null;
 
         this.#updateConversationState(this.#conversation);
       };
@@ -1535,7 +1516,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     if (context instanceof AiAssistanceModel.FileContext.FileContext) {
       return Common.Revealer.reveal(context.getItem().uiLocation(0, 0));
     }
-    if (context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {
+    if (context instanceof AiAssistanceModel.PerformanceTraceContext.PerformanceTraceContext) {
       const focus = context.getItem();
       if (focus.callTree) {
         const event = focus.callTree.selectedNode?.event ?? focus.callTree.rootNode.event;
@@ -1737,9 +1718,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.#resetWalkthrough();
     UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.newChatCreated));
 
-    if (Annotations.AnnotationRepository.annotationsEnabled()) {
-      Annotations.AnnotationRepository.instance().deleteAllAnnotations();
-    }
   }
 
   #cancel(): void {
@@ -1778,7 +1756,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       this.#selectedElement = data;
     } else if (data instanceof AiAssistanceModel.RequestContext.RequestContext) {
       this.#selectedRequest = data;
-    } else if (data instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {
+    } else if (data instanceof AiAssistanceModel.PerformanceTraceContext.PerformanceTraceContext) {
       this.#selectedPerformanceTrace = data;
 
     } else if (data instanceof AiAssistanceModel.AccessibilityContext.AccessibilityContext) {
@@ -1863,12 +1841,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       Badges.UserBadges.instance().recordAction(Badges.BadgeAction.STARTED_AI_CONVERSATION);
     }
 
-    const greenDevEmulationEnabled = Greendev.Prototypes.instance().isEnabled('emulationCapabilities');
     let multimodalInput: AiAssistanceModel.AiAgent.MultimodalInput|undefined;
-    const pendingInput = this.#conversation.getPendingMultimodalInput();
-    if (greenDevEmulationEnabled && pendingInput) {
-      multimodalInput = pendingInput;
-    } else if (isAiAssistanceMultimodalInputEnabled() && imageInput && multimodalInputType) {
+    if (isAiAssistanceMultimodalInputEnabled() && imageInput && multimodalInputType) {
       multimodalInput = {
         input: imageInput,
         id: crypto.randomUUID(),

package/front_end/panels/ai_assistance/ExportConversation.ts

@@ -13,7 +13,10 @@ export async function saveToDisk(conversation: AiAssistanceModel.AiConversation.
   const titleFormatted = Platform.StringUtilities.toSnakeCase(conversation.title || '');
   const prefix = 'devtools_';
   const suffix = '.md';
-  const maxTitleLength = 64 - prefix.length - suffix.length;
+  // The Windows save dialog / Chrome wrapper limits the suggested filename
+  // to 63 characters (due to a 64-byte null-terminated buffer).
+  // Capping the total filename length at 63 avoids truncation of the extension.
+  const maxTitleLength = 63 - prefix.length - suffix.length;
   let finalTitle = titleFormatted || 'conversation';
   if (finalTitle.length > maxTitleLength) {
     finalTitle = finalTitle.substring(0, maxTitleLength);

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

@@ -180,7 +180,7 @@ function getContextRemoveLabel(context: AiAssistanceModel.AiAgent.ConversationCo
   if (context instanceof AiAssistanceModel.RequestContext.RequestContext) {
     return lockedString(UIStringsNotTranslate.removeContextRequest);
   }
-  if (context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {
+  if (context instanceof AiAssistanceModel.PerformanceTraceContext.PerformanceTraceContext) {
     return lockedString(UIStringsNotTranslate.removeContextPerfInsight);
   }
   if (context instanceof AiAssistanceModel.StorageAgent.StorageContext) {
@@ -357,7 +357,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
                             PanelUtils.PanelUtils.getIconForSourceFile(input.context.getItem()) :
                             input.context instanceof AiAssistanceModel.AccessibilityContext.AccessibilityContext ?
                             html`<devtools-icon class="icon" name="performance" title="Lighthouse"></devtools-icon>` :
-                            input.context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext ?
+                            input.context instanceof AiAssistanceModel.PerformanceTraceContext.PerformanceTraceContext ?
                             html`<devtools-icon class="icon" name="performance" title="Performance"></devtools-icon>` :
                             input.context instanceof AiAssistanceModel.StorageAgent.StorageContext ?
                             html`<devtools-icon class="icon" name="table" title="Storage"></devtools-icon>` :

package/front_end/panels/application/DeviceBoundSessionsView.ts

@@ -218,11 +218,19 @@ const UIStrings = {
   /**
    *@description Explanation for an event outcome. Key refers to a cryptographic key.
    */
-  keyError: 'Key error',
+  signingKeyGenerationError: 'Signing key generation error',
+  /**
+   *@description Explanation for an event outcome. Key refers to a cryptographic key.
+   */
+  attestationKeyGenerationError: 'Attestation key generation error',
   /**
    *@description Explanation for an event outcome. Signing refers to cryptographic signing.
    */
   signingError: 'Signing error',
+  /**
+   *@description Explanation for an event outcome. Signing refers to cryptographic signing.
+   */
+  transientSigningError: 'Transient signing error',
   /**
    *@description Explanation for an event outcome.
    */
@@ -942,10 +950,14 @@ function fetchResultToString(fetchResult: Protocol.Network.DeviceBoundSessionFet
   switch (fetchResult) {
     case Protocol.Network.DeviceBoundSessionFetchResult.Success:
       return i18nString(UIStrings.success);
-    case Protocol.Network.DeviceBoundSessionFetchResult.KeyError:
-      return i18nString(UIStrings.keyError);
+    case Protocol.Network.DeviceBoundSessionFetchResult.SigningKeyGenerationError:
+      return i18nString(UIStrings.signingKeyGenerationError);
+    case Protocol.Network.DeviceBoundSessionFetchResult.AttestationKeyGenerationError:
+      return i18nString(UIStrings.attestationKeyGenerationError);
     case Protocol.Network.DeviceBoundSessionFetchResult.SigningError:
       return i18nString(UIStrings.signingError);
+    case Protocol.Network.DeviceBoundSessionFetchResult.TransientSigningError:
+      return i18nString(UIStrings.transientSigningError);
     case Protocol.Network.DeviceBoundSessionFetchResult.ServerRequestedTermination:
       return i18nString(UIStrings.serverRequestedTermination);
     case Protocol.Network.DeviceBoundSessionFetchResult.InvalidSessionId:

package/front_end/panels/application/FrameDetailsView.ts

@@ -21,6 +21,7 @@ import * as CspEvaluator from '../../third_party/csp_evaluator/csp_evaluator.js'
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import type * as ExpandableList from '../../ui/components/expandable_list/expandable_list.js';
 import type * as ReportView from '../../ui/components/report_view/report_view.js';
+import * as UIHelpers from '../../ui/helpers/helpers.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
@@ -680,7 +681,7 @@ function renderSingleCSP(cspInfo: Protocol.Network.ContentSecurityPolicyStatus,
             .accessibleLabel=${i18nString(UIStrings.learnMore)}
             .variant=${Buttons.Button.Variant.ICON}
             .size=${Buttons.Button.Size.SMALL}
-            @click=${()=> {window.location.href = 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only';}}
+            @click=${()=> {UIHelpers.openInNewTab('https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only');}}
             jslog=${VisualLogging.link('learn-more.csp-report-only').track({click: true})}
             ></devtools-button>`}
       </devtools-report-key>

package/front_end/panels/application/IndexedDBViews.ts

@@ -262,9 +262,8 @@ export class IDBDataView extends UI.View.SimpleView {
   private lastKey?: any;
   private summaryBarElement?: HTMLElement;
 
-  constructor(
-      model: IndexedDBModel, databaseId: DatabaseId, objectStore: ObjectStore, index: Index|null,
-      refreshObjectStoreCallback: () => void) {
+  constructor(model: IndexedDBModel, databaseId: DatabaseId, objectStore: ObjectStore, index: Index|null,
+              refreshObjectStoreCallback: () => void) {
     super({
       title: i18nString(UIStrings.idb),
       viewId: 'idb',
@@ -287,8 +286,8 @@ export class IDBDataView extends UI.View.SimpleView {
     this.deleteSelectedButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, _event => {
       void this.deleteButtonClicked(null);
     });
-    this.deleteSelectedButton.element.setAttribute(
-        'jslog', `${VisualLogging.action('delete-selected').track({click: true})}`);
+    this.deleteSelectedButton.element.setAttribute('jslog',
+                                                   `${VisualLogging.action('delete-selected').track({click: true})}`);
 
     this.clearButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.clearObjectStore), 'clear');
     this.clearButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, () => {
@@ -434,8 +433,8 @@ export class IDBDataView extends UI.View.SimpleView {
     this.updateData(false);
   }
 
-  private populateContextMenu(
-      contextMenu: UI.ContextMenu.ContextMenu, gridNode: DataGrid.DataGrid.DataGridNode<unknown>): void {
+  private populateContextMenu(contextMenu: UI.ContextMenu.ContextMenu,
+                              gridNode: DataGrid.DataGrid.DataGridNode<unknown>): void {
     const node = (gridNode as IDBDataGridNode);
     if (node.valueObjectPresentation) {
       contextMenu.revealSection().appendItem(i18nString(UIStrings.expandRecursively), () => {
@@ -510,26 +509,7 @@ export class IDBDataView extends UI.View.SimpleView {
     function callback(this: IDBDataView, entries: Entry[], hasMore: boolean): void {
       this.clear();
       this.entries = entries;
-      let selectedNode: IDBDataGridNode|null = null;
-      for (let i = 0; i < entries.length; ++i) {
-        // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const data: any = {};
-        data['number'] = i + skipCount;
-        data['key'] = entries[i].key;
-        data['primary-key'] = entries[i].primaryKey;
-        data['value'] = entries[i].value;
-
-        const node = new IDBDataGridNode(data);
-        this.dataGrid.rootNode().appendChild(node);
-        if (data['number'] <= selected) {
-          selectedNode = node;
-        }
-      }
-
-      if (selectedNode) {
-        selectedNode.select();
-      }
+      this.populateDataGrid(entries, skipCount, selected);
       this.pageBackButton.setEnabled(Boolean(skipCount));
       this.pageForwardButton.setEnabled(hasMore);
       this.needsRefresh.setVisible(false);
@@ -539,16 +519,38 @@ export class IDBDataView extends UI.View.SimpleView {
 
     const idbKeyRange = key ? window.IDBKeyRange.lowerBound(key) : null;
     if (this.isIndex && this.index) {
-      this.model.loadIndexData(
-          this.databaseId, this.objectStore.name, this.index.name, idbKeyRange, skipCount, pageSize,
-          callback.bind(this));
+      this.model.loadIndexData(this.databaseId, this.objectStore.name, this.index.name, idbKeyRange, skipCount,
+                               pageSize, callback.bind(this));
     } else {
-      this.model.loadObjectStoreData(
-          this.databaseId, this.objectStore.name, idbKeyRange, skipCount, pageSize, callback.bind(this));
+      this.model.loadObjectStoreData(this.databaseId, this.objectStore.name, idbKeyRange, skipCount, pageSize,
+                                     callback.bind(this));
     }
     void this.model.getMetadata(this.databaseId, this.objectStore).then(this.updateSummaryBar.bind(this));
   }
 
+  private populateDataGrid(entries: Entry[], skipCount: number, selected: number): void {
+    let selectedNode: IDBDataGridNode|null = null;
+    for (let i = 0; i < entries.length; ++i) {
+      // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const data: any = {};
+      data['number'] = i + skipCount;
+      data['key'] = entries[i].key;
+      data['primary-key'] = entries[i].primaryKey;
+      data['value'] = entries[i].value;
+
+      const node = new IDBDataGridNode(data);
+      this.dataGrid.rootNode().appendChild(node);
+      if (data['number'] <= selected) {
+        selectedNode = node;
+      }
+    }
+
+    if (selectedNode) {
+      selectedNode.select();
+    }
+  }
+
   private updateSummaryBar(metadata: ObjectStoreMetadata|null): void {
     if (!this.summaryBarElement) {
       this.summaryBarElement = this.element.createChild('div', 'object-store-summary-bar');
@@ -578,10 +580,10 @@ export class IDBDataView extends UI.View.SimpleView {
   }
 
   private async clearButtonClicked(): Promise<void> {
-    const ok = await UI.UIUtils.ConfirmDialog.show(
-        i18nString(UIStrings.objectStoreWillBeCleared),
-        i18nString(UIStrings.confirmClearObjectStore, {PH1: this.objectStore.name}), this.element,
-        {jslogContext: 'clear-object-store-confirmation'});
+    const ok =
+        await UI.UIUtils.ConfirmDialog.show(i18nString(UIStrings.objectStoreWillBeCleared),
+                                            i18nString(UIStrings.confirmClearObjectStore, {PH1: this.objectStore.name}),
+                                            this.element, {jslogContext: 'clear-object-store-confirmation'});
     if (ok) {
       this.clearButton.setEnabled(false);
       this.clearingObjectStore = true;

package/front_end/panels/application/ServiceWorkersView.ts

@@ -220,6 +220,15 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
 
     this.sectionToRegistration = new WeakMap();
 
+    this.createOthersOriginView();
+    this.setupToolbar();
+
+    this.eventListeners = new Map();
+    SDK.TargetManager.TargetManager.instance().observeModels(SDK.ServiceWorkerManager.ServiceWorkerManager, this);
+    this.updateListVisibility();
+  }
+
+  private createOthersOriginView(): void {
     const othersDiv = this.contentElement.createChild('div', 'service-workers-other-origin');
     othersDiv.setAttribute('jslog', `${VisualLogging.section('other-origin')}`);
     // TODO(crbug.com/1156978): Replace UI.ReportView.ReportView with ReportView.ts web component.
@@ -231,7 +240,9 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
     const seeOthers = Link.create('chrome://serviceworker-internals', i18nString(UIStrings.seeAllRegistrations),
                                   undefined, 'view-all', 0, /* allowPrivileged=*/ true);
     othersSectionRow.appendChild(seeOthers);
+  }
 
+  private setupToolbar(): void {
     this.toolbar.appendToolbarItem(
         MobileThrottling.ThrottlingManager.throttlingManager().createOfflineToolbarCheckbox());
     const updateOnReloadSetting =
@@ -246,10 +257,6 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
     const fallbackToNetwork = new UI.Toolbar.ToolbarSettingCheckbox(
         bypassServiceWorkerSetting, i18nString(UIStrings.bypassTheServiceWorkerAndLoad));
     this.toolbar.appendToolbarItem(fallbackToNetwork);
-
-    this.eventListeners = new Map();
-    SDK.TargetManager.TargetManager.instance().observeModels(SDK.ServiceWorkerManager.ServiceWorkerManager, this);
-    this.updateListVisibility();
   }
 
   modelAdded(serviceWorkerManager: SDK.ServiceWorkerManager.ServiceWorkerManager): void {
@@ -453,13 +460,13 @@ export class Section {
   private readonly networkRequests: Buttons.Button.Button;
   private readonly updateButton: Buttons.Button.Button;
   private readonly deleteButton: Buttons.Button.Button;
-  private sourceField: Element;
-  private readonly statusField: Element;
-  private readonly clientsField: Element;
+  private sourceField: HTMLElement;
+  private readonly statusField: HTMLElement;
+  private readonly clientsField: HTMLElement;
   private readonly clientInfoCache: Map<string, Protocol.Target.TargetInfo>;
   private readonly throttler: Common.Throttler.Throttler;
-  private updateCycleField?: Element;
-  private routerField?: Element;
+  private updateCycleField?: HTMLElement;
+  private routerField?: HTMLElement;
 
   constructor(
       manager: SDK.ServiceWorkerManager.ServiceWorkerManager, section: UI.ReportView.Section,
@@ -542,10 +549,10 @@ export class Section {
 
   scheduleUpdate(): void {
     if (throttleDisabledForDebugging) {
-      void this.update();
+      void this.performUpdate();
       return;
     }
-    void this.throttler.schedule(this.update.bind(this));
+    void this.throttler.schedule(this.performUpdate.bind(this));
   }
 
   private addVersion(versionsStack: Element, icon: string, label: string): Element {
@@ -561,7 +568,7 @@ export class Section {
     this.clientsField.removeChildren();
     this.section.setFieldVisible(i18nString(UIStrings.clients), Boolean(version.controlledClients.length));
     for (const client of version.controlledClients) {
-      const clientLabelText = this.clientsField.createChild('div', 'service-worker-client');
+      const clientLabelText = this.clientsField.createChild('div', 'service-worker-client') as HTMLElement;
       const info = this.clientInfoCache.get(client);
       if (info) {
         this.updateClientInfo(clientLabelText, info);
@@ -601,7 +608,7 @@ export class Section {
     }
   }
 
-  private update(): Promise<void> {
+  private performUpdate(): Promise<void> {
     const fingerprint = this.registration.fingerprint();
     if (fingerprint === this.fingerprint) {
       return Promise.resolve();
@@ -740,7 +747,7 @@ export class Section {
     void this.manager.dispatchPeriodicSyncEvent(this.registration.id, tag);
   }
 
-  private onClientInfo(element: Element, targetInfoResponse: Protocol.Target.GetTargetInfoResponse): void {
+  private onClientInfo(element: HTMLElement, targetInfoResponse: Protocol.Target.GetTargetInfoResponse): void {
     const targetInfo = targetInfoResponse.targetInfo;
     if (!targetInfo) {
       return;
@@ -749,7 +756,7 @@ export class Section {
     this.updateClientInfo(element, targetInfo);
   }
 
-  private updateClientInfo(element: Element, targetInfo: Protocol.Target.TargetInfo): void {
+  private updateClientInfo(element: HTMLElement, targetInfo: Protocol.Target.TargetInfo): void {
     if (targetInfo.type !== 'page' && targetInfo.type === 'iframe') {
       const clientString = element.createChild('span', 'service-worker-client-string');
       UI.UIUtils.createTextChild(clientString, i18nString(UIStrings.workerS, {PH1: targetInfo.url}));
@@ -788,7 +795,7 @@ export class Section {
     void this.manager.stopWorker(versionId);
   }
 
-  private wrapWidget(container: Element): Element {
+  private wrapWidget(container: Element): HTMLElement {
     const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(container, {
       cssFile: [
         serviceWorkersViewStyles,

package/front_end/panels/application/components/AdsView.ts

@@ -141,6 +141,8 @@ export class AdsView extends UI.Widget.Widget {
       averageViewportAdCount: 0,
       totalAdCpuTime: 0,
       totalAdNetworkBytes: 0,
+      updateAdFrames: [],
+      removeAdFrames: [],
     };
     this.requestUpdate();
   }
@@ -209,6 +211,8 @@ export class AdsView extends UI.Widget.Widget {
       averageViewportAdCount: 0,
       totalAdCpuTime: 0,
       totalAdNetworkBytes: 0,
+      updateAdFrames: [],
+      removeAdFrames: [],
     };
     this.requestUpdate();
   }

package/front_end/panels/autofill/AutofillView.ts

@@ -298,7 +298,7 @@ export class AutofillView extends UI.Widget.VBox {
   #matches: AutofillManager.AutofillManager.Match[] = [];
   #highlightedMatches: AutofillManager.AutofillManager.Match[] = [];
 
-  constructor(autofillManager = AutofillManager.AutofillManager.AutofillManager.instance(), view = DEFAULT_VIEW) {
+  constructor(autofillManager: AutofillManager.AutofillManager.AutofillManager, view = DEFAULT_VIEW) {
     super({useShadowDom: true});
     this.#autofillManager = autofillManager;
     this.#view = view;

package/front_end/panels/autofill/autofill-meta.ts

@@ -36,8 +36,9 @@ UI.ViewManager.registerViewExtension({
   commandPrompt: i18nLazyString(UIStrings.showAutofill),
   order: 100,
   persistence: UI.ViewManager.ViewPersistence.CLOSEABLE,
-  async loadView() {
+  async loadView(universe) {
     const Autofill = await loadAutofillModule();
-    return new Autofill.AutofillView.AutofillView();
+    const {autofillManager} = universe;
+    return new Autofill.AutofillView.AutofillView(autofillManager);
   },
 });

package/front_end/panels/common/CPUThrottlingOption.ts

@@ -0,0 +1,142 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Common from '../../core/common/common.js';
+import * as i18n from '../../core/i18n/i18n.js';
+
+const UIStrings = {
+  /**
+   * @description Text label for a menu item indicating that no throttling is applied.
+   */
+  noThrottling: 'No throttling',
+  /**
+   * @description Text label for a menu item indicating that a specific slowdown multiplier is applied.
+   * @example {2} PH1
+   */
+  dSlowdown: '{PH1}× slowdown',
+  /**
+   * @description Text label for a menu item indicating an average mobile device.
+   */
+  calibratedMidTierMobile: 'Mid-tier mobile',
+  /**
+   * @description Text label for a menu item indicating a below-average mobile device.
+   */
+  calibratedLowTierMobile: 'Low-tier mobile',
+  /**
+   * @description Text label indicating why an option is not available, because the user's device is not fast enough to emulate a device.
+   */
+  calibrationErrorDeviceTooWeak: 'Device is not powerful enough',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('panels/common/CPUThrottlingOption.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
+
+export enum CPUThrottlingRates {
+  NO_THROTTLING = 1,
+  MID_TIER_MOBILE = 4,
+  LOW_TIER_MOBILE = 6,
+  EXTRA_SLOW = 20,
+
+  // eslint-disable-next-line @typescript-eslint/naming-convention -- Used by web_tests.
+  MidTierMobile = MID_TIER_MOBILE,
+  // eslint-disable-next-line @typescript-eslint/naming-convention -- Used by web_tests.
+  LowEndMobile = LOW_TIER_MOBILE,
+}
+
+export type CalibratedDeviceType = 'low-tier-mobile'|'mid-tier-mobile';
+
+export interface CPUThrottlingOption {
+  title: () => string;
+  rate: () => number;
+  calibratedDeviceType?: CalibratedDeviceType;
+  jslogContext: string;
+}
+
+function makeFixedPresetThrottlingOption(rate: CPUThrottlingRates): CPUThrottlingOption {
+  return {
+    title: rate === 1 ? i18nLazyString(UIStrings.noThrottling) : i18nLazyString(UIStrings.dSlowdown, {PH1: rate}),
+    rate: () => rate,
+    jslogContext: rate === 1 ? 'cpu-no-throttling' : `cpu-throttled-${rate}`,
+  };
+}
+
+export const NoThrottlingOption = makeFixedPresetThrottlingOption(CPUThrottlingRates.NO_THROTTLING);
+export const MidTierThrottlingOption = makeFixedPresetThrottlingOption(CPUThrottlingRates.MID_TIER_MOBILE);
+export const LowTierThrottlingOption = makeFixedPresetThrottlingOption(CPUThrottlingRates.LOW_TIER_MOBILE);
+export const ExtraSlowThrottlingOption = makeFixedPresetThrottlingOption(CPUThrottlingRates.EXTRA_SLOW);
+
+function makeCalibratedThrottlingOption(calibratedDeviceType: CalibratedDeviceType): CPUThrottlingOption {
+  const getSettingValue = (): number|CalibrationError|null => {
+    const setting = Common.Settings.Settings.instance().createSetting<CalibratedCPUThrottling>(
+        'calibrated-cpu-throttling', {}, Common.Settings.SettingStorageType.GLOBAL);
+    const value = setting.get();
+    if (calibratedDeviceType === 'low-tier-mobile') {
+      return value.low ?? null;
+    }
+    if (calibratedDeviceType === 'mid-tier-mobile') {
+      return value.mid ?? null;
+    }
+    return null;
+  };
+
+  return {
+    title(): string {
+      const typeString = calibratedDeviceType === 'low-tier-mobile' ? i18nString(UIStrings.calibratedLowTierMobile) :
+                                                                      i18nString(UIStrings.calibratedMidTierMobile);
+
+      const value = getSettingValue();
+      if (typeof value === 'number') {
+        return `${typeString} – ${value.toFixed(1)}×`;
+      }
+
+      return typeString;
+    },
+    rate(): number {
+      const value = getSettingValue();
+      if (typeof value === 'number') {
+        return value;
+      }
+      return 0;
+    },
+    calibratedDeviceType,
+    jslogContext: `cpu-throttled-calibrated-${calibratedDeviceType}`,
+  };
+}
+
+export const CalibratedLowTierMobileThrottlingOption = makeCalibratedThrottlingOption('low-tier-mobile');
+export const CalibratedMidTierMobileThrottlingOption = makeCalibratedThrottlingOption('mid-tier-mobile');
+
+export interface CalibratedCPUThrottling {
+  /** Either the CPU multiplier, or an error code for why it could not be determined. */
+  low?: number|CalibrationError;
+  mid?: number|CalibrationError;
+}
+
+export enum CalibrationError {
+  DEVICE_TOO_WEAK = 'DEVICE_TOO_WEAK',
+}
+
+export function calibrationErrorToString(error: CalibrationError): string {
+  if (error === CalibrationError.DEVICE_TOO_WEAK) {
+    return i18nString(UIStrings.calibrationErrorDeviceTooWeak);
+  }
+
+  return error;
+}
+
+export const cpuThrottlingPresets: CPUThrottlingOption[] = [
+  NoThrottlingOption,
+  MidTierThrottlingOption,
+  LowTierThrottlingOption,
+  ExtraSlowThrottlingOption,
+  CalibratedLowTierMobileThrottlingOption,
+  CalibratedMidTierMobileThrottlingOption,
+];
+
+export function determineOptionFromRate(rate: number, currentOption?: CPUThrottlingOption): CPUThrottlingOption {
+  if (currentOption && currentOption.rate() === rate) {
+    return currentOption;
+  }
+  return cpuThrottlingPresets.find(o => o.rate() === rate) || NoThrottlingOption;
+}