[realbox][ntp] Apply the scrim when the input box is focused

This CL updates the logic so that the scrim is applied when the input
box of Realbox or Composebox is focused.

Screencast:

Realbox Next Enabled:
https://screencast.googleplex.com/cast/NDk1MDA2NjYwMjE4MDYwOHxhOTdiZTBlMS05NQ

Realbox Next Disabled:
https://screencast.googleplex.com/cast/NTY0NTA0NTcyOTMyOTE1Mnw3ODJkY2IyNi1hMw

Fixed: b:452691308
Change-Id: I8e0818a900953372869c678ef92db39f62afc7bf
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7049856
Reviewed-by: Hannah Collins <[email protected]>
Commit-Queue: Sho Mizoe <[email protected]>
Reviewed-by: Roman Arora <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1532370}

Author: Sho Mizoe

chrome/browser/resources/new_tab_page/app.css

@@ -105,8 +105,8 @@ cr-most-visited {
   z-index: 1000;
 }
 
-/* When a dropdown menu is opened, scrim is applied and OGB is behind it. */
-:host([dropdown-is-visible_]) #oneGoogleBarStackingContext {
+/* When scrim is applied, OGB must be behind it. */
+:host([show-scrim_]) #oneGoogleBarStackingContext {
   z-index: 0;
 }
 
@@ -154,7 +154,7 @@ cr-most-visited {
 }
 
 :host([show-composebox_]) #logo,
-:host([ntp-realbox-next-enabled_][dropdown-is-visible_]) #logo{
+:host([ntp-realbox-next-enabled_][show-scrim_]) #logo {
   z-index: 2;
 }
 
@@ -318,32 +318,6 @@ ntp-lens-upload-dialog {
   z-index: 1;
 }
 
-/**
- * When NTP Realbox Next is enabled, we want to ensure the following behavior
- * way for Composebox:
- * - when the dropdown is shown, clicking on any part of the half-opaque scrim
- *   covering the whole viewport exits Composebox.
- * - when the dropdown is not shown, clicking on (virtually) anywhere exits
- *   Composebox.
- *
- * An additional (natural) constraint in the latter is that when a click is on
- * an element triggering an action (e.g., MV tiles), its on-click behavior
- * should be triggered.
- * To achieve the latter behavior, the elements are placed at the following
- * z-index:
- * - transparent scrim: 0
- * - OGB: -1
- * - everything else: 1+
- *
- * With this, clicking on any interactive element, except OGB, shows the
- * element's on-click behavior, while clicking on the other parts removes the
- * scrim layer.
- */
-:host([ntp-realbox-next-enabled_][show-composebox_]:not([dropdown-is-visible_])) #scrim {
-  z-index: 0;
-  opacity: 0;
-}
-
 #webstoreToast {
   padding: 16px;
 }

chrome/browser/resources/new_tab_page/app.html

@@ -34,9 +34,10 @@
   <ntp-logo id="logo" ?single-colored="${this.singleColoredLogo_}"
       .theme="${this.theme_}" ?hidden="${!this.logoEnabled_}">
   </ntp-logo>
