Local NTP: realbox, pass theme colors for selected match

Screenshots https://crbug.com/1054808#c6.

Bug: 1054808
Change-Id: Ib7888e7356fd47d3814302aa48658376e2b2a559
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2095931
Commit-Queue: Esmael Elmoslimany <aee@chromium.org>
Reviewed-by: Moe Ahmadi <mahmadi@chromium.org>
Reviewed-by: Alex Gough <ajgo@chromium.org>
Cr-Commit-Position: refs/heads/master@{#749454}

chrome/browser/resources/local_ntp/externs.js

@@ -330,13 +330,17 @@ window.chrome.embeddedSearch.newTabPage.setBackgroundInfo;
  *   searchBox: (!{
  *     bg: !Array<number>,
  *     icon: !Array<number>,
+ *     iconSelected: !Array<number>,
  *     placeholder: !Array<number>,
  *     resultsBg: !Array<number>,
  *     resultsBgHovered: !Array<number>,
  *     resultsBgSelected: !Array<number>,
  *     resultsDim: !Array<number>,
+ *     resultsDimSelected: !Array<number>,
  *     resultsText: !Array<number>,
+ *     resultsTextSelected: !Array<number>,
  *     resultsUrl: !Array<number>,
+ *     resultsUrlSelected: !Array<number>,
  *     text: !Array<number>,
  *   }|undefined),
  *   textColorLightRgba: !Array<number>,

chrome/browser/resources/local_ntp/local_ntp.css

@@ -335,6 +335,11 @@ body.hide-fakebox #fakebox {
   width: 24px;
 }
 
+#realbox-matches a:-webkit-any(:focus-within, .selected)
+    :-webkit-any(.clock-icon, .search-icon) {
+  background-color: var(--search-box-icon-selected, rgb(117, 117, 117));
+}
+
 .clock-icon {
   -webkit-mask-image: url(icons/clock.svg);
 }
@@ -380,6 +385,7 @@ html[dir=rtl] .image-container {
 
 #realbox-matches a:-webkit-any(:focus-within, .selected) {
   background-color: var(--search-box-results-bg-selected, rgb(219, 219, 220));
+  color: var(--search-box-results-text-selected, rgb(var(--GG900-rgb)));
 }
 
 #realbox-matches .match {
@@ -390,10 +396,18 @@ html[dir=rtl] .image-container {
   color: var(--search-box-results-dim, rgb(var(--GG600-rgb)));
 }
 
+#realbox-matches a:-webkit-any(:focus-within, .selected) .dim {
+  color: var(--search-box-results-dim-selected, rgb(var(--GG600-rgb)));
+}
+
 #realbox-matches .url {
   color: var(--search-box-results-url, rgb(var(--GB600-rgb)));
 }
 
+#realbox-matches  a:-webkit-any(:focus-within, .selected) .url {
+  color: var(--search-box-results-url-selected, rgb(var(--GB600-rgb)));
+}
+
 #realbox-matches .remove-match {
   border-radius: 50%;
   height: 24px;
@@ -409,11 +423,17 @@ html[dir=rtl] .image-container {
 }
 
 #realbox-matches .remove-match:hover {
-  background-color: var(--remove-match-hovered, rgba(var(--GG900-rgb), .08));
+  background-color: var(--remove-match-hovered, rgba(var(--GG900-rgb), .16));
 }
 
-#realbox-matches .remove-match:focus-within {
-  background-color: var(--remove-match-focused, rgba(var(--GG900-rgb), .16));
+#realbox-matches a:-webkit-any(:focus-within, .selected) .remove-match:hover {
+  background-color:
+      var(--remove-match-selected-hovered, rgba(var(--GG900-rgb), .16));
+}
+
+#realbox-matches a:-webkit-any(:focus-within, .selected)
+    .remove-match:focus-within {
+  background-color: var(--remove-match-focused, rgba(var(--GG900-rgb), .32));
 }
 
 #realbox-matches .remove-icon {
@@ -421,14 +441,21 @@ html[dir=rtl] .image-container {
   width: 100%;
 }
 
-#realbox-matches a:-webkit-any(:hover, :focus-within, .selected) .remove-icon {
+#realbox-matches .remove-icon {
   -webkit-mask-image: url(../../../../ui/webui/resources/images/icon_clear.svg);
   -webkit-mask-position: center;
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-size: 16px;
+}
+
+#realbox-matches a:-webkit-any(:hover) .remove-icon {
   background-color: var(--search-box-icon, rgb(var(--GG900-rgb)));
 }
 
+#realbox-matches a:-webkit-any(:focus-within, .selected) .remove-icon {
+  background-color: var(--search-box-icon-selected, rgb(var(--GG900-rgb)));
+}
+
 #fakebox > input {
   bottom: 0;
   box-sizing: border-box;

chrome/browser/resources/local_ntp/local_ntp.js

