npm - chrome-devtools-frontend - Versions diffs - 1.0.1386602 → 1.0.1402249 - Mend

chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1404) hide show

package/front_end/panels/application/preloading/components/UsedPreloadingView.test.ts CHANGED Viewed

@@ -12,20 +12,18 @@ 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 ReportView from '../../../../ui/components/report_view/report_view.js';
 import * as PreloadingComponents from './components.js';
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 async function renderUsedPreloadingView(data: PreloadingComponents.UsedPreloadingView.UsedPreloadingViewData):
     Promise<HTMLElement> {
   const component = new PreloadingComponents.UsedPreloadingView.UsedPreloadingView();
   component.data = data;
   renderElementIntoDOM(component);
   assert.isNotNull(component.shadowRoot);
-  await coordinator.done();
+  await RenderCoordinator.done();
   return component;
 }
@@ -42,6 +40,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
             action: Protocol.Preload.SpeculationAction.Prefetch,
             url: 'https://example.com/prefetched.html' as Platform.DevToolsPath.UrlString,
           },
+          pipelineId: 'pipelineId:1' as Protocol.Preload.PreloadPipelineId,
           status: SDK.PreloadingModel.PreloadingStatus.SUCCESS,
           prefetchStatus: null,
           requestId: 'requestId:1' as Protocol.Network.RequestId,
@@ -55,6 +54,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
             action: Protocol.Preload.SpeculationAction.Prerender,
             url: 'https://example.com/prerendered.html' as Platform.DevToolsPath.UrlString,
           },
+          pipelineId: 'pipelineId:2' as Protocol.Preload.PreloadPipelineId,
           status: SDK.PreloadingModel.PreloadingStatus.FAILURE,
           prerenderStatus: Protocol.Preload.PrerenderFinalStatus.TriggerDestroyed,
           disallowedMojoInterface: null,
@@ -73,8 +73,8 @@ describeWithEnvironment('UsedPreloadingView', () => {
     const sections = getElementsWithinComponent(
         component, 'devtools-report devtools-report-section', ReportView.ReportView.ReportSection);
-    assert.strictEqual(headers.length, 2);
-    assert.strictEqual(sections.length, 3);
+    assert.lengthOf(headers, 2);
+    assert.lengthOf(sections, 3);
     assert.include(headers[0]?.textContent, 'Speculative loading status');
     assert.strictEqual(sections[0]?.querySelector('.status-badge span')?.textContent?.trim(), 'Success');
@@ -82,7 +82,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
     assert.include(headers[1]?.textContent, 'Speculations initiated by this page');
     const badges = sections[1]?.querySelectorAll('.status-badge span') || [];
-    assert.strictEqual(badges.length, 1);
+    assert.lengthOf(badges, 1);
     assert.strictEqual(badges[0]?.textContent?.trim(), 'No speculative loads');
     assert.include(sections[2]?.textContent, 'Learn more: Speculative loading on developer.chrome.com');
@@ -99,6 +99,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
             action: Protocol.Preload.SpeculationAction.Prefetch,
             url: 'https://example.com/prefetched.html' as Platform.DevToolsPath.UrlString,
           },
+          pipelineId: 'pipelineId:1' as Protocol.Preload.PreloadPipelineId,
           status: SDK.PreloadingModel.PreloadingStatus.READY,
           prefetchStatus: null,
           requestId: 'requestId:1' as Protocol.Network.RequestId,
@@ -112,6 +113,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
             action: Protocol.Preload.SpeculationAction.Prerender,
             url: 'https://example.com/prerendered.html' as Platform.DevToolsPath.UrlString,
           },
+          pipelineId: 'pipelineId:2' as Protocol.Preload.PreloadPipelineId,
           status: SDK.PreloadingModel.PreloadingStatus.SUCCESS,
           prerenderStatus: null,
           disallowedMojoInterface: null,
