Bug 1700374: Set suppress-focus-border true upon mouse down on urlbar while showing newtab page.r=harry

Differential Revision: https://phabricator.services.mozilla.com/D112335

browser/actors/AboutPrivateBrowsingParent.jsm

@@ -74,7 +74,7 @@ class AboutPrivateBrowsingParent extends JSWindowActorParent {
           // in-content search.
           if (isFirstChange) {
             isFirstChange = false;
-            urlBar.removeHiddenFocus();
+            urlBar.removeHiddenFocus(true);
             urlBar.search("");
             this.sendAsyncMessage("DisableSearch");
             urlBar.removeEventListener("compositionstart", checkFirstChange);
@@ -93,10 +93,12 @@ class AboutPrivateBrowsingParent extends JSWindowActorParent {
           }
         };
 
-        let onDone = () => {
+        let onDone = ev => {
           // We are done. Show in-content search again and cleanup.
           this.sendAsyncMessage("ShowSearch");
-          urlBar.removeHiddenFocus();
+
+          const forceSuppressFocusBorder = ev?.type === "mousedown";
+          urlBar.removeHiddenFocus(forceSuppressFocusBorder);
 
           urlBar.removeEventListener("keydown", onKeydown);
           urlBar.removeEventListener("mousedown", onDone);

browser/components/newtab/lib/PlacesFeed.jsm

@@ -396,7 +396,7 @@ class PlacesFeed {
       // in-content search.
       if (isFirstChange) {
         isFirstChange = false;
-        urlBar.removeHiddenFocus();
+        urlBar.removeHiddenFocus(true);
         urlBar.search("");
         this.store.dispatch(
           ac.OnlyToOneContent({ type: at.DISABLE_SEARCH }, meta.fromTarget)
@@ -417,12 +417,14 @@ class PlacesFeed {
       }
     };
 
-    const onDone = () => {
+    const onDone = ev => {
       // We are done. Show in-content search again and cleanup.
       this.store.dispatch(
         ac.OnlyToOneContent({ type: at.SHOW_SEARCH }, meta.fromTarget)
       );
-      urlBar.removeHiddenFocus();
+
+      const forceSuppressFocusBorder = ev?.type === "mousedown";
+      urlBar.removeHiddenFocus(forceSuppressFocusBorder);
 
       urlBar.removeEventListener("keydown", onKeydown);
       urlBar.removeEventListener("mousedown", onDone);

browser/components/urlbar/UrlbarInput.jsm

@@ -1414,11 +1414,19 @@ class UrlbarInput {
   /**
    * Restore focus styles.
    * This is used by Activity Stream and about:privatebrowsing for search hand-off.
+   *
+   * @param {Browser} forceSuppressFocusBorder
+   *   Set true to suppress-focus-border attribute if this flag is true.
    */
-  removeHiddenFocus() {
+  removeHiddenFocus(forceSuppressFocusBorder = false) {
     this._hideFocus = false;
     if (this.focused) {
       this.setAttribute("focused", "true");
+
+      if (forceSuppressFocusBorder) {
+        this.toggleAttribute("suppress-focus-border", true);
+      }
+
       if (!protonEnabled) {
         this.startLayoutExtend();
       }

browser/components/urlbar/tests/browser/browser_suppressFocusBorder.js

@@ -37,6 +37,12 @@ class AwaitPromiseProvider extends UrlbarTestUtils.TestProvider {
   }
 }
 
+add_task(async function setup() {
+  registerCleanupFunction(function() {
+    SpecialPowers.clipboardCopyString("");
+  });
+});
+
 add_task(async function afterMousedown_topSites() {
   await withAwaitProvider(
     { results: [TEST_RESULT], priority: Infinity },
@@ -222,6 +228,79 @@ add_task(async function searchTip() {
   await SpecialPowers.popPrefEnv();
 });
 
+add_task(async function interactionOnNewTab() {
+  await testInteractionsOnNewTab(window);
+});
+
+add_task(async function interactionOnNewTabInPrivateWindow() {
+  const win = await BrowserTestUtils.openNewBrowserWindow({ private: true });
+  await testInteractionsOnNewTab(win);
+  await BrowserTestUtils.closeWindow(win);
+  await SimpleTest.promiseFocus(window);
+});
+
+async function testInteractionsOnNewTab(win) {
+  info("Open about:newtab in new tab");
+  const tab = await BrowserTestUtils.openNewForegroundTab(
+    win.gBrowser,
+    "about:newtab"
+  );
+
+  info("Test for clicking on URLBar while showing about:newtab");
+  await testInteractionFeature(() => {
+    info("Click on URLBar");
+    EventUtils.synthesizeMouseAtCenter(win.gURLBar.inputField, {}, win);
+  }, win);
+
+  info("Test for typing on .fake-editable while showing about:newtab");
+  await testInteractionFeature(() => {
+    info("Type a character on .fake-editable");
+    EventUtils.synthesizeKey("v", {}, win);
+  }, win);
+  Assert.equal(win.gURLBar.value, "v", "URLBar value is correct");
+
+  info("Test for typing on .fake-editable while showing about:newtab");
+  await testInteractionFeature(() => {
+    info("Paste some words on .fake-editable");
+    SpecialPowers.clipboardCopyString("paste test");
+    win.document.commandDispatcher
+      .getControllerForCommand("cmd_paste")
+      .doCommand("cmd_paste");
+    SpecialPowers.clipboardCopyString("");
+  }, win);
+  Assert.equal(win.gURLBar.value, "paste test", "URLBar value is correct");
+
+  BrowserTestUtils.removeTab(tab);
+}
+
+async function testInteractionFeature(interaction, win) {
+  info("Click on input field in newtab page");
+  ContentTask.spawn(win.gBrowser.selectedBrowser, null, () => {
+    content.document.querySelector(".fake-editable").click();
+  });
+
+  await BrowserTestUtils.waitForCondition(
+    () => win.gURLBar._hideFocus,
+    "Wait until _hideFocus will be true"
+  );
+
+  const onHiddenFocusRemoved = BrowserTestUtils.waitForCondition(
+    () => !win.gURLBar._hideFocus
+  );
+
+  await interaction();
+
+  await onHiddenFocusRemoved;
+  Assert.ok(
+    win.gURLBar.hasAttribute("suppress-focus-border"),
+    "suppress-focus-border is set from the beginning"
+  );
+
+  const result = await UrlbarTestUtils.waitForAutocompleteResultAt(win, 0);
+  Assert.ok(result, "The provider returned a result");
+  await UrlbarTestUtils.promisePopupClose(win);
+}
+
 function getSuppressFocusPromise(win = window) {
   return new Promise(resolve => {
     let observer = new MutationObserver(() => {