[realbox] Cleans up NTP fakebox code

Removes fakebox resources/handlers/tests from the NTP since it's been
made deprecated by the realbox.

Fixed: 1168269
Change-Id: I03b93330f91413a3efd57be92e5ec62e6d89c778
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2638536Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Reviewed-by: Alex Gough <ajgo@chromium.org>
Commit-Queue: Moe Ahmadi <mahmadi@chromium.org>
Cr-Commit-Position: refs/heads/master@{#845056}

chrome/browser/resources/new_tab_page/BUILD.gn

@@ -21,7 +21,6 @@ js_type_check("closure_compile") {
     ":browser_proxy",
     ":customize_dialog",
     ":doodle_share_dialog",
-    ":fakebox",
     ":iframe",
     ":lazy_load",
     ":logo",
@@ -175,12 +174,6 @@ js_library("iframe") {
   ]
 }
 
-js_library("fakebox") {
-  deps = [
-    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
-  ]
-}
-
 js_library("realbox") {
   deps = [
     ":browser_proxy",
@@ -258,7 +251,6 @@ html_to_js("web_components_local") {
     "customize_dialog.js",
     "customize_shortcuts.js",
     "doodle_share_dialog.js",
-    "fakebox.js",
     "logo.js",
     "middle_slot_promo.js",
     "mini_page.js",
@@ -323,7 +315,6 @@ preprocess_if_expr("preprocess_gen") {
     "customize_shortcuts.js",
     "iframe.js",
     "mini_page.js",
-    "fakebox.js",
     "logo.js",
     "doodle_share_dialog.js",
     "realbox.js",

chrome/browser/resources/new_tab_page/app.html

@@ -70,12 +70,10 @@
     z-index: 1;  /* Needed so it layers on top of OneGoogleBar. */
   }
 
-  ntp-fakebox,
   ntp-realbox {
     margin-bottom: 32px;
   }
 
-  ntp-fakebox,
   ntp-realbox,
   ntp-module-wrapper {
     flex-shrink: 0;
@@ -253,12 +251,8 @@
       single-colored$="[[singleColoredLogo_]]" dark="[[theme_.isDark]]"
       background-color="[[backgroundColor_]]">
   </ntp-logo>
-  <ntp-fakebox id="fakebox" on-open-voice-search="onOpenVoiceSearch_"
-      hidden$="[[realboxEnabled_]]">
-  </ntp-fakebox>
   <ntp-realbox id="realbox" on-open-voice-search="onOpenVoiceSearch_"
-      theme="[[theme_.searchBox]]" shown$="[[realboxShown_]]"
-      hidden$="[[!realboxEnabled_]]">
+      theme="[[theme_.searchBox]]" shown$="[[realboxShown_]]">
   </ntp-realbox>
   <dom-if if="[[lazyRender_]]" on-dom-change="onLazyRendered_">
     <template>

chrome/browser/resources/new_tab_page/app.js

@@ -4,7 +4,6 @@
 
 import './strings.m.js';
 import './iframe.js';
-import './fakebox.js';
 import './realbox.js';
 import './logo.js';
 import './modules/module_wrapper.js';
@@ -185,12 +184,6 @@ class AppElement extends PolymerElement {
         type: Boolean,
       },
 
-      /** @private */
-      realboxEnabled_: {
-        type: Boolean,
-        value: () => loadTimeData.getBoolean('realboxEnabled'),
-      },
-
       /** @private */
       realboxShown_: {
         type: Boolean,

chrome/browser/resources/new_tab_page/fakebox.html

-<style>
-  :host {
-    --ntp-fakebox-height: 44px;
-    background-color: white;
-    border-radius: calc(0.5 * var(--ntp-fakebox-height));
-    box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .28);
-    height: var(--ntp-fakebox-height);
-    position: relative;
-  }
-
-  :host([hidden_]) {
-    visibility: hidden;
-  }
-
-  :host > * {
-    bottom: 0;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-
-  #controls {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    left: 16px;
-    pointer-events: none;
-    right: 16px;
-  }
-
-  input {
-    border: 0;
-    opacity: 0;
-    padding: 0;
-    width: 100%;
-  }
-
-  #searchIcon {
-    -webkit-mask-image: url(chrome://resources/images/icon_search.svg);
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-size: 100%;
-    background-color: var(--cr-secondary-text-color);
-    height: 21px;
-    width: 21px;
-  }
-
-  @keyframes blink {
-    0% {
-      opacity: 1;
-    }
-    61.55% {
-      opacity: 0;
-    }
-  }
-
-  #fakeCursor {
-    background-color: var(--cr-secondary-text-color);
-    height: 1rem;
-    margin-inline-start: 11px;
-    visibility: hidden;
-    width: 1px;
-  }
-
-  :host([focused_]) #fakeCursor {
-    animation: blink 1.3s step-end infinite;
-    visibility: visible;
-  }
-
-  :host([dragged_]) #fakeCursor {
-    visibility: visible;
-  }
-
-  #hint {
-    color: var(--cr-secondary-text-color);
-    flex-grow: 1;
-    font-size: 1rem;
-    margin-inline-start: 3px;
-  }
-
-  :host([focused_]) #hint,
-  :host([dragged_]) #hint {
-    visibility: hidden;
-  }
-
-  #voiceSearchButton {
-    background: url(icons/googlemic_clr_24px.svg) no-repeat center;
-    background-size: 21px 21px;
-    border: none;
-    border-radius: 2px;
-    cursor: pointer;
-    height: 100%;
-    outline: none;
-    padding: 0;
-    pointer-events: auto;
-    width: 26px;
-  }
-
-  :host-context(.focus-outline-visible) #voiceSearchButton:focus {
-    box-shadow: var(--ntp-focus-shadow);
-  }
-</style>
-<input id="input" on-pointerdown="onPointerDown_" on-paste="onPaste_"
-    on-dragenter="onDragenter_" on-dragleave="onDragleave_" on-drop="onDrop_"
-    autocomplete="off" tabindex="-1" type="url" aria-hidden="true">
-</input>
-<div id="controls">
-  <div id="searchIcon"></div>
-  <div id="fakeCursor"></div>
-  <div id="hint">$i18n{searchBoxHint}</div>
-  <button id="voiceSearchButton" on-click="onVoiceSearchClick_"
-      title="$i18n{voiceSearchButtonLabel}">
-  </button>
-</div>

