From 752bb6183f2bffe99811bf80f903ff0cd7e31b97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A3o=20Gottwald?= Date: Wed, 10 May 2017 18:53:58 +0200 Subject: [PATCH] Bug 653670 - Fade out URL bar text overflow in unfocused state. r=jaws MozReview-Commit-ID: 4IIvz1vUJls --HG-- extra : rebase_source : 83a1b80fb2437e174a4658a3b0adbc067240c2ed --- browser/base/content/browser.css | 66 +++++++++++++------------ browser/base/content/urlbarBindings.xml | 10 ++-- browser/themes/linux/browser.css | 2 +- browser/themes/osx/browser.css | 2 +- browser/themes/windows/browser.css | 2 +- 5 files changed, 41 insertions(+), 41 deletions(-) diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css index 03e07c787f9b..d286c1167f5f 100644 --- a/browser/base/content/browser.css +++ b/browser/base/content/browser.css @@ -424,29 +424,6 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks { 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; @@ -474,11 +451,42 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks { 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) { @@ -504,14 +512,8 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks { 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; } diff --git a/browser/base/content/urlbarBindings.xml b/browser/base/content/urlbarBindings.xml index f5cc953d63c5..70140d0d8d31 100644 --- a/browser/base/content/urlbarBindings.xml +++ b/browser/base/content/urlbarBindings.xml @@ -40,7 +40,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/. 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"/> - false - @@ -1000,10 +998,10 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/. this._hideURLTooltip(); break; case "overflow": - this._contentIsCropped = true; + this.setAttribute("textoverflow", "true"); break; case "underflow": - this._contentIsCropped = false; + this.removeAttribute("textoverflow"); this._hideURLTooltip(); break; } diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css index 4f93ba3f7436..e3cef6d1a05b 100644 --- a/browser/themes/linux/browser.css +++ b/browser/themes/linux/browser.css @@ -363,7 +363,7 @@ menuitem.bookmark-item { } .urlbar-input-box { - margin-inline-start: 0; + margin: 0; } .urlbar-input-box, diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css index e7ab1df6e87f..c587c90818e1 100644 --- a/browser/themes/osx/browser.css +++ b/browser/themes/osx/browser.css @@ -717,7 +717,7 @@ toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-p } .urlbar-input-box { - margin-inline-start: 0; + margin: 0; padding: 3px 0 2px; } diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css index 21850478eb17..22931d28a131 100644 --- a/browser/themes/windows/browser.css +++ b/browser/themes/windows/browser.css @@ -843,7 +843,7 @@ html|*.urlbar-input:-moz-lwtheme::placeholder, } .urlbar-input-box { - margin-inline-start: 0; + margin: 0; } .urlbar-input-box,