Bug 1577000 - Fix Megabar breakout width on window resize. r=dao

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

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

browser/components/urlbar/UrlbarInput.jsm

@@ -179,6 +179,8 @@ class UrlbarInput {
 
     this.dropmarker.addEventListener("mousedown", this);
 
+    this.window.addEventListener("resize", this);
+
     // This is used to detect commands launched from the panel, to avoid
     // recording abandonment events when the command causes a blur event.
     this.view.panel.addEventListener("command", this, true);
@@ -208,6 +210,7 @@ class UrlbarInput {
       this.removeEventListener(name, this);
     }
     this.dropmarker.removeEventListener("mousedown", this);
+    this.window.removeEventListener("resize", this);
 
     this.endLayoutBreakout(true);
 
@@ -1678,6 +1681,22 @@ class UrlbarInput {
     });
   }
 
+  async _on_resize(event) {
+    if (!(this.megabar && this._layoutBreakoutPlaceholder)) {
+      return;
+    }
+
+    let px = number => number.toFixed(2) + "px";
+    let width = await this.window.promiseDocumentFlushed(() => {
+      // We use the container because it remains flexible unlike the broken-out
+      // Urlbar.
+      return this.textbox.closest("#urlbar-container").clientWidth;
+    });
+    this.window.requestAnimationFrame(() => {
+      this.textbox.style.setProperty("--urlbar-width", px(width));
+    });
+  }
+
   _on_select(event) {
     // On certain user input, AutoCopyListener::OnSelectionChange() updates
     // the primary selection with user-selected text (when supported).

browser/components/urlbar/UrlbarView.jsm

@@ -1045,6 +1045,10 @@ class UrlbarView {
   }
 
   _on_resize() {
+    if (this.megabar) {
+      return;
+    }
+
     if (this._windowOuterWidth == this.window.outerWidth) {
       // Sometimes a resize event is fired when the window's size doesn't
       // actually change; at least, browser_tabMatchesInAwesomebar.js triggers

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

@@ -28,7 +28,7 @@
 
 #urlbar-container,
 #search-container {
-  padding: 3px 5px;
+  margin: 3px 5px;
 }
 
 #urlbar,