chrome-devtools-frontend 1.0.1662289 → 1.0.1662965

package/front_end/models/source_map_scopes/NamesResolver.ts

@@ -2,7 +2,6 @@
 // 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 SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../bindings/bindings.js';
@@ -190,7 +189,11 @@ const enum Punctuation {
 
 const resolveDebuggerScope = async(scope: SDK.DebuggerModel.ScopeChainEntry):
     Promise<{variableMapping: Map<string, string>, thisMapping: string | null}> => {
-      if (!Common.Settings.Settings.instance().moduleSetting('js-source-maps-enabled').get()) {
+      if (!scope.callFrame()
+               .debuggerModel.target()
+               .targetManager()
+               .settings.moduleSetting('js-source-maps-enabled')
+               .get()) {
         return {variableMapping: new Map(), thisMapping: null};
       }
       const script = scope.callFrame().script;
@@ -278,16 +281,17 @@ const resolveScope = async(script: SDK.Script.Script, scopeChain: Formatter.Form
 
       async function resolveSourceName(
           script: SDK.Script.Script, sourceMap: SDK.SourceMap.SourceMap, name: string,
-          position: {lineNumber: number, columnNumber: number}): Promise<string|null> {
+          position: {lineNumber: number, columnNumber: number},
+          debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding =
+              Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()): Promise<string|null> {
         const ranges = sourceMap.findEntryRanges(position.lineNumber, position.columnNumber);
         if (!ranges) {
           return null;
         }
         // Extract the underlying text from the compiled code's range and make sure that
         // it starts with the identifier |name|.
-        const uiSourceCode =
-            Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().uiSourceCodeForSourceMapSourceURL(
-                script.debuggerModel, ranges.sourceURL, script.isContentScript());
+        const uiSourceCode = debuggerWorkspaceBinding.uiSourceCodeForSourceMapSourceURL(
+            script.debuggerModel, ranges.sourceURL, script.isContentScript());
         if (!uiSourceCode) {
           return null;
         }
@@ -363,24 +367,27 @@ const resolveScope = async(script: SDK.Script.Script, scopeChain: Formatter.Form
     };
 
 export const resolveScopeChain =
-    async function(callFrame: SDK.DebuggerModel.CallFrame): Promise<SDK.DebuggerModel.ScopeChainEntry[]> {
-  const {pluginManager} = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
-  const scopeChain: SDK.DebuggerModel.ScopeChainEntry[]|null|undefined =
-      await pluginManager.resolveScopeChain(callFrame);
-  if (scopeChain) {
-    return scopeChain;
-  }
+    async function(callFrame: SDK.DebuggerModel.CallFrame,
+                   debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding =
+                       Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()):
+        Promise<SDK.DebuggerModel.ScopeChainEntry[]> {
+          const {pluginManager} = debuggerWorkspaceBinding;
+          const scopeChain: SDK.DebuggerModel.ScopeChainEntry[]|null|undefined =
+              await pluginManager.resolveScopeChain(callFrame);
+          if (scopeChain) {
+            return scopeChain;
+          }
 
-  // TODO(crbug.com/465968290): Re-enable creating the scope chain from the source map once:
-  //    1) We have a flag indicating whether the source map contained variable/binding information.
-  //    2) We have a chrome feature flag.
+          // TODO(crbug.com/465968290): Re-enable creating the scope chain from the source map once:
+          //    1) We have a flag indicating whether the source map contained variable/binding information.
+          //    2) We have a chrome feature flag.
 
-  if (callFrame.script.isWasm()) {
-    return callFrame.scopeChain();
-  }
-  const thisObject = await resolveThisObject(callFrame);
-  return callFrame.scopeChain().map(scope => new ScopeWithSourceMappedVariables(scope, thisObject));
-};
+          if (callFrame.script.isWasm()) {
+            return callFrame.scopeChain();
+          }
+          const thisObject = await resolveThisObject(callFrame);
+          return callFrame.scopeChain().map(scope => new ScopeWithSourceMappedVariables(scope, thisObject));
+        };
 
 /**
  * @returns A mapping from original name -> compiled name. If the orignal name is unavailable (e.g. because the compiled name was
@@ -388,7 +395,7 @@ export const resolveScopeChain =
  */
 export const allVariablesInCallFrame =
     async(callFrame: SDK.DebuggerModel.CallFrame): Promise<Map<string, string|null>> => {
-  if (!Common.Settings.Settings.instance().moduleSetting('js-source-maps-enabled').get()) {
+  if (!callFrame.debuggerModel.target().targetManager().settings.moduleSetting('js-source-maps-enabled').get()) {
     return new Map<string, string|null>();
   }
   const cachedMap = cachedMapByCallFrame.get(callFrame);
@@ -424,13 +431,13 @@ export const allVariablesInCallFrame =
 export const allVariablesAtPosition =
     async(location: SDK.DebuggerModel.Location): Promise<Map<string, string|null>> => {
   const reverseMapping = new Map<string, string|null>();
-  if (!Common.Settings.Settings.instance().moduleSetting('js-source-maps-enabled').get()) {
-    return reverseMapping;
-  }
   const script = location.script();
   if (!script) {
     return reverseMapping;
   }
+  if (!script.debuggerModel.target().targetManager().settings.moduleSetting('js-source-maps-enabled').get()) {
+    return reverseMapping;
+  }
 
   const scopeTreeAndText = await computeScopeTree(script);
   if (!scopeTreeAndText) {
@@ -727,8 +734,9 @@ export async function resolveDebuggerFrameFunctionName(frame: SDK.DebuggerModel.
 }
 
 export async function resolveProfileFrameFunctionName(
-    {scriptId, lineNumber, columnNumber}: Partial<Protocol.Runtime.CallFrame>,
-    target: SDK.Target.Target|null): Promise<string|null> {
+    {scriptId, lineNumber, columnNumber}: Partial<Protocol.Runtime.CallFrame>, target: SDK.Target.Target|null,
+    debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding =
+        Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()): Promise<string|null> {
   if (!target || lineNumber === undefined || columnNumber === undefined || scriptId === undefined) {
     return null;
   }
@@ -738,8 +746,6 @@ export async function resolveProfileFrameFunctionName(
   if (!debuggerModel || !script) {
     return null;
   }
-
-  const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
   const location = new SDK.DebuggerModel.Location(debuggerModel, scriptId, lineNumber, columnNumber);
   const functionInfoFromPlugin = await debuggerWorkspaceBinding.pluginManager.getFunctionInfo(script, location);
   if (functionInfoFromPlugin && 'frames' in functionInfoFromPlugin) {

package/front_end/models/stack_trace/StackTrace.ts

@@ -4,6 +4,7 @@
 
 import type * as Common from '../../core/common/common.js';
 import type * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
 import type * as Workspace from '../workspace/workspace.js';
 
 export type StackTrace = BaseStackTrace<Fragment>;
@@ -131,3 +132,19 @@ export class DebuggableFrameFlavor {
     return DebuggableFrameFlavor.#last;
   }
 }
+
+/**
+ * Returns whether the given stack trace originated from a direct console
+ * invocation. A console-originated stack trace has exactly one frame with
+ * no url and no function name.
+ *
+ * TODO(crbug.com/40726969): Accept a translated `StackTrace` instead of a raw `Protocol.Runtime.StackTrace`.
+ */
+export function isConsoleOriginated(stackTrace: Protocol.Runtime.StackTrace): boolean {
+  const callFrames = stackTrace.callFrames;
+  if (callFrames.length !== 1) {
+    return false;
+  }
+  const frame = callFrames[0];
+  return frame.url === '' && frame.functionName === '';
+}

package/front_end/panels/application/IndexedDBModel.ts

@@ -423,16 +423,6 @@ export class IndexedDBModel extends SDK.SDKModel.SDKModel<EventTypes> implements
   cacheStorageContentUpdated(_event: Protocol.Storage.CacheStorageContentUpdatedEvent): void {
   }
 
-  interestGroupAccessed(_event: Protocol.Storage.InterestGroupAccessedEvent): void {
-  }
-
-  interestGroupAuctionEventOccurred(_event: Protocol.Storage.InterestGroupAuctionEventOccurredEvent): void {
-  }
-
-  interestGroupAuctionNetworkRequestCreated(_event: Protocol.Storage.InterestGroupAuctionNetworkRequestCreatedEvent):
-      void {
-  }
-
   sharedStorageAccessed(_event: Protocol.Storage.SharedStorageAccessedEvent): void {
   }
 

package/front_end/panels/application/IndexedDBViews.ts

@@ -1,7 +1,6 @@
 // Copyright 2012 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
 
 import '../../ui/components/report_view/report_view.js';
 import '../../ui/legacy/legacy.js';
@@ -234,6 +233,178 @@ declare global {
     'devtools-idb-database-view': IDBDatabaseView;
   }
 }
+export interface IndexedDBDataViewInput {
+  isIndex: boolean;
+  index: Index|null;
+  objectStore: ObjectStore;
+  entries: Entry[];
+  skipCount: number;
+  selectedRowNumber: number;
+  clearButtonEnabled: boolean;
+  hasMore: boolean;
+  keyFilter: string;
+  needsRefreshVisible: boolean;
+  metadata: ObjectStoreMetadata|null;
+
+  refreshButtonClicked: () => void;
+  clearButtonClicked: () => Promise<void>;
+  deleteButtonClicked: () => Promise<void>;
+  pageBackButtonClicked: () => void;
+  pageForwardButtonClicked: () => void;
+  onKeyFilterChange: (value: string) => void;
+  onRowSelected: (rowNumber: number) => void;
+  deleteEntry: (entry: Entry) => Promise<void>;
+  populateContextMenu: (e: CustomEvent<UI.ContextMenu.ContextMenu>, entry: Entry) => void;
+}
+
+const renderKeyPathString = (keyPathString: string): LitTemplate => {
+  return html`"<span class="source-code indexed-db-key-path">${keyPathString}</span>"`;
+};
+
+const renderKeyColumnHeader = (prefix: string, keyPath: string|string[]|null|undefined): LitTemplate => {
+  if (keyPath === undefined || keyPath === null || keyPath === '') {
+    return html`${prefix}`;
+  }
+  return html`
+    ${prefix} (${i18nString(UIStrings.keyPath)}${
+      Array.isArray(keyPath) ?
+          html`[${keyPath.map((path, i) => html`${i > 0 ? ', ' : ''}${renderKeyPathString(path)}`)}]` :
+          renderKeyPathString(keyPath)})`;
+};
+
+const renderDataGrid = (input: IndexedDBDataViewInput): LitTemplate => {
+  const keyPath = input.isIndex && input.index ? input.index.keyPath : input.objectStore.keyPath;
+  // clang-format off
+  return html`<devtools-data-grid striped style="flex: auto;" name=${i18nString(UIStrings.indexedDb)} .template=${html`
+    <style>${indexedDBViewsStyles}</style>
+    <table>
+      <tr>
+        <th id="number" fixed width="50px">#</th>
+        <th id="key">${renderKeyColumnHeader(i18nString(UIStrings.keyString), keyPath)}</th>
+        ${input.isIndex ? html`<th id="primary-key">${renderKeyColumnHeader(i18nString(UIStrings.primaryKey), input.objectStore.keyPath)}</th>` : nothing}
+        <th id="value">${i18nString(UIStrings.valueString)}</th>
+      </tr>
+      ${repeat(input.entries, (_entry, index) => index, (entry, index) => html`
+        <tr ?selected=${index + input.skipCount === input.selectedRowNumber}
+            @select=${() => input.onRowSelected(index + input.skipCount)}
+            @delete=${() => input.deleteEntry(entry)}
+            @contextmenu=${(e: CustomEvent<UI.ContextMenu.ContextMenu>) => input.populateContextMenu(e, entry)}>
+          <td>${index + input.skipCount}</td>
+          <td>${widget(ObjectPropertiesSectionWidget, {value: entry.key})}</td>
+          ${input.isIndex ? html`<td>${widget(ObjectPropertiesSectionWidget, {value: entry.primaryKey})}</td>` : nothing}
+          <td class="value-column">${widget(ObjectPropertiesSectionWidget, {value: entry.value})}</td>
+        </tr>`
+      )}
+    </table>`}>
+  </devtools-data-grid>`;
+  // clang-format on
+};
+
+const renderToolbar = (input: IndexedDBDataViewInput): LitTemplate => {
+  // clang-format off
+  return html`
+    <devtools-toolbar class="data-view-toolbar" jslog=${VisualLogging.toolbar()}>
+      <devtools-button
+        class="toolbar-button"
+        .iconName=${'refresh'}
+        .title=${i18nString(UIStrings.refresh)}
+        jslog=${VisualLogging.action('refresh').track({click: true})}
+        @click=${input.refreshButtonClicked}
+        .variant=${Buttons.Button.Variant.TOOLBAR}
+      ></devtools-button>
+      <devtools-button
+        class="toolbar-button"
+        .iconName=${'clear'}
+        .title=${i18nString(UIStrings.clearObjectStore)}
+        jslog=${VisualLogging.action('clear-all').track({click: true})}
+        @click=${input.clearButtonClicked}
+        .disabled=${input.isIndex || !input.clearButtonEnabled}
+        .variant=${Buttons.Button.Variant.TOOLBAR}>
+      </devtools-button>
+      <devtools-button
+        class="toolbar-button"
+        .iconName=${'bin'}
+        .title=${i18nString(UIStrings.deleteSelected)}
+        jslog=${VisualLogging.action('delete-selected').track({click: true})}
+        @click=${input.deleteButtonClicked}
+        .disabled=${input.selectedRowNumber < 0 || input.entries.length === 0}
+        .variant=${Buttons.Button.Variant.TOOLBAR}>
+      </devtools-button>
+
+      <div class="toolbar-divider"></div>
+
+      <devtools-button
+        class="toolbar-button"
+        .iconName=${'triangle-left'}
+        .title=${i18nString(UIStrings.showPreviousPage)}
+        .disabled=${input.skipCount <= 0}
+        @click=${input.pageBackButtonClicked}
+        .variant=${Buttons.Button.Variant.TOOLBAR}>
+      </devtools-button>
+      <devtools-button
+        class="toolbar-button"
+        .iconName=${'triangle-right'}
+        .title=${i18nString(UIStrings.showNextPage)}
+        .disabled=${!input.hasMore}
+        @click=${input.pageForwardButtonClicked}
+        .variant=${Buttons.Button.Variant.TOOLBAR}>
+      </devtools-button>
+
+      <devtools-toolbar-input
+        type="filter"
+        placeholder=${i18nString(UIStrings.filterByKey)}
+        class="key-filter-input"
+        .value=${input.keyFilter}
+        @change=${(e: CustomEvent<string>) => {
+          input.onKeyFilterChange(e.detail);
+        }}>
+      </devtools-toolbar-input>
+
+      ${input.needsRefreshVisible ?  html`
+        <div class="toolbar-divider"></div>
+        <div class="toolbar-item stale-data-warning" title=${
+          i18nString(
+              UIStrings
+                  .someEntriesMayHaveBeenModified)}>
+          <devtools-icon name="warning" class="warning-icon"></devtools-icon>
+          <span>${i18nString(UIStrings.dataMayBeStale)}</span>
+        </div>
+      ` : nothing}
+    </devtools-toolbar>`;
+  // clang-format on
+};
+
+const renderSummaryBar = (input: IndexedDBDataViewInput): LitTemplate => {
+  const metadata = input.metadata;
+  if (!metadata) {
+    return nothing;
+  }
+  // clang-format off
+  return html`
+    <div class="object-store-summary-bar">
+      <span>${i18nString(UIStrings.totalEntriesS, { PH1: String(metadata.entriesCount)})}</span>
+      ${input.objectStore.autoIncrement ? html`
+        <span class="separator">\u2758</span>
+        <span>${i18nString(UIStrings.keyGeneratorValueS, {PH1: String(metadata.keyGeneratorValue)})}</span>`
+        : nothing}
+    </div>`;
+  // clang-format on
+};
+
+export type IDBDataViewView = (input: IndexedDBDataViewInput, output: undefined, target: HTMLElement) => void;
+
+// clang-format off
+export const IDB_DATA_VIEW_DEFAULT_VIEW: IDBDataViewView = (input, _output, target) => {
+  render(html`
+    ${renderToolbar(input)}
+    <div class="data-grid-container">
+      ${renderDataGrid(input)}
+    </div>
+    ${renderSummaryBar(input)}
+  `, target, {container: {classes: ['indexed-db-data-view', 'storage-view']}});
+};
+// clang-format on
+
 export class IDBDataView extends UI.View.SimpleView {
   private readonly model: IndexedDBModel;
   private readonly databaseId: DatabaseId;
@@ -259,14 +430,16 @@ export class IDBDataView extends UI.View.SimpleView {
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private lastKey?: any;
+  readonly #view: IDBDataViewView;
 
   constructor(model: IndexedDBModel, databaseId: DatabaseId, objectStore: ObjectStore, index: Index|null,
-              refreshObjectStoreCallback: () => void) {
+              refreshObjectStoreCallback: () => void, view = IDB_DATA_VIEW_DEFAULT_VIEW) {
     super({
       title: i18nString(UIStrings.idb),
       viewId: 'idb',
       jslog: `${VisualLogging.pane('indexed-db-data-view')}`,
     });
+    this.#view = view;
     this.registerRequiredCSS(indexedDBViewsStyles);
     this.registerRequiredCSS(DataGrid.dataGridStyles);
 
@@ -275,8 +448,6 @@ export class IDBDataView extends UI.View.SimpleView {
     this.isIndex = Boolean(index);
     this.refreshObjectStoreCallback = refreshObjectStoreCallback;
 
-    this.element.classList.add('indexed-db-data-view', 'storage-view');
-
     this.clearingObjectStore = false;
 
     this.pageSize = 50;
@@ -286,124 +457,6 @@ export class IDBDataView extends UI.View.SimpleView {
     this.update(objectStore, index);
   }
 
-  private renderDataGrid(): LitTemplate {
-    const keyPath = this.isIndex && this.index ? this.index.keyPath : this.objectStore.keyPath;
-    // clang-format off
-    return html`<devtools-data-grid striped style="flex: auto;" name=${i18nString(UIStrings.indexedDb)} .template=${html`
-      <style>${indexedDBViewsStyles}</style>
-      <table>
-        <tr>
-          <th id="number" fixed width="50px">#</th>
-          <th id="key">${this.renderKeyColumnHeader(i18nString(UIStrings.keyString), keyPath)}</th>
-          ${this.isIndex ? html`<th id="primary-key">${this.renderKeyColumnHeader(i18nString(UIStrings.primaryKey), this.objectStore.keyPath)}</th>` : nothing}
-          <th id="value">${i18nString(UIStrings.valueString)}</th>
-        </tr>
-        ${repeat(this.entries, (_entry, index) => index, (entry, index) => html`
-          <tr ?selected=${index + this.skipCount === this.#selectedRowNumber}
-              @select=${() => this.onRowSelected(index + this.skipCount)}
-              @delete=${() => this.deleteEntry(entry)}
-              @contextmenu=${(e: CustomEvent<UI.ContextMenu.ContextMenu>) => this.populateContextMenu(e, entry)}>
-            <td>${index + this.skipCount}</td>
-            <td>${widget(ObjectPropertiesSectionWidget, {value: entry.key})}</td>
-            ${this.isIndex ? html`<td>${widget(ObjectPropertiesSectionWidget, {value: entry.primaryKey})}</td>` : nothing}
-            <td class="value-column">${widget(ObjectPropertiesSectionWidget, {value: entry.value})}</td>
-          </tr>`
-        )}
-      </table>`}>
-    </devtools-data-grid>`;
-    // clang-format on
-  }
-
-  private renderKeyColumnHeader(prefix: string, keyPath: string|string[]|null|undefined): LitTemplate {
-    if (keyPath === undefined || keyPath === null || keyPath === '') {
-      return html`${prefix}`;
-    }
-    return html`
-      ${prefix} (${i18nString(UIStrings.keyPath)}${
-        Array.isArray(keyPath) ?
-            html`[${keyPath.map((path, i) => html`${i > 0 ? ', ' : ''}${this.renderKeyPathString(path)}`)}]` :
-            this.renderKeyPathString(keyPath)})`;
-  }
-
-  private renderKeyPathString(keyPathString: string): LitTemplate {
-    return html`"<span class="source-code indexed-db-key-path">${keyPathString}</span>"`;
-  }
-
-  private renderToolbar(): LitTemplate {
-    // clang-format off
-    return html`
-      <devtools-toolbar class="data-view-toolbar" jslog=${VisualLogging.toolbar()}>
-        <devtools-button
-          class="toolbar-button"
-          .iconName=${'refresh'}
-          .title=${i18nString(UIStrings.refresh)}
-          jslog=${VisualLogging.action('refresh').track({click: true})}
-          @click=${() => this.refreshButtonClicked()}
-          .variant=${Buttons.Button.Variant.TOOLBAR}
-        ></devtools-button>
-        <devtools-button
-          class="toolbar-button"
-          .iconName=${'clear'}
-          .title=${i18nString(UIStrings.clearObjectStore)}
-          jslog=${VisualLogging.action('clear-all').track({click: true})}
-          @click=${() => this.clearButtonClicked()}
-          .disabled=${this.isIndex || !this.#clearButtonEnabled}
-          .variant=${Buttons.Button.Variant.TOOLBAR}>
-        </devtools-button>
-        <devtools-button
-          class="toolbar-button"
-          .iconName=${'bin'}
-          .title=${i18nString(UIStrings.deleteSelected)}
-          jslog=${VisualLogging.action('delete-selected').track({click: true})}
-          @click=${() => this.deleteButtonClicked()}
-          .disabled=${this.#selectedRowNumber < 0 || this.entries.length === 0}
-          .variant=${Buttons.Button.Variant.TOOLBAR}>
-        </devtools-button>
-
-        <div class="toolbar-divider"></div>
-
-        <devtools-button
-          class="toolbar-button"
-          .iconName=${'triangle-left'}
-          .title=${i18nString(UIStrings.showPreviousPage)}
-          .disabled=${this.skipCount <= 0}
-          @click=${() => this.pageBackButtonClicked()}
-          .variant=${Buttons.Button.Variant.TOOLBAR}>
-        </devtools-button>
-        <devtools-button
-          class="toolbar-button"
-          .iconName=${'triangle-right'}
-          .title=${i18nString(UIStrings.showNextPage)}
-          .disabled=${!this.#hasMore}
-          @click=${() => this.pageForwardButtonClicked()}
-          .variant=${Buttons.Button.Variant.TOOLBAR}>
-        </devtools-button>
-
-        <devtools-toolbar-input
-          type="filter"
-          placeholder=${i18nString(UIStrings.filterByKey)}
-          class="key-filter-input"
-          .value=${this.#keyFilter}
-          @change=${(e: CustomEvent<string>) => {
-            this.#keyFilter = e.detail;
-            this.updateData(false);
-          }}>
-        </devtools-toolbar-input>
-
-        ${this.#needsRefreshVisible ?  html`
-          <div class="toolbar-divider"></div>
-          <div class="toolbar-item stale-data-warning" title=${
-            i18nString(
-                UIStrings
-                    .someEntriesMayHaveBeenModified)}>
-            <devtools-icon name="warning" class="warning-icon"></devtools-icon>
-            <span>${i18nString(UIStrings.dataMayBeStale)}</span>
-          </div>
-        ` : nothing}
-      </devtools-toolbar>`;
-    // clang-format on
-  }
-
   private pageBackButtonClicked(): void {
     this.skipCount = Math.max(0, this.skipCount - this.pageSize);
     this.updateData(false);
@@ -519,23 +572,6 @@ export class IDBDataView extends UI.View.SimpleView {
     });
   }
 
-  private renderSummaryBar(): LitTemplate {
-    const metadata = this.#metadata;
-    if (!metadata) {
-      return nothing;
-    }
-    // clang-format off
-    return html`
-      <div class="object-store-summary-bar">
-        <span>${i18nString(UIStrings.totalEntriesS, { PH1: String(metadata.entriesCount)})}</span>
-        ${this.objectStore.autoIncrement ? html`
-          <span class="separator">\u2758</span>
-          <span>${i18nString(UIStrings.keyGeneratorValueS, {PH1: String(metadata.keyGeneratorValue)})}</span>`
-          : nothing}
-      </div>`;
-    // clang-format on
-  }
-
   private updatedDataForTests(): void {
     // Sniffed in tests.
   }
@@ -548,6 +584,8 @@ export class IDBDataView extends UI.View.SimpleView {
     const ok =
         await UI.UIUtils.ConfirmDialog.show(i18nString(UIStrings.objectStoreWillBeCleared),
                                             i18nString(UIStrings.confirmClearObjectStore, {PH1: this.objectStore.name}),
+                                            // TODO(b/407750537): Fix the linter false positive
+                                            // eslint-disable-next-line @devtools/no-imperative-dom-api
                                             this.element, {jslogContext: 'clear-object-store-confirmation'});
     if (ok) {
       this.#clearButtonEnabled = false;
@@ -622,22 +660,72 @@ export class IDBDataView extends UI.View.SimpleView {
   }
 
   override performUpdate(): void {
-    // clang-format off
-    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
-    render(html`
-      ${this.renderToolbar()}
-      <div class="data-grid-container">
-        ${this.renderDataGrid()}
-      </div>
-      ${this.renderSummaryBar()}
-    `, this.element);
-    // clang-format on
+    this.#view({
+      isIndex: this.isIndex,
+      index: this.index,
+      objectStore: this.objectStore,
+      entries: this.entries,
+      skipCount: this.skipCount,
+      selectedRowNumber: this.#selectedRowNumber,
+      clearButtonEnabled: this.#clearButtonEnabled,
+      hasMore: this.#hasMore,
+      keyFilter: this.#keyFilter,
+      needsRefreshVisible: this.#needsRefreshVisible,
+      metadata: this.#metadata,
+      refreshButtonClicked: this.refreshButtonClicked.bind(this),
+      clearButtonClicked: this.clearButtonClicked.bind(this),
+      deleteButtonClicked: this.deleteButtonClicked.bind(this),
+      pageBackButtonClicked: this.pageBackButtonClicked.bind(this),
+      pageForwardButtonClicked: this.pageForwardButtonClicked.bind(this),
+      onKeyFilterChange: (value: string) => {
+        this.#keyFilter = value;
+        this.updateData(false);
+      },
+      onRowSelected: this.onRowSelected.bind(this),
+      deleteEntry: this.deleteEntry.bind(this),
+      populateContextMenu: this.populateContextMenu.bind(this),
+    },
+               undefined, this.element);
   }
 }
 
+interface ObjectPropertiesSectionWidgetInput {
+  value: SDK.RemoteObject.RemoteObject|null;
+}
+
+interface ObjectPropertiesSectionWidgetOutput {
+  objectPropSection: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection|null;
+}
+
+type ObjectPropertiesSectionWidgetView = (
+    input: ObjectPropertiesSectionWidgetInput,
+    output: ObjectPropertiesSectionWidgetOutput,
+    target: HTMLElement,
+    ) => void;
+
+const OBJECT_PROPERTIES_SECTION_WIDGET_DEFAULT_VIEW: ObjectPropertiesSectionWidgetView = (input, output, target) => {
+  if (!input.value) {
+    output.objectPropSection = null;
+    render(nothing, target);
+    return;
+  }
+  const objectPropSection = ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.defaultObjectPropertiesSection(
+      input.value, undefined /* linkifier */, true /* skipProto */, true /* readOnly */);
+  output.objectPropSection = objectPropSection;
+
+  const element = input.value.hasChildren ? objectPropSection.element : objectPropSection.titleElement;
+  render(html`${element}`, target);
+};
+
 class ObjectPropertiesSectionWidget extends UI.Widget.Widget {
   #value: SDK.RemoteObject.RemoteObject|null = null;
   #objectPropSection: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection|null = null;
+  readonly #view: ObjectPropertiesSectionWidgetView;
+
+  constructor(element?: HTMLElement, view = OBJECT_PROPERTIES_SECTION_WIDGET_DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
+  }
 
   set value(value: SDK.RemoteObject.RemoteObject|null) {
     if (this.#value === value) {
@@ -652,20 +740,8 @@ class ObjectPropertiesSectionWidget extends UI.Widget.Widget {
   }
 
   override performUpdate(): void {
-    const value = this.#value;
-    if (!value) {
-      this.contentElement.removeChildren();
-      this.#objectPropSection = null;
-      return;
-    }
-    this.contentElement.removeChildren();
-    this.#objectPropSection = ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.defaultObjectPropertiesSection(
-        value, undefined /* linkifier */, true /* skipProto */, true /* readOnly */);
-
-    if (value.hasChildren) {
-      this.contentElement.appendChild(this.#objectPropSection.element);
-    } else {
-      this.contentElement.appendChild(this.#objectPropSection.titleElement);
-    }
+    const output: ObjectPropertiesSectionWidgetOutput = {objectPropSection: null};
+    this.#view({value: this.#value}, output, this.contentElement);
+    this.#objectPropSection = output.objectPropSection;
   }
 }

package/front_end/panels/application/SharedStorageModel.ts

@@ -227,16 +227,6 @@ export class SharedStorageModel extends SDK.SDKModel.SDKModel<EventTypes> implem
   cacheStorageContentUpdated(_event: Protocol.Storage.CacheStorageContentUpdatedEvent): void {
   }
 
-  interestGroupAccessed(_event: Protocol.Storage.InterestGroupAccessedEvent): void {
-  }
-
-  interestGroupAuctionEventOccurred(_event: Protocol.Storage.InterestGroupAuctionEventOccurredEvent): void {
-  }
-
-  interestGroupAuctionNetworkRequestCreated(_event: Protocol.Storage.InterestGroupAuctionNetworkRequestCreatedEvent):
-      void {
-  }
-
   storageBucketCreatedOrUpdated(_event: Protocol.Storage.StorageBucketCreatedOrUpdatedEvent): void {
   }