Bug 1823791 - Use width to set the flex-basis of urlbar/searchbar. r=dao,Gijs

And use flex-shrink: 0 to prevent the urlbar from shrinking.

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

browser/base/content/browser.css

@@ -768,26 +768,25 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks {
  * on hidpi don't accidentally result in the buttons going into overflow.
  */
 #urlbar-container {
-  min-width: calc(310px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
+  width: calc(310px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
 }
 
 /* When the download button OR the unified extensions button is shown, we leave
  * 310px plus the space needed for a single button as described above. */
-#nav-bar[downloadsbuttonshown] #urlbar-container,
-#nav-bar[unifiedextensionsbuttonshown] #urlbar-container {
-  min-width: calc(310px + 24px + 2 * var(--toolbarbutton-inner-padding));
+#nav-bar:is([downloadsbuttonshown], [unifiedextensionsbuttonshown]) #urlbar-container {
+  width: calc(310px + 24px + 2 * var(--toolbarbutton-inner-padding));
 }
 
 /* When both the download and unified extensions buttons are visible, we use
  * the base min-width value. */
 #nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container {
-  min-width: 310px;
+  width: 310px;
 }
 
 /* Customize mode is difficult to use at moderate window width if the Urlbar
    remains 310px wide. */
 :root[customizing] #urlbar-container {
-  min-width: 280px;
+  width: 280px;
 }
 
 #identity-icon-box {
@@ -796,17 +795,16 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks {
 
 @media (max-width: 770px) {
   #urlbar-container {
-    min-width: calc(240px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
+    width: calc(240px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
   }
-  #nav-bar[downloadsbuttonshown] #urlbar-container,
-  #nav-bar[unifiedextensionsbuttonshown] #urlbar-container {
-    min-width: calc(240px + 24px + 2 * var(--toolbarbutton-inner-padding));
+  #nav-bar:is([downloadsbuttonshown], [unifiedextensionsbuttonshown]) #urlbar-container {
+    width: calc(240px + 24px + 2 * var(--toolbarbutton-inner-padding));
   }
   #nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container {
-    min-width: 240px;
+    width: 240px;
   }
   :root[customizing] #urlbar-container {
-    min-width: 245px;
+    width: 245px;
   }
   #identity-icon-box {
     max-width: 80px;

browser/components/customizableui/test/browser_1795260_searchbar_overflow_toolbar.js

@@ -17,7 +17,9 @@ add_task(async function test_syncPreferenceWithWidget() {
   let container = document.getElementById(WIDGET_ID);
   // Set a disproportionately large width, which could be from a saved bigger
   // window, or what not.
-  container.style.width = window.innerWidth * 2 + "px";
+  let width = window.innerWidth * 2;
+  container.setAttribute("width", width);
+  container.style.width = `${width}px`;
 
   // Stuff shouldn't overflow.
   ok(

browser/themes/shared/urlbar-searchbar.css

@@ -269,7 +269,7 @@
 
 #urlbar-container,
 #wrapper-urlbar-container {
-  flex: 400 400;
+  flex: 400 0 auto;
 }
 
 #urlbar-search-splitter {
@@ -661,11 +661,12 @@
 
 #search-container {
   min-width: 125px;
+  width: 125px;
 }
 
 #search-container,
 #wrapper-search-container {
-  flex: 175 175;
+  flex: 175 175 auto;
 }
 
 #search-container[width] {