From cd97729fc828dda34c7dd5ec2c2d7f4e83060775 Mon Sep 17 00:00:00 2001
From: Danil Somsikov <dsv@chromium.org>
Date: Tue, 23 May 2023 16:56:49 +0200
Subject: [PATCH] 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>
---
 .../components/SharedStorageMetadataView.ts   | 62 ++++++-------------
 .../SharedStorageMetadataView_test.ts         |  8 +--
 2 files changed, 19 insertions(+), 51 deletions(-)

diff --git a/front_end/panels/application/components/SharedStorageMetadataView.ts b/front_end/panels/application/components/SharedStorageMetadataView.ts
index 12aa926313..04365e0f6a 100644
--- a/front_end/panels/application/components/SharedStorageMetadataView.ts
+++ b/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(
diff --git a/test/unittests/front_end/panels/application/components/SharedStorageMetadataView_test.ts b/test/unittests/front_end/panels/application/components/SharedStorageMetadataView_test.ts
index 7eb9ab062f..7f326d3d15 100644
--- a/test/unittests/front_end/panels/application/components/SharedStorageMetadataView_test.ts
+++ b/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 () => {