chrome-devtools-frontend 1.0.1535712 → 1.0.1537268

package/front_end/panels/timeline/TimelinePanel.ts

@@ -42,7 +42,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 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 type * as Protocol from '../../generated/protocol.js';
+import * as Protocol from '../../generated/protocol.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
 import * as Badges from '../../models/badges/badges.js';
 import * as CrUXManager from '../../models/crux-manager/crux-manager.js';
@@ -1364,7 +1364,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   async saveToFile(config: {
-    includeScriptContent: boolean,
+    includeResourceContent: boolean,
     includeSourceMaps: boolean,
     /**
      * Includes many things:
@@ -1399,9 +1399,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       if (Trace.Types.Events.isAnyScriptSourceEvent(event) && event.name !== 'StubScriptCatchup') {
         const mappedScript = scriptByIdMap.get(`${event.args.data.isolate}.${event.args.data.scriptId}`);
 
-        // If the checkbox to include script content is not checked or if it comes from and
-        // extension we dont include the script content.
-        if (!config.includeScriptContent ||
+        if (!config.includeResourceContent ||
             (mappedScript?.url && Trace.Helpers.Trace.isExtensionUrl(mappedScript.url))) {
           return {
             cat: event.cat,
@@ -1434,7 +1432,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
     try {
       await this.innerSaveToFile(traceEvents, metadata, {
-        includeScriptContent: config.includeScriptContent,
+        includeResourceContent: config.includeResourceContent,
         includeSourceMaps: config.includeSourceMaps,
         addModifications: config.addModifications,
         shouldCompress: config.shouldCompress,
@@ -1454,7 +1452,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   async innerSaveToFile(traceEvents: readonly Trace.Types.Events.Event[], metadata: Trace.Types.File.MetaData, config: {
-    includeScriptContent: boolean,
+    includeResourceContent: boolean,
     includeSourceMaps: boolean,
     addModifications: boolean,
     shouldCompress: boolean,
@@ -1464,9 +1462,9 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
         Platform.DateUtilities.toISO8601Compact(metadata.startTime ? new Date(metadata.startTime) : new Date());
 
     const isCpuProfile = metadata.dataOrigin === Trace.Types.File.DataOrigin.CPU_PROFILE;
-    const {includeScriptContent, includeSourceMaps} = config;
+    const {includeResourceContent, includeSourceMaps} = config;
     metadata.enhancedTraceVersion =
-        includeScriptContent ? SDK.EnhancedTracesParser.EnhancedTracesParser.enhancedTraceVersion : undefined;
+        includeResourceContent ? SDK.EnhancedTracesParser.EnhancedTracesParser.enhancedTraceVersion : undefined;
 
     let fileName =
         (isCpuProfile ? `CPU-${isoDate}.cpuprofile` : `Trace-${isoDate}.json`) as Platform.DevToolsPath.RawPathString;
@@ -1477,10 +1475,12 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       blobParts = [JSON.stringify(profile)];
     } else {
       const filteredMetadataSourceMaps =
-          includeScriptContent && includeSourceMaps ? this.#filterMetadataSourceMaps(metadata) : undefined;
+          includeResourceContent && includeSourceMaps ? this.#filterMetadataSourceMaps(metadata) : undefined;
+      const filteredResources = includeResourceContent ? this.#filterMetadataResoures(metadata) : undefined;
       const formattedTraceIter = traceJsonGenerator(traceEvents, {
         ...metadata,
         sourceMaps: filteredMetadataSourceMaps,
+        resources: filteredResources,
       });
       blobParts = Array.from(formattedTraceIter);
     }
@@ -1531,7 +1531,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
         this.saveButton.element as TimelineComponents.ExportTraceOptions.ExportTraceOptions;
     const state = exportTraceOptionsElement.state;
     await this.saveToFile({
-      includeScriptContent: state.includeScriptContent,
+      includeResourceContent: state.includeResourceContent,
       includeSourceMaps: state.includeSourceMaps,
       addModifications: state.includeAnnotations,
       shouldCompress: state.shouldCompress,
@@ -1550,6 +1550,14 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     });
   }
 
+  #filterMetadataResoures(metadata: Trace.Types.File.MetaData): Trace.Types.File.MetadataResource[]|undefined {
+    if (!metadata.resources) {
+      return undefined;
+    }
+
+    return metadata.resources;
+  }
+
   #showExportTraceErrorDialog(error: Error): void {
     if (this.statusDialog) {
       this.statusDialog.remove();
@@ -2744,6 +2752,45 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     };
   }
 
+  async #retainResourceContentsForEnhancedTrace(
+      parsedTrace: Trace.TraceModel.ParsedTrace, metadata: Trace.Types.File.MetaData): Promise<void> {
+    // Scripts are already stored as trace events.
+    const resourceTypesToRetain =
+        new Set([Protocol.Network.ResourceType.Document, Protocol.Network.ResourceType.Stylesheet]);
+
+    for (const request of parsedTrace.data.NetworkRequests.byId.values()) {
+      if (!resourceTypesToRetain.has(request.args.data.resourceType)) {
+        continue;
+      }
+
+      const url = request.args.data.url as Platform.DevToolsPath.UrlString;
+      const resource = SDK.ResourceTreeModel.ResourceTreeModel.resourceForURL(url);
+      if (!resource) {
+        continue;
+      }
+
+      const content = await resource.requestContentData();
+      if ('error' in content) {
+        continue;
+      }
+
+      if (!content.isTextContent) {
+        continue;
+      }
+
+      if (!metadata.resources) {
+        metadata.resources = [];
+      }
+
+      metadata.resources.push({
+        url,
+        frame: resource.frameId ?? '',
+        content: content.text,
+        mimeType: content.mimeType,
+      });
+    }
+  }
+
   async #executeNewTrace(
       collectedEvents: Trace.Types.Events.Event[], isFreshRecording: boolean,
       metadata: Trace.Types.File.MetaData|null): Promise<void> {
@@ -2772,11 +2819,13 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
     // Store all source maps on the trace metadata.
     // If not fresh, we can't validate the maps are still accurate.
+    // Also handle HTML content.
     if (isFreshRecording && metadata) {
       const traceIndex = this.#traceEngineModel.lastTraceIndex();
       const parsedTrace = this.#traceEngineModel.parsedTrace(traceIndex);
       if (parsedTrace) {
         await this.#retainSourceMapsForEnhancedTrace(parsedTrace, metadata);
+        await this.#retainResourceContentsForEnhancedTrace(parsedTrace, metadata);
       }
     }
   }

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -48,6 +48,7 @@ import * as Tracing from '../../services/tracing/tracing.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
 // eslint-disable-next-line @devtools/es-modules-import
 import codeHighlighterStyles from '../../ui/components/code_highlighter/codeHighlighter.css.js';
+import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 // eslint-disable-next-line @devtools/es-modules-import
 import imagePreviewStyles from '../../ui/legacy/components/utils/imagePreview.css.js';
@@ -1899,7 +1900,7 @@ export class TimelineUIUtils {
       const niceNodeLink = createLinkForInvalidationNode(invalidation);
 
       const text = scriptLink ?
-          i18n.i18n.getFormatLocalizedString(
+          uiI18n.getFormatLocalizedString(
               str_, UIStrings.invalidationWithCallFrame, {PH1: niceNodeLink, PH2: scriptLink}) as HTMLElement :
           niceNodeLink;
 
@@ -2207,7 +2208,7 @@ export class TimelineUIUtils {
       PH1: i18n.TimeUtilities.millisToString(durationMilli, true),
       PH2: i18n.TimeUtilities.millisToString(offsetMilli, true),
     });
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.emptyPlaceholder, {PH1: durationText});
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.emptyPlaceholder, {PH1: durationText});
   }
 
   static quadWidth(quad: number[]): number {

package/front_end/panels/timeline/components/DetailsView.ts

@@ -7,6 +7,7 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import * as Trace from '../../../models/trace/trace.js';
+import * as uiI18n from '../../../ui/i18n/i18n.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 
 // *********************************************************************
@@ -86,8 +87,8 @@ export function buildWarningElementsForEvent(
         const forcedReflowLink = UI.XLink.XLink.create(
             'https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts',
             i18nString(UIStrings.forcedReflow), undefined, undefined, 'forced-reflow');
-        span.appendChild(i18n.i18n.getFormatLocalizedString(
-            str_, UIStrings.sIsALikelyPerformanceBottleneck, {PH1: forcedReflowLink}));
+        span.appendChild(
+            uiI18n.getFormatLocalizedString(str_, UIStrings.sIsALikelyPerformanceBottleneck, {PH1: forcedReflowLink}));
         break;
       }
       case 'IDLE_CALLBACK_OVER_TIME': {
@@ -103,7 +104,7 @@ export function buildWarningElementsForEvent(
       case 'LONG_TASK': {
         const longTaskLink = UI.XLink.XLink.create(
             'https://web.dev/optimize-long-tasks/', i18nString(UIStrings.longTask), undefined, undefined, 'long-tasks');
-        span.appendChild(i18n.i18n.getFormatLocalizedString(
+        span.appendChild(uiI18n.getFormatLocalizedString(
             str_, UIStrings.sTookS,
             {PH1: longTaskLink, PH2: i18n.TimeUtilities.millisToString((duration || 0), true)}));
         break;
@@ -111,7 +112,7 @@ export function buildWarningElementsForEvent(
       case 'LONG_INTERACTION': {
         const longInteractionINPLink = UI.XLink.XLink.create(
             'https://web.dev/inp', i18nString(UIStrings.longInteractionINP), undefined, undefined, 'long-interaction');
-        span.appendChild(i18n.i18n.getFormatLocalizedString(
+        span.appendChild(uiI18n.getFormatLocalizedString(
             str_, UIStrings.sIsLikelyPoorPageResponsiveness, {PH1: longInteractionINPLink}));
         break;
       }

package/front_end/panels/timeline/components/ExportTraceOptions.ts

@@ -31,7 +31,7 @@ const UIStrings = {
   /**
    * @description Text for the include script content option.
    */
-  includeScriptContent: 'Include script content',
+  includeResourceContent: 'Include resource content',
   /**
    * @description Text for the include script source maps option.
    */
@@ -49,9 +49,9 @@ const UIStrings = {
    */
   saveButtonTitle: 'Save',
   /**
-   * @description Text shown in the information pop-up next to the "Include script content" option.
+   * @description Text shown in the information pop-up next to the "Include resource content" option.
    */
-  scriptContentPrivacyInfo: 'Includes the full content of all loaded scripts (except extensions).',
+  resourceContentPrivacyInfo: 'Includes the full content of all loaded HTML, CSS, and scripts (except extensions).',
   /**
    * @description Text shown in the information pop-up next to the "Include script sourcemaps" option.
    */
@@ -67,7 +67,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface ExportTraceOptionsData {
   onExport: (config: {
-    includeScriptContent: boolean,
+    includeResourceContent: boolean,
     includeSourceMaps: boolean,
     addModifications: boolean,
     shouldCompress: boolean,
@@ -80,30 +80,30 @@ export type ExportTraceDialogState = Dialogs.Dialog.DialogState;
 export interface ExportTraceOptionsState {
   dialogState: ExportTraceDialogState;
   includeAnnotations: boolean;
-  includeScriptContent: boolean;
+  includeResourceContent: boolean;
   includeSourceMaps: boolean;
   shouldCompress: boolean;
   displayAnnotationsCheckbox?: boolean;
-  displayScriptContentCheckbox?: boolean;
+  displayResourceContentCheckbox?: boolean;
   displaySourceMapsCheckbox?: boolean;
 }
 
-type CheckboxId = 'annotations'|'script-content'|'script-source-maps'|'compress-with-gzip';
-const checkboxesWithInfoDialog = new Set<CheckboxId>(['script-content', 'script-source-maps']);
+type CheckboxId = 'annotations'|'resource-content'|'script-source-maps'|'compress-with-gzip';
+const checkboxesWithInfoDialog = new Set<CheckboxId>(['resource-content', 'script-source-maps']);
 
 export class ExportTraceOptions extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #data: ExportTraceOptionsData|null = null;
 
   static readonly #includeAnnotationsSettingString: string = 'export-performance-trace-include-annotations';
-  static readonly #includeScriptContentSettingString: string = 'export-performance-trace-include-scripts';
+  static readonly #includeResourceContentSettingString: string = 'export-performance-trace-include-resources';
   static readonly #includeSourceMapsSettingString: string = 'export-performance-trace-include-sourcemaps';
   static readonly #shouldCompressSettingString: string = 'export-performance-trace-should-compress';
 
   #includeAnnotationsSetting: Common.Settings.Setting<boolean> = Common.Settings.Settings.instance().createSetting(
       ExportTraceOptions.#includeAnnotationsSettingString, true, Common.Settings.SettingStorageType.SESSION);
-  #includeScriptContentSetting: Common.Settings.Setting<boolean> = Common.Settings.Settings.instance().createSetting(
-      ExportTraceOptions.#includeScriptContentSettingString, false, Common.Settings.SettingStorageType.SESSION);
+  #includeResourceContentSetting: Common.Settings.Setting<boolean> = Common.Settings.Settings.instance().createSetting(
+      ExportTraceOptions.#includeResourceContentSettingString, false, Common.Settings.SettingStorageType.SESSION);
   #includeSourceMapsSetting: Common.Settings.Setting<boolean> = Common.Settings.Settings.instance().createSetting(
       ExportTraceOptions.#includeSourceMapsSettingString, false, Common.Settings.SettingStorageType.SESSION);
   #shouldCompressSetting: Common.Settings.Setting<boolean> = Common.Settings.Settings.instance().createSetting(
@@ -112,7 +112,7 @@ export class ExportTraceOptions extends HTMLElement {
   #state: ExportTraceOptionsState = {
     dialogState: Dialogs.Dialog.DialogState.COLLAPSED,
     includeAnnotations: this.#includeAnnotationsSetting.get(),
-    includeScriptContent: this.#includeScriptContentSetting.get(),
+    includeResourceContent: this.#includeResourceContentSetting.get(),
     includeSourceMaps: this.#includeSourceMapsSetting.get(),
     shouldCompress: this.#shouldCompressSetting.get(),
   };
@@ -121,10 +121,10 @@ export class ExportTraceOptions extends HTMLElement {
       /* title*/ i18nString(UIStrings.includeAnnotations), /* checked*/ this.#state.includeAnnotations,
       /* subtitle*/ undefined,
       /* jslogContext*/ 'timeline.export-trace-options.annotations-checkbox');
-  #includeScriptContentCheckbox = UI.UIUtils.CheckboxLabel.create(
-      /* title*/ i18nString(UIStrings.includeScriptContent), /* checked*/ this.#state.includeScriptContent,
+  #includeResourceContentCheckbox = UI.UIUtils.CheckboxLabel.create(
+      /* title*/ i18nString(UIStrings.includeResourceContent), /* checked*/ this.#state.includeResourceContent,
       /* subtitle*/ undefined,
-      /* jslogContext*/ 'timeline.export-trace-options.script-content-checkbox');
+      /* jslogContext*/ 'timeline.export-trace-options.resource-content-checkbox');
   #includeSourceMapsCheckbox = UI.UIUtils.CheckboxLabel.create(
       /* title*/ i18nString(UIStrings.includeSourcemap), /* checked*/ this.#state.includeSourceMaps,
       /* subtitle*/ undefined,
@@ -142,7 +142,7 @@ export class ExportTraceOptions extends HTMLElement {
   set state(state: ExportTraceOptionsState) {
     this.#state = state;
     this.#includeAnnotationsSetting.set(state.includeAnnotations);
-    this.#includeScriptContentSetting.set(state.includeScriptContent);
+    this.#includeResourceContentSetting.set(state.includeResourceContent);
     this.#includeSourceMapsSetting.set(state.includeSourceMaps);
     this.#shouldCompressSetting.set(state.shouldCompress);
 
@@ -154,13 +154,12 @@ export class ExportTraceOptions extends HTMLElement {
   }
 
   updateContentVisibility(options: {annotationsExist: boolean}): void {
-    const newState = Object.assign({}, this.#state, {
+    this.state = {
+      ...this.#state,
       displayAnnotationsCheckbox: options.annotationsExist,
-      displayScriptContentCheckbox: true,
+      displayResourceContentCheckbox: true,
       displaySourceMapsCheckbox: true
-    });
-
-    this.state = newState;
+    };
   }
 
   #scheduleRender(): void {
@@ -175,11 +174,11 @@ export class ExportTraceOptions extends HTMLElement {
         newState.includeAnnotations = checked;
         break;
       }
-      case this.#includeScriptContentCheckbox: {
-        newState.includeScriptContent = checked;
+      case this.#includeResourceContentCheckbox: {
+        newState.includeResourceContent = checked;
 
         // if the `Include Script` is checked off, cascade the change to `Include Script Source`
-        if (!newState.includeScriptContent) {
+        if (!newState.includeResourceContent) {
           newState.includeSourceMaps = false;
         }
 
@@ -203,8 +202,8 @@ export class ExportTraceOptions extends HTMLElement {
       return i18nString(UIStrings.moreInfoLabel) + ' ' + i18nString(UIStrings.sourceMapsContentPrivacyInfo);
     }
 
-    if (checkboxId === 'script-content') {
-      return i18nString(UIStrings.moreInfoLabel) + ' ' + i18nString(UIStrings.scriptContentPrivacyInfo);
+    if (checkboxId === 'resource-content') {
+      return i18nString(UIStrings.moreInfoLabel) + ' ' + i18nString(UIStrings.resourceContentPrivacyInfo);
     }
 
     return '';
@@ -219,7 +218,7 @@ export class ExportTraceOptions extends HTMLElement {
         'change', this.#checkboxOptionChanged.bind(this, checkboxWithLabel, !checked), false);
 
     // Disable the includeSourceMapsSetting when the includeScriptContentSetting is also disabled.
-    this.#includeSourceMapsCheckbox.disabled = !this.#state.includeScriptContent;
+    this.#includeSourceMapsCheckbox.disabled = !this.#state.includeResourceContent;
 
     // clang-format off
       return html`
@@ -252,7 +251,7 @@ export class ExportTraceOptions extends HTMLElement {
     >
       <div class="info-tooltip-container">
       <p>
-        ${checkboxId === 'script-content' ? i18nString(UIStrings.scriptContentPrivacyInfo) : Lit.nothing}
+        ${checkboxId === 'resource-content' ? i18nString(UIStrings.resourceContentPrivacyInfo) : Lit.nothing}
         ${checkboxId === 'script-source-maps' ? i18nString(UIStrings.sourceMapsContentPrivacyInfo) : Lit.nothing}
       </p>
       </div>
@@ -287,9 +286,9 @@ export class ExportTraceOptions extends HTMLElement {
           ${this.#state.displayAnnotationsCheckbox ? this.#renderCheckbox('annotations', this.#includeAnnotationsCheckbox,
             i18nString(UIStrings.includeAnnotations),
             this.#state.includeAnnotations): ''}
-          ${this.#state.displayScriptContentCheckbox ? this.#renderCheckbox('script-content', this.#includeScriptContentCheckbox,
-            i18nString(UIStrings.includeScriptContent), this.#state.includeScriptContent): ''}
-          ${this.#state.displayScriptContentCheckbox && this.#state.displaySourceMapsCheckbox ? this.#renderCheckbox(
+          ${this.#state.displayResourceContentCheckbox ? this.#renderCheckbox('resource-content', this.#includeResourceContentCheckbox,
+            i18nString(UIStrings.includeResourceContent), this.#state.includeResourceContent): ''}
+          ${this.#state.displayResourceContentCheckbox && this.#state.displaySourceMapsCheckbox ? this.#renderCheckbox(
             'script-source-maps',
             this.#includeSourceMapsCheckbox, i18nString(UIStrings.includeSourcemap), this.#state.includeSourceMaps): ''}
           ${this.#renderCheckbox('compress-with-gzip', this.#shouldCompressCheckbox, i18nString(UIStrings.shouldCompress), this.#state.shouldCompress)}
@@ -303,8 +302,8 @@ export class ExportTraceOptions extends HTMLElement {
                   } as Buttons.Button.ButtonData}
                 >${i18nString(UIStrings.saveButtonTitle)}</devtools-button>
                 </div>
-          ${this.#state.displayScriptContentCheckbox ? this.#renderInfoTooltip('script-content') : Lit.nothing}
-          ${this.#state.displayScriptContentCheckbox && this.#state.displaySourceMapsCheckbox ? this.#renderInfoTooltip('script-source-maps') : Lit.nothing}
+          ${this.#state.displayResourceContentCheckbox ? this.#renderInfoTooltip('resource-content') : Lit.nothing}
+          ${this.#state.displayResourceContentCheckbox && this.#state.displaySourceMapsCheckbox ? this.#renderInfoTooltip('script-source-maps') : Lit.nothing}
         </div>
       </devtools-button-dialog>
     `;
@@ -319,7 +318,7 @@ export class ExportTraceOptions extends HTMLElement {
   async #onExportCallback(): Promise<void> {
     // Calls passed onExport function with current settings.
     await this.#data?.onExport({
-      includeScriptContent: this.#state.includeScriptContent,
+      includeResourceContent: this.#state.includeResourceContent,
       includeSourceMaps: this.#state.includeSourceMaps,
       // Note: this also includes track configuration ...
       addModifications: this.#state.includeAnnotations,

package/front_end/panels/timeline/components/FieldSettingsDialog.ts

@@ -11,6 +11,7 @@ import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Dialogs from '../../../ui/components/dialogs/dialogs.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.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 * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
@@ -331,7 +332,7 @@ export class FieldSettingsDialog extends HTMLElement {
   #render = (): void => {
     const linkEl =
         UI.XLink.XLink.create('https://developer.chrome.com/docs/crux', i18n.i18n.lockedString('Chrome UX Report'));
-    const descriptionEl = i18n.i18n.getFormatLocalizedString(str_, UIStrings.fetchAggregated, {PH1: linkEl});
+    const descriptionEl = uiI18n.getFormatLocalizedString(str_, UIStrings.fetchAggregated, {PH1: linkEl});
 
     // clang-format off
     const output = html`

package/front_end/panels/timeline/components/LiveMetricsView.ts

@@ -25,6 +25,7 @@ import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wra
 import type * as Menus from '../../../ui/components/menus/menus.js';
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import type * as Settings from '../../../ui/components/settings/settings.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';
@@ -629,8 +630,8 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
       <div class="device-toolbar-description">${md(i18nString(UIStrings.useDeviceToolbar))}</div>
       ${fieldEnabled ? html`
         <ul class="environment-recs-list">
-          <li>${i18n.i18n.getFormatLocalizedString(str_, UIStrings.device, {PH1: deviceRecEl})}</li>
-          <li>${i18n.i18n.getFormatLocalizedString(str_, UIStrings.network, {PH1: networkRecEl})}</li>
+          <li>${uiI18n.getFormatLocalizedString(str_, UIStrings.device, {PH1: deviceRecEl})}</li>
+          <li>${uiI18n.getFormatLocalizedString(str_, UIStrings.network, {PH1: networkRecEl})}</li>
         </ul>
       ` : nothing}
       <div class="environment-option">
@@ -839,7 +840,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     dateEl.classList.add('collection-period-range');
     dateEl.textContent = range || i18nString(UIStrings.notEnoughData);
 
-    const message = i18n.i18n.getFormatLocalizedString(str_, UIStrings.collectionPeriod, {
+    const message = uiI18n.getFormatLocalizedString(str_, UIStrings.collectionPeriod, {
       PH1: dateEl,
     });
 
@@ -862,7 +863,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
 
     const linkEl =
         UI.XLink.XLink.create('https://developer.chrome.com/docs/crux', i18n.i18n.lockedString('Chrome UX Report'));
-    const messageEl = i18n.i18n.getFormatLocalizedString(str_, UIStrings.seeHowYourLocalMetricsCompare, {PH1: linkEl});
+    const messageEl = uiI18n.getFormatLocalizedString(str_, UIStrings.seeHowYourLocalMetricsCompare, {PH1: linkEl});
 
     return html`
       <div class="field-data-message">${messageEl}</div>

package/front_end/panels/timeline/components/MetricCompareStrings.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
+import * as uiI18n from '../../../ui/i18n/i18n.js';
 
 import type {MetricRating} from './Utils.js';
 
@@ -185,40 +186,40 @@ export function renderCompareText(
   };
 
   if (rating === 'good' && compare === 'better') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.goodBetterCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.goodBetterCompare, values);
   }
   if (rating === 'good' && compare === 'worse') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.goodWorseCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.goodWorseCompare, values);
   }
   if (rating === 'good' && compare === 'similar') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.goodSimilarCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.goodSimilarCompare, values);
   }
   if (rating === 'good' && !compare) {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.goodSummarized, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.goodSummarized, values);
   }
   if (rating === 'needs-improvement' && compare === 'better') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.needsImprovementBetterCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.needsImprovementBetterCompare, values);
   }
   if (rating === 'needs-improvement' && compare === 'worse') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.needsImprovementWorseCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.needsImprovementWorseCompare, values);
   }
   if (rating === 'needs-improvement' && compare === 'similar') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.needsImprovementSimilarCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.needsImprovementSimilarCompare, values);
   }
   if (rating === 'needs-improvement' && !compare) {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.needsImprovementSummarized, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.needsImprovementSummarized, values);
   }
   if (rating === 'poor' && compare === 'better') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.poorBetterCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.poorBetterCompare, values);
   }
   if (rating === 'poor' && compare === 'worse') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.poorWorseCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.poorWorseCompare, values);
   }
   if (rating === 'poor' && compare === 'similar') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.poorSimilarCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.poorSimilarCompare, values);
   }
   if (rating === 'poor' && !compare) {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.poorSummarized, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.poorSummarized, values);
   }
 
   throw new Error('Compare string not found');
