chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

package/front_end/panels/network/NetworkLogView.ts

@@ -32,6 +32,8 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+import '../../ui/legacy/legacy.js';
+
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -508,6 +510,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
       filterBar: UI.FilterBar.FilterBar, progressBarContainer: Element,
       networkLogLargeRowsSetting: Common.Settings.Setting<boolean>) {
     super();
+    this.registerRequiredCSS(networkLogViewStyles);
     this.setMinimumSize(50, 64);
 
     this.element.id = 'network-container';
@@ -664,8 +667,8 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     filterBar.filterButton().addEventListener(
         UI.Toolbar.ToolbarButton.Events.CLICK, this.dataGrid.scheduleUpdate.bind(this.dataGrid, true /* isFromUser */));
 
-    this.summaryToolbarInternal = new UI.Toolbar.Toolbar('network-summary-bar', this.element);
-    this.summaryToolbarInternal.element.setAttribute('role', 'status');
+    this.summaryToolbarInternal = this.element.createChild('devtools-toolbar', 'network-summary-bar');
+    this.summaryToolbarInternal.setAttribute('role', 'status');
 
     new UI.DropTarget.DropTarget(
         this.element, [UI.DropTarget.Type.File], i18nString(UIStrings.dropHarFilesHere), this.handleDrop.bind(this));
@@ -1120,7 +1123,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
 
   private setHidden(value: boolean): void {
     this.columnsInternal.setHidden(value);
-    UI.ARIAUtils.setHidden(this.summaryToolbarInternal.element, value);
+    UI.ARIAUtils.setHidden(this.summaryToolbarInternal, value);
   }
 
   override elementsToRestoreScrollPositionsFor(): Element[] {
@@ -1405,8 +1408,8 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.refreshIfNeeded();
-    this.registerCSSFiles([networkLogViewStyles]);
     this.columnsInternal.wasShown();
   }
 
@@ -1724,7 +1727,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     if (request) {
       if (UI.ActionRegistry.ActionRegistry.instance().hasAction('drjones.network-panel-context')) {
         UI.Context.Context.instance().setFlavor(SDK.NetworkRequest.NetworkRequest, request);
-        contextMenu.headerSection().appendAction(
+        contextMenu.footerSection().appendAction(
             'drjones.network-panel-context',
         );
       }
@@ -2045,7 +2048,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     try {
       new URL(url);
       return true;
-    } catch (e) {
+    } catch {
       return false;
     }
   }

package/front_end/panels/network/NetworkManageCustomHeadersView.ts

@@ -52,11 +52,12 @@ export class NetworkManageCustomHeadersView extends UI.Widget.VBox implements UI
       changeHeaderColumnCallback: (arg0: string, arg1: string) => boolean,
       removeHeaderColumnCallback: (arg0: string) => boolean) {
     super(true);
+    this.registerRequiredCSS(networkManageCustomHeadersViewStyles);
 
-    this.contentElement.classList.add('custom-headers-wrapper');
     this.contentElement.createChild('div', 'header').textContent = i18nString(UIStrings.manageHeaderColumns);
 
     this.list = new UI.ListWidget.ListWidget(this);
+    this.list.registerRequiredCSS(networkManageCustomHeadersViewStyles);
     this.list.element.classList.add('custom-headers-list');
 
     const placeholder = document.createElement('div');
@@ -81,9 +82,8 @@ export class NetworkManageCustomHeadersView extends UI.Widget.VBox implements UI
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.headersUpdated();
-    this.list.registerCSSFiles([networkManageCustomHeadersViewStyles]);
-    this.registerCSSFiles([networkManageCustomHeadersViewStyles]);
   }
 
   private headersUpdated(): void {

package/front_end/panels/network/NetworkOverview.ts

@@ -147,7 +147,7 @@ export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOvervie
       }
 
       calculator.setBounds(
-          calculator.minimumBoundary(), Trace.Types.Timing.MilliSeconds(calculator.minimumBoundary() + this.span));
+          calculator.minimumBoundary(), Trace.Types.Timing.Milli(calculator.minimumBoundary() + this.span));
 
       this.lastBoundary = new NetworkTimeBoundary(calculator.minimumBoundary(), calculator.maximumBoundary());
     }
