1847165 - Stylesheet change adds new stylesheet in style editor

Status: RESOLVED DUPLICATE of bug 1771113

(DevTools :: Style Editor, defect)

Description

[Nicolas Chevobbe [:nchevobbe]]

Steps to reproduce

1. Go to data:text/html,<meta charset=utf8><style></style><button>Update stylesheet</button><script>document.addEventListener("click", () => {%20 document.querySelector("style").textContent = 'body::after{ content: "' + Date.now() + '" }'; })</script>
2. Open Style Editor
3. Click on the "Update stylesheet" buttons multiple time

Expected results

There's still only 1 stylesheet displayed in the list

Actual results

Every click on the button added a stylesheet in the list

---

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

In this case, we get a StyleSheetApplicableStateChanged event, which ends up calling _registerStyleSheet

https://searchfox.org/mozilla-central/rev/892475f3ba2b959aeaef19d1d8602494e3f2ae32/devtools/server/actors/utils/stylesheets-manager.js#765,776,787-792

_onApplicableStateChanged({ applicable, stylesheet: styleSheet }) {
...
    this._registerStyleSheet(styleSheet);
...
_registerStyleSheet(styleSheet) {
  const existingResourceId = this._findStyleSheetResourceId(styleSheet);
  // If the stylesheet is already registered, there's no need to notify about it again.
  if (existingResourceId) {
    return existingResourceId;
  }

but here we don't find the existing styleSheet, and so we go on as if it was a new stylesheet.

https://searchfox.org/mozilla-central/rev/892475f3ba2b959aeaef19d1d8602494e3f2ae32/devtools/server/actors/utils/stylesheets-manager.js#230-241

_findStyleSheetResourceId(styleSheet) {
  for (const [
    resourceId,
    existingStyleSheet,
  ] of this._styleSheetMap.entries()) {
    if (styleSheet === existingStyleSheet) {
      return resourceId;
    }
  }

  return null;
}

this._styleSheetMap does have a stylesheet at this point, but this doesn't match the one we get from the event.
The stylesheet we get from the event does match the document stylesheet (this._targetActor.window.document.styleSheets[0]), so somehow, the instance that we store then gets replaced.

And actually that's something we can observed on a regular webpage, changing the textContent (or appending a new text node) of a <style> node will end up creating a new stylesheet, which makes sense.

The fact that we see multiple items in the style editor looks like Bug 1771113, so that might be a good moment to handle this