Skip to content

Commit e456184

Browse files
ToolboxAidToolboxAid
committed
Rebalance Audio SFX control layout - PR_26145_013-audio-sfx-rebalance-control-layout
1 parent acd3770 commit e456184

3 files changed

Lines changed: 228 additions & 79 deletions

File tree

‎docs/dev/reports/playwright_audio_sfx_rebalanced_layout.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
# PR_26145_013 Audio SFX Rebalanced Layout
2+
3+
## Scope
4+
5+
- Updated `tools/audio-sfx-playground-v2` only.
6+
- Rebalanced Audio / SFX Playground V2 so the left column now holds Name, Sound Style, selected style description, examples, helper text, and validation status.
7+
- Moved Wave controls and all oscillator sliders into the center Sound Design work area.
8+
- Moved Add Noise Layer and noise sliders into the right side of the center Sound Design work area.
9+
- Preserved the right-column Wave Preview, Output Summary, and Status accordions.
10+
- Preserved JSON action controls, style clamps, helper text, recommended zones, and slider focus behavior.
11+
- No `start_of_day` folders were modified.
12+
13+
## Targeted Static Validation
14+
15+
PASS:
16+
17+
- `Get-ChildItem -Recurse -File tools/audio-sfx-playground-v2/js -Filter *.js | ForEach-Object { node --check $_.FullName }`
18+
- HTML/CSS/JS static guard:
19+
- no `<style>` blocks in `tools/audio-sfx-playground-v2/index.html`
20+
- no inline `<script>` blocks
21+
- no inline event handlers
22+
- center `#soundDesignContent` exists
23+
- Wave and Noise control groups exist in the center work area
24+
- moved Wave/Noise controls no longer appear inside left `#sfxShapeContent`
25+
- right-column accordion content IDs remain present
26+
- side-by-side control grid CSS is present
27+
- `git diff --check -- tools/audio-sfx-playground-v2`
28+
- PASS with Git LF/CRLF warnings only for `index.html` and `audioSfxLayoutDensity.css`.
29+
30+
## Focused Playwright Validation
31+
32+
PASS using a local repo HTTP server and Chromium:
33+
34+
- Audio / SFX Playground V2 launched at `/tools/audio-sfx-playground-v2/index.html`.
35+
- No console errors and no page errors.
36+
- Left-column setup alignment passed:
37+
- Name and Sound Style labels aligned.
38+
- Name input and Sound Style select aligned.
39+
- Style description, examples, and helper text align with the style control column.
40+
- Center layout passed:
41+
- Wave controls moved into `#soundDesignContent`.
42+
- Noise/Add Noise Layer controls moved into `#soundDesignContent`.
43+
- Wave and Noise control groups are side by side and top-aligned.
44+
- Center control grid does not visibly overflow its parent.
45+
- Slider layout passed:
46+
- All 9 slider rows remained single-line with label, slider, value, and range hints.
47+
- No visible bounds overflow was detected for the Sound Design content, control groups, or right-column accordions.
48+
- Right-column accordions passed:
49+
- Wave Preview collapsed and expanded.
50+
- Output Summary collapsed and expanded.
51+
- Status collapsed and expanded.
52+
- Behavior preservation passed:
53+
- Slider focus remained on `#durationInput` after click.
54+
- `ArrowRight` changed duration from `1065` to `1070`, preserving the 5 ms step.
55+
- TTL Arcade clamp remained `80` / `2500` with recommended zone `841-1519 Hz`.
56+
- Import JSON, Copy JSON, and Export JSON buttons remained present.
57+
58+
V8 coverage entries captured:
59+
60+
- `tools/audio-sfx-playground-v2/js/bootstrap.js`
61+
- `tools/audio-sfx-playground-v2/js/controls/SfxControlPanel.js`
62+
63+
## Workspace V2 Validation
64+
65+
Command:
66+
67+
```powershell
68+
$env:PLAYWRIGHT_BROWSERS_PATH='.ms-playwright'; npm.cmd run test:workspace-v2
69+
```
70+
71+
Result:
72+
73+
- Timed out after 900 seconds.
74+
- Observed 67 passing tests before timeout.
75+
- Observed failing/problem tests before timeout:
76+
- `Workspace Manager V2 bootstrap > shows Object Vector Studio V2 layout shell and schema-only palette gate`
77+
- `Workspace Manager V2 bootstrap > compacts Object Vector Studio V2 geometry layouts and selected palette state`
78+
- Tests after item 67 were not reached before the command timeout.
79+
80+
These observed failures/timeouts are outside the Audio / SFX Playground V2 scope.
81+
82+
## Full Samples Smoke
83+
84+
Skipped per BUILD request because this PR only impacts Audio / SFX Playground V2 layout.

