fix debug information

js/gamepad.js

@@ -324,7 +324,7 @@ class Gamepad {
      * @returns {object}
      */
     toGamepadInfo(id) {
-        return /(?<name>.*?) \((Vendor: (?<vendor>[0-9a-f]{4}) Product: (?<product>[0-9a-f]{4})|(?<id>.*?))\)/.exec(id).groups;
+        return /(?<name>.*?) \((?:.*?Vendor: (?<vendor>[0-9a-f]{4}) Product: (?<product>[0-9a-f]{4})|(?<id>.*?))\)/.exec(id).groups;
     }
 
     /**

templates/debug/template.css

@@ -52,3 +52,9 @@
     white-space: nowrap;
     color: white;
 }
+
+#info-vendor,
+#info-product,
+#info-id {
+    display: none;
+}

templates/debug/template.html

@@ -20,6 +20,12 @@
 				<div class="value"></div>
 			</div>
 		</div>
+		<div id="info-id" class="box medium">
+			<div class="content">
+				<div class="label">ID</div>
+				<div class="value"></div>
+			</div>
+		</div>
 	</div>
 </div>
 <div class="info">

templates/debug/template.js

@@ -1,8 +1,9 @@
 function DebugTemplate(gamepad) {
     return {
         $name: $('#info-name .value'),
-        $vendor: $('#info-vendor .value'),
+        $vendor: $('#info-vendor'),
-        $product: $('#info-product .value'),
+        $product: $('#info-product'),
+        $id: $('#info-id'),
         $timestamp: $('#info-timestamp .value'),
         $index: $('#info-index .value'),
         $mapping: $('#info-mapping .value'),
@@ -14,10 +15,14 @@ function DebugTemplate(gamepad) {
             if (!this.activeGamepad) {
                 return;
             }
-            const { name, vendor, product } = gamepad.toGamepadInfo(this.activeGamepad.id);
+            const { name, vendor, product, id } = gamepad.toGamepadInfo(this.activeGamepad.id);
             this.$name.html(name).attr('title', name);
-            this.$vendor.html(vendor);
+            if (vendor && product) {
-            this.$product.html(product);
+                this.$vendor.css({display: 'block'}).find('.value').html(vendor);
+                this.$product.css({display: 'block'}).find('.value').html(product);
+            } else {
+                this.$id.css({display: 'block'}).find('.value').html(id);
+            }
             this.updateTimestamp();
             this.$index.html(this.activeGamepad.index);
             this.$mapping.html(this.activeGamepad.mapping || 'N/A');