Additional dark mode security interstitials implementation

- Billing
- Look alike URLs
- Supervised users

Screenshots can be see in:
https://bugs.chromium.org/p/chromium/issues/detail?id=947840#c29

Bug: 947840,978833
Change-Id: I02ee5364bbf5747158090568b6959caead36265a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1676130Reviewed-by: Carlos IL <carlosil@chromium.org>
Reviewed-by: Marc Treib <treib@chromium.org>
Commit-Queue: Edward Jung (EMEA) <edwardjung@chromium.org>
Cr-Commit-Position: refs/heads/master@{#672690}

chrome/browser/lookalikes/lookalike_url_interstitial_page.cc

@@ -84,6 +84,8 @@ void LookalikeUrlInterstitialPage::PopulateInterstitialStrings(
   CHECK(load_time_data);
 
   PopulateStringsForSharedHTML(load_time_data);
+  security_interstitials::common_string_util::PopulateDarkModeDisplaySetting(
+      load_time_data);
 
   load_time_data->SetString(
       "tabTitle",

components/security_interstitials/core/common/resources/interstitial_core.css

@@ -67,6 +67,7 @@ html {
   body.captive-portal,
   body.dark-mode-available,
   body.neterror,
+  body.supervised-user-block,
   .offline body {
     --background-color: var(--google-gray-900);
     --error-code-color: var(--google-gray-500);

components/security_interstitials/core/safe_browsing_loud_error_ui.cc

@@ -309,6 +309,8 @@ void SafeBrowsingLoudErrorUI::PopulateExtendedReportingOption(
 
 void SafeBrowsingLoudErrorUI::PopulateBillingLoadTimeData(
     base::DictionaryValue* load_time_data) {
+  common_string_util::PopulateDarkModeDisplaySetting(load_time_data);
+
   load_time_data->SetBoolean("phishing", false);
   load_time_data->SetBoolean("overridable", true);
 

components/supervised_user_error_page/resources/supervised_user_block_interstitial.css

@@ -3,40 +3,34 @@
    found in the LICENSE file. */
 
 body {
-  background-color: #f7f7f7;
-  color: #646464;
-}
-
-a {
-  color: #585858;
+  --avatar-stroke-color: var(--google-gray-50);
+  --custodian-name-color: #202124;
+  --custodian-email-color: #5f6368;
+  background-color: var(--quiet-background-color);
+  color: var(--text-color);
 }
 
 button {
-  background: #1A73E8;
+  background: var(--primary-button-fill-color);
   border: 0;
-  border-radius: 2px;
+  border-radius: 4px;
   box-sizing: border-box;
-  color: #ffffff;
+  color: var(--primary-button-text-color);
   cursor: pointer;
   font-family: 'Google Sans', Roboto, sans-serif;
   font-size: 14px;
-  font-weight: 550;
   line-height: 16pt;
   margin: 0;
-  padding: 7px 24px;
+  padding: 8px 16px;
   transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
   user-select: none;
 }
 
 button:active {
-  background: rgb(50, 102, 213);
+  background: var(--primary-button-fill-color-active)
   outline: 0;
 }
 
-button:hover {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, .50);
-}
-
 [dir='rtl'] button {
   float: left;
 }
@@ -67,21 +61,22 @@ button:hover {
 }
 
 .details-button {
-  background: inherit;
-  border: 0;
+  background: var(--secondary-button-fill-color);
+  border: 1px solid var(--secondary-button-border-color);
+  color: var(--secondary-button-text-color);
   float: none;
   margin: 0;
-  padding: 10px 0;
-  text-transform: uppercase;
+  padding: 8px 16px;
 }
 
 .details-button:hover {
-  box-shadow: inherit;
-  text-decoration: underline;
+  background: var(--secondary-button-hover-fill-color);
+  border-color: var(--secondary-button-hover-border-color);
+  text-decoration: none;
 }
 
 h1 {
-  color: #333;
+  color: var(--heading-color);
   font-size: 1.6em;
   font-weight: normal;
   line-height: 1.25em;
@@ -110,7 +105,7 @@ html {
 
 /* "Ask your Parent" title */
 .main-frame-blocked h1 {
-  color: #202124;
+  color: var(--heading-color);
   font-family: 'Google Sans', Roboto, sans-serif;
   font-size: 24px;
   font-weight: normal;
@@ -119,7 +114,7 @@ html {
 
 /* "You need permission..." message */
 .main-frame-blocked p {
-  color: #3c4043;
+  color: var(--text-color);
   font-family: Roboto;
   font-size: 16px;
   font-weight: normal;
@@ -141,14 +136,14 @@ html {
 }
 
 .small-link {
-  color: rgba(66, 133, 244, 100);
+  color: var(--small-link-color);
   font-family: Roboto;
   font-size: 15px;
   font-weight: 500;
 }
 
 .avatar-img {
-  border: 3px solid rgb(251, 251, 251);
+  border: 3px solid var(--avatar-stroke-color);
   border-radius: 50%;
   content: -webkit-image-set(
       url(default_100_percent/logo_avatar_circle_blue_color.png) 1x,
@@ -176,13 +171,13 @@ html {
 }
 
 .custodian-name {
-  color: #202124;
+  color: var(--custodian-name-color);
   font-size: 16px;
   line-height: 24px;
 }
 
 .custodian-email {
-  color: #5f6368;
+  color: var(--custodian-email-color);
   font-size: 14px;
   line-height: 20px;
 }
@@ -259,9 +254,9 @@ html {
        (min-width: 421px) and (max-width: 736px) and (min-height: 240px) and
        (max-height: 420px) and (orientation:landscape) {
   body .button-container {
-    background: #f7f7f7;
+    background: var(--background-color);
     bottom: 0;
-    box-shadow: 0 -22px 40px rgb(247, 247, 247);
+    box-shadow: 0 -22px 40px var(--background-color);
     left: 0;
     margin: 0;
     max-width: 736px;
@@ -531,3 +526,11 @@ html {
     padding-right: 0;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  body.supervised-user-block {
+    --avatar-stroke-color: var(--google-blue-100);
+    --custodian-name-color: var(--google-gray-500);
+    --custodian-email-color: var(--google-gray-500);
+  }
+}

components/supervised_user_error_page/resources/supervised_user_block_interstitial.html

@@ -6,12 +6,13 @@
     content="initial-scale=1, minimum-scale=1, width=device-width">
 <title>$i18n{blockPageTitle}</title>
 <link href="https://fonts.googleapis.com/css?family=Google+Sans" rel="stylesheet">
+<link rel="stylesheet" href="../../security_interstitials/core/common/resources/interstitial_core.css">
 <link rel="stylesheet" href="supervised_user_block_interstitial.css">
 <script src="../../../ui/webui/resources/js/cr.js"></script>
 <script src="../../../ui/webui/resources/js/util.js"></script>
 <script src="supervised_user_block_interstitial.js"></script>
 </head>
-<body>
+<body class="supervised-user-block">
 <div class="main-frame-blocked">
   <div id="information-container">
     <div class="icon" id="icon"></div>