Bug 1634026, lazy load panic button panel by storing in HTML template r=Gijs

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

browser/base/content/browser.js

@@ -8740,6 +8740,13 @@ var PanicButtonNotifier = {
       this.notify();
     }
   },
+  createPanelIfNeeded() {
+    // Lazy load the panic-button-success-notification panel the first time we need to display it.
+    if (!document.getElementById("panic-button-success-notification")) {
+      let template = document.getElementById("panicButtonNotificationTemplate");
+      template.replaceWith(template.content);
+    }
+  },
   notify() {
     if (!this._initialized) {
       window.PanicButtonNotifierShouldNotify = true;
@@ -8747,6 +8754,7 @@ var PanicButtonNotifier = {
     }
     // Display notification panel here...
     try {
+      this.createPanelIfNeeded();
       let popup = document.getElementById("panic-button-success-notification");
       popup.hidden = false;
       // To close the popup in 3 seconds after the popup is shown but left uninteracted.

browser/components/customizableui/content/panelUI.inc.xhtml

@@ -71,23 +71,25 @@
   </menupopup>
 </panel>
 
-<panel id="panic-button-success-notification"
-       type="arrow"
-       position="bottomcenter topright"
-       hidden="true"
-       role="alert"
-       orient="vertical">
-  <hbox id="panic-button-success-header">
-    <image id="panic-button-success-icon" alt=""/>
-    <vbox>
-      <description>&panicButton.thankyou.msg1;</description>
-      <description>&panicButton.thankyou.msg2;</description>
-    </vbox>
-  </hbox>
-  <button label="&panicButton.thankyou.buttonlabel;"
-          id="panic-button-success-closebutton"
-          oncommand="PanicButtonNotifier.close()"/>
-</panel>
+<html:template id="panicButtonNotificationTemplate">
+  <panel id="panic-button-success-notification"
+         type="arrow"
+         position="bottomcenter topright"
+         hidden="true"
+         role="alert"
+         orient="vertical">
+    <hbox id="panic-button-success-header">
+      <image id="panic-button-success-icon" alt=""/>
+      <vbox>
+        <description>&panicButton.thankyou.msg1;</description>
+        <description>&panicButton.thankyou.msg2;</description>
+      </vbox>
+    </hbox>
+    <button label="&panicButton.thankyou.buttonlabel;"
+            id="panic-button-success-closebutton"
+            oncommand="PanicButtonNotifier.close()"/>
+  </panel>
+</html:template>
 
 <panel id="appMenu-notification-popup"
        class="popup-notification-panel panel-no-padding"