@@ -130,8 +132,8 @@ describeWithEnvironment('UsedPreloadingView', () => {
     const sections = getElementsWithinComponent(
         component, 'devtools-report devtools-report-section', ReportView.ReportView.ReportSection);
-    assert.strictEqual(headers.length, 2);
-    assert.strictEqual(sections.length, 3);
+    assert.lengthOf(headers, 2);
+    assert.lengthOf(sections, 3);
     assert.include(headers[0]?.textContent, 'Speculative loading status');
     assert.strictEqual(sections[0]?.querySelector('.status-badge span')?.textContent?.trim(), 'Success');
@@ -139,7 +141,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
     assert.include(headers[1]?.textContent, 'Speculations initiated by this page');
     const badges = sections[1]?.querySelectorAll('.status-badge span') || [];
-    assert.strictEqual(badges.length, 1);
+    assert.lengthOf(badges, 1);
     assert.strictEqual(badges[0]?.textContent?.trim(), 'No speculative loads');
     assert.include(sections[2]?.textContent, 'Learn more: Speculative loading on developer.chrome.com');
@@ -156,6 +158,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
             action: Protocol.Preload.SpeculationAction.Prefetch,
             url: 'https://example.com/prefetched.html' as Platform.DevToolsPath.UrlString,
           },
+          pipelineId: 'pipelineId:1' as Protocol.Preload.PreloadPipelineId,
           status: SDK.PreloadingModel.PreloadingStatus.FAILURE,
           prefetchStatus: Protocol.Preload.PrefetchStatus.PrefetchFailedIneligibleRedirect,
           requestId: 'requestId:1' as Protocol.Network.RequestId,
@@ -169,6 +172,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
             action: Protocol.Preload.SpeculationAction.Prerender,
             url: 'https://example.com/prerendered.html' as Platform.DevToolsPath.UrlString,
           },
+          pipelineId: 'pipelineId:2' as Protocol.Preload.PreloadPipelineId,
           status: SDK.PreloadingModel.PreloadingStatus.FAILURE,
           prerenderStatus: Protocol.Preload.PrerenderFinalStatus.TriggerDestroyed,
           disallowedMojoInterface: null,
@@ -187,8 +191,8 @@ describeWithEnvironment('UsedPreloadingView', () => {
     const sections = getElementsWithinComponent(
         component, 'devtools-report devtools-report-section', ReportView.ReportView.ReportSection);
-    assert.strictEqual(headers.length, 3);
-    assert.strictEqual(sections.length, 4);
+    assert.lengthOf(headers, 3);
+    assert.lengthOf(sections, 4);
     assert.include(headers[0]?.textContent, 'Speculative loading status');
     assert.strictEqual(sections[0]?.querySelector('.status-badge span')?.textContent?.trim(), 'Failure');
@@ -201,7 +205,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
     assert.include(headers[2]?.textContent, 'Speculations initiated by this page');
     const badges = sections[2]?.querySelectorAll('.status-badge span') || [];
-    assert.strictEqual(badges.length, 1);
+    assert.lengthOf(badges, 1);
     assert.strictEqual(badges[0]?.textContent?.trim(), 'No speculative loads');
     assert.include(sections[3]?.textContent, 'Learn more: Speculative loading on developer.chrome.com');
@@ -218,6 +222,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
             action: Protocol.Preload.SpeculationAction.Prefetch,
             url: 'https://example.com/prefetched.html' as Platform.DevToolsPath.UrlString,
           },
+          pipelineId: 'pipelineId:1' as Protocol.Preload.PreloadPipelineId,
           status: SDK.PreloadingModel.PreloadingStatus.READY,
           prefetchStatus: null,
           requestId: 'requestId:1' as Protocol.Network.RequestId,
@@ -231,6 +236,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
             action: Protocol.Preload.SpeculationAction.Prerender,
             url: 'https://example.com/prerendered.html' as Platform.DevToolsPath.UrlString,
           },
+          pipelineId: 'pipelineId:2' as Protocol.Preload.PreloadPipelineId,
           status: SDK.PreloadingModel.PreloadingStatus.FAILURE,
           prerenderStatus: Protocol.Preload.PrerenderFinalStatus.MojoBinderPolicy,
           disallowedMojoInterface: 'device.mojom.GamepadMonitor',
@@ -249,8 +255,8 @@ describeWithEnvironment('UsedPreloadingView', () => {
     const sections = getElementsWithinComponent(
         component, 'devtools-report devtools-report-section', ReportView.ReportView.ReportSection);
-    assert.strictEqual(headers.length, 3);
-    assert.strictEqual(sections.length, 4);
+    assert.lengthOf(headers, 3);
+    assert.lengthOf(sections, 4);
     assert.include(headers[0]?.textContent, 'Speculative loading status');
     assert.strictEqual(sections[0]?.querySelector('.status-badge span')?.textContent?.trim(), 'Failure');
@@ -264,7 +270,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
     assert.include(headers[2]?.textContent, 'Speculations initiated by this page');
     const badges = sections[2]?.querySelectorAll('.status-badge span') || [];
-    assert.strictEqual(badges.length, 1);
+    assert.lengthOf(badges, 1);
     assert.strictEqual(badges[0]?.textContent?.trim(), 'No speculative loads');
     assert.include(sections[3]?.textContent, 'Learn more: Speculative loading on developer.chrome.com');
@@ -281,6 +287,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
             action: Protocol.Preload.SpeculationAction.Prefetch,
             url: 'https://example.com/prefetched.html' as Platform.DevToolsPath.UrlString,
           },
+          pipelineId: 'pipelineId:1' as Protocol.Preload.PreloadPipelineId,
           status: SDK.PreloadingModel.PreloadingStatus.READY,
           prefetchStatus: null,
           requestId: 'requestId:1' as Protocol.Network.RequestId,
@@ -294,6 +301,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
             action: Protocol.Preload.SpeculationAction.Prerender,
             url: 'https://example.com/prerendered.html' as Platform.DevToolsPath.UrlString,
           },
+          pipelineId: 'pipelineId:2' as Protocol.Preload.PreloadPipelineId,
           status: SDK.PreloadingModel.PreloadingStatus.FAILURE,
           prerenderStatus: Protocol.Preload.PrerenderFinalStatus.ActivationNavigationParameterMismatch,
           disallowedMojoInterface: null,
@@ -326,8 +334,8 @@ describeWithEnvironment('UsedPreloadingView', () => {
         component, 'devtools-resources-preloading-mismatched-headers-grid',
         PreloadingComponents.PreloadingMismatchedHeadersGrid.PreloadingMismatchedHeadersGrid);
-    assert.strictEqual(headers.length, 4);
-    assert.strictEqual(sections.length, 5);
+    assert.lengthOf(headers, 4);
+    assert.lengthOf(sections, 5);
     assert.include(headers[0]?.textContent, 'Speculative loading status');
     assert.include(
@@ -351,7 +359,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
     assert.include(headers[3]?.textContent, 'Speculations initiated by this page');
     const badges = sections[3]?.querySelectorAll('.status-badge span') || [];
-    assert.strictEqual(badges.length, 1);
+    assert.lengthOf(badges, 1);
     assert.strictEqual(badges[0]?.textContent?.trim(), 'No speculative loads');
     assert.include(sections[4]?.textContent, 'Learn more: Speculative loading on developer.chrome.com');
@@ -368,6 +376,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
             action: Protocol.Preload.SpeculationAction.Prefetch,
             url: 'https://example.com/downgraded.html' as Platform.DevToolsPath.UrlString,
           },
+          pipelineId: 'pipelineId:1' as Protocol.Preload.PreloadPipelineId,
           status: SDK.PreloadingModel.PreloadingStatus.SUCCESS,
           prefetchStatus: null,
           requestId: 'requestId:1' as Protocol.Network.RequestId,
@@ -381,6 +390,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
             action: Protocol.Preload.SpeculationAction.Prerender,
             url: 'https://example.com/downgraded.html' as Platform.DevToolsPath.UrlString,
           },
+          pipelineId: 'pipelineId:2' as Protocol.Preload.PreloadPipelineId,
           status: SDK.PreloadingModel.PreloadingStatus.FAILURE,
           prerenderStatus: Protocol.Preload.PrerenderFinalStatus.MojoBinderPolicy,
           disallowedMojoInterface: 'device.mojom.GamepadMonitor',
