chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

package/front_end/panels/{freestyler/components/freestylerChatUi.css → ai_assistance/components/chatView.css}

@@ -61,6 +61,28 @@
   @container (height < 224px) {
     position: static;
   }
+
+  & .input-form-shadow-container {
+    position: absolute;
+    top: 0;
+    left: -2px; /* Needed for aligning with other divider lines */
+    width: calc(100% + 4px); /* Needed for extending the divider line to the edges */
+    height: var(--sys-size-4);
+
+    & .input-form-shadow {
+      height: 100%;
+      box-shadow: 0 -3px 2px -2px var(--app-color-ai-assistance-input-divider);
+      animation: reveal;
+      /* stylelint-disable-next-line property-no-unknown */
+      animation-timeline: --scroll-timeline;
+      animation-fill-mode: both;
+
+      --visibility-if-can-scroll: var(--can-scroll) visible;
+      --visibility-if-cant-scroll: hidden;
+
+      visibility: var(--visibility-if-can-scroll, var(--visibility-if-cant-scroll));
+    }
+  }
 }
 
 .chat-readonly-container {
@@ -150,6 +172,10 @@
   padding-right: var(--sys-size-3);
 }
 
+.chat-inline-button {
+  padding-left: 3px;
+}
+
 .chat-cancel-context-button {
   padding-bottom: 3px;
   padding-right: var(--sys-size-3);
@@ -243,7 +269,7 @@
   .resource-link,
   .resource-task {
     cursor: pointer;
-    padding: var(--sys-size-2) var(--sys-size-4);
+    padding: var(--sys-size-2) 3px;
     font: var(--sys-typescale-body4-size);
     border: var(--sys-size-1) solid var(--sys-color-divider);
     border-radius: var(--sys-shape-corner-extra-small);
@@ -252,6 +278,14 @@
     white-space: nowrap;
     max-width: var(--sys-size-32);
 
+    &.allow-overflow {
+      overflow: visible;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--sys-color-state-focus-ring);
+    }
+
     .icon,
     devtools-file-source-icon {
       display: inline-flex;
@@ -478,8 +512,7 @@ button.link {
 }
 
 main {
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden auto;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -492,6 +525,12 @@ main {
   fixes the `.input-form` jumping on scroll issue.
   */
   transform: translateZ(1px);
+
+  /* stylelint-disable-next-line property-no-unknown */
+  scroll-timeline: --scroll-timeline y;
+  animation: detect-scroll;
+  /* stylelint-disable-next-line property-no-unknown */
+  animation-timeline: --scroll-timeline;
 }
 
 .empty-state-container {
@@ -640,3 +679,19 @@ main {
   display: flex;
   gap: var(--sys-size-4);
 }
+
+@keyframes reveal {
+  0%,
+  99% {
+    opacity: 100%;
+  }
+
+  100% {
+    opacity: 0%;
+  }
+}
+
+@keyframes detect-scroll {
+  from,
+  to { --can-scroll: ; }
+}

package/front_end/panels/animation/AnimationTimeline.ts

@@ -326,7 +326,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements
 
     this.#playbackRateButtons = [];
     for (const playbackRate of GlobalPlaybackRates) {
-      const button = (playbackRateControl.createChild('button', 'animation-playback-rate-button') as HTMLElement);
+      const button = playbackRateControl.createChild('button', 'animation-playback-rate-button');
       button.textContent = playbackRate ? i18nString(UIStrings.playbackRatePlaceholder, {PH1: playbackRate * 100}) :
                                           i18nString(UIStrings.pause);
       button.setAttribute(
@@ -342,7 +342,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements
       this.#playbackRateButtons.push(button);
     }
     this.updatePlaybackControls();
-    this.#previewContainer = (this.contentElement.createChild('div', 'animation-timeline-buffer') as HTMLElement);
+    this.#previewContainer = this.contentElement.createChild('div', 'animation-timeline-buffer');
     this.#previewContainer.setAttribute('jslog', `${VisualLogging.section('film-strip')}`);
     UI.ARIAUtils.markAsListBox(this.#previewContainer);
     UI.ARIAUtils.setLabel(this.#previewContainer, i18nString(UIStrings.animationPreviews));
@@ -350,7 +350,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements
     emptyBufferHint.textContent = i18nString(UIStrings.waitingForAnimations);
     const container = this.contentElement.createChild('div', 'animation-timeline-header');
     const controls = container.createChild('div', 'animation-controls');
-    this.#currentTime = (controls.createChild('div', 'animation-timeline-current-time monospace') as HTMLElement);
+    this.#currentTime = controls.createChild('div', 'animation-timeline-current-time monospace');
 
     const toolbar = new UI.Toolbar.Toolbar('animation-controls-toolbar', controls);
     this.#controlButton = new UI.Toolbar.ToolbarButton(

package/front_end/panels/animation/AnimationUI.ts

@@ -68,7 +68,7 @@ export class AnimationUI {
         this.#keyframes.reverse();
       }
     }
-    this.#nameElement = (parentElement.createChild('div', 'animation-name') as HTMLElement);
+    this.#nameElement = parentElement.createChild('div', 'animation-name');
     this.#nameElement.textContent = this.#animationInternal.name();
 
     this.#svg = UI.UIUtils.createSVGChild(parentElement, 'svg', 'animation-ui');

package/front_end/panels/animation/animationTimeline.css

@@ -40,12 +40,12 @@
 }
 
 path.animation-keyframe {
-  fill-opacity: 0.2;
+  fill-opacity: 20%;
 }
 
 .animation-node-selected path.animation-keyframe,
 svg.animation-ui g:first-child:hover path.animation-keyframe {
-  fill-opacity: 0.4;
+  fill-opacity: 40%;
 }
 
 line.animation-line {
@@ -228,10 +228,7 @@ circle.animation-keyframe-point:active {
 
 svg.animation-timeline-grid {
   position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   width: 100%;
   height: 100%;
 }
@@ -282,7 +279,7 @@ svg.animation-ui path:focus-visible {
 
 .animation-keyframe-step line {
   stroke-width: 2;
-  stroke-opacity: 0.3;
+  stroke-opacity: 30%;
 }
 
 text.animation-timeline-grid-label {
@@ -305,6 +302,7 @@ text.animation-timeline-grid-label {
   position: relative;
 
   & .screenshot-arrow {
+    /* stylelint-disable-next-line custom-property-pattern */
     background-image: var(--image-file-popoverArrows);
     background-position: 0 76px;
     width: 19px;
@@ -360,9 +358,8 @@ text.animation-timeline-grid-label {
 .animation-timeline-rows,
 .animation-timeline-rows-hint {
   flex-grow: 1;
-  overflow-y: auto;
+  overflow: hidden auto;
   z-index: 1;
-  overflow-x: hidden;
 }
 
 .animation-timeline-rows-hint {
@@ -537,7 +534,7 @@ text.animation-timeline-grid-label {
   outline-offset: 2px;
 }
 
-.animation-playback-rate-button:not(.selected):not([disabled]):hover {
+.animation-playback-rate-button:not(.selected, [disabled]):hover {
   background: var(--sys-color-state-hover-on-subtle);
 }
 

package/front_end/panels/application/AppManifestView.test.ts

@@ -108,14 +108,14 @@ describeWithMockConnection('AppManifestView', () => {
       height: 512,
       formatted: '512×512px',
     } as Application.AppManifestView.ParsedSize];
-    assert.deepStrictEqual(parsed, expected);
+    assert.deepEqual(parsed, expected);
   });
 
   it('can handle missing ‘sizes’-field', async () => {
     view = new Application.AppManifestView.AppManifestView(emptyView, reportView, throttler);
     const parsed = view.parseSizes(
         undefined as unknown as string, 'Icon' as Platform.UIString.LocalizedString, 'https://web.dev/image.html', []);
-    assert.deepStrictEqual(parsed, []);
+    assert.deepEqual(parsed, []);
   });
 
   async function renderWithWarnings(manifest: string): Promise<string[]> {
@@ -181,7 +181,7 @@ describeWithMockConnection('AppManifestView', () => {
       'Richer PWA Install UI won’t be available on mobile. Please add at least one screenshot for which form_factor is not set or set to a value other than wide.',
       'Most operating systems require square icons. Please include at least one square icon in the array.',
     ];
-    assert.deepStrictEqual(actual, expected);
+    assert.deepEqual(actual, expected);
   });
 
   it('displays warnings for too many mobile screenshots', async () => {
@@ -224,7 +224,7 @@ describeWithMockConnection('AppManifestView', () => {
       'No more than 5 screenshots will be displayed on mobile. The rest will be ignored.',
       'Most operating systems require square icons. Please include at least one square icon in the array.',
     ];
-    assert.deepStrictEqual(actual, expected);
+    assert.deepEqual(actual, expected);
   });
 
   it('displays warnings for too many desktop screenshots and wrong aspect ratio', async () => {
@@ -292,7 +292,7 @@ describeWithMockConnection('AppManifestView', () => {
       'No more than 8 screenshots will be displayed on desktop. The rest will be ignored.',
       'Most operating systems require square icons. Please include at least one square icon in the array.',
     ];
-    assert.deepStrictEqual(actual, expected);
+    assert.deepEqual(actual, expected);
   });
 
   it('displays "form-factor", "platform" and "label" properties for screenshots', async () => {
@@ -312,10 +312,10 @@ describeWithMockConnection('AppManifestView', () => {
     const screenshotSection =
         reportView.element.shadowRoot?.querySelectorAll<HTMLDivElement>('.report-section')[7] || null;
     assert.instanceOf(screenshotSection, HTMLDivElement);
-    assert.deepStrictEqual(
+    assert.deepEqual(
         getCleanTextContentFromElements(screenshotSection, '.report-field-name').slice(0, 3),
         ['Form factor', 'Label', 'Platform']);
-    assert.deepStrictEqual(
+    assert.deepEqual(
         getCleanTextContentFromElements(screenshotSection, '.report-field-value').slice(0, 3),
         ['wide', 'Dummy Screenshot', 'windows']);
   });

package/front_end/panels/application/AppManifestView.ts

@@ -1259,7 +1259,7 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
       await this.overlayModel?.toggleWindowControlsToolbar(wcoOsCheckbox.checkboxElement.checked);
     });
 
-    const osSelectElement = (wcoOsCheckbox.createChild('select', 'chrome-select') as HTMLSelectElement);
+    const osSelectElement = wcoOsCheckbox.createChild('select', 'chrome-select');
     osSelectElement.appendChild(UI.UIUtils.createOption('Windows', SDK.OverlayModel.EmulatedOSType.WINDOWS, 'windows'));
     osSelectElement.appendChild(UI.UIUtils.createOption('macOS', SDK.OverlayModel.EmulatedOSType.MAC, 'macos'));
     osSelectElement.appendChild(UI.UIUtils.createOption('Linux', SDK.OverlayModel.EmulatedOSType.LINUX, 'linux'));

package/front_end/panels/application/ApplicationPanelSidebar.test.ts

@@ -12,13 +12,11 @@ import {
   setMockConnectionResponseHandler,
 } from '../../testing/MockConnection.js';
 import {createResource, getMainFrame} 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 Application from './application.js';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 class SharedStorageTreeElementListener {
   #sidebar: Application.ApplicationPanelSidebar.ApplicationPanelSidebar;
   #originsAdded: Array<String> = new Array<String>();
@@ -145,7 +143,7 @@ describeWithMockConnection('ApplicationPanelSidebar', () => {
     resourceTreeModel.dispatchEventToListeners(SDK.ResourceTreeModel.Events.CachedResourcesLoaded, resourceTreeModel);
 
     assert.strictEqual(sidebar.cookieListTreeElement.childCount(), 2);
-    assert.deepStrictEqual(
+    assert.deepEqual(
         sidebar.cookieListTreeElement.children().map(e => e.title),
         ['http://www.example.com', 'http://www.example.org']);
   });
@@ -180,7 +178,7 @@ describeWithMockConnection('ApplicationPanelSidebar', () => {
     assert.isTrue(setTrackingSpy.calledOnceWithExactly({enable: true}));
 
     assert.strictEqual(sidebar.sharedStorageListTreeElement.childCount(), 3);
-    assert.deepStrictEqual(sidebar.sharedStorageListTreeElement.children().map(e => e.title), [
+    assert.deepEqual(sidebar.sharedStorageListTreeElement.children().map(e => e.title), [
       TEST_ORIGIN_A,
       TEST_ORIGIN_B,
       TEST_ORIGIN_C,
@@ -221,12 +219,11 @@ describeWithMockConnection('ApplicationPanelSidebar', () => {
       if (useTreeView) {
         assert.strictEqual(sidebar.extensionStorageListTreeElement!.childCount(), 1);
         assert.strictEqual(sidebar.extensionStorageListTreeElement!.children()[0].title, TEST_EXTENSION_NAME);
-        assert.deepStrictEqual(
+        assert.deepEqual(
             sidebar.extensionStorageListTreeElement!.children()[0].children().map(e => e.title), ['Session', 'Local']);
       } else {
         assert.strictEqual(sidebar.extensionStorageListTreeElement!.childCount(), 2);
-        assert.deepStrictEqual(
-            sidebar.extensionStorageListTreeElement!.children().map(e => e.title), ['Session', 'Local']);
+        assert.deepEqual(sidebar.extensionStorageListTreeElement!.children().map(e => e.title), ['Session', 'Local']);
       }
 
       extensionStorageModel.dispatchEventToListeners(
@@ -281,7 +278,7 @@ describeWithMockConnection('ApplicationPanelSidebar', () => {
     Application.ResourcesPanel.ResourcesPanel.instance({forceNew: true});
     const sidebar = await Application.ResourcesPanel.ResourcesPanel.showAndGetSidebar();
     const components = expectedCall.split('.');
-    assert.strictEqual(components.length, 2);
+    assert.lengthOf(components, 2);
     // @ts-ignore
     const object = sidebar[components[0]];
     assert.exists(object);
@@ -300,7 +297,7 @@ describeWithMockConnection('ApplicationPanelSidebar', () => {
     SDK.TargetManager.TargetManager.instance().setScopeTarget(inScope ? target : null);
     const expectedCall = await getExpectedCall(expectedCallString);
     const model = target.model(modelClass);
-    await coordinator.done({waitForWork: true});
+    await RenderCoordinator.done({waitForWork: true});
     assert.exists(model);
     const data = [{...MOCK_EVENT_ITEM, model}] as Common.EventTarget.EventPayloadToRestParameters<Events, T>;
     model.dispatchEventToListeners(event as Platform.TypeScriptUtilities.NoUnion<T>, ...data);
@@ -365,7 +362,7 @@ describeWithMockConnection('ApplicationPanelSidebar', () => {
     sinon.stub(model, getter).returns([MOCK_GETTER_ITEM]);
     SDK.TargetManager.TargetManager.instance().setScopeTarget(target);
     await new Promise(resolve => setTimeout(resolve, 0));
-    assert.strictEqual(expectedCall.called, true);
+    assert.isTrue(expectedCall.called);
   };
 
   it('adds DOM storage element after scope change',

package/front_end/panels/application/BackgroundServiceView.ts

@@ -9,7 +9,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
-// eslint-disable-next-line rulesdir/es_modules_import
+// eslint-disable-next-line rulesdir/es-modules-import
 import emptyWidgetStyles from '../../ui/legacy/emptyWidget.css.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';

package/front_end/panels/application/DOMStorageModel.test.ts

@@ -23,7 +23,7 @@ describeWithMockConnection('DOMStorageModel', () => {
 
   it('DOMStorage is instantiated correctly', () => {
     assert.strictEqual(domStorage.storageKey, initKey);
-    assert.deepStrictEqual(domStorage.id, {storageKey: initKey, isLocalStorage: true} as Protocol.DOMStorage.StorageId);
+    assert.deepEqual(domStorage.id, {storageKey: initKey, isLocalStorage: true} as Protocol.DOMStorage.StorageId);
   });
 
   it('StorageKey events trigger addition/removal of DOMStorage', () => {

package/front_end/panels/application/ExtensionStorageItemsView.test.ts

@@ -11,15 +11,13 @@ import {
   describeWithMockConnection,
 } from '../../testing/MockConnection.js';
 import {getCellElementFromNodeAndColumnId, selectNodeByKey} from '../../testing/StorageItemsViewHelpers.js';
-import * as Coordinator from '../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 import type * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 
 import * as Resources from './application.js';
 
 import View = Resources.ExtensionStorageItemsView;
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 class ExtensionStorageItemsListener {
   #dispatcher: Common.ObjectWrapper.ObjectWrapper<View.ExtensionStorageItemsDispatcher.EventTypes>;
   #edited: boolean = false;
@@ -105,7 +103,7 @@ describeWithMockConnection('ExtensionStorageItemsView', function() {
     assert.deepEqual(
         view.getEntriesForTesting(), Object.keys(EXAMPLE_DATA).map(key => ({key, value: EXAMPLE_DATA[key]})));
 
-    await coordinator.done();
+    await RenderCoordinator.done();
     view.detach();
   });
 
@@ -155,7 +153,7 @@ describeWithMockConnection('ExtensionStorageItemsView', function() {
       setStorageItems.reset();
     }
 
-    await coordinator.done();
+    await RenderCoordinator.done();
     view.detach();
   });
 });

package/front_end/panels/application/ExtensionStorageModel.test.ts

@@ -190,10 +190,10 @@ describeWithMockConnection('ExtensionStorageModel', () => {
     await addedPromise;
 
     STORAGE_AREAS.forEach(area => assert.exists(extensionStorageModel.storageForIdAndArea(initId, area)));
-    assert.strictEqual(4, extensionStorageModel.storages().length);
+    assert.lengthOf(extensionStorageModel.storages(), 4);
 
     runtime.executionContextCreated(mockExecutionContext);
-    assert.strictEqual(4, extensionStorageModel.storages().length);
+    assert.lengthOf(extensionStorageModel.storages(), 4);
   });
 
   it('removes ExtensionStorage when last ExecutionContext is removed', async () => {
@@ -219,15 +219,15 @@ describeWithMockConnection('ExtensionStorageModel', () => {
     await addedPromise;
 
     STORAGE_AREAS.forEach(area => assert.exists(extensionStorageModel.storageForIdAndArea(initId, area)));
-    assert.strictEqual(4, extensionStorageModel.storages().length);
+    assert.lengthOf(extensionStorageModel.storages(), 4);
 
     // If a single execution context is destroyed but another remains,
     // ExtensionStorage should not be removed.
     runtime.executionContextDestroyed(mockExecutionContext1.id);
-    assert.strictEqual(4, extensionStorageModel.storages().length);
+    assert.lengthOf(extensionStorageModel.storages(), 4);
 
     runtime.executionContextDestroyed(mockExecutionContext2.id);
-    assert.strictEqual(0, extensionStorageModel.storages().length);
+    assert.lengthOf(extensionStorageModel.storages(), 0);
   });
 
   it('matches service worker target on same origin', () => {

package/front_end/panels/application/IndexedDBViews.test.ts

@@ -8,14 +8,12 @@ import {
   renderElementIntoDOM,
 } from '../../testing/DOMHelpers.js';
 import {describeWithLocale} 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 UI from '../../ui/legacy/legacy.js';
 
 import * as Application from './application.js';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 // Disabled due to flakiness
 describeWithLocale.skip('[crbug.com/1473557]: IDBDatabaseView', () => {
   it('renders with a title and top-level site', async function() {
@@ -37,7 +35,7 @@ describeWithLocale.skip('[crbug.com/1473557]: IDBDatabaseView', () => {
     renderElementIntoDOM(component);
 
     assert.isNotNull(component.shadowRoot);
-    await coordinator.done();
+    await RenderCoordinator.done();
     const report = getElementWithinComponent(component, 'devtools-report', ReportView.ReportView.Report);
     assert.isNotNull(report.shadowRoot);
 
@@ -75,7 +73,7 @@ describeWithLocale.skip('[crbug.com/1473557]: IDBDatabaseView', () => {
     renderElementIntoDOM(component);
 
     assert.isNotNull(component.shadowRoot);
-    await coordinator.done();
+    await RenderCoordinator.done();
     const report = getElementWithinComponent(component, 'devtools-report', ReportView.ReportView.Report);
     assert.isNotNull(report.shadowRoot);
 
@@ -110,7 +108,7 @@ describeWithLocale.skip('[crbug.com/1473557]: IDBDatabaseView', () => {
     renderElementIntoDOM(component);
 
     assert.isNotNull(component.shadowRoot);
-    await coordinator.done();
+    await RenderCoordinator.done();
     const report = getElementWithinComponent(component, 'devtools-report', ReportView.ReportView.Report);
     assert.isNotNull(report.shadowRoot);
 
@@ -164,10 +162,10 @@ describeWithLocale.skip('[crbug.com/1473557]: IDBDatabaseView', () => {
     renderElementIntoDOM(component);
 
     assert.isNotNull(component.shadowRoot);
-    await coordinator.done({waitForWork: true});
+    await RenderCoordinator.done({waitForWork: true});
 
     const buttons = component.shadowRoot.querySelectorAll('devtools-button');
-    assert.strictEqual(buttons.length, 2);
+    assert.lengthOf(buttons, 2);
     assert.instanceOf(buttons[0], HTMLElement);
     assert.strictEqual(buttons[0].textContent?.trim(), 'Delete database');
     const showDialog = sinon.stub(UI.UIUtils.ConfirmDialog, 'show').resolves(true);

package/front_end/panels/application/InterestGroupTreeElement.test.ts

@@ -32,6 +32,6 @@ describeWithMockConnection('InterestGroupTreeElement', () => {
         .withArgs({ownerOrigin: OWNER, name: NAME})
         .returns(Promise.resolve({details: DETAILS} as Protocol.Storage.GetInterestGroupDetailsResponse));
     const details = await view.getInterestGroupDetails(OWNER, NAME);
-    assert.deepStrictEqual(details, DETAILS);
+    assert.deepEqual(details, DETAILS);
   });
 });

package/front_end/panels/application/ServiceWorkerUpdateCycleView.test.ts

@@ -21,7 +21,7 @@ describeWithLocale('ServiceWorkerUpdateCycleView', () => {
 
     let view = new View.ServiceWorkerUpdateCycleView(registration);
     let ranges = view.calculateServiceWorkerUpdateRanges();
-    assert.strictEqual(ranges.length, 0, 'A nascent registration has no ranges to display.');
+    assert.lengthOf(ranges, 0, 'A nascent registration has no ranges to display.');
 
     versionId++;
     let versionPayload: Protocol.ServiceWorker.ServiceWorkerVersion = {
@@ -34,7 +34,7 @@ describeWithLocale('ServiceWorkerUpdateCycleView', () => {
     registration.updateVersion(versionPayload);
     view = new View.ServiceWorkerUpdateCycleView(registration);
     ranges = view.calculateServiceWorkerUpdateRanges();
-    assert.strictEqual(ranges.length, 0, 'A new registration has no ranges to display.');
+    assert.lengthOf(ranges, 0, 'A new registration has no ranges to display.');
 
     versionId++;
     versionPayload = {
@@ -47,7 +47,7 @@ describeWithLocale('ServiceWorkerUpdateCycleView', () => {
     registration.updateVersion(versionPayload);
     view = new View.ServiceWorkerUpdateCycleView(registration);
     ranges = view.calculateServiceWorkerUpdateRanges();
-    assert.strictEqual(ranges.length, 1, 'An installing registration has a range to display.');
+    assert.lengthOf(ranges, 1, 'An installing registration has a range to display.');
 
     versionId++;
     versionPayload = {
@@ -60,8 +60,7 @@ describeWithLocale('ServiceWorkerUpdateCycleView', () => {
     registration.updateVersion(versionPayload);
     view = new View.ServiceWorkerUpdateCycleView(registration);
     ranges = view.calculateServiceWorkerUpdateRanges();
-    assert.strictEqual(
-        ranges.length, 1, 'An installing registration (reported multiple times) has a range to display.');
+    assert.lengthOf(ranges, 1, 'An installing registration (reported multiple times) has a range to display.');
 
     versionId++;
     versionPayload = {
@@ -74,7 +73,7 @@ describeWithLocale('ServiceWorkerUpdateCycleView', () => {
     registration.updateVersion(versionPayload);
     view = new View.ServiceWorkerUpdateCycleView(registration);
     ranges = view.calculateServiceWorkerUpdateRanges();
-    assert.strictEqual(ranges.length, 1, 'An installed registration has a range to display. ');
+    assert.lengthOf(ranges, 1, 'An installed registration has a range to display. ');
 
     versionId++;
     versionPayload = {
@@ -87,7 +86,7 @@ describeWithLocale('ServiceWorkerUpdateCycleView', () => {
     registration.updateVersion(versionPayload);
     view = new View.ServiceWorkerUpdateCycleView(registration);
     ranges = view.calculateServiceWorkerUpdateRanges();
-    assert.strictEqual(ranges.length, 3, 'An activating registration has ranges to display.');
+    assert.lengthOf(ranges, 3, 'An activating registration has ranges to display.');
 
     versionId++;
     versionPayload = {
@@ -100,7 +99,7 @@ describeWithLocale('ServiceWorkerUpdateCycleView', () => {
     registration.updateVersion(versionPayload);
     view = new View.ServiceWorkerUpdateCycleView(registration);
     ranges = view.calculateServiceWorkerUpdateRanges();
-    assert.strictEqual(ranges.length, 3, 'An activating registration has ranges to display.');
+    assert.lengthOf(ranges, 3, 'An activating registration has ranges to display.');
 
     versionId++;
     versionPayload = {
@@ -113,7 +112,7 @@ describeWithLocale('ServiceWorkerUpdateCycleView', () => {
     registration.updateVersion(versionPayload);
     view = new View.ServiceWorkerUpdateCycleView(registration);
     ranges = view.calculateServiceWorkerUpdateRanges();
-    assert.strictEqual(ranges.length, 3, 'An activated registration has ranges to display.');
+    assert.lengthOf(ranges, 3, 'An activated registration has ranges to display.');
 
     versionId++;
     versionPayload = {
@@ -126,6 +125,6 @@ describeWithLocale('ServiceWorkerUpdateCycleView', () => {
     registration.updateVersion(versionPayload);
     view = new View.ServiceWorkerUpdateCycleView(registration);
     ranges = view.calculateServiceWorkerUpdateRanges();
-    assert.strictEqual(ranges.length, 3, 'A redundent registration has ranges to display.');
+    assert.lengthOf(ranges, 3, 'A redundent registration has ranges to display.');
   });
 });

package/front_end/panels/application/ServiceWorkerUpdateCycleView.ts

@@ -212,7 +212,7 @@ export class ServiceWorkerUpdateCycleView {
   private constructUpdateDetails(tr: HTMLElement, range: ServiceWorkerUpdateRange): void {
     const startRow = this.tableElement.createChild('tr', 'service-worker-update-timing-bar-details');
     startRow.classList.add('service-worker-update-timing-bar-details-collapsed');
-    const startTimeItem = startRow.createChild('td') as HTMLTableCellElement;
+    const startTimeItem = startRow.createChild('td');
     startTimeItem.colSpan = 3;
     const startTime = (new Date(range.start)).toISOString();
     UI.UIUtils.createTextChild(startTimeItem.createChild('span'), i18nString(UIStrings.startTimeS, {PH1: startTime}));
@@ -220,7 +220,7 @@ export class ServiceWorkerUpdateCycleView {
 
     const endRow = this.tableElement.createChild('tr', 'service-worker-update-timing-bar-details');
     endRow.classList.add('service-worker-update-timing-bar-details-collapsed');
-    const endTimeItem = endRow.createChild('td') as HTMLTableCellElement;
+    const endTimeItem = endRow.createChild('td');
     endTimeItem.colSpan = 3;
     const endTime = (new Date(range.end)).toISOString();
     UI.UIUtils.createTextChild(endTimeItem.createChild('span'), i18nString(UIStrings.endTimeS, {PH1: endTime}));

package/front_end/panels/application/ServiceWorkersView.ts

@@ -900,7 +900,6 @@ export class Section {
            * inside so we are registering the files here. */
         serviceWorkerUpdateCycleViewStyles,
       ],
-      delegatesFocus: undefined,
     });
     const contentElement = document.createElement('div');
     shadowRoot.appendChild(contentElement);