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}>
+
${this.#origin}
+ ${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}>
- ${this.#origin}
- ${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 () => {