653670 - Fade out URL bar text overflow in unfocused state

Status: VERIFIED FIXED

(Firefox :: Address Bar, defect, P1)

Description

[Frank Yan (:fryn)]

Attachment: proof-of-concept patch using transparent-to-white gradient

URL Bar text overflow should smoothly fade out when unfocused.

I've made a proof-of-concept patch for this that works perfectly when the URL bar text field background is white, but it doesn't work for other backgrounds, e.g. high-contrast mode.

The most robust method of doing this is to apply an SVG mask to the URL bar text field. I'll investigate doing this later.

Another approach would be to implement CSS text-overflow: ellipsis and use that. :P

Comment 1

[:Gijs (he/him)]

(In reply to Frank Yan (:fryn) from comment #1)
> Created attachment 529055 [details] [diff] [review]
> proof-of-concept patch using transparent-to-white gradient
> 
> URL Bar text overflow should smoothly fade out when unfocused.
> 
> I've made a proof-of-concept patch for this that works perfectly when the
> URL bar text field background is white, but it doesn't work for other
> backgrounds, e.g. high-contrast mode.
> 
> The most robust method of doing this is to apply an SVG mask to the URL bar
> text field. I'll investigate doing this later.
> 
> Another approach would be to implement CSS text-overflow: ellipsis and use
> that. :P

We do now have text-overflow: ellipsis, so we could use it if we wanted. However, because the background-color here is opaque rather than an image, wouldn't we be able to use the system textbox background color rather than hardcoding #fff? That should work with high contrast themes, I believe...

Comment 2

[Dão Gottwald [:dao]]

Attachment: Bug 653670 - Fade out URL bar text overflow in unfocused state.

Review commit: https://reviewboard.mozilla.org/r/138008/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/138008/

Comment 3

[Jared Wein [:jaws] (please needinfo? me)]

Comment on attachment 8866384 [details]
Bug 653670 - Fade out URL bar text overflow in unfocused state.

https://reviewboard.mozilla.org/r/138008/#review141184

Comment 4

[Dão Gottwald [:dao]]

Comment on attachment 8866384 [details]
Bug 653670 - Fade out URL bar text overflow in unfocused state.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/138008/diff/1-2/

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b4bc0ff1648e
Fade out URL bar text overflow in unfocused state. r=jaws

Comment 6

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/b4bc0ff1648e

Comment 7

[Johann Hofmann [:johannh]]

Mozscreenshots results:

https://screenshots.mattn.ca/compare/?oldProject=mozilla-central&oldRev=ce2218406119c36a551e3faea4e192186ee46cc5&newProject=mozilla-central&newRev=3df2494ade45b92728a1e0e4c0ca257b162ff94c

The Windows 8 differences in the URL bar text might be bug 1366240.

Comment 8

[ovidiu boca[:Ovidiu]]

I tested this issue on Mac OS X 10.10, Ubuntu 16.04, Windows 10 x64 and Windows 8.1 x64 with FF Nightly(2017-06-08) and I can't see any differences, on all OSes the text overflow is smoothly fade out when unfocused.
Please tell me if I need to do more tests before I mark this as Verified - Fix. Thanks