1403090 - Low performance when changing the color in a color-picker

Status: RESOLVED DUPLICATE of bug 1606641

(DevTools :: Inspector, defect, P2)

Description

[Patrick Brosset <:pbro>]

Attachment: Firefox 2017-09-26 11.02 profile.sps.json.gz

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.