--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -419,39 +419,16 @@ toolbar:not(#TabsToolbar) > #personal-bo
 #PanelUI-feeds > .feed-toolbarbutton:-moz-locale-dir(rtl) {
   direction: rtl;
 }
 
 #panelMenu_bookmarksMenu > .bookmark-item {
   max-width: none;
 }
 
-#urlbar-container {
-  min-width: 50ch;
-}
-
-#search-container {
-  min-width: 25ch;
-}
-
-/* Apply crisp rendering for favicons at exactly 2dppx resolution */
-@media (resolution: 2dppx) {
-  .searchbar-engine-image {
-    image-rendering: -moz-crisp-edges;
-  }
-}
-
-#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;
-}
-
 #main-window:-moz-lwtheme {
   background-repeat: no-repeat;
   background-position: top right;
 }
 
 %ifdef XP_MACOSX
 #main-window[inFullscreen="true"] {
   padding-top: 0; /* override drawintitlebar="true" */
@@ -469,21 +446,52 @@ toolbar:not(#TabsToolbar) > #personal-bo
   -moz-binding: url("chrome://browser/content/urlbarBindings.xml#menuitem-iconic-tooltip");
 }
 
 /* Hide menu elements intended for keyboard access support */
 #main-menubar[openedwithkey=false] .show-only-for-keyboard {
   display: none;
 }
 
-/* ::::: location bar ::::: */
+/* ::::: location bar & search bar ::::: */
+
+#urlbar-container {
+  min-width: 50ch;
+}
+
+#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);
 }
 
+/* Fade out URL on overflow */
+html|input.urlbar-input[textoverflow]:not([focused]) {
+  /* Don't need to worry about RTL here since we use direction:ltr for the
+     input field. */
+  mask-image: linear-gradient(to left, transparent, black 3em);
+}
+
+/* Apply crisp rendering for favicons at exactly 2dppx resolution */
+@media (resolution: 2dppx) {
+  .searchbar-engine-image {
+    image-rendering: -moz-crisp-edges;
+  }
+}
+
 /* Always show URLs LTR. */
 .ac-url-text:-moz-locale-dir(rtl),
 .ac-title-text[lookslikeurl]:-moz-locale-dir(rtl) {
   direction: ltr !important;
 }
 
 /* For non-action items, hide the action text; for action items, hide the URL
    text. */
@@ -499,24 +507,18 @@ toolbar:not(#TabsToolbar) > #personal-bo
 }
 #PopupAutoCompleteRichResult[noactions] > richlistbox > richlistitem.overridable-action > .ac-action {
   display: none;
 }
 #PopupAutoCompleteRichResult[noactions] > richlistbox > richlistitem.overridable-action > .ac-type-icon {
   list-style-image: none;
 }
 
-#urlbar:not([actiontype="switchtab"]):not([actiontype="extension"]) > #urlbar-display-box {
-  display: none;
-}
-
-#urlbar:not([actiontype="switchtab"]) > #urlbar-display-box > #switchtab {
-  display: none;
-}
-
+#urlbar:not([actiontype="switchtab"]):not([actiontype="extension"]) > #urlbar-display-box,
+#urlbar:not([actiontype="switchtab"]) > #urlbar-display-box > #switchtab,
 #urlbar:not([actiontype="extension"]) > #urlbar-display-box > #extension {
   display: none;
 }
 
 #PopupAutoComplete > richlistbox > richlistitem > .ac-type-icon,
 #PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon,
 #PopupAutoComplete > richlistbox > richlistitem > .ac-tags,
 #PopupAutoComplete > richlistbox > richlistitem > .ac-separator,

--- a/browser/base/content/urlbarBindings.xml
+++ b/browser/base/content/urlbarBindings.xml
@@ -35,17 +35,17 @@ file, You can obtain one at http://mozil
         <xul:hbox anonid="textbox-input-box"
                   class="textbox-input-box urlbar-input-box"
                   flex="1" xbl:inherits="tooltiptext=inputtooltiptext">
           <children/>
           <html:input anonid="input"
                       class="autocomplete-textbox urlbar-input textbox-input uri-element-right-align"
                       allowevents="true"
                       inputmode="url"
