Remove sections from the shared storage metadata view.

There second section is not a section at all and is used as a header for
the bottom pane in the split view. We don't label similar panes for
other storage types and even if we want to, we should abuse report
sections for this.

Bug: 1448011
Change-Id: I4be10327f50651c8fe352c9f07831a922a46778e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4556928
Reviewed-by: Wolfgang Beyer <wolfi@chromium.org>
Commit-Queue: Wolfgang Beyer <wolfi@chromium.org>
Commit-Queue: Danil Somsikov <dsv@chromium.org>
Auto-Submit: Danil Somsikov <dsv@chromium.org>

front_end/panels/application/components/SharedStorageMetadataView.ts

@@ -19,10 +19,6 @@ const UIStrings = {
    *@description Text in SharedStorage Metadata View of the Application panel
    */
   sharedStorage: 'Shared Storage',
-  /**
-   *@description Section header for Metadata
-   */
-  metadata: 'Metadata',
   /**
    *@description The origin of a URL (https://web.dev/same-site-same-origin/#origin)
    *(for a lot of languages this does not need to be translated, please translate only where necessary)
@@ -52,10 +48,6 @@ const UIStrings = {
    *@description Label for a button which when clicked causes the budget to be reset to the max.
    */
   resetBudget: 'Reset Budget',
-  /**
-   *@description Section header above Entries
-   */
-  entries: 'Entries',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/SharedStorageMetadataView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -170,41 +162,30 @@ export class SharedStorageMetadataReportView extends HTMLElement {
       // clang-format off
       LitHtml.render(LitHtml.html`
         <${ReportView.ReportView.Report.litTagName} .data=${titleForReport as ReportView.ReportView.ReportData}>
-          ${this.#renderMetadataSection()}
-          ${this.#renderEntriesSection()}
+          <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.origin)}</${
+            ReportView.ReportView.ReportKey.litTagName}>
+          <${ReportView.ReportView.ReportValue.litTagName}>
+              <div class="text-ellipsis" title=${this.#origin}>${this.#origin}</div>
+          </${ReportView.ReportView.ReportValue.litTagName}>
+         <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.creation)}</${
+            ReportView.ReportView.ReportKey.litTagName}>
+         <${ReportView.ReportView.ReportValue.litTagName}>
+         ${this.#renderDateForCreationTime()}</${ReportView.ReportView.ReportValue.litTagName}>
+         <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.numEntries)}
+         </${ReportView.ReportView.ReportKey.litTagName}>
+         <${ReportView.ReportView.ReportValue.litTagName}>${this.#length}</${ReportView.ReportView.ReportValue.litTagName}>
+         <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.entropyBudget)}<${
+            IconButton.Icon.Icon.litTagName} class="info-icon" title=${i18nString(UIStrings.budgetExplanation)}
+              .data=${{iconName: 'info', color: 'var(--icon-default)', width: '16px'} as IconButton.Icon.IconWithName}>
+            </${IconButton.Icon.Icon.litTagName}></${ReportView.ReportView.ReportKey.litTagName}><${
+            ReportView.ReportView.ReportValue.litTagName}>${this.#remainingBudget}${this.#renderResetBudgetButton()}
+            </${ReportView.ReportView.ReportValue.litTagName}>
         </${ReportView.ReportView.Report.litTagName}>
       `, this.#shadow, {host: this});
       // clang-format on
     });
   }
 
-  #renderMetadataSection(): LitHtml.LitTemplate {
-    return LitHtml.html`
-      <${ReportView.ReportView.ReportSectionHeader.litTagName}>${i18nString(UIStrings.metadata)}</${
-        ReportView.ReportView.ReportSectionHeader.litTagName}>
-      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.origin)}</${
-        ReportView.ReportView.ReportKey.litTagName}>
-      <${ReportView.ReportView.ReportValue.litTagName}>
-          <div class="text-ellipsis" title=${this.#origin}>${this.#origin}</div>
-      </${ReportView.ReportView.ReportValue.litTagName}>
-     <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.creation)}</${
-        ReportView.ReportView.ReportKey.litTagName}>
-     <${ReportView.ReportView.ReportValue.litTagName}>
-     ${this.#renderDateForCreationTime()}</${ReportView.ReportView.ReportValue.litTagName}>
-     <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.numEntries)}
-     </${ReportView.ReportView.ReportKey.litTagName}>
-     <${ReportView.ReportView.ReportValue.litTagName}>${this.#length}</${ReportView.ReportView.ReportValue.litTagName}>
-     <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.entropyBudget)}<${
-        IconButton.Icon.Icon.litTagName} class="info-icon" title=${i18nString(UIStrings.budgetExplanation)}
-          .data=${{iconName: 'info', color: 'var(--icon-default)', width: '16px'} as IconButton.Icon.IconWithName}>
-        </${IconButton.Icon.Icon.litTagName}></${ReportView.ReportView.ReportKey.litTagName}><${
-        ReportView.ReportView.ReportValue.litTagName}>${this.#remainingBudget}${this.#renderResetBudgetButton()}
-        </${ReportView.ReportView.ReportValue.litTagName}>
-      <${ReportView.ReportView.ReportSectionDivider.litTagName}></${
-        ReportView.ReportView.ReportSectionDivider.litTagName}>
-    `;
-  }
-
   #renderDateForCreationTime(): LitHtml.LitTemplate {
     if (!this.#creationTime) {
       return LitHtml.html`${i18nString(UIStrings.notYetCreated)}`;
@@ -220,13 +201,6 @@ export class SharedStorageMetadataReportView extends HTMLElement {
     ></${SharedStorageResetBudgetButton.litTagName}>`;
     // clang-format on
   }
-
-  #renderEntriesSection(): LitHtml.LitTemplate {
-    return LitHtml.html`
-      <${ReportView.ReportView.ReportSectionHeader.litTagName} title=${i18nString(UIStrings.entries)}>
-        ${i18nString(UIStrings.entries)}</${ReportView.ReportView.ReportSectionHeader.litTagName}>
-    `;
-  }
 }
 
 ComponentHelpers.CustomElements.defineComponent(

test/unittests/front_end/panels/application/components/SharedStorageMetadataView_test.ts

@@ -21,7 +21,7 @@ const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 const {assert} = chai;
 
 describeWithLocale('SharedStorageMetadataView', () => {
-  it('renders with a title and section headers', async () => {
+  it('renders with a title', async () => {
     const component = new ApplicationComponents.SharedStorageMetadataView.SharedStorageMetadataReportView();
     renderElementIntoDOM(component);
     component.data = {
@@ -37,12 +37,6 @@ describeWithLocale('SharedStorageMetadataView', () => {
 
     const titleElement = report.shadowRoot.querySelector('.report-title');
     assert.strictEqual(titleElement?.textContent, 'Shared Storage');
-
-    const headers = getCleanTextContentFromElements(component.shadowRoot, 'devtools-report-section-header');
-    assert.deepEqual(headers, [
-      'Metadata',
-      'Entries',
-    ]);
   });
 
   it('renders report keys and values', async () => {