-  ${this.ntpRealboxNextEnabled_ && (this.dropdownIsVisible_ || this.showComposebox_) ? html`
+  ${this.ntpRealboxNextEnabled_ ? html`
     <div id="scrim"
-        @click="${this.showComposebox_ && this.composeboxCloseByClickOutside_ ? this.onComposeboxClickOutside_ : nothing}"></div>
+        @click="${this.showComposebox_ && this.composeboxCloseByClickOutside_ ? this.onComposeboxClickOutside_ : nothing}"
+        ?hidden="${!this.showScrim_}"></div>
   ` : ''}
   <div id="searchboxContainer">
     <cr-searchbox id="searchbox" ?is-dark="${this.isThemeDark_()}"
@@ -53,14 +54,16 @@
         realbox-layout-mode="${this.realboxLayoutMode_}"
         ?ntp-realbox-next-enabled="${this.ntpRealboxNextEnabled_}"
         ?cycling-placeholders="${this.searchboxCyclingPlaceholders_}"
-        @dropdown-visible-changed="${this.onDropdownVisibleChanged_}">
+        @dropdown-visible-changed="${this.onDropdownVisibleChanged_}"
+        @searchbox-input-focus-changed="${this.onInputFocusChanged_}">
     </cr-searchbox>
     ${this.showComposebox_ ? html`
       <ntp-composebox id="composebox" ?is_collapsible="false"
           ?ntp-realbox-next-enabled="${this.ntpRealboxNextEnabled_}"
           @composebox-initialized="${this.onComposeboxInitialized_}"
           @close-composebox="${this.closeComposebox_}"
           @composebox-dropdown-visible-changed="${this.onDropdownVisibleChanged_}"
+          @composebox-input-focus-changed="${this.onInputFocusChanged_}"
           realbox-layout-mode="${this.realboxLayoutMode_}">
       </ntp-composebox>
     ` : ''}

chrome/browser/resources/new_tab_page/app.ts

@@ -303,6 +303,13 @@ export class AppElement extends AppElementBase {
       ntpNextFeaturesEnabled_: {type: Boolean},
 
       dropdownIsVisible_: {type: Boolean, reflect: true},
+
+      searchboxInputFocused_: {type: Boolean},
+      composeboxInputFocused_: {type: Boolean},
+      /**
+       * Whether the scrim is shown in Realbox Next.
+       */
+      showScrim_: {type: Boolean, reflect: true},
     };
   }
 
@@ -377,6 +384,9 @@ export class AppElement extends AppElementBase {
   protected accessor ntpNextFeaturesEnabled_: boolean =
       loadTimeData.getBoolean('ntpNextFeaturesEnabled');
   protected accessor dropdownIsVisible_: boolean = false;
+  protected accessor searchboxInputFocused_: boolean = false;
+  protected accessor composeboxInputFocused_: boolean = false;
+  protected accessor showScrim_: boolean = false;
 
   private callbackRouter_: PageCallbackRouter;
   private pageHandler_: PageHandlerRemote;
@@ -627,6 +637,38 @@ export class AppElement extends AppElementBase {
              ModuleLoadStatus.MODULE_LOAD_IN_PROGRESS)) {
       this.recordBrowserPromoMetrics_();
     }
+
+    if (this.ntpRealboxNextEnabled_ && [
+          'showComposebox_',
+          'searchboxInputFocused_',
+          'composeboxInputFocused_',
+        ].some((prop) => changedPrivateProperties.has(prop))) {
+      /**
+       * The current requirement is that the scrim should be shown when the
+       * focus is placed on one of the input boxes and should be removed when
+       * the focus moves outside.
+       *
+       * The additional OR operation with showComposebox_ is because the logic
+       * does not close Composebox when a click outside is made while Composebox
+       * is opened. What seems to be happening when showComposebox_ is used/not
+       * used are as follows:
+       * - Without it:
+       *   1. A click outside is made.
+       *   2. The focusout event first occurs.
+       *   3. composeboxInputFocused_ is set to false.
+       *   4. The scrim is removed.
+       *   5. The click event fires.
+       *   6. Since there is no scrim, the onclick handle of the scrim is not
+       *      called.
+       * - With it:
+       *   1-3. same as above
+       *   4. The scrim is kept since showComposebox_ is still true.
+       *   5. The onclick handler of the scrim runs and sets showComposebox_ to
+       *      false, and everything works as desired.
+       */
+      this.showScrim_ = this.showComposebox_ || this.searchboxInputFocused_ ||
+          this.composeboxInputFocused_;
+    }
   }
 
   override updated(changedProperties: PropertyValues<this>) {
@@ -1231,6 +1273,17 @@ export class AppElement extends AppElementBase {
     this.dropdownIsVisible_ = e.detail.value;
   }
 
+  protected onInputFocusChanged_(e: CustomEvent<{value: boolean}>) {
+    switch (e.type) {
+      case 'searchbox-input-focus-changed':
+        this.searchboxInputFocused_ = e.detail.value;
+        break;
+      case 'composebox-input-focus-changed':
+        this.composeboxInputFocused_ = e.detail.value;
+        break;
+    }
+  }
+
   protected onRealboxHadSecondarySideChanged_(
       e: CustomEvent<{value: boolean}>) {
     this.realboxHadSecondarySide = e.detail.value;

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

@@ -19,7 +19,6 @@ import {loadTimeData} from 'chrome://resources/js/load_time_data.js';
 import {isMac} from 'chrome://resources/js/platform.js';
 import {PromiseResolver} from 'chrome://resources/js/promise_resolver.js';
 import {PageCallbackRouter as SearchboxPageCallbackRouter, PageHandlerRemote as SearchboxPageHandlerRemote} from 'chrome://resources/mojo/components/omnibox/browser/searchbox.mojom-webui.js';
-import type {AutocompleteMatch, AutocompleteResult} from 'chrome://resources/mojo/components/omnibox/browser/searchbox.mojom-webui.js';
 import {assertDeepEquals, assertEquals, assertFalse, assertNotEquals, assertTrue} from 'chrome://webui-test/chai_assert.js';
 import type {MetricsTracker} from 'chrome://webui-test/metrics_test_support.js';
 import {fakeMetricsPrivate} from 'chrome://webui-test/metrics_test_support.js';
@@ -119,65 +118,6 @@ suite('NewTabPageAppTest', () => {
         '#composeButton');
   }
 
-  function createAutocompleteMatch(): AutocompleteMatch {
-    return {
-      a11yLabel: '',
-      actions: [],
-      allowedToBeDefaultMatch: false,
-      isSearchType: false,
-      isEnterpriseSearchAggregatorPeopleType: false,
-      swapContentsAndDescription: false,
-      supportsDeletion: false,
-      suggestionGroupId: -1,  // Indicates a missing suggestion group Id.
-      contents: '',
-      contentsClass: [{offset: 0, style: 0}],
-      description: '',
-      descriptionClass: [{offset: 0, style: 0}],
-      destinationUrl: {url: ''},
-      inlineAutocompletion: '',
-      fillIntoEdit: '',
-      iconPath: '',
-      iconUrl: {url: ''},
-      imageDominantColor: '',
-      imageUrl: '',
-      isNoncannedAimSuggestion: false,
-      removeButtonA11yLabel: '',
-      type: '',
-      isRichSuggestion: false,
-      isWeatherAnswerSuggestion: null,
-      answer: null,
-      tailSuggestCommonPrefix: null,
-      hasInstantKeyword: false,
-      keywordChipHint: '',
-      keywordChipA11y: '',
-    };
-  }
-
-  function createAutocompleteResult(
-      modifiers: Partial<AutocompleteResult> = {}): AutocompleteResult {
-    const base: AutocompleteResult = {
-      input: '',
-      matches: [],
-      suggestionGroupsMap: {},
-      smartComposeInlineHint: null,
-    };
-
-    return Object.assign(base, modifiers);
-  }
-
-  function createSearchMatch(modifiers: Partial<AutocompleteMatch> = {}):
-      AutocompleteMatch {
-    return Object.assign(
-        createAutocompleteMatch(), {
-          isSearchType: true,
-          contents: 'hello world',
-          destinationUrl: {url: 'https://www.google.com/search?q=hello+world'},
-          fillIntoEdit: 'hello world',
-          type: 'search-suggest',
-        },
-        modifiers);
-  }
-
   function getScrim(): HTMLElement|null {
     return app.shadowRoot.querySelector<HTMLElement>('#scrim');
   }
@@ -1920,45 +1860,30 @@ suite('NewTabPageAppTest', () => {
       });
     });
     test(
-        'A scrim is applied when the dropdown is shown in searchbox',
-        async () => {
-          assertFalse(!!getScrim());
+        'A scrim is applied when the focus is on searchbox input', async () => {
+          const scrim = getScrim();
+          assertTrue(!!scrim);
+          assertTrue(scrim.hidden);
           const realbox_input =
               $$<SearchboxElement>(app, '#searchbox')!.$.input;
-          realbox_input.value = 'he';
-          realbox_input.dispatchEvent(new InputEvent('input'));
+          realbox_input.dispatchEvent(new FocusEvent('focus'));
           await microtasksFinished();
-          const matches = [createSearchMatch()];
-          SearchboxBrowserProxy.getInstance()
-              .callbackRouter.$.bindNewPipeAndPassRemote()
-              .autocompleteResultChanged(createAutocompleteResult({
-                input: realbox_input.value.trimStart(),
-                matches: matches,
-              }));
-          await microtasksFinished();
-          const scrim = getScrim();
-          assertTrue(!!scrim);
+          assertFalse(scrim.hidden);
 
-          // The dropdown is closed when a keypress on Esc is made.
-          const escapeEvent = new KeyboardEvent('keydown', {
-            bubbles: true,
-            cancelable: true,
-            composed: true,  // So it propagates across shadow DOM boundary.
-            key: 'Escape',
-          });
-          realbox_input.dispatchEvent(escapeEvent);
+          $$<SearchboxElement>(app, '#searchbox')!.$.inputWrapper.dispatchEvent(
+              new FocusEvent('focusout', {relatedTarget: scrim}));
           await microtasksFinished();
-          assertFalse(!!getScrim());
+          assertTrue(scrim.hidden);
         });
     test(
-        'A scrim is applied when the dropdown is shown in composebox',
+        'A scrim is applied when the focus is on the composebox input',
         async () => {
           loadTimeData.overrideValues({
-            composeboxShowZps: true,
-            composeboxShowTypedSuggest: true,
             composeboxCloseByClickOutside: true,
           });
-          assertFalse(!!getScrim());
+          const scrim = getScrim();
+          assertTrue(!!scrim);
+          assertTrue(scrim?.hidden);
           const realbox = $$(app, '#searchbox');
           assertTrue(!!realbox);
           realbox.dispatchEvent(new CustomEvent('open-composebox', {
@@ -1967,26 +1892,19 @@ suite('NewTabPageAppTest', () => {
           await microtasksFinished();
           const ntpComposebox = app.shadowRoot.querySelector('ntp-composebox');
           assertTrue(!!ntpComposebox);
-
-          // Open the dropbox by satisfying its opening condition
-          ntpComposebox.$.input.value = 'Test';
-          ntpComposebox.$.input.style.height = '48px';
-          ntpComposebox.$.input.dispatchEvent(new Event('input'));
-          await microtasksFinished();
-          const matches = [createSearchMatch()];
-          ComposeboxProxyImpl.getInstance()
-              .searchboxCallbackRouter.$.bindNewPipeAndPassRemote()
-              .autocompleteResultChanged(createAutocompleteResult({
-                input: 'Test'.trimStart(),
-                matches: matches,
-              }));
+          ntpComposebox.$.input.dispatchEvent(new FocusEvent('focus'));
           await microtasksFinished();
-          const scrim = getScrim();
-          assertTrue(!!scrim);
 
-          scrim.click();  // closes the composebox and thus the dropdown
+          assertFalse(scrim.hidden);
+
+          ntpComposebox.$.input.dispatchEvent(
+              new FocusEvent('focusout', {relatedTarget: scrim}));
+          await microtasksFinished();
+          scrim.click();
           await microtasksFinished();
-          assertFalse(!!getScrim());
+          assertTrue(scrim?.hidden);
+          // Composebox should have been closed.
+          assertFalse(!!app.shadowRoot.querySelector('ntp-composebox'));
         });
     test('searchbox text carries over to composebox', async () => {
         // Arrange.

ui/webui/resources/cr_components/composebox/composebox.html.ts

@@ -37,7 +37,8 @@ export function getHtml(this: ComposeboxElement) {
             .value="${this.input_}"
             @input=${this.handleInput_}
             @scroll="${this.handleScroll_}"
-            @focusin="${this.handleInputFocusIn_}"></textarea>
+            @focusin="${this.handleInputFocusIn_}"
+            @focusout="${this.handleInputFocusOut_}"></textarea>
           ${this.shouldShowSmartComposeInlineHint_() ? html`
             <div id="smartCompose">
               <!-- Comments in between spans to eliminate spacing between

ui/webui/resources/cr_components/composebox/composebox.ts

@@ -664,6 +664,15 @@ export class ComposeboxElement extends I18nMixinLit
     if (this.lastQueriedInput_ && this.result_?.matches.length) {
       this.$.matches.selectFirst();
     }
+    if (this.ntpRealboxNextEnabled) {
+      this.fire('composebox-input-focus-changed', {value: true});
+    }
+  }
+
+  protected handleInputFocusOut_() {
+    if (this.ntpRealboxNextEnabled) {
+      this.fire('composebox-input-focus-changed', {value: false});
+    }
   }
 
   protected handleComposeboxFocusIn_(e: FocusEvent) {

ui/webui/resources/cr_components/searchbox/searchbox.ts

@@ -526,13 +526,18 @@ export class SearchboxElement extends SearchboxElementBase {
       this.showThumbnail = !!this.thumbnailUrl_;
     }
 
-    if (this.ntpRealboxNextEnabled &&
-        changedPrivateProperties.has('dropdownIsVisible')) {
-      this.dispatchEvent(new CustomEvent('dropdown-visible-changed', {
-        bubbles: true,
-        composed: true,
-        detail: {value: this.dropdownIsVisible},
-      }));
+    if (this.ntpRealboxNextEnabled) {
+      if (changedPrivateProperties.has('dropdownIsVisible')) {
+        this.dispatchEvent(new CustomEvent('dropdown-visible-changed', {
+          bubbles: true,
+          composed: true,
+          detail: {value: this.dropdownIsVisible},
+        }));
+      }
+
+      if (changedPrivateProperties.has('inputFocused_')) {
+        this.fire('searchbox-input-focus-changed', {value: this.inputFocused_});
+      }
     }
   }