chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

package/front_end/panels/animation/AnimationTimeline.ts

@@ -11,15 +11,7 @@ import * as Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import type {AnimationDOMNode} from './AnimationDOMNode.js';
 import {AnimationGroupPreviewUI} from './AnimationGroupPreviewUI.js';
-import {
-  type AnimationEffect,
-  type AnimationGroup,
-  type AnimationImpl,
-  AnimationModel,
-  Events,
-} from './AnimationModel.js';
 import {AnimationScreenshotPopover} from './AnimationScreenshotPopover.js';
 import animationTimelineStyles from './animationTimeline.css.js';
 import {AnimationUI} from './AnimationUI.js';
@@ -97,7 +89,8 @@ const MAX_TIMELINE_CONTROLS_WIDTH = 720;
 
 let animationTimelineInstance: AnimationTimeline;
 
-export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManager.SDKModelObserver<AnimationModel> {
+export class AnimationTimeline extends UI.Widget.VBox implements
+    SDK.TargetManager.SDKModelObserver<SDK.AnimationModel.AnimationModel> {
   #gridWrapper: HTMLElement;
   #grid: Element;
   #playbackRate: number;
@@ -109,16 +102,16 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
   #timelineScrubber!: HTMLElement;
   #currentTime!: HTMLElement;
   #clearButton!: UI.Toolbar.ToolbarButton;
-  #selectedGroup!: AnimationGroup|null;
+  #selectedGroup!: SDK.AnimationModel.AnimationGroup|null;
   #renderQueue!: AnimationUI[];
   #defaultDuration: number;
   #durationInternal: number;
   #timelineControlsWidth: number;
   readonly #nodesMap: Map<number, NodeUI>;
   #uiAnimations: AnimationUI[];
-  #groupBuffer: AnimationGroup[];
-  readonly #previewMap: Map<AnimationGroup, AnimationGroupPreviewUI>;
-  readonly #animationsMap: Map<string, AnimationImpl>;
+  #groupBuffer: SDK.AnimationModel.AnimationGroup[];
+  readonly #previewMap: Map<SDK.AnimationModel.AnimationGroup, AnimationGroupPreviewUI>;
+  readonly #animationsMap: Map<string, SDK.AnimationModel.AnimationImpl>;
   #timelineScrubberLine?: HTMLElement;
   #pauseButton?: UI.Toolbar.ToolbarToggle;
   #controlButton?: UI.Toolbar.ToolbarButton;
@@ -133,13 +126,10 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
   #timelineControlsResizer: HTMLElement;
   #gridHeader!: HTMLElement;
   #scrollListenerId?: number|null;
-  #collectedGroups: AnimationGroup[];
+  #collectedGroups: SDK.AnimationModel.AnimationGroup[];
   #createPreviewForCollectedGroupsThrottler: Common.Throttler.Throttler = new Common.Throttler.Throttler(10);
   #animationGroupUpdatedThrottler: Common.Throttler.Throttler = new Common.Throttler.Throttler(10);
 
-  // We're only adding event listeners to the animation model when the panel is first shown.
-  #initialized: boolean = false;
-
   private constructor() {
     super(true);
 
@@ -175,7 +165,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.DOMModel.DOMModel, SDK.DOMModel.Events.NodeRemoved, ev => this.markNodeAsRemoved(ev.data.node), this,
         {scoped: true});
-    SDK.TargetManager.TargetManager.instance().observeModels(AnimationModel, this, {scoped: true});
+    SDK.TargetManager.TargetManager.instance().observeModels(SDK.AnimationModel.AnimationModel, this, {scoped: true});
     UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.nodeChanged, this);
 
     this.#setupTimelineControlsResizer();
@@ -214,7 +204,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
         'ew-resize');
   }
 
-  get previewMap(): Map<AnimationGroup, AnimationGroupPreviewUI> {
+  get previewMap(): Map<SDK.AnimationModel.AnimationGroup, AnimationGroupPreviewUI> {
     return this.#previewMap;
   }
 
@@ -222,43 +212,75 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
     return this.#uiAnimations;
   }
 
