chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -23,131 +23,131 @@ import {RequestInitiatorView} from './RequestInitiatorView.js';
 
 const UIStrings = {
   /**
-   *@description Data grid name for Network Log data grids
+   * @description Data grid name for Network Log data grids
    */
   networkLog: 'Network Log',
   /**
-   *@description Inner element text content in Network Log View Columns of the Network panel
+   * @description Inner element text content in Network Log View Columns of the Network panel
    */
   waterfall: 'Waterfall',
   /**
-   *@description A context menu item in the Network Log View Columns of the Network panel
+   * @description A context menu item in the Network Log View Columns of the Network panel
    */
   responseHeaders: 'Response Headers',
   /**
-   *@description A context menu item in the Network Log View Columns of the Network panel
+   * @description A context menu item in the Network Log View Columns of the Network panel
    */
   requestHeaders: 'Request Headers',
   /**
-   *@description Text in Network Log View Columns of the Network panel
+   * @description Text in Network Log View Columns of the Network panel
    */
   manageHeaderColumns: 'Manage Header Columns…',
   /**
-   *@description Text for the start time of an activity
+   * @description Text for the start time of an activity
    */
   startTime: 'Start Time',
   /**
-   *@description Text in Network Log View Columns of the Network panel
+   * @description Text in Network Log View Columns of the Network panel
    */
   responseTime: 'Response Time',
   /**
-   *@description Text in Network Log View Columns of the Network panel
+   * @description Text in Network Log View Columns of the Network panel
    */
   endTime: 'End Time',
   /**
-   *@description Text in Network Log View Columns of the Network panel
+   * @description Text in Network Log View Columns of the Network panel
    */
   totalDuration: 'Total Duration',
   /**
-   *@description Text for the latency of a task
+   * @description Text for the latency of a task
    */
   latency: 'Latency',
   /**
-   *@description Text for the name of something
+   * @description Text for the name of something
    */
   name: 'Name',
   /**
-   *@description Text that refers to a file path
+   * @description Text that refers to a file path
    */
   path: 'Path',
   /**
-   *@description Text in Timeline UIUtils of the Performance panel
+   * @description Text in Timeline UIUtils of the Performance panel
    */
   url: 'Url',
   /**
-   *@description Text for one or a group of functions
+   * @description Text for one or a group of functions
    */
   method: 'Method',
   /**
-   *@description Text for the status of something
+   * @description Text for the status of something
    */
   status: 'Status',
   /**
-   *@description Generic label for any text
+   * @description Generic label for any text
    */
   text: 'Text',
   /**
-   *@description Text for security or network protocol
+   * @description Text for security or network protocol
    */
   protocol: 'Protocol',
   /**
-   *@description Text in Network Log View Columns of the Network panel
+   * @description Text in Network Log View Columns of the Network panel
    */
   scheme: 'Scheme',
   /**
-   *@description Text for the domain of a website
+   * @description Text for the domain of a website
    */
   domain: 'Domain',
   /**
-   *@description Text in Network Log View Columns of the Network panel
+   * @description Text in Network Log View Columns of the Network panel
    */
   remoteAddress: 'Remote Address',
   /**
-   *@description Text that refers to some types
+   * @description Text that refers to some types
    */
   type: 'Type',
   /**
-   *@description Text for the initiator of something
+   * @description Text for the initiator of something
    */
   initiator: 'Initiator',
   /**
-   *@description Column header in the Network log view of the Network panel
+   * @description Column header in the Network log view of the Network panel
    */
   hasOverrides: 'Has overrides',
   /**
-   *@description Column header in the Network log view of the Network panel
+   * @description Column header in the Network log view of the Network panel
    */
   initiatorAddressSpace: 'Initiator Address Space',
   /**
-   *@description Text for web cookies
+   * @description Text for web cookies
    */
   cookies: 'Cookies',
   /**
-   *@description Text in Network Log View Columns of the Network panel
+   * @description Text in Network Log View Columns of the Network panel
    */
   setCookies: 'Set Cookies',
   /**
-   *@description Text for the size of something
+   * @description Text for the size of something
    */
   size: 'Size',
   /**
-   *@description Text in Network Log View Columns of the Network panel
+   * @description Text in Network Log View Columns of the Network panel
    */
   content: 'Content',
   /**
-   *@description Noun that refers to a duration in milliseconds.
+   * @description Noun that refers to a duration in milliseconds.
    */
   time: 'Time',
   /**
-   *@description Text to show the priority of an item
+   * @description Text to show the priority of an item
    */
   priority: 'Priority',
   /**
-   *@description Text in Network Log View Columns of the Network panel
+   * @description Text in Network Log View Columns of the Network panel
    */
   connectionId: 'Connection ID',
   /**
-   *@description Text in Network Log View Columns of the Network panel
+   * @description Text in Network Log View Columns of the Network panel
    */
   remoteAddressSpace: 'Remote Address Space',
 } as const;