@@ -399,8 +409,8 @@ describeWithEnvironment('UsedPreloadingView', () => {
     const sections = getElementsWithinComponent(
         component, 'devtools-report devtools-report-section', ReportView.ReportView.ReportSection);
-    assert.strictEqual(headers.length, 3);
-    assert.strictEqual(sections.length, 4);
+    assert.lengthOf(headers, 3);
+    assert.lengthOf(sections, 4);
     assert.include(headers[0]?.textContent, 'Speculative loading status');
     assert.strictEqual(sections[0]?.querySelector('.status-badge span')?.textContent?.trim(), 'Success');
@@ -414,7 +424,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
     assert.include(headers[2]?.textContent, 'Speculations initiated by this page');
     const badges = sections[2]?.querySelectorAll('.status-badge span') || [];
-    assert.strictEqual(badges.length, 1);
+    assert.lengthOf(badges, 1);
     assert.strictEqual(badges[0]?.textContent?.trim(), 'No speculative loads');
     assert.include(sections[3]?.textContent, 'Learn more: Speculative loading on developer.chrome.com');
@@ -434,8 +444,8 @@ describeWithEnvironment('UsedPreloadingView', () => {
     const sections = getElementsWithinComponent(
         component, 'devtools-report devtools-report-section', ReportView.ReportView.ReportSection);
-    assert.strictEqual(headers.length, 2);
-    assert.strictEqual(sections.length, 3);
+    assert.lengthOf(headers, 2);
+    assert.lengthOf(sections, 3);
     assert.include(headers[0]?.textContent, 'Speculative loading status');
     assert.strictEqual(sections[0]?.querySelector('.status-badge span')?.textContent?.trim(), 'No speculative loads');
@@ -444,7 +454,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
     assert.include(headers[1]?.textContent, 'Speculations initiated by this page');
     const badges = sections[1]?.querySelectorAll('.status-badge span') || [];
-    assert.strictEqual(badges.length, 1);
+    assert.lengthOf(badges, 1);
     assert.strictEqual(badges[0]?.textContent?.trim(), 'No speculative loads');
     assert.include(sections[2]?.textContent, 'Learn more: Speculative loading on developer.chrome.com');
@@ -461,6 +471,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
             action: Protocol.Preload.SpeculationAction.Prefetch,
             url: 'https://example.com/prefetched.html#beta' as Platform.DevToolsPath.UrlString,
           },
+          pipelineId: 'pipelineId:1' as Protocol.Preload.PreloadPipelineId,
           status: SDK.PreloadingModel.PreloadingStatus.SUCCESS,
           prefetchStatus: null,
           requestId: 'requestId:1' as Protocol.Network.RequestId,
@@ -478,8 +489,8 @@ describeWithEnvironment('UsedPreloadingView', () => {
     const sections = getElementsWithinComponent(
         component, 'devtools-report devtools-report-section', ReportView.ReportView.ReportSection);
-    assert.strictEqual(headers.length, 2);
-    assert.strictEqual(sections.length, 3);
+    assert.lengthOf(headers, 2);
+    assert.lengthOf(sections, 3);
     assert.include(headers[0]?.textContent, 'Speculative loading status');
     assert.strictEqual(sections[0]?.querySelector('.status-badge span')?.textContent?.trim(), 'Success');
@@ -487,7 +498,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
     assert.include(headers[1]?.textContent, 'Speculations initiated by this page');
     const badges = sections[1]?.querySelectorAll('.status-badge span') || [];
-    assert.strictEqual(badges.length, 1);
+    assert.lengthOf(badges, 1);
     assert.strictEqual(badges[0]?.textContent?.trim(), 'No speculative loads');
     assert.include(sections[2]?.textContent, 'Learn more: Speculative loading on developer.chrome.com');
@@ -505,6 +516,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
             action: Protocol.Preload.SpeculationAction.Prerender,
             url: 'https://example.com/prerendered.html#beta' as Platform.DevToolsPath.UrlString,
           },
+          pipelineId: 'pipelineId:1' as Protocol.Preload.PreloadPipelineId,
           status: SDK.PreloadingModel.PreloadingStatus.READY,
           prerenderStatus: null,
           disallowedMojoInterface: null,
@@ -523,8 +535,8 @@ describeWithEnvironment('UsedPreloadingView', () => {
     const sections = getElementsWithinComponent(
         component, 'devtools-report devtools-report-section', ReportView.ReportView.ReportSection);
-    assert.strictEqual(headers.length, 4);
-    assert.strictEqual(sections.length, 5);
+    assert.lengthOf(headers, 4);
+    assert.lengthOf(sections, 5);
     assert.include(headers[0]?.textContent, 'Speculative loading status');
     assert.strictEqual(sections[0]?.querySelector('.status-badge span')?.textContent?.trim(), 'No speculative loads');
@@ -545,7 +557,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
     assert.include(headers[3]?.textContent, 'Speculations initiated by this page');
     const badges = sections[3]?.querySelectorAll('.status-badge span') || [];
-    assert.strictEqual(badges.length, 1);
+    assert.lengthOf(badges, 1);
     assert.strictEqual(badges[0]?.textContent?.trim(), 'No speculative loads');
     assert.include(sections[4]?.textContent, 'Learn more: Speculative loading on developer.chrome.com');
@@ -562,6 +574,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
             action: Protocol.Preload.SpeculationAction.Prefetch,
             url: 'https://example.com/prefetched.html' as Platform.DevToolsPath.UrlString,
           },
+          pipelineId: 'pipelineId:1' as Protocol.Preload.PreloadPipelineId,
           status: SDK.PreloadingModel.PreloadingStatus.READY,
           prefetchStatus: null,
           requestId: 'requestId:1' as Protocol.Network.RequestId,
@@ -575,6 +588,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
             action: Protocol.Preload.SpeculationAction.Prerender,
             url: 'https://example.com/prerendered.html' as Platform.DevToolsPath.UrlString,
           },
+          pipelineId: 'pipelineId:2' as Protocol.Preload.PreloadPipelineId,
           status: SDK.PreloadingModel.PreloadingStatus.FAILURE,
           prerenderStatus: Protocol.Preload.PrerenderFinalStatus.TriggerDestroyed,
           disallowedMojoInterface: null,
@@ -593,8 +607,8 @@ describeWithEnvironment('UsedPreloadingView', () => {
     const sections = getElementsWithinComponent(
         component, 'devtools-report devtools-report-section', ReportView.ReportView.ReportSection);
-    assert.strictEqual(headers.length, 4);
-    assert.strictEqual(sections.length, 5);
+    assert.lengthOf(headers, 4);
+    assert.lengthOf(sections, 5);
     assert.include(headers[0]?.textContent, 'Speculative loading status');
     assert.strictEqual(sections[0]?.querySelector('.status-badge span')?.textContent?.trim(), 'No speculative loads');
@@ -607,7 +621,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
     assert.include(headers[3]?.textContent, 'Speculations initiated by this page');
     const badges = sections[3]?.querySelectorAll('.status-badge span') || [];
-    assert.strictEqual(badges.length, 1);
+    assert.lengthOf(badges, 1);
     assert.strictEqual(badges[0]?.textContent?.trim(), 'No speculative loads');
     assert.include(sections[4]?.textContent, 'Learn more: Speculative loading on developer.chrome.com');
@@ -625,6 +639,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
             action: Protocol.Preload.SpeculationAction.Prefetch,
             url: 'https://example.com/prefetch-not-triggered.html' as Platform.DevToolsPath.UrlString,
           },
+          pipelineId: null,
           status: SDK.PreloadingModel.PreloadingStatus.NOT_TRIGGERED,
           prefetchStatus: null,
           requestId: 'requestId:1' as Protocol.Network.RequestId,
@@ -638,6 +653,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
             action: Protocol.Preload.SpeculationAction.Prefetch,
             url: 'https://example.com/prefetch-running.html' as Platform.DevToolsPath.UrlString,
           },
+          pipelineId: 'pipelineId:2' as Protocol.Preload.PreloadPipelineId,
           status: SDK.PreloadingModel.PreloadingStatus.RUNNING,
           prefetchStatus: null,
           requestId: 'requestId:2' as Protocol.Network.RequestId,
@@ -651,6 +667,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
             action: Protocol.Preload.SpeculationAction.Prefetch,
             url: 'https://example.com/prefetch-ready.html' as Platform.DevToolsPath.UrlString,
           },
+          pipelineId: 'pipelineId:3' as Protocol.Preload.PreloadPipelineId,
           status: SDK.PreloadingModel.PreloadingStatus.READY,
           prefetchStatus: null,
           requestId: 'requestId:3' as Protocol.Network.RequestId,
@@ -664,6 +681,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
             action: Protocol.Preload.SpeculationAction.Prefetch,
             url: 'https://example.com/prefetch-failure.html' as Platform.DevToolsPath.UrlString,
           },
+          pipelineId: 'pipelineId:4' as Protocol.Preload.PreloadPipelineId,
           status: SDK.PreloadingModel.PreloadingStatus.FAILURE,
           prefetchStatus: null,
           requestId: 'requestId:4' as Protocol.Network.RequestId,
@@ -677,6 +695,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
             action: Protocol.Preload.SpeculationAction.Prerender,
             url: 'https://example.com/prerender-pending.html' as Platform.DevToolsPath.UrlString,
           },
+          pipelineId: 'pipelineId:5' as Protocol.Preload.PreloadPipelineId,
           status: SDK.PreloadingModel.PreloadingStatus.PENDING,
           prerenderStatus: null,
           disallowedMojoInterface: null,
@@ -691,6 +710,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
             action: Protocol.Preload.SpeculationAction.Prerender,
             url: 'https://example.com/prerender-ready.html' as Platform.DevToolsPath.UrlString,
           },
