Bug 1693176 - Destroy frames of contents inside panels. r=Gijs

Panels don't rely so much on the popup manager code to deal with
menuitems etc, so this is trivial and fixes the issue as reported.

I think it's pretty unlikely to have animated stuff in menulists /
menupopups, so this should get us most of the way.

Differential Revision: https://phabricator.services.mozilla.com/D105550

layout/xul/nsMenuFrame.cpp

@@ -28,6 +28,7 @@
 #include "nsDisplayList.h"
 #include "nsIReflowCallback.h"
 #include "nsISound.h"
+#include "nsLayoutUtils.h"
 #include "mozilla/Attributes.h"
 #include "mozilla/EventDispatcher.h"
 #include "mozilla/Likely.h"
@@ -269,6 +270,8 @@ void nsMenuFrame::SetInitialChildList(ChildListID aListID,
 
 void nsMenuFrame::DestroyFrom(nsIFrame* aDestructRoot,
                               PostDestroyData& aPostDestroyData) {
+  MOZ_ASSERT(!nsContentUtils::IsSafeToRunScript());
+
   if (mReflowCallbackPosted) {
     PresShell()->CancelReflowCallback(this);
     mReflowCallbackPosted = false;
@@ -289,8 +292,8 @@ void nsMenuFrame::DestroyFrom(nsIFrame* aDestructRoot,
 
   // if the menu content is just being hidden, it may be made visible again
   // later, so make sure to clear the highlighting.
-  mContent->AsElement()->UnsetAttr(kNameSpaceID_None, nsGkAtoms::menuactive,
-                                   false);
+  nsContentUtils::AddScriptRunner(
+      new nsUnsetAttrRunnable(mContent->AsElement(), nsGkAtoms::menuactive));
 
   // are we our menu parent's current menu item?
   nsMenuParent* menuParent = GetMenuParent();

toolkit/content/widgets/panel.js

@@ -14,7 +14,7 @@
         <box class="panel-arrowbox" part="arrowbox">
           <image class="panel-arrow" part="arrow"/>
         </box>
-        <html:slot part="content" />
+        <html:slot part="content" style="display: none" />
       </vbox>
       `;
     }
@@ -58,7 +58,7 @@
 
     initialize() {
       // As an optimization, we don't slot contents if the panel is [hidden] in
-      // connectedCallack this means we can avoid running this code at startup
+      // connectedCallback this means we can avoid running this code at startup
       // and only need to do it when a panel is about to be shown.
       // We then override the `hidden` setter and `removeAttribute` and call this
       // function if the node is about to be shown.
@@ -69,6 +69,7 @@
       if (!this.isArrowPanel) {
         let slot = document.createElement("slot");
         slot.part = "content";
+        slot.style.display = "none";
         this.shadowRoot.appendChild(slot);
       } else {
         this.shadowRoot.appendChild(this.constructor.fragment);
@@ -158,6 +159,9 @@
     }
 
     on_popupshowing(event) {
+      if (event.target == this) {
+        this.panelContent.style.display = "";
+      }
       if (this.isArrowPanel && event.target == this) {
         if (this.isAnchored && this.anchorNode) {
           let anchorRoot =
@@ -252,6 +256,9 @@
     }
 
     on_popuphidden(event) {
+      if (event.target == this) {
+        this.panelContent.style.display = "none";
+      }
       if (this.isArrowPanel && event.target == this) {
         this.removeAttribute("panelopen");
         if (this.getAttribute("animate") != "false") {