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 664880 2aac01b0907c758eb3d672be33e4a28df0a2e7d9
parent 663831 1888ec2f277f6bb26271b8808e08914a21db9efe
child 731574 771b555665920515fb77206343a0f558e9663825
push id79838
push usernhnt11@gmail.com
push dateThu, 14 Sep 2017 14:36:53 +0000
reviewersGijs
bugs1370401
milestone57.0a1
Bug 1370401 - Don't allow URL bar width to shrink smaller than its contents. r=Gijs MozReview-Commit-ID: 5aaZ9J4KTSp
browser/base/content/browser.css
browser/base/content/browser.js
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -521,28 +521,21 @@ toolbar:not(#TabsToolbar) > #personal-bo
   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.
  */
+
 #search-container {
   min-width: 25ch;
 }
 
-#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;
-}
-
 #urlbar {
   -moz-binding: url(chrome://browser/content/urlbarBindings.xml#urlbar);
 }
 
 /*
  * Display visual cue that browser is under remote control by Marionette.
  * This is to help users visually distinguish a user agent session that
  * is under remote control from those used for normal browsing sessions.
@@ -700,75 +693,55 @@ 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
+/* 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.
+ *
+ * 20ch seems reasonable: "https://www." is ~12ch, leaving ~8ch for the rest.
  */
-#urlbar-container {
-  min-width: calc(49ch + 24px + 2 * var(--toolbarbutton-inner-padding));
+.urlbar-input-box {
+  min-width: calc(20ch + 24px + 2 * var(--toolbarbutton-inner-padding));
 }
 
-#nav-bar[downloadsbuttonshown] #urlbar-container {
-  min-width: 49ch;
+#nav-bar[downloadsbuttonshown] .urlbar-input-box {
+  min-width: 20ch;
 }
 
 #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;