chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

package/front_end/panels/network/NetworkLogView.ts

@@ -47,7 +47,7 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Sources from '../../panels/sources/sources.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
-import * as Coordinator from '../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
@@ -456,8 +456,6 @@ const enum FetchStyle {
   NODE_JS = 1,
 }
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
     implements SDK.TargetManager.SDKModelObserver<SDK.NetworkManager.NetworkManager>, NetworkLogViewInterface {
   private readonly networkInvertFilterSetting: Common.Settings.Setting<boolean>;
@@ -1322,7 +1320,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.needsRefresh = true;
 
     if (this.isShowing()) {
-      void coordinator.write('NetworkLogView.render', this.refresh.bind(this));
+      void RenderCoordinator.write('NetworkLogView.render', this.refresh.bind(this));
     }
   }
 
@@ -1999,7 +1997,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     if (this.timeFilter && !this.timeFilter(request)) {
       return false;
     }
-    const categoryName = request.resourceType().category().title();
+    const categoryName = request.resourceType().category().name;
     if (!this.resourceCategoryFilterUI.accept(categoryName)) {
       return false;
     }
@@ -2459,13 +2457,16 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
       if (ignoredHeaders.has(name.toLowerCase())) {
         continue;
       }
-      if (header.value.trim()) {
-        command.push('-H ' + escapeString(name + ': ' + header.value));
-      } else {
+      const value = header.value;
+      if (!value.trim()) {
         // A header passed with -H with no value or only whitespace as its
         // value tells curl to not set the header at all. To post an empty
         // header, you have to terminate it with a semicolon.
         command.push('-H ' + escapeString(name + ';'));
+      } else if (name.toLowerCase() === 'cookie') {
+        command.push('-b ' + escapeString(value));
+      } else {
+        command.push('-H ' + escapeString(name + ': ' + value));
       }
     }
     command = command.concat(data);
@@ -2586,11 +2587,11 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
   }
 
   static getDCLEventColor(): string {
-    return '--sys-color-token-attribute-value';
+    return '--sys-color-blue';
   }
 
   static getLoadEventColor(): string {
-    return '--sys-color-token-property-special';
+    return '--sys-color-error';
   }
 }
 
@@ -2648,7 +2649,6 @@ export class MoreFiltersDropDownUI extends
   private contextMenu?: UI.ContextMenu.ContextMenu;
   private activeFiltersCount: HTMLElement;
   private activeFiltersCountAdorner: Adorners.Adorner.Adorner;
-  private hasChanged = false;
 
   constructor() {
     super();
@@ -2688,13 +2688,11 @@ export class MoreFiltersDropDownUI extends
   }
 
   #onSettingChanged(): void {
