1516948 - Toolbox buttons show a white or black background flash when hovering out

Status: RESOLVED DUPLICATE of bug 1518802

(DevTools :: General, defect, P3)

Description

[Florens Verschelde :fvsch]

Attachment: devtools-toolbox-button-background-flash.mov

Seen on macOS, and I think :ntim saw it too on macOS (we talked about it briefly at All Hands).

I can't reproduce it all the time, but often enough. When hovering the toolbox buttons (not the tabs) and moving the cursor out of the toolbox (towards web content), I'm getting a flash of background-color change.

- In the dark theme, I'm getting a white flash
- In the light theme, I'm getting a black flash

Once thing I've noticed is that once I trigger this issue using one theme, I cannot reproduce it when switching themes. In the attached video, I'm getting this issue systematically with the light theme but am failing to reproduce using the dark theme; I've also had the opposite experience.

I’m tracing the issue to the transition in common.css:

/* Toolbar buttons */
.devtools-menulist,
.devtools-toolbarbutton,
.devtools-button {
  ...
  background: transparent;
  ...
  transition: background-color 0.05s ease-in-out;
  ...
}

If I remove it, the issue disappears. This transition was added in bug 1034079, not sure why it affects the toolbox now. Could be a subtle platform change. (Note: I don't have webrender on.)

IMO a 50ms background transition doesn't make much sense, with 16ms frames (best case scenario where we're at 60fps, which can be unlikely when animating a background-color and not a transform or opacity) it creates at most 2 frames of interpolated colors, maybe just one. We can probably do without it. So my preferred fix would be to remove it.

Another possible fix is to use transition:none just for the toolbox buttons, since they're the only ones that seem affected.

Comment 1

[Florens Verschelde :fvsch]

I’ve reproduced this issue for the Console's main toolbar buttons (using the dark theme).
Removing the transition seems like the best solution.

Comment 2

[Florens Verschelde :fvsch]

Also reproducing on the RDM's toolbar buttons.

Comment 3

[Florens Verschelde :fvsch]

Also reproducing on Linux for different buttons (Toolbox, RDM toolbar).

Comment 5

[Florens Verschelde :fvsch]

We can patch this very quickly, but I filed a Graphics bug just in case because I can reproduce the issue in web content.

Even if there is a platform fix down the road, we can probably remove those 50ms transitions in DevTools anyway, since they may not be perceptible at all anyway. It would be a oneliner that we can backport to beta too, if we want to. What do you think, Patrick?

Comment 6

[Tim Nguyen :ntim]

I recall there was a Firefox front-end bug that explained the cause and that provided a patch.

Emilio, do you recall such a bug ?

Comment 7

[Emilio Cobos Álvarez [:emilio]]

Not really, but I do recall similar bugs like bug 1512754 and it seems likely this is caused by bug 1504065.

Can somebody confirm that turning on WR or toggling gfx.omta.background-color fixes this?

Comment 8

[Emilio Cobos Álvarez [:emilio]]

(In particular, I don't see such flicker on WR)

Comment 9

[Hiroyuki Ikezoe (:hiro)]

Yeah, this is definitely a duplicate of bug 1513522.