chrome/browser/resources/new_tab_page/fakebox.js

-// Copyright 2020 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import {assert} from 'chrome://resources/js/assert.m.js';
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-import {BrowserProxy} from './browser_proxy.js';
-
-// A fake search box that moves focus and input to the omnibox when interacted
-// with.
-class FakeboxElement extends PolymerElement {
-  static get is() {
-    return 'ntp-fakebox';
-  }
-
-  static get template() {
-    return html`{__html_template__}`;
-  }
-
-  static get properties() {
-    return {
-      /** @private */
-      focused_: {
-        reflectToAttribute: true,
-        type: Boolean,
-      },
-
-      /** @private */
-      hidden_: {
-        reflectToAttribute: true,
-        type: Boolean,
-      },
-
-      /** @private */
-      dragged_: {
-        reflectToAttribute: true,
-        type: Boolean,
-      },
-    };
-  }
-
-  constructor() {
-    performance.mark('fakebox-creation-start');
-    super();
-    /** @private {newTabPage.mojom.PageHandlerRemote} */
-    this.pageHandler_ = BrowserProxy.getInstance().handler;
-    /** @private {!newTabPage.mojom.PageCallbackRouter} */
-    this.callbackRouter_ = BrowserProxy.getInstance().callbackRouter;
-    /** @private {?number} */
-    this.setFakeboxFocusedListenerId_ = null;
-    /** @private {?number} */
-    this.setFakeboxVisibleListenerId_ = null;
-  }
-
-  /** @override */
-  connectedCallback() {
-    super.connectedCallback();
-    this.setFakeboxFocusedListenerId_ =
-        this.callbackRouter_.setFakeboxFocused.addListener(focused => {
-          this.focused_ = focused;
-          this.dragged_ = false;
-        });
-    this.setFakeboxVisibleListenerId_ =
-        this.callbackRouter_.setFakeboxVisible.addListener(visible => {
-          this.hidden_ = !visible;
-        });
-  }
-
-  /** @override */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.callbackRouter_.removeListener(
-        assert(this.setFakeboxFocusedListenerId_));
-    this.callbackRouter_.removeListener(
-        assert(this.setFakeboxVisibleListenerId_));
-  }
-
-  /** @override */
-  ready() {
-    super.ready();
-    performance.measure('fakebox-creation', 'fakebox-creation-start');
-  }
-
-  /** @private */
-  onPointerDown_() {
-    this.pageHandler_.focusOmnibox();
-  }
-
-  /**
-   * @param {Event} e
-   * @private
-   */
-  onPaste_(e) {
-    e.preventDefault();
-    const text = e.clipboardData.getData('text/plain');
-    if (!text) {
-      return;
-    }
-    this.pageHandler_.pasteIntoOmnibox(text);
-  }
-
-  /** @private */
-  onDragenter_() {
-    this.dragged_ = true;
-  }
-
-  /** @private */
-  onDragleave_() {
-    this.dragged_ = false;
-  }
-
-  /**
-   * @param {Event} e
-   * @private
-   */
-  onDrop_(e) {
-    e.preventDefault();
-    const text = e.dataTransfer.getData('text/plain');
-    if (!text) {
-      return;
-    }
-    this.pageHandler_.focusOmnibox();
-    this.pageHandler_.pasteIntoOmnibox(text);
-  }
-
-  /** @private */
-  onVoiceSearchClick_() {
-    this.dispatchEvent(new Event('open-voice-search'));
-  }
-}
-
-customElements.define(FakeboxElement.is, FakeboxElement);

