Polish MIDI Studio V2 instruments header and octave grid bar beat layout - PR_26146_036-midi-studio-v2-octave-grid-layout-polish

Author: ToolboxAid

docs/dev/reports/PR_26146_036-midi-studio-v2-octave-grid-layout-polish_validation.md

@@ -0,0 +1,75 @@
+# PR_26146_036 MIDI Studio V2 Octave Grid Layout Polish Validation
+
+## Scope
+
+- Continued from PR_26146_035.
+- Polished the MIDI Studio V2 Instruments header into one row with `Instruments`, `Add`, and `X`.
+- Kept `Add` wired to existing instrument-row creation.
+- Kept `X` non-destructive by collapsing the existing Instruments accordion panel.
+- Removed the `Octave` label column from the frozen Bar/Beat timeline header while preserving separate frozen note labels.
+- Added alternating octave/note row styling and changed spreadsheet grid lines to 2px.
+- Preserved playback, Play/Stop, GM controls, 350px left column, export Type + Save, and octave editing behavior.
+
+## Files Changed
+
+- `tools/midi-studio-v2/index.html`
+- `tools/midi-studio-v2/js/bootstrap.js`
+- `tools/midi-studio-v2/js/controls/InstrumentGridControl.js`
+- `tools/midi-studio-v2/styles/midiStudioV2.css`
+- `tests/playwright/tools/MidiStudioV2.spec.mjs`
+
+## Validation Commands
+
+```powershell
+node --check tools/midi-studio-v2/js/bootstrap.js
+node --check tools/midi-studio-v2/js/controls/InstrumentGridControl.js
+node --check tests/playwright/tools/MidiStudioV2.spec.mjs
+node -e "const fs=require('fs'); const p='tools/midi-studio-v2/index.html'; const html=fs.readFileSync(p,'utf8'); if(/<script(?![^>]*\ssrc=)[^>]*>/i.test(html)) throw new Error('Inline script block found'); if(/<style\b/i.test(html)) throw new Error('Inline style block found'); if(/\son[a-z]+\s*=/i.test(html)) throw new Error('Inline event handler found'); console.log('HTML external-only guard passed:', p);"
+node -e "const fs=require('fs'); const p='tools/midi-studio-v2/styles/midiStudioV2.css'; const css=fs.readFileSync(p,'utf8'); if(/\/\*[^]*$/.test(css.replace(/\/\*[^]*?\*\//g,''))) throw new Error('Unclosed CSS comment'); let depth=0; for (const ch of css.replace(/\/\*[^]*?\*\//g,'')) { if (ch==='{') depth++; if (ch==='}') depth--; if (depth<0) throw new Error('Unexpected }'); } if (depth!==0) throw new Error('Unbalanced CSS braces'); console.log('CSS syntax guard passed:', p);"
+npx.cmd playwright test tests/playwright/tools/MidiStudioV2.spec.mjs -g "octave timeline freezes compact headers and note labels while active cells stay textless|octave grid density supports icon controls and simultaneous chord editing|fast octave note editing supports drag painting keyboard shortcuts selection and timeline scroll sync|exports through Type dropdown and Save without claiming files were written" --config=codex_playwright_system_chrome.config.cjs --reporter=list --workers=1 --timeout=60000
+git diff --check
+```
+
+## Validation Result
+
+PASS
+
+## Syntax Checks
+
+- PASS: `tools/midi-studio-v2/js/bootstrap.js`
+- PASS: `tools/midi-studio-v2/js/controls/InstrumentGridControl.js`
+- PASS: `tests/playwright/tools/MidiStudioV2.spec.mjs`
+- PASS: `tools/midi-studio-v2/index.html` external-only guard
+- PASS: `tools/midi-studio-v2/styles/midiStudioV2.css` brace/comment guard
+
+## Playwright Coverage
+
+Targeted MIDI Studio V2 Playwright tests passed:
+
+- PASS: Instruments header shows `Instruments`, `Add`, and `X` on the same row.
+- PASS: `Add` creates an instrument row.
+- PASS: `X` follows existing non-destructive panel behavior by collapsing the Instruments panel without deleting rows.
+- PASS: Bar/Beat header no longer includes the `Octave` label.
+- PASS: Frozen left note labels still render separately.
+- PASS: Alternating row colors are applied.
+- PASS: Spreadsheet grid line width is 2px.
+- PASS: Active notes still highlight without printed note text.
+- PASS: Selected/dimmed note styling remains covered by the octave timeline test path.
+- PASS: Multi-note/chord editing still works.
+- PASS: Play and Stop still work.
+- PASS: Header/body horizontal scroll synchronization and frozen note labels remain covered.
+
+Command result:
+
+```text
+4 passed (1.8m)
+```
+
+## Diff Check
+
+- PASS: `git diff --check`
+- Note: Git reported existing LF-to-CRLF working-copy notices for changed files only; no whitespace errors were reported.
+
+## PR Status
+
+PASS. Frozen note labels and header/body alignment remained covered by targeted Playwright validation, and active cells do not print note text.

