Polish Input Mapping V2 gesture and capture flow - PR_26140_099-polish-input-mapping-v2-gesture-capture-flow

Author: DavidQ

docs/dev/reports/input_mapping_v2_gesture_capture_flow_report.md

@@ -0,0 +1,43 @@
+# Input Mapping V2 Gesture Capture Flow Report
+
+## Scope
+- PR: PR_26140_099-polish-input-mapping-v2-gesture-capture-flow
+- Source of truth: user PR_099 request. `docs/pr/BUILD_PR.md` still points at an unrelated Level 18 overlay runtime hardening rebase, so this workflow used the explicit PR_099 request after reading `docs/dev/PROJECT_INSTRUCTIONS.md`.
+
+## Changes Applied
+- Updated Input Mapping V2 gesture groups to use a responsive card grid so Keyboard, Mouse, and Game Controller gesture cards can sit side by side at wide widths and wrap at narrow widths.
+- Updated gesture button layout inside each gesture card to use responsive wrapped columns, allowing buttons to flow side by side and top-to-bottom.
+- Updated the Capture accordion to use a wrapping row flow for capture sections, with Keyboard/Mouse and game controller capture controls able to share horizontal space.
+- Kept the capture note, HR separator, and Refresh Gamepads control as full-width bottom rows, with Refresh Gamepads remaining the bottom-most DOM and visual item.
+- Preserved PR_098 nav, layout, and labels; gamepad auto-poll; capture highlighting/cancel/timeout behavior; and captured mapping tile behavior.
+- Added focused Playwright geometry assertions for gesture card flow, gesture button wrapping, capture button flow, and bottom anchoring of note/HR/Refresh.
+
+## Contracts And Constraints
+- No schema changes.
+- No sample JSON changes.
+- No runtime JavaScript changes; this PR is CSS plus Playwright coverage.
+- External JS/CSS-only HTML restriction preserved; changed Input Mapping HTML was not modified in this PR and the scan found no inline script/style/event-handler matches.
+- Full samples smoke test was skipped per request and because this scoped UI polish does not broadly affect sample loading/runtime.
+
+## Validation
+- `node --check tools/input-mapping-v2/js/bootstrap.js`: PASS
+- `node --check tools/input-mapping-v2/js/ToolStarterApp.js`: PASS
+- `node --check tools/input-mapping-v2/js/controls/GestureListControl.js`: PASS
+- `node --check tools/input-mapping-v2/js/controls/CaptureControl.js`: PASS
+- `node --check tests/playwright/tools/WorkspaceManagerV2.spec.mjs`: PASS
+- `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list --grep "Input Mapping V2"`: PASS, 2 tests after CSS correction
+- `npm run test:workspace-v2`: PASS, 61 tests
+- `git diff --check`: PASS, line-ending warnings only
+- `rg --pcre2 -n "<script(?![^>]*src=)|<style| on[a-zA-Z]+=" tools/input-mapping-v2/index.html tools/input-mapping-v2/how_to_use.html`: PASS, no matches
+- Sample/JSON diff scan: PASS, no changed sample or JSON files
+- Full samples smoke test: not run, per request
+- Delta ZIP verification: PASS, 7 files, nonzero size
+
+## Manual Validation
+1. Open `tools/input-mapping-v2/index.html` at a wide desktop viewport.
+2. Confirm the `Gestures` accordion shows Keyboard, Mouse, and Game Controller cards side by side where space allows.
+3. Confirm gesture buttons wrap within cards in side-by-side rows, then narrow the viewport and confirm they wrap down cleanly.
+4. Confirm the `Capture` accordion shows capture controls in a horizontal wrapping flow where space allows.
+5. Confirm the capture note remains above the HR, and `Refresh Gamepads` remains the bottom-most control.
+6. Click Capture Keyboard and Capture Mouse to confirm highlight/cancel behavior still works.
+7. Connect or mock gamepads and confirm auto-poll capture buttons still appear and remain assignable.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -1518,6 +1518,35 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#inputMappingV2GestureList")).toContainText("Drag Rectangle");
       await expect(page.locator("#inputMappingV2GestureList")).toContainText("Wheel Up");
       await expect(page.locator("#inputMappingV2GestureList")).toContainText("Button");
