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)
Tracking
()
People
(Reporter: ppop, Assigned: adw)
References
(Blocks 2 open bugs)
Details
Attachments
(3 files)
(deleted),
image/png
|
Details | |
(deleted),
text/x-phabricator-request
|
Details | |
(deleted),
patch
|
RyanVM
:
approval-mozilla-beta+
|
Details | Diff | Splinter Review |
[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]:
- Open the Beta build with the prefs mentioned in the prerequisites.
- Click the awesomebar and enter a high-confidence keyword (e.g. grind culture).
- 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:
Reporter | ||
Comment 1•1 year ago
|
||
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.
Updated•1 year ago
|
Assignee | ||
Comment 2•1 year ago
|
||
I've asked Josh for clarification on using a consistent color for this text in Pocket suggestions as well as other suggestion types.
Assignee | ||
Comment 3•1 year ago
|
||
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
Assignee | ||
Updated•1 year ago
|
Assignee | ||
Comment 5•1 year ago
|
||
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
Comment 6•1 year ago
|
||
bugherder |
Reporter | ||
Comment 7•1 year ago
|
||
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 8•1 year ago
|
||
Comment on attachment 9348506 [details] [diff] [review]
Beta 117 patch
Approved for 117.0b7.
Updated•1 year ago
|
Updated•1 year ago
|
Reporter | ||
Comment 10•1 year ago
|
||
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.
Updated•1 year ago
|
Description
•