@@ -277,11 +277,6 @@ export class NetworkLogViewColumns {
       deleteCallback: undefined,
       refreshCallback: undefined,
     }));
-    this.dataGridInternal.element.addEventListener('mousedown', event => {
-      if (!this.dataGridInternal.selectedNode && event.button) {
-        event.consume();
-      }
-    }, true);
     this.dataGridScroller = (this.dataGridInternal.scrollContainer as HTMLDivElement);
 
     this.updateColumns();
@@ -804,8 +799,10 @@ export class NetworkLogViewColumns {
 
   private addCustomHeader(headerTitle: string, headerId?: string, index?: number): Descriptor|null {
     if (!headerId) {
-      headerId = headerTitle.toLowerCase();
+      headerId = headerTitle;
     }
+    headerId = headerId.toLowerCase();
+
     if (index === undefined) {
       index = this.columns.length - 1;
     }
@@ -887,7 +884,7 @@ export class NetworkLogViewColumns {
         if (!content) {
           return false;
         }
-        popover.contentElement.appendChild(content.element);
+        content.show(popover.contentElement);
         return true;
       },
       hide: this.popupLinkifier.reset.bind(this.popupLinkifier),
@@ -1134,30 +1131,6 @@ const DEFAULT_COLUMNS = [
     title: i18n.i18n.lockedLazyString('Vary'),
     sortingFunction: NetworkRequestNode.ResponseHeaderStringComparator.bind(null, 'vary'),
   },
-  {
-    id: 'request-header-content-type',
-    isRequestHeader: true,
-    title: i18n.i18n.lockedLazyString('Content-Type'),
-    sortingFunction: NetworkRequestNode.RequestHeaderStringComparator.bind(null, 'Content-Type'),
-  },
-  {
-    id: 'request-header-referer',
-    isRequestHeader: true,
-    title: i18n.i18n.lockedLazyString('Referer'),
-    sortingFunction: NetworkRequestNode.RequestHeaderStringComparator.bind(null, 'referer'),
-  },
-  {
-    id: 'request-header-origin',
-    isRequestHeader: true,
-    title: i18n.i18n.lockedLazyString('Origin'),
-    sortingFunction: NetworkRequestNode.RequestHeaderStringComparator.bind(null, 'origin'),
-  },
-  {
-    id: 'request-header-user-agent',
-    isRequestHeader: true,
-    title: i18n.i18n.lockedLazyString('User-Agent'),
-    sortingFunction: NetworkRequestNode.RequestHeaderStringComparator.bind(null, 'user-agent'),
-  },
   {
     id: 'request-header-accept',
     isRequestHeader: true,
@@ -1176,6 +1149,24 @@ const DEFAULT_COLUMNS = [
     title: i18n.i18n.lockedLazyString('Accept-Language'),
     sortingFunction: NetworkRequestNode.RequestHeaderStringComparator.bind(null, 'accept-language'),
   },
+  {
+    id: 'request-header-content-type',
+    isRequestHeader: true,
+    title: i18n.i18n.lockedLazyString('Content-Type'),
+    sortingFunction: NetworkRequestNode.RequestHeaderStringComparator.bind(null, 'Content-Type'),
+  },
+  {
+    id: 'request-header-origin',
+    isRequestHeader: true,
+    title: i18n.i18n.lockedLazyString('Origin'),
+    sortingFunction: NetworkRequestNode.RequestHeaderStringComparator.bind(null, 'origin'),
+  },
+  {
+    id: 'request-header-referer',
+    isRequestHeader: true,
+    title: i18n.i18n.lockedLazyString('Referer'),
+    sortingFunction: NetworkRequestNode.RequestHeaderStringComparator.bind(null, 'referer'),
+  },
   {
     id: 'request-header-sec-fetch-dest',
     isRequestHeader: true,
@@ -1188,6 +1179,12 @@ const DEFAULT_COLUMNS = [
     title: i18n.i18n.lockedLazyString('Sec-Fetch-Mode'),
     sortingFunction: NetworkRequestNode.RequestHeaderStringComparator.bind(null, 'sec-fetch-mode'),
   },
+  {
+    id: 'request-header-user-agent',
+    isRequestHeader: true,
+    title: i18n.i18n.lockedLazyString('User-Agent'),
+    sortingFunction: NetworkRequestNode.RequestHeaderStringComparator.bind(null, 'user-agent'),
+  },
   // This header is a placeholder to let datagrid know that it can be sorted by this column, but never shown.
   {
     id: 'waterfall',

package/front_end/panels/network/NetworkManageCustomHeadersView.ts

@@ -10,19 +10,19 @@ import networkManageCustomHeadersViewStyles from './networkManageCustomHeadersVi
 
 const UIStrings = {
   /**
-   *@description Text in Network Manage Custom Headers View of the Network panel
+   * @description Text in Network Manage Custom Headers View of the Network panel
    */
   manageHeaderColumns: 'Manage Header Columns',
   /**
-   *@description Placeholder text content in Network Manage Custom Headers View of the Network panel
+   * @description Placeholder text content in Network Manage Custom Headers View of the Network panel
    */
   noCustomHeaders: 'No custom headers',
   /**
-   *@description Text of add button in Network Manage Custom Headers View of the Network panel
+   * @description Text of add button in Network Manage Custom Headers View of the Network panel
    */
   addCustomHeader: 'Add custom header…',
   /**
-   *@description Text in Network Manage Custom Headers View of the Network panel
+   * @description Text in Network Manage Custom Headers View of the Network panel
    */
   headerName: 'Header Name',
 } as const;
@@ -52,7 +52,7 @@ export class NetworkManageCustomHeadersView extends UI.Widget.VBox implements UI
       addHeaderColumnCallback: (arg0: string) => boolean,
       changeHeaderColumnCallback: (arg0: string, arg1: string) => boolean,
       removeHeaderColumnCallback: (arg0: string) => boolean) {
-    super(true);
+    super({useShadowDom: true});
     this.registerRequiredCSS(networkManageCustomHeadersViewStyles);
 
     this.contentElement.createChild('div', 'header').textContent = i18nString(UIStrings.manageHeaderColumns);

package/front_end/panels/network/NetworkPanel.test.ts

@@ -5,7 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Logs from '../../models/logs/logs.js';
-import * as Trace from '../../models/trace/trace.js';
+import * as Tracing from '../../services/tracing/tracing.js';
 import {renderElementIntoDOM} from '../../testing/DOMHelpers.js';
 import {createTarget, registerNoopActions} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
@@ -35,7 +35,7 @@ describeWithMockConnection('NetworkPanel', () => {
       Common.Settings.Settings.instance().moduleSetting('network-record-film-strip-setting').set(true);
       const resourceTreeModel = target.model(SDK.ResourceTreeModel.ResourceTreeModel);
       assert.exists(resourceTreeModel);
-      const tracingManager = target.model(Trace.TracingManager.TracingManager);
+      const tracingManager = target.model(Tracing.TracingManager.TracingManager);
       assert.exists(tracingManager);
       const tracingStart = sinon.spy(tracingManager, 'start');
       resourceTreeModel.dispatchEventToListeners(SDK.ResourceTreeModel.Events.WillReloadPage);
@@ -47,7 +47,7 @@ describeWithMockConnection('NetworkPanel', () => {
       Common.Settings.Settings.instance().moduleSetting('network-record-film-strip-setting').set(true);
       const resourceTreeModel = target.model(SDK.ResourceTreeModel.ResourceTreeModel);
       assert.exists(resourceTreeModel);
-      const tracingManager = target.model(Trace.TracingManager.TracingManager);
+      const tracingManager = target.model(Tracing.TracingManager.TracingManager);
       assert.exists(tracingManager);
       resourceTreeModel.dispatchEventToListeners(SDK.ResourceTreeModel.Events.WillReloadPage);
       SDK.TargetManager.TargetManager.instance().setScopeTarget(inScope ? target : null);

package/front_end/panels/network/NetworkPanel.ts

@@ -45,13 +45,14 @@ import * as Logs from '../../models/logs/logs.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
+import * as Tracing from '../../services/tracing/tracing.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
 import * as Search from '../search/search.js';
 
-import {Events, type RequestActivatedEvent} from './NetworkDataGridNode.js';
+import {Events, type RequestActivatedEvent, RequestPanelBehavior} from './NetworkDataGridNode.js';
 import {NetworkItemView} from './NetworkItemView.js';
 import {NetworkLogView} from './NetworkLogView.js';
 import {NetworkOverview} from './NetworkOverview.js';
@@ -61,63 +62,63 @@ import {type NetworkTimeCalculator, NetworkTransferTimeCalculator} from './Netwo
 
 const UIStrings = {
   /**
-   *@description Text to close something
+   * @description Text to close something
    */
   close: 'Close',
   /**
-   *@description Title of a search bar or tool
+   * @description Title of a search bar or tool
    */
   search: 'Search',
   /**
-   *@description Tooltip text that appears on the setting to preserve log when hovering over the item
+   * @description Tooltip text that appears on the setting to preserve log when hovering over the item
    */
   doNotClearLogOnPageReload: 'Do not clear log on page reload / navigation',
   /**
-   *@description Text to preserve the log after refreshing
+   * @description Text to preserve the log after refreshing
    */
   preserveLog: 'Preserve log',
   /**
-   *@description Text to disable cache while DevTools is open
+   * @description Text to disable cache while DevTools is open
    */
   disableCacheWhileDevtoolsIsOpen: 'Disable cache while DevTools is open',
   /**
-   *@description Text in Network Config View of the Network panel
+   * @description Text in Network Config View of the Network panel
    */
   disableCache: 'Disable cache',
   /**
-   *@description Tooltip text that appears when hovering over the largeicon settings gear in show settings pane setting in network panel of the network panel
+   * @description Tooltip text that appears when hovering over the largeicon settings gear in show settings pane setting in network panel of the network panel
    */
   networkSettings: 'Network settings',
   /**
-   *@description Tooltip for expanding network request row setting
+   * @description Tooltip for expanding network request row setting
    */
   showMoreInformationInRequestRows: 'Show more information in request rows',
   /**
-   *@description Text in Network Panel used to toggle the "big request rows" setting.
+   * @description Text in Network Panel used to toggle the "big request rows" setting.
    */
   useLargeRequestRows: 'Big request rows',
   /**
-   *@description Tooltip text for network request overview setting
+   * @description Tooltip text for network request overview setting
    */
   showOverviewOfNetworkRequests: 'Show overview of network requests',
   /**
-   *@description Text in Network Panel used to show the overview for a given network request.
+   * @description Text in Network Panel used to show the overview for a given network request.
    */
   showOverview: 'Overview',
   /**
-   *@description Tooltip for group by frame network setting
+   * @description Tooltip for group by frame network setting
    */
   groupRequestsByTopLevelRequest: 'Group requests by top level request frame',
   /**
-   *@description Text for group by frame network setting
+   * @description Text for group by frame network setting
    */
   groupByFrame: 'Group by frame',
   /**
-   *@description Tooltip for capture screenshot network setting
+   * @description Tooltip for capture screenshot network setting
    */
   captureScreenshotsWhenLoadingA: 'Capture screenshots when loading a page',
   /**
-   *@description Text to take screenshots
+   * @description Text to take screenshots
    */
   captureScreenshots: 'Screenshots',
   /**
@@ -152,12 +153,12 @@ const UIStrings = {
    */
   exportHarWithSensitiveData: 'Export `HAR` (with sensitive data)…',
   /**
-   *@description Text for throttling the network
+   * @description Text for throttling the network
    */
   throttling: 'Throttling',
   /**
-   *@description Text in Network Panel to tell the user to reload the page to capture screenshots.
-   *@example {Ctrl + R} PH1
+   * @description Text in Network Panel to tell the user to reload the page to capture screenshots.
+   * @example {Ctrl + R} PH1
    */
   hitSToReloadAndCaptureFilmstrip: 'Press {PH1} to reload and capture filmstrip.',
   /**
@@ -174,11 +175,11 @@ const UIStrings = {
    */
   openInNetworkPanelMissingRequest: 'Open in Network panel (missing request)',
   /**
-   *@description Text in Network Panel that is displayed whilst the recording is in progress.
+   * @description Text in Network Panel that is displayed whilst the recording is in progress.
    */
   recordingFrames: 'Recording frames…',
   /**
-   *@description Text in Network Panel that is displayed when frames are being fetched.
+   * @description Text in Network Panel that is displayed when frames are being fetched.
    */
   fetchingFrames: 'Fetching frames…',
   /**
@@ -221,7 +222,7 @@ export class NetworkPanel extends UI.Panel.Panel implements
   private readonly closeButtonElement: UI.UIUtils.DevToolsCloseButton;
   private preserveLogSetting: Common.Settings.Setting<boolean>;
   recordLogSetting: Common.Settings.Setting<boolean>;
-  private readonly throttlingSelect: UI.Toolbar.ToolbarComboBox;
+  private readonly throttlingSelect: UI.Toolbar.ToolbarItem;
   private readonly displayScreenshotDelay: number;
 
   constructor(displayScreenshotDelay: number) {
@@ -407,7 +408,7 @@ export class NetworkPanel extends UI.Panel.Panel implements
     return UI.ViewManager.ViewManager.instance().showView('network');
   }
 
-  throttlingSelectForTest(): UI.Toolbar.ToolbarComboBox {
+  throttlingSelectForTest(): UI.Toolbar.ToolbarItem {
     return this.throttlingSelect;
   }
 
@@ -518,10 +519,12 @@ export class NetworkPanel extends UI.Panel.Panel implements
     updateShowOptionsToGenerateHarWithSensitiveData();
   }
 
-  private createThrottlingConditionsSelect(): UI.Toolbar.ToolbarComboBox {
-    const toolbarItem = new UI.Toolbar.ToolbarComboBox(null, i18nString(UIStrings.throttling));
+  private createThrottlingConditionsSelect(): UI.Toolbar.ToolbarItem {
+    const toolbarItem = new UI.Toolbar.ToolbarItem(document.createElement('div'));
     toolbarItem.setMaxWidth(160);
-    MobileThrottling.ThrottlingManager.throttlingManager().createNetworkThrottlingSelector(toolbarItem.element);
+
+    MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelect.createForGlobalConditions(
+        toolbarItem.element, i18nString(UIStrings.throttling));
     return toolbarItem;
   }
 
@@ -691,9 +694,9 @@ export class NetworkPanel extends UI.Panel.Panel implements
 
   private onRequestActivated(event: Common.EventTarget.EventTargetEvent<RequestActivatedEvent>): void {
     const {showPanel, tab, takeFocus} = event.data;
-    if (showPanel) {
+    if (showPanel === RequestPanelBehavior.ShowPanel) {
       this.showRequestPanel(tab, takeFocus);
-    } else {
+    } else if (showPanel === RequestPanelBehavior.HidePanel) {
       this.hideRequestPanel();
     }
   }
@@ -882,26 +885,24 @@ export class NetworkLogWithFilterRevealer implements
   }
 }
 
-export class FilmStripRecorder implements Trace.TracingManager.TracingManagerClient {
-  private tracingManager: Trace.TracingManager.TracingManager|null;
-  private resourceTreeModel: SDK.ResourceTreeModel.ResourceTreeModel|null;
-  private readonly timeCalculator: NetworkTimeCalculator;
-  private readonly filmStripView: PerfUI.FilmStripView.FilmStripView;
-  private callback: ((filmStrip: Trace.Extras.FilmStrip.Data) => void)|null;
+export class FilmStripRecorder implements Tracing.TracingManager.TracingManagerClient {
+  #tracingManager: Tracing.TracingManager.TracingManager|null = null;
+  #resourceTreeModel: SDK.ResourceTreeModel.ResourceTreeModel|null = null;
+  readonly #timeCalculator: NetworkTimeCalculator;
+  readonly #filmStripView: PerfUI.FilmStripView.FilmStripView;
+  #callback: ((filmStrip: Trace.Extras.FilmStrip.Data) => void)|null = null;
   // Used to fetch screenshots of the page load and show them in the panel.
-  #traceEngine: Trace.TraceModel.Model;
+  #traceEngine: Trace.TraceModel.Model = Trace.TraceModel.Model.createWithSubsetOfHandlers({
+    Screenshots: Trace.Handlers.ModelHandlers.Screenshots,
+  });
   #collectedTraceEvents: Trace.Types.Events.Event[] = [];
 
-  constructor(timeCalculator: NetworkTimeCalculator, filmStripView: PerfUI.FilmStripView.FilmStripView) {
-    this.#traceEngine = Trace.TraceModel.Model.createWithSubsetOfHandlers({
-      Screenshots: Trace.Handlers.ModelHandlers.Screenshots,
-    });
-
-    this.tracingManager = null;
-    this.resourceTreeModel = null;
-    this.timeCalculator = timeCalculator;
-    this.filmStripView = filmStripView;
-    this.callback = null;
+  constructor(
+      timeCalculator: NetworkTimeCalculator,
+      filmStripView: PerfUI.FilmStripView.FilmStripView,
+  ) {
+    this.#timeCalculator = timeCalculator;
+    this.#filmStripView = filmStripView;
   }
 
   traceEventsCollected(events: Trace.Types.Events.Event[]): void {
@@ -909,10 +910,10 @@ export class FilmStripRecorder implements Trace.TracingManager.TracingManagerCli
   }
 
   async tracingComplete(): Promise<void> {
-    if (!this.tracingManager) {
+    if (!this.#tracingManager) {
       return;
     }
-    this.tracingManager = null;
+    this.#tracingManager = null;
     await this.#traceEngine.parse(this.#collectedTraceEvents);
 
     const data = this.#traceEngine.parsedTrace(this.#traceEngine.size() - 1) as
@@ -920,23 +921,23 @@ export class FilmStripRecorder implements Trace.TracingManager.TracingManagerCli
     if (!data) {
       return;
     }
-    const zeroTimeInSeconds = Trace.Types.Timing.Seconds(this.timeCalculator.minimumBoundary());
+    const zeroTimeInSeconds = Trace.Types.Timing.Seconds(this.#timeCalculator.minimumBoundary());
     const filmStrip =
         Trace.Extras.FilmStrip.fromParsedTrace(data, Trace.Helpers.Timing.secondsToMicro(zeroTimeInSeconds));
 
-    if (this.callback) {
-      this.callback(filmStrip);
+    if (this.#callback) {
+      this.#callback(filmStrip);
     }
-    this.callback = null;
+    this.#callback = null;
     // Now we have created the film strip and stored the data, we need to reset
     // the trace processor so that it is ready to record again if the user
     // refreshes the page.
     this.#traceEngine.resetProcessor();
 
-    if (this.resourceTreeModel) {
-      this.resourceTreeModel.resumeReload();
+    if (this.#resourceTreeModel) {
+      this.#resourceTreeModel.resumeReload();
     }
-    this.resourceTreeModel = null;
+    this.#resourceTreeModel = null;
   }
 
   tracingBufferUsage(): void {
@@ -947,36 +948,36 @@ export class FilmStripRecorder implements Trace.TracingManager.TracingManagerCli
 
   startRecording(): void {
     this.#collectedTraceEvents = [];
-    this.filmStripView.reset();
-    this.filmStripView.setStatusText(i18nString(UIStrings.recordingFrames));
+    this.#filmStripView.reset();
+    this.#filmStripView.setStatusText(i18nString(UIStrings.recordingFrames));
     const tracingManager =
-        SDK.TargetManager.TargetManager.instance().scopeTarget()?.model(Trace.TracingManager.TracingManager);
-    if (this.tracingManager || !tracingManager) {
+        SDK.TargetManager.TargetManager.instance().scopeTarget()?.model(Tracing.TracingManager.TracingManager);
+    if (this.#tracingManager || !tracingManager) {
       return;
     }
 
-    this.tracingManager = tracingManager;
-    this.resourceTreeModel = this.tracingManager.target().model(SDK.ResourceTreeModel.ResourceTreeModel);
-    void this.tracingManager.start(this, '-*,disabled-by-default-devtools.screenshot');
+    this.#tracingManager = tracingManager;
+    this.#resourceTreeModel = this.#tracingManager.target().model(SDK.ResourceTreeModel.ResourceTreeModel);
+    void this.#tracingManager.start(this, '-*,disabled-by-default-devtools.screenshot');
 
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.FilmStripStartedRecording);
   }
 
   isRecording(): boolean {
-    return Boolean(this.tracingManager);
+    return Boolean(this.#tracingManager);
   }
 
   stopRecording(callback: (filmStrip: Trace.Extras.FilmStrip.Data) => void): void {
-    if (!this.tracingManager) {
+    if (!this.#tracingManager) {
       return;
     }
 
-    this.tracingManager.stop();
-    if (this.resourceTreeModel) {
-      this.resourceTreeModel.suspendReload();
+    this.#tracingManager.stop();
+    if (this.#resourceTreeModel) {
+      this.#resourceTreeModel.suspendReload();
     }
-    this.callback = callback;
-    this.filmStripView.setStatusText(i18nString(UIStrings.fetchingFrames));
+    this.#callback = callback;
+    this.#filmStripView.setStatusText(i18nString(UIStrings.fetchingFrames));
   }
 }
 

package/front_end/panels/network/NetworkSearchScope.ts

@@ -14,7 +14,7 @@ import type * as Search from '../search/search.js';
 
 const UIStrings = {
   /**
-   *@description Text for web URLs
+   * @description Text for web URLs
    */
   url: 'URL',
 } as const;