chrome/browser/ui/webui/new_tab_page/new_tab_page.mojom

@@ -450,10 +450,6 @@ interface Page {
   SetMostVisitedInfo(MostVisitedInfo info);
   // Sets the current theme.
   SetTheme(Theme theme);
-  // If |focused| fakes focus on the fakebox.
-  SetFakeboxFocused(bool focused);
-  // If |visible| shows the fakebox.
-  SetFakeboxVisible(bool visible);
   // Updates the module visibility.
   SetModulesVisible(bool visible);
 

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

@@ -388,8 +388,6 @@ NewTabPageHandler::NewTabPageHandler(
   instant_service_->AddObserver(this);
   ntp_background_service_->AddObserver(this);
   instant_service_->UpdateNtpTheme();
-  OmniboxTabHelper::CreateForWebContents(web_contents);
-  OmniboxTabHelper::FromWebContents(web_contents_)->AddObserver(this);
   promo_service_observation_.Observe(promo_service_);
   one_google_bar_service_observation_.Observe(one_google_bar_service_);
   logger_.SetModulesVisible(
@@ -399,9 +397,6 @@ NewTabPageHandler::NewTabPageHandler(
 NewTabPageHandler::~NewTabPageHandler() {
   instant_service_->RemoveObserver(this);
   ntp_background_service_->RemoveObserver(this);
-  if (auto* helper = OmniboxTabHelper::FromWebContents(web_contents_)) {
-    helper->RemoveObserver(this);
-  }
   // Clear pending bitmap requests.
   for (auto bitmap_request_id : bitmap_request_ids_) {
     bitmap_fetcher_service_->CancelRequest(bitmap_request_id);
@@ -1333,21 +1328,6 @@ void NewTabPageHandler::OnNtpBackgroundServiceShuttingDown() {
   ntp_background_service_ = nullptr;
 }
 
-void NewTabPageHandler::OnOmniboxInputStateChanged() {
-  // This handler was added for the local NTP to show the fakebox when pressing
-  // escape while the omnibox has focus. The WebUI NTP only shows the fakebox
-  // when blurring the omnibox. Thus, we do nothing here.
-}
-
-void NewTabPageHandler::OnOmniboxFocusChanged(OmniboxFocusState state,
-                                              OmniboxFocusChangeReason reason) {
-  page_->SetFakeboxFocused(state == OMNIBOX_FOCUS_INVISIBLE);
-  // Don't make fakebox re-appear for a short moment before navigating away.
-  if (web_contents_->GetController().GetPendingEntry() == nullptr) {
-    page_->SetFakeboxVisible(reason != OMNIBOX_FOCUS_CHANGE_TYPING);
-  }
-}
-
 void NewTabPageHandler::OnOneGoogleBarDataUpdated() {
   base::Optional<OneGoogleBarData> data =
       one_google_bar_service_->one_google_bar_data();

chrome/browser/ui/webui/new_tab_page/new_tab_page_handler.h

@@ -20,7 +20,6 @@
 #include "chrome/browser/search/one_google_bar/one_google_bar_service_observer.h"
 #include "chrome/browser/search/promos/promo_service.h"
 #include "chrome/browser/search/promos/promo_service_observer.h"
-#include "chrome/browser/ui/omnibox/omnibox_tab_helper.h"
 #include "chrome/browser/ui/search/ntp_user_data_logger.h"
 #include "chrome/browser/ui/webui/new_tab_page/new_tab_page.mojom.h"
 #include "chrome/common/search/instant_types.h"
@@ -52,7 +51,6 @@ class LogoService;
 class NewTabPageHandler : public new_tab_page::mojom::PageHandler,
                           public InstantServiceObserver,
                           public NtpBackgroundServiceObserver,
-                          public OmniboxTabHelper::Observer,
                           public OneGoogleBarServiceObserver,
                           public ui::SelectFileDialog::Listener,
                           public AutocompleteController::Observer,
@@ -171,11 +169,6 @@ class NewTabPageHandler : public new_tab_page::mojom::PageHandler,
   void OnNextCollectionImageAvailable() override;
   void OnNtpBackgroundServiceShuttingDown() override;
 
-  // OmniboxTabHelper::Observer:
-  void OnOmniboxInputStateChanged() override;
-  void OnOmniboxFocusChanged(OmniboxFocusState state,
-                             OmniboxFocusChangeReason reason) override;
-
   // OneGoogleBarServiceObserver:
   void OnOneGoogleBarDataUpdated() override;
   void OnOneGoogleBarServiceShuttingDown() override;

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

@@ -44,8 +44,6 @@ class MockPage : public new_tab_page::mojom::Page {
   MOCK_METHOD1(SetMostVisitedInfo,
                void(new_tab_page::mojom::MostVisitedInfoPtr));
   MOCK_METHOD1(SetTheme, void(new_tab_page::mojom::ThemePtr));
-  MOCK_METHOD1(SetFakeboxFocused, void(bool));
-  MOCK_METHOD1(SetFakeboxVisible, void(bool));
   MOCK_METHOD1(SetModulesVisible, void(bool));
   MOCK_METHOD1(AutocompleteResultChanged,
                void(search::mojom::AutocompleteResultPtr));

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

@@ -71,7 +71,6 @@ content::WebUIDataSource* CreateNewTabPageUiHtmlSource(Profile* profile) {
                         .spec());
 
   // Realbox.
-  source->AddBoolean("realboxEnabled", true);
   source->AddBoolean(
       "realboxMatchOmniboxTheme",
       base::FeatureList::IsEnabled(ntp_features::kRealboxMatchOmniboxTheme));

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

@@ -32,7 +32,6 @@ suite('NewTabPageAppTest', () => {
   suiteSetup(() => {
     loadTimeData.overrideValues({
       modulesLoadTimeout: 0,
-      realboxEnabled: false,
     });
   });
 
@@ -141,8 +140,6 @@ suite('NewTabPageAppTest', () => {
 
   test('realbox is not visible by default', async () => {
     // Assert.
-    assertNotStyle($$(app, '#fakebox'), 'display', 'none');
-    assertStyle($$(app, '#realbox'), 'display', 'none');
     assertStyle($$(app, '#realbox'), 'visibility', 'hidden');
 
     // Act.
@@ -155,7 +152,7 @@ suite('NewTabPageAppTest', () => {
 
   test('open voice search event opens voice search overlay', async () => {
     // Act.
-    $$(app, '#fakebox').dispatchEvent(new Event('open-voice-search'));
+    $$(app, '#realbox').dispatchEvent(new Event('open-voice-search'));
     await flushTasks();
 
     // Assert.

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

-// Copyright 2020 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import {BrowserProxy} from 'chrome://new-tab-page/new_tab_page.js';
-import {assertNotStyle, assertStyle, createTestProxy, NONE_ANIMATION} from 'chrome://test/new_tab_page/test_support.js';
-import {eventToPromise} from 'chrome://test/test_util.m.js';
-
-suite('NewTabPageFakeboxTest', () => {
-  /** @type {!FakeboxElement} */
-  let fakebox;
-
-  /**
-   * @implements {BrowserProxy}
-   * @extends {TestBrowserProxy}
-   */
-  let testProxy;
-
-  setup(async () => {
-    PolymerTest.clearBody();
-
-    testProxy = createTestProxy();
-    BrowserProxy.instance_ = testProxy;
-
-    fakebox = document.createElement('ntp-fakebox');
-    document.body.appendChild(fakebox);
-  });
-
-  test('when created shown and not focused', () => {
-    // Assert.
-    assertStyle(fakebox, 'visibility', 'visible');
-    assertStyle(fakebox.$.hint, 'visibility', 'visible');
-    assertStyle(fakebox.$.fakeCursor, 'visibility', 'hidden');
-  });
-
-  test('clicking voice search button send voice search event', async () => {
-    // Arrange.
-    const whenOpenVoiceSearch = eventToPromise('open-voice-search', fakebox);
-
-    // Act.
-    fakebox.$.voiceSearchButton.click();
-
-    // Assert.
-    await whenOpenVoiceSearch;
-  });
-
-  test('when focused fake cursor is blinking', async () => {
-    // Act.
-    testProxy.callbackRouterRemote.setFakeboxFocused(true);
-    await testProxy.callbackRouterRemote.$.flushForTesting();
-
-    // Assert.
-    assertStyle(fakebox.$.fakeCursor, 'visibility', 'visible');
-    assertNotStyle(fakebox.$.fakeCursor, 'animation', NONE_ANIMATION);
-    assertStyle(fakebox.$.hint, 'visibility', 'hidden');
-  });
-
-  test('when blurred fake cursor is hidden', async () => {
-    // Act.
-    testProxy.callbackRouterRemote.setFakeboxFocused(false);
-    await testProxy.callbackRouterRemote.$.flushForTesting();
-
-    // Assert.
-    assertStyle(fakebox.$.hint, 'visibility', 'visible');
-    assertStyle(fakebox.$.fakeCursor, 'visibility', 'hidden');
-  });
-
-  test('when shown fakebox is visible', async () => {
-    // Act.
-    testProxy.callbackRouterRemote.setFakeboxVisible(true);
-    await testProxy.callbackRouterRemote.$.flushForTesting();
-
-    // Assert.
-    assertStyle(fakebox, 'visibility', 'visible');
-  });
-
-  test('when hidden fakebox is invisible', async () => {
-    // Act.
-    testProxy.callbackRouterRemote.setFakeboxVisible(false);
-    await testProxy.callbackRouterRemote.$.flushForTesting();
-
-    // Assert.
-    assertStyle(fakebox, 'visibility', 'hidden');
-  });
-
-  test('on mouse down focuses omnibox', async () => {
-    // Act.
-    fakebox.$.input.dispatchEvent(new PointerEvent('pointerdown'));
-
-    // Assert.
-    await testProxy.handler.whenCalled('focusOmnibox');
-  });
-
-  test('on paste pastes into omnibox', async () => {
-    // Arrage.
-    const clipboardData = new DataTransfer();
-    clipboardData.setData('text/plain', 'foo');
-
-    // Act.
-    fakebox.$.input.dispatchEvent(
-        new ClipboardEvent('paste', {clipboardData: clipboardData}));
-
-    // Assert.
-    const text = await testProxy.handler.whenCalled('pasteIntoOmnibox');
-    assertEquals(text, 'foo');
-  });
-
-  test('on drag enter shows drag cursor', () => {
-    // Act.
-    fakebox.$.input.dispatchEvent(new DragEvent('dragenter'));
-
-    // Assert.
-    assertStyle(fakebox.$.fakeCursor, 'visibility', 'visible');
-    assertStyle(fakebox.$.hint, 'visibility', 'hidden');
-    assertStyle(fakebox.$.fakeCursor, 'animation', NONE_ANIMATION);
-  });
-
-  test('on drag leave hides drag cursor', () => {
-    // Act.
-    fakebox.$.input.dispatchEvent(new DragEvent('dragleave'));
-
-    // Assert.
-    assertStyle(fakebox.$.fakeCursor, 'visibility', 'hidden');
-  });
-
-  test('on drop pastes into and focuses omnibox', async () => {
-    // Arrage.
-    const dragData = new DataTransfer();
-    dragData.setData('text/plain', 'foo');
-
-    // Act.
-    fakebox.$.input.dispatchEvent(
-        new DragEvent('drop', {dataTransfer: dragData}));
-
-    // Assert.
-    await testProxy.handler.whenCalled('focusOmnibox');
-    const text = await testProxy.handler.whenCalled('pasteIntoOmnibox');
-    assertEquals(text, 'foo');
-  });
-});

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

@@ -111,18 +111,6 @@ TEST_F('NewTabPageVoiceSearchOverlayTest', 'All', function() {
   mocha.run();
 });
 
-// eslint-disable-next-line no-var
-var NewTabPageFakeboxTest = class extends NewTabPageBrowserTest {
-  /** @override */
-  get browsePreload() {
-    return 'chrome://new-tab-page/test_loader.html?module=new_tab_page/fakebox_test.js';
-  }
-};
-
-TEST_F('NewTabPageFakeboxTest', 'All', function() {
-  mocha.run();
-});
-
 // eslint-disable-next-line no-var
 var NewTabPageRealboxTest = class extends NewTabPageBrowserTest {
   /** @override */