Polish Input Mapping V2 selection highlighting and context handling - PR_26140_103-polish-input-mapping-v2-selection-and-context

Author: DavidQ

docs/dev/reports/input_mapping_v2_selection_context_report.md

@@ -0,0 +1,69 @@
+# Input Mapping V2 Selection And Context Report
+
+PR: `PR_26140_103-polish-input-mapping-v2-selection-and-context`
+
+## Source Of Truth
+- Read `docs/dev/PROJECT_INSTRUCTIONS.md` before execution.
+- Read `.codex/skills/repo-build/SKILL.md`.
+- The active `docs/pr/BUILD_PR.md` still describes an older Level 18 rebase workflow, so the explicit PR103 user request was used as the build source of truth.
+- No schema changes were required.
+- No sample JSON files were touched.
+
+## Changes
+- Removed the Captured Mappings `Delete All` button and its UI wiring completely.
+- Kept `Delete Action` and `Delete Mappings` in the Captured Mappings action area and centered them horizontally.
+- Preserved the reduced `6px` border-radius styling for Captured Mappings action buttons.
+- Added a `Disable Context` checkbox on the right side of the Capture accordion header.
+- Scoped context-menu suppression to the `.input-mapping-v2` tool workspace only when `Disable Context` is enabled.
+- Restored normal context-menu behavior when the checkbox is disabled.
+- Strengthened selected action input highlighting in the Capture area:
+  - selected keyboard mappings show highlighted used keyboard controls,
+  - selected mouse mappings show highlighted used mouse controls,
+  - selected game controller mappings show highlighted used game controller controls,
+  - combo mappings expose per-device used controls where they can be parsed from the captured combo.
+
+## Playwright Impact
+Playwright impacted: Yes.
+
+Behavior validated:
+- `Delete All` is absent.
+- `Delete Action` and `Delete Mappings` are horizontally centered.
+- Selected tiles highlight associated keyboard, mouse, and game controller controls in the Capture area.
+- The `Disable Context` checkbox appears in the Capture accordion header.
+- Enabling `Disable Context` prevents `contextmenu` default behavior inside Input Mapping V2.
+- Enabling `Disable Context` does not prevent `contextmenu` default behavior outside the tool workspace.
+- Disabling `Disable Context` restores `contextmenu` default behavior inside Input Mapping V2.
+
+Expected pass behavior:
+- The focused Input Mapping V2 Playwright assertions pass.
+- `npm run test:workspace-v2` passes.
+- Right-click suppression is opt-in and scoped to the Input Mapping V2 workspace root.
+
+Expected fail behavior:
+- Tests fail if `Delete All` remains visible, action buttons are not centered, selected input chips do not update with tile selection, or context-menu suppression leaks outside the tool workspace.
+
+## Validation
+- Targeted syntax/import validation for changed Input Mapping V2 files: PASS.
+- Targeted syntax validation for carried engine/input files and InputService test module: PASS.
+- Targeted InputService import/unit run: PASS.
+- Focused Input Mapping V2 Playwright run: PASS, 2 tests.
+- `npm run test:workspace-v2`: PASS, 61 tests.
+- Playwright V8 coverage report for changed runtime JS: PASS, advisory only.
+- `git diff --check`: PASS, line-ending warnings only.
+- HTML inline script/style/handler scan: PASS, no matches.
+- Sample/JSON diff scan: PASS, no changed sample or JSON files.
+- Full samples smoke test: not run, per request and project instructions.
+
+## Manual Validation
+1. Open Workspace Manager V2 and launch Input Mapping V2.
+2. Confirm the Captured Mappings action area shows only `Delete Action` and `Delete Mappings`, centered below the separator.
+3. Create or select a tile with keyboard, mouse, and game controller mappings.
+4. Confirm the selected tile visibly highlights the associated used controls in the Capture area.
+5. Enable `Disable Context`, right-click inside the Input Mapping V2 workspace, and confirm the browser context menu is suppressed.
+6. Right-click outside the Input Mapping V2 workspace and confirm normal context-menu behavior is not suppressed.
+7. Disable `Disable Context`, right-click inside Input Mapping V2, and confirm normal context-menu behavior is restored.
+
+## Out Of Scope
+- Schema changes.
+- Sample JSON alignment.
+- Full samples smoke test.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -1583,9 +1583,31 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       expect(actionOptions).toEqual([...actionOptions].sort((left, right) => left.localeCompare(right)));
       expect(actionOptions).toEqual(expect.arrayContaining(["Move Left", "Confirm", "Cancel", "Fire", "Thrust", "Rotate Left", "Rotate Right", "Pause", "Select", "Start"]));
       await expect(page.locator("#inputMappingV2ResetActionsButton")).toHaveCount(0);