‎tools/audio-sfx-playground-v2/index.html‎

Lines changed: 78 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -86,74 +86,90 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
8686
<p id="styleDescription" class="tool-starter__hint audio-sfx__style-description" aria-live="polite"></p>
8787
<ul id="styleExamples" class="audio-sfx__style-examples" aria-label="Example sound ideas"></ul>
8888
<p id="settingsHelper" class="tool-starter__hint audio-sfx__settings-helper" aria-live="polite"></p>
89-
<label class="tool-starter__field" for="waveformSelect">
90-
<span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Chooses the oscillator shape or noise source; every waveform remains selectable for every Sound Style.">Wave</span>
91-
<select id="waveformSelect">
92-
<option value="sine">Sine</option>
93-
<option value="square">Square</option>
94-
<option value="triangle">Triangle</option>
95-
<option value="sawtooth">Saw</option>
96-
<option value="noise">Noise</option>
97-
</select>
98-
</label>
99-
<label class="tool-starter__field" for="frequencyInput" data-density-control="frequency">
100-
<span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Sets the starting pitch before any sweep is applied.">Frequency</span>
101-
<input id="frequencyInput" type="range">
102-
<output id="frequencyValue" for="frequencyInput"></output>
103-
</label>
104-
<label class="tool-starter__field" for="durationInput" data-density-control="duration">
105-
<span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Controls the total playback length of the effect.">Duration</span>
106-
<input id="durationInput" type="range">
107-
<output id="durationValue" for="durationInput"></output>
108-
</label>
109-
<label class="tool-starter__field" for="attackInput" data-density-control="attack">
110-
<span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Controls how quickly the sound reaches full volume.">Attack</span>
111-
<input id="attackInput" type="range">
112-
<output id="attackValue" for="attackInput"></output>
113-
</label>
114-
<label class="tool-starter__field" for="releaseInput" data-density-control="release">
115-
<span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Controls how long the sound fades out at the end.">Release</span>
116-
<input id="releaseInput" type="range">
117-
<output id="releaseValue" for="releaseInput"></output>
118-
</label>
119-
<label class="tool-starter__field" for="volumeInput" data-density-control="volume">
120-
<span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Sets the playback loudness for audition and export.">Volume</span>
121-
<input id="volumeInput" type="range">
122-
<output id="volumeValue" for="volumeInput"></output>
123-
</label>
124-
<label class="tool-starter__field" for="pitchSweepInput" data-density-control="sweep">
125-
<span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Bends pitch over time in cents, positive upward and negative downward.">Sweep</span>
126-
<input id="pitchSweepInput" type="range">
127-
<output id="pitchSweepValue" for="pitchSweepInput"></output>
128-
</label>
129-
<label class="tool-starter__toggle" for="noiseInput">
130-
<input id="noiseInput" type="checkbox">
131-
<span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Adds a short noise layer over oscillator waveforms for punchy hits and impacts.">Add Noise Layer</span>
132-
</label>
133-
<label class="tool-starter__field" for="noiseAmountInput" data-density-control="noiseAmount">
134-
<span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Sets how loud the arcade transient is when the noise source or layer is enabled.">Amount</span>
135-
<input id="noiseAmountInput" type="range">
136-
<output id="noiseAmountValue" for="noiseAmountInput"></output>
137-
</label>
138-
<label class="tool-starter__field" for="noiseDecayInput" data-density-control="noiseDecay">
139-
<span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Controls how quickly the burst fades out.">Decay</span>
140-
<input id="noiseDecayInput" type="range">
141-
<output id="noiseDecayValue" for="noiseDecayInput"></output>
142-
</label>
143-
<label class="tool-starter__field" for="noiseFilterInput" data-density-control="noiseFilter">
144-
<span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Raises or lowers the transient brightness filter.">Brightness</span>
145-
<input id="noiseFilterInput" type="range">
146-
<output id="noiseFilterValue" for="noiseFilterInput"></output>
147-
</label>
14889
<p id="sfxValidationMessage" class="tool-starter__hint">Ready to audition.</p>
90+
</div>
91+
</section>
92+
</aside>
93+
94+
<section class="tool-starter__panel tool-starter__panel--center" aria-label="SFX work area">
95+
<section class="accordion-v2 tool-starter__accordion audio-sfx__design-accordion is-open" data-accordion-v2-open="true">
96+
<button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="soundDesignContent">
97+
<span>Sound Design</span>
98+
<span class="accordion-v2__icon" aria-hidden="true">+</span>
99+
</button>
100+
<div id="soundDesignContent" class="accordion-v2__content">
101+
<div class="audio-sfx__control-grid">
102+
<section class="audio-sfx__control-group" aria-labelledby="waveControlsHeading">
103+
<h3 id="waveControlsHeading">Wave Controls</h3>
104+
<label class="tool-starter__field" for="waveformSelect">
105+
<span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Chooses the oscillator shape or noise source; every waveform remains selectable for every Sound Style.">Wave</span>
106+
<select id="waveformSelect">
107+
<option value="sine">Sine</option>
108+
<option value="square">Square</option>
109+
<option value="triangle">Triangle</option>
110+
<option value="sawtooth">Saw</option>
111+
<option value="noise">Noise</option>
112+
</select>
113+
</label>
114+
<label class="tool-starter__field" for="frequencyInput" data-density-control="frequency">
115+
<span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Sets the starting pitch before any sweep is applied.">Frequency</span>
116+
<input id="frequencyInput" type="range">
117+
<output id="frequencyValue" for="frequencyInput"></output>
118+
</label>
119+
<label class="tool-starter__field" for="durationInput" data-density-control="duration">
120+
<span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Controls the total playback length of the effect.">Duration</span>
121+
<input id="durationInput" type="range">
122+
<output id="durationValue" for="durationInput"></output>
123+
</label>
124+
<label class="tool-starter__field" for="attackInput" data-density-control="attack">
125+
<span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Controls how quickly the sound reaches full volume.">Attack</span>
126+
<input id="attackInput" type="range">
127+
<output id="attackValue" for="attackInput"></output>
128+
</label>
129+
<label class="tool-starter__field" for="releaseInput" data-density-control="release">
130+
<span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Controls how long the sound fades out at the end.">Release</span>
131+
<input id="releaseInput" type="range">
132+
<output id="releaseValue" for="releaseInput"></output>
133+
</label>
134+
<label class="tool-starter__field" for="volumeInput" data-density-control="volume">
135+
<span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Sets the playback loudness for audition and export.">Volume</span>
136+
<input id="volumeInput" type="range">
137+
<output id="volumeValue" for="volumeInput"></output>
138+
</label>
139+
<label class="tool-starter__field" for="pitchSweepInput" data-density-control="sweep">
140+
<span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Bends pitch over time in cents, positive upward and negative downward.">Sweep</span>
141+
<input id="pitchSweepInput" type="range">
142+
<output id="pitchSweepValue" for="pitchSweepInput"></output>
143+
</label>
144+
</section>
145+
<section class="audio-sfx__control-group" aria-labelledby="noiseControlsHeading">
146+
<h3 id="noiseControlsHeading">Noise Controls</h3>
147+
<label class="tool-starter__toggle" for="noiseInput">
148+
<input id="noiseInput" type="checkbox">
149+
<span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Adds a short noise layer over oscillator waveforms for punchy hits and impacts.">Add Noise Layer</span>
150+
</label>
151+
<label class="tool-starter__field" for="noiseAmountInput" data-density-control="noiseAmount">
152+
<span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Sets how loud the arcade transient is when the noise source or layer is enabled.">Amount</span>
153+
<input id="noiseAmountInput" type="range">
154+
<output id="noiseAmountValue" for="noiseAmountInput"></output>
155+
</label>
156+
<label class="tool-starter__field" for="noiseDecayInput" data-density-control="noiseDecay">
157+
<span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Controls how quickly the burst fades out.">Decay</span>
158+
<input id="noiseDecayInput" type="range">
159+
<output id="noiseDecayValue" for="noiseDecayInput"></output>
160+
</label>
161+
<label class="tool-starter__field" for="noiseFilterInput" data-density-control="noiseFilter">
162+
<span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Raises or lowers the transient brightness filter.">Brightness</span>
163+
<input id="noiseFilterInput" type="range">
164+
<output id="noiseFilterValue" for="noiseFilterInput"></output>
165+
</label>
166+
</section>
167+
</div>
149168
<div class="audio-sfx__shape-actions">
150169
<button id="toolPlayButton" type="button">Play</button>
151170
</div>
152171
</div>
153172
</section>
154-
</aside>
155-
156-
<section class="tool-starter__panel tool-starter__panel--center" aria-label="SFX sound list">
157173
<section class="accordion-v2 tool-starter__accordion tool-starter__accordion--fill is-open" data-accordion-v2-open="true">
158174
<button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="soundListContent">
159175
<span>Created Sounds</span>

0 commit comments

Comments
 (0)