Closed Bug 1846983 Opened 1 year ago Closed 1 year ago

The text of the Pocket" Recommended reads" Best Match entries is displayed in blue instead of black on Linux

Categories

(Firefox :: Address Bar, defect, P3)

Desktop
Linux
defect

Tracking

()

VERIFIED FIXED
118 Branch
Tracking Status
firefox117 --- verified
firefox118 --- verified

People

(Reporter: ppop, Assigned: adw)

References

(Blocks 2 open bugs)

Details

Attachments

(3 files)

Attached image ubuntu_blue.png (deleted) —

[Affected versions]:

  • Firefox Beta 116.0b2 (Build ID: 20230801180159)
  • Firefox Nightly 118.0a1 (Build ID: 20230802220030)

[Affected platforms]:

  • Ubuntu 22.04 x64

[Prerequisites]:

  • Have the latest Firefox Beta build installed.
  • Have the following prefs set:
    "browser.search.region" to "US"
    "browser.urlbar.pocket.featureGate" to true
    "browser.urlbar.bestMatch.enabled" to true

[Steps to reproduce]:

  1. Open the Beta build with the prefs mentioned in the prerequisites.
  2. Click the awesomebar and enter a high-confidence keyword (e.g. grind culture).
  3. observe the Recommended reads entry.

[Expected result]:

  • The collection description's text is displayed in black.

[Actual result]:

  • The collection description's text is displayed in blue.

[Notes]:

  • The issue is reproducible using both high-confidence and low-confidence keywords.
  • The issue is not reproducible on Windows/macOS.
  • Attached a screenshot of the issue:
Blocks: 1837096

After further investigation it appears that the issue is only reproducible using the Firefox light theme and text color depends on the chosen system accent color.

Priority: -- → P3

I've asked Josh for clarification on using a consistent color for this text in Pocket suggestions as well as other suggestion types.

Assignee: nobody → adw
Status: NEW → ASSIGNED

We use --urlbar-popup-action-color for rich suggestion description and bottom
text. It looks bad on Linux where the action color is bright orange, which is
what this bug is about. It looks fine on Windows and Mac.

UX calls for this text to be the "secondary" color (see this Slack thread). The secondary
color is defined in the Pocket and rich suggestions Figmas, where it's called
--light-theme-text-secondary and defined as #5B5B66. (The Pocket Figma shows
the description text using the primary color, but that's incorrect and is part of
what the Slack thread is about.)

#5B5B66 is used in a bunch of places and in particular it's called
--color-gray-70 in the design tokens CSS, so it seems to be
part of the new design system. However, we don't use it in the urlbar, and
introducing a new color that's close to but not exactly the same as
--urlbar-popup-action-color on Windows and Mac would also look bad.

For now I think the best thing to do is continue using
--urlbar-popup-action-color where it looks fine. On Linux and on all platforms
when a lwt is enabled, use a new color that's the current color mixed with 73%
transparent, which is as close as I could get to #5B5B66 in light mode. At
some point, we should think about changing all the urlbar colors to use the new
design system.

This patch also makes some other fixes:

  • Remove --urlbar-popup-action-color on root in urlbarView.css since it's
    always overridden and that color is never used AFAICT
  • Remove an used --urlbar-popup-action-color: #30e60b; rule on
    :root[lwt-toolbar-field-focus-brighttext]
  • Fix selection and hover colors for action and URLs in rich suggestions
Pushed by dwillcoxon@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/a5e815e81cc1 Fix secondary text color in rich suggestions and make some other related fixes. r=dao
Flags: qe-verify+
Flags: in-testsuite-
Attached patch Beta 117 patch (deleted) — Splinter Review

The m-c patch doesn't apply cleanly due to a small conflict with bug 1846878.

Approval Request Comment
[Feature/Bug causing the regression]: Pocket suggestions in the urlbar
[User impact if declined]: This is required for the Pocket suggestions feature we intend to ship as an experiment in 117.
[Is this code covered by automated tests?]: This patch only changes some CSS styling so it's only a visual change. The related code is covered but this particular bug can't really be tested in an automated way.
[Has the fix been verified in Nightly?]: No
[Needs manual test from QE? If yes, steps to reproduce]: Should be clear from comments
[List of other uplifts needed for the feature/fix]:
[Is the change risky?]: Low risk
[Why is the change risky/not risky?]: CSS-only visual change
[String changes made/needed]: None

Attachment #9348506 - Flags: approval-mozilla-beta?
Status: ASSIGNED → RESOLVED
Closed: 1 year ago
Resolution: --- → FIXED
Target Milestone: --- → 118 Branch

I've verified that the issue is no longer reproducible on the latest Nightly, the description now uses the correct colors. Tested using Firefox Nightly 118.0a1 (Build ID 20230811095324) on Ubuntu 22.04 x64.

Comment on attachment 9348506 [details] [diff] [review]
Beta 117 patch

Approved for 117.0b7.

Attachment #9348506 - Flags: approval-mozilla-beta? → approval-mozilla-beta+
QA Whiteboard: [qa-triaged]

I've verified that the issue is no longer reproducible on the latest Beta as well. Tested using Firefox Beta 117.0b7 (Build ID 20230813180142) on Ubuntu 22.04 x64.

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

Attachment

General

Created:
Updated:
Size: