Skip to content

Fix nav hover for fx theme #16147

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 10, 2025
Merged

Conversation

janbrasna
Copy link
Contributor

@janbrasna janbrasna commented Apr 2, 2025

If this changeset needs to go into the FXC codebase, please add the WMO and FXC label. 🤷 (most likely 🔥🦊)

One-line summary

Adds a little specificity to menu anchor colors, to hide flash of Fx–themed palette on some pages.

Significant changes and points to review

There seems to be some sort of JS delay involved, that applies the final color based on the state of the panel etc. as the final color is often green, not black, and if the link is blue pre-JS, the flash of unexpected color is a bit jarring. This makes the hover anchors on Fx-themed pages consistent with rest of the site.

NB: Went for :is() shenanigans only because SASS doesn't allow a& (and the selector above is not for anchor but just the pseudo on the class before) and I wanted to keep the rules together with the others, not repeating another block afterwards just for this; technically it's not needed and just a:hover would suffice otherwise to resolve this.

(Oh and I'm not adding it to the rule above, as I'm working on underline-based hovers instead of boutique borders in #15855, and the decoration would interfere with that at some point…)

Issue / Bugzilla link

Fixes #15873
(also closes #16027 as superseded)

Testing

http://localhost:8000/fr/firefox/challenge-the-default/
http://localhost:8000/en/firefox/family/

@janbrasna janbrasna requested a review from a team as a code owner April 2, 2025 21:41
Copy link

codecov bot commented Apr 2, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 79.80%. Comparing base (c83deba) to head (a8f1d5b).
Report is 22 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main   #16147      +/-   ##
==========================================
+ Coverage   79.56%   79.80%   +0.24%     
==========================================
  Files         160      160              
  Lines        8440     8506      +66     
==========================================
+ Hits         6715     6788      +73     
+ Misses       1725     1718       -7     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@wen-2018 wen-2018 self-assigned this Apr 10, 2025
Copy link
Collaborator

@wen-2018 wen-2018 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

r+

@wen-2018 wen-2018 merged commit 6b34c77 into mozilla:main Apr 10, 2025
5 checks passed
@janbrasna janbrasna deleted the fix/nav-fx-hover branch April 10, 2025 18:02
Ingi-Hong pushed a commit to Ingi-Hong/bedrock that referenced this pull request Apr 13, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Fx–themed pages briefly show blue links in nav on hover
2 participants