Bug 1370401 - Don't allow URL bar width to shrink smaller than its contents. r=dao,Gijs
☠☠ backed out by 733123f73ced ☠ ☠
authorNihanth Subramanya <nhnt11@gmail.com>
Wed, 06 Sep 2017 05:53:06 +0530
changeset 433270 5dc35eb2c70b5e60e334e9b8a779dc5dd273608a
parent 433269 375708697623fe63e87bf2e28ecd29a250c3a7ee
child 433271 134474e7c8a93b2565502b4a751a8ed0a0819512
push id1567
push userjlorenzo@mozilla.com
push dateThu, 02 Nov 2017 12:36:05 +0000
treeherdermozilla-release@e512c14a0406 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao, Gijs
bugs1370401
milestone57.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1370401 - Don't allow URL bar width to shrink smaller than its contents. r=dao,Gijs MozReview-Commit-ID: yUldCs59cZ
browser/base/content/browser.css
browser/base/content/browser.js
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -522,29 +522,34 @@ toolbar:not(#TabsToolbar) > #personal-bo
 
 /* Hide menu elements intended for keyboard access support */
 #main-menubar[openedwithkey=false] .show-only-for-keyboard {
   display: none;
 }
 
 /* ::::: location bar & search bar ::::: */
 
-/* url bar min-width is defined further down, together with the maximum size
- * of the identity icon block, for different window sizes.
+/* We leave 15ch plus whatever space the download button will need when it
+ * appears. Normally this should be 16px for the icon, plus 2 * 2px padding
+ * plus the toolbarbutton-inner-padding. We're adding 4px to ensure things
+ * like rounding on hidpi don't accidentally result in the button going
+ * into overflow.
+ *
+ * 15ch seems reasonable, it's enough to show "https://www.mozilla".
  */
-#search-container {
-  min-width: 25ch;
+.urlbar-input-box {
+  min-width: calc(15ch + 24px + 2 * var(--toolbarbutton-inner-padding));
 }
 
-#urlbar,
-.searchbar-textbox {
-  /* Setting a width and min-width to let the location & search bars maintain
-     a constant width in case they haven't be resized manually. (bug 965772) */
-  width: 1px;
-  min-width: 1px;
+#nav-bar[downloadsbuttonshown] .urlbar-input-box {
+  min-width: 15ch;
+}
+
+#search-container {
+  min-width: 25ch;
 }
 
 #urlbar {
   -moz-binding: url(chrome://browser/content/urlbarBindings.xml#urlbar);
 }
 
 /* Display URLs left-to-right but right aligned in RTL mode. */
 html|input.urlbar-input:-moz-locale-dir(rtl) {
@@ -717,75 +722,39 @@ html|input.urlbar-input[textoverflow]:no
   -moz-user-focus: normal;
 }
 
 #urlbar[pageproxystate="invalid"] > #identity-box {
   pointer-events: none;
   -moz-user-focus: ignore;
 }
 
-
-/* We leave 49ch plus whatever space the download button will need when it
- * appears. Normally this should be 16px for the icon, plus 2 * 2px padding
- * plus the toolbarbutton-inner-padding. We're adding 4px to ensure things
- * like rounding on hidpi don't accidentally result in the button going
- * into overflow.
- */
-#urlbar-container {
-  min-width: calc(49ch + 24px + 2 * var(--toolbarbutton-inner-padding));
-}
-
-#nav-bar[downloadsbuttonshown] #urlbar-container {
-  min-width: 49ch;
-}
-
 #identity-icon-labels {
   max-width: 17em;
 }
+
 @media (max-width: 700px) {
-  #urlbar-container {
-    min-width: calc(44ch + 24px + 2 * var(--toolbarbutton-inner-padding));
-  }
-  #nav-bar[downloadsbuttonshown] #urlbar-container {
-    min-width: 44ch;
-  }
-
   #identity-icon-labels {
     max-width: 60px;
   }
 }
+
 @media (max-width: 600px) {
-  #urlbar-container {
-    min-width: calc(39ch + 24px + 2 * var(--toolbarbutton-inner-padding));
-  }
-  #nav-bar[downloadsbuttonshown] #urlbar-container {
-    min-width: 39ch;
-  }
   #identity-icon-labels {
     max-width: 50px;
   }
 }
+
 @media (max-width: 500px) {
-  #urlbar-container {
-    min-width: calc(34ch + 24px + 2 * var(--toolbarbutton-inner-padding));
-  }
-  #nav-bar[downloadsbuttonshown] #urlbar-container {
-    min-width: 34ch;
-  }
   #identity-icon-labels {
     max-width: 40px;
   }
 }
+
 @media (max-width: 400px) {
-  #urlbar-container {
-    min-width: calc(27ch + 24px + 2 * var(--toolbarbutton-inner-padding));
-  }
-  #nav-bar[downloadsbuttonshown] #urlbar-container {
-    min-width: 27ch;
-  }
   #identity-icon-labels {
     max-width: 30px;
   }
 }
 
 #identity-icon-country-label {
   direction: ltr;
 }
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -2847,16 +2847,34 @@ function UpdateUrlbarSearchSplitterState
 
   if (document.documentElement.getAttribute("customizing") == "true") {
     if (splitter) {
       splitter.remove();
     }
     return;
   }
 
+  // Ensure the URL bar and search bar's width attributes are set.
+  // Otherwise, their sizes could change and cause them to "jump"
+  // when switching tabs depending on the sizes of their content.
+  // See bugs 1370401 and 965772.
+  // This function is called repeatedly while resizing the window,
+  // so we only get the DOMWindowUtils object if we're sure we'll
+  // use it in order to avoid jank from QueryInterface.
+  if ((urlbar && !urlbar.width) || (searchbar && !searchbar.width)) {
+    let windowUtils = window.QueryInterface(Ci.nsIInterfaceRequestor)
+                            .getInterface(Ci.nsIDOMWindowUtils);
+    if (urlbar) {
+      urlbar.width = windowUtils.getBoundsWithoutFlushing(urlbar).width;
+    }
+    if (searchbar) {
+      searchbar.width = windowUtils.getBoundsWithoutFlushing(searchbar).width;
+    }
+  }
+
   // If the splitter is already in the right place, we don't need to do anything:
   if (splitter &&
       ((splitter.nextSibling == searchbar && splitter.previousSibling == urlbar) ||
        (splitter.nextSibling == urlbar && splitter.previousSibling == searchbar))) {
     return;
   }
 
   var ibefore = null;