chrome-devtools-frontend 1.0.1556696 → 1.0.1558690

package/front_end/panels/application/AppManifestView.ts

@@ -1,7 +1,6 @@
 // Copyright 2016 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, @devtools/no-lit-render-outside-of-view */
 
 import '../../ui/legacy/components/inline_editor/inline_editor.js';
 import '../../ui/components/report_view/report_view.js';
@@ -21,7 +20,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import appManifestViewStyles from './appManifestView.css.js';
 import * as ApplicationComponents from './components/components.js';
 
-const {classMap, ref} = Directives;
+const {styleMap, classMap, ref} = Directives;
 const {linkifyURL} = Components.Linkifier.Linkifier;
 const {widgetConfig} = UI.Widget;
 
@@ -515,13 +514,6 @@ interface Manifest {
 }
 /* eslint-enable @typescript-eslint/naming-convention */
 
-interface ReportSectionItem {
-  content: LitTemplate|LitTemplate[]|string|HTMLElement;
-  title?: string;
-  label?: string;
-  flexed?: boolean;
-}
-
 interface IdentitySectionData {
   name: string;
   shortName: string;
@@ -614,75 +606,67 @@ function renderSectionHeader(text: Platform.UIString.LocalizedString, output?: V
 }
 
 function renderErrors(
-    errorsSection: UI.ReportView.Section, warnings?: Platform.UIString.LocalizedString[],
-    manifestErrors?: Protocol.Page.AppManifestError[], imageErrors?: Platform.UIString.LocalizedString[]): void {
-  errorsSection.clearContent();
-  errorsSection.element.classList.toggle(
-      'hidden', !manifestErrors?.length && !warnings?.length && !imageErrors?.length);
-
-  for (const error of manifestErrors ?? []) {
-    const icon = UI.UIUtils.createIconLabel({
-      title: error.message,
-      iconName: error.critical ? 'cross-circle-filled' : 'warning-filled',
-      color: error.critical ? 'var(--icon-error)' : 'var(--icon-warning)',
-    });
-    errorsSection.appendRow().appendChild(icon);
-  }
-
-  for (const warning of warnings ?? []) {
-    const msgElement = document.createTextNode(warning);
-    errorsSection.appendRow().appendChild(msgElement);
-  }
-  for (const error of imageErrors ?? []) {
-    const msgElement = document.createTextNode(error);
-    errorsSection.appendRow().appendChild(msgElement);
-  }
+    warnings?: Platform.UIString.LocalizedString[], manifestErrors?: Protocol.Page.AppManifestError[],
+    imageErrors?: Platform.UIString.LocalizedString[], output?: ViewOutput): LitTemplate {
+  // clang-format off
+  return html`
+    ${renderSectionHeader(i18nString(UIStrings.errorsAndWarnings), output)}
+    <div class="report-section" jslog=${VisualLogging.section('errors-and-warnings')}>
+      ${manifestErrors?.map(error => html`<div class="report-row">
+          <devtools-icon
+          name=${error.critical ? 'cross-circle-filled' : 'warning-filled'}
+          style=${styleMap({color: error.critical ? 'var(--icon-error)' : 'var(--icon-warning)'})}>
+        </devtools-icon>
+        ${error.message}</div>
+      `)}
+      ${warnings?.map(warning => html`<div class="report-row">${warning}</div>`)}
+      ${imageErrors?.map(error => html`<div class="report-row">${error}</div>`)}
+    </div>`;
+  // clang-format on
 }
 
-function renderIdentity(identitySection: UI.ReportView.Section, identityData: IdentitySectionData): void {
+function renderIdentity(identityData: IdentitySectionData, onCopy: () => void, output: ViewOutput): LitTemplate {
   const {name, shortName, description, appId, recommendedId, hasId} = identityData;
-  const fields: ReportSectionItem[] = [];
-  fields.push({title: i18nString(UIStrings.name), content: name});
-  fields.push({title: i18nString(UIStrings.shortName), content: shortName});
-  fields.push({title: i18nString(UIStrings.description), content: description});
-
-  if (appId && recommendedId) {
-    const onCopy = (): void => {
-      UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.copiedToClipboard, {PH1: recommendedId}));
-      Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(recommendedId);
-    };
-    // clang-format off
-    fields.push({title: i18nString(UIStrings.computedAppId), label: 'App Id', content: html`
-      ${appId}
-      <devtools-icon class="inline-icon" name="help" title=${i18nString(UIStrings.appIdExplainer)}
-          jslog=${VisualLogging.action('help').track({hover: true})}>
-      </devtools-icon>
-      <devtools-link href="https://developer.chrome.com/blog/pwa-manifest-id/"
-                    .jslogContext=${'learn-more'}>
-        ${i18nString(UIStrings.learnMore)}
-      </devtools-link>
-      ${!hasId ? html`
-        <div class="multiline-value">
-          ${i18nTemplate(str_, UIStrings.appIdNote, {
-            PH1: html`<code>${recommendedId}</code>`,
-            PH2: html`<devtools-button class="inline-button" @click=${onCopy}
-                        .iconName=${'copy'}
-                        .variant=${Buttons.Button.Variant.ICON}
-                        .size=${Buttons.Button.Size.SMALL}
-                        .jslogContext=${'manifest.copy-id'}
-                        .title=${i18nString(UIStrings.copyToClipboard)}>
-                      </devtools-button>`,
-          })}
-      </div>` : nothing}`});
-    // clang-format on
-  } else {
-    identitySection.removeField(i18nString(UIStrings.computedAppId));
-  }
-  setSectionContents(fields, identitySection);
+  // clang-format off
+  return html`${renderSectionHeader(i18nString(UIStrings.identity), output)}
+  <div class="report-section" jslog=${VisualLogging.section('identity')}>
+    <devtools-report-key>${i18nString(UIStrings.name)}</devtools-report-key>
+    <devtools-report-value>${name}</devtools-report-value>
+    <devtools-report-key>${i18nString(UIStrings.shortName)}</devtools-report-key>
+    <devtools-report-value>${shortName}</devtools-report-value>
+    <devtools-report-key>${i18nString(UIStrings.description)}</devtools-report-key>
+    <devtools-report-value>${description}</devtools-report-value>
+    ${appId && recommendedId ? html`
+      <devtools-report-key aria-label="App Id">${i18nString(UIStrings.computedAppId)}</devtools-report-key>
+      <devtools-report-value jslog=${VisualLogging.section('identity')}>
+        ${appId}
+        <devtools-icon class="inline-icon" name="help" title=${i18nString(UIStrings.appIdExplainer)}
+            jslog=${VisualLogging.action('help').track({hover: true})}>
+        </devtools-icon>
+        <devtools-link href="https://developer.chrome.com/blog/pwa-manifest-id/"
+                      .jslogContext=${'learn-more'}
+                      ${ref(setFocusOnSection(i18nString(UIStrings.identity), output))}>
+          ${i18nString(UIStrings.learnMore)}
+        </devtools-link>
+        ${!hasId ? html`
+          <div class="multiline-value">
+            ${i18nTemplate(str_, UIStrings.appIdNote, {
+              PH1: html`<code>${recommendedId}</code>`,
+              PH2: html`<devtools-button class="inline-button" @click=${onCopy}
+                          .iconName=${'copy'}
+                          .variant=${Buttons.Button.Variant.ICON}
+                          .size=${Buttons.Button.Size.SMALL}
+                          .jslogContext=${'manifest.copy-id'}
+                          .title=${i18nString(UIStrings.copyToClipboard)}>
+                        </devtools-button>`,
+            })}
+        </div>` : nothing}
+      </devtools-report-value>` : nothing}
+    </div>`;
+  // clang-format on
 }
 
