Closed Bug 1704073 Opened 3 years ago Closed 3 years ago

Address bar placeholder text doesn't have enough contrast in Dark theme

Categories

(Firefox :: Address Bar, defect, P2)

Firefox 89
defect
Points:
2

Tracking

()

VERIFIED FIXED
89 Branch
Iteration:
89.2 - Apr 5 - Apr 18
Tracking Status
firefox-esr78 --- unaffected
firefox87 --- unaffected
firefox88 --- unaffected
firefox89 --- verified

People

(Reporter: phorea, Assigned: daisuke)

References

(Blocks 2 open bugs)

Details

(Whiteboard: [proton-address-bar] [priority:2a])

Attachments

(2 files)

Affected versions

  • Fx89.0a1 2021-04-08

Affected platforms

  • Windows 10 64-bit
  • OSX 11.2.3

Preconditions

  • The following prefs are enabled in about:config:
    browser.proton.enabled
    browser.proton.toolbar.enabled
    browser.proton.urlbar.enabled

Steps to reproduce

  1. Launch Firefox and from about:addons - Themes, select Dark Theme
  2. Focus address bar and select a search shortcut
  3. Observe the contrast between background and text ("Search the Web", "This time search with", etc.)

Expected result

  • There is a bigger contrast for all texts, accordingly to Figma

Actual result

  • The text color is lighter than on Figma specs. Some parts of the browser (such as AppMenu, tabs title) have brighter text on today's Nightly.

Regression range

  • Not a regression, text color is the same pre-Proton

(In reply to Petruta Horea [:phorea] from comment #0)

Regression range

  • Not a regression, text color is the same pre-Proton

This is probably the issue. We should verify that we're using Proton text colors throughout the address bar.

Priority: -- → P2
Whiteboard: [proton-address-bar] → [proton-address-bar] [priority:2a]

When unfocused the expected color for placeholders is #BFBFC9, while normal text should be #FBFBFE.
When focused, Figma changes the placeholders color to #FBFBFE, that is probably what we're missing here.
In the light themes there is no change of color.

Assignee: nobody → daisuke
Status: NEW → ASSIGNED
Iteration: --- → 89.2 - Apr 5 - Apr 18
Points: --- → 2

Since the opacity is not 0 for placeholder originaly[1], just changing the color
does not make the same color as figma, we set the opacity as well.
[1] https://searchfox.org/mozilla-central/rev/d9f6cded535d202a9ade4a530e653e659bcb5bbd/layout/style/res/forms.css#214

Summary: Address bar panel text doesn't have enough contrast in Dark theme → Address bar placeholder text doesn't have enough contrast in Dark theme
Attachment #9215351 - Attachment description: Bug 1704073: Make the contrast of placeholder color stronger.r?mak! → Bug 1704073: Make the contrast of placeholders and labels on searchbar stronger.r?mak!
Pushed by dakatsuka.birchill@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/60fe9f6a260e
Make the contrast of placeholders and labels on searchbar stronger.r=mak
Status: ASSIGNED → RESOLVED
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → 89 Branch
Blocks: 1705449

Note for QA, we'll be reverting the placeholder text in bug 1705449.

Verified as fixed on Firefox 89 beta 5 across platforms.

Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: