Source Text to Speech V2 payloads from JSON and align workspace manifest array data - PR_26130_020-text-to-speech-v2-sample-json-source

Author: DavidQ

docs/dev/reports/PR_26130_023-text-to-speech-v2-layout-height-fix.md

@@ -0,0 +1,72 @@
+# PR_26130_023-text-to-speech-v2-layout-height-fix
+
+## Purpose
+
+Fix Text to Speech V2 layout height behavior only.
+
+## Changes
+
+- Removed normal-mode accordion fill behavior that created large empty space in Text to Speak and Named Sentences.
+- Added Text to Speech V2-specific layout classes for Output Summary and Status so fullscreen mode can constrain each panel independently.
+- Updated fullscreen sizing so left, center, and right columns fit inside the viewport height.
+- Constrained Output Summary and Status to scroll within their own panels so Status remains visible.
+- Kept Speak, Pause, Resume, and Stop at the bottom of Text to Speak.
+
+## Files Changed
+
+- `tools/text2speach-V2/index.html`
+- `tools/text2speach-V2/styles/text2speach-V2.css`
+- `tests/playwright/tools/WorkspaceManagerV2.spec.mjs`
+
+## Validation
+
+Playwright impacted: Yes.
+
+Command run:
+
+```powershell
+npm run test:workspace-v2
+```
+
+Result: PASS, 33 tests passed.
+
+Additional checks:
+
+```powershell
+npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list -g "loads Text to Speech V2 from URL"
+git diff --check
+```
+
+Result: focused Playwright test passed. `git diff --check` passed with line-ending normalization warnings only.
+
+## Playwright Coverage
+
+- Non-fullscreen Text to Speak content no longer has a large empty spacer.
+- Non-fullscreen Named Sentences content no longer has large unused bottom space.
+- Fullscreen Text to Speak remains visible and does not collapse.
+- Fullscreen center Named Sentences remains visible inside the center column.
+- Fullscreen Output Summary stays within the right column and does not push Status offscreen.
+- Fullscreen Status remains visible and scrolls internally.
+
+Expected pass behavior: all layout assertions pass in the Text to Speech V2 URL JSON workflow.
+
+Expected fail behavior: tests fail if normal mode reintroduces excess spacer height, if fullscreen columns exceed viewport height, or if Status is pushed out of the right panel.
+
+## Manual Validation
+
+1. Open Text to Speech V2 with sample 1903 loaded.
+2. Confirm Text to Speak wraps tightly around the textarea and speech buttons.
+3. Confirm Named Sentences has no large empty area below tiles.
+4. Click Hide Header and Details.
+5. Confirm the left, center, and right panels fit in the viewport; Text to Speak remains visible; Output Summary and Status scroll within their own panels.
+
+## Full Samples Smoke Test
+
+Skipped. The BUILD request explicitly said not to run the full samples smoke test, and this PR is scoped to Text to Speech V2 layout height behavior only.
+
+## Scope Notes
+
+- No schema changes.
+- No runtime JavaScript changes.
+- No unrelated files.
+- No `start_of_day` changes.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -844,21 +844,40 @@ async function expectTextToSpeechV2FullscreenShell(page) {
     const left = document.querySelector(".tool-shell-common__fullscreen-panel-left").getBoundingClientRect();
     const center = document.querySelector(".tool-shell-common__fullscreen-center-panel").getBoundingClientRect();
     const right = document.querySelector(".tool-shell-common__fullscreen-panel-right").getBoundingClientRect();
+    const textContent = document.querySelector("#text2speach-V2TextContent").getBoundingClientRect();
+    const queueContent = document.querySelector("#text2speach-V2QueueContent").getBoundingClientRect();
+    const summaryAccordion = document.querySelector(".text2speach-V2__summary-accordion").getBoundingClientRect();
+    const statusAccordion = document.querySelector(".text2speach-V2__status-accordion").getBoundingClientRect();
+    const statusLog = document.querySelector("#text2speach-V2StatusLog").getBoundingClientRect();
     const rootStyle = getComputedStyle(document.querySelector(".tool-shell-common__fullscreen-root"));
     const gap = Number.parseFloat(rootStyle.columnGap || "0");
     const horizontalPadding = Number.parseFloat(rootStyle.paddingLeft || "0") + Number.parseFloat(rootStyle.paddingRight || "0");
+    const statusStyle = getComputedStyle(document.querySelector("#text2speach-V2StatusLog"));
     return {
       centerAfterLeft: center.left > left.right,
       centerFillsRemaining: Math.abs(center.width - (root.width - horizontalPadding - left.width - right.width - (gap * 2))) <= 4,
+      centerFitsViewport: center.bottom <= window.innerHeight + 1,
       centerWidth: Math.round(center.width),
       gridTemplateColumns: rootStyle.gridTemplateColumns,
       leftAtSide: left.left < center.left,
+      leftFitsViewport: left.bottom <= window.innerHeight + 1,
       leftWidth: Math.round(left.width),
       layoutDisplay: rootStyle.display,
+      queueContentBottomWithinCenter: queueContent.bottom <= center.bottom + 1,
+      queueContentHeight: Math.round(queueContent.height),
       rightAtSide: right.left > center.right,
+      rightFitsViewport: right.bottom <= window.innerHeight + 1,
       rightWithinRoot: right.right <= root.right + 1,
       rightWidth: Math.round(right.width),
       rootWidth: Math.round(root.width),
+      statusBelowSummary: statusAccordion.top >= summaryAccordion.bottom - 1,
+      statusBottomWithinRight: statusAccordion.bottom <= right.bottom + 1,
+      statusLogHeight: Math.round(statusLog.height),
+      statusLogOverflowY: statusStyle.overflowY,
+      summaryBottomWithinRight: summaryAccordion.bottom <= right.bottom + 1,
+      textContentBottomWithinCenter: textContent.bottom <= center.bottom + 1,
+      textContentHeight: Math.round(textContent.height),
+      textContentVisible: textContent.height >= 220,
       viewportWidth: window.innerWidth
     };
   });
