fix(gamepad-tester): warn Firefox users about Switch mapping bug

Add a Nintendo Switch controller warning in the gamepad tester for Firefox versions earlier than 155, based on parsed browser major version and detected controller type. The warning links to Mozilla bug 1704419 and is shown/hidden dynamically as gamepads connect. Styling updates were added to keep the notice centered by default and compact within the active tester layout.

Author: ReenigneArcher

_sass/styles.scss

@@ -739,6 +739,21 @@ table tr:nth-child(2n) {
   padding: 0.8rem;
 }
 
+.gamepad-browser-warning {
+  margin-inline: auto;
+  max-width: 46rem;
+}
+
+.gamepad-browser-warning[hidden] {
+  display: none;
+}
+
+.gamepad-browser-warning a {
+  font-weight: 600;
+  overflow-wrap: anywhere;
+  text-decoration: underline;
+}
+
 .gamepad-device-details > summary {
   align-items: center;
   cursor: pointer;
@@ -847,6 +862,12 @@ table tr:nth-child(2n) {
     padding: 0.65rem 0.85rem;
   }
 
+  .gamepad-tester.has-gamepad .gamepad-browser-warning {
+    margin-top: 0.75rem !important;
+    max-width: none;
+    padding: 0.55rem 0.75rem;
+  }
+
   .gamepad-tester.has-gamepad .gamepad-selector-panel {
     display: grid;
     grid-template-columns: 13rem minmax(0, 1fr);

assets/js/gamepad-tester.js

@@ -5,6 +5,13 @@ function createDPadButtonVisuals(shapes) {
     }));
 }
 
+const FIREFOX_SWITCH_GAMEPAD_FIXED_VERSION = 155;
+
+function getFirefoxMajorVersion(userAgent) {
+    const match = /\bFirefox\/(\d+)/.exec(userAgent);
+    return match ? Number.parseInt(match[1], 10) : null;
+}
+
 document.addEventListener('DOMContentLoaded', function() {
     const gamepadHelper = new GamepadHelper()
     const gamepadHelperVersion = globalThis.gamepadHelperVersion;
@@ -17,6 +24,8 @@ document.addEventListener('DOMContentLoaded', function() {
     const gamepadTester = document.getElementById('GamepadTester');
     const gamepadStatus = document.getElementById('gamepad-status');
     const gamepadStatusMessage = document.getElementById('gamepad-status-message');
+    const firefoxSwitchWarning = document.getElementById('firefox-switch-warning');
+    const firefoxMajorVersion = getFirefoxMajorVersion(navigator.userAgent);
     let gamepadVisualButtons = new Map();
     let gamepadVisualSticks = [];
     let gamepadVisualTriggers = new Map();
@@ -205,7 +214,15 @@ document.addEventListener('DOMContentLoaded', function() {
 
         const gamepadIndices = Object.keys(gamepads);
         const hasGamepads = gamepadIndices.length > 0;
+        const hasNintendoSwitchController = Object.values(gamepads).some(gamepad =>
+            gamepadHelper.detectControllerType(gamepad.id) === gamepadHelper.CONTROLLER_TYPES.SWITCH
+        );
         gamepadTester.classList.toggle('has-gamepad', hasGamepads);
+        firefoxSwitchWarning.hidden = !(
+            firefoxMajorVersion !== null
+            && firefoxMajorVersion < FIREFOX_SWITCH_GAMEPAD_FIXED_VERSION
+            && hasNintendoSwitchController
+        );
 
         if (hasGamepads) {
             gamepadSelectorContainer.style.removeProperty('display');

gamepad-tester.html

@@ -36,6 +36,15 @@ <h2 class="display-6 fw-bolder mb-2">Gamepad Tester</h2>
             </p>
         </header>
 
+        <div id="firefox-switch-warning" class="gamepad-browser-warning gamepad-inline-notice mt-3" aria-live="polite" hidden>
+            <i class="fas fa-triangle-exclamation mt-1" aria-hidden="true"></i>
+            <span>
+                Firefox versions before 155 can report incorrect buttons and axes for Nintendo Switch controllers.
+                Update to Firefox 155 or later, or use another current browser.
+                Details: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1704419" target="_blank" rel="noopener noreferrer">https://bugzilla.mozilla.org/show_bug.cgi?id=1704419</a>
+            </span>
+        </div>
+
         <section class="gamepad-selector-panel mt-4" id="gamepad-selector-container" style="display: none;" aria-labelledby="gamepad-selector-heading">
             <div class="gamepad-selector-heading">
                 <div>