1634380 - Buttons in various panels don't have a hover effect anymore

Status: RESOLVED FIXED

(DevTools :: General, defect, P3)

Description

[Julien Wajsberg [:julienw]]

+++ This bug was initially created as a clone of Bug #1627663 +++

I still see a similar problem in all buttons inside panels this time. For example but not only:

• buttons at the top of the console panel + the button to switch to multiline editor at the bottom + the "close" button if the console panel is embedded in another panel
• buttons at the top of the rule view (:hov,: cls, +, print simulation) in the inspector
• buttons at the top of the DOM view in the inspector (+ and color picker)
• all buttons in the performance panel
• buttons at the top left of the style editor
• etc

Hey Florens, I'm not sure if this has the same cause of bug 1627663, or if it was caused by bug 1627663. But this is very distracting to me :-) Do you think you can have a look at this as well?
Thanks!

Comment 1

[Florens Verschelde :fvsch]

I think it has the same cause as bug 1627663.

We may have changed how we define hover styles or the exact values of the hover color a few times in the past few years. I think bug 1627663 was caused by a combination of my CSS variable change, and earlier changes that made some hover colors very subtle to account for the new toolbar style with white backgrounds (light theme).

Looking at the underlying styles and CSS variables, it's a bit like an overgrown garden. It's hard to figure out the intent of a style based on the many conditions in the selector, and we're sometimes using variables that were defined for unrelated features (so now if you change those variables, you break button styles).

Bottom line, IMO the correct fix is to disentangle some of those styles first, and then tweak the hover colors. If the hover color changes prove to be not perfect or cause a regression or two, at least we'll be in a better place to fix that.

I've worked on a patch that:

1. Flattens dependencies between the --toolbarbutton-* variables and other "feature-related" variables. In one case, a --toolbarbutton-* variable was referencing a --theme-toolbar-* variable which was itself referencing a --toolbarbutton-* variable! These dependencies make it virtually impossible to check that, e.g. in the light theme, the hover background is slightly darker than the button background, itself darker than the toolbar background.

2. Separates all the styles for .devtools-toolbarbutton into a new stylesheet. It's a legacy style that is only used in the Style Editor and Performance panels. This lets us mostly ignore .devtools-toolbarbutton styles going on, and simplifies the maintenance and evolution of .devtools-button styles.

Comment 2

[Florens Verschelde :fvsch]

Attachment: Bug 1634380 - Part 1: Flatten CSS variable dependencies for --toolbarbutton variables; r=julienw

Comment 3

[Florens Verschelde :fvsch]

Attachment: Bug 1634380 - Part 2: Split devtools-button and legacy devtools-toolbarbutton styles; r=julienw

Depends on D73494

Comment 4

[Firefox Bug Husbandry Bot]

Because this bug's Severity has not been changed from the default since it was filed, and it's Priority is P3 (Backlog,) indicating it has been triaged, the bug's Severity is being updated to S3 (normal.)

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/885856bb3bfa
Part 1: Flatten CSS variable dependencies for --toolbarbutton variables; r=ladybenko
https://hg.mozilla.org/integration/autoland/rev/bd0638c0c557
Part 2: Split devtools-button and legacy devtools-toolbarbutton styles; r=ladybenko

Comment 6

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/885856bb3bfa
https://hg.mozilla.org/mozilla-central/rev/bd0638c0c557