Open Bug 1403090 Opened 6 years ago Updated 6 months ago

Low performance when changing the color in a color-picker


(DevTools :: Inspector, defect, P2)



(firefox57 fix-optional)

Tracking Status
firefox57 --- fix-optional


(Reporter: pbro, Unassigned)


(Blocks 1 open bug)



(1 file)

- open
- open the inspector
- in the rule-view, next to the background color property, click on the color swatch
- inside the color picker, click and drag the color cursor around, for some time.

Result: the browser starts to lag quite a lot. Trying to scroll in the google doc shows that the browser is frozen.
I managed to get the "slow script" dialog at some stage too.

Using perf.html, I see the content thread being basically blocked doing stylesheet updating work.
It seems to be blocked in this function (in actors/stylesheets.js):

  update: function (text, transition, kind = UPDATE_GENERAL) {
    DOMUtils.parseStyleSheet(this.rawSheet, text);

    modifiedStyleSheets.set(this.rawSheet, text);

    this.text = text;


    if (transition) {
    } else {
      this.emit("style-applied", kind, this);

    this._getMediaRules().then((rules) => {
      this.emit("media-rules-changed", rules);

I'm attaching the perf.html profile I recorded.

The main thread shows a lot of repeated work, which is understandable because we preview the color change on drag.
But the content thread (4 of 4) really looks blocked, which would explain why I couldn't even scroll in the page after a while.
Priority: -- → P2
Product: Firefox → DevTools
No longer blocks: top-inspector-bugs
See Also: → 1606641
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.