1 files changed, 77 insertions, 0 deletions
diff --git a/chromium/chrome/browser/resources/tab_strip/alert_indicator.html b/chromium/chrome/browser/resources/tab_strip/alert_indicator.html
new file mode 100644
index 00000000000..5a4e4c7481c
--- /dev/null
+++ b/chromium/chrome/browser/resources/tab_strip/alert_indicator.html
@@ -0,0 +1,77 @@
+<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: currentColor;
+    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: var(--tabstrip-indicator-pip-color);
+  }
+
+  :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);
+    background-color: var(--tabstrip-indicator-capturing-color);
+  }
+
+  :host([alert-state='recording']) {
+    -webkit-mask-image: url(alert_indicators/tab_media_recording.svg);
+    background-color: var(--tabstrip-indicator-recording-color);
+  }
+
+  :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>