-    this.hasChanged = true;
     this.dispatchEventToListeners(UI.FilterBar.FilterUIEvents.FILTER_CHANGED);
   }
 
   showMoreFiltersContextMenu(event: Common.EventTarget.EventTargetEvent<Event>): void {
     const mouseEvent = event.data;
-    this.hasChanged = false;
 
     this.networkHideDataURLSetting.addChangeListener(this.#onSettingChanged.bind(this));
     this.networkHideChromeExtensionsSetting.addChangeListener(this.#onSettingChanged.bind(this));

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -310,10 +310,8 @@ export class NetworkLogViewColumns {
     this.dataGridScroller.addEventListener('touchstart', this.onTouchStart.bind(this));
     this.dataGridScroller.addEventListener('touchmove', this.onTouchMove.bind(this));
     this.dataGridScroller.addEventListener('touchend', this.onTouchEnd.bind(this));
-    this.waterfallScroller =
-        (this.waterfallColumn.contentElement.createChild('div', 'network-waterfall-v-scroll') as HTMLDivElement);
-    this.waterfallScrollerContent =
-        (this.waterfallScroller.createChild('div', 'network-waterfall-v-scroll-content') as HTMLDivElement);
+    this.waterfallScroller = this.waterfallColumn.contentElement.createChild('div', 'network-waterfall-v-scroll');
+    this.waterfallScrollerContent = this.waterfallScroller.createChild('div', 'network-waterfall-v-scroll-content');
 
     this.dataGridInternal.addEventListener(DataGrid.DataGrid.Events.PADDING_CHANGED, () => {
       this.waterfallScrollerWidthIsStale = true;
@@ -413,8 +411,7 @@ export class NetworkLogViewColumns {
   }
 
   private createWaterfallHeader(): void {
-    this.waterfallHeaderElement =
-        (this.waterfallColumn.contentElement.createChild('div', 'network-waterfall-header') as HTMLElement);
+    this.waterfallHeaderElement = this.waterfallColumn.contentElement.createChild('div', 'network-waterfall-header');
     this.waterfallHeaderElement.setAttribute('jslog', `${VisualLogging.tableHeader('waterfall').track({click: true})}`);
     this.waterfallHeaderElement.addEventListener('click', waterfallHeaderClicked.bind(this));
     this.waterfallHeaderElement.addEventListener('contextmenu', event => {
@@ -847,10 +844,10 @@ export class NetworkLogViewColumns {
     let color = 'transparent';
     switch (className) {
       case 'network-dcl-divider':
-        color = '#0867CB';
+        color = ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-blue');
         break;
       case 'network-load-divider':
-        color = '#B31412';
+        color = ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-error');
         break;
       default:
         return;

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

@@ -7,13 +7,11 @@ import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import {createTarget} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
-import * as Coordinator from '../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 import type * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 
 import * as Network from './network.js';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 describeWithMockConnection('NetworkOverview', () => {
   let target: SDK.Target.Target;
   let networkOverview: Network.NetworkOverview.NetworkOverview;
@@ -49,7 +47,7 @@ describeWithMockConnection('NetworkOverview', () => {
     resourceTreeModel.dispatchEventToListeners(
         event,
         ...[{loadTime: 42}] as Common.EventTarget.EventPayloadToRestParameters<SDK.ResourceTreeModel.EventTypes, T>);
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.strictEqual(calculator.computePosition.called, inScope);
     networkOverview.detach();
   };

package/front_end/panels/network/NetworkOverview.ts

@@ -5,7 +5,7 @@
 import type * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Trace from '../../models/trace/trace.js';
-import * as Coordinator from '../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
@@ -13,8 +13,6 @@ import {NetworkLogView} from './NetworkLogView.js';
 import {NetworkTimeBoundary} from './NetworkTimeCalculator.js';
 import {RequestTimeRangeNames, RequestTimingView} from './RequestTimingView.js';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOverviewBase {
   private selectedFilmStripTime: number;
   private numBands: number;
@@ -135,7 +133,7 @@ export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOvervie
     if (!this.isShowing()) {
       return;
     }
-    void coordinator.write('NetworkOverview.render', this.update.bind(this));
+    void RenderCoordinator.write('NetworkOverview.render', this.update.bind(this));
   }
 
   override update(): void {

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

@@ -9,13 +9,11 @@ import * as Trace from '../../models/trace/trace.js';
 import {createTarget} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
 import {createNetworkPanelForMockConnection} from '../../testing/NetworkHelpers.js';
-import * as Coordinator from '../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import * as Network from './network.js';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 describeWithMockConnection('NetworkPanel', () => {
   let target: SDK.Target.Target;
   let networkPanel: Network.NetworkPanel.NetworkPanel;
@@ -26,7 +24,7 @@ describeWithMockConnection('NetworkPanel', () => {
   });
 
   afterEach(async () => {
-    await coordinator.done();
+    await RenderCoordinator.done();
     networkPanel.detach();
   });
 
@@ -85,11 +83,11 @@ describeWithMockConnection('NetworkPanel', () => {
     networkPanel = Network.NetworkPanel.NetworkPanel.instance({forceNew: true, displayScreenshotDelay: 0});
     networkPanel.markAsRoot();
     networkPanel.show(document.body);
-    await coordinator.done();
+    await RenderCoordinator.done();
   });
 
   afterEach(async () => {
-    await coordinator.done();
+    await RenderCoordinator.done();
     networkPanel.detach();
   });
 
@@ -99,7 +97,7 @@ describeWithMockConnection('NetworkPanel', () => {
     const button = toolbar!.shadowRoot!.querySelector('[aria-label="Clear network log"]');
     assert.instanceOf(button, HTMLElement);
     button.click();
-    await coordinator.done({waitForWork: true});
+    await RenderCoordinator.done({waitForWork: true});
     assert.isTrue(networkLogResetSpy.called);
   });
 });

package/front_end/panels/network/NetworkPanel.ts

@@ -218,7 +218,7 @@ export class NetworkPanel extends UI.Panel.Panel implements
   networkLogView: NetworkLogView;
   private readonly fileSelectorElement: HTMLElement;
   private readonly detailsWidget: UI.Widget.VBox;
-  private readonly closeButtonElement: HTMLDivElement;
+  private readonly closeButtonElement: UI.UIUtils.DevToolsCloseButton;
   private preserveLogSetting: Common.Settings.Setting<boolean>;
   recordLogSetting: Common.Settings.Setting<boolean>;
   private readonly throttlingSelect: UI.Toolbar.ToolbarComboBox;
@@ -322,7 +322,7 @@ export class NetworkPanel extends UI.Panel.Panel implements
     this.detailsWidget.element.classList.add('network-details-view');
     this.splitWidget.setMainWidget(this.detailsWidget);
 
-    this.closeButtonElement = document.createElement('div', {is: 'dt-close-button'});
+    this.closeButtonElement = document.createElement('dt-close-button');
     this.closeButtonElement.addEventListener('click', async () => {
       const action = UI.ActionRegistry.ActionRegistry.instance().getAction('network.hide-request-details');
       await action.execute();
@@ -531,8 +531,7 @@ export class NetworkPanel extends UI.Panel.Panel implements
   private createThrottlingConditionsSelect(): UI.Toolbar.ToolbarComboBox {
     const toolbarItem = new UI.Toolbar.ToolbarComboBox(null, i18nString(UIStrings.throttling));
     toolbarItem.setMaxWidth(160);
-    MobileThrottling.ThrottlingManager.throttlingManager().decorateSelectWithNetworkThrottling(
-        toolbarItem.selectElement());
+    MobileThrottling.ThrottlingManager.throttlingManager().createNetworkThrottlingSelector(toolbarItem.selectElement());
     return toolbarItem;
   }
 

package/front_end/panels/network/NetworkWaterfallColumn.ts

@@ -4,7 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import type * as SDK from '../../core/sdk/sdk.js';
-import * as Coordinator from '../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
@@ -18,8 +18,6 @@ import {type RequestTimeRange, RequestTimeRangeNames, RequestTimingView} from '.
 
 const BAR_SPACING = 1;
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 export class NetworkWaterfallColumn extends UI.Widget.VBox {
   private canvas: HTMLCanvasElement;
   private canvasPosition: DOMRect;
@@ -51,7 +49,7 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
     // TODO(allada) Make this a shadowDOM when the NetworkWaterfallColumn gets moved into NetworkLogViewColumns.
     super(false);
 
-    this.canvas = (this.contentElement.createChild('canvas') as HTMLCanvasElement);
+    this.canvas = this.contentElement.createChild('canvas');
     this.canvas.tabIndex = -1;
     this.setDefaultFocusedElement(this.canvas);
     this.canvasPosition = this.canvas.getBoundingClientRect();
@@ -338,7 +336,7 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
   }
 
   scheduleDraw(): void {
-    void coordinator.write('NetworkWaterfallColumn.render', () => this.update());
+    void RenderCoordinator.write('NetworkWaterfallColumn.render', () => this.update());
   }
 
   override update(scrollTop?: number, eventDividers?: Map<string, number[]>, nodes?: NetworkNode[]): void {

package/front_end/panels/network/RequestPayloadView.ts

@@ -38,9 +38,9 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
-// eslint-disable-next-line rulesdir/es_modules_import
+// eslint-disable-next-line rulesdir/es-modules-import
 import objectPropertiesSectionStyles from '../../ui/legacy/components/object_ui/objectPropertiesSection.css.js';
-// eslint-disable-next-line rulesdir/es_modules_import
+// eslint-disable-next-line rulesdir/es-modules-import
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';

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

@@ -159,7 +159,7 @@ describeWithLocale('ResourceTimingView', () => {
     const shadowElement = routerEvaluationDetailsElement.firstElementChild.shadowRoot;
     assert.isNotNull(shadowElement, 'shadow element does not exist');
     const content = getCleanTextContentFromElements(shadowElement, '.network-fetch-details-treeitem');
-    assert.strictEqual(content.length, 2, 'does not match the tree item');
+    assert.lengthOf(content, 2, 'does not match the tree item');
 
     // Check the content of the view. Since the value is set from matched to actual,
     // the order should be the same.

package/front_end/panels/network/RequestTimingView.ts

@@ -440,19 +440,19 @@ export class RequestTimingView extends UI.Widget.VBox {
 
     const startTimeHeader = tableElement.createChild('thead', 'network-timing-start');
     const tableHeaderRow = startTimeHeader.createChild('tr');
-    const activityHeaderCell = (tableHeaderRow.createChild('th') as HTMLTableCellElement);
+    const activityHeaderCell = tableHeaderRow.createChild('th');
     activityHeaderCell.createChild('span', 'network-timing-hidden-header').textContent = i18nString(UIStrings.label);
     activityHeaderCell.scope = 'col';
-    const waterfallHeaderCell = (tableHeaderRow.createChild('th') as HTMLTableCellElement);
+    const waterfallHeaderCell = tableHeaderRow.createChild('th');
     waterfallHeaderCell.createChild('span', 'network-timing-hidden-header').textContent =
         i18nString(UIStrings.waterfall);
     waterfallHeaderCell.scope = 'col';
-    const durationHeaderCell = (tableHeaderRow.createChild('th') as HTMLTableCellElement);
+    const durationHeaderCell = tableHeaderRow.createChild('th');
     durationHeaderCell.createChild('span', 'network-timing-hidden-header').textContent = i18nString(UIStrings.duration);
     durationHeaderCell.scope = 'col';
 
-    const queuedCell = (startTimeHeader.createChild('tr').createChild('td') as HTMLTableCellElement);
-    const startedCell = (startTimeHeader.createChild('tr').createChild('td') as HTMLTableCellElement);
+    const queuedCell = startTimeHeader.createChild('tr').createChild('td');
+    const startedCell = startTimeHeader.createChild('tr').createChild('td');
     queuedCell.colSpan = startedCell.colSpan = 3;
     UI.UIUtils.createTextChild(
         queuedCell, i18nString(UIStrings.queuedAtS, {PH1: calculator.formatValue(request.issueTime(), 2)}));
@@ -524,13 +524,13 @@ export class RequestTimingView extends UI.Widget.VBox {
     }
 
     if (!request.finished && !request.preserved) {
-      const cell = (tableElement.createChild('tr').createChild('td', 'caution') as HTMLTableCellElement);
+      const cell = tableElement.createChild('tr').createChild('td', 'caution');
       cell.colSpan = 3;
       UI.UIUtils.createTextChild(cell, i18nString(UIStrings.cautionRequestIsNotFinishedYet));
     }
 
     const footer = tableElement.createChild('tr', 'network-timing-footer');
-    const note = (footer.createChild('td') as HTMLTableCellElement);
+    const note = footer.createChild('td');
     note.colSpan = 1;
     const explanationLink = UI.XLink.XLink.create(
         'https://developer.chrome.com/docs/devtools/network/reference/#timing-explanation',
@@ -543,8 +543,7 @@ export class RequestTimingView extends UI.Widget.VBox {
 
     const lastTimingRightEdge = right === undefined ? 100 : right;
 
-    const breakElement =
-        (tableElement.createChild('tr', 'network-timing-table-header').createChild('td') as HTMLTableCellElement);
+    const breakElement = tableElement.createChild('tr', 'network-timing-table-header').createChild('td');
     breakElement.colSpan = 3;
     breakElement.createChild('hr', 'break');
 
@@ -555,7 +554,7 @@ export class RequestTimingView extends UI.Widget.VBox {
 
     if (!serverTimings) {
       const informationRow = tableElement.createChild('tr');
-      const information = (informationRow.createChild('td') as HTMLTableCellElement);
+      const information = informationRow.createChild('td');
       information.colSpan = 3;
 
       const link = UI.XLink.XLink.create(

package/front_end/panels/network/blockedURLsPane.css

@@ -19,8 +19,7 @@
 
 .no-blocked-urls,
 .blocked-urls {
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden auto;
 }
 
 .no-blocked-urls {

package/front_end/panels/network/components/HeaderSectionRow.test.ts

@@ -14,13 +14,11 @@ import {
   renderElementIntoDOM,
 } from '../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
-import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 
 import * as NetworkComponents from './components.js';
 import type {EditableSpan} from './EditableSpan.js';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 async function renderHeaderSectionRow(header: NetworkComponents.HeaderSectionRow.HeaderDescriptor): Promise<{
   component: NetworkComponents.HeaderSectionRow.HeaderSectionRow,
   nameEditable: HTMLSpanElement | null,
@@ -32,7 +30,7 @@ async function renderHeaderSectionRow(header: NetworkComponents.HeaderSectionRow
   renderElementIntoDOM(component);
   assert.isTrue(scrollIntoViewSpy.notCalled);
   component.data = {header};
-  await coordinator.done();
+  await RenderCoordinator.done();
   assert.isNotNull(component.shadowRoot);
 
   let nameEditable: HTMLSpanElement|null = null;
@@ -228,7 +226,7 @@ describeWithEnvironment('HeaderSectionRow', () => {
     nameEditable.innerText = editedHeaderName;
     dispatchInputEvent(nameEditable, {inputType: 'insertText', data: editedHeaderName, bubbles: true, composed: true});
     nameEditable.blur();
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     assert.strictEqual(headerEditedEventCount, 1);
     assert.strictEqual(headerNameFromEvent, editedHeaderName);
@@ -241,7 +239,7 @@ describeWithEnvironment('HeaderSectionRow', () => {
     dispatchInputEvent(
         valueEditable, {inputType: 'insertText', data: editedHeaderValue, bubbles: true, composed: true});
     valueEditable.blur();
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     assert.strictEqual(headerEditedEventCount, 2);
     assert.strictEqual(headerNameFromEvent, editedHeaderName);
@@ -253,7 +251,7 @@ describeWithEnvironment('HeaderSectionRow', () => {
     dispatchInputEvent(
         nameEditable, {inputType: 'insertText', data: originalHeaderName, bubbles: true, composed: true});
     nameEditable.blur();
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     assert.strictEqual(headerEditedEventCount, 3);
     assert.strictEqual(headerNameFromEvent, originalHeaderName);
@@ -265,7 +263,7 @@ describeWithEnvironment('HeaderSectionRow', () => {
     dispatchInputEvent(
         valueEditable, {inputType: 'insertText', data: originalHeaderValue, bubbles: true, composed: true});
     valueEditable.blur();
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     assert.strictEqual(headerEditedEventCount, 4);
     assert.strictEqual(headerNameFromEvent, originalHeaderName);
@@ -375,13 +373,13 @@ describeWithEnvironment('HeaderSectionRow', () => {
     valueEditable.focus();
     valueEditable.innerText = 'a';
     dispatchInputEvent(valueEditable, {inputType: 'insertText', data: 'a', bubbles: true, composed: true});
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.isTrue(row?.classList.contains('header-overridden'));
     assert.isFalse(row?.classList.contains('header-highlight'));
     assert.isTrue(hasReloadPrompt(component.shadowRoot));
 
     dispatchKeyDownEvent(valueEditable, {key: 'Escape', bubbles: true, composed: true});
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.isFalse(component.shadowRoot.querySelector('.row')?.classList.contains('header-overridden'));
   });
 
@@ -402,11 +400,11 @@ describeWithEnvironment('HeaderSectionRow', () => {
     valueEditable.focus();
     valueEditable.innerText = 'a';
     dispatchInputEvent(valueEditable, {inputType: 'insertText', data: 'a', bubbles: true, composed: true});
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.isTrue(row?.classList.contains('header-overridden'));
 
     dispatchKeyDownEvent(valueEditable, {key: 'Escape', bubbles: true, composed: true});
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.isFalse(component.shadowRoot.querySelector('.row')?.classList.contains('header-overridden'));
   });
 
@@ -424,19 +422,19 @@ describeWithEnvironment('HeaderSectionRow', () => {
     assert.instanceOf(nameEditable, HTMLElement);
     const row = component.shadowRoot.querySelector('.row');
     assert.instanceOf(row, HTMLDivElement);
-    assert.strictEqual(row.querySelector('devtools-icon.disallowed-characters'), null);
+    assert.isNull(row.querySelector('devtools-icon.disallowed-characters'));
     assert.isTrue(hasReloadPrompt(component.shadowRoot));
 
     nameEditable.focus();
     nameEditable.innerText = '*';
     dispatchInputEvent(nameEditable, {inputType: 'insertText', data: '*', bubbles: true, composed: true});
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.instanceOf(row.querySelector('devtools-icon.disallowed-characters'), HTMLElement);
     assert.isTrue(hasReloadPrompt(component.shadowRoot));
 
     dispatchKeyDownEvent(nameEditable, {key: 'Escape', bubbles: true, composed: true});
-    await coordinator.done();
-    assert.strictEqual(row.querySelector('devtools-icon.disallowed-characters'), null);
+    await RenderCoordinator.done();
+    assert.isNull(row.querySelector('devtools-icon.disallowed-characters'));
     assert.isTrue(hasReloadPrompt(component.shadowRoot));
   });
 
@@ -474,14 +472,14 @@ describeWithEnvironment('HeaderSectionRow', () => {
     dispatchPasteEvent(nameEditable, {clipboardData: dt, bubbles: true, composed: true});
     nameEditable.blur();
 
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.strictEqual(headerEditedEventCount, 1);
     assert.strictEqual(headerNameFromEvent, 'permissions-policy');
     assert.strictEqual(headerValueFromEvent, 'someHeaderValue');
 
     // update value on blur
     valueEditable.blur();
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.strictEqual(headerEditedEventCount, 2);
     assert.strictEqual(headerNameFromEvent, 'permissions-policy');
     assert.strictEqual(headerValueFromEvent, 'unload=(https://xyz.com)');
@@ -525,13 +523,13 @@ describeWithEnvironment('HeaderSectionRow', () => {
     const nameEl = component.shadowRoot.querySelector('.header-name devtools-editable-span') as EditableSpan;
     const valueEl = component.shadowRoot.querySelector('.header-value devtools-editable-span') as EditableSpan;
 
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.strictEqual(nameEl.value, ':Abc');
     assert.strictEqual(valueEl.value, originalHeaderValue);
 
     dispatchKeyDownEvent(nameEditable, {key: 'Escape', bubbles: true, composed: true});
 
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.strictEqual(headerEditedEventCount, 0);
     assert.strictEqual(nameEl.value, 'Some-Header-Name');
   });
@@ -567,24 +565,24 @@ describeWithEnvironment('HeaderSectionRow', () => {
     const nameEl = component.shadowRoot.querySelector('.header-name devtools-editable-span') as EditableSpan;
     const valueEl = component.shadowRoot.querySelector('.header-value devtools-editable-span') as EditableSpan;
 
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.strictEqual(nameEl.value, 'Permissions-Policy');
     assert.strictEqual(valueEl.value, 'unload=(https://xyz.com)');
 
     dispatchKeyDownEvent(valueEditable, {key: 'Escape', bubbles: true, composed: true});
 
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.strictEqual(headerEditedEventCount, 0);
     assert.strictEqual(nameEl.value, 'Some-Header-Name');
     assert.strictEqual(valueEl.value, 'someHeaderValue');
   });
 
   it('recoginzes only alphanumeric characters, dashes, and underscores as valid in header names', () => {
-    assert.strictEqual(NetworkComponents.HeaderSectionRow.isValidHeaderName('AlphaNumeric123'), true);
-    assert.strictEqual(NetworkComponents.HeaderSectionRow.isValidHeaderName('Alpha Numeric'), false);
-    assert.strictEqual(NetworkComponents.HeaderSectionRow.isValidHeaderName('AlphaNumeric123!'), false);
-    assert.strictEqual(NetworkComponents.HeaderSectionRow.isValidHeaderName('With-dashes_and_underscores'), true);
-    assert.strictEqual(NetworkComponents.HeaderSectionRow.isValidHeaderName('no*'), false);
+    assert.isTrue(NetworkComponents.HeaderSectionRow.isValidHeaderName('AlphaNumeric123'));
+    assert.isFalse(NetworkComponents.HeaderSectionRow.isValidHeaderName('Alpha Numeric'));
+    assert.isFalse(NetworkComponents.HeaderSectionRow.isValidHeaderName('AlphaNumeric123!'));
+    assert.isTrue(NetworkComponents.HeaderSectionRow.isValidHeaderName('With-dashes_and_underscores'));
+    assert.isFalse(NetworkComponents.HeaderSectionRow.isValidHeaderName('no*'));
   });
 
   it('allows removing a header override', async () => {

package/front_end/panels/network/components/RequestHeaderSection.test.ts

@@ -8,18 +8,16 @@ import {
   renderElementIntoDOM,
 } from '../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
-import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 
 import * as NetworkComponents from './components.js';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 async function renderRequestHeaderSection(request: SDK.NetworkRequest.NetworkRequest):
     Promise<NetworkComponents.RequestHeaderSection.RequestHeaderSection> {
   const component = new NetworkComponents.RequestHeaderSection.RequestHeaderSection();
   renderElementIntoDOM(component);
   component.data = {request};
-  await coordinator.done();
+  await RenderCoordinator.done();
   assert.instanceOf(component, HTMLElement);
   assert.isNotNull(component.shadowRoot);
   return component;
@@ -70,7 +68,7 @@ describeWithEnvironment('RequestHeaderSection', () => {
         row.shadowRoot.querySelector('.header-value')?.textContent?.trim() || '',
       ];
     });
-    assert.deepStrictEqual(sorted, [
+    assert.deepEqual(sorted, [
       ['aa:', 'first'],
       ['ab:', 'second'],
       ['abc:', 'third'],