Skip to content

Commit 1482692

Browse files
author
DavidQ
committed
Reapply Session Inspector V2 JSON Data Dirty and Status accordions with stable behavior - PR_26128_022-session-inspector-v2-reapply-detail-accordions
1 parent e93eea5 commit 1482692

5 files changed

Lines changed: 122 additions & 12 deletions

File tree

‎docs/dev/reports/playwright_session_inspector_v2_reapply_detail_accordions.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Playwright Session Inspector V2 Reapply Detail Accordions
2+
3+
## Command
4+
`npm run test:workspace-v2`
5+
6+
## Result
7+
- Passed: 15/15
8+
- Runtime: about 1.5 minutes
9+
10+
## Targeted Coverage
11+
- Verified JSON accordion opens and closes correctly.
12+
- Verified Data accordion opens and closes correctly.
13+
- Verified Dirty accordion opens and closes correctly.
14+
- Verified Status accordion opens and closes correctly.
15+
- Verified JSON, Data, Dirty, and Status do not fight each other:
16+
- closing one leaves the other three open
17+
- reopening one leaves the other three open
18+
- Verified Copy All still copies a single labeled JSON/Data/Dirty payload.
19+
- Verified Clear Status still clears the Session Inspector V2 status log.
20+
- Verified existing storage tile layout and delete behavior still pass.
21+
22+
## Skipped
23+
- Full samples smoke test was skipped by request. The relevant Session Inspector V2 accordion, Copy All, Clear Status, and Workspace Manager V2 launch coverage is in `tests/playwright/tools/WorkspaceManagerV2.spec.mjs`.

‎docs/dev/reports/session_inspector_v2_reapply_detail_accordions.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# Session Inspector V2 Reapply Detail Accordions
2+
3+
## Scope
4+
- Replaced the custom `div role="button"` accordion headers for:
5+
- JSON
6+
- Data
7+
- Dirty
8+
- Status
9+
- Reapplied those four sections with the same working V2 pattern used by the other Session Inspector V2 sections:
10+
- real `button.accordion-v2__header`
11+
- `aria-expanded`
12+
- `aria-controls`
13+
- shared `AccordionSection` binding
14+
- Kept Copy All and Clear Status as separate header-adjacent action buttons so they do not nest inside accordion buttons.
15+
16+
## Preserved Behavior
17+
- Copy All still copies one payload containing labeled JSON, Data, and Dirty sections.
18+
- JSON still shows the full selected storage object.
19+
- Data still shows only the selected normalized tool `data` section or actionable empty-state text.
20+
- Dirty still shows only the selected normalized tool `dirty` section or actionable empty-state text.
21+
- Status + Clear Status behavior is preserved.
22+
- Storage tiles, per-tile Delete, and Delete All behavior were not changed.
23+
- Normalized session object shape was not changed.
24+
25+
## Validation Notes
26+
- JSON, Data, Dirty, and Status now open and close through fresh V2 accordion buttons.
27+
- Each of the four sections was validated independently:
28+
- closing JSON does not close Data, Dirty, or Status
29+
- closing Data does not close JSON, Dirty, or Status
30+
- closing Dirty does not close JSON, Data, or Status
31+
- closing Status does not close JSON, Data, or Dirty
32+
- Copy All and Clear Status were validated after the accordion reapply.
33+
34+
## Guardrails
35+
- No cross-tool communication was added.
36+
- No sample JSON was modified.
37+
- No roadmap content was modified.
38+
39+
## Skipped
40+
- Full samples smoke test was skipped by request. The changed surface is Session Inspector V2 UI accordion behavior and is covered by `npm run test:workspace-v2`.

‎tests/playwright/tools/WorkspaceManagerV2.spec.mjs‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,31 @@ async function expectSessionInspectorV2AccordionToggles(page, contentId) {
192192
await expect(header).toHaveAttribute("aria-expanded", "true");
193193
}
194194

195+
async function expectSessionInspectorV2DetailAccordionsIndependent(page) {
196+
const contentIds = [
197+
"sessionInspectorV2JsonContent",
198+
"sessionInspectorV2DataContent",
199+
"sessionInspectorV2DirtyContent",
200+
"sessionInspectorV2StatusContent"
201+
];
202+
for (const contentId of contentIds) {
203+
const header = page.locator(`.accordion-v2__header[aria-controls="${contentId}"]`);
204+
const content = page.locator(`#${contentId}`);
205+
await expect(header).toBeVisible();
206+
await expect(content).toBeVisible();
207+
await header.click();
208+
await expect(content).toBeHidden();
209+
for (const otherContentId of contentIds.filter((entry) => entry !== contentId)) {
210+
await expect(page.locator(`#${otherContentId}`)).toBeVisible();
211+
}
212+
await header.click();
213+
await expect(content).toBeVisible();
214+
for (const otherContentId of contentIds.filter((entry) => entry !== contentId)) {
215+
await expect(page.locator(`#${otherContentId}`)).toBeVisible();
216+
}
217+
}
218+
}
219+
195220
async function expectSessionInspectorV2FullscreenShell(page) {
196221
const summary = page.locator("[data-session-inspector-v2-summary]");
197222
await summary.click();
@@ -580,6 +605,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
580605
]) {
581606
await expectSessionInspectorV2AccordionToggles(page, contentId);
582607
}
608+
await expectSessionInspectorV2DetailAccordionsIndependent(page);
583609

