chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

package/front_end/panels/{freestyler → ai_assistance}/components/UserActionRow.ts

@@ -141,6 +141,7 @@ export class UserActionRow extends HTMLElement {
     if (this.#currentRating === rating) {
       this.#currentRating = undefined;
       this.#isShowingFeedbackForm = false;
+      this.#isSubmitButtonDisabled = true;
       // This effectively reset the user rating
       this.#props.onFeedbackSubmit(Host.AidaClient.Rating.SENTIMENT_UNSPECIFIED);
       this.#render();
@@ -155,6 +156,7 @@ export class UserActionRow extends HTMLElement {
 
   #handleClose = (): void => {
     this.#isShowingFeedbackForm = false;
+    this.#isSubmitButtonDisabled = true;
     this.#render();
   };
 
@@ -166,6 +168,7 @@ export class UserActionRow extends HTMLElement {
     }
     this.#props.onFeedbackSubmit(this.#currentRating, input.value);
     this.#isShowingFeedbackForm = false;
+    this.#isSubmitButtonDisabled = true;
     this.#render();
   };
 
@@ -288,21 +291,23 @@ export class UserActionRow extends HTMLElement {
         <span class="feedback-disclaimer">${
           lockedString(UIStringsNotTranslate.disclaimer)
         }</span>
-        <devtools-button
-        aria-label=${lockedString(UIStringsNotTranslate.submit)}
-        .data=${
-          {
-              type: 'submit',
-              disabled: this.#isSubmitButtonDisabled,
-              variant: Buttons.Button.Variant.OUTLINED,
-              size: Buttons.Button.Size.SMALL,
-              title: lockedString(UIStringsNotTranslate.submit),
-              jslogContext: 'send',
-            } as Buttons.Button.ButtonData
-          }
-        >${
-          lockedString(UIStringsNotTranslate.submit)
-        }</devtools-button>
+        <div>
+          <devtools-button
+          aria-label=${lockedString(UIStringsNotTranslate.submit)}
+          .data=${
+            {
+                type: 'submit',
+                disabled: this.#isSubmitButtonDisabled,
+                variant: Buttons.Button.Variant.OUTLINED,
+                size: Buttons.Button.Size.SMALL,
+                title: lockedString(UIStringsNotTranslate.submit),
+                jslogContext: 'send',
+              } as Buttons.Button.ButtonData
+            }
+          >${
+            lockedString(UIStringsNotTranslate.submit)
+          }</devtools-button>
+        </div>
       </div>
     </form>
     `;

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 {
@@ -125,12 +147,36 @@
       opacity: 100%;
     }
   }
+
+  &.one-big-button {
+    /* start new chat button */
+    --right-padding: 100px;
+  }
+
+  &.two-big-buttons {
+    /* cancel + start new chat button */
+    --right-padding: 172px;
+  }
 }
 
-.chat-input-button {
+.chat-input-buttons {
   position: absolute;
   right: 0;
   bottom: 0;
+  display: flex;
+  flex-direction: row;
+}
+
+.chat-input-button {
+  padding-bottom: 3px;
+  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);
 }
@@ -223,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);
@@ -232,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;
@@ -458,8 +512,7 @@ button.link {
 }
 
 main {
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden auto;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -472,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 {
@@ -620,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/{freestyler → ai_assistance}/components/userActionRow.css

@@ -17,6 +17,7 @@
   gap: var(--sys-size-8);
   justify-content: space-between;
   align-items: center;
+  margin-block: calc(-1 * var(--sys-size-3));
 }
 
 .rate-buttons {
@@ -81,7 +82,7 @@
     overflow: auto hidden;
     scrollbar-width: none;
     gap: var(--sys-size-3);
-    padding-right: var(--sys-size-1);
+    padding: var(--sys-size-3);
   }
 
   .scroll-button-container {

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(
@@ -860,7 +860,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements
         this.#pauseButton.setEnabled(false);
       }
     } else {
-      this.setDuration(Math.max(500, group.finiteDuration() + 100));
+      this.setDuration(group.finiteDuration());
       this.#playbackRateButtons.forEach(button => {
         button.removeAttribute('disabled');
       });
@@ -966,7 +966,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements
         lastDraw = gridWidth;
         const label = UI.UIUtils.createSVGChild(this.#grid, 'text', 'animation-timeline-grid-label');
         label.textContent = isScrollDriven ? `${time.toFixed(0)}px` : i18n.TimeUtilities.millisToString(time);
-        label.setAttribute('x', (gridWidth + 10).toString());
+        label.setAttribute('x', (gridWidth + 12).toString());
         label.setAttribute('y', '16');
       }
     }
@@ -1053,8 +1053,6 @@ export class AnimationTimeline extends UI.Widget.VBox implements
     this.setCurrentTimeText(this.#scrubberCurrentTime());
     if (this.#scrubberPlayer.playState.toString() === 'pending' || this.#scrubberPlayer.playState === 'running') {
       this.element.window().requestAnimationFrame(this.updateScrubber.bind(this));
-    } else if (this.#scrubberPlayer.playState === 'finished') {
-      this.clearCurrentTimeText();
     }
   }
 

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

@@ -4,7 +4,6 @@
 
 import type * as Common from '../../core/common/common.js';
 import type * as Platform from '../../core/platform/platform.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import {createTarget, stubNoopSettings} from '../../testing/EnvironmentHelpers.js';
@@ -13,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>();
@@ -146,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']);
   });
@@ -181,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,
@@ -196,8 +193,6 @@ describeWithMockConnection('ApplicationPanelSidebar', () => {
   });
 
   it('shows extension storage based on added models', async () => {
-    Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.EXTENSION_STORAGE_VIEWER);
-
     for (const useTreeView of [false, true]) {
       Application.ResourcesPanel.ResourcesPanel.instance({forceNew: true});
       const sidebar = await Application.ResourcesPanel.ResourcesPanel.showAndGetSidebar();
@@ -224,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(
@@ -241,8 +235,6 @@ describeWithMockConnection('ApplicationPanelSidebar', () => {
   });
 
   it('does not add extension storage if already added by another model', async () => {
-    Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.EXTENSION_STORAGE_VIEWER);
-
     Application.ResourcesPanel.ResourcesPanel.instance({forceNew: true});
     const sidebar = await Application.ResourcesPanel.ResourcesPanel.showAndGetSidebar();
 
@@ -286,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);
@@ -305,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);
@@ -370,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/ApplicationPanelSidebar.ts

@@ -36,7 +36,6 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
@@ -281,7 +280,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
   serviceWorkersTreeElement: ServiceWorkersTreeElement;
   localStorageListTreeElement: ExpandableApplicationPanelTreeElement;
   sessionStorageListTreeElement: ExpandableApplicationPanelTreeElement;
-  extensionStorageListTreeElement: ExpandableApplicationPanelTreeElement|undefined;
+  extensionStorageListTreeElement: ExpandableApplicationPanelTreeElement;
   indexedDBListTreeElement: IndexedDBTreeElement;
   interestGroupTreeElement: InterestGroupTreeElement;
   cookieListTreeElement: ExpandableApplicationPanelTreeElement;
@@ -364,17 +363,15 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
 
     storageTreeElement.appendChild(this.sessionStorageListTreeElement);
 
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.EXTENSION_STORAGE_VIEWER)) {
-      this.extensionStorageListTreeElement =
-          new ExpandableApplicationPanelTreeElement(panel, i18nString(UIStrings.extensionStorage), 'extension-storage');
-      this.extensionStorageListTreeElement.setLink(
-          'https://developer.chrome.com/docs/extensions/reference/api/storage/?utm_source=devtools' as
-          Platform.DevToolsPath.UrlString);
-      const extensionStorageIcon = IconButton.Icon.create('table');
-      this.extensionStorageListTreeElement.setLeadingIcons([extensionStorageIcon]);
+    this.extensionStorageListTreeElement =
+        new ExpandableApplicationPanelTreeElement(panel, i18nString(UIStrings.extensionStorage), 'extension-storage');
+    this.extensionStorageListTreeElement.setLink(
+        'https://developer.chrome.com/docs/extensions/reference/api/storage/?utm_source=devtools' as
+        Platform.DevToolsPath.UrlString);
+    const extensionStorageIcon = IconButton.Icon.create('table');
+    this.extensionStorageListTreeElement.setLeadingIcons([extensionStorageIcon]);
 
-      storageTreeElement.appendChild(this.extensionStorageListTreeElement);
-    }
+    storageTreeElement.appendChild(this.extensionStorageListTreeElement);
 
     this.indexedDBListTreeElement = new IndexedDBTreeElement(panel);
     this.indexedDBListTreeElement.setLink(
@@ -472,14 +469,12 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
         },
         {scoped: true});
 
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.EXTENSION_STORAGE_VIEWER)) {
-      SDK.TargetManager.TargetManager.instance().observeModels(
-          ExtensionStorageModel, {
-            modelAdded: (model: ExtensionStorageModel) => this.extensionStorageModelAdded(model),
-            modelRemoved: (model: ExtensionStorageModel) => this.extensionStorageModelRemoved(model),
-          },
-          {scoped: true});
-    }
+    SDK.TargetManager.TargetManager.instance().observeModels(
+        ExtensionStorageModel, {
+          modelAdded: (model: ExtensionStorageModel) => this.extensionStorageModelAdded(model),
+          modelRemoved: (model: ExtensionStorageModel) => this.extensionStorageModelRemoved(model),
+        },
+        {scoped: true});
 
     SDK.TargetManager.TargetManager.instance().observeModels(
         IndexedDBModel, {
@@ -1190,7 +1185,6 @@ export class ManifestChildTreeElement extends ApplicationPanelTreeElement {
     (this.parent as AppManifestTreeElement)?.showManifestView();
     this.#sectionElement.scrollIntoView();
     UI.ARIAUtils.alert(i18nString(UIStrings.onInvokeAlert, {PH1: this.listItemElement.title}));
-    Host.userMetrics.manifestSectionSelected(this.listItemElement.title);
   }
   // direct focus to the corresponding element
   onInvokeElementKeydown(event: KeyboardEvent): void {

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', () => {