+          pipelineId: 'pipelineId:6' as Protocol.Preload.PreloadPipelineId,
           status: SDK.PreloadingModel.PreloadingStatus.READY,
           prerenderStatus: null,
           mismatchedHeaders: null,
@@ -708,8 +728,8 @@ describeWithEnvironment('UsedPreloadingView', () => {
     const sections = getElementsWithinComponent(
         component, 'devtools-report devtools-report-section', ReportView.ReportView.ReportSection);
-    assert.strictEqual(headers.length, 2);
-    assert.strictEqual(sections.length, 3);
+    assert.lengthOf(headers, 2);
+    assert.lengthOf(sections, 3);
     assert.include(headers[0]?.textContent, 'Speculative loading status');
     assert.strictEqual(sections[0]?.querySelector('.status-badge span')?.textContent?.trim(), 'No speculative loads');
@@ -718,7 +738,7 @@ describeWithEnvironment('UsedPreloadingView', () => {
     assert.include(headers[1]?.textContent, 'Speculations initiated by this page');
     const badges = sections[1]?.querySelectorAll('.status-badge span') || [];
-    assert.strictEqual(badges.length, 4);
+    assert.lengthOf(badges, 4);
     assert.strictEqual(badges[0]?.textContent?.trim(), '1 not triggered');
     assert.strictEqual(badges[1]?.textContent?.trim(), '2 in progress');
     assert.strictEqual(badges[2]?.textContent?.trim(), '2 success');

package/front_end/panels/application/preloading/components/UsedPreloadingView.ts CHANGED Viewed

@@ -14,7 +14,7 @@ import {assertNotNullOrUndefined} from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Protocol from '../../../../generated/protocol.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';
@@ -122,8 +122,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/application/preloading/components/UsedPreloadingView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 export interface UsedPreloadingViewData {
   pageURL: Platform.DevToolsPath.UrlString;
   previousAttempts: SDK.PreloadingModel.PreloadingAttempt[];
@@ -160,7 +158,7 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
   }
   async #render(): Promise<void> {
-    await coordinator.write('UsedPreloadingView render', () => {
+    await RenderCoordinator.write('UsedPreloadingView render', () => {
       LitHtml.render(this.#renderInternal(), this.#shadow, {host: this});
     });
   }

package/front_end/panels/application/preloading/components/preloadingDisabledInfobar.css CHANGED Viewed

@@ -7,28 +7,19 @@
 #container {
   padding: 6px 12px;
   border-bottom: 1px solid var(--sys-color-divider);
+  align-items: center;
+  display: flex;
 }
 #contents {
-  margin-top: 14px;
+  margin-top: calc(-1 * var(--sys-size-6));
+  padding: 0 var(--sys-size-8) var(--sys-size-2);
 }
 #contents * {
   background: var(--color-background-elevation-dark-only);
 }
-#title {
-  padding-bottom: 12px;
-  font-size: 15px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  border-bottom: 1px solid var(--sys-color-divider);
-  color: var(--sys-color-token-subtle);
-  grid-column-start: span 2;
-  font-weight: bold;
-}
 #contents .key {
   grid-column-start: span 2;
   padding: 12px 0;
@@ -42,14 +33,10 @@
 }
 #footer {
-  padding-top: 12px;
-  font-size: 15px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: var(--sys-color-token-subtle);
   grid-column-start: span 2;
-  font-weight: bold;
 }
 #footer .icon-link {