584610
const tileState = await page.locator(".session-inspector-v2__entry-card").evaluateAll((cards) => {
585611
const rects = cards.map((card) => {
@@ -640,6 +666,8 @@ test.describe("Workspace Manager V2 bootstrap", () => {
640666
expect(copiedValidationText).toContain("=== JSON ===\ntrue");
641667
expect(copiedValidationText).toContain("=== Data ===\nNo data section is present for sessionStorage:session-inspector-v2-alpha.");
642668
expect(copiedValidationText).toContain("=== Dirty ===\nNo dirty section is present for sessionStorage:session-inspector-v2-alpha.");
669+
await page.locator("#clearSessionInspectorV2StatusButton").click();
670+
await expect(page.locator("#statusLog")).toHaveValue("");
643671
await page.locator('[data-session-inspector-v2-delete-entry-id="sessionStorage:session-inspector-v2-alpha"]').click();
644672
await expect(page.locator("#sessionInspectorV2EntryList [data-session-inspector-v2-entry-id]")).toHaveCount(4);
645673
await expect(page.locator("#sessionInspectorV2JsonOutput")).toHaveText('"plain beta value"');

‎tools/session-inspector-v2/index.html‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -97,10 +97,12 @@ <h2 class="tools-platform-frame__eyebrow">Session storage visibility</h2>
9797

9898
<aside class="session-inspector-v2__panel session-inspector-v2__panel--right tool-shell-common__fullscreen-panel tool-shell-common__fullscreen-side-panel tool-shell-common__fullscreen-panel-right" aria-label="Session JSON, data, and dirty tracking">
9999
<section class="accordion-v2 session-inspector-v2__accordion session-inspector-v2__accordion--fill is-open" data-accordion-v2-open="true">
100-
<div class="accordion-v2__header session-inspector-v2__json-accordion-header" role="button" tabindex="0" aria-expanded="true" aria-controls="sessionInspectorV2JsonContent">
101-
<span>JSON</span>
102-
<div class="session-inspector-v2__json-header-actions">
100+
<div class="session-inspector-v2__accordion-header-row session-inspector-v2__json-accordion-header">
101+
<button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="sessionInspectorV2JsonContent">
102+
<span>JSON</span>
103103
<span class="accordion-v2__icon" aria-hidden="true">+</span>
104+
</button>
105+
<div class="session-inspector-v2__json-header-actions">
104106
<button id="copySessionInspectorV2AllButton" type="button">Copy All</button>
105107
</div>
106108
</div>
@@ -110,30 +112,36 @@ <h2 class="tools-platform-frame__eyebrow">Session storage visibility</h2>
110112
</section>
111113

112114
<section class="accordion-v2 session-inspector-v2__accordion session-inspector-v2__accordion--fill is-open" data-accordion-v2-open="true">
113-
<div class="accordion-v2__header session-inspector-v2__data-accordion-header" role="button" tabindex="0" aria-expanded="true" aria-controls="sessionInspectorV2DataContent">
114-
<span>Data</span>
115-
<span class="accordion-v2__icon" aria-hidden="true">+</span>
115+
<div class="session-inspector-v2__accordion-header-row session-inspector-v2__data-accordion-header">
116+
<button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="sessionInspectorV2DataContent">
117+
<span>Data</span>
118+
<span class="accordion-v2__icon" aria-hidden="true">+</span>
119+
</button>
116120
</div>
117121
<div id="sessionInspectorV2DataContent" class="accordion-v2__content">
118122
<pre id="sessionInspectorV2DataOutput" class="session-inspector-v2__output">Select a normalized tool entry with a top-level data section.</pre>
119123
</div>
120124
</section>
121125

122126
<section class="accordion-v2 session-inspector-v2__accordion session-inspector-v2__accordion--fill is-open" data-accordion-v2-open="true">
123-
<div class="accordion-v2__header session-inspector-v2__dirty-accordion-header" role="button" tabindex="0" aria-expanded="true" aria-controls="sessionInspectorV2DirtyContent">
124-
<span>Dirty</span>
125-
<span class="accordion-v2__icon" aria-hidden="true">+</span>
127+
<div class="session-inspector-v2__accordion-header-row session-inspector-v2__dirty-accordion-header">
128+
<button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="sessionInspectorV2DirtyContent">
129+
<span>Dirty</span>
130+
<span class="accordion-v2__icon" aria-hidden="true">+</span>
131+
</button>
126132
</div>
127133
<div id="sessionInspectorV2DirtyContent" class="accordion-v2__content">
128134
<pre id="sessionInspectorV2DirtyOutput" class="session-inspector-v2__output">Select a normalized tool entry with a top-level dirty section.</pre>
129135
</div>
130136
</section>
131137

132138
<section class="accordion-v2 session-inspector-v2__accordion is-open" data-accordion-v2-open="true">
133-
<div class="accordion-v2__header session-inspector-v2__status-accordion-header" role="button" tabindex="0" aria-expanded="true" aria-controls="sessionInspectorV2StatusContent">
134-
<span>Status</span>
135-
<div class="session-inspector-v2__status-header-actions">
139+
<div class="session-inspector-v2__accordion-header-row session-inspector-v2__status-accordion-header">
140+
<button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="sessionInspectorV2StatusContent">
141+
<span>Status</span>
136142
<span class="accordion-v2__icon" aria-hidden="true">+</span>
143+
</button>
144+
<div class="session-inspector-v2__status-header-actions">
137145
<button id="clearSessionInspectorV2StatusButton" type="button">Clear Status</button>
138146
</div>
139147
</div>

‎tools/session-inspector-v2/styles/sessionInspectorV2.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,17 @@ button:hover {
191191
text-align: left;
192192
}
193193

194+
.session-inspector-v2__accordion-header-row {
195+
flex: 0 0 auto;
196+
display: flex;
197+
align-items: stretch;
198+
}
199+
200+
.session-inspector-v2__accordion-header-row > .accordion-v2__header {
201+
width: auto;
202+
flex: 1 1 auto;
203+
}
204+
194205
.accordion-v2__icon {
195206
width: 22px;
196207
height: 22px;

0 commit comments

Comments
 (0)