[signin] Signin interception bubble: pass colors from native

This CL passes the profile color and the text color from native (C++)
to WebUI.
The text color is computed to have good contrast with the background.

Light color and light mode:
https://drive.google.com/file/d/1A1tdffEMp2I0zwk2fofD59_GCSY59s67/view?usp=sharing

Light color and dark mode:
https://drive.google.com/file/d/1FCTLApc_z5JT1tSC2yzKilSBZyzIUpbP/view?usp=sharing

Dark color and light mode:
https://drive.google.com/file/d/1HeH2iFhUdRMXFX6yUJOcHX68u5JfGmpF/view?usp=sharing

Dark color and dark mode:
https://drive.google.com/file/d/1ZYHFAcHIsU1Qa96aMsT0nalZR3an9Yjm/view?usp=sharing

Bug: 1076880
Change-Id: I4ee51b8f1d178e57d3e6375b75affa72ae8e5582
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2324422
Commit-Queue: David Roger <droger@chromium.org>
Reviewed-by: Monica Basta <msalama@chromium.org>
Cr-Commit-Position: refs/heads/master@{#792670}

chrome/browser/resources/signin/dice_web_signin_intercept/BUILD.gn

@@ -18,6 +18,7 @@ js_library("dice_web_signin_intercept_app") {
     ":dice_web_signin_intercept_browser_proxy",
     "//third_party/polymer/v3_0/components-chromium/iron-icon",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:load_time_data.m",
     "//ui/webui/resources/js:web_ui_listener_behavior.m",
   ]
 }

chrome/browser/resources/signin/dice_web_signin_intercept/dice_web_signin_intercept_app.html

@@ -8,11 +8,6 @@
 
   #header {
     --avatar-position: 84px;
-    /**
-     * TODO(crbug.com/1076880): replace the hardcoded background color with the
-     * browser-provided one.
-     */
-    background-color: rgb(206, 234, 214);
     border-radius: 8px;
     margin: 8px;
     min-height: 128px;
@@ -81,7 +76,7 @@
   }
 </style>
 
-<div id="header">
+<div id="header" style$="[[headerStyle_]]">
   <div id="accountName">[[accountInfo_.name]]</div>
   <div class="avatar" id="workBadge">
     <iron-icon class="icon" icon="signin:work"></iron-icon>

chrome/browser/resources/signin/dice_web_signin_intercept/dice_web_signin_intercept_app.js

@@ -9,6 +9,7 @@ import './signin_shared_css.js';
 import './signin_vars_css.js';
 import './strings.m.js';
 
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {WebUIListenerBehavior} from 'chrome://resources/js/web_ui_listener_behavior.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
@@ -26,6 +27,15 @@ Polymer({
   properties: {
     /** @private {AccountInfo} */
     accountInfo_: Object,
+    /** @private */
+    headerStyle_: {
+      type: String,
+      value() {
+        return 'background-color: ' +
+            loadTimeData.getString('headerBackgroundColor') +
+            '; color: ' + loadTimeData.getString('headerTextColor');
+      },
+    },
   },
 
   /** @private {?DiceWebSigninInterceptBrowserProxy} */

chrome/browser/ui/webui/signin/dice_web_signin_intercept_ui.cc

@@ -15,7 +15,9 @@
 #include "content/public/browser/web_ui.h"
 #include "content/public/browser/web_ui_data_source.h"
 #include "services/network/public/mojom/content_security_policy.mojom.h"
+#include "third_party/skia/include/core/SkColor.h"
 #include "ui/base/webui/web_ui_util.h"
+#include "ui/gfx/color_utils.h"
 #include "ui/resources/grit/webui_resources.h"
 
 DiceWebSigninInterceptUI::DiceWebSigninInterceptUI(content::WebUI* web_ui)
@@ -31,6 +33,15 @@ DiceWebSigninInterceptUI::DiceWebSigninInterceptUI(content::WebUI* web_ui)
   source->AddResourcePath("signin_shared_css.js", IDR_SIGNIN_SHARED_CSS_JS);
   source->AddResourcePath("signin_vars_css.js", IDR_SIGNIN_VARS_CSS_JS);
 
+  // TODO(droger): Use the color from the profile.
+  SkColor header_background_color = SkColorSetRGB(206, 234, 214);
+  SkColor header_text_color =
+      color_utils::GetColorWithMaxContrast(header_background_color);
+  source->AddString("headerBackgroundColor",
+                    color_utils::SkColorToRgbaString(header_background_color));
+  source->AddString("headerTextColor",
+                    color_utils::SkColorToRgbaString(header_text_color));
+
   // Localized strings.
   source->UseStringsJs();
   source->EnableReplaceI18nInJS();