@@ -1951,10 +1951,14 @@ function renderTheme() {
   if (configData.realboxMatchOmniboxTheme) {
     // TODO(dbeam): actually get these from theme service.
     const removeMatchHovered = assert(theme.searchBox.icon).slice();
-    removeMatchHovered[3] = .08 * 255;
+    removeMatchHovered[3] = .16 * 255;
 
-    const removeMatchFocused = theme.searchBox.icon.slice();
-    removeMatchFocused[3] = .16 * 255;
+    const removeMatchSelectedHovered =
+        assert(theme.searchBox.iconSelected).slice();
+    removeMatchSelectedHovered[3] = .16 * 255;
+
+    const removeMatchFocused = theme.searchBox.iconSelected.slice();
+    removeMatchFocused[3] = .32 * 255;
 
     /**
      * @param {string} varName
@@ -1967,6 +1971,7 @@ function renderTheme() {
 
     setCssVar('search-box-bg', theme.searchBox.bg);
     setCssVar('search-box-icon', theme.searchBox.icon);
+    setCssVar('search-box-icon-selected', theme.searchBox.iconSelected);
     setCssVar('search-box-placeholder', theme.searchBox.placeholder);
     setCssVar('search-box-results-bg', theme.searchBox.resultsBg);
     setCssVar(
@@ -1974,10 +1979,18 @@ function renderTheme() {
     setCssVar(
         'search-box-results-bg-selected', theme.searchBox.resultsBgSelected);
     setCssVar('search-box-results-dim', theme.searchBox.resultsDim);
+    setCssVar(
+        'search-box-results-dim-selected', theme.searchBox.resultsDimSelected);
     setCssVar('search-box-results-text', theme.searchBox.resultsText);
+    setCssVar(
+        'search-box-results-text-selected',
+        theme.searchBox.resultsTextSelected);
     setCssVar('search-box-results-url', theme.searchBox.resultsUrl);
+    setCssVar(
+        'search-box-results-url-selected', theme.searchBox.resultsUrlSelected);
     setCssVar('search-box-text', theme.searchBox.text);
     setCssVar('remove-match-hovered', removeMatchHovered);
+    setCssVar('remove-match-selected-hovered', removeMatchSelectedHovered);
     setCssVar('remove-match-focused', removeMatchFocused);
   }
 }

chrome/browser/search/instant_service.cc

@@ -685,6 +685,8 @@ void InstantService::BuildNtpTheme() {
         GetOmniboxColor(&theme_provider, OmniboxPart::LOCATION_BAR_BACKGROUND);
     theme_->search_box.icon =
         GetOmniboxColor(&theme_provider, OmniboxPart::RESULTS_ICON);
+    theme_->search_box.icon_selected = GetOmniboxColor(
+        &theme_provider, OmniboxPart::RESULTS_ICON, OmniboxPartState::SELECTED);
     theme_->search_box.placeholder =
         GetOmniboxColor(&theme_provider, OmniboxPart::LOCATION_BAR_TEXT_DIMMED);
     theme_->search_box.results_bg =
@@ -697,10 +699,19 @@ void InstantService::BuildNtpTheme() {
                         OmniboxPartState::SELECTED);
     theme_->search_box.results_dim =
         GetOmniboxColor(&theme_provider, OmniboxPart::RESULTS_TEXT_DIMMED);
+    theme_->search_box.results_dim_selected =
+        GetOmniboxColor(&theme_provider, OmniboxPart::RESULTS_TEXT_DIMMED,
+                        OmniboxPartState::SELECTED);
     theme_->search_box.results_text =
         GetOmniboxColor(&theme_provider, OmniboxPart::RESULTS_TEXT_DEFAULT);
+    theme_->search_box.results_text_selected =
+        GetOmniboxColor(&theme_provider, OmniboxPart::RESULTS_TEXT_DEFAULT,
+                        OmniboxPartState::SELECTED);
     theme_->search_box.results_url =
         GetOmniboxColor(&theme_provider, OmniboxPart::RESULTS_TEXT_URL);
+    theme_->search_box.results_url_selected =
+        GetOmniboxColor(&theme_provider, OmniboxPart::RESULTS_TEXT_URL,
+                        OmniboxPartState::SELECTED);
     theme_->search_box.text = GetOmniboxColor(
         &theme_provider, OmniboxPart::LOCATION_BAR_TEXT_DEFAULT);
   }

chrome/common/instant_mojom_traits.h

@@ -65,13 +65,17 @@ IPC_STRUCT_TRAITS_END()
 IPC_STRUCT_TRAITS_BEGIN(SearchBoxTheme)
   IPC_STRUCT_TRAITS_MEMBER(bg)
   IPC_STRUCT_TRAITS_MEMBER(icon)
+  IPC_STRUCT_TRAITS_MEMBER(icon_selected)
   IPC_STRUCT_TRAITS_MEMBER(placeholder)
   IPC_STRUCT_TRAITS_MEMBER(results_bg)
   IPC_STRUCT_TRAITS_MEMBER(results_bg_hovered)
   IPC_STRUCT_TRAITS_MEMBER(results_bg_selected)
   IPC_STRUCT_TRAITS_MEMBER(results_dim)
+  IPC_STRUCT_TRAITS_MEMBER(results_dim_selected)
   IPC_STRUCT_TRAITS_MEMBER(results_text)
+  IPC_STRUCT_TRAITS_MEMBER(results_text_selected)
   IPC_STRUCT_TRAITS_MEMBER(results_url)
+  IPC_STRUCT_TRAITS_MEMBER(results_url_selected)
   IPC_STRUCT_TRAITS_MEMBER(text)
 IPC_STRUCT_TRAITS_END()
 

chrome/common/search/instant_types.cc

@@ -11,12 +11,17 @@ SearchBoxTheme::SearchBoxTheme(const SearchBoxTheme& other) = default;
 SearchBoxTheme::~SearchBoxTheme() = default;
 
 bool SearchBoxTheme::operator==(const SearchBoxTheme& rhs) const {
-  return bg == rhs.bg && icon == rhs.icon && placeholder == rhs.placeholder &&
+  return bg == rhs.bg && icon == rhs.icon &&
+         icon_selected == rhs.icon_selected && placeholder == rhs.placeholder &&
          results_bg == rhs.results_bg &&
          results_bg_hovered == rhs.results_bg_hovered &&
          results_bg_selected == rhs.results_bg_selected &&
-         results_dim == rhs.results_dim && results_text == rhs.results_text &&
-         results_url == rhs.results_url && text == rhs.text;
+         results_dim == rhs.results_dim &&
+         results_dim_selected == rhs.results_dim_selected &&
+         results_text == rhs.results_text &&
+         results_text_selected == rhs.results_text_selected &&
+         results_url == rhs.results_url &&
+         results_url_selected == rhs.results_url_selected && text == rhs.text;
 }
 
 NtpTheme::NtpTheme() = default;

chrome/common/search/instant_types.h

@@ -53,13 +53,17 @@ struct SearchBoxTheme {
 
   SkColor bg = gfx::kPlaceholderColor;
   SkColor icon = gfx::kPlaceholderColor;
+  SkColor icon_selected = gfx::kPlaceholderColor;
   SkColor placeholder = gfx::kPlaceholderColor;
   SkColor results_bg = gfx::kPlaceholderColor;
   SkColor results_bg_hovered = gfx::kPlaceholderColor;
   SkColor results_bg_selected = gfx::kPlaceholderColor;
   SkColor results_dim = gfx::kPlaceholderColor;
+  SkColor results_dim_selected = gfx::kPlaceholderColor;
   SkColor results_text = gfx::kPlaceholderColor;
+  SkColor results_text_selected = gfx::kPlaceholderColor;
   SkColor results_url = gfx::kPlaceholderColor;
+  SkColor results_url_selected = gfx::kPlaceholderColor;
   SkColor text = gfx::kPlaceholderColor;
 };
 

chrome/renderer/searchbox/searchbox_extension.cc

@@ -377,6 +377,8 @@ v8::Local<v8::Object> GenerateNtpTheme(v8::Isolate* isolate,
   gin::DataObjectBuilder search_box(isolate);
   search_box.Set("bg", SkColorToArray(isolate, theme.search_box.bg));
   search_box.Set("icon", SkColorToArray(isolate, theme.search_box.icon));
+  search_box.Set("iconSelected",
+                 SkColorToArray(isolate, theme.search_box.icon_selected));
   search_box.Set("placeholder",
                  SkColorToArray(isolate, theme.search_box.placeholder));
   search_box.Set("resultsBg",
@@ -387,10 +389,19 @@ v8::Local<v8::Object> GenerateNtpTheme(v8::Isolate* isolate,
                  SkColorToArray(isolate, theme.search_box.results_bg_selected));
   search_box.Set("resultsDim",
                  SkColorToArray(isolate, theme.search_box.results_dim));
+  search_box.Set(
+      "resultsDimSelected",
+      SkColorToArray(isolate, theme.search_box.results_dim_selected));
   search_box.Set("resultsText",
                  SkColorToArray(isolate, theme.search_box.results_text));
+  search_box.Set(
+      "resultsTextSelected",
+      SkColorToArray(isolate, theme.search_box.results_text_selected));
   search_box.Set("resultsUrl",
                  SkColorToArray(isolate, theme.search_box.results_url));
+  search_box.Set(
+      "resultsUrlSelected",
+      SkColorToArray(isolate, theme.search_box.results_url_selected));
   search_box.Set("text", SkColorToArray(isolate, theme.search_box.text));
   builder.Set("searchBox", search_box.Build());