Tab Strip WebUI: Update indicator, drag placeholder colors

https://imgur.com/a/4zjGLka

Bug: 1004981
Change-Id: I8b4b04d2f85247e342ac4311bc93aff79a0ab872
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1835146Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#702137}

chrome/browser/resources/tab_strip/alert_indicator.html

@@ -12,7 +12,7 @@
   :host {
     -webkit-mask: center / contain no-repeat;
     animation: fade-in 200ms ease-in forwards;
-    background-color: var(--tabstrip-primary-text-color);
+    background-color: currentColor;
     display: block;
     height: 100%;
     opacity: 0;
@@ -25,7 +25,7 @@
 
   :host([alert-state='pip']) {
     -webkit-mask-image: url(alert_indicators/picture_in_picture_alt.svg);
-    background-color: rgb(var(--google-blue-500-rgb));
+    background-color: var(--tabstrip-indicator-pip-color);
   }
 
   :host([alert-state='serial']) {
@@ -47,10 +47,12 @@
   :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']) {

chrome/browser/resources/tab_strip/tab.html

@@ -13,7 +13,7 @@
 
   #dragImage {
     background: var(--tabstrip-tab-background-color);
-    border-radius: var(--tabstrip-card-border-radius);
+    border-radius: var(--tabstrip-tab-border-radius);
     box-shadow: 0 0 0 1px var(--tabstrip-tab-separator-color);
     color: var(--tabstrip-tab-text-color);
     display: flex;
@@ -24,7 +24,7 @@
   }
 
   :host([active]) #dragImage {
-    box-shadow: 0 0 0 2px var(--tabstrip-focus-color);
+    box-shadow: 0 0 0 2px var(--tabstrip-tab-active-border-color);
     outline: none;
   }
 
@@ -64,7 +64,7 @@
     -webkit-mask:
         url(chrome://resources/images/throbber_small.svg)
         center/contain no-repeat;
-    background-color: currentColor;
+    background-color: var(--tabstrip-tab-loading-spinning-color);
     display: none;
   }
 
@@ -149,7 +149,7 @@
 
   #thumbnail {
     align-items: center;
-    background: var(--tabstrip-card-background-color);
+    background: var(--tabstrip-tab-background-color);
     display: flex;
     flex: 1;
     justify-content: center;
@@ -186,9 +186,10 @@
   }
 
   :host([dragging]) #dragPlaceholder {
-    background: rgba(var(--google-grey-200-rgb));
-    border-radius: var(--tabstrip-card-border-radius);
+    background: var(--tabstrip-tab-background-color);
+    border-radius: var(--tabstrip-tab-border-radius);
     height: 100%;
+    opacity: 0.5;
     width: 100%;
   }
 

chrome/browser/resources/tab_strip/tab_strip.html

@@ -14,8 +14,8 @@
         --google-blue-500-rgb: 66, 133, 244;
 
         --tabstrip-background-color: $i18n{frameColor};
-        --tabstrip-card-border-radius: 8px;
-        --tabstrip-focus-color: rgb(var(--google-blue-500-rgb));
+        --tabstrip-tab-border-radius: 8px;
+        --tabstrip-tab-active-border-color: rgb(var(--google-blue-500-rgb));
       }
 
       body {

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

@@ -103,6 +103,19 @@ class TabStripUIHandler : public content::WebUIMessageHandler {
                          tp.GetColor(ThemeProperties::COLOR_TAB_TEXT),
                          /* 16% opacity */ 0.16 * 255)));
 
+    colors.SetString("--tabstrip-tab-loading-spinning-color",
+                     color_utils::SkColorToRgbaString(tp.GetColor(
+                         ThemeProperties::COLOR_TAB_THROBBER_SPINNING)));
+    colors.SetString("--tabstrip-indicator-recording-color",
+                     color_utils::SkColorToRgbaString(tp.GetColor(
+                         ThemeProperties::COLOR_TAB_ALERT_RECORDING)));
+    colors.SetString("--tabstrip-indicator-pip-color",
+                     color_utils::SkColorToRgbaString(
+                         tp.GetColor(ThemeProperties::COLOR_TAB_PIP_PLAYING)));
+    colors.SetString("--tabstrip-indicator-capturing-color",
+                     color_utils::SkColorToRgbaString(tp.GetColor(
+                         ThemeProperties::COLOR_TAB_ALERT_CAPTURING)));
+
     ResolveJavascriptCallback(callback_id, colors);
   }