+      const gestureFlowLayout = await page.locator("#inputMappingV2GestureList").evaluate((container) => {
+        const wantedGroups = ["Keyboard", "Mouse", "Game Controller"];
+        const groupLayouts = wantedGroups.map((label) => {
+          const group = Array.from(container.querySelectorAll(".input-mapping-v2__gesture-group"))
+            .find((candidate) => candidate.textContent.includes(label));
+          const box = group.getBoundingClientRect();
+          const buttons = Array.from(group.querySelectorAll(".input-mapping-v2__gesture-button")).map((button) => {
+            const buttonBox = button.getBoundingClientRect();
+            return {
+              left: Math.round(buttonBox.left),
+              top: Math.round(buttonBox.top)
+            };
+          });
+          return {
+            label,
+            left: Math.round(box.left),
+            top: Math.round(box.top),
+            width: Math.round(box.width),
+            buttons
+          };
+        });
+        return { groupLayouts };
+      });
+      expect(gestureFlowLayout.groupLayouts.every((entry) => entry.width >= 210)).toBe(true);
+      expect(Math.max(...gestureFlowLayout.groupLayouts.map((entry) => entry.top)) - Math.min(...gestureFlowLayout.groupLayouts.map((entry) => entry.top))).toBeLessThanOrEqual(1);
+      expect(new Set(gestureFlowLayout.groupLayouts.map((entry) => entry.left)).size).toBe(3);
+      const keyboardGestureButtons = gestureFlowLayout.groupLayouts.find((entry) => entry.label === "Keyboard").buttons;
+      expect(new Set(keyboardGestureButtons.map((entry) => entry.left)).size).toBeGreaterThan(1);
+      expect(new Set(keyboardGestureButtons.map((entry) => entry.top)).size).toBeGreaterThan(1);
       await page.locator(".input-mapping-v2__device-card[data-input-mapping-device-id='wheel'] input").uncheck();
       await expect(page.locator(".input-mapping-v2__gesture-button", { hasText: "Wheel Up" })).toHaveCount(0);
       await page.locator(".input-mapping-v2__device-card[data-input-mapping-device-id='wheel'] input").check();
@@ -1534,24 +1563,30 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#previewOutput")).toContainText("No inputs captured yet.");
       await expect(page.locator(".input-mapping-v2__mapping-card")).toHaveCount(0);
       expect(await page.locator("#previewOutput").evaluate((node) => getComputedStyle(node).overflowY)).toBe("auto");
