Bug 1563350 - Add popover to the Touch Bar that displays when the Urlbar has focus. r=mikedeboer,spohl,fluent-reviewers,Pike,flod

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

--HG--
extra : moz-landing-system : lando

browser/components/touchbar/MacTouchBar.js

@@ -161,6 +161,48 @@ const kBuiltInInputs = {
     type: kInputTypes.SCRUBBER,
     callback: () => execCommand("cmd_share", "Share"),
   },
+  SearchPopover: {
+    title: "search-popover",
+    image: "chrome://browser/skin/search-glass.svg",
+    type: kInputTypes.POPOVER,
+    children: {
+      SearchScrollViewLabel: {
+        title: "search-search-in",
+        type: kInputTypes.LABEL,
+      },
+      SearchScrollView: {
+        key: "search-scrollview",
+        type: kInputTypes.SCROLLVIEW,
+        children: {
+          Bookmarks: {
+            title: "search-bookmarks",
+            type: kInputTypes.BUTTON,
+            callback: () => console.log("Bookmarks success!"), // FIXME: Bug 1563351
+          },
+          History: {
+            title: "search-history",
+            type: kInputTypes.BUTTON,
+            callback: () => console.log("History success!"), // FIXME: Bug 1563351
+          },
+          OpenTabs: {
+            title: "search-opentabs",
+            type: kInputTypes.BUTTON,
+            callback: () => console.log("Open Tabs success!"), // FIXME: Bug 1563351
+          },
+          Tags: {
+            title: "search-tags",
+            type: kInputTypes.BUTTON,
+            callback: () => console.log("Tags success!"), // FIXME: Bug 1563351
+          },
+          Titles: {
+            title: "search-titles",
+            type: kInputTypes.BUTTON,
+            callback: () => console.log("Titles success!"), // FIXME: Bug 1563351
+          },
+        },
+      },
+    },
+  },
 };
 
 const kHelperObservers = new Set([
@@ -182,9 +224,13 @@ class TouchBarHelper {
     for (let topic of kHelperObservers) {
       Services.obs.addObserver(this, topic);
     }
+    // We cache our search popover since otherwise it is frequently
+    // created/destroyed for the urlbar-focus/blur events.
+    this._searchPopover = this.getTouchBarInput("SearchPopover");
   }
 
   destructor() {
+    this._searchPopover = null;
     for (let topic of kHelperObservers) {
       Services.obs.removeObserver(this, topic);
     }
@@ -222,6 +268,10 @@ class TouchBarHelper {
     return BrowserWindowTracker.getTopWindow();
   }
 
+  get isUrlbarFocused() {
+    return TouchBarHelper.window.gURLBar.focused;
+  }
+
   static get baseWindow() {
     return TouchBarHelper.window.docShell.treeOwner.QueryInterface(
       Ci.nsIBaseWindow
@@ -229,6 +279,10 @@ class TouchBarHelper {
   }
 
   getTouchBarInput(inputName) {
+    if (inputName == "SearchPopover" && this._searchPopover) {
+      return this._searchPopover;
+    }
+
     // inputName might be undefined if an input's context() returns undefined.
     if (!inputName || !kBuiltInInputs.hasOwnProperty(inputName)) {
       return null;
@@ -320,8 +374,29 @@ class TouchBarHelper {
         kBuiltInInputs.ReaderView.disabled = false;
         this._updateTouchBarInputs("ReaderView");
         break;
+      case "urlbar-focus":
+        if (!this._searchPopover) {
+          this._searchPopover = this.getTouchBarInput("SearchPopover");
+        }
+        gTouchBarUpdater.showPopover(
+          TouchBarHelper.baseWindow,
+          this._searchPopover,
+          true
+        );
+        break;
+      case "urlbar-blur":
+        if (!this._searchPopover) {
+          this._searchPopover = this.getTouchBarInput("SearchPopover");
+        }
+        gTouchBarUpdater.showPopover(
+          TouchBarHelper.baseWindow,
+          this._searchPopover,
+          false
+        );
+        break;
       case "intl:app-locales-changed":
         // On locale change, refresh all inputs after loading new localTitle.
+        this._searchPopover = null;
         for (let input in kBuiltInInputs) {
           delete input.localTitle;
         }

browser/components/urlbar/UrlbarInput.jsm

@@ -1772,6 +1772,8 @@ class UrlbarInput {
     if (this.getAttribute("pageproxystate") != "valid") {
       this.window.UpdatePopupNotificationsVisibility();
     }
+
+    Services.obs.notifyObservers(null, "urlbar-blur");
   }
 
   _on_click(event) {
@@ -1814,6 +1816,8 @@ class UrlbarInput {
     if (this.getAttribute("pageproxystate") != "valid") {
       this.window.UpdatePopupNotificationsVisibility();
     }
+
+    Services.obs.notifyObservers(null, "urlbar-focus");
   }
 
   _on_mouseover(event) {

browser/locales/en-US/browser/touchbar/touchbar.ftl

@@ -18,3 +18,17 @@ open-location = Search or enter address
 share = Share
 close-window = Close Window
 open-sidebar = Sidebars
+
+# This string describes shortcuts for search.
+search-popover = Search shortcuts
+# Describes searches limited to a specific scope
+# (e.g. searching only in history).
+search-search-in = Search in:
+## Various categories of shortcuts for search.
+
+search-bookmarks = Bookmarks
+search-history = History
+search-opentabs = Open Tabs
+search-tags = Tags
+search-titles = Titles
+##

widget/cocoa/nsTouchBar.mm

@@ -19,6 +19,12 @@ static const NSTouchBarItemIdentifier BaseIdentifier = @"com.mozilla.firefox.tou
 static NSTouchBarItemIdentifier ShareScrubberIdentifier =
     [TouchBarInput nativeIdentifierWithType:@"scrubber" withKey:@"share"];
 
+// The search popover needs to show/hide depending on if the Urlbar is focused
+// when it is created. We keep track of its identifier to accomodate this
+// special handling.
+static NSTouchBarItemIdentifier SearchPopoverIdentifier =
+    [TouchBarInput nativeIdentifierWithType:@"popover" withKey:@"search-popover"];
+
 // Used to tie action strings to buttons.
 static char sIdentifierAssociationKey;
 
@@ -97,7 +103,7 @@ static const uint32_t kInputIconSize = 16;
         [TouchBarInput nativeIdentifierWithType:@"button" withKey:@"reload"],
         [TouchBarInput nativeIdentifierWithType:@"mainButton" withKey:@"open-location"],
         [TouchBarInput nativeIdentifierWithType:@"button" withKey:@"new-tab"],
-        ShareScrubberIdentifier
+        ShareScrubberIdentifier, SearchPopoverIdentifier
       ];
       self.defaultItemIdentifiers = [defaultItemIdentifiers copy];
     } else {
@@ -353,6 +359,15 @@ static const uint32_t kInputIconSize = 16;
   } else {
     aPopoverItem.collapsedRepresentation = nil;
   }
+
+  // Special handling to show/hide the search popover if the Urlbar is focused.
+  if ([[aInput nativeIdentifier] isEqualToString:SearchPopoverIdentifier]) {
+    bool urlbarIsFocused = false;
+    mTouchBarHelper->GetIsUrlbarFocused(&urlbarIsFocused);
+    if (urlbarIsFocused) {
+      [aPopoverItem showPopover:self];
+    }
+  }
 }
 
 - (void)updateScrollView:(NSCustomTouchBarItem*)aScrollViewItem input:(TouchBarInput*)aInput {
@@ -483,7 +498,10 @@ static const uint32_t kInputIconSize = 16;
       continue;
     }
 
-    if ([[input type] hasSuffix:@"popover"]) {
+    // Childless popovers contain the default Touch Bar as its popoverTouchBar.
+    // We check for [input children] since the default Touch Bar contains a
+    // popover (search-popover), so this would infinitely loop if there was no check.
+    if ([[input type] hasSuffix:@"popover"] && [input children]) {
       NSTouchBarItem* item = [self itemForIdentifier:identifier];
       [(nsTouchBar*)[(NSPopoverTouchBarItem*)item popoverTouchBar] releaseJSObjects];
     }

widget/nsITouchBarHelper.idl

@@ -22,6 +22,11 @@ interface nsITouchBarHelper : nsISupports
    */
   readonly attribute AString activeTitle;
 
+  /**
+   * Return true if the Urlbar has focus.
+   */
+  readonly attribute boolean isUrlbarFocused;
+
   /**
    * Returns all available Touch Bar Inputs in an nsIArray
    * of nsITouchBarInput objects.