Keep Download button text color stable while clicking

[fatadel]

Drop the global a:active rule. It styled every anchor red while clicked, including ones styled as
buttons (e.g. the Download button rendered via BlobUrlLink). Introduced in #5740. Removing it lets anchors keep whatever color their wrapping class sets, avoiding the same trap for any future link-styled element.

Before

Profile

---

After

Profile

---

Fixes #5948

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 85.34%. Comparing base (b868d0e) to head (5a569bb).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #5985   +/-   ##
=======================================
  Coverage   85.34%   85.34%           
=======================================
  Files         318      318           
  Lines       31922    31922           
  Branches     8834     8745   -89     
=======================================
  Hits        27244    27244           
  Misses       4246     4246           
  Partials      432      432           

☔ 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.

[canova]

Looks reasonable to me, but did you manage to figure out why this started to happen after the dark mode? Because I remember seeing this issue in a few more places. For example, the latest one I remember was when I clicked a profile inside https://profiler.firefox.com/uploaded-recordings/ . But then I came back to reproduce it again and I couldn't.. I donno exactly what's going on and it would be good to figure it out.

[fatadel]

The root cause is concrete and the same mechanism explains the uploaded-recordings flash too:

What changed. PR #5740 (dark mode) added these to res/css/global.css:

a              { color: var(--link-foreground-color); }
a:visited      { color: var(--link-visited-foreground-color); }
a:active       { color: var(--link-active-foreground-color); }   /* this is the culprit */

Before that PR there was no global a:active rule, so anchors used whatever color their button-like wrapper class set.

Why it shows up on the Download button. BlobUrlLink renders an <a>. .photon-button has specificity (0,1,0); a:active has (0,1,1) and wins, so the text turns the active-link color while the mouse button is held. My patch adds a.photon-button:active (0,2,1) to override.

The general shape of the regression. Any place we use an <a> and then style it to look like something other than a default link is now vulnerable, because the new global rules style every anchor unconditionally.

[canova]

Oh, thanks for finding that! Hmmm. I'm leaning towards just removing that a:active rule all together. We didn't have one before, and I don't think anyone complained. It is nice to have an active color only if the link is a pure link without special css. But I don't think that's worth keeping just for that. Otherwise all the other links that we have or we will add in the future will have this issue and will need special handling.

[fatadel]

Oh, thanks for finding that! Hmmm. I'm leaning towards just removing that a:active rule all together. We didn't have one before, and I don't think anyone complained. It is nice to have an active color only if the link is a pure link without special css. But I don't think that's worth keeping just for that. Otherwise all the other links that we have or we will add in the future will have this issue and will need special handling.

Agree! Re-pushed 😊

[canova]

Looks good to me, thanks! Did some manual testing in a bunch of place and I don't see anywhere broken/bad.