Bug 1577181 - Fix one off search button overflow layout in the urlbar. r=harry

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

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

browser/components/search/content/search-one-offs.js

@@ -19,7 +19,7 @@ class SearchOneOffs {
       MozXULElement.parseXULToFragment(
         `
       <hbox class="search-panel-one-offs-header search-panel-header search-panel-current-input">
-        <label class="searchbar-oneoffheader-search" value="&searchWithDesc.label;"/>
+        <label class="search-panel-one-offs-header-label" value="&searchWithDesc.label;"/>
       </hbox>
       <hbox class="search-panel-one-offs" role="group"/>
       <vbox class="search-add-engines"/>
@@ -66,6 +66,7 @@ class SearchOneOffs {
     this.spacerCompact = this.querySelector(".search-one-offs-spacer");
 
     this.contextMenuPopup = this.querySelector(".search-one-offs-context-menu");
+    document.getElementById("mainPopupSet").appendChild(this.contextMenuPopup);
 
     this._bundle = null;
 
@@ -106,6 +107,7 @@ class SearchOneOffs {
     this.addEventListener("mouseout", this);
     this.addEventListener("click", this);
     this.addEventListener("command", this);
+    this.contextMenuPopup.addEventListener("command", this);
     this.addEventListener("contextmenu", this);
 
     // Prevent popup events from the context menu from reaching the autocomplete
@@ -454,7 +456,7 @@ class SearchOneOffs {
     }
 
     let headerText = this.header.querySelector(
-      ".searchbar-oneoffheader-search"
+      ".search-panel-one-offs-header-label"
     );
     this.buttons.setAttribute("aria-label", headerText.value);
 
@@ -1194,10 +1196,9 @@ class SearchOneOffs {
       event.preventDefault();
       return;
     }
-    this.querySelector(".search-one-offs-context-set-default").setAttribute(
+    this.contextMenuPopup
-      "disabled",
+      .querySelector(".search-one-offs-context-set-default")
-      target.engine == Services.search.defaultEngine
+      .setAttribute("disabled", target.engine == Services.search.defaultEngine);
-    );
 
     this.contextMenuPopup.openPopupAtScreen(event.screenX, event.screenY, true);
     event.preventDefault();

browser/themes/shared/searchbar.inc.css

@@ -57,8 +57,8 @@
 }
 
 .search-panel-header > label {
-  margin-top: 2px !important;
+  margin-top: 2px;
-  margin-bottom: 1px !important;
+  margin-bottom: 1px;
 }
 
 .search-panel-input-value {

browser/themes/shared/urlbar-autocomplete.inc.css

@@ -379,7 +379,8 @@
 
 /* Search one-offs. */
 #urlbar .search-one-offs {
-  -moz-box-orient: horizontal;
+  display: flex;
+  align-items: start;
   padding-block: 16px;
 }
 
@@ -398,17 +399,26 @@
 
 #urlbar .search-panel-header {
   padding: 0;
+  min-height: 32px;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
 
+#urlbar .search-panel-one-offs-header-label {
+  margin: 0;
+}
+
 #urlbar .searchbar-engine-one-off-item {
   min-width: 32px;
   height: 32px;
   margin: 0 4px;
 }
 
+#urlbar .search-one-offs-spacer {
+  flex-grow: 1;
+}
+
 /* search bar popup */
 
 #PopupSearchAutoComplete {