-                      xbl:inherits="tooltiptext=inputtooltiptext,value,maxlength,disabled,size,readonly,placeholder,tabindex,accesskey"/>
+                      xbl:inherits="tooltiptext=inputtooltiptext,value,maxlength,disabled,size,readonly,placeholder,tabindex,accesskey,focused,textoverflow"/>
         </xul:hbox>
         <xul:dropmarker anonid="historydropmarker"
                         class="autocomplete-history-dropmarker urlbar-history-dropmarker"
                         tooltiptext="&urlbar.openHistoryPopup.tooltip;"
                         allowevents="true"
                         xbl:inherits="open,enablehistory,parentfocused=focused"/>
         <children includes="hbox"/>
       </xul:hbox>
@@ -686,21 +686,19 @@ file, You can obtain one at http://mozil
           } else {
             url = url + suffix;
           }
 
           this.popup.overrideValue = "http://www." + url;
         ]]></body>
       </method>
 
-      <field name="_contentIsCropped">false</field>
-
       <method name="_initURLTooltip">
         <body><![CDATA[
-          if (this.focused || !this._contentIsCropped)
+          if (this.focused || !this.hasAttribute("textoverflow"))
             return;
           this.inputField.setAttribute("tooltiptext", this.value);
         ]]></body>
       </method>
 
       <method name="_hideURLTooltip">
         <body><![CDATA[
           this.inputField.removeAttribute("tooltiptext");
@@ -995,20 +993,20 @@ file, You can obtain one at http://mozil
               break;
             case "mousemove":
               this._initURLTooltip();
               break;
             case "mouseout":
               this._hideURLTooltip();
               break;
             case "overflow":
-              this._contentIsCropped = true;
+              this.setAttribute("textoverflow", "true");
               break;
             case "underflow":
-              this._contentIsCropped = false;
+              this.removeAttribute("textoverflow");
               this._hideURLTooltip();
               break;
           }
         ]]></body>
       </method>
 
       <!--
         onBeforeTextValueSet is called by the base-binding's .textValue getter.

--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -358,17 +358,17 @@ menuitem.bookmark-item {
 }
 
 .urlbar-textbox-container {
   -moz-appearance: none;
   -moz-box-align: stretch;
 }
 
 .urlbar-input-box {
-  margin-inline-start: 0;
+  margin: 0;
 }
 
 .urlbar-input-box,
 #urlbar-display-box {
   padding-inline-start: 4px;
   border-inline-start: 1px solid var(--urlbar-separator-color);
   border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
   border-image-slice: 1;

--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -712,17 +712,17 @@ toolbarpaletteitem[place="palette"] > #p
 
 #identity-box:-moz-focusring {
   box-shadow: var(--focus-ring-box-shadow);
   border-inline-end-style: none;
   padding-inline-end: 5px;
 }
 
 .urlbar-input-box {
-  margin-inline-start: 0;
+  margin: 0;
   padding: 3px 0 2px;
 }
 
 .urlbar-input-box,
 #urlbar-display-box {
   padding-inline-start: 4px;
   border-inline-start: 1px solid var(--urlbar-separator-color);
   border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);

--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -838,17 +838,17 @@ html|*.urlbar-input:-moz-lwtheme::placeh
   -moz-box-align: center;
 }
 
 .urlbar-textbox-container {
   -moz-box-align: stretch;
 }
 
 .urlbar-input-box {
-  margin-inline-start: 0;
+  margin: 0;
 }
 
 .urlbar-input-box,
 #urlbar-display-box {
   padding-inline-start: 4px;
   border-inline-start: 1px solid var(--urlbar-separator-color);
   border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
   border-image-slice: 1;