Open Bug 1798114 Opened 2 years ago Updated 10 months ago

StyleEditor creates duplicate style entries when setting innerHTML of style tag

Categories

(DevTools :: Style Editor, defect, P3)

Firefox 108
defect

Tracking

(Not tracked)

People

(Reporter: dukevinjduke, Unassigned)

References

()

Details

Attachments

(1 file)

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

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.

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.

Component: Untriaged → Style Editor
Product: Firefox → DevTools

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

Status: UNCONFIRMED → NEW
Ever confirmed: true
Summary: Memory leak on pages using <style class="..."> → StyleEditor creates duplicate style entries when setting innerHTML of style tag

STRs:

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

Nicolas, can you check where this comes from?

Severity: -- → S3
Flags: needinfo?(nchevobbe)
Priority: -- → P3

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

Flags: needinfo?(nchevobbe)
See Also: → 1771113

(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

Depends on: 1771113
See Also: 1771113
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: