Detached DOM nodes memory leak

[rebornix]

The Edge Dev Tools now offers Detached Elements tool to help detect memory leaks. The tool is a good addition to the memory heap tool but it's analyzing from a different angle. @sbatten and I spent some time digging into this tool and fixed memory leaks in the ActionBar successfully. Here is how we tackle the leaks in action bar:

• Open vscode (scripts/code-web.sh) in Edge

• Play around with it for a bit

• Open Edge Dev Tools -> ... -> More Tools -> Detached Elements

  

• Click the trash icon to trigger manual GC and click the first button to collect all detached elements

  

• It found 100+ detached elements which can not be GC'ed. We easily found dozens of markers-panel-action-filter-container

  

• To analyze why they can't be GC'ed, click the Eye icon on the top toolbar to generate a heap dump

  

• Once the memory heap is generated, it will link the detached element to the objects in the memory tool

  

Turned out we register a global DOM listener for every ActionViewItem and store it in ActionBar disposable store. When the ActionViewItem is disposed, the DOM listener will be not disposed/cleared until the ActionBar is disposed.

---

With the ActionBar leaks fixed, there are still 30+ detached DOM nodes not GC'ed. Not every one is necessarily memory leak (for example, if you are using ListView, it will hold refs to template DOM nodes) but some of them are duplicated elements.

• [x] Multiple markers-panel-action-filter-container and switch-output @sbatten
• [x] Multiple status.languageStatus span and codicon codicon-bracket wiggle span nodes are ref'ed by mutation observers in SuggestDetailsOverlay @jrieken
• [ ] DOM node for monaco editor in AccessibilityHelpWidget @isidorn

[jrieken]

👏 wow, this is a pretty cool tool

[isidorn]

@rebornix super cool. And thanks for fixing the ActionBar bug which I probably introduced originally :) fyi @hediet for AccessibilityHelpWidget

[bpasero]

Using this tool on insiders.vscode.dev with Edge, I see a detached HTMLDivElement which seems to be the monaco editor every time I switch between 2 tabs (which I find surprising because we do reuse the same editor instance in the same editor group):

Does someone have an understanding where these are captured exactly?

//cc @hediet @alexdima