@@ -173,8 +173,8 @@ export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOvervie
         if (endTime === Number.MAX_VALUE) {
           endTime = calculator.maximumBoundary();
         }
-        const startX = calculator.computePosition(Trace.Types.Timing.MilliSeconds(startTime));
-        const endX = calculator.computePosition(Trace.Types.Timing.MilliSeconds(endTime)) + 1;
+        const startX = calculator.computePosition(Trace.Types.Timing.Milli(startTime));
+        const endX = calculator.computePosition(Trace.Types.Timing.Milli(endTime)) + 1;
         context.fillRect(startX, y, Math.max(endX - startX, MIN_BAND_WIDTH), BAND_HEIGHT);
         context.strokeRect(startX, y, Math.max(endX - startX, MIN_BAND_WIDTH), BAND_HEIGHT);
       }
@@ -235,8 +235,8 @@ export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOvervie
 
       // The network overview works in seconds, but the calcululator deals in
       // milliseconds, hence the multiplication by 1000.
-      const start = Trace.Types.Timing.MilliSeconds(timeRanges[0].start * 1000);
-      const end = Trace.Types.Timing.MilliSeconds(timeRanges[0].end * 1000);
+      const start = Trace.Types.Timing.Milli(timeRanges[0].start * 1000);
+      const end = Trace.Types.Timing.Milli(timeRanges[0].end * 1000);
       context.fillRect(
           calculator.computePosition(start) - borderSize, y - size / 2 - borderSize,
           calculator.computePosition(end) - calculator.computePosition(start) + 1 + 2 * borderSize, size * borderSize);
@@ -249,10 +249,10 @@ export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOvervie
               ThemeSupport.ThemeSupport.instance().getComputedValue(RequestTimeRangeNameToColor[type]);
           context.lineWidth = size;
 
-          const start = Trace.Types.Timing.MilliSeconds(timeRanges[j].start * 1000);
-          const end = Trace.Types.Timing.MilliSeconds(timeRanges[j].end * 1000);
-          context.moveTo(calculator.computePosition(start) - 0, y);
-          context.lineTo(calculator.computePosition(end) + 1, y);
+          const start = Trace.Types.Timing.Milli(timeRanges[j].start * 1000);
+          const end = Trace.Types.Timing.Milli(timeRanges[j].end * 1000);
+          context.moveTo(Number(calculator.computePosition(start)) - 0, y);
+          context.lineTo(Number(calculator.computePosition(end)) + 1, y);
           context.stroke();
         }
       }
