WebUI Tab Strip: Add alert indicator for HID connected

https://imgur.com/a/FuGtnqh

There needs to be a more long-term solution for alert states being
added, but this fixes the issue for now.

Fixed: 1066572
Change-Id: I7d09c453a206ea4d9a91dbb7a352f727b430ac4a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2129343Reviewed-by: dpapad <dpapad@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#755123}

chrome/browser/resources/tab_strip/alert_indicator.html

@@ -9,7 +9,7 @@
   }
 
   :host([alert-state_='0']),
-  :host([alert-state_='8']) {
+  :host([alert-state_='9']) {
     -webkit-mask-image: url(alert_indicators/tab_media_recording.svg);
     background-color: var(--tabstrip-indicator-recording-color);
   }
@@ -38,15 +38,19 @@
   }
 
   :host([alert-state_='6']) {
-    -webkit-mask-image: url(alert_indicators/serial_port.svg);
+    -webkit-mask-image: url(alert_indicators/tab_hid_connected.svg);
   }
 
   :host([alert-state_='7']) {
+    -webkit-mask-image: url(alert_indicators/serial_port.svg);
+  }
+
+  :host([alert-state_='8']) {
     -webkit-mask-image: url(alert_indicators/picture_in_picture_alt.svg);
     background-color: var(--tabstrip-indicator-pip-color);
   }
 
-  :host([alert-state_='9']) {
+  :host([alert-state_='10']) {
     -webkit-mask-image: url(alert_indicators/vr_headset.svg);
   }
 </style>

chrome/browser/resources/tab_strip/alert_indicator.js

@@ -35,6 +35,8 @@ function getAriaLabel(alertState) {
       return loadTimeData.getStringF('bluetoothConnected', '');
     case TabAlertState.USB_CONNECTED:
       return loadTimeData.getStringF('usbConnected', '');
+    case TabAlertState.HID_CONNECTED:
+      return loadTimeData.getStringF('hidConnected', '');
     case TabAlertState.SERIAL_CONNECTED:
       return loadTimeData.getStringF('serialConnected', '');
     case TabAlertState.PIP_PLAYING:

chrome/browser/resources/tab_strip/alert_indicators.js

@@ -28,6 +28,7 @@ export class AlertIndicatorsElement extends CustomElement {
       [TabAlertState.AUDIO_MUTING, audioIndicator],
       [TabAlertState.BLUETOOTH_CONNECTED, new AlertIndicatorElement()],
       [TabAlertState.USB_CONNECTED, new AlertIndicatorElement()],
+      [TabAlertState.HID_CONNECTED, new AlertIndicatorElement()],
       [TabAlertState.SERIAL_CONNECTED, new AlertIndicatorElement()],
       [TabAlertState.PIP_PLAYING, new AlertIndicatorElement()],
       [TabAlertState.DESKTOP_CAPTURING, recordingIndicator],

chrome/browser/resources/tab_strip/alert_indicators/tab_hid_connected.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill-rule="evenodd"><path d="M 21 6 H 3 c -1.1 0 -2 0.9 -2 2 v 8 c 0 1.1 0.9 2 2 2 h 18 c 1.1 0 2 -0.9 2 -2 V 8 c 0 -1.1 -0.9 -2 -2 -2 Z m -10 7 H 8 v 3 H 6 v -3 H 3 v -2 h 3 V 8 h 2 v 3 h 3 v 2 Z m 4.5 2 c -0.83 0 -1.5 -0.67 -1.5 -1.5 c 0 -0.83 0.67 -1.5 1.5 -1.5 c 0.83 0 1.5 0.67 1.5 1.5 c 0 0.83 -0.67 1.5 -1.5 1.5 Z m 4 -3 c -0.83 0 -1.5 -0.67 -1.5 -1.5 S 18.67 9 19.5 9 c 0.83 0 1.5 0.67 1.5 1.5 c 0 0.83 -0.67 1.5 -1.5 1.5 Z"/></svg>

chrome/browser/resources/tab_strip/tab_strip_resources.grd

@@ -109,6 +109,11 @@
           file="alert_indicators/tab_bluetooth_connected.svg"
           type="BINDATA"
           compress="gzip" />
+      <include
+          name="IDR_TAB_STRIP_TAB_HID_CONNECTED_SVG"
+          file="alert_indicators/tab_hid_connected.svg"
+          type="BINDATA"
+          compress="gzip" />
       <include
           name="IDR_TAB_STRIP_TAB_MEDIA_CAPTURING_WITH_ARROW_SVG"
           file="alert_indicators/tab_media_capturing_with_arrow.svg"

chrome/browser/resources/tab_strip/tabs_api_proxy.js

@@ -28,7 +28,7 @@ export const TabNetworkState = {
 
 /**
  * Must be kept in sync with TabAlertState from
- * //chrome/browser ui/tabs/tab_utils.h
+ * //chrome/browser/ui/tabs/tab_utils.h
  * @enum {number}
  */
 export const TabAlertState = {
@@ -38,10 +38,11 @@ export const TabAlertState = {
   AUDIO_MUTING: 3,
   BLUETOOTH_CONNECTED: 4,
   USB_CONNECTED: 5,
-  SERIAL_CONNECTED: 6,
-  PIP_PLAYING: 7,
-  DESKTOP_CAPTURING: 8,
-  VR_PRESENTING_IN_HEADSET: 9,
+  HID_CONNECTED: 6,
+  SERIAL_CONNECTED: 7,
+  PIP_PLAYING: 8,
+  DESKTOP_CAPTURING: 9,
+  VR_PRESENTING_IN_HEADSET: 10,
 };
 
 /**

chrome/browser/ui/webui/tab_strip/tab_strip_ui.cc

@@ -79,6 +79,7 @@ TabStripUI::TabStripUI(content::WebUI* web_ui)
       {"audioPlaying", IDS_TAB_AX_LABEL_AUDIO_PLAYING_FORMAT},
       {"usbConnected", IDS_TAB_AX_LABEL_USB_CONNECTED_FORMAT},
       {"bluetoothConnected", IDS_TAB_AX_LABEL_BLUETOOTH_CONNECTED_FORMAT},
+      {"hidConnected", IDS_TAB_AX_LABEL_HID_CONNECTED_FORMAT},
       {"serialConnected", IDS_TAB_AX_LABEL_SERIAL_CONNECTED_FORMAT},
       {"mediaRecording", IDS_TAB_AX_LABEL_MEDIA_RECORDING_FORMAT},
       {"audioMuting", IDS_TAB_AX_LABEL_AUDIO_MUTING_FORMAT},