@@ -870,10 +889,22 @@ async function expectTextToSpeechV2FullscreenShell(page) {
   expect(fullscreenLayout.rightWidth).toBe(360);
   expect(fullscreenLayout.leftAtSide).toBe(true);
   expect(fullscreenLayout.centerAfterLeft).toBe(true);
+  expect(fullscreenLayout.leftFitsViewport).toBe(true);
+  expect(fullscreenLayout.centerFitsViewport).toBe(true);
+  expect(fullscreenLayout.rightFitsViewport).toBe(true);
   expect(fullscreenLayout.rightAtSide).toBe(true);
   expect(fullscreenLayout.rightWithinRoot).toBe(true);
   expect(fullscreenLayout.centerFillsRemaining).toBe(true);
   expect(fullscreenLayout.centerWidth).toBeGreaterThan(500);
+  expect(fullscreenLayout.textContentVisible).toBe(true);
+  expect(fullscreenLayout.textContentBottomWithinCenter).toBe(true);
+  expect(fullscreenLayout.queueContentHeight).toBeGreaterThan(120);
+  expect(fullscreenLayout.queueContentBottomWithinCenter).toBe(true);
+  expect(fullscreenLayout.summaryBottomWithinRight).toBe(true);
+  expect(fullscreenLayout.statusBelowSummary).toBe(true);
+  expect(fullscreenLayout.statusBottomWithinRight).toBe(true);
+  expect(fullscreenLayout.statusLogHeight).toBeGreaterThan(120);
+  expect(fullscreenLayout.statusLogOverflowY).toBe("auto");
 
   const namedSentencesHeader = page.locator('[aria-controls="text2speach-V2QueueContent"]');
   await namedSentencesHeader.click();
@@ -1174,20 +1205,26 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         const actions = content.querySelector("#text2speach-V2SpeechActions");
         const contentRect = content.getBoundingClientRect();
         const textareaRect = textarea.getBoundingClientRect();
+        const fieldRect = textarea.closest(".text2speach-V2__field").getBoundingClientRect();
         const actionsRect = actions.getBoundingClientRect();
         const contentStyle = getComputedStyle(content);
+        const rowGap = Number.parseFloat(contentStyle.rowGap || contentStyle.gap || "0");
+        const paddingTop = Number.parseFloat(contentStyle.paddingTop || "0");
+        const paddingBottom = Number.parseFloat(contentStyle.paddingBottom || "0");
+        const expectedContentHeight = fieldRect.height + actionsRect.height + rowGap + paddingTop + paddingBottom;
         return {
           actionsAreBottomControl: content.lastElementChild?.id === "text2speach-V2SpeechActions",
           actionsBelowText: actionsRect.top >= textareaRect.bottom,
           actionsBottomAligned: Math.abs(actionsRect.bottom - contentRect.bottom) <= 1,
+          contentExcessHeight: Math.round(contentRect.height - expectedContentHeight),
           contentDisplay: contentStyle.display,
           contentFlexDirection: contentStyle.flexDirection,
           contentJustify: contentStyle.justifyContent,
           fieldMarginBottom: getComputedStyle(textarea.closest(".text2speach-V2__field")).marginBottom,
           textareaResize: getComputedStyle(textarea).resize
         };
       });