@@ -263,7 +263,7 @@ export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOvervie
     context.beginPath();
     context.strokeStyle = ThemeSupport.ThemeSupport.instance().getComputedValue(NetworkLogView.getDCLEventColor());
     for (let i = this.domContentLoadedEvents.length - 1; i >= 0; --i) {
-      const position = calculator.computePosition(Trace.Types.Timing.MilliSeconds(this.domContentLoadedEvents[i]));
+      const position = calculator.computePosition(Trace.Types.Timing.Milli(this.domContentLoadedEvents[i]));
       const x = Math.round(position) + 0.5;
       context.moveTo(x, 0);
       context.lineTo(x, height);
@@ -273,7 +273,7 @@ export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOvervie
     context.beginPath();
     context.strokeStyle = ThemeSupport.ThemeSupport.instance().getComputedValue(NetworkLogView.getLoadEventColor());
     for (let i = this.loadEvents.length - 1; i >= 0; --i) {
-      const position = calculator.computePosition(Trace.Types.Timing.MilliSeconds(this.loadEvents[i]));
+      const position = calculator.computePosition(Trace.Types.Timing.Milli(this.loadEvents[i]));
       const x = Math.round(position) + 0.5;
       context.moveTo(x, 0);
       context.lineTo(x, height);
@@ -284,7 +284,7 @@ export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOvervie
       context.lineWidth = 2;
       context.beginPath();
       context.strokeStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--network-frame-divider-color');
-      const timeInMilliseconds = Trace.Types.Timing.MilliSeconds(this.selectedFilmStripTime);
+      const timeInMilliseconds = Trace.Types.Timing.Milli(this.selectedFilmStripTime);
       const x = Math.round(calculator.computePosition(timeInMilliseconds));
       context.moveTo(x, 0);
       context.lineTo(x, height);

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

@@ -93,8 +93,7 @@ describeWithMockConnection('NetworkPanel', () => {
 
   it('clears network log on button click', async () => {
     const networkLogResetSpy = sinon.spy(Logs.NetworkLog.NetworkLog.instance(), 'reset');
-    const toolbar = networkPanel.element.querySelector('.network-toolbar-container .toolbar');
-    const button = toolbar!.shadowRoot!.querySelector('[aria-label="Clear network log"]');
+    const button = networkPanel.element.querySelector('[aria-label="Clear network log"]');
     assert.instanceOf(button, HTMLElement);
     button.click();
     await RenderCoordinator.done({waitForWork: true});

package/front_end/panels/network/NetworkPanel.ts

@@ -32,12 +32,13 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+import '../../ui/legacy/legacy.js';
+
 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 Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as Bindings from '../../models/bindings/bindings.js';
 import type * as Extensions from '../../models/extensions/extensions.js';
 import * as Logs from '../../models/logs/logs.js';
 import * as Trace from '../../models/trace/trace.js';
@@ -48,7 +49,6 @@ 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 * as TimelineUtils from '../timeline/utils/utils.js';
 
 import {Events, type RequestActivatedEvent} from './NetworkDataGridNode.js';
 import {NetworkItemView} from './NetworkItemView.js';
@@ -205,7 +205,6 @@ export class NetworkPanel extends UI.Panel.Panel implements
   private readonly panelToolbar: UI.Toolbar.Toolbar;
   private readonly rightToolbar: UI.Toolbar.Toolbar;
   private readonly filterBar: UI.FilterBar.FilterBar;
-  private readonly settingsPane: UI.Widget.HBox;
   private showSettingsPaneSetting: Common.Settings.Setting<boolean>;
   private readonly filmStripPlaceholderElement: HTMLElement;
   private readonly overviewPane: PerfUI.TimelineOverviewPane.TimelineOverviewPane;
@@ -226,6 +225,7 @@ export class NetworkPanel extends UI.Panel.Panel implements
 
   constructor(displayScreenshotDelay: number) {
     super('network');
+    this.registerRequiredCSS(networkPanelStyles);
 
     this.displayScreenshotDelay = displayScreenshotDelay;
     this.networkLogShowOverviewSetting =
@@ -243,22 +243,40 @@ export class NetworkPanel extends UI.Panel.Panel implements
     const panel = new UI.Widget.VBox();
 
     const networkToolbarContainer = panel.contentElement.createChild('div', 'network-toolbar-container');
-    this.panelToolbar = new UI.Toolbar.Toolbar('', networkToolbarContainer);
-    this.panelToolbar.makeWrappable(true);
-    this.panelToolbar.element.setAttribute('jslog', `${VisualLogging.toolbar('network-main')}`);
-    this.rightToolbar = new UI.Toolbar.Toolbar('', networkToolbarContainer);
+    networkToolbarContainer.role = 'toolbar';
+    this.panelToolbar = networkToolbarContainer.createChild('devtools-toolbar');
+    this.panelToolbar.role = 'presentation';
+    this.panelToolbar.wrappable = true;
+    this.panelToolbar.setAttribute('jslog', `${VisualLogging.toolbar('network-main')}`);
+    this.rightToolbar = networkToolbarContainer.createChild('devtools-toolbar');
+    this.rightToolbar.role = 'presentation';
 
     this.filterBar = new UI.FilterBar.FilterBar('network-panel', true);
     this.filterBar.show(panel.contentElement);
     this.filterBar.addEventListener(UI.FilterBar.FilterBarEvents.CHANGED, this.handleFilterChanged.bind(this));
 
-    this.settingsPane = new UI.Widget.HBox();
-    this.settingsPane.element.classList.add('network-settings-pane');
-    this.settingsPane.show(panel.contentElement);
+    const settingsPane = panel.contentElement.createChild('div', 'network-settings-pane');
+    settingsPane.append(
+        UI.SettingsUI.createSettingCheckbox(
+            i18nString(UIStrings.useLargeRequestRows), this.networkLogLargeRowsSetting,
+            i18nString(UIStrings.showMoreInformationInRequestRows)),
+        UI.SettingsUI.createSettingCheckbox(
+            i18nString(UIStrings.groupByFrame),
+            Common.Settings.Settings.instance().moduleSetting('network.group-by-frame'),
+            i18nString(UIStrings.groupRequestsByTopLevelRequest)),
+        UI.SettingsUI.createSettingCheckbox(
+            i18nString(UIStrings.showOverview), this.networkLogShowOverviewSetting,
+            i18nString(UIStrings.showOverviewOfNetworkRequests)),
+        UI.SettingsUI.createSettingCheckbox(
+            i18nString(UIStrings.captureScreenshots), this.networkRecordFilmStripSetting,
+            i18nString(UIStrings.captureScreenshotsWhenLoadingA)),
+
+    );
     this.showSettingsPaneSetting =
         Common.Settings.Settings.instance().createSetting('network-show-settings-toolbar', false);
-    this.showSettingsPaneSetting.addChangeListener(this.updateSettingsPaneVisibility.bind(this));
-    this.updateSettingsPaneVisibility();
+    settingsPane.classList.toggle('hidden', !this.showSettingsPaneSetting.get());
+    this.showSettingsPaneSetting.addChangeListener(
+        () => settingsPane.classList.toggle('hidden', !this.showSettingsPaneSetting.get()));
 
     this.filmStripPlaceholderElement = panel.contentElement.createChild('div', 'network-film-strip-placeholder');
 
@@ -429,7 +447,7 @@ export class NetworkPanel extends UI.Panel.Panel implements
       }
     }
     this.panelToolbar.appendToolbarItem(UI.Toolbar.Toolbar.createActionButton(this.toggleRecordAction));
-    this.panelToolbar.appendToolbarItem(UI.Toolbar.Toolbar.createActionButtonForId('network.clear'));
+    this.panelToolbar.appendToolbarItem(UI.Toolbar.Toolbar.createActionButton('network.clear'));
     this.panelToolbar.appendSeparator();
 
     this.panelToolbar.appendToolbarItem(this.filterBar.filterButton());
@@ -465,24 +483,6 @@ export class NetworkPanel extends UI.Panel.Panel implements
         this.showSettingsPaneSetting, 'gear', i18nString(UIStrings.networkSettings), 'gear-filled',
         'network-settings'));
 
-    const settingsToolbarLeft = new UI.Toolbar.Toolbar('', this.settingsPane.element);
-    settingsToolbarLeft.makeVertical();
-    settingsToolbarLeft.appendToolbarItem(new UI.Toolbar.ToolbarSettingCheckbox(
-        this.networkLogLargeRowsSetting, i18nString(UIStrings.showMoreInformationInRequestRows),
-        i18nString(UIStrings.useLargeRequestRows)));
-    settingsToolbarLeft.appendToolbarItem(new UI.Toolbar.ToolbarSettingCheckbox(
-        this.networkLogShowOverviewSetting, i18nString(UIStrings.showOverviewOfNetworkRequests),
-        i18nString(UIStrings.showOverview)));
-
-    const settingsToolbarRight = new UI.Toolbar.Toolbar('', this.settingsPane.element);
-    settingsToolbarRight.makeVertical();
-    settingsToolbarRight.appendToolbarItem(new UI.Toolbar.ToolbarSettingCheckbox(
-        Common.Settings.Settings.instance().moduleSetting('network.group-by-frame'),
-        i18nString(UIStrings.groupRequestsByTopLevelRequest), i18nString(UIStrings.groupByFrame)));
-    settingsToolbarRight.appendToolbarItem(new UI.Toolbar.ToolbarSettingCheckbox(
-        this.networkRecordFilmStripSetting, i18nString(UIStrings.captureScreenshotsWhenLoadingA),
-        i18nString(UIStrings.captureScreenshots)));
-
     const exportHarContextMenu = (contextMenu: UI.ContextMenu.ContextMenu): void => {
       contextMenu.defaultSection().appendItem(
           i18nString(UIStrings.exportHarSanitized),
@@ -524,14 +524,10 @@ export class NetworkPanel extends UI.Panel.Panel implements
     updateShowOptionsToGenerateHarWithSensitiveData();
   }
 
-  private updateSettingsPaneVisibility(): void {
-    this.settingsPane.element.classList.toggle('hidden', !this.showSettingsPaneSetting.get());
-  }
-
   private createThrottlingConditionsSelect(): UI.Toolbar.ToolbarComboBox {
     const toolbarItem = new UI.Toolbar.ToolbarComboBox(null, i18nString(UIStrings.throttling));
     toolbarItem.setMaxWidth(160);
-    MobileThrottling.ThrottlingManager.throttlingManager().createNetworkThrottlingSelector(toolbarItem.selectElement());
+    MobileThrottling.ThrottlingManager.throttlingManager().createNetworkThrottlingSelector(toolbarItem.element);
     return toolbarItem;
   }
 
@@ -553,7 +549,7 @@ export class NetworkPanel extends UI.Panel.Panel implements
     }
     const timestamps = filmStrip.frames.map(frame => {
       // The network view works in seconds.
-      return Trace.Helpers.Timing.microSecondsToSeconds(frame.screenshotEvent.ts);
+      return Trace.Helpers.Timing.microToSeconds(frame.screenshotEvent.ts);
     });
 
     this.networkLogView.addFilmStripFrames(timestamps);
@@ -651,8 +647,8 @@ export class NetworkPanel extends UI.Panel.Panel implements
   }
 
   override wasShown(): void {
+    super.wasShown();
     UI.Context.Context.instance().setFlavor(NetworkPanel, this);
-    this.registerCSSFiles([networkPanelStyles]);
 
     // Record the network tool load time after the panel has loaded.
     Host.userMetrics.panelLoaded('network', 'DevTools.Launch.Network');
@@ -660,6 +656,7 @@ export class NetworkPanel extends UI.Panel.Panel implements
 
   override willHide(): void {
     UI.Context.Context.instance().setFlavor(NetworkPanel, null);
+    super.willHide();
   }
 
   revealAndHighlightRequest(request: SDK.NetworkRequest.NetworkRequest): void {
@@ -770,7 +767,7 @@ export class NetworkPanel extends UI.Panel.Panel implements
   appendApplicableItems(
       this: NetworkPanel, event: Event, contextMenu: UI.ContextMenu.ContextMenu,
       target: SDK.NetworkRequest.NetworkRequest|SDK.Resource.Resource|Workspace.UISourceCode.UISourceCode|
-      TimelineUtils.NetworkRequest.TimelineNetworkRequest): void {
+      SDK.TraceObject.RevealableNetworkRequest): void {
     const appendRevealItem = (request: SDK.NetworkRequest.NetworkRequest): void => {
       contextMenu.revealSection().appendItem(
           i18nString(UIStrings.openInNetworkPanel),
@@ -786,14 +783,14 @@ export class NetworkPanel extends UI.Panel.Panel implements
         jslogContext: 'reveal-in-network',
       });
     };
-    const appendRevealItemAndSelect = (request: TimelineUtils.NetworkRequest.TimelineNetworkRequest): void => {
+    const appendRevealItemAndSelect = (request: SDK.TraceObject.RevealableNetworkRequest): void => {
       contextMenu.revealSection().appendItem(
           i18nString(UIStrings.openInNetworkPanel),
           () => UI.ViewManager.ViewManager.instance()
                     .showView('network')
                     .then(this.networkLogView.resetFilter.bind(this.networkLogView))
                     .then(this.selectAndActivateRequest.bind(
-                        this, request.request, NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT,
+                        this, request.networkRequest, NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT,
                         /* FilterOptions= */ undefined)),
           {jslogContext: 'timeline.reveal-in-network'});
     };
@@ -811,7 +808,7 @@ export class NetworkPanel extends UI.Panel.Panel implements
       return;
     }
     if (target instanceof Workspace.UISourceCode.UISourceCode) {
-      const resource = Bindings.ResourceUtils.resourceForURL(target.url());
+      const resource = SDK.ResourceTreeModel.ResourceTreeModel.resourceForURL(target.url());
       if (resource && resource.request) {
         appendRevealItem(resource.request);
       } else {
@@ -819,7 +816,7 @@ export class NetworkPanel extends UI.Panel.Panel implements
       }
       return;
     }
-    if (target instanceof TimelineUtils.NetworkRequest.TimelineNetworkRequest) {
+    if (target instanceof SDK.TraceObject.RevealableNetworkRequest) {
       appendRevealItemAndSelect(target);
       return;
     }
@@ -853,8 +850,8 @@ export class NetworkPanel extends UI.Panel.Panel implements
     this.calculator.updateBoundaries(request);
     // FIXME: Unify all time units across the frontend!
     this.overviewPane.setBounds(
-        Trace.Types.Timing.MilliSeconds(this.calculator.minimumBoundary() * 1000),
-        Trace.Types.Timing.MilliSeconds(this.calculator.maximumBoundary() * 1000));
+        Trace.Types.Timing.Milli(this.calculator.minimumBoundary() * 1000),
+        Trace.Types.Timing.Milli(this.calculator.maximumBoundary() * 1000));
     this.networkOverview.updateRequest(request);
   }
 
@@ -934,7 +931,7 @@ export class FilmStripRecorder implements Trace.TracingManager.TracingManagerCli
     }
     const zeroTimeInSeconds = Trace.Types.Timing.Seconds(this.timeCalculator.minimumBoundary());
     const filmStrip =
-        Trace.Extras.FilmStrip.fromParsedTrace(data, Trace.Helpers.Timing.secondsToMicroseconds(zeroTimeInSeconds));
+        Trace.Extras.FilmStrip.fromParsedTrace(data, Trace.Helpers.Timing.secondsToMicro(zeroTimeInSeconds));
 
     if (this.callback) {
       this.callback(filmStrip);

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

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-import type * as Platform from '../../core/platform/platform.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Logs from '../../models/logs/logs.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
@@ -13,13 +13,14 @@ import type * as Search from '../search/search.js';
 
 import * as Network from './network.js';
 
+const {urlString} = Platform.DevToolsPath;
+
 describeWithLocale('NetworkSearchScope', () => {
   let scope: Network.NetworkSearchScope.NetworkSearchScope;
 
   beforeEach(() => {
     const fakeRequest1 = SDK.NetworkRequest.NetworkRequest.createWithoutBackendRequest(
-        'fakeId1', 'http://example.com/main.js' as Platform.DevToolsPath.UrlString,
-        'http://example.com/index.html' as Platform.DevToolsPath.UrlString, null);
+        'fakeId1', urlString`http://example.com/main.js`, urlString`http://example.com/index.html`, null);
     fakeRequest1.setRequestHeaders([{name: 'fooRequestHeader', value: 'value1'}]);
     fakeRequest1.responseHeaders = [{name: 'fooResponseHeader', value: 'foo value'}];
     fakeRequest1.setResourceType(Common.ResourceType.resourceTypes.Script);
@@ -29,8 +30,7 @@ describeWithLocale('NetworkSearchScope', () => {
             'This is the response body of request 1.\nAnd a second line.\n', false, fakeRequest1.mimeType));
 
     const fakeRequest2 = SDK.NetworkRequest.NetworkRequest.createWithoutBackendRequest(
-        'fakeId1', 'http://example.com/bundle.min.js' as Platform.DevToolsPath.UrlString,
-        'http://example.com/index.html' as Platform.DevToolsPath.UrlString, null);
+        'fakeId1', urlString`http://example.com/bundle.min.js`, urlString`http://example.com/index.html`, null);
     fakeRequest2.setRequestHeaders([{name: 'barRequestHeader', value: 'value2'}]);
     fakeRequest2.responseHeaders = [{name: 'barResponseHeader', value: 'bar value'}];
     fakeRequest2.setResourceType(Common.ResourceType.resourceTypes.Script);

package/front_end/panels/network/NetworkTimeCalculator.ts

@@ -302,9 +302,9 @@ export const enum Events {
   BOUNDARIES_CHANGED = 'BoundariesChanged',
 }
 
-export type EventTypes = {
-  [Events.BOUNDARIES_CHANGED]: void,
-};
+export interface EventTypes {
+  [Events.BOUNDARIES_CHANGED]: void;
+}
 
 export class NetworkTransferTimeCalculator extends NetworkTimeCalculator {
   constructor() {

package/front_end/panels/network/NetworkWaterfallColumn.ts

@@ -48,6 +48,7 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
   constructor(calculator: NetworkTimeCalculator) {
     // TODO(allada) Make this a shadowDOM when the NetworkWaterfallColumn gets moved into NetworkLogViewColumns.
     super(false);
+    this.registerRequiredCSS(networkWaterfallColumnStyles);
 
     this.canvas = this.contentElement.createChild('canvas');
     this.canvas.tabIndex = -1;
@@ -207,11 +208,12 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
 
   override willHide(): void {
     this.popoverHelper.hidePopover();
+    super.willHide();
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.update();
-    this.registerCSSFiles([networkWaterfallColumnStyles]);
   }
 
   private onMouseMove(event: MouseEvent): void {
@@ -279,7 +281,7 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
       show: (popover: UI.GlassPane.GlassPane) => {
         const content =
             RequestTimingView.createTimingTable((request as SDK.NetworkRequest.NetworkRequest), this.calculator);
-        popover.registerCSSFiles([networkingTimingTableStyles]);
+        popover.registerRequiredCSS(networkingTimingTableStyles);
         popover.contentElement.appendChild(content);
         return Promise.resolve(true);
       },
@@ -339,7 +341,7 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
     void RenderCoordinator.write('NetworkWaterfallColumn.render', () => this.update());
   }
 
-  override update(scrollTop?: number, eventDividers?: Map<string, number[]>, nodes?: NetworkNode[]): void {
+  update(scrollTop?: number, eventDividers?: Map<string, number[]>, nodes?: NetworkNode[]): void {
     if (scrollTop !== undefined && this.scrollTop !== scrollTop) {
       this.popoverHelper.hidePopover();
       this.scrollTop = scrollTop;

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

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Platform from '../../core/platform/platform.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';
@@ -11,6 +11,8 @@ import {describeWithMockConnection} from '../../testing/MockConnection.js';
 
 import * as Network from './network.js';
 
+const {urlString} = Platform.DevToolsPath;
+
 function renderCookiesView(request: SDK.NetworkRequest.NetworkRequest): Network.RequestCookiesView.RequestCookiesView {
   const component = new Network.RequestCookiesView.RequestCookiesView(request);
   const div = document.createElement('div');
@@ -26,9 +28,8 @@ describeWithMockConnection('RequestCookiesView', () => {
   });
   it('show a message when request site has cookies in another partition', () => {
     const request = SDK.NetworkRequest.NetworkRequest.create(
-        'requestId' as Protocol.Network.RequestId,
-        'https://www.example.com/foo.html' as Platform.DevToolsPath.UrlString, '' as Platform.DevToolsPath.UrlString,
-        null, null, null);
+        'requestId' as Protocol.Network.RequestId, urlString`https://www.example.com/foo.html`, urlString``, null, null,
+        null);
     const component = renderCookiesView(request);
     const message = component.element.querySelector('.site-has-cookies-in-other-partition');
     assert.exists(message);

package/front_end/panels/network/RequestCookiesView.ts

@@ -112,6 +112,7 @@ export class RequestCookiesView extends UI.Widget.Widget {
 
   constructor(request: SDK.NetworkRequest.NetworkRequest) {
     super();
+    this.registerRequiredCSS(requestCookiesViewStyles);
 
     this.element.classList.add('request-cookies-view');
     this.element.setAttribute('jslog', `${VisualLogging.pane('cookies').track({resize: true})}`);
@@ -120,7 +121,7 @@ export class RequestCookiesView extends UI.Widget.Widget {
     this.showFilteredOutCookiesSetting = Common.Settings.Settings.instance().createSetting(
         'show-filtered-out-request-cookies', /* defaultValue */ false);
 
-    this.emptyWidget = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.thisRequestHasNoCookies));
+    this.emptyWidget = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.thisRequestHasNoCookies), '');
     this.emptyWidget.show(this.element);
 
     this.requestCookiesTitle = this.element.createChild('div');
@@ -128,10 +129,8 @@ export class RequestCookiesView extends UI.Widget.Widget {
     titleText.textContent = i18nString(UIStrings.requestCookies);
     UI.Tooltip.Tooltip.install(titleText, i18nString(UIStrings.cookiesThatWereSentToTheServerIn));
 
-    const requestCookiesCheckbox =
-        (UI.SettingsUI.createSettingCheckbox(
-             i18nString(UIStrings.showFilteredOutRequestCookies), this.showFilteredOutCookiesSetting, true) as
-         UI.UIUtils.CheckboxLabel);
+    const requestCookiesCheckbox = UI.SettingsUI.createSettingCheckbox(
+        i18nString(UIStrings.showFilteredOutRequestCookies), this.showFilteredOutCookiesSetting);
     requestCookiesCheckbox.checkboxElement.addEventListener('change', () => {
       this.refreshRequestCookiesView();
     });
@@ -335,7 +334,6 @@ export class RequestCookiesView extends UI.Widget.Widget {
 
   override wasShown(): void {
     super.wasShown();
-    this.registerCSSFiles([requestCookiesViewStyles]);
     this.request.addEventListener(
         SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.refreshRequestCookiesView, this);
     this.request.addEventListener(

package/front_end/panels/network/RequestHTMLView.ts

@@ -37,6 +37,7 @@ export class RequestHTMLView extends UI.Widget.VBox {
   private readonly dataURL: string;
   private constructor(dataURL: string) {
     super(true);
+    this.registerRequiredCSS(requestHTMLViewStyles);
 
     this.dataURL = dataURL;
     this.contentElement.classList.add('html', 'request-view');
@@ -48,8 +49,8 @@ export class RequestHTMLView extends UI.Widget.VBox {
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.createIFrame();
-    this.registerCSSFiles([requestHTMLViewStyles]);
   }
 
   override willHide(): void {

package/front_end/panels/network/RequestInitiatorView.ts

@@ -14,9 +14,9 @@ import requestInitiatorViewTreeStyles from './requestInitiatorViewTree.css.js';
 
 const UIStrings = {
   /**
-   *@description Text in Request Initiator View of the Network panel
+   *@description Text in Request Initiator View of the Network panel if the request has no initiator data
    */
-  thisRequestHasNoInitiatorData: 'This request has no initiator data.',
+  noInitiator: 'No initiator data',
   /**
    *@description Title of a section in Request Initiator view of the Network Panel
    */
@@ -41,7 +41,7 @@ export class RequestInitiatorView extends UI.Widget.VBox {
     this.element.setAttribute('jslog', `${VisualLogging.pane('initiator').track({resize: true})}`);
     this.linkifier = new Components.Linkifier.Linkifier();
     this.request = request;
-    this.emptyWidget = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.thisRequestHasNoInitiatorData));
+    this.emptyWidget = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.noInitiator), '');
     this.emptyWidget.show(this.element);
     this.hasShown = false;
   }
@@ -64,7 +64,7 @@ export class RequestInitiatorView extends UI.Widget.VBox {
 
   private createTree(): UI.TreeOutline.TreeOutlineInShadow {
     const treeOutline = new UI.TreeOutline.TreeOutlineInShadow();
-    treeOutline.registerCSSFiles([requestInitiatorViewTreeStyles]);
+    treeOutline.registerRequiredCSS(requestInitiatorViewTreeStyles);
     treeOutline.contentElement.classList.add('request-initiator-view-tree');
     treeOutline.contentElement.setAttribute('jslog', `${VisualLogging.tree('initiator-tree')}`);
 
@@ -142,7 +142,7 @@ export class RequestInitiatorView extends UI.Widget.VBox {
     if (this.hasShown) {
       return;
     }
-    this.registerCSSFiles([requestInitiatorViewStyles]);
+    this.registerRequiredCSS(requestInitiatorViewStyles);
     let initiatorDataPresent = false;
     const containerTree = this.createTree();