diff --git a/front_end/panels/application/ApplicationPanelSidebar.ts b/front_end/panels/application/ApplicationPanelSidebar.ts index 87d1563e3bf..b1521c5c316 100644 --- a/front_end/panels/application/ApplicationPanelSidebar.ts +++ b/front_end/panels/application/ApplicationPanelSidebar.ts @@ -1540,7 +1540,7 @@ export class DOMStorageTreeElement extends ApplicationPanelTreeElement { storagePanel, domStorage.storageKey ? SDK.StorageKeyManager.parseStorageKey(domStorage.storageKey).origin : i18nString(UIStrings.localFiles), - false, domStorage.isLocalStorage ? 'local-storage' : 'session-storage'); + false, domStorage.isLocalStorage ? 'local-storage-for-domain' : 'session-storage-for-domain'); this.domStorage = domStorage; const icon = IconButton.Icon.create('table'); this.setLeadingIcons([icon]); diff --git a/test/e2e/application/session-storage_test.ts b/test/e2e/application/session-storage_test.ts index cd5869f1042..a90c515769d 100644 --- a/test/e2e/application/session-storage_test.ts +++ b/test/e2e/application/session-storage_test.ts @@ -4,24 +4,17 @@ import {assert} from 'chai'; -import {getBrowserAndPages, getTestServerPort, step} from '../../shared/helper.js'; +import {getBrowserAndPages, step} from '../../shared/helper.js'; import {describe, it} from '../../shared/mocha-extensions.js'; import { deleteSelectedStorageItem, - doubleClickSourceTreeItem, getStorageItemsData, navigateToApplicationTab, + navigateToSessionStorageForTopDomain, selectStorageItemAtIndex, } from '../helpers/application-helpers.js'; -const SESSION_STORAGE_SELECTOR = '[aria-label="Session storage"].parent'; -let DOMAIN_SELECTOR: string; - describe('The Application Tab', () => { - before(async () => { - DOMAIN_SELECTOR = `${SESSION_STORAGE_SELECTOR} + ol > [aria-label="https://localhost:${getTestServerPort()}"]`; - }); - it('shows Session Storage keys and values', async () => { const {target} = getBrowserAndPages(); @@ -30,8 +23,7 @@ describe('The Application Tab', () => { }); await step('open the domain storage', async () => { - await doubleClickSourceTreeItem(SESSION_STORAGE_SELECTOR); - await doubleClickSourceTreeItem(DOMAIN_SELECTOR); + await navigateToSessionStorageForTopDomain(); }); await step('check that storage data values are correct', async () => { @@ -54,8 +46,7 @@ describe('The Application Tab', () => { await navigateToApplicationTab(target, 'session-storage'); - await doubleClickSourceTreeItem(SESSION_STORAGE_SELECTOR); - await doubleClickSourceTreeItem(DOMAIN_SELECTOR); + await navigateToSessionStorageForTopDomain(); await selectStorageItemAtIndex(0); await deleteSelectedStorageItem(); diff --git a/test/e2e/application/shared-storage_test.ts b/test/e2e/application/shared-storage_test.ts index aad0809167b..b6880fa58c9 100644 --- a/test/e2e/application/shared-storage_test.ts +++ b/test/e2e/application/shared-storage_test.ts @@ -11,7 +11,6 @@ import { getBrowserAndPages, getTestServerPort, goToResource, - renderCoordinatorQueueEmpty, step, waitFor, } from '../../shared/helper.js'; @@ -20,10 +19,11 @@ import { it, } from '../../shared/mocha-extensions.js'; import { - doubleClickSourceTreeItem, getStorageItemsData, getTrimmedTextContent, navigateToApplicationTab, + navigateToSharedStorage, + navigateToSharedStorageForTopDomain, } from '../helpers/application-helpers.js'; import { getDataGrid, @@ -31,14 +31,11 @@ import { getInnerTextOfDataGridCells, } from '../helpers/datagrid-helpers.js'; -const SHARED_STORAGE_SELECTOR = '[aria-label="Shared storage"].parent'; let DOMAIN: string; -let DOMAIN_SELECTOR: string; describe('The Application Tab', () => { before(async () => { DOMAIN = `https://localhost:${getTestServerPort()}`; - DOMAIN_SELECTOR = `${SHARED_STORAGE_SELECTOR} + ol > [aria-label="${DOMAIN}"]`; }); afterEach(async () => { @@ -55,7 +52,7 @@ describe('The Application Tab', () => { }); await step('open the events view', async () => { - await doubleClickSourceTreeItem(SHARED_STORAGE_SELECTOR); + await navigateToSharedStorage(); }); await step('navigate to shared-storage resource so that events will be recorded', async () => { @@ -98,8 +95,7 @@ describe('The Application Tab', () => { }); await step('open the domain storage', async () => { - await doubleClickSourceTreeItem(SHARED_STORAGE_SELECTOR); - await doubleClickSourceTreeItem(DOMAIN_SELECTOR); + await navigateToSharedStorageForTopDomain(); }); await step('verify that metadata is correct', async () => { @@ -118,9 +114,7 @@ describe('The Application Tab', () => { }); await step('open the domain storage', async () => { - await doubleClickSourceTreeItem(SHARED_STORAGE_SELECTOR); - await doubleClickSourceTreeItem(DOMAIN_SELECTOR); - await renderCoordinatorQueueEmpty(); + await navigateToSharedStorageForTopDomain(); }); await step('check that storage data values are correct', async () => { diff --git a/test/e2e/helpers/application-helpers.ts b/test/e2e/helpers/application-helpers.ts index 96fcabc48ba..185601a5fa8 100644 --- a/test/e2e/helpers/application-helpers.ts +++ b/test/e2e/helpers/application-helpers.ts @@ -113,6 +113,54 @@ export async function navigateToCookiesForTopDomain() { ]); } +export async function navigateToSessionStorageForTopDomain() { + const SESSION_STORAGE_SELECTOR = '[aria-label="Session storage"].parent'; + const DOMAIN_SELECTOR = `${SESSION_STORAGE_SELECTOR} + ol > [aria-label="https://localhost:${getTestServerPort()}"]`; + await doubleClickSourceTreeItem(SESSION_STORAGE_SELECTOR); + await doubleClickSourceTreeItem(DOMAIN_SELECTOR); + + await expectVeEvents([ + veClick('Panel: resources > Pane: sidebar > Tree > TreeItem: storage > TreeItem: session-storage'), + veImpressionsUnder( + 'Panel: resources', + [ + veImpression( + 'Pane', 'session-storage', [veImpression('Section', 'empty-view', [veImpression('Link', 'learn-more')])]), + veImpressionsUnder( + 'Pane: sidebar > Tree > TreeItem: storage > TreeItem: session-storage', + [veImpression('TreeItem', 'session-storage-for-domain')]), + ]), + veClick( + 'Panel: resources > Pane: sidebar > Tree > TreeItem: storage > TreeItem: session-storage > TreeItem: session-storage-for-domain'), + veImpressionsUnder('Panel: resources', [veImpressionForSessionStorageView()]), + ]); +} + +const SHARED_STORAGE_SELECTOR = '[aria-label="Shared storage"].parent'; + +export async function navigateToSharedStorage() { + await doubleClickSourceTreeItem(SHARED_STORAGE_SELECTOR); + await waitFor('devtools-shared-storage-access-grid'); + await new Promise(resolve => setTimeout(resolve, 1000)); + await expectVeEvents([ + veClick('Panel: resources > Pane: sidebar > Tree > TreeItem: storage > TreeItem: shared-storage'), + veImpressionsUnder( + 'Panel: resources', [veImpression('Pane', 'shared-storage-events', [veImpression('Section', 'events-table')])]), + ]); +} + +export async function navigateToSharedStorageForTopDomain() { + await navigateToSharedStorage(); + const DOMAIN_SELECTOR = `${SHARED_STORAGE_SELECTOR} + ol > [aria-label="https://localhost:${getTestServerPort()}"]`; + await doubleClickSourceTreeItem(DOMAIN_SELECTOR); + await new Promise(resolve => setTimeout(resolve, 1000)); + await expectVeEvents([ + veClick( + 'Panel: resources > Pane: sidebar > Tree > TreeItem: storage > TreeItem: shared-storage > TreeItem: shared-storage-instance'), + veImpressionsUnder('Panel: resources', [veImpressionForSharedStorageView()]), + ]); +} + export async function doubleClickSourceTreeItem(selector: string) { const element = await waitFor(selector); element.evaluate(el => el.scrollIntoView(true)); @@ -185,6 +233,7 @@ export async function selectStorageItemAtIndex(index: number) { try { const dataGridNodes = await $$('.storage-view .data-grid-data-grid-node:not(.creation-node)'); await dataGridNodes[index].click(); + await expectVeEvents([veClick('Panel: resources > Pane: session-storage-data > TableRow > TableCell: value')]); } catch (error) { if (error.message === 'Node is detached from document') { return false; @@ -197,6 +246,8 @@ export async function selectStorageItemAtIndex(index: number) { export async function deleteSelectedStorageItem() { await click('[aria-label="Delete Selected"]'); + await expectVeEvents([veClick( + 'Panel: resources > Pane: session-storage-data > Toolbar > Action: storage-items-view.delete-selected')]); } export async function selectCookieByName(name: string) { @@ -345,3 +396,31 @@ function veImpressionForFrameDetails() { veImpression('Link', 'learn-more.origin-trials'), ]); } + +function veImpressionForStorageViewToolbar() { + return veImpression('Toolbar', undefined, [ + veImpression('Action', 'storage-items-view.refresh'), + veImpression('TextField'), + veImpression('Action', 'storage-items-view.clear-all'), + veImpression('Action', 'storage-items-view.delete-selected'), + ]); +} + +function veImpressionForSessionStorageView() { + return veImpression('Pane', 'session-storage-data', [ + veImpressionForStorageViewToolbar(), + veImpression('Pane', 'preview'), + veImpression('TableHeader', 'key'), + veImpression('TableHeader', 'value'), + ]); +} + +function veImpressionForSharedStorageView() { + return veImpression('Pane', 'shared-storage-data', [ + veImpressionForStorageViewToolbar(), + veImpression('TableHeader', 'key'), + veImpression('TableHeader', 'value'), + veImpression('Action', 'reset-entropy-budget'), + veImpression('Pane', 'preview', [veImpression('Section', 'json-view')]), + ]); +}