chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

package/front_end/panels/timeline/components/MetricCard.test.ts

@@ -6,12 +6,10 @@ import * as Common from '../../../core/common/common.js';
 import * as CrUXManager from '../../../models/crux-manager/crux-manager.js';
 import {renderElementIntoDOM} from '../../../testing/DOMHelpers.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 * as Components from './components.js';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 function getLocalMetricValue(view: Element): HTMLElement {
   return view.shadowRoot!.querySelector('#local-value .metric-value') as HTMLElement;
 }
@@ -40,6 +38,10 @@ function getDetailedCompareText(view: Element): HTMLElement|null {
   return view.shadowRoot!.querySelector('.detailed-compare-text');
 }
 
+function getWarnings(view: Element): string[] {
+  return Array.from(view.shadowRoot!.querySelectorAll('.warning')).map(w => w.textContent!);
+}
+
 function getEnvironmentRecs(view: Element): string[] {
   const recs = Array.from(view.shadowRoot!.querySelectorAll('.environment-recs li'));
   return recs.map(rec => rec.textContent!);
@@ -89,7 +91,7 @@ describeWithMockConnection('MetricCard', () => {
     };
 
     renderElementIntoDOM(view);
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     const localValueEl = getLocalMetricValue(view);
     assert.strictEqual(localValueEl.className, 'metric-value good');
@@ -115,7 +117,7 @@ describeWithMockConnection('MetricCard', () => {
     };
 
     renderElementIntoDOM(view);
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     const localValueEl = getLocalMetricValue(view);
     assert.strictEqual(localValueEl.className, 'metric-value needs-improvement');
@@ -141,7 +143,7 @@ describeWithMockConnection('MetricCard', () => {
     };
 
     renderElementIntoDOM(view);
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     const localValueEl = getLocalMetricValue(view);
     assert.strictEqual(localValueEl.className, 'metric-value poor');
@@ -161,7 +163,7 @@ describeWithMockConnection('MetricCard', () => {
     const view = new Components.MetricCard.MetricCard();
 
     renderElementIntoDOM(view);
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     const metricValueEl = getLocalMetricValue(view);
     assert.strictEqual(metricValueEl.className.trim(), 'metric-value waiting');
@@ -177,6 +179,25 @@ describeWithMockConnection('MetricCard', () => {
     assert.match(histogramLabels[2], /Poor\s+\(>4.00 s\)/);
   });
 
+  it('should show warnings', async () => {
+    const view = new Components.MetricCard.MetricCard();
+    view.data = {
+      metric: 'LCP',
+      localValue: 2000,
+      fieldValue: 1,
+      histogram: createMockHistogram(),
+      warnings: ['LCP warning'],
+    };
+
+    renderElementIntoDOM(view);
+    await RenderCoordinator.done();
+
+    const warnings = getWarnings(view);
+    assert.deepEqual(warnings, [
+      'LCP warning',
+    ]);
+  });
+
   describe('phase table', () => {
     it('should not show if there is no phase data', async () => {
       const view = new Components.MetricCard.MetricCard();
@@ -188,7 +209,7 @@ describeWithMockConnection('MetricCard', () => {
       };
       renderElementIntoDOM(view);
 
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       const phaseTable = getPhaseTable(view);
       assert.isNull(phaseTable);
@@ -209,10 +230,10 @@ describeWithMockConnection('MetricCard', () => {
       };
       renderElementIntoDOM(view);
 
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       const phaseTable = getPhaseTable(view);
-      assert.deepStrictEqual(phaseTable, [
+      assert.deepEqual(phaseTable, [
         ['TTFB', '500'],
         ['Phase 1', '0'],
         ['Phase 2', '124'],
@@ -233,7 +254,7 @@ describeWithMockConnection('MetricCard', () => {
       };
       renderElementIntoDOM(view);
 
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       const histogramLabels = getFieldHistogramLabels(view);
       assert.match(histogramLabels[0], /Good\s+\(≤2.50 s\)/);
@@ -257,7 +278,7 @@ describeWithMockConnection('MetricCard', () => {
       };
       renderElementIntoDOM(view);
 
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       const histogramLabels = getFieldHistogramLabels(view);
       assert.match(histogramLabels[0], /Good\s+\(≤2.50 s\)/);
@@ -265,7 +286,7 @@ describeWithMockConnection('MetricCard', () => {
       assert.match(histogramLabels[2], /Poor\s+\(>4.00 s\)/);
 
       const histogramPercents = getFieldHistogramPercents(view);
-      assert.deepStrictEqual(histogramPercents, ['50%', '30%', '20%']);
+      assert.deepEqual(histogramPercents, ['50%', '30%', '20%']);
 
       const fieldValueEl = getFieldMetricValue(view);
       assert.strictEqual(fieldValueEl!.textContent, '0.20 s');
@@ -279,7 +300,7 @@ describeWithMockConnection('MetricCard', () => {
       };
       renderElementIntoDOM(view);
 
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       const histogramLabels = getFieldHistogramLabels(view);
       assert.match(histogramLabels[0], /Good\s+\(≤2.50 s\)/);
@@ -287,7 +308,7 @@ describeWithMockConnection('MetricCard', () => {
       assert.match(histogramLabels[2], /Poor\s+\(>4.00 s\)/);
 
       const histogramPercents = getFieldHistogramPercents(view);
-      assert.deepStrictEqual(histogramPercents, ['-', '-', '-']);
+      assert.deepEqual(histogramPercents, ['-', '-', '-']);
 
       const fieldValueEl = getFieldMetricValue(view);
       assert.strictEqual(fieldValueEl!.textContent, '-');
@@ -305,7 +326,7 @@ describeWithMockConnection('MetricCard', () => {
       };
       renderElementIntoDOM(view);
 
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       const compareText = getCompareText(view);
       assert.strictEqual(
@@ -322,7 +343,7 @@ describeWithMockConnection('MetricCard', () => {
       };
       renderElementIntoDOM(view);
 
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       const compareText = getCompareText(view);
       assert.strictEqual(
@@ -340,7 +361,7 @@ describeWithMockConnection('MetricCard', () => {
       };
       renderElementIntoDOM(view);
 
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       const compareText = getCompareText(view);
       assert.strictEqual(
@@ -358,7 +379,7 @@ describeWithMockConnection('MetricCard', () => {
       };
       renderElementIntoDOM(view);
 
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       const compareText = getCompareText(view);
       assert.strictEqual(
@@ -373,7 +394,7 @@ describeWithMockConnection('MetricCard', () => {
       };
       renderElementIntoDOM(view);
 
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       const compareText = getCompareText(view);
       assert.strictEqual(compareText!.innerText, 'Your local LCP value of 3.00 s needs improvement.');
@@ -386,7 +407,7 @@ describeWithMockConnection('MetricCard', () => {
       };
       renderElementIntoDOM(view);
 
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       const compareText = getCompareText(view);
       assert.strictEqual(compareText!.innerText, 'Interact with the page to measure INP.');
@@ -404,7 +425,7 @@ describeWithMockConnection('MetricCard', () => {
       };
       renderElementIntoDOM(view);
 
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       const compareText = getDetailedCompareText(view);
       assert.strictEqual(
@@ -423,7 +444,7 @@ describeWithMockConnection('MetricCard', () => {
       };
       renderElementIntoDOM(view);
 
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       const compareText = getDetailedCompareText(view);
       assert.strictEqual(
@@ -440,7 +461,7 @@ describeWithMockConnection('MetricCard', () => {
       };
       renderElementIntoDOM(view);
 
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       const compareText = getDetailedCompareText(view);
       assert.strictEqual(compareText!.textContent, 'Your local LCP value of 3.00 s needs improvement.');
@@ -453,7 +474,7 @@ describeWithMockConnection('MetricCard', () => {
       };
       renderElementIntoDOM(view);
 
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       const compareText = getDetailedCompareText(view);
       assert.strictEqual(compareText!.textContent, 'Interact with the page to measure INP.');
@@ -469,7 +490,7 @@ describeWithMockConnection('MetricCard', () => {
       };
 
       renderElementIntoDOM(view);
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       const recs = getEnvironmentRecs(view);
       assert.lengthOf(recs, 0);
@@ -485,7 +506,7 @@ describeWithMockConnection('MetricCard', () => {
       };
 
       renderElementIntoDOM(view);
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       const recs = getEnvironmentRecs(view);
       assert.lengthOf(recs, 0);
@@ -501,10 +522,10 @@ describeWithMockConnection('MetricCard', () => {
       };
 
       renderElementIntoDOM(view);
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       const recs = getEnvironmentRecs(view);
-      assert.deepStrictEqual(recs, [
+      assert.deepEqual(recs, [
         'Real users may experience longer page loads due to slower network conditions. Increasing network throttling will simulate slower network conditions.',
         'Screen size can influence what the LCP element is. Ensure you are testing common viewport sizes.',
         'The LCP element can vary between page loads if content is dynamic.',
@@ -521,10 +542,10 @@ describeWithMockConnection('MetricCard', () => {
       };
 
       renderElementIntoDOM(view);
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       const recs = getEnvironmentRecs(view);
-      assert.deepStrictEqual(recs, [
+      assert.deepEqual(recs, [
         'Screen size can influence what the LCP element is. Ensure you are testing common viewport sizes.',
         'The LCP element can vary between page loads if content is dynamic.',
       ]);
@@ -540,10 +561,10 @@ describeWithMockConnection('MetricCard', () => {
       };
 
       renderElementIntoDOM(view);
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       const recs = getEnvironmentRecs(view);
-      assert.deepStrictEqual(recs, [
+      assert.deepEqual(recs, [
         'Screen size can influence what layout shifts happen. Ensure you are testing common viewport sizes.',
         'How a user interacts with the page can influence layout shifts. Ensure you are testing common interactions like scrolling the page.',
         'Dynamic content can influence what layout shifts happen.',
@@ -560,10 +581,10 @@ describeWithMockConnection('MetricCard', () => {
       };
 
       renderElementIntoDOM(view);
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       const recs = getEnvironmentRecs(view);
-      assert.deepStrictEqual(recs, [
+      assert.deepEqual(recs, [
         'Real users may experience longer interactions due to slower CPU speeds. Increasing CPU throttling will simulate a slower device.',
         'How a user interacts with the page influences interaction delays. Ensure you are testing common interactions.',
       ]);
@@ -579,10 +600,10 @@ describeWithMockConnection('MetricCard', () => {
       };
 
       renderElementIntoDOM(view);
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       const recs = getEnvironmentRecs(view);
-      assert.deepStrictEqual(recs, [
+      assert.deepEqual(recs, [
         'How a user interacts with the page influences interaction delays. Ensure you are testing common interactions.',
       ]);
     });

package/front_end/panels/timeline/components/MetricCard.ts

@@ -31,7 +31,7 @@ const UIStrings = {
    */
   localValue: 'Local',
   /**
-   * @description Label for the 75th percentile of a metric according to data collected from real users in the field.
+   * @description Label for the 75th percentile of a metric according to data collected from real users in the field. This should be interpreted as "75th percentile of real users".
    */
   field75thPercentile: 'Field 75th percentile',
   /**
@@ -149,6 +149,7 @@ export interface MetricCardData {
   histogram?: CrUXManager.MetricResponse['histogram'];
   tooltipContainer?: HTMLElement;
   phases?: Array<[string, number]>;
+  warnings?: string[];
 }
 
 export class MetricCard extends HTMLElement {
@@ -670,6 +671,9 @@ export class MetricCard extends HTMLElement {
         </div>
         ${fieldEnabled ? html`<hr class="divider">` : nothing}
         ${this.#renderCompareString()}
+        ${this.#data.warnings?.map(warning => html`
+          <div class="warning">${warning}</div>
+        `)}
         ${this.#renderEnvironmentRecommendations()}
         <slot name="extra-info"></slot>
       </div>

package/front_end/panels/timeline/components/MetricCompareStrings.ts

@@ -90,7 +90,7 @@ const UIStrings = {
    */
   poorSummarized: 'Your local {PH1} value of {PH2} is poor.',
   /**
-   * @description Text block that compares a local metric value to real user experiences. "field data" refers to performance data collected from real users on the site. "local" refers to a developers local testing environment.
+   * @description Text block that compares a local metric value to real user experiences. "field data" should be interpreted as "real user data". "local" refers to a developers local testing environment.
    * @example {LCP} PH1
    * @example {500 ms} PH2
    * @example {400 ms} PH3
@@ -99,7 +99,7 @@ const UIStrings = {
   goodGoodDetailedCompare:
       'Your local {PH1} value of {PH2} is good and is rated the same as {PH4} of real-user {PH1} experiences. Additionally, the field data 75th percentile {PH1} value of {PH3} is good.',
   /**
-   * @description Text block that compares a local metric value to real user experiences. "field data" refers to performance data collected from real users on the site. "local" refers to a developers local testing environment.
+   * @description Text block that compares a local metric value to real user experiences. "field data" should be interpreted as "real user data". "local" refers to a developers local testing environment.
    * @example {LCP} PH1
    * @example {500 ms} PH2
    * @example {400 ms} PH3
@@ -108,7 +108,7 @@ const UIStrings = {
   goodNeedsImprovementDetailedCompare:
       'Your local {PH1} value of {PH2} is good and is rated the same as {PH4} of real-user {PH1} experiences. However, the field data 75th percentile {PH1} value of {PH3} needs improvement.',
   /**
-   * @description Text block that compares a local metric value to real user experiences. "field data" refers to performance data collected from real users on the site. "local" refers to a developers local testing environment.
+   * @description Text block that compares a local metric value to real user experiences. "field data" should be interpreted as "real user data". "local" refers to a developers local testing environment.
    * @example {LCP} PH1
    * @example {500 ms} PH2
    * @example {400 ms} PH3
@@ -117,7 +117,7 @@ const UIStrings = {
   goodPoorDetailedCompare:
       'Your local {PH1} value of {PH2} is good and is rated the same as {PH4} of real-user {PH1} experiences. However, the field data 75th percentile {PH1} value of {PH3} is poor.',
   /**
-   * @description Text block that compares a local metric value to real user experiences. "field data" refers to performance data collected from real users on the site. "local" refers to a developers local testing environment.
+   * @description Text block that compares a local metric value to real user experiences. "field data" should be interpreted as "real user data". "local" refers to a developers local testing environment.
    * @example {LCP} PH1
    * @example {500 ms} PH2
    * @example {400 ms} PH3
@@ -126,7 +126,7 @@ const UIStrings = {
   needsImprovementGoodDetailedCompare:
       'Your local {PH1} value of {PH2} needs improvement and is rated the same as {PH4} of real-user {PH1} experiences. However, the field data 75th percentile {PH1} value of {PH3} is good.',
   /**
-   * @description Text block that compares a local metric value to real user experiences. "field data" refers to performance data collected from real users on the site. "local" refers to a developers local testing environment.
+   * @description Text block that compares a local metric value to real user experiences. "field data" should be interpreted as "real user data". "local" refers to a developers local testing environment.
    * @example {LCP} PH1
    * @example {500 ms} PH2
    * @example {400 ms} PH3
@@ -135,7 +135,7 @@ const UIStrings = {
   needsImprovementNeedsImprovementDetailedCompare:
       'Your local {PH1} value of {PH2} needs improvement and is rated the same as {PH4} of real-user {PH1} experiences. Additionally, the field data 75th percentile {PH1} value of {PH3} needs improvement.',
   /**
-   * @description Text block that compares a local metric value to real user experiences. "field data" refers to performance data collected from real users on the site. "local" refers to a developers local testing environment.
+   * @description Text block that compares a local metric value to real user experiences. "field data" should be interpreted as "real user data". "local" refers to a developers local testing environment.
    * @example {LCP} PH1
    * @example {500 ms} PH2
    * @example {400 ms} PH3
@@ -144,7 +144,7 @@ const UIStrings = {
   needsImprovementPoorDetailedCompare:
       'Your local {PH1} value of {PH2} needs improvement and is rated the same as {PH4} of real-user {PH1} experiences. However, the field data 75th percentile {PH1} value of {PH3} is poor.',
   /**
-   * @description Text block that compares a local metric value to real user experiences. "field data" refers to performance data collected from real users on the site. "local" refers to a developers local testing environment.
+   * @description Text block that compares a local metric value to real user experiences. "field data" should be interpreted as "real user data". "local" refers to a developers local testing environment.
    * @example {LCP} PH1
    * @example {500 ms} PH2
    * @example {400 ms} PH3
@@ -153,7 +153,7 @@ const UIStrings = {
   poorGoodDetailedCompare:
       'Your local {PH1} value of {PH2} is poor and is rated the same as {PH4} of real-user {PH1} experiences. However, the field data 75th percentile {PH1} value of {PH3} is good.',
   /**
-   * @description Text block that compares a local metric value to real user experiences. "field data" refers to performance data collected from real users on the site. "local" refers to a developers local testing environment.
+   * @description Text block that compares a local metric value to real user experiences. "field data" should be interpreted as "real user data". "local" refers to a developers local testing environment.
    * @example {LCP} PH1
    * @example {500 ms} PH2
    * @example {400 ms} PH3
@@ -162,7 +162,7 @@ const UIStrings = {
   poorNeedsImprovementDetailedCompare:
       'Your local {PH1} value of {PH2} is poor and is rated the same as {PH4} of real-user {PH1} experiences. However, the field data 75th percentile {PH1} value of {PH3} needs improvement.',
   /**
-   * @description Text block that compares a local metric value to real user experiences. "field data" refers to performance data collected from real users on the site. "local" refers to a developers local testing environment.
+   * @description Text block that compares a local metric value to real user experiences. "field data" should be interpreted as "real user data". "local" refers to a developers local testing environment.
    * @example {LCP} PH1
    * @example {500 ms} PH2
    * @example {400 ms} PH3

package/front_end/panels/timeline/components/NetworkRequestDetails.ts

@@ -48,10 +48,6 @@ const UIStrings = {
    *@description Text in Timeline indicating that input has not happened recently
    */
   no: 'No',
-  /**
-   *@description Text for previewing items
-   */
-  preview: 'Preview',
   /**
    *@description Text to indicate to the user they are viewing an event representing a network request.
    */
@@ -179,7 +175,7 @@ export class NetworkRequestDetails extends HTMLElement {
         // want the one to reveal in network panel, so add a new class which will only be supported by Network panel.
         // Also we want to have a different behavior(select the network request) from the
         // `SDK.NetworkRequest.NetworkRequest` (highlight the network request once).
-        const contextMenu = new UI.ContextMenu.ContextMenu(event, {useSoftMenu: true});
+        const contextMenu = new UI.ContextMenu.ContextMenu(event);
         contextMenu.appendApplicableItems(new TimelineUtils.NetworkRequest.TimelineNetworkRequest(networkRequest));
         void contextMenu.show();
       });
@@ -233,7 +229,7 @@ export class NetworkRequestDetails extends HTMLElement {
       return null;
     }
 
-    const hasStackTrace = Trace.Helpers.Trace.stackTraceForEvent(this.#networkRequest) !== null;
+    const hasStackTrace = Trace.Helpers.Trace.stackTraceInEvent(this.#networkRequest) !== null;
 
     // If we have a stack trace, that is the most reliable way to get the initiator data and display a link to the source.
     if (hasStackTrace) {
@@ -296,6 +292,7 @@ export class NetworkRequestDetails extends HTMLElement {
                      this.#networkRequest.args.data.url as Platform.DevToolsPath.UrlString),
                  precomputedFeatures: undefined,
                  align: LegacyComponents.ImagePreview.Align.START,
+                 hideFileData: true,
                }) as HTMLImageElement);
 
       this.#requestPreviewElements.set(this.#networkRequest, previewElement);
@@ -303,7 +300,7 @@ export class NetworkRequestDetails extends HTMLElement {
 
     const requestPreviewElement = this.#requestPreviewElements.get(this.#networkRequest);
     if (requestPreviewElement) {
-      return this.#renderRow(i18nString(UIStrings.preview), requestPreviewElement);
+      return html`<div class="network-request-details-row">${requestPreviewElement}</div>`;
     }
     return null;
   }
@@ -318,6 +315,7 @@ export class NetworkRequestDetails extends HTMLElement {
     const output = html`
       ${this.#renderTitle()}
       ${this.#renderURL()}
+      ${await this.#renderPreviewElement()}
       <div class="network-request-details-cols">
         <div class="network-request-details-col">
           ${this.#renderRow(i18nString(UIStrings.requestMethod), networkData.requestMethod)}
@@ -335,7 +333,6 @@ export class NetworkRequestDetails extends HTMLElement {
         </div>
       </div>
       ${this.#renderInitiatedBy()}
-      ${await this.#renderPreviewElement()}
     `; // The last items are outside the 2 column layout because InitiatedBy can be very wide
     // clang-format on
     LitHtml.render(output, this.#shadow, {host: this});

package/front_end/panels/timeline/components/NetworkThrottlingSelector.test.ts

@@ -7,13 +7,12 @@ import * as SDK from '../../../core/sdk/sdk.js';
 import {getCleanTextContentFromElements, renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import type * as Menus from '../../../ui/components/menus/menus.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 MobileThrottling from '../../mobile_throttling/mobile_throttling.js';
 
 import * as Components from './components.js';
 
 describeWithEnvironment('NetworkThrottlingSelector', () => {
-  const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
   let networkManager: SDK.NetworkManager.MultitargetNetworkManager;
   let customNetworkSetting: Common.Settings.Setting<SDK.NetworkManager.Conditions[]>;
   let mockReveal: sinon.SinonStub;
@@ -33,7 +32,7 @@ describeWithEnvironment('NetworkThrottlingSelector', () => {
     const view = new Components.NetworkThrottlingSelector.NetworkThrottlingSelector();
     renderElementIntoDOM(view);
 
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     const groups = view.shadowRoot!.querySelectorAll('devtools-menu-group') as NodeListOf<Menus.Menu.MenuGroup>;
 
@@ -68,14 +67,14 @@ describeWithEnvironment('NetworkThrottlingSelector', () => {
     const view = new Components.NetworkThrottlingSelector.NetworkThrottlingSelector();
     renderElementIntoDOM(view);
 
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     const items = view.shadowRoot!.querySelectorAll('devtools-menu-item') as NodeListOf<Menus.Menu.MenuItem>;
     assert.isTrue(items[0].selected);
     assert.strictEqual(networkManager.networkConditions().i18nTitleKey, 'No throttling');
 
     items[1].click();
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     assert.isTrue(items[1].selected);
     assert.isFalse(items[0].selected);
@@ -85,7 +84,7 @@ describeWithEnvironment('NetworkThrottlingSelector', () => {
   it('correctly updates when a custom preset is selected', async () => {
     const view = new Components.NetworkThrottlingSelector.NetworkThrottlingSelector();
     renderElementIntoDOM(view);
-    await coordinator.done();
+    await RenderCoordinator.done();
     customNetworkSetting.set([
       {
         title: 'Custom item one',
@@ -101,7 +100,7 @@ describeWithEnvironment('NetworkThrottlingSelector', () => {
 
       },
     ]);
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     assert.isOk(view.shadowRoot);
     const items = view.shadowRoot.querySelectorAll('devtools-menu-item');
@@ -111,7 +110,7 @@ describeWithEnvironment('NetworkThrottlingSelector', () => {
         ['No throttling', 'Fast 4G', 'Slow 4G', '3G', 'Offline', 'Custom item one', 'Custom item two', 'Add…']);
 
     items[6].click();
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.deepEqual(Array.from(items).filter(i => i.selected), [items[6]]);
     assert.strictEqual(networkManager.networkConditions().title, 'Custom item two');
   });
@@ -122,7 +121,7 @@ describeWithEnvironment('NetworkThrottlingSelector', () => {
     networkManager.setNetworkConditions(MobileThrottling.ThrottlingPresets.ThrottlingPresets.networkPresets[1]);
 
     renderElementIntoDOM(view);
-    await coordinator.done();
+    await RenderCoordinator.done();
     // Ensure that the component picks up the new changes and has selected the right thorttling setting
     const items = view.shadowRoot!.querySelectorAll('devtools-menu-item');
     assert.isTrue(items[2].innerText.includes('Slow 4G'));
@@ -133,13 +132,13 @@ describeWithEnvironment('NetworkThrottlingSelector', () => {
     const view = new Components.NetworkThrottlingSelector.NetworkThrottlingSelector();
     renderElementIntoDOM(view);
 
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     const items = view.shadowRoot!.querySelectorAll('devtools-menu-item') as NodeListOf<Menus.Menu.MenuItem>;
     assert.isTrue(items[0].selected);
 
     networkManager.setNetworkConditions(MobileThrottling.ThrottlingPresets.ThrottlingPresets.networkPresets[1]);
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     assert.isTrue(items[2].selected);
     assert.isFalse(items[0].selected);
@@ -149,7 +148,7 @@ describeWithEnvironment('NetworkThrottlingSelector', () => {
     const view = new Components.NetworkThrottlingSelector.NetworkThrottlingSelector();
     renderElementIntoDOM(view);
 
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     let items = view.shadowRoot!.querySelectorAll('devtools-menu-item') as NodeListOf<HTMLElement>;
     assert.lengthOf(items, 6);
@@ -160,7 +159,7 @@ describeWithEnvironment('NetworkThrottlingSelector', () => {
       upload: 0,
       latency: 0,
     }]);
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     items = view.shadowRoot!.querySelectorAll('devtools-menu-item') as NodeListOf<HTMLElement>;
     assert.lengthOf(items, 7);
@@ -171,7 +170,7 @@ describeWithEnvironment('NetworkThrottlingSelector', () => {
     const view = new Components.NetworkThrottlingSelector.NetworkThrottlingSelector();
     renderElementIntoDOM(view);
 
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     const items = view.shadowRoot!.querySelectorAll('devtools-menu-item') as NodeListOf<Menus.Menu.MenuItem>;
     const addItem = items[items.length - 1];
@@ -179,7 +178,7 @@ describeWithEnvironment('NetworkThrottlingSelector', () => {
 
     assert.isFalse(addItem.selected);
 
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     assert(mockReveal.calledOnce);
     assert.isFalse(addItem.selected);