-      const captureButtonLayout = await page.locator("#captureInputContent").evaluate((content) => {
-        const buttons = [
-          content.querySelector("#inputMappingV2CaptureKeyboardButton"),
-          content.querySelector("#inputMappingV2CaptureMouseButton"),
-          content.querySelector("#inputMappingV2RefreshGamepadsButton")
-        ];
-        return buttons.map((button) => {
-          const box = button.getBoundingClientRect();
+      const captureFlowLayout = await page.locator("#captureInputContent").evaluate((content) => {
+        const rectFor = (selector) => {
+          const box = content.querySelector(selector).getBoundingClientRect();
           return {
             left: Math.round(box.left),
             top: Math.round(box.top),
             width: Math.round(box.width)
           };
-        });
-      });
-      expect(captureButtonLayout.every((entry) => entry.width > 250)).toBe(true);
-      expect(new Set(captureButtonLayout.map((entry) => entry.left)).size).toBe(1);
-      expect(captureButtonLayout[1].top).toBeGreaterThan(captureButtonLayout[0].top);
+        };
+        return {
+          keyboard: rectFor("#inputMappingV2CaptureKeyboardButton"),
+          mouse: rectFor("#inputMappingV2CaptureMouseButton"),
+          note: rectFor("#inputMappingV2CaptureMessage"),
+          refresh: rectFor("#inputMappingV2RefreshGamepadsButton"),
+          separator: rectFor(".input-mapping-v2__capture-separator")
+        };
+      });
+      expect(captureFlowLayout.keyboard.width).toBeGreaterThan(110);
+      expect(captureFlowLayout.mouse.width).toBeGreaterThan(110);
+      expect(captureFlowLayout.mouse.left).toBeGreaterThan(captureFlowLayout.keyboard.left);
+      expect(Math.abs(captureFlowLayout.mouse.top - captureFlowLayout.keyboard.top)).toBeLessThanOrEqual(1);
+      expect(captureFlowLayout.note.top).toBeGreaterThan(captureFlowLayout.keyboard.top);
+      expect(captureFlowLayout.separator.top).toBeGreaterThan(captureFlowLayout.note.top);
+      expect(captureFlowLayout.refresh.top).toBeGreaterThan(captureFlowLayout.separator.top);
       const captureBottom = await page.locator("#captureInputContent").evaluate((content) => {
         const refresh = content.querySelector("#inputMappingV2RefreshGamepadsButton");
         return {
@@ -1560,7 +1595,6 @@ test.describe("Workspace Manager V2 bootstrap", () => {
           separatorTag: refresh?.previousElementSibling?.tagName
         };
       });
-      expect(captureButtonLayout[2].top).toBeGreaterThan(captureButtonLayout[1].top);
       expect(captureBottom).toEqual({
         lastElementId: "inputMappingV2RefreshGamepadsButton",
         separatorClass: "input-mapping-v2__capture-separator",
@@ -1769,9 +1803,9 @@ test.describe("Workspace Manager V2 bootstrap", () => {
           width: Math.round(box.width)
         };
       }));
-      expect(gamepadButtonLayout.every((entry) => entry.width > 250)).toBe(true);
-      expect(new Set(gamepadButtonLayout.map((entry) => entry.left)).size).toBe(1);
-      expect(gamepadButtonLayout[1].top).toBeGreaterThan(gamepadButtonLayout[0].top);
+      expect(gamepadButtonLayout.every((entry) => entry.width > 170)).toBe(true);
+      expect(new Set(gamepadButtonLayout.map((entry) => entry.left)).size).toBe(2);
+      expect(Math.abs(gamepadButtonLayout[1].top - gamepadButtonLayout[0].top)).toBeLessThanOrEqual(1);
       await page.locator(".input-mapping-v2__mapping-card[data-input-mapping-tile-action-id='moveLeft']").click({ position: { x: 12, y: 12 } });
       await expect(page.locator("#inputMappingV2ActionSelect")).toHaveValue("moveLeft");
       await page.locator(".input-mapping-v2__gamepad-capture-button[data-input-mapping-gamepad-index='1']").click();

tools/input-mapping-v2/styles/inputMappingV2.css

@@ -12,7 +12,10 @@
 }
 
 .input-mapping-v2 #captureInputContent .input-mapping-v2__button-row {
-  grid-template-columns: 1fr;
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1 1 260px;
+  order: 1;
 }
 
 .input-mapping-v2__checkbox-field {
@@ -25,11 +28,29 @@
 
 .input-mapping-v2 #inputMappingV2CaptureKeyboardButton,
 .input-mapping-v2 #inputMappingV2CaptureMouseButton,
-.input-mapping-v2 #inputMappingV2RefreshGamepadsButton,
 .input-mapping-v2__gamepad-capture-button {
   width: 100%;
 }
 
+.input-mapping-v2 #captureInputContent {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: start;
+  gap: 8px;
+}
+
+.input-mapping-v2 #inputMappingV2SelectedActionLabel {
+  flex: 1 0 100%;
+  min-width: 100%;
+  order: 0;
+}
+
+.input-mapping-v2 #captureInputContent .input-mapping-v2__capture-button {
+  flex: 1 1 120px;
+  width: auto;
+}
+
 .input-mapping-v2__capture-button.is-capturing,
 .input-mapping-v2__gamepad-capture-button.is-capturing {
   border-color: var(--tool-starter-accent) !important;
@@ -39,7 +60,9 @@
 
 .input-mapping-v2__gamepad-buttons {
   display: grid;
-  grid-template-columns: 1fr;
+  flex: 1 1 320px;
+  order: 1;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 8px;
 }
 
@@ -53,12 +76,29 @@
 }
 
 .input-mapping-v2__capture-separator {
+  flex: 1 0 100%;
+  min-width: 100%;
+  order: 21;
   width: 100%;
   border: 0;
   border-top: 1px solid var(--tool-starter-line);
   margin: 2px 0;
 }
 
+.input-mapping-v2 #inputMappingV2CaptureMessage {
+  flex: 1 0 100%;
+  min-width: 100%;
+  margin: 0;
+  order: 20;
+}
+
+.input-mapping-v2 #inputMappingV2RefreshGamepadsButton {
+  flex: 1 0 100%;
+  min-width: 100%;
+  order: 22;
+  width: 100%;
+}
+
 .input-mapping-v2 .tool-starter__panel--center,
 .input-mapping-v2 .tool-starter__panel--right {
   overflow: hidden;
@@ -79,6 +119,11 @@
   gap: 10px;
 }
 
+.input-mapping-v2__gesture-groups {
+  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+  align-items: start;
+}
+
 .input-mapping-v2__mapping-list {
   grid-template-columns: repeat(auto-fill, 225px);
   grid-auto-rows: 225px;
@@ -184,8 +229,8 @@
 }
 
 .input-mapping-v2__gesture-list {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
   gap: 8px;
 }