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.ReportValue.litTagName}> +
${this.#origin}
+ + <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.creation)} + <${ReportView.ReportView.ReportValue.litTagName}> + ${this.#renderDateForCreationTime()} + <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.numEntries)} + + <${ReportView.ReportView.ReportValue.litTagName}>${this.#length} + <${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}> + <${ + ReportView.ReportView.ReportValue.litTagName}>${this.#remainingBudget}${this.#renderResetBudgetButton()} + `, this.#shadow, {host: this}); // clang-format on }); } - #renderMetadataSection(): LitHtml.LitTemplate { - return LitHtml.html` - <${ReportView.ReportView.ReportSectionHeader.litTagName}>${i18nString(UIStrings.metadata)} - <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.origin)} - <${ReportView.ReportView.ReportValue.litTagName}> -
${this.#origin}
- - <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.creation)} - <${ReportView.ReportView.ReportValue.litTagName}> - ${this.#renderDateForCreationTime()} - <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.numEntries)} - - <${ReportView.ReportView.ReportValue.litTagName}>${this.#length} - <${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}> - <${ - ReportView.ReportView.ReportValue.litTagName}>${this.#remainingBudget}${this.#renderResetBudgetButton()} - - <${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 { >`; // clang-format on } - - #renderEntriesSection(): LitHtml.LitTemplate { - return LitHtml.html` - <${ReportView.ReportView.ReportSectionHeader.litTagName} title=${i18nString(UIStrings.entries)}> - ${i18nString(UIStrings.entries)} - `; - } } 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 () => {