Bug 1370401 - Don't allow URL bar width to shrink smaller than its contents. r=Gijs draft
authorNihanth Subramanya <nhnt11@gmail.com>
Wed, 06 Sep 2017 05:53:06 +0530
changeset 664881 23833213bb02d7d16f76a0053fb132ddfc292c4f
parent 663831 1888ec2f277f6bb26271b8808e08914a21db9efe
child 731575 075076142b538a8d7f76e17e77996098bf667719
push id79839
push usernhnt11@gmail.com
push dateThu, 14 Sep 2017 14:41:30 +0000
reviewersGijs
bugs1370401
milestone57.0a1
Bug 1370401 - Don't allow URL bar width to shrink smaller than its contents. r=Gijs MozReview-Commit-ID: D3vTVmtDoD
browser/base/content/browser.css
browser/base/content/browser.js
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -518,29 +518,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 20ch 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.
+ *
+ * 25ch seems reasonable: "https://www." is ~12ch, leaving ~8ch for the rest.
  */
-#search-container {
-  min-width: 25ch;
+.urlbar-input-box {
+  min-width: calc(20ch + 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: 20ch;
+}
+
+#search-container {
+  min-width: 25ch;
 }
 
 #urlbar {
   -moz-binding: url(chrome://browser/content/urlbarBindings.xml#urlbar);
 }
 
 /*
  * Display visual cue that browser is under remote control by Marionette.
@@ -700,75 +705,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
@@ -2835,16 +2835,30 @@ 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 to
+  // prevent them from changing when switching tabs.
+  // See bugs 1370401 and 965772.
+  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;