chrome-devtools-frontend 1.0.1662965 → 1.0.1664496

package/front_end/panels/timeline/TimelinePanel.ts

@@ -42,11 +42,11 @@ 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 * as TextUtils from '../../core/text_utils/text_utils.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';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as SourceMapsResolver from '../../models/trace_source_maps_resolver/trace_source_maps_resolver.js';
 import * as Workspace from '../../models/workspace/workspace.js';
@@ -115,6 +115,32 @@ const UIStrings = {
    * @description Title of show screenshots setting in timeline panel of the performance panel
    */
   screenshots: 'Screenshots',
+  /**
+   * @description Label for the screenshot capture preset dropdown in the performance panel settings pane. The dropdown
+   * picks the per-frame resolution and maximum frame count used when capturing screenshots. Every preset is sized to
+   * stay within the same per-session memory budget.
+   */
+  screenshotCapture: 'Screenshot capture',
+  /**
+   * @description Dropdown option in the performance panel for the default screenshot capture preset (500 x 500 pixels,
+   * up to 450 frames).
+   */
+  screenshotPresetDefault: '500 x 500 px, up to 450 frames',
+  /**
+   * @description Dropdown option in the performance panel for a screenshot capture preset that uses smaller frames so
+   * more of them fit in the per-session memory budget (250 x 250 pixels, up to 1800 frames).
+   */
+  screenshotPresetMedium: '250 x 250 px, up to 1800 frames',
+  /**
+   * @description Dropdown option in the performance panel for a screenshot capture preset that uses higher-resolution
+   * frames at the cost of capturing fewer of them (1000 x 1000 pixels, up to 100 frames).
+   */
+  screenshotPresetLarge: '1000 x 1000 px, up to 100 frames',
+  /**
+   * @description Dropdown option in the performance panel for a screenshot capture preset that uses very small frames
+   * so many of them fit in the per-session memory budget (100 x 100 pixels, up to 11250 frames).
+   */
+  screenshotPresetTiny: '100 x 100 px, up to 11250 frames',
   /**
    * @description Text for the memory of the page
    */
@@ -314,6 +340,46 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelinePanel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+/**
+ * Screenshot capture presets exposed in the performance panel settings pane.
+ * Each entry pairs a maximum per-frame edge length (square frames) with a
+ * maximum frame count. All presets are sized to stay within the backend's
+ * per-session memory budget (~450 MB at 4 bytes per pixel).
+ */
+const SCREENSHOT_CAPTURE_PRESETS: ReadonlyArray<{
+  readonly key: string,
+  readonly maxSize: number,
+  readonly maxCount: number,
+  readonly label: () => Common.UIString.LocalizedString,
+}> =
+    [
+      {
+        key: '500-450',
+        maxSize: 500,
+        maxCount: 450,
+        label: () => i18nString(UIStrings.screenshotPresetDefault),
+      },
+      {
+        key: '250-1800',
+        maxSize: 250,
+        maxCount: 1800,
+        label: () => i18nString(UIStrings.screenshotPresetMedium),
+      },
+      {
+        key: '1000-100',
+        maxSize: 1000,
+        maxCount: 100,
+        label: () => i18nString(UIStrings.screenshotPresetLarge),
+      },
+      {
+        key: '100-11250',
+        maxSize: 100,
+        maxCount: 11250,
+        label: () => i18nString(UIStrings.screenshotPresetTiny),
+      },
+    ];
+const DEFAULT_SCREENSHOT_CAPTURE_PRESET_KEY = SCREENSHOT_CAPTURE_PRESETS[0].key;
+
 let timelinePanelInstance: TimelinePanel|undefined;
 
 // Total time to wait for source maps to load before giving up so trace processing can proceed.
@@ -349,6 +415,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   private disableCaptureJSProfileSetting: Common.Settings.Setting<boolean>;
   private readonly captureLayersAndPicturesSetting: Common.Settings.Setting<boolean>;
   private readonly captureSelectorStatsSetting: Common.Settings.Setting<boolean>;
+  private readonly screenshotCaptureModeSetting: Common.Settings.Setting<string>;
   readonly #thirdPartyTracksSetting: Common.Settings.Setting<boolean>;
   private showScreenshotsSetting: Common.Settings.Setting<boolean>;
   private showMemorySetting: Common.Settings.Setting<boolean>;
@@ -501,6 +568,10 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.captureSelectorStatsSetting = Common.Settings.Settings.instance().createSetting(
         'timeline-capture-selector-stats', false, Common.Settings.SettingStorageType.SESSION);
     this.captureSelectorStatsSetting.setTitle(i18nString(UIStrings.enableSelectorStats));
+    this.screenshotCaptureModeSetting = Common.Settings.Settings.instance().createSetting(
+        'timeline-screenshot-capture-mode', DEFAULT_SCREENSHOT_CAPTURE_PRESET_KEY,
+        Common.Settings.SettingStorageType.SESSION);
+    this.screenshotCaptureModeSetting.setTitle(i18nString(UIStrings.screenshotCapture));
 
     this.showScreenshotsSetting =
         Common.Settings.Settings.instance().createSetting('timeline-show-screenshots', !this.#isNode);
@@ -663,24 +734,6 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
     SDK.TargetManager.TargetManager.instance().addEventListener(
         SDK.TargetManager.Events.SUSPEND_STATE_CHANGED, this.onSuspendStateChanged, this);
-    const profilerModels = SDK.TargetManager.TargetManager.instance().models(SDK.CPUProfilerModel.CPUProfilerModel);
-    for (const model of profilerModels) {
-      for (const message of model.registeredConsoleProfileMessages) {
-        this.consoleProfileFinished(message);
-      }
-    }
-    SDK.TargetManager.TargetManager.instance().observeModels(
-        SDK.CPUProfilerModel.CPUProfilerModel,
-        {
-          modelAdded: (model: SDK.CPUProfilerModel.CPUProfilerModel) => {
-            model.addEventListener(
-                SDK.CPUProfilerModel.Events.CONSOLE_PROFILE_FINISHED, event => this.consoleProfileFinished(event.data));
-          },
-          modelRemoved: (_model: SDK.CPUProfilerModel.CPUProfilerModel) => {
-
-          },
-        },
-    );
   }
 
   zoomEvent(event: Trace.Types.Events.Event): void {
@@ -1031,7 +1084,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.#minimapComponent.highlightBounds(bounds, /* withBracket */ false);
   }
 
-  private loadFromCpuProfile(profile: Protocol.Profiler.Profile|null): void {
+  loadFromCpuProfile(profile: Protocol.Profiler.Profile|null): void {
     if (this.state !== State.IDLE || profile === null) {
       return;
     }
@@ -1315,6 +1368,31 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
         this.disableCaptureJSProfileSetting.title(), this.disableCaptureJSProfileSetting,
         i18nString(UIStrings.disablesJavascriptSampling)));
 
+    const screenshotPresetSelect = new UI.Toolbar.ToolbarComboBox(
+        () =>
+            this.screenshotCaptureModeSetting.set((screenshotPresetSelect.selectedOption() as HTMLOptionElement).value),
+        this.screenshotCaptureModeSetting.title(), '', 'screenshot-capture-mode');
+    let selectedScreenshotPresetIndex = 0;
+    for (let i = 0; i < SCREENSHOT_CAPTURE_PRESETS.length; ++i) {
+      const preset = SCREENSHOT_CAPTURE_PRESETS[i];
+      screenshotPresetSelect.addOption(
+          screenshotPresetSelect.createOption(preset.label(), preset.key, `tracing.screenshot-size.${preset.key}`));
+      if (preset.key === this.screenshotCaptureModeSetting.get()) {
+        selectedScreenshotPresetIndex = i;
+      }
+    }
+    screenshotPresetSelect.setSelectedIndex(selectedScreenshotPresetIndex);
+    const screenshotPresetPane = this.settingsPane.createChild('div');
+    screenshotPresetPane.append(this.screenshotCaptureModeSetting.title());
+    screenshotPresetPane.append(screenshotPresetSelect.element);
+    // Surface the dropdown only when the "Screenshots" checkbox is on, since the
+    // preset only affects the screenshots captured during the recording.
+    const updateScreenshotPresetVisibility = (): void => {
+      screenshotPresetPane.hidden = !this.showScreenshotsSetting.get();
+    };
+    this.showScreenshotsSetting.addChangeListener(updateScreenshotPresetVisibility);
+    updateScreenshotPresetVisibility();
+
     const thirdPartyCheckbox =
         this.createSettingCheckbox(this.#thirdPartyTracksSetting, i18nString(UIStrings.showDataAddedByExtensions));
 
@@ -1916,6 +1994,14 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
       const urlToTrace = await this.#evaluateInspectedURL();
 
+      // Resolve the user's screenshot capture preset (resolution x frame count).
+      // All presets are sized to fit within the backend's per-session memory
+      // budget, which the backend additionally enforces. Forward the values
+      // only when screenshots are actually being captured.
+      const screenshotPreset =
+          SCREENSHOT_CAPTURE_PRESETS.find(p => p.key === this.screenshotCaptureModeSetting.get()) ??
+          SCREENSHOT_CAPTURE_PRESETS[0];
+
       // Order is important here: we tell the controller to start recording, which enables tracing.
       await this.controller.startRecording({
         enableJSSampling: !this.disableCaptureJSProfileSetting.get(),
@@ -1923,6 +2009,9 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
         captureFilmStrip: this.showScreenshotsSetting.get(),
         captureSelectorStats: this.captureSelectorStatsSetting.get(),
         navigateToUrl: this.recordingPageReload ? urlToTrace : undefined,
+        ...(this.showScreenshotsSetting.get() ?
+                {screenshotMaxSize: screenshotPreset.maxSize, screenshotMaxCount: screenshotPreset.maxCount} :
+                {}),
       });
 
       // Once we get here, we know tracing is active.
@@ -2010,11 +2099,6 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.updateTimelineControls();
   }
 
-  private consoleProfileFinished(data: SDK.CPUProfilerModel.ProfileFinishedData): void {
-    this.loadFromCpuProfile(data.cpuProfile);
-    void UI.InspectorView.InspectorView.instance().showPanel('timeline');
-  }
-
   private updateTimelineControls(): void {
     if (this.#viewMode.mode === 'VIEWING_TRACE') {
       this.#addSidebarIconToToolbar();
@@ -3186,6 +3270,13 @@ export class BottomUpProfileRevealer implements Common.Revealer.Revealer<Utils.H
   }
 }
 
+export class ProfileFinishedRevealer implements Common.Revealer.Revealer<SDK.CPUProfilerModel.ProfileFinishedData> {
+  async reveal(data: SDK.CPUProfilerModel.ProfileFinishedData): Promise<void> {
+    await UI.ViewManager.ViewManager.instance().showView('timeline');
+    TimelinePanel.instance().loadFromCpuProfile(data.cpuProfile);
+  }
+}
+
 export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
   handleAction(context: UI.Context.Context, actionId: string): boolean {
     const panel = context.flavor(TimelinePanel);

package/front_end/panels/timeline/TimelineSelectorStatsView.ts

@@ -38,7 +38,7 @@ const UIStrings = {
    * @description Tooltip description '% of slow-path non-matches'
    */
   slowPathNonMatchesExplanation:
-      'The percentage of non-matching nodes (Match Attempts - Match Count) that couldn\'t be quickly ruled out by the bloom filter due to high selector complexity. Lower is better.',
+      'The percentage of non-matching nodes (Match Attempts - Match Count) that couldn’t be quickly ruled out by the bloom filter due to high selector complexity. Lower is better.',
   /**
    * @description Column name for count of elements that the engine attempted to match against a style rule
    */
@@ -71,7 +71,7 @@ const UIStrings = {
    * @description Tooltip description 'Style Sheet'
    */
   styleSheetIdExplanation:
-      'Links to the selector rule definition in the style sheets. Note that a selector rule could be defined in multiple places in a style sheet or defined in multiple style sheets. Selector rules from browser user-agent style sheet or dynamic style sheets don\'t have a link.',
+      'Links to the selector rule definition in the style sheets. Note that a selector rule could be defined in multiple places in a style sheet or defined in multiple style sheets. Selector rules from browser user-agent style sheet or dynamic style sheets don’t have a link.',
   /**
    * @description A context menu item in data grids to copy entire table to clipboard
    */

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -42,9 +42,9 @@ 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 * as TextUtils from '../../core/text_utils/text_utils.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as SourceMapsResolver from '../../models/trace_source_maps_resolver/trace_source_maps_resolver.js';
 import * as Workspace from '../../models/workspace/workspace.js';

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

@@ -58,7 +58,7 @@ const UIStrings = {
    */
   fieldMismatchNotice:
       'There are many reasons why local and field metrics [may not match](https://web.dev/articles/lab-and-field-data-differences). ' +
-      'Adjust [throttling settings and device emulation](https://developer.chrome.com/docs/devtools/device-mode) to analyze traces more similar to the average user\'s environment.',
+      'Adjust [throttling settings and device emulation](https://developer.chrome.com/docs/devtools/device-mode) to analyze traces more similar to the average user’s environment.',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/CWVMetrics.ts', UIStrings);

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

@@ -45,7 +45,7 @@ const UIStrings = {
    * @description Aria accessible name in Ignore List Settings Dialog in Performance panel. It labels the input
    * field used to add new or edit existing regular expressions that match file names to ignore in the debugger.
    */
-  addNewRegex: 'Add a regular expression rule for the script\'s URL',
+  addNewRegex: 'Add a regular expression rule for the script’s URL',
   /**
    * @description Aria accessible name in Ignore List Settings Dialog in Performance panel. It labels the checkbox of
    * the input field used to enable the new regular expressions that match file names to ignore in the debugger.

package/front_end/panels/timeline/overlays/components/EntryLabelOverlay.ts

@@ -65,12 +65,12 @@ const UIStringsNotTranslate = {
    * @description Security disclaimer text displayed when the information icon on a button that generates an AI label is hovered.
    */
   generateLabelSecurityDisclaimer:
-      'The selected call stack is sent to Google. This data may be seen by human reviewers to improve this feature. This is an experimental AI feature and won\'t always get it right.',
+      'The selected call stack is sent to Google. This data may be seen by human reviewers to improve this feature. This is an experimental AI feature and won’t always get it right.',
   /**
    * @description Enterprise users with logging off - Security disclaimer text displayed when the information icon on a button that generates an AI label is hovered.
    */
   generateLabelSecurityDisclaimerLoggingOff:
-      'The selected call stack is sent to Google. This data will not be used to improve Google\'s AI models. Your organization may change these settings at any time. This is an experimental AI feature and won\'t always get it right.',
+      'The selected call stack is sent to Google. This data will not be used to improve Google’s AI models. Your organization may change these settings at any time. This is an experimental AI feature and won’t always get it right.',
   /**
    * @description The `Generate AI label button` tooltip disclaimer for when the feature is not available and the reason can be checked in settings.
    */

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

@@ -456,3 +456,16 @@ Common.Revealer.registerRevealer({
     return new Timeline.TimelinePanel.BottomUpProfileRevealer();
   },
 });
+
+Common.Revealer.registerRevealer({
+  contextTypes() {
+    return [
+      SDK.CPUProfilerModel.ProfileFinishedData,
+    ];
+  },
+  destination: Common.Revealer.RevealerDestination.TIMELINE_PANEL,
+  async loadRevealer() {
+    const Timeline = await loadTimelineModule();
+    return new Timeline.TimelinePanel.ProfileFinishedRevealer();
+  },
+});

package/front_end/services/tracing/TracingManager.ts

@@ -66,13 +66,14 @@ export class TracingManager extends SDK.SDKModel.SDKModel<void> {
     this.#finishing = false;
   }
 
-  async start(client: TracingManagerClient, categoryFilter: string): Promise<Protocol.ProtocolResponseWithError> {
+  async start(client: TracingManagerClient, categoryFilter: string,
+              options: TracingStartOptions = {}): Promise<Protocol.ProtocolResponseWithError> {
     if (this.#activeClient) {
       throw new Error('Tracing is already started');
     }
     const bufferUsageReportingIntervalMs = 500;
     this.#activeClient = client;
-    const args = {
+    const args: Protocol.Tracing.StartRequest = {
       bufferUsageReportingInterval: bufferUsageReportingIntervalMs,
       transferMode: Protocol.Tracing.StartRequestTransferMode.ReportEvents,
       traceConfig: {
@@ -81,6 +82,12 @@ export class TracingManager extends SDK.SDKModel.SDKModel<void> {
         includedCategories: categoryFilter.split(','),
       },
     };
+    if (options.screenshotMaxSize !== undefined) {
+      args.screenshotMaxSize = options.screenshotMaxSize;
+    }
+    if (options.screenshotMaxCount !== undefined) {
+      args.screenshotMaxCount = options.screenshotMaxCount;
+    }
     const response = await this.#tracingAgent.invoke_start(args);
     if (response.getError()) {
       this.#activeClient = null;
@@ -108,6 +115,24 @@ export interface TracingManagerClient {
   eventsRetrievalProgress(progress: number): void;
 }
 
+/**
+ * Optional knobs that control how the `disabled-by-default-devtools.screenshot`
+ * tracing category captures frames. See `Tracing.start` in the protocol for
+ * details and per-session memory budget.
+ */
+export interface TracingStartOptions {
+  /**
+   * Maximum width and height (in pixels) of each captured screenshot.
+   * When omitted the backend default (500) is used.
+   */
+  screenshotMaxSize?: number;
+  /**
+   * Maximum number of screenshots captured during a single tracing session.
+   * When omitted the backend default (450) is used.
+   */
+  screenshotMaxCount?: number;
+}
+
 class TracingDispatcher implements ProtocolProxyApi.TracingDispatcher {
   readonly #tracingManager: TracingManager;
   constructor(tracingManager: TracingManager) {

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: 7eaaa785deda657a652efc66266b8cc2957167f9
+Revision: 0710d8bfc99da895041ed5684b55ab2f262173b6
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/third_party/lighthouse/README.chromium

@@ -1,7 +1,7 @@
 Name: Lighthouse
 Short Name: lighthouse
-Version: 13.4.0
-Revision: cb79bea56c4668fd7a338f2f421f87754ee927a2
+Version: 13.4.1
+Revision: 1d58f5b06d28e3419b38817a6c7488ec4413c67d
 Update Mechanism: Manual
 URL: https://github.com/GoogleChrome/lighthouse
 License: Apache-2.0