Remove MIDI Studio V2 grid shadow and outline styling - PR_26146_050-midi-studio-v2-grid-shadow-outline-removal

Author: ToolboxAid

docs/dev/reports/PR_26146_050-midi-studio-v2-grid-shadow-outline-removal_validation.md

@@ -0,0 +1,46 @@
+# PR_26146_050 MIDI Studio V2 Grid Shadow Outline Removal Validation
+
+Status: PASS
+
+## Scope
+
+- Removed box-shadow effects from MIDI Studio V2 octave spreadsheet note cells and grid state classes.
+- Removed outline effects from MIDI Studio V2 octave spreadsheet note cells and grid state classes.
+- Preserved 1px note cell borders, piano keyboard styling, frozen headers, zoom controls, launch-specific NAV behavior, tabs, playback, and Play/Stop.
+- Did not change layout, data model, import/export, instrument controls, or playback logic.
+
+## Changed Files
+
+- `tools/midi-studio-v2/styles/midiStudioV2.css`
+- `tests/playwright/tools/MidiStudioV2.spec.mjs`
+
+## Validation Commands
+
+- PASS: `node --check tests/playwright/tools/MidiStudioV2.spec.mjs`
+- PASS: `node --check tools/midi-studio-v2/js/bootstrap.js`
+- PASS: `node --check tools/midi-studio-v2/js/controls/ActionNavControl.js`
+- PASS: CSS brace check for `tools/midi-studio-v2/styles/midiStudioV2.css`
+- PASS: `npx.cmd playwright test tests/playwright/tools/MidiStudioV2.spec.mjs -g "fast octave note editing supports drag painting keyboard shortcuts selection and timeline scroll sync|launches and renders a valid multi-song manifest payload|separates Workspace launch save ownership from Tool Mode standalone save" --config=codex_playwright_system_chrome.config.cjs --reporter=list --workers=1 --timeout=60000`
+- PASS: `git diff --check`
+
+## Playwright Coverage
+
+The targeted MIDI Studio V2 Playwright run proved:
+
+- Grid/spreadsheet note cells and related spreadsheet wrappers have no computed `box-shadow`.
+- Grid/spreadsheet note cells and related spreadsheet wrappers have no computed outline effect.
+- Note cell `border-bottom` and `border-right` remain 1px.
+- Play and Stop still work through the existing fast octave editing keyboard flow.
+- Launch-specific NAV and tab presentation from PR049 still render correctly.
+
+## Samples Decision
+
+Full samples smoke test: SKIP. This PR only changes MIDI Studio V2 octave spreadsheet CSS and targeted Playwright assertions. It does not modify sample JSON, shared runtime, or broad sample loading behavior.
+
+## Manual Validation
+
+1. Open MIDI Studio V2 in tool-only mode.
+2. Import the UAT MIDI Studio manifest.
+3. Confirm the octave timeline grid cells render with flat 1px grid borders and no shadow or outline glow.
+4. Confirm piano keys still look like piano keys.
+5. Press Play, then Stop. Expected: playback starts and stops normally.

tests/playwright/tools/MidiStudioV2.spec.mjs