@@ -241,40 +242,40 @@ export function renderDetailedCompareText(options: {
   };
 
   if (localRating === 'good' && fieldRating === 'good') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.goodGoodDetailedCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.goodGoodDetailedCompare, values);
   }
   if (localRating === 'good' && fieldRating === 'needs-improvement') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.goodNeedsImprovementDetailedCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.goodNeedsImprovementDetailedCompare, values);
   }
   if (localRating === 'good' && fieldRating === 'poor') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.goodPoorDetailedCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.goodPoorDetailedCompare, values);
   }
   if (localRating === 'good' && !fieldRating) {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.goodSummarized, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.goodSummarized, values);
   }
   if (localRating === 'needs-improvement' && fieldRating === 'good') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.needsImprovementGoodDetailedCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.needsImprovementGoodDetailedCompare, values);
   }
   if (localRating === 'needs-improvement' && fieldRating === 'needs-improvement') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.needsImprovementNeedsImprovementDetailedCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.needsImprovementNeedsImprovementDetailedCompare, values);
   }
   if (localRating === 'needs-improvement' && fieldRating === 'poor') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.needsImprovementPoorDetailedCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.needsImprovementPoorDetailedCompare, values);
   }
   if (localRating === 'needs-improvement' && !fieldRating) {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.needsImprovementSummarized, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.needsImprovementSummarized, values);
   }
   if (localRating === 'poor' && fieldRating === 'good') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.poorGoodDetailedCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.poorGoodDetailedCompare, values);
   }
   if (localRating === 'poor' && fieldRating === 'needs-improvement') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.poorNeedsImprovementDetailedCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.poorNeedsImprovementDetailedCompare, values);
   }
   if (localRating === 'poor' && fieldRating === 'poor') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.poorPoorDetailedCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.poorPoorDetailedCompare, values);
   }
   if (localRating === 'poor' && !fieldRating) {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.poorSummarized, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.poorSummarized, values);
   }
 
   throw new Error('Detailed compare string not found');