tests/playwright/tools/MidiStudioV2.spec.mjs

@@ -607,6 +607,27 @@ test.describe("MIDI Studio V2", () => {
       await expect(instrumentRow(page, "lead").locator("[data-delete-instrument-row='lead']")).toHaveAttribute("title", "Delete instrument row Lead");
       await expect(page.locator("#addInstrumentRowButton")).toHaveAttribute("aria-label", "Add instrument");
       await expect(page.locator("#addInstrumentRowButton")).toHaveAttribute("title", "Add instrument");
+      const instrumentHeaderLayout = await page.locator(".midi-studio-v2__instrument-accordion-header").evaluate((header) => {
+        const title = header.querySelector("span:first-child").getBoundingClientRect();
+        const add = header.querySelector("#addInstrumentRowButton").getBoundingClientRect();
+        const close = header.querySelector("#closeInstrumentPanelButton").getBoundingClientRect();
+        return {
+          addAfterTitle: add.left > title.right,
+          addText: header.querySelector("#addInstrumentRowButton").textContent,
+          closeAfterAdd: close.left > add.right,
+          closeText: header.querySelector("#closeInstrumentPanelButton").textContent,
+          sameRow: Math.abs(title.top - add.top) <= 2 && Math.abs(add.top - close.top) <= 2,
+          titleText: header.querySelector("span:first-child").textContent
+        };
+      });
+      expect(instrumentHeaderLayout).toEqual({
+        addAfterTitle: true,
+        addText: "Add",
+        closeAfterAdd: true,
+        closeText: "X",
+        sameRow: true,
+        titleText: "Instruments"
+      });
       await expect(instrumentRow(page, "lead").locator('[aria-label="Mute Lead"]')).not.toBeChecked();
       await instrumentToggle(page, "lead", "mute").click();
       await expect(instrumentRow(page, "lead").locator('[aria-label="Mute Lead"]')).toBeChecked();
@@ -761,6 +782,13 @@ test.describe("MIDI Studio V2", () => {
       await expectInstrumentClickKeepsScroll(page, leadVisibility);
       await page.locator("#addInstrumentRowButton").click();
       await expect(instrumentRow(page, "instrument-1")).toBeVisible();
+      await page.locator("#closeInstrumentPanelButton").click();
+      await expect(page.locator(".midi-studio-v2__instrument-accordion-header")).toHaveAttribute("aria-expanded", "false");
+      await expect(page.locator("#instrumentListContent")).toBeHidden();
+      await expect(instrumentRow(page, "instrument-1")).toHaveCount(1);
+      await page.locator(".midi-studio-v2__instrument-accordion-header").click();
+      await expect(page.locator(".midi-studio-v2__instrument-accordion-header")).toHaveAttribute("aria-expanded", "true");
+      await expect(instrumentRow(page, "instrument-1")).toBeVisible();
       await expectInstrumentClickKeepsScroll(page, instrumentRow(page, "instrument-1").locator("[data-delete-instrument-row='instrument-1']"));
       await expect(instrumentRow(page, "instrument-1")).toHaveCount(0);
       await selectInstrumentRow(page, "lead");
@@ -799,7 +827,7 @@ test.describe("MIDI Studio V2", () => {
       });
       await page.locator("#playButton").click();
       await expect(page.locator("#stopButton")).toBeEnabled();
-      await expect(page.locator('.midi-studio-v2__grid-cell--playhead-active[data-step-index="0"]').first()).toBeVisible();
+      await expect(page.locator(".midi-studio-v2__grid-cell--playhead-active").first()).toBeVisible();
       const playbackEvidence = await page.evaluate(() => {
         const maxSameTime = (action) => {
           const counts = new Map();
@@ -930,10 +958,10 @@ test.describe("MIDI Studio V2", () => {
       await page.locator("#toolImportManifestInput").setInputFiles(uatManifestPath);
       await selectInstrumentRow(page, "lead");
 
-      await expect(page.locator(".midi-studio-v2__timing-header-row-1.midi-studio-v2__note-table-instrument-header")).toHaveText("Octave");
       await expect(page.locator(".midi-studio-v2__timing-header-row-1.midi-studio-v2__timing-axis-header")).toHaveText("Bar");
-      await expect(page.locator(".midi-studio-v2__timing-header-row-2.midi-studio-v2__note-table-instrument-header")).toHaveText("");
       await expect(page.locator(".midi-studio-v2__timing-header-row-2.midi-studio-v2__timing-axis-header")).toHaveText("Beat");
+      expect(await page.locator(".midi-studio-v2__timing-header-row-1").evaluateAll((cells) => cells.map((cell) => cell.textContent).join("|"))).not.toContain("Octave");
+      expect(await page.locator(".midi-studio-v2__timing-header-row-2").evaluateAll((cells) => cells.map((cell) => cell.textContent).join("|"))).not.toContain("Octave");
       await expect(page.locator('.midi-studio-v2__timing-header-row-1.midi-studio-v2__note-table-column-header[data-step-index="0"]')).toHaveText("1");
       await expect(page.locator('.midi-studio-v2__timing-header-row-2.midi-studio-v2__note-table-column-header[data-step-index="0"]')).toHaveText("1");
       await expect(page.locator('.midi-studio-v2__timing-header-row-2.midi-studio-v2__note-table-column-header[data-step-index="1"]')).toHaveText("2");
@@ -943,11 +971,17 @@ test.describe("MIDI Studio V2", () => {
       const output = page.locator("#instrumentGridOutput");
       const gridLayout = await output.evaluate((element) => {
         const firstNote = element.querySelector('.midi-studio-v2__octave-note-cell[data-step-index="0"]');
+        const firstRow = element.querySelector('.midi-studio-v2__octave-note-cell[data-octave-row-index="0"][data-step-index="0"]');
+        const secondRow = element.querySelector('.midi-studio-v2__octave-note-cell[data-octave-row-index="1"][data-step-index="0"]');
         return {
+          alternatingRowsDiffer: getComputedStyle(firstRow).backgroundColor !== getComputedStyle(secondRow).backgroundColor,
+          borderRightWidth: getComputedStyle(firstNote).borderRightWidth,
           columnWidth: firstNote.getBoundingClientRect().width,
           columnTemplate: getComputedStyle(element.querySelector(".midi-studio-v2__octave-timeline")).gridTemplateColumns
         };
       });
+      expect(gridLayout.alternatingRowsDiffer).toBe(true);
+      expect(gridLayout.borderRightWidth).toBe("2px");
       expect(gridLayout.columnWidth).toBeLessThanOrEqual(32);
       expect(gridLayout.columnTemplate).toContain("28.8px");
 

tools/midi-studio-v2/index.html

@@ -107,10 +107,13 @@ <h3>MIDI Import</h3>
           </div>
         </section>
         <section class="accordion-v2 tool-starter__accordion is-open" data-accordion-v2-open="true" data-midi-studio-tab-panel="studio instruments">
-          <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="instrumentListContent">
+          <div class="accordion-v2__header midi-studio-v2__instrument-accordion-header" aria-expanded="true" aria-controls="instrumentListContent">
             <span>Instruments</span>
-            <span class="accordion-v2__icon" aria-hidden="true">+</span>
-          </button>
+            <span class="midi-studio-v2__instrument-header-actions">
+              <button id="addInstrumentRowButton" class="midi-studio-v2__instrument-header-button" type="button" aria-label="Add instrument" title="Add instrument">Add</button>
+              <button id="closeInstrumentPanelButton" class="midi-studio-v2__instrument-header-button" type="button" aria-label="Collapse Instruments panel" title="Collapse Instruments panel">X</button>
+            </span>
+          </div>
           <div id="instrumentListContent" class="accordion-v2__content midi-studio-v2__instrument-list-panel">
             <div id="instrumentList" class="midi-studio-v2__instrument-list" aria-label="Timeline instruments"></div>
           </div>

tools/midi-studio-v2/js/bootstrap.js

@@ -60,9 +60,11 @@ window.addEventListener("DOMContentLoaded", () => {
     }),
     directorPanel: new DirectorPanelControl({ panel: requireElement("#directorPanel") }),
     instrumentGrid: new InstrumentGridControl({
+      addInstrumentButton: requireElement("#addInstrumentRowButton"),
       bassInput: requireElement("#instrumentGridBassInput"),
       beatsInput: requireElement("#instrumentGridBeatsInput"),
       chordsInput: requireElement("#instrumentGridChordsInput"),
+      closeInstrumentPanelButton: requireElement("#closeInstrumentPanelButton"),
       drumsInput: requireElement("#instrumentGridDrumsInput"),
       generateArpeggioButton: requireElement("#generateArpeggioFromChordsButton"),
       generateBassButton: requireElement("#generateBassFromChordsButton"),