[WebUI][NTP] Adds the remaining realbox resources

Bug: 1041129
Change-Id: I2536d27d869d0fe98b5b3f474f152ad9947cd065
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2162085Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Commit-Queue: Moe Ahmadi <mahmadi@chromium.org>
Cr-Commit-Position: refs/heads/master@{#762121}

chrome/browser/resources/local_ntp/local_ntp.css

@@ -231,11 +231,11 @@ body.hide-fakebox #fakebox {
   right: 16px;
 }
 
-#realbox-icon[data-icon='google_g'] {
+#realbox-icon[data-icon='google_g.png'] {
   background-size: 12px;
 }
 
-#realbox-icon[data-icon='search'] {
+#realbox-icon[data-icon='search.svg'] {
   -webkit-mask-size: 20px;  /* Loupe in realbox is bigger than in matches. */
 }
 

chrome/browser/resources/new_tab_page/realbox.html

@@ -80,11 +80,17 @@
     right: 16px;
   }
 
-  #realboxIcon[data-icon='search'] {
-    -webkit-mask-image: url(chrome://resources/images/icon_search.svg);
+  #realboxIcon[data-icon='search.svg'] {
+    -webkit-mask-image: url(search.svg);
     -webkit-mask-size: 20px; /* "Search" icon is larger than the other icons. */
   }
 
+  #realboxIcon[data-icon='google_g.png'] {
+    background-color: transparent;
+    background-image: url(google_g.png);
+    background-size: 12px;
+  }
+
   #voiceSearchButton {
     background-size: 21px;
     background: url(icons/googlemic_clr_24px.svg) no-repeat center;
@@ -108,7 +114,7 @@
   }
 </style>
 <div id="realboxInputWrapper">
-  <div id="realboxIcon" data-icon="search"></div>
+  <div id="realboxIcon" data-icon$="[[realboxIcon_]]"></div>
   <input type="search" autocomplete="off" spellcheck="false"
       aria-live="polite" placeholder="$i18n{searchBoxHint}">
   </input>

chrome/browser/resources/new_tab_page/realbox.js

@@ -27,6 +27,11 @@ class RealboxElement extends PolymerElement {
         type: Object,
         observer: 'onThemeChange_',
       },
+
+      realboxIcon_: {
+        type: String,
+        value: () => loadTimeData.getString('realboxDefaultIcon')
+      }
     };
   }
 

chrome/browser/ui/search/omnibox_mojo_utils.cc

@@ -38,22 +38,22 @@ CreateSuggestionGroupsMap(
 
 }  // namespace
 
