[realbox] Hides realbox placeholder when focused in JS

Hiding the placeholder via CSS does not play nicely with "find in page"

Fixed: 1130457
Change-Id: Ia46f0fe9d62cf9f714abe6c340e334a1c768ae7b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2555882
Commit-Queue: Moe Ahmadi <mahmadi@chromium.org>
Commit-Queue: Esmael Elmoslimany <aee@chromium.org>
Auto-Submit: Moe Ahmadi <mahmadi@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#831104}

chrome/browser/resources/new_tab_page/realbox.html

@@ -40,10 +40,6 @@
     color: var(--search-box-placeholder, var(--google-grey-refresh-700));
   }
 
-  input:focus::placeholder {
-    color: transparent;
-  }
-
   input:focus,
   :host([matches-are-visible]) input {
     background-color: var(--search-box-results-bg, white);
@@ -102,7 +98,7 @@
   <input id="input" type="search" autocomplete="off" spellcheck="false"
       aria-live="polite" placeholder="$i18n{searchBoxHint}"
       on-copy="onInputCutCopy_" on-cut="onInputCutCopy_"
-      on-focus="onInputFocus_" on-input="onInputInput_"
+      on-focus="onInputFocus_" on-blur="onInputBlur_" on-input="onInputInput_"
       on-keydown="onInputKeydown_" on-keyup="onInputKeyup_"
       on-mousedown="onInputMouseDown_" on-paste="onInputPaste_">
   <ntp-realbox-icon id="icon" match="[[selectedMatch_]]"

chrome/browser/resources/new_tab_page/realbox.js

@@ -351,10 +351,20 @@ class RealboxElement extends PolymerElement {
   }
 
   /**
+   * @param {!FocusEvent} e
    * @private
    */
-  onInputFocus_() {
+  onInputFocus_(e) {
     this.lastInputFocusTime_ = window.performance.now();
+    e.target.placeholder = '';
+  }
+
+  /**
+   * @param {!FocusEvent} e
+   * @private
+   */
+  onInputBlur_(e) {
+    e.target.placeholder = loadTimeData.getString('realboxHint');
   }
 
   /**

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

@@ -86,6 +86,8 @@ content::WebUIDataSource* CreateNewTabPageUiHtmlSource(Profile* profile) {
       base::FeatureList::IsEnabled(ntp_features::kRealboxUseGoogleGIcon)
           ? omnibox::kGoogleGIconResourceName
           : omnibox::kSearchIconResourceName);
+  source->AddString("realboxHint", l10n_util::GetStringUTF8(
+                                       IDS_GOOGLE_SEARCH_BOX_EMPTY_HINT_MD));
 
   source->AddBoolean(
       "handleMostVisitedNavigationExplicitly",