chrome-devtools-frontend 1.0.1662289 → 1.0.1664496

package/front_end/panels/security/SecurityPanel.ts

@@ -120,7 +120,7 @@ const UIStrings = {
    */
   insecureSha: 'insecure (SHA-1)',
   /**
-   * @description Description of the security explanation when the site’s certificate chain contains a certificate signed using SHA-1.
+   * @description Description of the security explanation when the site's certificate chain contains a certificate signed using SHA-1.
    */
   theCertificateChainForThisSite: 'The certificate chain for this site contains a certificate signed using SHA-1.',
   /**
@@ -128,7 +128,7 @@ const UIStrings = {
    */
   subjectAlternativeNameMissing: '`Subject Alternative Name` missing',
   /**
-   * @description Description of the security explanation when the site’s certificate is missing a Subject Alternative Name extension.
+   * @description Description of the security explanation when the site's certificate is missing a Subject Alternative Name extension.
    */
   theCertificateForThisSiteDoesNot:
       'The certificate for this site doesn’t contain a `Subject Alternative Name` extension containing a domain name or IP address.',
@@ -274,7 +274,7 @@ const UIStrings = {
    */
   reloadThePageToRecordRequestsFor: 'Reload the page to record requests for HTTP resources.',
   /**
-   * @description Link text in the Security panel. Clicking the link navigates the user to the Network panel. Requests refers to network requests. Each request is a piece of data transmitted from the current user’s browser to a remote server.
+   * @description Link text in the Security panel. Clicking the link navigates the user to the Network panel. Requests refers to network requests. Each request is a piece of data transmitted from the current user's browser to a remote server.
    */
   viewDRequestsInNetworkPanel:
       '{n, plural, =1 {View # request in Network panel} other {View # requests in Network panel}}',

package/front_end/panels/settings/AISettingsTab.ts

@@ -76,7 +76,17 @@ const UIStrings = {
    */
   showLess: 'Show less',
   /**
-   * @description Header for a list of feature attributes. 'When on, you’ll be able to …'.
+   * @description Accessible label for a button to expand an accordion for a specific setting.
+   * @example {Code suggestions} PH1
+   */
+  showMoreOfSetting: 'Show more of {PH1}',
+  /**
+   * @description Accessible label for a button to collapse an accordion for a specific setting.
+   * @example {Code suggestions} PH1
+   */
+  showLessOfSetting: 'Show less of {PH1}',
+  /**
+   * @description Header for a list of feature attributes. 'When on, you'll be able to …'.
    */
   whenOn: 'When on',
   /**
@@ -247,11 +257,11 @@ const UIStrings = {
    */
   enableAiCodeSuggestions: 'Enable AI code suggestions',
   /**
-   * @description Message shown to the user if the age check isn’t successful.
+   * @description Message shown to the user if the age check isn't successful.
    */
   ageRestricted: 'This feature is only available to users 18 years or older.',
   /**
-   * @description The error message when the user isn’t logged in to Chrome.
+   * @description The error message when the user isn't logged in to Chrome.
    */
   notLoggedIn: 'This feature is only available when you sign in to Chrome with your Google account.',
   /**
@@ -259,7 +269,7 @@ const UIStrings = {
    */
   offline: 'This feature is only available with an active internet connection.',
   /**
-   * @description Text informing the user that AI assistance isn’t available in Incognito mode or Guest mode.
+   * @description Text informing the user that AI assistance isn't available in Incognito mode or Guest mode.
    */
   notAvailableInIncognitoMode: 'AI assistance isn’t available in Incognito mode or Guest mode.',
 } as const;
@@ -358,6 +368,9 @@ export const AI_SETTINGS_TAB_DEFAULT_VIEW: View = (input, _output, target): void
           <devtools-button
             .data=${{
               title: settingData.settingExpandState.isSettingExpanded ? i18nString(UIStrings.showLess) : i18nString(UIStrings.showMore),
+              accessibleLabel: settingData.settingExpandState.isSettingExpanded ?
+                  i18nString(UIStrings.showLessOfSetting, {PH1: settingData.settingName}) :
+                  i18nString(UIStrings.showMoreOfSetting, {PH1: settingData.settingName}),
               size: Buttons.Button.Size.SMALL,
               iconName: settingData.settingExpandState.isSettingExpanded ? 'chevron-up' : 'chevron-down',
               variant: Buttons.Button.Variant.ICON,

package/front_end/panels/settings/components/SyncSection.ts

@@ -24,25 +24,25 @@ import syncSectionStyles from './syncSection.css.js';
 
 const UIStrings = {
   /**
-   * @description Text shown to the user in Settings. ‘This setting’ refers
+   * @description Text shown to the user in Settings. ‘This setting' refers
    * to a checkbox that is disabled.
    */
   syncDisabled: 'To turn this setting on, you must enable Chrome sync.',
   /**
    * @description Text shown to the user in Settings. Explains why the checkbox
-   * for saving DevTools settings to the user’s Google account is inactive.
+   * for saving DevTools settings to the user's Google account is inactive.
    */
   preferencesSyncDisabled: 'You need to first enable saving `Chrome` settings in your `Google` account.',
   /**
    * @description Label for the account email address. Shown in DevTools Settings in
    * front of the email address currently used for Chrome Sync.
    */
-  signedIn: 'Signed into Chrome as:',
+  signedIn: 'Signed in to Chrome as:',
   /**
    * @description Label for the account settings. Shown in DevTools Settings when
    * the user is not logged in to Chrome.
    */
-  notSignedIn: 'You’re not signed into Chrome.',
+  notSignedIn: 'You’re not signed in to Chrome.',
   /**
    * @description Label for the Google Developer Program profile status that corresponds to
    * the standard plan (no subscription).

package/front_end/panels/settings/emulation/components/UserAgentClientHintsForm.ts

@@ -40,12 +40,12 @@ const UIStrings = {
    */
   brandProperties: 'User agent properties',
   /**
-   * @description Input field placeholder for brand’s browser name.
+   * @description Input field placeholder for brand's browser name.
    * Brands here relate to different browser brands/vendors like Google Chrome, Microsoft Edge, etc.
    */
   brandName: 'Brand',
   /**
-   * @description ARIA label for brand’s browser name input field.
+   * @description ARIA label for brand's browser name input field.
    * Brands here relate to different browser brands/vendors like Google Chrome, Microsoft Edge, etc.
    * @example {index} PH1
    */
@@ -61,7 +61,7 @@ const UIStrings = {
    */
   brandVersionPlaceholder: 'Version (e.g. 87.0.4280.88)',
   /**
-   * @description ARIA label for brand’s browser version input field.
+   * @description ARIA label for brand's browser version input field.
    * Brands here relate to different browser brands/vendors like Google Chrome, Microsoft Edge, etc.
    * @example {index} PH1
    */

package/front_end/panels/snippets/ScriptSnippetFileSystem.ts

@@ -6,9 +6,9 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.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 Persistence from '../../models/persistence/persistence.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as UI from '../../ui/legacy/legacy.js';
 

package/front_end/panels/sources/BreakpointsView.ts

@@ -10,9 +10,9 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import {assertNotNullOrUndefined} from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Breakpoints from '../../models/breakpoints/breakpoints.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Input from '../../ui/components/input/input.js';
 import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';

package/front_end/panels/sources/CoveragePlugin.ts

@@ -6,7 +6,7 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -9,6 +9,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.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 Badges from '../../models/badges/badges.js';
 import * as Bindings from '../../models/bindings/bindings.js';
@@ -16,7 +17,6 @@ import * as Breakpoints from '../../models/breakpoints/breakpoints.js';
 import * as Formatter from '../../models/formatter/formatter.js';
 import * as SourceMapScopes from '../../models/source_map_scopes/source_map_scopes.js';
 import * as StackTrace from '../../models/stack_trace/stack_trace.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
@@ -41,7 +41,7 @@ const UIStrings = {
   /**
    * @description Text in Debugger Plugin of the Sources panel
    */
-  thisScriptIsOnTheDebuggersIgnore: 'This script is on the debugger\'s ignore list',
+  thisScriptIsOnTheDebuggersIgnore: 'This script is on the debugger’s ignore list',
   /**
    * @description Text to stop preventing the debugger from stepping into library code
    */
@@ -123,11 +123,11 @@ const UIStrings = {
   /**
    * @description Text in Debugger Plugin of the Sources panel
    */
-  debuggingPowerReduced: 'DevTools can\'t show authored sources, but you can debug the deployed code.',
+  debuggingPowerReduced: 'DevTools can’t show authored sources, but you can debug the deployed code.',
   /**
    * @description Text in Debugger Plugin of the Sources panel
    */
-  reloadForSourceMap: 'To enable again, make sure the file isn\'t on the ignore list and reload.',
+  reloadForSourceMap: 'To enable again, make sure the file isn’t on the ignore list and reload.',
   /**
    * @description Text in Debugger Plugin of the Sources panel
    * @example {http://site.com/lib.js.map} PH1

package/front_end/panels/sources/FilteredUISourceCodeListProvider.ts

@@ -9,7 +9,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js';
-import {Directives, html, type TemplateResult} from '../../ui/lit/lit.js';
+import {Directives, html, nothing, type TemplateResult} from '../../ui/lit/lit.js';
 
 import {FilePathScoreFunction} from './FilePathScoreFunction.js';
 import filteredUISourceCodeListProviderStyles from './filteredUISourceCodeListProvider.css.js';
@@ -24,12 +24,18 @@ const UIStrings = {
    * @example {compile.html} PH1
    */
   sIgnoreListed: '{PH1} (ignore listed)',
+  /**
+   * @description Tag indicating a file is from the local workspace
+   */
+  workspace: 'Workspace',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/sources/FilteredUISourceCodeListProvider.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {classMap} = Directives;
 
+const FILE_SYSTEM_SCORE_BONUS = 1_000_000;
+
 export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidget.Provider {
   private queryLineNumberAndColumnNumber: string;
   private defaultScores: Map<Workspace.UISourceCode.UISourceCode, number>|null;
@@ -48,6 +54,18 @@ export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidg
     this.uiSourceCodeIds = new Set();
   }
 
+  /**
+   * Checks if the given UISourceCode belongs to a file system project.
+   * This includes:
+   * - Workspace.Workspace.projectTypes.FileSystem: Standard workspace folders added by the user.
+   * - Workspace.Workspace.projectTypes.ConnectableFileSystem: Workspace folders connected via custom protocols.
+   */
+  private isFileSystemFile(uiSourceCode: Workspace.UISourceCode.UISourceCode): boolean {
+    const projectType = uiSourceCode.project().type();
+    return projectType === Workspace.Workspace.projectTypes.FileSystem ||
+        projectType === Workspace.Workspace.projectTypes.ConnectableFileSystem;
+  }
+
   private projectRemoved(event: Common.EventTarget.EventTargetEvent<Workspace.Workspace.Project>): void {
     const project = event.data;
     this.populate(project);
@@ -116,8 +134,10 @@ export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidg
   override itemScoreAt(itemIndex: number, query: string): number {
     const uiSourceCode = this.uiSourceCodes[itemIndex];
     const score = this.defaultScores ? (this.defaultScores.get(uiSourceCode) || 0) : 0;
+    const fileSystemBonus = this.isFileSystemFile(uiSourceCode) ? FILE_SYSTEM_SCORE_BONUS : 0;
+
     if (!query || query.length < 2) {
-      return score;
+      return score + fileSystemBonus;
     }
 
     if (this.query !== query) {
@@ -148,7 +168,8 @@ export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidg
     }
 
     const fullDisplayName = uiSourceCode.fullDisplayName();
-    return score + multiplier * (contentTypeBonus + this.scorer.calculateScore(fullDisplayName, null));
+    return score + multiplier * (contentTypeBonus + this.scorer.calculateScore(fullDisplayName, null)) +
+        fileSystemBonus;
   }
 
   override renderItem(itemIndex: number, query: string): TemplateResult {
@@ -179,6 +200,8 @@ export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidg
         subtitleRanges.push({offset: indexes[i], length: 1});
       }
     }
+    const isFileSystem = this.isFileSystemFile(uiSourceCode);
+
     // clang-format off
     return html`
       <style>${filteredUISourceCodeListProviderStyles}</style>
@@ -196,6 +219,7 @@ export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidg
             class="filtered-ui-source-code-subtitle" title=${tooltipText}>
           ${this.renderSubtitleElement(fullDisplayName.substring(0, fileNameIndex + 1))}
         </devtools-highlight>
+        ${isFileSystem ? html`<span class="tag">${i18nString(UIStrings.workspace)}</span>` : nothing}
       </div>`;
     // clang-format on
   }

package/front_end/panels/sources/NavigatorView.ts

@@ -9,10 +9,10 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as AiAssistance from '../../models/ai_assistance/ai_assistance.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Persistence from '../../models/persistence/persistence.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Spinners from '../../ui/components/spinners/spinners.js';

package/front_end/panels/sources/PersistenceActions.ts

@@ -7,9 +7,9 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Persistence from '../../models/persistence/persistence.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as UI from '../../ui/legacy/legacy.js';
 

package/front_end/panels/sources/SourcesNavigator.ts

@@ -11,9 +11,9 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Persistence from '../../models/persistence/persistence.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
 import {Link} from '../../ui/kit/kit.js';

package/front_end/panels/sources/SourcesSearchScope.ts

@@ -4,9 +4,9 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Persistence from '../../models/persistence/persistence.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import type * as Search from '../search/search.js';
 

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -5,8 +5,8 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as Persistence from '../../models/persistence/persistence.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import type * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as Tooltips from '../../ui/components/tooltips/tooltips.js';
@@ -39,7 +39,7 @@ const UIStrings = {
    * @example {FolderName} PH1
    */
   changesWereNotSavedToFileSystemToSaveAddFolderToWorkspace:
-      'Changes weren\'t saved to file system. To save, add {PH1} to your Workspace.',
+      'Changes weren’t saved to file system. To save, add {PH1} to your Workspace.',
   /**
    * @description Tooltip shown for the warning icon on an editor tab in the Sources panel
    *              when the developer saved changes via Ctrl+S/Cmd+S, but didn't have a Workspace
@@ -48,7 +48,7 @@ const UIStrings = {
    * @example {Workspace} PH1
    */
   changesWereNotSavedToFileSystemToSaveSetUpYourWorkspace:
-      'Changes weren\'t saved to file system. To save, set up your {PH1}.',
+      'Changes weren’t saved to file system. To save, set up your {PH1}.',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/sources/TabbedEditorContainer.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -7,12 +7,12 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as FormatterActions from '../../entrypoints/formatter_worker/FormatterActions.js';  // eslint-disable-line @devtools/es-modules-import
 import * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
 import * as Formatter from '../../models/formatter/formatter.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as Persistence from '../../models/persistence/persistence.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';

package/front_end/panels/sources/components/HeadersView.ts

@@ -6,9 +6,9 @@
 
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
+import * as TextUtils from '../../../core/text_utils/text_utils.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import * as Persistence from '../../../models/persistence/persistence.js';
-import * as TextUtils from '../../../models/text_utils/text_utils.js';
 import * as Workspace from '../../../models/workspace/workspace.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';

package/front_end/panels/sources/filteredUISourceCodeListProvider.css

@@ -7,6 +7,7 @@
 .filtered-list-widget-item > .filtered-ui-source-code-list-item {
   align-content: center;
   display: grid;
+  grid-template-columns: 1fr auto;
   gap: var(--sys-size-2);
   line-height: initial;
 }
@@ -16,6 +17,8 @@
 }
 
 .filtered-ui-source-code-title {
+  grid-column: 1;
+  grid-row: 1;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -25,11 +28,12 @@
 }
 
 .filtered-ui-source-code-subtitle {
+  grid-column: 1;
+  grid-row: 2;
   flex: none;
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--sys-color-on-surface-subtle);
-  padding-left: var(--sys-size-3);
   display: flex;
   white-space: pre;
 }
@@ -39,3 +43,10 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.filtered-ui-source-code-list-item > .tag {
+  grid-column: 2;
+  grid-row: 1 / 3;
+  align-self: center;
+  white-space: nowrap;
+}

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

@@ -365,7 +365,7 @@ const UIStrings = {
   /**
    * @description Title of an option under the Sources category that can be invoked through the Command Menu
    */
-  doNotDisplayVariableValuesInline: 'Don\'t show variable values inline',
+  doNotDisplayVariableValuesInline: 'Don’t show variable values inline',
   /**
    * @description Title of a setting under the Sources category in Settings
    */

package/front_end/panels/timeline/StatusDialog.ts

@@ -6,7 +6,7 @@ import '../../ui/legacy/legacy.js';
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import type * as Trace from '../../models/trace/trace.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';

package/front_end/panels/timeline/TimelineController.ts

@@ -262,8 +262,15 @@ export class TimelineController implements Tracing.TracingManager.TracingManager
           disabledByDefault('devtools.timeline.layers'), disabledByDefault('devtools.timeline.picture'),
           disabledByDefault('blink.graphics_context_annotations'));
     }
+    const screenshotOptions: Tracing.TracingManager.TracingStartOptions = {};
     if (options.captureFilmStrip) {
       categoriesArray.push(disabledByDefault('devtools.screenshot'));
+      if (options.screenshotMaxSize !== undefined) {
+        screenshotOptions.screenshotMaxSize = options.screenshotMaxSize;
+      }
+      if (options.screenshotMaxCount !== undefined) {
+        screenshotOptions.screenshotMaxCount = options.screenshotMaxCount;
+      }
     }
     if (options.captureSelectorStats) {
       categoriesArray.push(disabledByDefault('blink.debug'));
@@ -281,7 +288,7 @@ export class TimelineController implements Tracing.TracingManager.TracingManager
     this.#fieldData = null;
     this.#recordingStartTime = Date.now();
 
-    const response = await this.startRecordingWithCategories(categoriesArray.join(','));
+    const response = await this.startRecordingWithCategories(categoriesArray.join(','), screenshotOptions);
     if (response.getError()) {
       await SDK.TargetManager.TargetManager.instance().resumeAllTargets();
       throw new Error(response.getError());
@@ -403,7 +410,9 @@ export class TimelineController implements Tracing.TracingManager.TracingManager
     }
   }
 
-  private async startRecordingWithCategories(categories: string): Promise<Protocol.ProtocolResponseWithError> {
+  private async startRecordingWithCategories(categories: string,
+                                             tracingStartOptions: Tracing.TracingManager.TracingStartOptions = {}):
+      Promise<Protocol.ProtocolResponseWithError> {
     if (!this.tracingManager) {
       throw new Error(i18nString(UIStrings.tracingNotSupported));
     }
@@ -412,7 +421,7 @@ export class TimelineController implements Tracing.TracingManager.TracingManager
     // all the functions data.
     await SDK.TargetManager.TargetManager.instance().suspendAllTargets('performance-timeline');
     this.tracingCompletePromise = Promise.withResolvers();
-    const response = await this.tracingManager.start(this, categories);
+    const response = await this.tracingManager.start(this, categories, tracingStartOptions);
     await this.warmupJsProfiler();
     PanelCommon.ExtensionServer.ExtensionServer.instance().profilingStarted();
     return response;
@@ -485,4 +494,16 @@ export interface RecordingOptions {
   captureFilmStrip?: boolean;
   captureSelectorStats?: boolean;
   navigateToUrl?: Platform.DevToolsPath.UrlString;
+  /**
+   * Maximum width/height (in pixels) of each captured screenshot.
+   * Only meaningful when `captureFilmStrip` is true. When omitted the
+   * backend default is used (see CDP `Tracing.start`).
+   */
+  screenshotMaxSize?: number;
+  /**
+   * Maximum number of screenshots captured during a single recording.
+   * Only meaningful when `captureFilmStrip` is true. When omitted the
+   * backend default is used (see CDP `Tracing.start`).
+   */
+  screenshotMaxCount?: number;
 }