1665547 - Remove the automagic transition for changing bg/fg colors in dev tools's Styles section

Status: VERIFIED FIXED

(DevTools :: Inspector: Rules, defect, P3)

Description

[Pomax]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:82.0) Gecko/20100101 Firefox/82.0

Steps to reproduce:

Inspect an element, start changing it's color/background-color using the color picker feature

Actual results:

The colors slowly transition across every color the cursor passed over, which can in fact leave you sitting there going "goddamnit, yes: very fancy, and absolutely not wanted, give me the color I told you to use already".

Expected results:

The colors should immediate change to whatever is the current color under the cursor.

Marking as defect rather than enhancement request, because as far as doing work with dev tools, it is hard to believe this was intentional.

Comment 1

[Pomax]

Attachment: 2020-09-16-21-54-47.mp4

This video shows off dev tools having its own fun cycling through every single colour instead of immediately going "ah you stopped moving the cursor, here's the colour you should be seeing". It seems like it's queuing up all the cursor coordinates instead of throwing away anything that got queued over a millisecond ago.

Comment 2

[Julian Descottes [:jdescottes]]

Thanks for the report, I think we are flooding the server with requests, and since requests are queued... you get the described issue here.
Throttling helps, but it might break some tests in CI: https://treeherder.mozilla.org/#/jobs?repo=try&revision=c9f09aae6f4ebfa1c7711cd67349ef3eb7d0f774

Edit: try is green, submitting for review.

Comment 3

[Julian Descottes [:jdescottes]]

Attachment: Bug 1665547 - [devtools] Throttle calls to _selectColor in SwatchColorPickerTooltip

Comment 4

[Julian Descottes [:jdescottes]]

For some context, with the current implementation, I emit up to 200 requests per second when hovering in the colorpicker tooltip.
I wonder if something on the server forces a layout which makes this slower to apply? (and of course with a 100ms throttling this goes down to 10 requests per second).

Comment 5

[Pomax]

Note that this appears to be new behaviour, a few versions ago the same UX had pretty much instant result, so this "used to work" although of course I have no idea whether this part got a drastic rewrite or not.

Comment 6

[Razvan Caliman [:rcaliman]]

Thanks for the fix, Julian! It think it works well in this context.

@Pomax, the issue has been there for a very long time. The performance degradation is more visible depending on the size and complexity of the inspected stylesheet. On a very simple test case it's probably not observable.

Try this in a new tab.

data:text/html,<style>body {color: red}</style>TEST

Comment 7

[Julian Descottes [:jdescottes]]

(In reply to Pomax from comment #5)

Note that this appears to be new behaviour, a few versions ago the same UX had pretty much instant result, so this "used to work" although of course I have no idea whether this part got a drastic rewrite or not.

I have the same impression, but when I tested earlier today, I reproduced the same behavior on all channels, so it's not a recent regression.
I tested with 68 ESR and the behavior is indeed different. You can still get some lag when using the color picker, but it's not as bad as the current UX.

I also tried 78 ESR

So I guess something between

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b974532d5f89
[devtools] Throttle calls to _selectColor in SwatchColorPickerTooltip r=rcaliman

Comment 9

[Bogdan Tara[:bogdan_tara | bogdant]]

https://hg.mozilla.org/mozilla-central/rev/b974532d5f89

Comment 10

[Cristian Fogel [:cfogel]]

Patch verified on 82.0b6 with macOS 11.0, Windows 10.

Comment 11

[Pomax]

Tested and verified with the 2020-10-05 Nightly and it's so much better, thanks everyone!