-  get groupBuffer(): AnimationGroup[] {
+  get groupBuffer(): SDK.AnimationModel.AnimationGroup[] {
     return this.#groupBuffer;
   }
 
   override wasShown(): void {
-    if (this.#initialized) {
-      return;
-    }
-
-    for (const animationModel of SDK.TargetManager.TargetManager.instance().models(AnimationModel, {scoped: true})) {
+    for (const animationModel of SDK.TargetManager.TargetManager.instance().models(
+             SDK.AnimationModel.AnimationModel, {scoped: true})) {
+      this.#addExistingAnimationGroups(animationModel);
       this.addEventListeners(animationModel);
     }
     this.registerCSSFiles([animationTimelineStyles]);
-    this.#initialized = true;
   }
 
-  modelAdded(animationModel: AnimationModel): void {
+  override willHide(): void {
+    for (const animationModel of SDK.TargetManager.TargetManager.instance().models(
+             SDK.AnimationModel.AnimationModel, {scoped: true})) {
+      this.removeEventListeners(animationModel);
+    }
+  }
+
+  #addExistingAnimationGroups(animationModel: SDK.AnimationModel.AnimationModel): void {
+    for (const animationGroup of animationModel.animationGroups.values()) {
+      if (this.#previewMap.has(animationGroup)) {
+        continue;
+      }
+
+      void this.addAnimationGroup(animationGroup);
+    }
+  }
+
+  #showPanelInDrawer(): void {
+    const viewManager = UI.ViewManager.ViewManager.instance();
+    viewManager.moveView('animations', 'drawer-view', {
+      shouldSelectTab: true,
+      overrideSaving: true,
+    });
+  }
+
+  async revealAnimationGroup(animationGroup: SDK.AnimationModel.AnimationGroup): Promise<void> {
+    if (!this.#previewMap.has(animationGroup)) {
+      await this.addAnimationGroup(animationGroup);
+    }
+
+    this.#showPanelInDrawer();
+    return this.selectAnimationGroup(animationGroup);
+  }
+
+  modelAdded(animationModel: SDK.AnimationModel.AnimationModel): void {
     if (this.isShowing()) {
       this.addEventListeners(animationModel);
     }
   }
 
-  modelRemoved(animationModel: AnimationModel): void {
+  modelRemoved(animationModel: SDK.AnimationModel.AnimationModel): void {
     this.removeEventListeners(animationModel);
   }
 
-  private addEventListeners(animationModel: AnimationModel): void {
-    void animationModel.ensureEnabled();
-    animationModel.addEventListener(Events.AnimationGroupStarted, this.animationGroupStarted, this);
-    animationModel.addEventListener(Events.AnimationGroupUpdated, this.animationGroupUpdated, this);
-    animationModel.addEventListener(Events.ModelReset, this.reset, this);
+  private addEventListeners(animationModel: SDK.AnimationModel.AnimationModel): void {
+    animationModel.addEventListener(SDK.AnimationModel.Events.AnimationGroupStarted, this.animationGroupStarted, this);
+    animationModel.addEventListener(SDK.AnimationModel.Events.AnimationGroupUpdated, this.animationGroupUpdated, this);
+    animationModel.addEventListener(SDK.AnimationModel.Events.ModelReset, this.reset, this);
   }
 
-  private removeEventListeners(animationModel: AnimationModel): void {
-    animationModel.removeEventListener(Events.AnimationGroupStarted, this.animationGroupStarted, this);
-    animationModel.removeEventListener(Events.AnimationGroupUpdated, this.animationGroupUpdated, this);
-    animationModel.removeEventListener(Events.ModelReset, this.reset, this);
+  private removeEventListeners(animationModel: SDK.AnimationModel.AnimationModel): void {
+    animationModel.removeEventListener(
+        SDK.AnimationModel.Events.AnimationGroupStarted, this.animationGroupStarted, this);
+    animationModel.removeEventListener(
+        SDK.AnimationModel.Events.AnimationGroupUpdated, this.animationGroupUpdated, this);
+    animationModel.removeEventListener(SDK.AnimationModel.Events.ModelReset, this.reset, this);
   }
 
   private nodeChanged(): void {
@@ -401,7 +423,8 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
     }
 
     this.#playbackRate = playbackRate;
-    for (const animationModel of SDK.TargetManager.TargetManager.instance().models(AnimationModel, {scoped: true})) {
+    for (const animationModel of SDK.TargetManager.TargetManager.instance().models(
+             SDK.AnimationModel.AnimationModel, {scoped: true})) {
       animationModel.setPlaybackRate(this.#allPaused ? 0 : this.#playbackRate);
     }
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.AnimationsPlaybackRateChanged);
@@ -496,7 +519,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
 
   private clearTimeline(): void {
     if (this.#selectedGroup && this.#scrollListenerId) {
-      void this.#selectedGroup.scrollNode().then((node: AnimationDOMNode|null) => {
+      void this.#selectedGroup.scrollNode().then((node: SDK.AnimationModel.AnimationDOMNode|null) => {
         void node?.removeScrollEventListener(this.#scrollListenerId as number);
         this.#scrollListenerId = undefined;
       });
@@ -530,14 +553,16 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
     this.renderGrid();
   }
 
-  private animationGroupStarted({data}: Common.EventTarget.EventTargetEvent<AnimationGroup>): void {
-    this.addAnimationGroup(data);
+  private animationGroupStarted({data}: Common.EventTarget.EventTargetEvent<SDK.AnimationModel.AnimationGroup>): void {
+    void this.addAnimationGroup(data);
   }
 
   scheduledRedrawAfterAnimationGroupUpdatedForTest(): void {
   }
 
-  private animationGroupUpdated({data: group}: Common.EventTarget.EventTargetEvent<AnimationGroup>): void {
+  private animationGroupUpdated({
+    data: group,
+  }: Common.EventTarget.EventTargetEvent<SDK.AnimationModel.AnimationGroup>): void {
     void this.#animationGroupUpdatedThrottler.schedule(async () => {
       const preview = this.#previewMap.get(group);
       if (preview) {
@@ -586,7 +611,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
     this.#screenshotPopovers = [];
   }
 
-  private createPreview(group: AnimationGroup): void {
+  private createPreview(group: SDK.AnimationModel.AnimationGroup): void {
     const preview = new AnimationGroupPreviewUI(group);
 
     const previewUiContainer = document.createElement('div');
@@ -674,7 +699,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
     this.previewsCreatedForTest();
   }
 
-  private addAnimationGroup(group: AnimationGroup): void {
+  private addAnimationGroup(group: SDK.AnimationModel.AnimationGroup): Promise<void> {
     const previewGroup = this.#previewMap.get(group);
     if (previewGroup) {
       if (this.#selectedGroup === group) {
@@ -682,7 +707,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
       } else {
         previewGroup.replay();
       }
-      return;
+      return Promise.resolve();
     }
 
     this.#groupBuffer.sort((left, right) => left.startTime() - right.startTime());
@@ -707,11 +732,11 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
     // Batch creating preview for arrivals happening closely together to ensure
     // stable UI sorting in the preview container.
     this.#collectedGroups.push(group);
-    void this.#createPreviewForCollectedGroupsThrottler.schedule(
+    return this.#createPreviewForCollectedGroupsThrottler.schedule(
         () => Promise.resolve(this.createPreviewForCollectedGroups()));
   }
 
-  private handleAnimationGroupKeyDown(group: AnimationGroup, event: KeyboardEvent): void {
+  private handleAnimationGroupKeyDown(group: SDK.AnimationModel.AnimationGroup, event: KeyboardEvent): void {
     switch (event.key) {
       case 'Backspace':
       case 'Delete':
@@ -727,7 +752,8 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
     }
   }
 
-  private focusNextGroup(group: AnimationGroup, target: EventTarget|null, focusPrevious?: boolean): void {
+  private focusNextGroup(group: SDK.AnimationModel.AnimationGroup, target: EventTarget|null, focusPrevious?: boolean):
+      void {
     const currentGroupIndex = this.#groupBuffer.indexOf(group);
     const nextIndex = focusPrevious ? currentGroupIndex - 1 : currentGroupIndex + 1;
     if (nextIndex < 0 || nextIndex >= this.#groupBuffer.length) {
@@ -744,7 +770,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
     }
   }
 
-  private removeAnimationGroup(group: AnimationGroup, event: Event): void {
+  private removeAnimationGroup(group: SDK.AnimationModel.AnimationGroup, event: Event): void {
     const currentGroupIndex = this.#groupBuffer.indexOf(group);
 
     Platform.ArrayUtilities.removeElement(this.#groupBuffer, group);
@@ -789,7 +815,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
         this.#selectedGroup?.isScrollDriven() ? `${time.toFixed(0)}px` : i18n.TimeUtilities.millisToString(time);
   }
 
-  private async selectAnimationGroup(group: AnimationGroup): Promise<void> {
+  private async selectAnimationGroup(group: SDK.AnimationModel.AnimationGroup): Promise<void> {
     if (this.#selectedGroup === group) {
       this.togglePause(false);
       this.replay();
@@ -797,7 +823,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
     }
     this.clearTimeline();
     this.#selectedGroup = group;
-    this.#previewMap.forEach((previewUI: AnimationGroupPreviewUI, group: AnimationGroup) => {
+    this.#previewMap.forEach((previewUI: AnimationGroupPreviewUI, group: SDK.AnimationModel.AnimationGroup) => {
       previewUI.element.classList.toggle('selected', this.#selectedGroup === group);
     });
 
@@ -864,7 +890,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
   animationGroupSelectedForTest(): void {
   }
 
-  private async addAnimation(animation: AnimationImpl): Promise<void> {
+  private async addAnimation(animation: SDK.AnimationModel.AnimationImpl): Promise<void> {
     let nodeUI = this.#nodesMap.get(animation.source().backendNodeId());
     if (!nodeUI) {
       nodeUI = new NodeUI(animation.source());
@@ -1136,7 +1162,7 @@ export class NodeUI {
   #overlayElement?: HTMLElement;
   #node?: SDK.DOMModel.DOMNode|null;
 
-  constructor(_animationEffect: AnimationEffect) {
+  constructor(_animationEffect: SDK.AnimationModel.AnimationEffect) {
     this.element = document.createElement('div');
     this.element.classList.add('animation-node-row');
     this.#description = this.element.createChild('div', 'animation-node-description');
@@ -1213,3 +1239,9 @@ export class StepTimingFunction {
     return null;
   }
 }
+
+export class AnimationGroupRevealer implements Common.Revealer.Revealer<SDK.AnimationModel.AnimationGroup> {
+  async reveal(animationGroup: SDK.AnimationModel.AnimationGroup): Promise<void> {
+    await AnimationTimeline.instance().revealAnimationGroup(animationGroup);
+  }
+}

package/front_end/panels/animation/AnimationUI.ts

@@ -11,7 +11,6 @@ import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_e
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import type {AnimationImpl, KeyframeStyle} from './AnimationModel.js';
 import {type AnimationTimeline, StepTimingFunction} from './AnimationTimeline.js';
 
 const UIStrings = {
@@ -40,9 +39,9 @@ type CachedElement = {
 };
 
 export class AnimationUI {
-  #animationInternal: AnimationImpl;
+  #animationInternal: SDK.AnimationModel.AnimationImpl;
   #timeline: AnimationTimeline;
-  #keyframes?: KeyframeStyle[];
+  #keyframes?: SDK.AnimationModel.KeyframeStyle[];
   #nameElement: HTMLElement;
   readonly #svg: Element;
   #activeIntervalGroup: Element;
@@ -58,7 +57,7 @@ export class AnimationUI {
   #keyframeMoved?: number|null;
   #downMouseX?: number;
 
-  constructor(animation: AnimationImpl, timeline: AnimationTimeline, parentElement: Element) {
+  constructor(animation: SDK.AnimationModel.AnimationImpl, timeline: AnimationTimeline, parentElement: Element) {
     this.#animationInternal = animation;
     this.#timeline = timeline;
 
@@ -94,7 +93,7 @@ export class AnimationUI {
     this.#color = AnimationUI.colorForAnimation(this.#animationInternal);
   }
 
-  static colorForAnimation(animation: AnimationImpl): string {
+  static colorForAnimation(animation: SDK.AnimationModel.AnimationImpl): string {
     const names = Array.from(Colors.keys());
     const hashCode = Platform.StringUtilities.hashCode(animation.name() || animation.id());
     const cappedHashCode = hashCode % names.length;
@@ -110,7 +109,7 @@ export class AnimationUI {
     element.addEventListener('keydown', elementDrag, false);
   }
 
-  animation(): AnimationImpl {
+  animation(): SDK.AnimationModel.AnimationImpl {
     return this.#animationInternal;
   }
 

package/front_end/panels/animation/animation-meta.ts

@@ -2,7 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type * as Animation from './animation.js';
@@ -41,3 +43,16 @@ UI.ViewManager.registerViewExtension({
     return Animation.AnimationTimeline.AnimationTimeline.instance();
   },
 });
+
+Common.Revealer.registerRevealer({
+  contextTypes() {
+    return [
+      SDK.AnimationModel.AnimationGroup,
+    ];
+  },
+  destination: Common.Revealer.RevealerDestination.SOURCES_PANEL,
+  async loadRevealer() {
+    const Animation = await loadAnimationModule();
+    return new Animation.AnimationTimeline.AnimationGroupRevealer();
+  },
+});

package/front_end/panels/animation/animation.ts

@@ -2,17 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as AnimationDOMNode from './AnimationDOMNode.js';
 import * as AnimationGroupPreviewUI from './AnimationGroupPreviewUI.js';
-import * as AnimationModel from './AnimationModel.js';
 import * as AnimationScreenshotPopover from './AnimationScreenshotPopover.js';
 import * as AnimationTimeline from './AnimationTimeline.js';
 import * as AnimationUI from './AnimationUI.js';
 
 export {
-  AnimationDOMNode,
   AnimationGroupPreviewUI,
-  AnimationModel,
   AnimationScreenshotPopover,
   AnimationTimeline,
   AnimationUI,

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

@@ -384,6 +384,22 @@ describeWithMockConnection('ApplicationPanelSidebar', () => {
   it('adds indexed db after scope change',
      testUiUpdateOnScopeChange(
          Application.IndexedDBModel.IndexedDBModel, 'databases', 'indexedDBListTreeElement.appendChild'));
+
+  it('uses extension name when available for tree element title', () => {
+    const panel = Application.ResourcesPanel.ResourcesPanel.instance({forceNew: true});
+    const extensionName = 'Test Extension';
+    assert.strictEqual(
+        new Application.ApplicationPanelSidebar.ExtensionStorageTreeParentElement(panel, 'id', extensionName).title,
+        extensionName);
+  });
+
+  it('uses extension id as fallback for tree element title', () => {
+    const panel = Application.ResourcesPanel.ResourcesPanel.instance({forceNew: true});
+    const extensionId = 'id';
+    assert.strictEqual(
+        new Application.ApplicationPanelSidebar.ExtensionStorageTreeParentElement(panel, extensionId, '').title,
+        extensionId);
+  });
 });
 
 describeWithMockConnection('IDBDatabaseTreeElement', () => {

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -808,16 +808,19 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.addExtensionStorage(extensionStorage);
   }
 
-  private useTreeViewForExtensionStorage(): boolean {
-    // For extension service workers, there is only one associated extension,
-    // so we show each storage area as a direct child. In a page context (where
-    // multiple extensions may be injected) use a tree view where storage areas
-    // are children of the extension they are associated with.
-    return Root.Runtime.getPathName() !== '/bundled/worker_app.html';
+  private useTreeViewForExtensionStorage(extensionStorage: ExtensionStorage): boolean {
+    // If the origin the storage is associated with matches the top-level
+    // target (e.g, an extension service worker or top-level
+    // chrome-extension:// page), there is likely only one extension in the
+    // context we are inspecting and we can show the storage as a direct child.
+    // In other contexts (where multiple extensions may be injected) use a tree
+    // view where storage areas are children of the extension they are
+    // associated with.
+    return !extensionStorage.matchesTarget(this.target);
   }
 
   private getExtensionStorageAreaParent(extensionStorage: ExtensionStorage): ApplicationPanelTreeElement|undefined {
-    if (!this.useTreeViewForExtensionStorage()) {
+    if (!this.useTreeViewForExtensionStorage(extensionStorage)) {
       return this.extensionStorageListTreeElement;
     }
 
@@ -883,7 +886,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     const parentListTreeElement = treeElement.parent;
     if (parentListTreeElement) {
       parentListTreeElement.removeChild(treeElement);
-      if (this.useTreeViewForExtensionStorage() && parentListTreeElement.childCount() === 0) {
+      if (this.useTreeViewForExtensionStorage(extensionStorage) && parentListTreeElement.childCount() === 0) {
         this.extensionStorageListTreeElement?.removeChild(parentListTreeElement);
         this.extensionIdToStorageTreeParentElement.delete(extensionStorage.extensionId);
       } else {
@@ -1790,7 +1793,7 @@ export class ExtensionStorageTreeElement extends ApplicationPanelTreeElement {
 export class ExtensionStorageTreeParentElement extends ApplicationPanelTreeElement {
   private readonly extensionId: string;
   constructor(storagePanel: ResourcesPanel, extensionId: string, extensionName: string) {
-    super(storagePanel, extensionName, true, 'extension-storage-for-domain');
+    super(storagePanel, extensionName || extensionId, true, 'extension-storage-for-domain');
     this.extensionId = extensionId;
     const icon = IconButton.Icon.create('table');
     this.setLeadingIcons([icon]);
@@ -1877,6 +1880,7 @@ export class StorageCategoryView extends UI.Widget.VBox {
     }
     if (link && this.linkElement) {
       this.linkElement.setAttribute('href', link);
+      this.linkElement.setAttribute('title', link);
       this.linkElement.classList.remove('hidden');
     }
   }

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

@@ -5,11 +5,14 @@
 import type * as Common from '../../core/common/common.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import {dispatchKeyDownEvent, raf} from '../../testing/DOMHelpers.js';
 import {createTarget} from '../../testing/EnvironmentHelpers.js';
 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 type * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 
 import * as Resources from './application.js';
 
@@ -19,19 +22,38 @@ const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 class ExtensionStorageItemsListener {
   #dispatcher: Common.ObjectWrapper.ObjectWrapper<View.ExtensionStorageItemsDispatcher.EventTypes>;
+  #edited: boolean = false;
   #refreshed: boolean = false;
 
   constructor(dispatcher: Common.ObjectWrapper.ObjectWrapper<View.ExtensionStorageItemsDispatcher.EventTypes>) {
     this.#dispatcher = dispatcher;
+    this.#dispatcher.addEventListener(View.ExtensionStorageItemsDispatcher.Events.ITEM_EDITED, this.#itemsEdited, this);
     this.#dispatcher.addEventListener(
         View.ExtensionStorageItemsDispatcher.Events.ITEMS_REFRESHED, this.#itemsRefreshed, this);
   }
 
   dispose(): void {
+    this.#dispatcher.removeEventListener(
+        View.ExtensionStorageItemsDispatcher.Events.ITEM_EDITED, this.#itemsEdited, this);
     this.#dispatcher.removeEventListener(
         View.ExtensionStorageItemsDispatcher.Events.ITEMS_REFRESHED, this.#itemsRefreshed, this);
   }
 
+  resetEdited(): void {
+    this.#edited = false;
+  }
+
+  #itemsEdited(): void {
+    this.#edited = true;
+  }
+
+  async waitForItemsEdited(): Promise<void> {
+    if (!this.#edited) {
+      await this.#dispatcher.once(View.ExtensionStorageItemsDispatcher.Events.ITEM_EDITED);
+    }
+    this.#edited = true;
+  }
+
   resetRefreshed(): void {
     this.#refreshed = false;
   }
@@ -86,4 +108,54 @@ describeWithMockConnection('ExtensionStorageItemsView', function() {
     await coordinator.done();
     view.detach();
   });
+
+  it('correctly parses set values as JSON, with string fallback', async () => {
+    assert.exists(extensionStorageModel);
+    sinon.stub(extensionStorageModel.agent, 'invoke_getStorageItems')
+        .withArgs({id: TEST_EXTENSION_ID, storageArea: Protocol.Extensions.StorageArea.Local})
+        .resolves({
+          data: EXAMPLE_DATA,
+          getError: () => undefined,
+        });
+    const setStorageItems =
+        sinon.stub(extensionStorageModel.agent, 'invoke_setStorageItems').resolves({getError: () => undefined});
+
+    const view = new View.ExtensionStorageItemsView(extensionStorage);
+    const dataGrid = view.dataGridForTesting;
+    const itemsListener = new ExtensionStorageItemsListener(view.extensionStorageItemsDispatcher);
+    await itemsListener.waitForItemsRefreshed();
+
+    view.markAsRoot();
+    view.show(document.body);
+    await raf();
+
+    const expectedResults = [
+      {input: '{foo: "bar"}', parsedValue: {foo: 'bar'}},
+      {input: 'value', parsedValue: 'value'},
+    ];
+
+    for (const {input, parsedValue} of expectedResults) {
+      const key = Object.keys(EXAMPLE_DATA)[0];
+      const node = selectNodeByKey(dataGrid, key);
+      assert.exists(node);
+      await raf();
+
+      const selectedNode = node as DataGrid.DataGrid.DataGridNode<Protocol.Storage.SharedStorageEntry>;
+      dataGrid.startEditingNextEditableColumnOfDataGridNode(selectedNode, 'value', true);
+
+      const cellElement = getCellElementFromNodeAndColumnId(dataGrid, selectedNode, 'value');
+      assert.exists(cellElement);
+
+      cellElement.textContent = input;
+      dispatchKeyDownEvent(cellElement, {key: 'Enter'});
+      await itemsListener.waitForItemsEdited();
+      setStorageItems.calledOnceWithExactly(
+          {id: TEST_EXTENSION_ID, storageArea: Protocol.Extensions.StorageArea.Local, values: {[key]: parsedValue}});
+
+      setStorageItems.reset();
+    }
+
+    await coordinator.done();
+    view.detach();
+  });
 });

package/front_end/panels/application/ExtensionStorageItemsView.ts

@@ -33,6 +33,8 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as JSON5 from '../../third_party/json5/json5.js';
+import type * as DataGridImpl from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import type * as UI from '../../ui/legacy/legacy.js';
@@ -73,10 +75,12 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export namespace ExtensionStorageItemsDispatcher {
   export const enum Events {
+    ITEM_EDITED = 'ItemEdited',
     ITEMS_REFRESHED = 'ItemsRefreshed',
   }
 
   export type EventTypes = {
+    [Events.ITEM_EDITED]: void,
     [Events.ITEMS_REFRESHED]: void,
   };
 }
@@ -107,6 +111,18 @@ export class ExtensionStorageItemsView extends StorageItemsView {
     return this.#extensionStorage.storageArea !== Protocol.Extensions.StorageArea.Managed;
   }
 
+  /**
+   * When parsing a value provided by the user, attempt to treat it as JSON,
+   * falling back to a string otherwise.
+   */
+  parseValue(input: string): unknown {
+    try {
+      return JSON5.parse(input);
+    } catch {
+      return input;
+    }
+  }
+
   #createGrid(): DataGrid.DataGridWithPreview.DataGridWithPreview {
     const columns = ([
       {id: 'key', title: i18nString(UIStrings.key), sortable: true, editable: true, longText: true, weight: 50},
@@ -122,8 +138,10 @@ export class ExtensionStorageItemsView extends StorageItemsView {
               this.refreshItems();
             },
             setItem: async (key, value) => {
-              await this.#extensionStorage.setItem(key, value);
+              await this.#extensionStorage.setItem(key, this.parseValue(value));
               this.refreshItems();
+              this.extensionStorageItemsDispatcher.dispatchEventToListeners(
+                  ExtensionStorageItemsDispatcher.Events.ITEM_EDITED);
             },
           } :
                                    undefined,
@@ -216,4 +234,8 @@ export class ExtensionStorageItemsView extends StorageItemsView {
                                                                                                  value: string,
                                                                                                }));
   }
+
+  get dataGridForTesting(): DataGridImpl.DataGrid.DataGridImpl<unknown> {
+    return this.#grid.dataGridForTesting;
+  }
 }