Configure host in the view function where possible in items view

Bug: 407751340
Change-Id: Ifba32c9263c059915feab0c77d914c2b295b9439
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7785475
Auto-Submit: Danil Somsikov <dsv@chromium.org>
Reviewed-by: Kateryna Prokopenko <kprokopenko@chromium.org>
Commit-Queue: Danil Somsikov <dsv@chromium.org>

front_end/panels/application/CookieItemsView.ts

diff --git a/front_end/panels/application/CookieItemsView.ts b/front_end/panels/application/CookieItemsView.ts
index 815912f..01fa4b5 100644
--- a/front_end/panels/application/CookieItemsView.ts
+++ b/front_end/panels/application/CookieItemsView.ts
@@ -128,7 +128,7 @@
     </div>
   `,
       // clang-format on
-      target);
+      target, {container: {attributes: {jslog: `${VisualLogging.pane('cookie-preview')}`}}});
 };
 
 class CookiePreviewWidget extends UI.Widget.VBox {
@@ -137,7 +137,7 @@
   private showDecodedSetting: Common.Settings.Setting<boolean>;
 
   constructor(element?: HTMLElement, view: CookiePreviewWidgetView = DEFAULT_COOKIE_PREVIEW_WIDGET_VIEW) {
-    super(element, {jslog: `${VisualLogging.section('cookie-preview')}`});
+    super(element);
     this.view = view;
     this.setMinimumSize(230, 45);
     this.#cookie = null;

front_end/panels/application/DOMStorageItemsView.ts

diff --git a/front_end/panels/application/DOMStorageItemsView.ts b/front_end/panels/application/DOMStorageItemsView.ts
index 388f48e..197cc45 100644
--- a/front_end/panels/application/DOMStorageItemsView.ts
+++ b/front_end/panels/application/DOMStorageItemsView.ts
@@ -62,15 +62,15 @@
   private eventListeners: Common.EventTarget.EventDescriptor[];
 
   constructor(domStorage: DOMStorage) {
-    super(i18nString(UIStrings.domStorageItems), 'dom-storage', true);
+    super(
+        i18nString(UIStrings.domStorageItems), 'dom-storage', true, /* view=*/ undefined, /* metadataView=*/ undefined,
+        /* jslog=*/ undefined, ['storage-view', 'table']);
 
     this.domStorage = domStorage;
     if (domStorage.storageKey) {
       this.toolbar?.setStorageKey(domStorage.storageKey);
     }
 
-    this.element.classList.add('storage-view', 'table');
-
     this.showPreview(null, null);
 
     this.eventListeners = [];

front_end/panels/application/ExtensionStorageItemsView.ts

diff --git a/front_end/panels/application/ExtensionStorageItemsView.ts b/front_end/panels/application/ExtensionStorageItemsView.ts
index e247576..59b4737 100644
--- a/front_end/panels/application/ExtensionStorageItemsView.ts
+++ b/front_end/panels/application/ExtensionStorageItemsView.ts
@@ -75,7 +75,7 @@
   constructor(extensionStorage: ExtensionStorage, view?: KeyValueStorageItemsViewFunction) {
     super(
         i18nString(UIStrings.extensionStorageItems), 'extension-storage', true, view, undefined,
-        {jslog: `${VisualLogging.pane().context('extension-storage-data')}`, classes: ['storage-view', 'table']});
+        `${VisualLogging.pane().context('extension-storage-data')}`, ['storage-view', 'table']);
 
     this.extensionStorageItemsDispatcher =
         new Common.ObjectWrapper.ObjectWrapper<ExtensionStorageItemsDispatcher.EventTypes>();

front_end/panels/application/KeyValueStorageItemsView.ts

diff --git a/front_end/panels/application/KeyValueStorageItemsView.ts b/front_end/panels/application/KeyValueStorageItemsView.ts
index d2d1e9d..9722b7c 100644
--- a/front_end/panels/application/KeyValueStorageItemsView.ts
+++ b/front_end/panels/application/KeyValueStorageItemsView.ts
@@ -31,7 +31,6 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Geometry from '../../models/geometry/geometry.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import type {WidgetOptions} from '../../ui/legacy/Widget.js';
 import {Directives as LitDirectives, html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -86,6 +85,8 @@
   onDelete: (key: string) => void;
   onDeleteSelected: () => void;
   onDeleteAll: () => void;
+  jslog?: string;
+  classes?: string[];
 }
 
 interface ViewOutput {
@@ -110,10 +111,18 @@
   #editable: boolean;
   #toolbar: StorageItemsToolbar|undefined;
   readonly metadataView: ApplicationComponents.StorageMetadataView.StorageMetadataView;
+  #jslog?: string;
+  #classes?: string[];
 
   constructor(
-      title: string, id: string, editable: boolean, view?: View,
-      metadataView?: ApplicationComponents.StorageMetadataView.StorageMetadataView, opts?: WidgetOptions) {
+      title: string,
+      id: string,
+      editable: boolean,
+      view?: View,
+      metadataView?: ApplicationComponents.StorageMetadataView.StorageMetadataView,
+      jslog?: string,
+      classes?: string[],
+  ) {
     metadataView ??= new ApplicationComponents.StorageMetadataView.StorageMetadataView();
     if (!view) {
       view = (input: ViewInput, output: ViewOutput, target: HTMLElement) => {
@@ -171,12 +180,14 @@
               </devtools-widget>
             </devtools-split-view>`,
             // clang-format on
-            target);
+            target, {container: {attributes: {jslog: input.jslog}, classes: input.classes}});
       };
     }
-    super(opts);
+    super();
     this.metadataView = metadataView;
     this.#editable = editable;
+    this.#jslog = jslog;
+    this.#classes = classes;
     this.#view = view;
     this.performUpdate();
 
@@ -204,6 +215,8 @@
       selectedKey: this.#selectedKey,
       editable: this.#editable,
       preview: this.#preview,
+      jslog: this.#jslog,
+      classes: this.#classes,
       onSelect: (item: {key: string, value: string}|null) => {
         this.#toolbar?.setCanDeleteSelected(Boolean(item));
         if (!item) {