@@ -925,6 +925,37 @@ test.describe("MIDI Studio V2", () => {
       await expect(octaveCell(page, "C6", 2)).toHaveText("");
       await expect(octaveCell(page, "C6", 2)).toHaveAttribute("data-note-lanes", /lead/);
       await expect(octaveCell(page, "C6", 2)).toHaveClass(/midi-studio-v2__grid-cell--note-selected/);
+      const gridEffects = await page.locator("#instrumentGridOutput").evaluate((element) => {
+        const surfaceSelectors = [
+          ".midi-studio-v2__octave-timeline",
+          ".midi-studio-v2__note-table",
+          ".midi-studio-v2__note-table-cell",
+          ".midi-studio-v2__grid-cell--note-selected",
+          ".midi-studio-v2__grid-cell--lane-selected"
+        ];
+        const nodes = surfaceSelectors.flatMap((selector) => Array.from(element.querySelectorAll(selector)));
+        const firstNoteCell = element.querySelector(".midi-studio-v2__note-table-cell");
+        const firstNoteCellStyle = getComputedStyle(firstNoteCell);
+        return {
+          borderBottomWidth: firstNoteCellStyle.borderBottomWidth,
+          borderRightWidth: firstNoteCellStyle.borderRightWidth,
+          effects: nodes.map((node) => {
+            const style = getComputedStyle(node);
+            return {
+              boxShadow: style.boxShadow,
+              outlineStyle: style.outlineStyle,
+              outlineWidth: style.outlineWidth
+            };
+          })
+        };
+      });
+      expect(gridEffects.effects.length).toBeGreaterThan(0);
+      expect(gridEffects.effects.every((effect) => effect.boxShadow === "none")).toBe(true);
+      expect(gridEffects.effects.every((effect) => effect.outlineStyle === "none" || effect.outlineWidth === "0px")).toBe(true);
+      expect(Number.parseFloat(gridEffects.borderBottomWidth)).toBeGreaterThanOrEqual(0.8);
+      expect(Number.parseFloat(gridEffects.borderBottomWidth)).toBeLessThanOrEqual(1);
+      expect(Number.parseFloat(gridEffects.borderRightWidth)).toBeGreaterThanOrEqual(0.8);
+      expect(Number.parseFloat(gridEffects.borderRightWidth)).toBeLessThanOrEqual(1);
       await octaveCell(page, "C6", 2).click();
       await expect(octaveCell(page, "C6", 2)).not.toHaveAttribute("data-note-lanes", /lead/);
       await octaveCell(page, "C6", 2).click();

tools/midi-studio-v2/styles/midiStudioV2.css

@@ -743,7 +743,6 @@ body[data-tool-id="midi-studio-v2"] #instrumentGridContent {
 
 .midi-studio-v2__note-table-cell {
   align-content: center;
-  box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.18);
   cursor: pointer;
   font-size: 0;
   font-weight: 800;
@@ -761,8 +760,8 @@ body[data-tool-id="midi-studio-v2"] #instrumentGridContent {
 }
 
 .midi-studio-v2__note-table-cell:focus {
-  outline: 3px solid rgba(56, 189, 248, 0.86);
-  outline-offset: -3px;
+  background: color-mix(in srgb, var(--tool-starter-panel-strong) 68%, #38bdf8 32%);
+  outline: none;
 }
 
 .midi-studio-v2__octave-note-cell:hover {
@@ -902,22 +901,19 @@ body[data-tool-id="midi-studio-v2"] #instrumentGridContent {
 }
 
 .midi-studio-v2__grid-cell--lane-active {
-  outline: 3px solid rgba(14, 165, 233, 0.86);
-  outline-offset: -4px;
+  background: color-mix(in srgb, var(--tool-starter-panel-strong) 68%, #0ea5e9 32%);
 }
 
 .midi-studio-v2__grid-cell--lane-selected {
-  outline: 3px solid rgba(125, 211, 252, 0.82);
-  outline-offset: -4px;
+  background: color-mix(in srgb, var(--tool-starter-panel-strong) 64%, #7dd3fc 36%);
 }
 
 .midi-studio-v2__octave-note-cell.midi-studio-v2__grid-cell--lane-selected::before {
   background: #38bdf8;
-  box-shadow: 0 0 0 1px rgba(186, 230, 253, 0.82), 0 0 0.6rem rgba(56, 189, 248, 0.35);
 }
 
 .midi-studio-v2__grid-cell--note-selected {
-  box-shadow: inset 0 0 0 3px #facc15, 0 0 0 1px rgba(250, 204, 21, 0.48);
+  background: color-mix(in srgb, var(--tool-starter-panel-strong) 58%, #facc15 42%);
   position: relative;
   z-index: 4;
 }
@@ -927,12 +923,11 @@ body[data-tool-id="midi-studio-v2"] #instrumentGridContent {
 }
 
 .midi-studio-v2__grid-cell--loop-region {
-  outline: 2px solid rgba(56, 189, 248, 0.72);
-  outline-offset: -2px;
+  background: color-mix(in srgb, var(--tool-starter-panel-strong) 70%, #38bdf8 30%);
 }
 
 .midi-studio-v2__grid-cell--section-region {
-  box-shadow: inset 0 0 0 2px rgba(250, 204, 21, 0.62);
+  background: color-mix(in srgb, var(--tool-starter-panel-strong) 70%, #facc15 30%);
 }
 
 .midi-studio-v2__grid-cell.midi-studio-v2__timing-header-row-1:not(.midi-studio-v2__grid-cell--playhead-active),
@@ -966,11 +961,11 @@ body[data-tool-id="midi-studio-v2"] #instrumentGridContent {
 }
 
 .midi-studio-v2__grid-cell--generated {
-  box-shadow: inset 0 -0.2rem 0 rgba(34, 197, 94, 0.75);
+  background: color-mix(in srgb, var(--tool-starter-panel-strong) 78%, #22c55e 22%);
 }
 
 .midi-studio-v2__grid-cell--manual {
-  box-shadow: inset 0 -0.2rem 0 rgba(251, 191, 36, 0.85);
+  background: color-mix(in srgb, var(--tool-starter-panel-strong) 78%, #fbbf24 22%);
 }
 
 .midi-studio-v2__snap-indicator {