1705449 - Make urlbar/searchbar placeholder text a bit more contrasted (And closer to spec)

Status: VERIFIED FIXED

(Firefox :: Address Bar, defect, P2)

Description

[Harry Twyford]

Attachment: Screen Shot 2021-04-15 at 11.53.34 AM.png

When focusing the address bar in Dark mode, the placeholder text and "This time search with" text are the wrong color. They're off-white instead of grey. I can reproduce this on a fresh profile.

Comment 1

[Marco Bonardo [:mak]]

We did this on purpose in bug 1704073 because Figma uses grey only when unfocused, currentColor when focused, only in brighttext.

Comment 2

[Marco Bonardo [:mak]]

Attachment: immagine.png

There is some inconcistency in Figma though.

This time, search with looks correct, but the placeholder in the input field sometimes is lighter, sometimes it's not.
I suspect it's based on the panel being open (so the background).

Comment 3

[Marco Bonardo [:mak]]

Let's ensure we do the right thing, reopening.

Comment 4

[Marco Bonardo [:mak]]

Amy, could you please clarify the expected outcome? Did you mean to make the placeholder lighter when the urlbar is focused, like it is in Nightly, or is that a spec bug?

I think the "This time, search with:" change makes sense regardless to improve contrast.
But the placeholder being full color seems a bit confusing for the user.

Comment 5

[Amy Lee [:amylee] UX]

Hi,

The place holder copy should be secondary text colour (#BFBFC9) - Not full colour. Thanks.

Comment 6

[Marco Bonardo [:mak]]

Sorry daisuke, we must revert the placeholder change from bug 1704073 and ensure the color is #BFBFC9. The header change is fine instead.

Comment 7

[Daisuke Akatsuka (:daisuke)]

Okay, I will do it soon.

Comment 8

[Daisuke Akatsuka (:daisuke)]

Attachment: revert.png

This is a screenshot for reverted.

Comment 9

[Daisuke Akatsuka (:daisuke)]

Attachment: explicit-BFBFC9.png

And, this is a screenshot that I set the color #BFBFC9 explicitly.
Comparing both, it seems that the reverted color is a bit darker.
Thus, for now, I will post a patch that sets the color explicitly. (is it ok?)

Comment 10

[Daisuke Akatsuka (:daisuke)]

Attachment: Bug 1705449: Set placeholder opacity to make the contrast stronger.r?mak!

Comment 11

[Marco Bonardo [:mak]]

See my comment in phab, I think the basic idea is to make the color a bit more contrasted in both Light and Dark, compared to what we have without Proton. Hardcoding colors here seems dangerous since there's already an opacity involved, thus I'd just tweak opacity to get much closer to the spec.

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/887e5ec02c7c
Set placeholder opacity to make the contrast stronger.r=mak

Comment 13

[Alexandru Michis [:malexandru]]

https://hg.mozilla.org/mozilla-central/rev/887e5ec02c7c

Comment 14

[Petruta Horea [:phorea]]

Verified as fixed on Firefox 89 beta 5 under Win 10 64-bit, Mac OSX 11.2.3 and Ubuntu 18.04 64-bit.