-function renderPresentation(
-    presentationSection: UI.ReportView.Section, presentationData: PresentationSectionData): void {
+function renderPresentation(presentationData: PresentationSectionData, output: ViewOutput): LitTemplate {
   const {
     startUrl,
     completeStartUrl,
@@ -694,35 +678,41 @@ function renderPresentation(
     hasNewNoteUrl,
     completeNewNoteUrl,
   } = presentationData;
-  const fields: ReportSectionItem[] = [
-    {
-      title: i18nString(UIStrings.startUrl),
-      label: i18nString(UIStrings.startUrl),
-      content: completeStartUrl ? Components.Linkifier.Linkifier.linkifyURL(
-                                      completeStartUrl, ({text: startUrl, tabStop: true, jslogContext: 'start-url'})) :
-                                  nothing,
-    },
-    {
-      title: i18nString(UIStrings.themeColor),
-      content: themeColor ? html`<devtools-color-swatch .color=${themeColor}></devtools-color-swatch>` : nothing,
-    },
-    {
-      title: i18nString(UIStrings.backgroundColor),
-      content: backgroundColor ? html`<devtools-color-swatch .color=${backgroundColor}></devtools-color-swatch>` :
-                                 nothing,
-    },
-    {title: i18nString(UIStrings.orientation), content: orientation},
-    {title: i18nString(UIStrings.display), content: display},
-  ];
-  if (completeNewNoteUrl) {
-    fields.push({
-      title: i18nString(UIStrings.newNoteUrl),
-      content: hasNewNoteUrl ?
-          Components.Linkifier.Linkifier.linkifyURL(completeNewNoteUrl, ({text: newNoteUrl, tabStop: true})) :
-          nothing,
-    });
-  }
-  setSectionContents(fields, presentationSection);
+  // clang-format off
+  return html`${renderSectionHeader(i18nString(UIStrings.presentation), output)}
+    <div class="report-section" jslog=${VisualLogging.section('presentation')}>
+      <devtools-report-key>${i18nString(UIStrings.startUrl)}</devtools-report-key>
+      <devtools-report-value>
+      ${completeStartUrl ? (() => {
+          const link = linkifyURL(completeStartUrl, {text: startUrl, tabStop: true, jslogContext: 'start-url'});
+          output.focusOnSection.set(i18nString(UIStrings.presentation), () => link.focus());
+          return link;
+        })() : nothing}
+      </devtools-report-value>
+      <devtools-report-key>${i18nString(UIStrings.themeColor)}</devtools-report-key>
+      <devtools-report-value>${themeColor
+        ? html`<devtools-color-swatch .color=${themeColor}></devtools-color-swatch>`
+        : nothing}
+      </devtools-report-value>
+      <devtools-report-key>${i18nString(UIStrings.backgroundColor)}</devtools-report-key>
+      <devtools-report-value>${backgroundColor
+        ? html`<devtools-color-swatch .color=${backgroundColor}></devtools-color-swatch>`
+        : nothing}
+      </devtools-report-value>
+      <devtools-report-key>${i18nString(UIStrings.orientation)}</devtools-report-key>
+      <devtools-report-value>${orientation}</devtools-report-value>
+      <devtools-report-key>${i18nString(UIStrings.display)}</devtools-report-key>
+      <devtools-report-value>${display}</devtools-report-value>
+      ${completeNewNoteUrl ? html`
+        <devtools-report-key>${i18nString(UIStrings.newNoteUrl)}</devtools-report-key>
+        <devtools-report-value>${hasNewNoteUrl
+          ? linkifyURL(completeNewNoteUrl, {text: newNoteUrl, tabStop: true})
+          : nothing}
+        </devtools-report-value>
+      ` : nothing}
+    </div>
+  `;
+  // clang-format on
 }
 
 function renderProtocolHandlers(data: ProtocolHandlersSectionData, output: ViewOutput): LitTemplate {
@@ -851,12 +841,13 @@ function renderScreenshots(data: ScreenshotsSectionData): LitTemplate {
   // clang-format on
 }
 
-function renderInstallability(
-    installabilitySection: UI.ReportView.Section, installabilityErrors: Protocol.Page.InstallabilityError[]): void {
-  installabilitySection.clearContent();
-  installabilitySection.element.classList.toggle('hidden', !installabilityErrors.length);
-  const errorMessages = getInstallabilityErrorMessages(installabilityErrors);
-  setSectionContents(errorMessages.map(content => ({content})), installabilitySection);
+function renderInstallability(installabilityErrors: Protocol.Page.InstallabilityError[]): LitTemplate {
+  return html`${renderSectionHeader(i18nString(UIStrings.installability))}
+    ${getInstallabilityErrorMessages(installabilityErrors).map(content => html`
+      <div class="report-row">
+        ${content}
+      </div>
+    `)}`;
 }
 
 function renderWindowControlsSection(
@@ -1040,23 +1031,8 @@ function renderWindowControls(
   // clang-format on
 }
 
-function setSectionContents(items: ReportSectionItem[], section: UI.ReportView.Section): void {
-  for (const item of items) {
-    if (!item.title) {
-      render(item.content, section.appendRow());
-      continue;
-    }
-    const element = item.flexed ? section.appendFlexedField(item.title) : section.appendField(item.title);
-    if (item.label) {
-      UI.ARIAUtils.setLabel(element, item.label);
-    }
-    render(item.content, element);
-  }
-}
-
 interface ViewInput {
-  emptyView: UI.EmptyWidget.EmptyWidget;
-  reportView: UI.ReportView.ReportView;
+  isEmpty?: boolean;
   errorsSection?: UI.ReportView.Section;
   installabilitySection?: UI.ReportView.Section;
   identitySection?: UI.ReportView.Section;
@@ -1082,6 +1058,7 @@ interface ViewInput {
   selectedPlatform?: string;
   onSelectOs?: (selectedOS: SDK.OverlayModel.EmulatedOSType) => Promise<void>;
   onToggleWcoToolbar?: (enabled: boolean) => Promise<void>;
+  onCopyId?: () => void;
   onToggleIconMasked?: (masked: boolean) => void;
 }
 
@@ -1094,10 +1071,7 @@ type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
 
 export const DEFAULT_VIEW: View = (input, output, target) => {
   const {
-    errorsSection,
-    installabilitySection,
-    identitySection,
-    presentationSection,
+    isEmpty,
     identityData,
     presentationData,
     protocolHandlersData,
@@ -1114,23 +1088,24 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     onSelectOs,
     onToggleWcoToolbar,
     onToggleIconMasked,
+    onCopyId,
+    url,
   } = input;
-  if (identitySection && identityData) {
-    renderIdentity(identitySection, identityData);
-  }
-  if (presentationSection && presentationData) {
-    renderPresentation(presentationSection, presentationData);
-  }
-  if (installabilitySection && installabilityErrors) {
-    renderInstallability(installabilitySection, installabilityErrors);
-  }
-  if (errorsSection) {
-    renderErrors(errorsSection, warnings, errors, imageErrors);
-  }
   // clang-format off
   render(html`
     <style>${appManifestViewStyles}</style>
-    <devtools-report>
+    <style>${UI.inspectorCommonStyles}</style>
+    ${isEmpty ? html`
+    <devtools-widget .widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget, {
+      header: i18nString(UIStrings.noManifestDetected),
+      text: i18nString(UIStrings.manifestDescription),
+      link: 'https://web.dev/add-manifest/' as Platform.DevToolsPath.UrlString
+    })}></devtools-widget>` : html`
+    <devtools-report .data=${{reportTitle: i18nString(UIStrings.appManifest), reportUrl: url}}>
+      ${renderErrors(warnings, errors, imageErrors, output)}
+      ${installabilityErrors?.length ? renderInstallability(installabilityErrors) : nothing}
+      ${identityData && onCopyId ? renderIdentity(identityData, onCopyId, output) : nothing}
+      ${presentationData ? renderPresentation(presentationData, output) : nothing}
       ${protocolHandlersData ? renderProtocolHandlers(protocolHandlersData, output) : nothing}
       ${iconsData && onToggleIconMasked && maskedIcons ?
           renderIcons(iconsData, maskedIcons, onToggleIconMasked, output) : nothing}
@@ -1138,18 +1113,12 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           windowControlsData, selectedPlatform, onSelectOs, onToggleWcoToolbar, output) : nothing}
       ${shortcutsData ? renderShortcuts(shortcutsData) : nothing}
       ${screenshotsData ? renderScreenshots(screenshotsData) : nothing}
-    </devtools-report>`, target);
+    </devtools-report>`}`, target);
   // clang-format on
 };
 
 export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
     implements SDK.TargetManager.Observer {
-  private readonly emptyView: UI.EmptyWidget.EmptyWidget;
-  private readonly reportView: UI.ReportView.ReportView;
-  private readonly errorsSection: UI.ReportView.Section;
-  private readonly installabilitySection: UI.ReportView.Section;
-  private readonly identitySection: UI.ReportView.Section;
-  private readonly presentationSection: UI.ReportView.Section;
   private registeredListeners: Common.EventTarget.EventDescriptor[];
   private target?: SDK.Target.Target;
   private resourceTreeModel?: SDK.ResourceTreeModel.ResourceTreeModel|null;
@@ -1172,29 +1141,6 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
     });
     this.view = view;
 
-    this.contentElement.classList.add('manifest-container');
-
-    this.emptyView = new UI.EmptyWidget.EmptyWidget(
-        i18nString(UIStrings.noManifestDetected), i18nString(UIStrings.manifestDescription));
-    this.emptyView.link = 'https://web.dev/add-manifest/' as Platform.DevToolsPath.UrlString;
-
-    this.emptyView.show(this.contentElement);
-    this.emptyView.hideWidget();
-
-    this.reportView = new UI.ReportView.ReportView(i18nString(UIStrings.appManifest));
-    this.reportView.registerRequiredCSS(appManifestViewStyles);
-    this.reportView.element.classList.add('manifest-view-header');
-    this.reportView.show(this.contentElement);
-    this.reportView.hideWidget();
-
-    this.errorsSection =
-        this.reportView.appendSection(i18nString(UIStrings.errorsAndWarnings), undefined, 'errors-and-warnings');
-    this.installabilitySection =
-        this.reportView.appendSection(i18nString(UIStrings.installability), undefined, 'installability');
-    this.identitySection = this.reportView.appendSection(i18nString(UIStrings.identity), 'undefined,identity');
-    this.presentationSection =
-        this.reportView.appendSection(i18nString(UIStrings.presentation), 'undefined,presentation');
-
     SDK.TargetManager.TargetManager.instance().observeTargets(this);
     this.registeredListeners = [];
 
@@ -1207,50 +1153,22 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
 
   scrollToSection(sectionTitle: string): void {
     const handler = this.output.scrollToSection.get(sectionTitle);
-    if (handler) {
-      handler();
-    } else {
-      const section = this.getManifestSections().find(s => s.title() === sectionTitle);
-      if (section) {
-        section.getTitleElement().scrollIntoView();
-      }
+    if (!handler) {
+      return;
     }
+    handler();
     UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.onInvokeAlert, {PH1: sectionTitle}));
   }
 
-  getFieldElementForSection(sectionTitle: string): HTMLElement|null {
-    const section = this.getManifestSections().find(s => s.title() === sectionTitle);
-    return section ? section.getFieldElement() : null;
-  }
-
   focusOnSection(sectionTitle: string): boolean {
     const handler = this.output.focusOnSection.get(sectionTitle);
-    if (handler) {
-      handler();
-      return true;
-    }
-    const sectionFieldElement = this.getFieldElementForSection(sectionTitle);
-    if (!sectionFieldElement) {
+    if (!handler) {
       return false;
     }
-    const checkBoxElement = sectionFieldElement.querySelector('.mask-checkbox');
-    let focusableElement: HTMLElement|null = sectionFieldElement.querySelector('[tabindex="0"]');
-    if (checkBoxElement?.shadowRoot) {
-      focusableElement = checkBoxElement.shadowRoot.querySelector('input') || null;
-    }
-    if (focusableElement) {
-      focusableElement.focus();
-      return true;
-    }
-    return false;
+    handler();
+    return true;
   }
 
-  private getManifestSections(): UI.ReportView.Section[] {
-    return [
-      this.identitySection,
-      this.presentationSection,
-    ];
-  }
   getStaticSections(): Array<{title: string, jslogContext: string|undefined}> {
     return [
       {title: i18nString(UIStrings.identity), jslogContext: 'identity'},
@@ -1262,7 +1180,7 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
   }
 
   getManifestElement(): Element {
-    return this.reportView.getHeaderElement();
+    return this.contentElement;
   }
 
   targetAdded(target: SDK.Target.Target): void {
@@ -1339,23 +1257,14 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
     const appId = appIdResponse?.appId || null;
     const recommendedId = appIdResponse?.recommendedId || null;
     if ((!data || data === '{}') && !errors.length) {
-      this.emptyView.showWidget();
-      this.reportView.hideWidget();
-      this.view({emptyView: this.emptyView, reportView: this.reportView}, this.output, this.contentElement);
+      this.view({isEmpty: true}, this.output, this.contentElement);
       this.dispatchEventToListeners(Events.MANIFEST_DETECTED, false);
       return;
     }
-    this.emptyView.hideWidget();
-    this.reportView.showWidget();
     this.dispatchEventToListeners(Events.MANIFEST_DETECTED, true);
 
-    const link = Components.Linkifier.Linkifier.linkifyURL(url, {tabStop: true});
-    this.reportView.setURL(link);
-
     if (!data) {
-      this.view(
-          {emptyView: this.emptyView, reportView: this.reportView, errorsSection: this.errorsSection, errors},
-          this.output, this.contentElement);
+      this.view({url, errors}, this.output, this.contentElement);
       return;
     }
 
@@ -1393,18 +1302,16 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
         (selectedOS: SDK.OverlayModel.EmulatedOSType) => this.onSelectOs(selectedOS, windowControlsData.themeColor) :
         undefined;
     const onToggleWcoToolbar = this.overlayModel ? (enabled: boolean) => this.onToggleWcoToolbar(enabled) : undefined;
+    const onCopyId = recommendedId ? () : void => {
+      UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.copiedToClipboard, {PH1: recommendedId}));
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(recommendedId);
+    }: undefined;
     const onToggleIconMasked = (masked: boolean): void => {
       this.maskedIcons = masked;
       this.requestUpdate();
     };
     this.view(
         {
-          emptyView: this.emptyView,
-          reportView: this.reportView,
-          errorsSection: this.errorsSection,
-          installabilitySection: this.installabilitySection,
-          identitySection: this.identitySection,
-          presentationSection: this.presentationSection,
           maskedIcons: this.maskedIcons,
           parsedManifest,
           url,
@@ -1422,6 +1329,7 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
           selectedPlatform,
           onSelectOs,
           onToggleWcoToolbar,
+          onCopyId,
           onToggleIconMasked,
         },
         this.output, this.contentElement);
@@ -1454,6 +1362,8 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
           initiatorUrl: this.target.inspectedURL(),
         },
         /* isBinary=*/ true);
+    // Just loading the image, not building UI.
+    /* eslint-disable @devtools/no-imperative-dom-api */
     const image = document.createElement('img');
     const result = new Promise((resolve, reject) => {
       image.onload = resolve;
@@ -1463,6 +1373,7 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
     // does not work, we can parse mimeType out of the response headers
     // using front_end/core/platform/MimeType.ts.
     image.src = 'data:application/octet-stream;base64,' + await Common.Base64.encode(content);
+    /* eslint-enable @devtools/no-imperative-dom-api */
     try {
       await result;
       return {naturalWidth: image.naturalWidth, naturalHeight: image.naturalHeight, src: image.src};

package/front_end/panels/application/CookieItemsView.ts

@@ -184,6 +184,7 @@ export class CookieItemsView extends UI.Widget.VBox {
     this.#toolbar.show(this.element);
 
     this.cookiesTable = new CookieTable.CookiesTable.CookiesTable(
+        undefined,
         /* renderInline */ false, this.saveCookie.bind(this), this.refreshItems.bind(this),
         this.handleCookieSelected.bind(this), this.deleteCookie.bind(this));
 

package/front_end/panels/application/SharedStorageTreeElement.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import type * as Platform from '../../core/platform/platform.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
@@ -22,6 +23,8 @@ export class SharedStorageTreeElement extends ApplicationPanelTreeElement {
     const treeElement = new SharedStorageTreeElement(resourcesPanel, sharedStorage);
     treeElement.view = await SharedStorageItemsView.createView(sharedStorage);
     treeElement.view.element.setAttribute('jslog', `${VisualLogging.pane('shared-storage-data')}`);
+    const sharedStorageIcon = createIcon('database');
+    treeElement.setLeadingIcons([sharedStorageIcon]);
     return treeElement;
   }
 

package/front_end/panels/application/appManifestView.css

@@ -13,7 +13,7 @@
   flex-grow: 0;
 }
 
-.manifest-container {
+:host {
   overflow: auto;
 }
 

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -982,10 +982,11 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       const renderResult = await UI.UIUtils.Renderer.render(node);
       if (renderResult) {
         this.selectableChildren.push(renderResult);
-        const resizeObserver = new ResizeObserver(() => {
+        // FIXME: this should not be needed once ConsoleViewMessage is rendering
+        // declaratively and the tree outline auto-resizes itself.
+        renderResult.element.addEventListener('dimensionschanged', () => {
           this.messageResized({data: renderResult.element});
         });
-        resizeObserver.observe(renderResult.element);
         result.appendChild(renderResult.element);
       } else {
         result.appendChild(this.formatParameterAsObject(remoteObject, false));
@@ -1185,7 +1186,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   }
 
   matchesFilterText(filter: string): boolean {
-    const text = this.contentElement().deepTextContent();
+    const text = this.contentElement().deepTextContent() + this.message.messageText;
     return text.toLowerCase().includes(filter.toLowerCase());
   }