-const char kGoogleGIconResourceName[] = "google_g";
-const char kBookmarkIconResourceName[] = "bookmark";
-const char kCalculatorIconResourceName[] = "calculator";
-const char kClockIconResourceName[] = "clock";
-const char kDriveDocsIconResourceName[] = "drive_docs";
-const char kDriveFolderIconResourceName[] = "drive_folder";
-const char kDriveFormIconResourceName[] = "drive_form";
-const char kDriveImageIconResourceName[] = "drive_image";
-const char kDriveLogoIconResourceName[] = "drive_logo";
-const char kDrivePdfIconResourceName[] = "drive_pdf";
-const char kDriveSheetsIconResourceName[] = "drive_sheets";
-const char kDriveSlidesIconResourceName[] = "drive_slides";
-const char kDriveVideoIconResourceName[] = "drive_video";
-const char kExtensionAppIconResourceName[] = "extension_app";
-const char kPageIconResourceName[] = "page";
-const char kSearchIconResourceName[] = "search";
+const char kGoogleGIconResourceName[] = "google_g.png";
+const char kBookmarkIconResourceName[] = "bookmark.svg";
+const char kCalculatorIconResourceName[] = "calculator.svg";
+const char kClockIconResourceName[] = "clock.svg";
+const char kDriveDocsIconResourceName[] = "drive_docs.svg";
+const char kDriveFolderIconResourceName[] = "drive_folder.svg";
+const char kDriveFormIconResourceName[] = "drive_form.svg";
+const char kDriveImageIconResourceName[] = "drive_image.svg";
+const char kDriveLogoIconResourceName[] = "drive_logo.svg";
+const char kDrivePdfIconResourceName[] = "drive_pdf.svg";
+const char kDriveSheetsIconResourceName[] = "drive_sheets.svg";
+const char kDriveSlidesIconResourceName[] = "drive_slides.svg";
+const char kDriveVideoIconResourceName[] = "drive_video.svg";
+const char kExtensionAppIconResourceName[] = "extension_app.svg";
+const char kPageIconResourceName[] = "page.svg";
+const char kSearchIconResourceName[] = "search.svg";
 
 std::string AutocompleteMatchVectorIconToResourceName(
     const gfx::VectorIcon& icon) {

chrome/browser/ui/webui/new_tab_page/new_tab_page_ui.cc

@@ -12,11 +12,13 @@
 #include "chrome/browser/search/instant_service_factory.h"
 #include "chrome/browser/search/ntp_features.h"
 #include "chrome/browser/search_engines/template_url_service_factory.h"
+#include "chrome/browser/ui/search/omnibox_mojo_utils.h"
 #include "chrome/browser/ui/webui/favicon_source.h"
 #include "chrome/browser/ui/webui/new_tab_page/new_tab_page_handler.h"
 #include "chrome/browser/ui/webui/new_tab_page/untrusted_source.h"
 #include "chrome/browser/ui/webui/webui_util.h"
 #include "chrome/common/url_constants.h"
+#include "chrome/grit/browser_resources.h"
 #include "chrome/grit/generated_resources.h"
 #include "chrome/grit/new_tab_page_resources.h"
 #include "chrome/grit/new_tab_page_resources_map.h"
@@ -27,6 +29,7 @@
 #include "ui/base/accelerators/accelerator.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/webui/web_ui_util.h"
+#include "ui/resources/grit/webui_resources.h"
 
 using content::BrowserContext;
 using content::WebContents;
@@ -52,17 +55,23 @@ content::WebUIDataSource* CreateNewTabPageUiHtmlSource(Profile* profile) {
                              .GoogleBaseURLValue())
                         .spec());
 
+  // Realbox.
   source->AddBoolean("realboxEnabled", ntp_features::IsRealboxEnabled());
   source->AddBoolean(
       "realboxMatchOmniboxTheme",
       base::FeatureList::IsEnabled(ntp_features::kRealboxMatchOmniboxTheme));
