Open Bug 1403090 Opened 2 years ago Updated 25 days ago

Low performance when changing the color in a color-picker

Categories

(DevTools :: Inspector, defect, P2)

defect

Tracking

(firefox57 fix-optional)

Tracking Status
firefox57 --- fix-optional

People

(Reporter: pbro, Unassigned)

References

(Blocks 1 open bug)

Details

Attachments

(1 file)

STR:
- open https://docs.google.com/document/d/1FQyRCmE0xC-S_CpRTNeEgGPL2MxO9HKlqwb9Wb5FcMo/edit#
- 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;

    this._notifyPropertyChanged("ruleCount");

    if (transition) {
      this._insertTransistionRule(kind);
    } 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
Duplicate of this bug: 1376170
Product: Firefox → DevTools
No longer blocks: top-inspector-bugs
You need to log in before you can comment on or make changes to this bug.