Local NTP, Realbox: more UI polish

* restore search magnifying glass (aka loupe) as default icon @ 20px
* add 8px of bottom margin below last realbox result
* add feature to experiment with Google (g) icon ("super g")

R=mahmadi@chromium.org

Bug: 1017495
Change-Id: I4db697dcf66d20ab2509ccbec35317f80919c10c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1884951
Commit-Queue: Dan Beam <dbeam@chromium.org>
Reviewed-by: Moe Ahmadi <mahmadi@chromium.org>
Cr-Commit-Position: refs/heads/master@{#710626}

chrome/browser/resources/local_ntp/local_ntp.css

@@ -259,6 +259,10 @@ body.hide-fakebox #fakebox {
   padding-inline-end: 48px;
 }
 
+#realbox-matches a:last-of-type {
+  margin-bottom: 8px;  /* Last result is tight with border-radius. */
+}
+
 .clock-icon,
 .search-icon {
   -webkit-mask-position: center;
@@ -281,6 +285,10 @@ body.hide-fakebox #fakebox {
       url(../../../../ui/webui/resources/images/icon_search.svg);
 }
 
+#realbox-input-wrapper > .search-icon {
+  -webkit-mask-size: 20px;  /* Loupe in realbox is bigger than in matches. */
+}
+
 html[dir=rtl] :-webkit-any(.clock-icon, .search-icon) {
   right: 16px;
 }
@@ -425,7 +433,8 @@ html[dir=rtl] .microphone-icon {
   right: auto;
 }
 
-#realbox-input-wrapper :-webkit-any(.google-g-icon, .microphone-icon) {
+#realbox-input-wrapper > :-webkit-any(.google-g-icon, .microphone-icon,
+                                      .search-icon) {
   z-index: 3;
 }
 

chrome/browser/resources/local_ntp/local_ntp.html

@@ -78,7 +78,7 @@
 
     <div id="realbox-container" $i18n{hiddenIfRealboxDisabled}>
       <div id="realbox-input-wrapper">
-        <div class="google-g-icon"></div>
+        <div class="$i18n{realboxIconClass}"></div>
         <input id="realbox" type="search" autocomplete="off" spellcheck="false"
             aria-live="polite" autofocus>
         <button id="realbox-microphone" class="microphone-icon" hidden></button>

chrome/browser/search/local_ntp_source.cc

@@ -1036,6 +1036,11 @@ void LocalNtpSource::StartDataRequest(
     replacements["hiddenIfRealboxEnabled"] = realbox_enabled ? "hidden" : "";
     replacements["hiddenIfRealboxDisabled"] = realbox_enabled ? "" : "hidden";
 
+    bool use_google_g_icon =
+        base::FeatureList::IsEnabled(features::kNtpRealboxUseGoogleGIcon);
+    replacements["realboxIconClass"] =
+        use_google_g_icon ? "google-g-icon" : "search-icon";
+
     ui::ResourceBundle& bundle = ui::ResourceBundle::GetSharedInstance();
     base::StringPiece html = bundle.GetRawDataResource(IDR_LOCAL_NTP_HTML);
     std::string replaced = ui::ReplaceTemplateExpressions(html, replacements);

chrome/browser/search/ntp_features.cc

@@ -34,6 +34,11 @@ const base::Feature kDismissNtpPromos{"DismissNtpPromos",
 const base::Feature kNtpCustomizationMenuV2{"NtpCustomizationMenuV2",
                                             base::FEATURE_DISABLED_BY_DEFAULT};
 
+// If enabled, the real search box ("realbox") on the New Tab page will show a
+// Google (g) icon instead of the typical magnifying glass (aka loupe).
+const base::Feature kNtpRealboxUseGoogleGIcon{
+    "NtpRealboxUseGoogleGIcon", base::FEATURE_DISABLED_BY_DEFAULT};
+
 // If enabled, the search box in the middle of the NTP will accept input
 // directly (i.e. not be a "fake" box) and search results will show directly
 // below the non-fake input ("realbox").

chrome/browser/search/ntp_features.h

@@ -17,6 +17,7 @@ extern const base::Feature kChromeColorsCustomColorPicker;
 extern const base::Feature kConfirmNtpSuggestionRemovals;
 extern const base::Feature kDismissNtpPromos;
 extern const base::Feature kNtpCustomizationMenuV2;
+extern const base::Feature kNtpRealboxUseGoogleGIcon;
 
 // Note: only exposed for about:flags. Use IsNtpRealboxEnabled() instead.
 extern const base::Feature kNtpRealbox;