package/front_end/panels/timeline/components/insights/LCPDiscovery.ts

@@ -8,6 +8,7 @@ import './Checklist.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type {LCPDiscoveryInsightModel} from '../../../../models/trace/insights/LCPDiscovery.js';
 import * as Trace from '../../../../models/trace/trace.js';
+import * as uiI18n from '../../../../ui/i18n/i18n.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
 import {BaseInsightComponent} from './BaseInsightComponent.js';
@@ -63,7 +64,7 @@ export class LCPDiscovery extends BaseInsightComponent<LCPDiscoveryInsightModel>
     const timeWrapper = document.createElement('span');
     timeWrapper.classList.add('discovery-time-ms');
     timeWrapper.innerText = i18n.TimeUtilities.formatMicroSecondsAsMillisFixed(delay);
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.lcpLoadDelay, {PH1: timeWrapper});
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.lcpLoadDelay, {PH1: timeWrapper});
   }
 
   override renderContent(): Lit.LitTemplate {

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
-URL: https://source.chromium.org/chromium/chromium/src/+/main:components/variations/proto/devtools/
+URL: https://chromium.googlesource.com/chromium/src
 Version: N/A
-Revision: c7f689c4ea24e98a4a1e06c78b10633db5a9f78f
+Revision: 5ea04b0081c4e9801ea4b74784e39ff75c8c7abb
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/third_party/puppeteer/README.chromium

@@ -1,10 +1,10 @@
 Name: Puppeteer Core
 Short Name: Puppeteer Core
 URL: https://github.com/puppeteer/puppeteer/tree/main/packages/puppeteer-core
-Version: 24.26.1
+Version: 24.27.0
 License: Apache-2.0
 License File: LICENSE
-Revision: 6e2348c27e3493e53b609122888e0950d342e4d2
+Revision: f73ebcde308687cd3f8d44596371a02c86626fd6
 Security Critical: no
 Shipped: yes
 Update Mechanism: Autoroll

package/front_end/third_party/puppeteer/package/lib/cjs/puppeteer/api/Browser.d.ts

@@ -136,6 +136,14 @@ export interface BrowserEvents extends Record<EventType, unknown> {
 export interface DebugInfo {
     pendingProtocolErrors: Error[];
 }
+/**
+ * @public
+ */
+export type CreatePageOptions = {
+    type: 'tab';
+} | {
+    type: 'window';
+};
 /**
  * {@link Browser} represents a browser instance that is either:
  *
@@ -240,7 +248,7 @@ export declare abstract class Browser extends EventEmitter<BrowserEvents> {
      * Creates a new {@link Page | page} in the
      * {@link Browser.defaultBrowserContext | default browser context}.
      */
-    abstract newPage(): Promise<Page>;
+    abstract newPage(options?: CreatePageOptions): Promise<Page>;
     /**
      * Gets all active {@link Target | targets}.
      *