[NTP] Remove custom link pills for themes without image.

Remove custom link pills for themes without image and use NTP_TEXT
theme property for custom link titles color.

As pills will be used only with themes that have images, which in
dark mode didn't change to dark, then this change eliminates the need
for dark pill for custom link titles.

Default:
https://screenshot.googleplex.com/iNq8NShsd9a.png

Defaul, dark mode:
https://screenshot.googleplex.com/ebiCRAxdqth.png

GTK:
https://screenshot.googleplex.com/LqMk30Zf91r.png

theme, no image:
https://screenshot.googleplex.com/NA8jugTz7xy.png

theme, no image, dark mode:
https://screenshot.googleplex.com/qFyj5R6Y40S.png

theme with image
https://screenshot.googleplex.com/7fHXFUjGF6q.png

theme with image, dark mode:
https://screenshot.googleplex.com/fHVRb9yAzcj.png

theme and custom background:
https://screenshot.googleplex.com/uahXOYpPdzx.png

theme and custom background, dark mode:
https://screenshot.googleplex.com/J5w8UaV3sTJ.png

Bug: 959377
Change-Id: I4b5e10c4392f57cdb9b1471c3ea49802cfc902ce
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1597639
Commit-Queue: Gayane Petrosyan <gayane@chromium.org>
Reviewed-by: Kristi Park <kristipark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#659156}

chrome/browser/resources/local_ntp/local_ntp.js

@@ -59,8 +59,8 @@ function disableIframesAndVoiceSearchForTesting() {
  */
 const NTP_DESIGN = {
   numTitleLines: 1,
-  titleColor: [50, 50, 50, 255],
-  titleColorAgainstDark: [210, 210, 210, 255],
+  titleColor: [60, 64, 67, 255],               /** GG800 */
+  titleColorAgainstDark: [248, 249, 250, 255], /** GG050 */
 };
 
 
@@ -481,7 +481,8 @@ function sendThemeInfoToMostVisitedIframe() {
 
   const message = {cmd: 'updateTheme'};
   message.isThemeDark = info.isNtpBackgroundDark;
-  message.isUsingTheme = !info.usingDefaultTheme;
+  message.customBackground = info.customBackgroundConfigured;
+  message.useTitleContainer = info.useTitleContainer;
   message.isDarkMode = getUseDarkChips(info);
 
   let titleColor = NTP_DESIGN.titleColor;

chrome/browser/resources/local_ntp/most_visited_single.css

@@ -25,7 +25,7 @@ html {
   --md-title-max-height: 28px;
 
   /* May be overridden by themes (on the body element). */
-  --tile-title-color: #323232;
+  --tile-title-color: rgb(var(--GG800-rgb));
 }
 
 body {
@@ -255,7 +255,7 @@ html[darkmode=true] .md-add-icon {
 }
 
 .md-title {
-  color: rgb(var(--GG800-rgb));
+  color: rgb(var(--tile-title-color));
   font-size: var(--md-title-font-size);
   font-weight: 500;
   max-height: var(--md-title-max-height);
@@ -276,42 +276,24 @@ body.mac-chromeos .md-title {
   font-weight: 400;
 }
 
-/* Apply when Chrome is in dark mode. */
-html[darkmode=true] .md-title {
-  color: rgb(var(--GG200-rgb));
-}
-
 /* Apply when a custom background is set. */
-body.dark-theme .md-tile-container:not(.reorder) .md-title {
-  color: rgb(var(--GG050-rgb));
+body.custom-background .md-tile-container:not(.reorder) .md-title {
   filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.35));
 }
 
-/* Apply only when a theme is installed. */
-body.using-theme .md-title-container {
+/* Apply only when a theme with image is installed. */
+body.use-title-container .md-title-container {
   background-color: white;
   /* Necessary for a "pill" shape. Using 50% creates an oval. */
   border-radius: 500px;
   padding: 0 8px;
 }
 
-html[darkmode=true] body.using-theme .md-title-container {
-  background-color: rgb(var(--GG900-rgb));
-}
-
-html[darkmode=true] body.using-theme .md-tile-container.reorder .md-title-container {
-  background-color: rgb(var(--dark-mode-bg-rgb));
-}
-
-body.using-theme .md-tile-container:not(.reorder) .md-title {
+body.use-title-container .md-tile-container:not(.reorder) .md-title {
   color: rgb(var(--GG800-rgb));
   filter: unset;
 }
 
-html[darkmode=true] body.using-theme .md-tile-container:not(.reorder) .md-title {
-  color: rgb(var(--GG200-rgb));
-}
-
 .md-menu {
   background-color: transparent;
   border: none;

chrome/browser/resources/local_ntp/most_visited_single.js

@@ -808,13 +808,14 @@ function showTiles(info) {
 function updateTheme(info) {
   document.body.style.setProperty('--tile-title-color', info.tileTitleColor);
   document.body.classList.toggle('dark-theme', info.isThemeDark);
-  document.body.classList.toggle('using-theme', info.isUsingTheme);
+  document.body.classList.toggle('use-title-container', info.useTitleContainer);
+  document.body.classList.toggle('custom-background', info.customBackground);
   document.documentElement.setAttribute('darkmode', info.isDarkMode);
 
   // Reduce font weight on the default(white) background for Mac and CrOS.
   document.body.classList.toggle(
       CLASSES.MAC_CHROMEOS,
-      !info.isThemeDark && !info.isUsingTheme &&
+      !info.isThemeDark && !info.useTitleContainer &&
           (navigator.userAgent.indexOf('Mac') > -1 ||
            navigator.userAgent.indexOf('CrOS') > -1));
 }

chrome/renderer/searchbox/searchbox_extension.cc

@@ -199,11 +199,15 @@ base::Optional<int> CoerceToInt(v8::Isolate* isolate, v8::Value* value) {
   return maybe_int.ToLocalChecked()->Value();
 }
 
+// TODO(gayane): Consider removing RGBAColor struct and replacing it with
+// SkColor.
 // Converts RGBAColor to SkColor.
 SkColor RGBAColorToSkColor(const RGBAColor& color) {
   return SkColorSetARGB(color.a, color.r, color.g, color.b);
 }
 
+// TODO(gayane): Consider moving any non-trivial logic up to |InstantService|
+// and do only mapping here.
 v8::Local<v8::Object> GenerateThemeBackgroundInfo(
     v8::Isolate* isolate,
     const ThemeBackgroundInfo& theme_info) {
@@ -308,7 +312,7 @@ v8::Local<v8::Object> GenerateThemeBackgroundInfo(
   // If a custom background has been set provide the relevant information to the
   // page.
   if (!theme_info.custom_background_url.is_empty()) {
-    ntp_text = RGBAColor{255, 255, 255, 255};
+    ntp_text = RGBAColor{248, 249, 250, 255};  // GG050
     builder.Set("alternateLogo", true);
     builder.Set("customBackgroundConfigured", true);
     builder.Set("imageUrl", theme_info.custom_background_url.spec());
@@ -327,8 +331,11 @@ v8::Local<v8::Object> GenerateThemeBackgroundInfo(
   // Value is always valid.
   builder.Set("textColorRgba", internal::RGBAColorToArray(isolate, ntp_text));
 
+  // Generate fields for themeing NTP elements.
   builder.Set("isNtpBackgroundDark",
               internal::IsNtpBackgroundDark(RGBAColorToSkColor(ntp_text)));
+  builder.Set("useTitleContainer",
+              crx_file::id_util::IdIsValid(theme_info.theme_id));
 
   return builder.Build();
 }