-      await expect(page.locator("#inputMappingV2ClearActionButton")).toHaveText("Delete All");
+      await expect(page.locator("#inputMappingV2ClearActionButton")).toHaveCount(0);
       await expect(page.locator("#actionSetupContent .input-mapping-v2__button-row button")).toHaveText(["Add", "Delete"]);
-      await expect(page.locator("#mappingPanelContent #inputMappingV2ClearActionButton")).toBeVisible();
+      await expect(page.locator(".input-mapping-v2__capture-header #inputMappingV2DisableContextCheckbox")).toBeVisible();
+      expect(await page.locator(".input-mapping-v2").evaluate((root) => {
+        const event = new MouseEvent("contextmenu", { bubbles: true, button: 2, cancelable: true });
+        const dispatchResult = root.dispatchEvent(event);
+        return { defaultPrevented: event.defaultPrevented, dispatchResult };
+      })).toEqual({ defaultPrevented: false, dispatchResult: true });
+      await page.locator("#inputMappingV2DisableContextCheckbox").check();
+      expect(await page.locator(".input-mapping-v2").evaluate((root) => {
+        const event = new MouseEvent("contextmenu", { bubbles: true, button: 2, cancelable: true });
+        const dispatchResult = root.dispatchEvent(event);
+        return { defaultPrevented: event.defaultPrevented, dispatchResult };
+      })).toEqual({ defaultPrevented: true, dispatchResult: false });
+      expect(await page.evaluate(() => {
+        const event = new MouseEvent("contextmenu", { bubbles: true, button: 2, cancelable: true });
+        const dispatchResult = document.body.dispatchEvent(event);
+        return { defaultPrevented: event.defaultPrevented, dispatchResult };
+      })).toEqual({ defaultPrevented: false, dispatchResult: true });
+      await page.locator("#inputMappingV2DisableContextCheckbox").uncheck();
+      expect(await page.locator(".input-mapping-v2").evaluate((root) => {
+        const event = new MouseEvent("contextmenu", { bubbles: true, button: 2, cancelable: true });
+        const dispatchResult = root.dispatchEvent(event);
+        return { defaultPrevented: event.defaultPrevented, dispatchResult };
+      })).toEqual({ defaultPrevented: false, dispatchResult: true });
       await expect(page.locator(".input-mapping-v2__device-card[data-input-mapping-device-id='gameController'] #inputMappingV2RumbleFeedbackCheckbox")).toBeVisible();
       await page.locator("#inputMappingV2RumbleFeedbackCheckbox").check();
       await expect(page.locator("#statusLog")).toHaveValue(/WARN Gamepad rumble unavailable:/);
