chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

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,10 +336,10 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
   }
 
   scheduleDraw(): void {
-    void coordinator.write('NetworkWaterfallColumn.render', () => this.update());
+    void RenderCoordinator.write('NetworkWaterfallColumn.render', () => this.update());
   }
 
-  update(scrollTop?: number, eventDividers?: Map<string, number[]>, nodes?: NetworkNode[]): void {
+  override 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/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'],

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

@@ -30,13 +30,11 @@ import {
   recordedMetricsContain,
   resetRecordedMetrics,
 } from '../../../testing/UserMetricsHelpers.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 NetworkForward from '../forward/forward.js';
 
 import * as NetworkComponents from './components.js';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 const defaultRequest = {
   statusCode: 200,
   statusText: 'OK',
@@ -77,7 +75,7 @@ async function renderHeadersComponent(request: SDK.NetworkRequest.NetworkRequest
   const component = new NetworkComponents.RequestHeadersView.RequestHeadersView(request);
   renderElementIntoDOM(component);
   component.wasShown();
-  await coordinator.done({waitForWork: true});
+  await RenderCoordinator.done({waitForWork: true});
   return component;
 }
 
@@ -170,13 +168,13 @@ describeWithMockConnection('RequestHeadersView', () => {
 
     const responseHeadersCategory = component.shadowRoot.querySelector('[aria-label="Response Headers"]');
     assert.instanceOf(responseHeadersCategory, HTMLElement);
-    assert.deepStrictEqual(
+    assert.deepEqual(
         getRowsTextFromCategory(responseHeadersCategory),
         [['age:', '0'], ['cache-control:', 'max-age=600'], ['content-encoding:', 'gzip'], ['content-length:', '661']]);
 
     const requestHeadersCategory = component.shadowRoot.querySelector('[aria-label="Request Headers"]');
     assert.instanceOf(requestHeadersCategory, HTMLElement);
-    assert.deepStrictEqual(
+    assert.deepEqual(
         getRowsTextFromCategory(requestHeadersCategory),
         [[':method:', 'GET'], ['accept-encoding:', 'gzip, deflate, br'], ['cache-control:', 'no-cache']]);
   });
@@ -187,7 +185,7 @@ describeWithMockConnection('RequestHeadersView', () => {
 
     const earlyHintsCategory = component.shadowRoot.querySelector('[aria-label="Early Hints Headers"]');
     assert.instanceOf(earlyHintsCategory, HTMLElement);
-    assert.deepStrictEqual(getRowsTextFromCategory(earlyHintsCategory), [['link:', '<src="/script.js" as="script">']]);
+    assert.deepEqual(getRowsTextFromCategory(earlyHintsCategory), [['link:', '<src="/script.js" as="script">']]);
   });
 
   it('emits UMA event when a header value is being copied', async () => {
@@ -215,7 +213,7 @@ describeWithMockConnection('RequestHeadersView', () => {
 
     // Switch to viewing source view
     responseHeadersCategory.dispatchEvent(new NetworkComponents.RequestHeadersView.ToggleRawHeadersEvent());
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     const rawHeadersDiv = responseHeadersCategory.querySelector('.raw-headers');
     assert.instanceOf(rawHeadersDiv, HTMLDivElement);
@@ -226,9 +224,9 @@ describeWithMockConnection('RequestHeadersView', () => {
 
     // Switch to viewing parsed view
     responseHeadersCategory.dispatchEvent(new NetworkComponents.RequestHeadersView.ToggleRawHeadersEvent());
-    await coordinator.done();
+    await RenderCoordinator.done();
 
-    assert.deepStrictEqual(
+    assert.deepEqual(
         getRowsTextFromCategory(responseHeadersCategory),
         [['age:', '0'], ['cache-control:', 'max-age=600'], ['content-encoding:', 'gzip'], ['content-length:', '661']]);
   });
@@ -251,7 +249,7 @@ describeWithMockConnection('RequestHeadersView', () => {
 
     // Switch to viewing source view
     responseHeadersCategory.dispatchEvent(new NetworkComponents.RequestHeadersView.ToggleRawHeadersEvent());
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     const rawHeadersDiv = responseHeadersCategory.querySelector('.raw-headers');
     assert.instanceOf(rawHeadersDiv, HTMLDivElement);
@@ -262,7 +260,7 @@ describeWithMockConnection('RequestHeadersView', () => {
     assert.instanceOf(showMoreButton, HTMLElement);
     assert.strictEqual(showMoreButton.textContent, 'Show more');
     showMoreButton.click();
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     const noMoreShowMoreButton = responseHeadersCategory.querySelector('devtools-button');
     assert.isNull(noMoreShowMoreButton);
@@ -285,12 +283,12 @@ describeWithMockConnection('RequestHeadersView', () => {
 
     const spy = sinon.spy(component, 'render');
     assert.isTrue(spy.notCalled);
-    assert.deepStrictEqual(getRowsTextFromCategory(responseHeadersCategory), [['originalname:', 'originalValue']]);
+    assert.deepEqual(getRowsTextFromCategory(responseHeadersCategory), [['originalname:', 'originalValue']]);
 
     request.responseHeaders = [{name: 'updatedName', value: 'updatedValue'}];
     assert.isTrue(spy.calledOnce);
-    await coordinator.done();
-    assert.deepStrictEqual(getRowsTextFromCategory(responseHeadersCategory), [['updatedname:', 'updatedValue']]);
+    await RenderCoordinator.done();
+    assert.deepEqual(getRowsTextFromCategory(responseHeadersCategory), [['updatedname:', 'updatedValue']]);
   });
 
   it('can highlight individual response headers', async () => {
@@ -309,14 +307,14 @@ describeWithMockConnection('RequestHeadersView', () => {
 
     const responseHeadersCategory = component.shadowRoot.querySelector('[aria-label="Response Headers"]');
     assert.instanceOf(responseHeadersCategory, HTMLElement);
-    assert.deepStrictEqual(
+    assert.deepEqual(
         getRowsTextFromCategory(responseHeadersCategory),
         [['devtools:', 'rock'], ['foo:', 'bar'], ['highlightme:', 'some value']]);
 
-    assert.deepStrictEqual(getRowHighlightStatus(responseHeadersCategory), [false, false, false]);
+    assert.deepEqual(getRowHighlightStatus(responseHeadersCategory), [false, false, false]);
     component.revealHeader(NetworkForward.UIRequestLocation.UIHeaderSection.RESPONSE, 'HiGhLiGhTmE');
-    await coordinator.done();
-    assert.deepStrictEqual(getRowHighlightStatus(responseHeadersCategory), [false, false, true]);
+    await RenderCoordinator.done();
+    assert.deepEqual(getRowHighlightStatus(responseHeadersCategory), [false, false, true]);
   });
 
   it('can highlight individual request headers', async () => {
@@ -335,14 +333,14 @@ describeWithMockConnection('RequestHeadersView', () => {
 
     const requestHeadersCategory = component.shadowRoot.querySelector('[aria-label="Request Headers"]');
     assert.instanceOf(requestHeadersCategory, HTMLElement);
-    assert.deepStrictEqual(
+    assert.deepEqual(
         getRowsTextFromCategory(requestHeadersCategory),
         [['devtools:', 'rock'], ['foo:', 'bar'], ['highlightme:', 'some value']]);
 
-    assert.deepStrictEqual(getRowHighlightStatus(requestHeadersCategory), [false, false, false]);
+    assert.deepEqual(getRowHighlightStatus(requestHeadersCategory), [false, false, false]);
     component.revealHeader(NetworkForward.UIRequestLocation.UIHeaderSection.REQUEST, 'HiGhLiGhTmE');
-    await coordinator.done();
-    assert.deepStrictEqual(getRowHighlightStatus(requestHeadersCategory), [false, false, true]);
+    await RenderCoordinator.done();
+    assert.deepEqual(getRowHighlightStatus(requestHeadersCategory), [false, false, true]);
   });
 
   it('renders a link to \'.headers\'', async () => {
@@ -362,7 +360,7 @@ describeWithMockConnection('RequestHeadersView', () => {
     assert.isNotNull(responseHeadersCategory.shadowRoot);
 
     const linkElements = responseHeadersCategory.shadowRoot.querySelectorAll('x-link');
-    assert.strictEqual(linkElements.length, 2);
+    assert.lengthOf(linkElements, 2);
 
     assert.instanceOf(linkElements[0], HTMLElement);
     assert.strictEqual(linkElements[0].title, 'https://goo.gle/devtools-override');
@@ -430,7 +428,7 @@ describeWithMockConnection('RequestHeadersView', () => {
         assert.strictEqual(valueEditable.textContent?.trim(), headerValue);
       } else {
         assert.strictEqual(shadowRoot.querySelector('.header-value')?.textContent?.trim(), headerValue);
-        assert.strictEqual(valueEditableComponent, null);
+        assert.isNull(valueEditableComponent);
       }
     };
 
@@ -439,7 +437,7 @@ describeWithMockConnection('RequestHeadersView', () => {
     const pencilButton = headerRow.shadowRoot.querySelector('.enable-editing');
     assert.instanceOf(pencilButton, HTMLElement);
     pencilButton.click();
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     checkRow(headerRow.shadowRoot, 'foo:', 'bar', true);
     assert.isTrue(recordedMetricsContain(
@@ -476,7 +474,7 @@ describeWithMockConnection('RequestHeadersView', () => {
         Host.UserMetrics.Action.HeaderOverrideFileCreated));
 
     pencilButton.click();
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     assert.isTrue(recordedMetricsContain(
         Host.InspectorFrontendHostAPI.EnumeratedHistogram.ActionTaken,
@@ -494,7 +492,7 @@ describeWithEnvironment('RequestHeadersView\'s Category', () => {
       loggingContext: 'details-general',
     };
     assert.isNotNull(component.shadowRoot);
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     const details = getElementWithinComponent(component, 'details', HTMLDetailsElement);
     const summary = getElementWithinComponent(component, 'summary', HTMLElement);
@@ -529,7 +527,7 @@ describeWithEnvironment('RequestHeadersView\'s Category', () => {
       loggingContext: 'details-response-headers',
     };
     assert.isNotNull(component.shadowRoot);
-    await coordinator.done();
+    await RenderCoordinator.done();
     component.addEventListener(NetworkComponents.RequestHeadersView.ToggleRawHeadersEvent.eventName, () => {
       eventCounter += 1;
     });

package/front_end/panels/network/components/RequestHeadersView.ts

@@ -17,7 +17,7 @@ import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as Input from '../../../ui/components/input/input.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.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 LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
@@ -114,8 +114,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/network/components/RequestHeadersView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
   #request: Readonly<SDK.NetworkRequest.NetworkRequest>;
   readonly #shadow = this.attachShadow({mode: 'open'});
@@ -197,7 +195,7 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
       return;
     }
 
-    return coordinator.write(() => {
+    return RenderCoordinator.write(() => {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       render(html`

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

@@ -51,7 +51,7 @@ describeWithLocale('RequestTrustTokensView', () => {
     const issuerElements = getElementsWithinComponent(component, 'ul.issuers-list > li', HTMLElement);
     const actualIssuers = [...issuerElements].map(e => e.textContent);
 
-    assert.deepStrictEqual(actualIssuers.sort(), expectedIssuers.sort());
+    assert.deepEqual(actualIssuers.sort(), expectedIssuers.sort());
   });
 
   it('renders a result section with success status for successful requests', () => {