-      expect(textAccordionLayout).toEqual({
+      expect(textAccordionLayout).toMatchObject({
         actionsAreBottomControl: true,
         actionsBelowText: true,
         actionsBottomAligned: true,
@@ -1197,11 +1234,27 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         fieldMarginBottom: "0px",
         textareaResize: "none"
       });
+      expect(textAccordionLayout.contentExcessHeight).toBeLessThanOrEqual(16);
+      expect(textAccordionLayout.contentExcessHeight).toBeGreaterThanOrEqual(-2);
       const namedSentenceTopControls = await page.locator("#text2speach-V2QueueContent").evaluate((content) => {
         const firstElement = Array.from(content.children).find((child) => child.nodeType === Node.ELEMENT_NODE);
         return firstElement?.id || "";
       });
       expect(namedSentenceTopControls).toBe("text2speach-V2QueueTiles");
+      const namedSentenceLayout = await page.locator("#text2speach-V2QueueContent").evaluate((content) => {
+        const tiles = content.querySelector("#text2speach-V2QueueTiles");
+        const contentRect = content.getBoundingClientRect();
+        const tilesRect = tiles.getBoundingClientRect();
+        const contentStyle = getComputedStyle(content);
+        const paddingTop = Number.parseFloat(contentStyle.paddingTop || "0");
+        const paddingBottom = Number.parseFloat(contentStyle.paddingBottom || "0");
+        return {
+          contentExcessHeight: Math.round(contentRect.height - tilesRect.height - paddingTop - paddingBottom),
+          unusedBottomSpace: Math.round(contentRect.bottom - tilesRect.bottom - paddingBottom)
+        };
+      });
+      expect(namedSentenceLayout.contentExcessHeight).toBeLessThanOrEqual(16);
+      expect(namedSentenceLayout.unusedBottomSpace).toBeLessThanOrEqual(2);
       expect(await page.locator("#text2speach-V2SpeechOptionsContent .text2speach-V2__item-actions button").evaluateAll((buttons) => buttons.map((button) => button.textContent.trim()))).toEqual(["Add", "Duplicate", "Delete"]);
       const statusHeaderOrder = await page.locator(".text2speach-V2__status-accordion-header").evaluate((header) => Array.from(header.querySelectorAll(":scope > span, :scope > div > span, :scope > div > button"), (element) => element.textContent.trim()));
       expect(statusHeaderOrder).toEqual(["Status", "+", "Clear"]);

tools/text2speach-V2/index.html

@@ -145,7 +145,7 @@ <h2 class="tools-platform-frame__eyebrow">Browser speech synthesis</h2>
       </section>
 
       <aside class="text2speach-V2__panel text2speach-V2__panel--right tool-shell-common__fullscreen-panel tool-shell-common__fullscreen-side-panel tool-shell-common__fullscreen-panel-right" aria-label="Speech output">
-        <section class="accordion-v2 text2speach-V2__accordion is-open" data-accordion-v2-open="true">
+        <section class="accordion-v2 text2speach-V2__accordion text2speach-V2__summary-accordion is-open" data-accordion-v2-open="true">
           <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="text2speach-V2SpeechSummaryContent">
             <span>Output Summary</span>
             <span class="accordion-v2__icon" aria-hidden="true">+</span>
@@ -155,7 +155,7 @@ <h2 class="tools-platform-frame__eyebrow">Browser speech synthesis</h2>
           </div>
         </section>
 
-        <section class="accordion-v2 text2speach-V2__accordion is-open" data-accordion-v2-open="true">
+        <section class="accordion-v2 text2speach-V2__accordion text2speach-V2__status-accordion is-open" data-accordion-v2-open="true">
           <div class="accordion-v2__header text2speach-V2__status-accordion-header" aria-expanded="true" aria-controls="text2speach-V2StatusLogContent">
             <span>Status</span>
             <div class="text2speach-V2__status-header-actions">

tools/text2speach-V2/styles/text2speach-V2.css

@@ -113,6 +113,12 @@
   min-width: 0;
 }
 
+.text2speach-V2__panel--right {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
 .text2speach-V2__panel--center {
   display: flex;
   flex-direction: column;
@@ -123,6 +129,10 @@
   margin-bottom: 12px;
 }
 
+.text2speach-V2__accordion.is-open {
+  flex: 0 1 auto;
+}
+
 .text2speach-V2__text-accordion {
   flex: 0 0 auto;
 }
@@ -144,15 +154,15 @@
   margin: 0;
 }
 
-.text2speach-V2__accordion--fill,
-.text2speach-V2__accordion--fill .accordion-v2__content {
-  height: 100%;
-}
-
 .text2speach-V2__accordion--fill {
+  flex: 0 1 auto;
   min-height: 0;
 }
 
+.text2speach-V2__accordion--fill .accordion-v2__content {
+  height: auto;
+}
+
 .text2speach-V2__field {
   display: grid;
   gap: 6px;
@@ -313,6 +323,8 @@
 html.tools-platform-fullscreen-active,
 body.tools-platform-surface.tools-platform-fullscreen-active[data-tool-id="text2speach-V2"],
 html:fullscreen body.tools-platform-surface[data-tool-id="text2speach-V2"] {
+  height: 100vh;
+  max-height: 100vh;
   min-height: 100vh;
   overflow: hidden;
 }
@@ -348,12 +360,13 @@ html:fullscreen body.tools-platform-surface[data-tool-id="text2speach-V2"] > .te
 
 body.tools-platform-surface.tools-platform-fullscreen-active[data-tool-id="text2speach-V2"] > .text2speach-V2,
 html:fullscreen body.tools-platform-surface[data-tool-id="text2speach-V2"] > .text2speach-V2 {
-  flex: 1 1 auto;
+  flex: 1 1 0;
   display: grid;
   box-sizing: border-box;
   grid-template-columns: 340px minmax(0, 1fr) 360px;
   align-items: stretch;
   gap: 16px;
+  height: 0;
   width: 100%;
   max-width: none;
   min-height: 0;
@@ -368,7 +381,16 @@ html:fullscreen body.tools-platform-surface[data-tool-id="text2speach-V2"] .tool
   height: 100%;
   max-height: none;
   min-height: 0;
-  overflow: auto;
+  overflow: hidden;
+}
+
+body.tools-platform-surface.tools-platform-fullscreen-active[data-tool-id="text2speach-V2"] .text2speach-V2__panel,
+html:fullscreen body.tools-platform-surface[data-tool-id="text2speach-V2"] .text2speach-V2__panel {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  min-height: 0;
+  overflow: hidden;
 }
 
 body.tools-platform-surface.tools-platform-fullscreen-active[data-tool-id="text2speach-V2"] .tool-shell-common__fullscreen-panel-left,
@@ -395,6 +417,33 @@ html:fullscreen body.tools-platform-surface[data-tool-id="text2speach-V2"] .tool
   overflow: hidden;
 }
 
+body.tools-platform-surface.tools-platform-fullscreen-active[data-tool-id="text2speach-V2"] .text2speach-V2__panel--left .text2speach-V2__accordion,
+html:fullscreen body.tools-platform-surface[data-tool-id="text2speach-V2"] .text2speach-V2__panel--left .text2speach-V2__accordion {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+body.tools-platform-surface.tools-platform-fullscreen-active[data-tool-id="text2speach-V2"] .text2speach-V2__panel--left .accordion-v2__content,
+html:fullscreen body.tools-platform-surface[data-tool-id="text2speach-V2"] .text2speach-V2__panel--left .accordion-v2__content {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+}
+
+body.tools-platform-surface.tools-platform-fullscreen-active[data-tool-id="text2speach-V2"] .text2speach-V2__text-accordion,
+html:fullscreen body.tools-platform-surface[data-tool-id="text2speach-V2"] .text2speach-V2__text-accordion {
+  flex: 0 0 auto;
+  max-height: 42%;
+  min-height: 0;
+}
+
+body.tools-platform-surface.tools-platform-fullscreen-active[data-tool-id="text2speach-V2"] #text2speach-V2TextContent,
+html:fullscreen body.tools-platform-surface[data-tool-id="text2speach-V2"] #text2speach-V2TextContent {
+  min-height: 238px;
+  max-height: 100%;
+  overflow: auto;
+}
+
 body.tools-platform-surface.tools-platform-fullscreen-active[data-tool-id="text2speach-V2"] .text2speach-V2__accordion--fill,
 html:fullscreen body.tools-platform-surface[data-tool-id="text2speach-V2"] .text2speach-V2__accordion--fill {
   flex: 1 1 auto;
@@ -414,3 +463,35 @@ body.tools-platform-surface.tools-platform-fullscreen-active[data-tool-id="text2
 html:fullscreen body.tools-platform-surface[data-tool-id="text2speach-V2"] .text2speach-V2__queue-tiles {
   max-height: none;
 }
+
+body.tools-platform-surface.tools-platform-fullscreen-active[data-tool-id="text2speach-V2"] .text2speach-V2__summary-accordion,
+html:fullscreen body.tools-platform-surface[data-tool-id="text2speach-V2"] .text2speach-V2__summary-accordion {
+  flex: 0 1 45%;
+  max-height: 45%;
+  min-height: 0;
+}
+
+body.tools-platform-surface.tools-platform-fullscreen-active[data-tool-id="text2speach-V2"] .text2speach-V2__status-accordion,
+html:fullscreen body.tools-platform-surface[data-tool-id="text2speach-V2"] .text2speach-V2__status-accordion {
+  flex: 1 1 0;
+  min-height: 160px;
+}
+
+body.tools-platform-surface.tools-platform-fullscreen-active[data-tool-id="text2speach-V2"] .text2speach-V2__summary-accordion .accordion-v2__content,
+body.tools-platform-surface.tools-platform-fullscreen-active[data-tool-id="text2speach-V2"] .text2speach-V2__status-accordion .accordion-v2__content,
+html:fullscreen body.tools-platform-surface[data-tool-id="text2speach-V2"] .text2speach-V2__summary-accordion .accordion-v2__content,
+html:fullscreen body.tools-platform-surface[data-tool-id="text2speach-V2"] .text2speach-V2__status-accordion .accordion-v2__content {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+}
+
+body.tools-platform-surface.tools-platform-fullscreen-active[data-tool-id="text2speach-V2"] .text2speach-V2__summary,
+body.tools-platform-surface.tools-platform-fullscreen-active[data-tool-id="text2speach-V2"] #text2speach-V2StatusLog,
+html:fullscreen body.tools-platform-surface[data-tool-id="text2speach-V2"] .text2speach-V2__summary,
+html:fullscreen body.tools-platform-surface[data-tool-id="text2speach-V2"] #text2speach-V2StatusLog {
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  resize: none;
+}