1798114 - StyleEditor creates duplicate style entries when setting innerHTML of style tag

Status: NEW

(DevTools :: Style Editor, defect, P3)

Description

[dukevinjduke]

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

Steps to reproduce:

There appears to be a bug in Firefox when an element <style class="..."> is present on the page and style editor is open, a multitude of empty stylesheets become continuously attached to the page causing massive lag and memory usage. I am not sure if the issue is caused by the html element or the js on the page.

Actual results:

1. Visit https://codepen.io/simeydotme/pen/PrQKgo
2. Open developer tools and open Style Editor
3. Hover mouse over the Pokemon Cards to trigger animations
4. Witness many empty stylesheets flooding the style editor

Expected results:

Empty stylesheets are not created

Comment 1

[dukevinjduke]

Forgot to mention: If this element is removed from the page, the issue no longer occurs. I also tested this by emulating the code outside of the codepen website and the problem persists.

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'DevTools::Style Editor' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 3

[Julian Descottes [:jdescottes]]

Thanks for filing, this seems to be related to setting innerHTML of a style tag

Comment 4

[Julian Descottes [:jdescottes]]

Attachment: test_case.html

Comment 5

[Julian Descottes [:jdescottes]]

STRs:

• open https://bug1798114.bmoattachments.org/attachment.cgi?id=9301105
• open style editor
• click on the button in the page

Comment 6

[Julian Descottes [:jdescottes]]

Could reproduce back to ESR 102, not a recent change.

Comment 7

[Julian Descottes [:jdescottes]]

Nicolas, can you check where this comes from?

Comment 8

[Nicolas Chevobbe [:nchevobbe]]

We're getting a StyleSheetApplicableStateChanged event in https://searchfox.org/mozilla-central/rev/d1fe4b6dd7027a54c17ce3030948a1be354598ab/devtools/server/actors/utils/stylesheets-manager.js#107-112

// Listen for new stylesheet being added via StyleSheetApplicableStateChanged
this._targetActor.chromeEventHandler.addEventListener(
  "StyleSheetApplicableStateChanged",
  this._onApplicableStateChanged,
  true
);

I wonder if the stylesheet is "removed" and re-added, in such case Bug 1771113 would fix this issue as well

Comment 9

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #8)

I wonder if the stylesheet is "removed" and re-added, in such case Bug 1771113 would fix this issue as well

Testing the WIP patch I had, it looks like this would fix this issue. Keeping this open so we can confirm and add test case