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 },
@@ -127,22 +133,9 @@ add_task(async function afterMousedown_noTopSites() {
 
 // Tests that we show the focus border when new tabs are opened.
 add_task(async function newTab() {
-  // We have to listen for the new tab using this brute force method.
-  // about:newtab is preloaded in the background. When about:newtab is opened,
-  // the cached version is shown. Since the page is already loaded,
-  // waitForNewTab does not detect it. It also doesn't fire the TabOpen event.
-  let tabCount = gBrowser.tabs.length;
-  let tabOpenPromise = TestUtils.waitForCondition(
-    () =>
-      gBrowser.tabs.length == tabCount + 1
-        ? gBrowser.tabs[gBrowser.tabs.length - 1]
-        : false,
-    "Waiting for background about:newtab to open."
-  );
   // Tabs opened with withNewTab don't focus the Urlbar, so we have to open one
   // manually.
-  EventUtils.synthesizeKey("t", { accelKey: true });
-  let tab = await tabOpenPromise;
+  let tab = await openAboutNewTab();
   await BrowserTestUtils.waitForCondition(
     () => gURLBar.hasAttribute("focused"),
     "Waiting for the Urlbar to become focused."
@@ -163,20 +156,11 @@ add_task(async function newTab_alreadyOpen() {
     { results: [TEST_RESULT], priority: Infinity },
     getSuppressFocusPromise(),
     async () => {
-      let tabCount = gBrowser.tabs.length;
-      let tabOpenPromise = TestUtils.waitForCondition(
-        () =>
-          gBrowser.tabs.length == tabCount + 1
-            ? gBrowser.tabs[gBrowser.tabs.length - 1]
-            : false,
-        "Waiting for background about:newtab to open."
-      );
       await UrlbarTestUtils.promisePopupOpen(window, () => {
         EventUtils.synthesizeKey("l", { accelKey: true });
       });
 
-      EventUtils.synthesizeKey("t", { accelKey: true });
-      let tab = await tabOpenPromise;
+      let tab = await openAboutNewTab();
       await BrowserTestUtils.waitForCondition(
         () => !UrlbarTestUtils.isPopupOpen(window),
         "Waiting for the Urlbar panel to close."
@@ -199,10 +183,7 @@ add_task(async function searchTip() {
   });
 
   info("Open new tab.");
-  const tab = await BrowserTestUtils.openNewForegroundTab(
-    gBrowser,
-    "about:newtab"
-  );
+  const tab = await openAboutNewTab();
 
   info("Click the tip button.");
   const result = await UrlbarTestUtils.getDetailsOfResultAt(window, 0);
@@ -222,6 +203,91 @@ add_task(async function searchTip() {
   await SpecialPowers.popPrefEnv();
 });
 
+add_task(async function interactionOnNewTab() {
+  info("Open about:newtab in new tab");
+  const tab = await openAboutNewTab();
+  await BrowserTestUtils.waitForCondition(() => gBrowser.selectedTab === tab);
+
+  await testInteractionsOnAboutNewTab(window);
+
+  BrowserTestUtils.removeTab(tab);
+});
+
+add_task(async function interactionOnNewTabInPrivateWindow() {
+  const win = await BrowserTestUtils.openNewBrowserWindow({
+    private: true,
+    waitForTabURL: "about:privatebrowsing",
+  });
+  await testInteractionsOnAboutNewTab(win);
+  await BrowserTestUtils.closeWindow(win);
+  await SimpleTest.promiseFocus(window);
+});
+
+async function testInteractionsOnAboutNewTab(win) {
+  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");
+}
+
+async function testInteractionFeature(interaction, win) {
+  info("Focus on URLBar");
+  win.gURLBar.value = "";
+  win.gURLBar.focus();
+  Assert.ok(
+    !win.gURLBar.hasAttribute("suppress-focus-border"),
+    "URLBar does not have suppress-focus-border attribute"
+  );
+
+  info("Click on search-handoff-button in newtab page");
+  await ContentTask.spawn(win.gBrowser.selectedBrowser, null, async () => {
+    await ContentTaskUtils.waitForCondition(() =>
+      content.document.querySelector(".search-handoff-button")
+    );
+    content.document.querySelector(".search-handoff-button").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(() => {
@@ -251,3 +317,17 @@ async function withAwaitProvider(args, promise, callback) {
     UrlbarProvidersManager.unregisterProvider(provider);
   }
 }
+
+async function openAboutNewTab(win = window) {
+  // We have to listen for the new tab using this brute force method.
+  // about:newtab is preloaded in the background. When about:newtab is opened,
+  // the cached version is shown. Since the page is already loaded,
+  // waitForNewTab does not detect it. It also doesn't fire the TabOpen event.
+  const tabCount = win.gBrowser.tabs.length;
+  EventUtils.synthesizeKey("t", { accelKey: true }, win);
+  await TestUtils.waitForCondition(
+    () => win.gBrowser.tabs.length === tabCount + 1,
+    "Waiting for background about:newtab to open."
+  );
+  return win.gBrowser.tabs[win.gBrowser.tabs.length - 1];
+}