Tab Strip WebUI: Add a custom element to display alert indicators

This CL copies over a SVG version of the tab alert indicator icons from
/src/chrome/app/vector_icons/ and creates a custom element to display
them. The icon dimensions have been customized for the WebUI version of
the tab stirp and may change. The animations have been made to act
as similar as possible with the existing implementations.

Although the back-end has not yet been provided, this CL assumes there
will be some mapping of TabAlertState to string, a string that will be
used to update the |alert-state| property of the custom
element.

Note: this CL does not add theme colors for all icons (for example, the
recording alert should display in red).

https://i.imgur.com/dq2SARY.png

Bug: 1004983
Change-Id: Ie0c20ae165bae935de1b21241815f7221351764a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1825793Reviewed-by: Lei Zhang <thestig@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#700357}

chrome/browser/resources/tab_strip/BUILD.gn

@@ -7,6 +7,7 @@ import("//tools/polymer/polymer.gni")
 
 js_type_check("closure_compile") {
   deps = [
+    ":alert_indicator",
     ":custom_element",
     ":tab",
     ":tab_list",
@@ -14,6 +15,9 @@ js_type_check("closure_compile") {
   ]
 }
 
+js_library("alert_indicator") {
+}
+
 js_library("custom_element") {
 }
 
@@ -43,11 +47,18 @@ js_library("types") {
 
 group("tab_strip_modules") {
   deps = [
+    ":alert_indicator_module",
     ":tab_list_module",
     ":tab_module",
   ]
 }
 
+polymer_modulizer("alert_indicator") {
+  js_file = "alert_indicator.js"
+  html_file = "alert_indicator.html"
+  html_type = "v3-ready"
+}
+
 polymer_modulizer("tab") {
   js_file = "tab.js"
   html_file = "tab.html"

chrome/browser/resources/tab_strip/alert_indicator.html

+<style>
+  @keyframes fade-in {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+
+  @keyframes fade-out {
+    0% { opacity: 1; }
+    100% { opacity: 0; }
+  }
+
+  :host {
+    -webkit-mask: center / contain no-repeat;
+    animation: fade-in 200ms ease-in forwards;
+    background-color: var(--tabstrip-primary-text-color);
+    display: block;
+    height: 100%;
+    opacity: 0;
+    width: 16px;
+  }
+
+  :host([fade-out]) {
+    animation: fade-out 1000ms ease-in;
+  }
+
+  :host([alert-state='pip']) {
+    -webkit-mask-image: url(alert_indicators/picture_in_picture_alt.svg);
+    background-color: rgb(var(--google-blue-500-rgb));
+  }
+
+  :host([alert-state='serial']) {
+    -webkit-mask-image: url(alert_indicators/serial_port.svg);
+  }
+
+  :host([alert-state='muted']) {
+    -webkit-mask-image: url(alert_indicators/tab_audio_muting_rounded.svg);
+  }
+
+  :host([alert-state='audio']) {
+    -webkit-mask-image: url(alert_indicators/tab_audio_rounded.svg);
+  }
+
+  :host([alert-state='bluetooth']) {
+    -webkit-mask-image: url(alert_indicators/tab_bluetooth_connected.svg);
+  }
+
+  :host([alert-state='capturing']) {
+    -webkit-mask-image:
+        url(alert_indicators/tab_media_capturing_with_arrow.svg);
+  }
+
+  :host([alert-state='recording']) {
+    -webkit-mask-image: url(alert_indicators/tab_media_recording.svg);
+  }
+
+  :host([alert-state='usb']) {
+    -webkit-mask-image: url(alert_indicators/tab_usb_connected.svg);
+    -webkit-mask-size: 20px;
+  }
+
+  :host([alert-state='vr']) {
+    -webkit-mask-image: url(alert_indicators/vr_headset.svg);
+  }
+
+  :host([alert-state='capturing']),
+  :host([alert-state='recording']) {
+    animation:
+        fade-in 200ms ease-in 0,
+        fade-out 1000ms ease-in 200ms,
+        fade-in 200ms ease-in 1200s,
+        fade-out 1000ms ease-in 1400ms,
+        fade-in 200ms ease-in 2400ms;
+    animation-fill-mode: forwards;
+  }
+</style>

chrome/browser/resources/tab_strip/alert_indicator.js

+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {CustomElement} from './custom_element.js';
+
+export class AlertIndicatorElement extends CustomElement {
+  static get template() {
+    return `{__html_template__}`;
+  }
+
+  /** @override */
+  remove() {
+    this.toggleAttribute('fade-out', true);
+    this.addEventListener('animationend', () => super.remove(), {once: true});
+  }
+}
+
+customElements.define('tabstrip-alert-indicator', AlertIndicatorElement);

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

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M 16 14 H 0 V 2 h 16 v 12 Z M 1 13 h 14 V 3 H 1 v 10 Z M 8 8 h 6 v 4 H 8 Z" /></svg>

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

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M 22 9 V 7 h -2 V 5 c 0 -1.1 -0.9 -2 -2 -2 H 4 c -1.1 0 -2 0.9 -2 2 v 14 c 0 1.1 0.9 2 2 2 h 14 c 1.1 0 2 -0.9 2 -2 v -2 h 2 v -2 h -2 v -2 h 2 v -2 h -2 V 9 h 2 Z m -4 10 H 4 V 5 h 14 v 14 Z M 6 13 h 5 v 4 H 6 Z m 6 -6 h 4 v 3 h -4 Z M 6 7 h 5 v 5 H 6 Z m 6 4 h 4 v 6 h -4 Z" /></svg>

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

+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M 8.5 6 C 8.5 5.02 7.93 4.17 7.11 3.76 L 7.11 4.99 L 8.47 6.35 C 8.49 6.24 8.5 6.12 8.5 6 Z M 9.89 6 C 9.89 6.52 9.78 7.01 9.59 7.47 L 10.43 8.31 C 10.79 7.62 11 6.83 11 6 C 11 3.62 9.34 1.63 7.11 1.13 L 7.11 2.27 C 8.72 2.75 9.89 4.24 9.89 6 Z M 1.71 1 L 1 1.71 L 3.63 4.33 L 1 4.33 L 1 7.67 L 3.22 7.67 L 6 10.44 L 6 6.71 L 8.36 9.07 C 7.99 9.36 7.57 9.58 7.11 9.72 L 7.11 10.87 C 7.88 10.69 8.57 10.34 9.16 9.86 L 10.29 11 L 11 10.29 L 6 5.29 L 1.71 1 Z M 6 1.56 L 4.84 2.72 L 6 3.88 L 6 1.56 Z" /></svg>

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

+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M 1 4.29 L 1 7.71 L 3.22 7.71 L 6 10.56 L 6 1.44 L 3.22 4.29 L 1 4.29 Z M 8.5 6 C 8.5 4.99 7.93 4.12 7.11 3.7 L 7.11 8.29 C 7.93 7.88 8.5 7.01 8.5 6 Z M 7.11 1 L 7.11 2.17 C 8.72 2.66 9.89 4.19 9.89 6 C 9.89 7.81 8.72 9.34 7.11 9.83 L 7.11 11 C 9.34 10.48 11 8.44 11 6 C 11 3.56 9.34 1.52 7.11 1 Z" /></svg>

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

+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M 16.8 2 h -1.4 v 10.63 L 8.97 6.2 L 7 8.17 L 14.83 16 L 7 23.83 L 8.97 25.8 l 6.43 -6.43 V 30 h 1.4 l 7.99 -7.99 L 18.77 16 l 6.02 -6.01 L 16.8 2 Z M 18 7 l 3 3 l -3 3 l 0.2 -5.64 L 18 7 Z m 3 15.01 L 18 25 v -6 l 2.83 3.01 H 21 Z" /></svg>

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

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M 0 2 L 16 2 L 16 14 L 0 14 L 0 2 Z M 1 3 L 1 13 L 15 13 L 15 3 L 1 3 Z M 2 4 L 14 4 L 14 12 L 2 12 L 2 4 Z M 7.92 9 L 7.92 11 L 11.5 8 L 7.92 5 L 7.92 7 C 5.14 7 4.38 9 4 11 C 4.93 9.6 5.88 8.96 7.92 9 Z" /></svg>

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

+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill-rule="evenodd"><path d="M 16 28 c 6.63 0 12 -5.37 12 -12 C 28 9.37 22.63 4 16 4 C 9.37 4 4 9.37 4 16 c 0 6.63 5.37 12 12 12 Z m 0 -2 c 5.52 0 10 -4.48 10 -10 C 26 10.48 21.52 6 16 6 C 10.48 6 6 10.48 6 16 c 0 5.52 4.48 10 10 10 Z m 0 -2 c 4.42 0 8 -3.58 8 -8 c 0 -4.42 -3.58 -8 -8 -8 c -4.42 0 -8 3.58 -8 8 c 0 4.42 3.58 8 8 8 Z" /></svg>

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

+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M 19 16 h 1 v 2 h -3 v -8 h 2 l -3 -4 l -3 4 h 2 v 8 h -3 v -2 c 0.85 -0.53 1.34 -1.23 1 -2 c 0.34 -1.27 -0.64 -2.25 -2 -2 c -1.02 -0.25 -2 0.73 -2 2 c 0 0.77 0.49 1.47 1 2 v 2 c 0.18 0.99 1.06 1.87 2 2 h 3 v 3 c -0.59 0.26 -1.07 0.98 -1 2 c -0.07 1.03 0.91 2 2 2 c 1.29 0 2.27 -0.97 2 -2 c 0.27 -1.02 -0.21 -1.74 -1 -2 v -3 h 3 c 1.14 -0.13 2.01 -1.01 2 -2 v -2 h 1 v -4 h -4 v 4 Z" /></svg>

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

+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M 17.4 5.57 A 2.12 2.12 0 0 0 15.94 5 H 4.06 c -0.55 0 -1.07 0.2 -1.46 0.56 c -0.39 0.37 -0.6 0.85 -0.6 1.36 v 6.14 c 0 0.52 0.21 1 0.6 1.36 c 0.39 0.37 0.91 0.56 1.46 0.56 h 2.85 c 0.37 0 0.74 -0.09 1.06 -0.28 c 0.32 -0.18 0.58 -0.43 0.76 -0.74 l 0.81 -1.4 a 0.48 0.48 0 0 1 0.13 -0.62 a 0.56 0.56 0 0 1 0.67 0 c 0.2 0.15 0.25 0.41 0.13 0.62 l 0.81 1.4 c 0.18 0.3 0.44 0.56 0.76 0.74 c 0.32 0.18 0.68 0.28 1.06 0.28 h 2.85 c 0.55 0 1.07 -0.2 1.46 -0.56 c 0.39 -0.36 0.6 -0.85 0.6 -1.36 V 6.93 c 0 -0.51 -0.21 -1 -0.6 -1.36 Z M 6.5 11.5 c -1.11 0 -2 -0.9 -2 -2 c 0 -1.1 0.9 -2 2 -2 c 1.1 0 2 0.9 2 2 c 0 1.1 -0.89 2 -2 2 Z m 7 0 c -1.11 0 -2 -0.9 -2 -2 c 0 -1.1 0.9 -2 2 -2 c 1.1 0 2 0.9 2 2 c 0 1.1 -0.89 2 -2 2 Z" /></svg>

chrome/browser/resources/tab_strip/tab_strip_resources.grd

@@ -39,6 +39,61 @@
           use_base_dir="false"
           type="chrome_html"
           compress="gzip"/>
+      <structure
+          name="IDR_TAB_STRIP_ALERT_INDICATOR_JS"
+          file="${root_gen_dir}/chrome/browser/resources/tab_strip/alert_indicator.js"
+          use_base_dir="false"
+          type="chrome_html"
+          compress="gzip"/>
     </structures>
+
+    <includes>
+      <!-- Alert indicators -->
+      <include
+          name="IDR_TAB_STRIP_PICTURE_IN_PICTURE_ALT_SVG"
+          file="alert_indicators/picture_in_picture_alt.svg"
+          type="BINDATA"
+          compress="gzip" />
+      <include
+          name="IDR_TAB_STRIP_SERIAL_PORT_SVG"
+          file="alert_indicators/serial_port.svg"
+          type="BINDATA"
+          compress="gzip" />
+      <include
+          name="IDR_TAB_STRIP_TAB_AUDIO_MUTING_ROUNDED_SVG"
+          file="alert_indicators/tab_audio_muting_rounded.svg"
+          type="BINDATA"
+          compress="gzip" />
+      <include
+          name="IDR_TAB_STRIP_TAB_AUDIO_ROUNDED_SVG"
+          file="alert_indicators/tab_audio_rounded.svg"
+          type="BINDATA"
+          compress="gzip" />
+      <include
+          name="IDR_TAB_STRIP_TAB_BLUETOOTH_CONNECTED_SVG"
+          file="alert_indicators/tab_bluetooth_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"
+          type="BINDATA"
+          compress="gzip" />
+      <include
+          name="IDR_TAB_STRIP_TAB_MEDIA_RECORING_SVG"
+          file="alert_indicators/tab_media_recording.svg"
+          type="BINDATA"
+          compress="gzip" />
+      <include
+          name="IDR_TAB_STRIP_TAB_USB_CONNECTED_SVG"
+          file="alert_indicators/tab_usb_connected.svg"
+          type="BINDATA"
+          compress="gzip" />
+      <include
+          name="IDR_TAB_STRIP_VR_HEADSET_SVG"
+          file="alert_indicators/vr_headset.svg"
+          type="BINDATA"
+          compress="gzip" />
+    </includes>
   </release>
 </grit>

tools/gritsettings/resource_ids

@@ -151,6 +151,7 @@
   },
   "chrome/browser/resources/tab_strip/tab_strip_resources.grd": {
     "structures": [13880],
+    "includes": [13900],
   },
   "chrome/browser/resources/webapks/webapks_ui_resources.grd": {
     "includes": [13910],