Cleanup GlassPane on Widget detach

The event listener were still there if you show the GlassPane
and then detach the Widget.

This cause the last Tree closure
https://ci.chromium.org/ui/p/devtools-frontend/builders/ci/Stand-alone%20Linux/22115/overview

Bug: none
Change-Id: Ifd938ac51b79e4af6710547429f2dd21e0bd1a8b
No-Tree-Checks: True
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6955970
Commit-Queue: Nikolay Vitkov <[email protected]>
Commit-Queue: Ergün Erdoğmuş <[email protected]>
Auto-Submit: Nikolay Vitkov <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>

Author: Lightning00Blade

front_end/ui/legacy/GlassPane.ts

@@ -28,6 +28,7 @@ export class GlassPane {
   constructor(jslog?: string) {
     this.#widget = new Widget({jslog, useShadowDom: true});
     this.#widget.markAsRoot();
+    this.#widget.onDetach = this.#onDetach.bind(this);
     this.element = this.#widget.element;
     this.contentElement = this.#widget.contentElement;
 
@@ -124,15 +125,18 @@ export class GlassPane {
     if (!this.isShowing()) {
       return;
     }
-    panes.delete(this);
-    this.element.ownerDocument.body.removeEventListener('mousedown', this.onMouseDownBound, true);
-    this.element.ownerDocument.body.removeEventListener('pointerdown', this.onMouseDownBound, true);
     this.#widget.detach();
     if (this.#onHideCallback) {
       this.#onHideCallback();
     }
   }
 
+  #onDetach(): void {
+    panes.delete(this);
+    this.element.ownerDocument.body.removeEventListener('mousedown', this.onMouseDownBound, true);
+    this.element.ownerDocument.body.removeEventListener('pointerdown', this.onMouseDownBound, true);
+  }
+
   private onMouseDown(event: Event): void {
     if (!this.onClickOutsideCallback) {
       return;