+  source->AddString(
+      "realboxDefaultIcon",
+      base::FeatureList::IsEnabled(ntp_features::kRealboxUseGoogleGIcon)
+          ? omnibox::kGoogleGIconResourceName
+          : omnibox::kSearchIconResourceName);
 
   static constexpr webui::LocalizedString kStrings[] = {
       {"doneButton", IDS_DONE},
       {"title", IDS_NEW_TAB_TITLE},
       {"undo", IDS_NEW_TAB_UNDO_THUMBNAIL_REMOVE},
 
-      // Custom Links
+      // Custom Links.
       {"addLinkTitle", IDS_NTP_CUSTOM_LINKS_ADD_SHORTCUT_TITLE},
       {"editLinkTitle", IDS_NTP_CUSTOM_LINKS_EDIT_SHORTCUT},
       {"invalidUrl", IDS_NTP_CUSTOM_LINKS_INVALID_URL},
@@ -119,8 +128,10 @@ content::WebUIDataSource* CreateNewTabPageUiHtmlSource(Profile* profile) {
       {"voiceSearchButtonLabel", IDS_TOOLTIP_MIC_SEARCH},
       {"waiting", IDS_NEW_TAB_VOICE_WAITING},
 
-      // Search box.
+      // Realbox.
       {"searchBoxHint", IDS_GOOGLE_SEARCH_BOX_EMPTY_HINT_MD},
+      {"realboxSeparator", IDS_AUTOCOMPLETE_MATCH_DESCRIPTION_SEPARATOR},
+      {"removeSuggestion", IDS_OMNIBOX_REMOVE_SUGGESTION},
 
       // Logo/doodle.
       {"copyLink", IDS_NTP_DOODLE_SHARE_DIALOG_COPY_LABEL},
@@ -132,6 +143,28 @@ content::WebUIDataSource* CreateNewTabPageUiHtmlSource(Profile* profile) {
   };
   AddLocalizedStringsBulk(source, kStrings);
 
+  // Register images that are purposefully not inlined in the HTML and instead
+  // are set in Javascript.
+  static constexpr webui::ResourcePath kImages[] = {
+      {omnibox::kGoogleGIconResourceName, IDR_WEBUI_IMAGES_200_LOGO_GOOGLE_G},
+      {omnibox::kBookmarkIconResourceName, IDR_LOCAL_NTP_ICONS_BOOKMARK},
+      {omnibox::kCalculatorIconResourceName, IDR_LOCAL_NTP_ICONS_CALCULATOR},
+      {omnibox::kClockIconResourceName, IDR_LOCAL_NTP_ICONS_CLOCK},
+      {omnibox::kDriveDocsIconResourceName, IDR_LOCAL_NTP_ICONS_DRIVE_DOCS},
+      {omnibox::kDriveFolderIconResourceName, IDR_LOCAL_NTP_ICONS_DRIVE_FOLDER},
+      {omnibox::kDriveFormIconResourceName, IDR_LOCAL_NTP_ICONS_DRIVE_FORM},
+      {omnibox::kDriveImageIconResourceName, IDR_LOCAL_NTP_ICONS_DRIVE_IMAGE},
+      {omnibox::kDriveLogoIconResourceName, IDR_LOCAL_NTP_ICONS_DRIVE_LOGO},
+      {omnibox::kDrivePdfIconResourceName, IDR_LOCAL_NTP_ICONS_DRIVE_PDF},
+      {omnibox::kDriveSheetsIconResourceName, IDR_LOCAL_NTP_ICONS_DRIVE_SHEETS},
+      {omnibox::kDriveSlidesIconResourceName, IDR_LOCAL_NTP_ICONS_DRIVE_SLIDES},
+      {omnibox::kDriveVideoIconResourceName, IDR_LOCAL_NTP_ICONS_DRIVE_VIDEO},
+      {omnibox::kExtensionAppIconResourceName,
+       IDR_LOCAL_NTP_ICONS_EXTENSION_APP},
+      {omnibox::kPageIconResourceName, IDR_LOCAL_NTP_ICONS_PAGE},
+      {omnibox::kSearchIconResourceName, IDR_WEBUI_IMAGES_ICON_SEARCH}};
+  webui::AddResourcePathsBulk(source, kImages);
+
   source->AddResourcePath("skcolor.mojom-lite.js",
                           IDR_NEW_TAB_PAGE_SKCOLOR_MOJO_LITE_JS);
   source->AddResourcePath("new_tab_page.mojom-lite.js",

chrome/test/data/webui/new_tab_page/realbox_test.js

@@ -71,4 +71,26 @@ suite('NewTabPageRealboxTest', () => {
     assertStyle(realbox, '--search-box-text', 'rgba(0, 0, 12, 255)');
     assertStyle(realbox, '--search-box-icon', 'rgba(0, 0, 1, 255)');
   });
+
+  test('realbox default icon', async () => {
+    // Assert.
+    assertStyle(
+        realbox.$.realboxIcon, '-webkit-mask-image',
+        'url("chrome://new-tab-page/search.svg")');
+    assertStyle(realbox.$.realboxIcon, 'background-image', 'none');
+
+    // Arrange.
+    loadTimeData.overrideValues({
+      realboxDefaultIcon: 'google_g.png',
+    });
+    PolymerTest.clearBody();
+    realbox = document.createElement('ntp-realbox');
+    document.body.appendChild(realbox);
+
+    // Assert.
+    assertStyle(realbox.$.realboxIcon, '-webkit-mask-image', 'none');
+    assertStyle(
+        realbox.$.realboxIcon, 'background-image',
+        'url("chrome://new-tab-page/google_g.png")');
+  });
 });