@@ -1594,17 +1616,19 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       expect(await page.locator("#previewOutput").evaluate((node) => getComputedStyle(node).overflowY)).toBe("auto");
       const capturedMappingsActionPlacement = await page.locator("#mappingPanelContent").evaluate((content) => ({
         actionButtonTexts: Array.from(content.querySelectorAll(".input-mapping-v2__mapping-actions button")).map((button) => button.textContent),
+        justifyContent: getComputedStyle(content.querySelector(".input-mapping-v2__mapping-actions")).justifyContent,
         lastElementClass: content.lastElementChild?.className,
         previousElementClass: content.lastElementChild?.previousElementSibling?.className,
         previousElementTag: content.lastElementChild?.previousElementSibling?.tagName,
         radii: Array.from(content.querySelectorAll(".input-mapping-v2__mapping-actions button")).map((button) => getComputedStyle(button).borderRadius)
       }));
       expect(capturedMappingsActionPlacement).toEqual({
-        actionButtonTexts: ["Delete Action", "Delete Mappings", "Delete All"],
+        actionButtonTexts: ["Delete Action", "Delete Mappings"],
+        justifyContent: "center",
         lastElementClass: "input-mapping-v2__mapping-actions",
         previousElementClass: "input-mapping-v2__mapping-actions-separator",
         previousElementTag: "HR",
-        radii: ["6px", "6px", "6px"]
+        radii: ["6px", "6px"]
       });
       const captureFlowLayout = await page.locator("#captureInputContent").evaluate((content) => {
         const rectFor = (selector) => {
@@ -1815,6 +1839,8 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#inputMappingV2UsedInputHighlights")).toContainText("Keyboard KeyA Press");
       await expect(page.locator("#inputMappingV2UsedInputHighlights")).toContainText("Mouse Middle Button Click");
       await expect(page.locator("#inputMappingV2UsedInputHighlights")).toContainText("Mouse Left Button Drag Release");
+      await expect(page.locator(".input-mapping-v2__used-source[data-input-mapping-used-source-id='keyboard'] .input-mapping-v2__used-control", { hasText: "Keyboard KeyA Press" })).toHaveCount(1);
+      await expect(page.locator(".input-mapping-v2__used-source[data-input-mapping-used-source-id='mouse'] .input-mapping-v2__used-control", { hasText: "Mouse Left Button Drag Release" })).toHaveCount(1);
       await expect(page.locator("#inspectorOutput")).toContainText('"action": "moveLeft"');
       await expect(page.locator("#inspectorOutput")).toContainText('"binding": "KeyA"');
       await expect(page.locator("#inspectorOutput")).toContainText('"binding": "KeyD"');
@@ -1838,6 +1864,8 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await page.keyboard.press("KeyB");
       await expect(page.locator("#statusLog")).toHaveValue(/OK Keyboard KeyB mapped to Confirm\./);
       await expect(page.locator("#captureInputContent")).not.toContainText("Keyboard KeyB mapped to Confirm.");
+      await expect(page.locator(".input-mapping-v2__used-source[data-input-mapping-used-source-id='keyboard'] .input-mapping-v2__used-control", { hasText: "Keyboard KeyB Press" })).toHaveCount(1);
+      await expect(page.locator(".input-mapping-v2__used-source[data-input-mapping-used-source-id='keyboard'] .input-mapping-v2__used-control", { hasText: "Keyboard KeyA Press" })).toHaveCount(0);
       await page.locator("#inputMappingV2DeleteMappingsButton").click();
       await expect(page.locator(".input-mapping-v2__mapping-card", { hasText: "Confirm" })).toHaveCount(1);
       await expect(page.locator(".input-mapping-v2__mapping-card", { hasText: "Confirm" })).toContainText("No inputs captured.");
@@ -1958,6 +1986,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#previewOutput")).not.toContainText("(Gamepad 1)");
       await expect(page.locator(".input-mapping-v2__gamepad-capture-button[data-input-mapping-gamepad-index='1']")).toHaveClass(/has-used-input/);
       await expect(page.locator("#inputMappingV2UsedInputHighlights")).toContainText("Game Controller X Button");
+      await expect(page.locator(".input-mapping-v2__used-source[data-input-mapping-used-source-id='gameController'] .input-mapping-v2__used-control", { hasText: "Game Controller X Button" })).toHaveCount(1);
       await expect(page.locator(".input-mapping-v2__input-token", { hasText: "Game Controller" }).filter({ hasText: "X" })).toHaveAttribute("title", "Logitech RumblePad 2 USB\nSTANDARD GAMEPAD\nVendor: 046d Product: c218\nX");
       await expect(page.locator("#inspectorOutput")).toContainText('"source": "gamepad"');
       await expect(page.locator("#inspectorOutput")).toContainText('"binding": "Pad1:Button2"');
@@ -2013,10 +2042,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await page.locator("#toolCopyJsonButton").click();
       expect(await page.evaluate(() => window.__inputMappingV2Clipboard)).toContain('"toolId": "input-mapping-v2"');
       await expect(page.locator("#statusLog")).toHaveValue(/OK Mapping JSON copied\./);
-      await page.locator("#inputMappingV2ClearActionButton").click();
-      await expect(page.locator(".input-mapping-v2__mapping-card")).toHaveCount(0);
-      await expect(page.locator("#previewOutput")).toContainText("No inputs captured yet.");
-      await expect(page.locator("#statusLog")).toHaveValue(/OK Deleted \d+ captured mappings\./);
+      await expect(page.locator("#inputMappingV2ClearActionButton")).toHaveCount(0);
       expect(pageErrors).toEqual([]);
     } finally {
       await workspaceV2CoverageReporter.stop(page);

tools/input-mapping-v2/index.html

@@ -102,10 +102,16 @@ <h2 class="tools-platform-frame__eyebrow">Input Sources and Action Mapping</h2>
         </section>
 
         <section class="accordion-v2 tool-starter__accordion is-open" data-accordion-v2-open="true">
-          <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="captureInputContent">
+          <div class="accordion-v2__header input-mapping-v2__capture-header" aria-expanded="true" aria-controls="captureInputContent">
             <span>Capture</span>
-            <span class="accordion-v2__icon" aria-hidden="true">+</span>
-          </button>
+            <div class="input-mapping-v2__capture-header-actions">
+              <label class="input-mapping-v2__context-toggle" for="inputMappingV2DisableContextCheckbox">
+                <input id="inputMappingV2DisableContextCheckbox" type="checkbox">
+                <span>Disable Context</span>
+              </label>
+              <span class="accordion-v2__icon" aria-hidden="true">+</span>
+            </div>
+          </div>
           <div id="captureInputContent" class="accordion-v2__content">
             <p id="inputMappingV2SelectedActionLabel" class="tool-starter__hint">Selected action: Move Up</p>
             <div class="input-mapping-v2__button-row">
@@ -133,7 +139,6 @@ <h2 class="tools-platform-frame__eyebrow">Input Sources and Action Mapping</h2>
             <div class="input-mapping-v2__mapping-actions">
               <button id="inputMappingV2MappingDeleteActionButton" type="button">Delete Action</button>
               <button id="inputMappingV2DeleteMappingsButton" type="button">Delete Mappings</button>
-              <button id="inputMappingV2ClearActionButton" type="button">Delete All</button>
             </div>
           </div>
         </section>

tools/input-mapping-v2/js/ToolStarterApp.js

@@ -14,6 +14,7 @@ export class ToolStarterApp {
     shell,
     state,
     statusLog,
+    workspaceRoot,
     windowRef = window
   }) {
     this.accordions = accordions;
@@ -30,20 +31,23 @@ export class ToolStarterApp {
     this.shell = shell;
     this.state = state;
     this.statusLog = statusLog;
+    this.workspaceRoot = workspaceRoot;
     this.window = windowRef;
     this.captureMode = "";
     this.activeGamepadIndex = null;
     this.comboCaptureInputs = [];
     this.rumbleFeedbackEnabled = false;
     this.captureTimeoutMs = 8000;
     this.captureTimeoutTimer = null;
+    this.contextMenuDisabled = false;
     this.gamepadPollIntervalMs = 750;
     this.gamepadPollTimer = null;
     this.lastGamepadStatusSignature = "";
     this.enabledDeviceIds = new Set();
     this.enabledDevicesInitialized = false;
     this.handleGamepadConnectionChange = this.handleGamepadConnectionChange.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleContextMenu = this.handleContextMenu.bind(this);
     this.handleMouseDown = this.handleMouseDown.bind(this);
     this.handleWheel = this.handleWheel.bind(this);
     this.pollGamepadDevices = this.pollGamepadDevices.bind(this);
@@ -73,6 +77,7 @@ export class ToolStarterApp {
       onCaptureGamepad: (gamepadIndex) => this.startGamepadCapture(gamepadIndex),
       onCaptureKeyboard: () => this.startKeyboardCapture(),
       onCaptureMouse: () => this.startMouseCapture(),
+      onDisableContextChanged: (isDisabled) => this.setContextMenuDisabled(isDisabled),
       onRefreshGamepads: () => this.refreshGamepads()
     });
     this.deviceList.mount({
@@ -90,10 +95,10 @@ export class ToolStarterApp {
     this.window.addEventListener("keydown", this.handleKeyDown, true);
     this.window.addEventListener("mousedown", this.handleMouseDown, true);
     this.window.addEventListener("wheel", this.handleWheel, true);
+    this.workspaceRoot.addEventListener("contextmenu", this.handleContextMenu);
     this.statusLog.mount();
     this.preview.mount({
       onDeleteAction: () => this.deleteSelectedAction(),
-      onDeleteAllMappings: () => this.deleteAllMappings(),
       onDeleteMappings: () => this.deleteSelectedMappings(),
       onSelectAction: (actionId) => this.selectAction(actionId)
     });
@@ -122,12 +127,6 @@ export class ToolStarterApp {
     this.refreshActions();
   }
 
-  deleteAllMappings() {
-    const result = this.state.deleteAllMappings();
-    this.statusLog[result.ok ? "ok" : "warn"](result.message);
-    this.refreshActions();
-  }
-
   deleteSelectedMappings() {
     const result = this.state.deleteSelectedMappings();
     this.statusLog[result.ok ? "ok" : "warn"](result.message);
@@ -238,6 +237,12 @@ export class ToolStarterApp {
     this.tryCaptureComboGamepad();
   }
 
+  handleContextMenu(event) {
+    if (this.contextMenuDisabled) {
+      event.preventDefault();
+    }
+  }
+
   tryCaptureActiveGamepad() {
     if (this.captureMode !== "gamepad" || !Number.isInteger(this.activeGamepadIndex)) {
       return false;
@@ -339,6 +344,11 @@ export class ToolStarterApp {
     }
   }
 
+  setContextMenuDisabled(isDisabled) {
+    this.contextMenuDisabled = isDisabled;
+    this.statusLog.ok(`Browser context menu ${isDisabled ? "disabled" : "enabled"} within Input Mapping V2 workspace.`);
+  }
+
   setDeviceEnabled(deviceId, isEnabled) {
     if (isEnabled) {
       this.enabledDeviceIds.add(deviceId);

tools/input-mapping-v2/js/bootstrap.js

@@ -49,6 +49,7 @@ window.addEventListener("DOMContentLoaded", () => {
       captureKeyboardButton: requireElement("#inputMappingV2CaptureKeyboardButton"),
       captureMessage: requireElement("#inputMappingV2CaptureMessage"),
       captureMouseButton: requireElement("#inputMappingV2CaptureMouseButton"),
+      disableContextCheckbox: requireElement("#inputMappingV2DisableContextCheckbox"),
       refreshGamepadsButton: requireElement("#inputMappingV2RefreshGamepadsButton"),
       selectedActionLabel: requireElement("#inputMappingV2SelectedActionLabel"),
       usedInputHighlights: requireElement("#inputMappingV2UsedInputHighlights")
@@ -69,13 +70,13 @@ window.addEventListener("DOMContentLoaded", () => {
     inspector: new InspectorControl(requireElement("#inspectorOutput")),
     preview: new PreviewPanelControl({
       deleteActionButton: requireElement("#inputMappingV2MappingDeleteActionButton"),
-      deleteAllButton: requireElement("#inputMappingV2ClearActionButton"),
       deleteMappingsButton: requireElement("#inputMappingV2DeleteMappingsButton"),
       output: requireElement("#previewOutput")
     }),
     shell: new ToolStarterShellControl(),
     state: new InputMappingState(),
     statusLog,
+    workspaceRoot: requireElement(".input-mapping-v2"),
     windowRef: window
   });