package/front_end/panels/application/resourcesPanel.css CHANGED Viewed

@@ -67,8 +67,7 @@
 .storage-view.query {
   padding: 2px 0;
-  overflow-y: overlay;
-  overflow-x: hidden;
+  overflow: hidden overlay;
 }
 .storage-view .filter-bar {

package/front_end/panels/application/serviceWorkersView.css CHANGED Viewed

@@ -140,11 +140,6 @@
   flex-grow: 0;
 }
-.service-workers-this-origin,
-.service-workers-other-origin {
-  min-width: max-content;
-}
 .service-worker-has-current .service-workers-other-origin {
   margin-top: 16px;
   border-top: 1px solid var(--sys-color-divider);

package/front_end/panels/autofill/AutofillView.test.ts CHANGED Viewed

@@ -11,13 +11,11 @@ import {renderElementIntoDOM} from '../../testing/DOMHelpers.js';
 import {createTarget, stubNoopSettings} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
 import {getMainFrame, navigate} from '../../testing/ResourceTreeHelpers.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 Autofill from './autofill.js';
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 const addressFormFilledEvent = {
   addressUi: {
     addressFields: [
@@ -114,14 +112,14 @@ describeWithMockConnection('AutofillView', () => {
     const view = new Autofill.AutofillView.AutofillView();
     renderElementIntoDOM(view);
     await view.render();
-    await coordinator.done();
+    await RenderCoordinator.done();
     return view;
   };
   const assertViewShowsEventData = (view: Autofill.AutofillView.AutofillView) => {
     const addressSpans = view.shadowRoot!.querySelectorAll('.address span');
     const addressText = [...addressSpans].map(div => div.textContent);
-    assert.deepStrictEqual(
+    assert.deepEqual(
         addressText, ['Crocodile', ' Middle ', 'Dundee', 'Uluru ToursOutback Road 1Bundaberg Queensland ', '12345']);
     const expectedHeaders = ['Form field', 'Predicted autofill value', 'Value', 'filledFieldIndex'];
     const expectedRows = [
@@ -140,12 +138,12 @@ describeWithMockConnection('AutofillView', () => {
     assert.strictEqual(placeholderText, expectedPlaceholder);
     autofillModel.addressFormFilled(addressFormFilledEvent);
-    await coordinator.done({waitForWork: true});
+    await RenderCoordinator.done({waitForWork: true});
     assertViewShowsEventData(view);
     navigate(getMainFrame(target));
-    await coordinator.done();
+    await RenderCoordinator.done();
     placeholderText = view.shadowRoot!.querySelector('.placeholder div')!.textContent!.trim();
     assert.strictEqual(placeholderText, expectedPlaceholder);
   });
@@ -156,7 +154,7 @@ describeWithMockConnection('AutofillView', () => {
     const view = await renderAutofillView();
     assert.isNotNull(view.shadowRoot);
     assertViewShowsEventData(view);
-    await coordinator.done();
+    await RenderCoordinator.done();
   });
   it('auto-open can be turned off/on', async () => {
@@ -183,7 +181,7 @@ describeWithMockConnection('AutofillView', () => {
     autofillModel.addressFormFilled(addressFormFilledEvent);
     assert.isTrue(showViewStub.calledOnceWithExactly('autofill-view'));
-    await coordinator.done();
+    await RenderCoordinator.done();
   });
   it('showing test addresses in autofill menu can be turned off/on', async () => {
@@ -206,7 +204,7 @@ describeWithMockConnection('AutofillView', () => {
     checkbox.dispatchEvent(event);
     assert.isTrue(setAddressSpy.calledOnce);
-    await coordinator.done();
+    await RenderCoordinator.done();
   });
   it('highlights corresponding grid row when hovering over address span', async () => {
@@ -228,14 +226,14 @@ describeWithMockConnection('AutofillView', () => {
     assert.strictEqual(styles.replace(/\s/g, ''), monospaceStyles);
     crocodileSpan.dispatchEvent(new MouseEvent('mouseenter'));
-    await coordinator.done({waitForWork: true});
+    await RenderCoordinator.done({waitForWork: true});
     assert.isTrue(crocodileSpan.classList.contains('highlighted'));
     styles = firstGridRow.getAttribute('style') || '';
     assert.strictEqual(
         styles.replace(/\s/g, ''), monospaceStyles + 'background-color:var(--sys-color-state-hover-on-subtle);');
     crocodileSpan.dispatchEvent(new MouseEvent('mouseleave'));
-    await coordinator.done({waitForWork: true});
+    await RenderCoordinator.done({waitForWork: true});
     assert.isFalse(crocodileSpan.classList.contains('highlighted'));
     styles = firstGridRow.getAttribute('style') || '';
     assert.strictEqual(styles.replace(/\s/g, ''), monospaceStyles);
@@ -271,7 +269,7 @@ describeWithMockConnection('AutofillView', () => {
     assert.isNotNull(grid.shadowRoot);
     const fourthGridRow = getBodyRowByAriaIndex(grid.shadowRoot, 4);
     fourthGridRow.dispatchEvent(new MouseEvent('mouseenter'));
-    await coordinator.done({waitForWork: true});
+    await RenderCoordinator.done({waitForWork: true});
     assert.isTrue(zipCodeSpan.classList.contains('highlighted'));
     assert.isTrue(overlaySpy.calledOnce);
     const deferredNode =
@@ -280,7 +278,7 @@ describeWithMockConnection('AutofillView', () => {
     assert.isTrue(hideOverlaySpy.notCalled);
     fourthGridRow.dispatchEvent(new MouseEvent('mouseleave'));
-    await coordinator.done({waitForWork: true});
+    await RenderCoordinator.done({waitForWork: true});
     assert.isFalse(zipCodeSpan.classList.contains('highlighted'));
     assert.isTrue(hideOverlaySpy.calledOnce);
     getFrameStub.restore();

package/front_end/panels/browser_debugger/XHRBreakpointsSidebarPane.ts CHANGED Viewed

@@ -183,7 +183,7 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
   createElementForItem(item: string): Element {
     const listItemElement = document.createElement('div');
     UI.ARIAUtils.markAsListitem(listItemElement);
-    const element = listItemElement.createChild('div', 'breakpoint-entry') as HTMLElement;
+    const element = listItemElement.createChild('div', 'breakpoint-entry');
     containerToBreakpointEntry.set(listItemElement, element);
     const enabled = SDK.DOMDebuggerModel.DOMDebuggerManager.instance().xhrBreakpoints().get(item) || false;
     UI.ARIAUtils.markAsCheckbox(element);
@@ -192,7 +192,7 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
     const title = item ? i18nString(UIStrings.urlContainsS, {PH1: item}) : i18nString(UIStrings.anyXhrOrFetch);
     const label = UI.UIUtils.CheckboxLabel.create(title, enabled, undefined, undefined, /* small */ true);
-    UI.ARIAUtils.markAsHidden(label);
+    UI.ARIAUtils.setHidden(label, true);
     UI.ARIAUtils.setLabel(element, title);
     element.appendChild(label);
     label.checkboxElement.addEventListener('click', this.checkboxClicked.bind(this, item, enabled), false);

package/front_end/panels/console/ConsoleContextSelector.ts CHANGED Viewed

@@ -212,8 +212,7 @@ export class ConsoleContextSelector implements SDK.TargetManager.SDKModelObserve
   createElementForItem(item: SDK.RuntimeModel.ExecutionContext): Element {
     const element = document.createElement('div');
-    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(
-        element, {cssFile: [consoleContextSelectorStyles], delegatesFocus: undefined});
+    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(element, {cssFile: [consoleContextSelectorStyles]});
     const title = shadowRoot.createChild('div', 'title');
     UI.UIUtils.createTextChild(title, Platform.StringUtilities.trimEndWithMaxLength(this.titleFor(item), 100));
     const subTitle = shadowRoot.createChild('div', 'subtitle');