1 files changed, 169 insertions, 0 deletions
diff --git a/toolkit/content/widgets/popupnotification.js b/toolkit/content/widgets/popupnotification.js
new file mode 100644
index 0000000000..835151496c
--- /dev/null
+++ b/toolkit/content/widgets/popupnotification.js
@@ -0,0 +1,169 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// This is loaded into all XUL windows. Wrap in a block to prevent
+// leaking to window scope.
+{
+  class MozPopupNotification extends MozXULElement {
+    static get inheritedAttributes() {
+      return {
+        ".popup-notification-icon": "popupid,src=icon,class=iconclass,hasicon",
+        ".popup-notification-body": "popupid",
+        ".popup-notification-origin": "value=origin,tooltiptext=origin",
+        ".popup-notification-description": "popupid,id=descriptionid",
+        ".popup-notification-description > span:first-of-type":
+          "text=label,popupid",
+        ".popup-notification-description > b:first-of-type":
+          "text=name,popupid",
+        ".popup-notification-description > span:nth-of-type(2)":
+          "text=endlabel,popupid",
+        ".popup-notification-description > b:last-of-type":
+          "text=secondname,popupid",
+        ".popup-notification-description > span:last-of-type":
+          "text=secondendlabel,popupid",
+        ".popup-notification-hint-text": "text=hinttext",
+        ".popup-notification-closebutton":
+          "oncommand=closebuttoncommand,hidden=closebuttonhidden",
+        ".popup-notification-learnmore-link":
+          "onclick=learnmoreclick,href=learnmoreurl",
+        ".popup-notification-warning": "hidden=warninghidden,text=warninglabel",
+        ".popup-notification-secondary-button":
+          "oncommand=secondarybuttoncommand,label=secondarybuttonlabel,accesskey=secondarybuttonaccesskey,hidden=secondarybuttonhidden,dropmarkerhidden",
+        ".popup-notification-dropmarker":
+          "onpopupshown=dropmarkerpopupshown,hidden=dropmarkerhidden",
+        ".popup-notification-dropmarker > menupopup": "oncommand=menucommand",
+        ".popup-notification-primary-button":
+          "oncommand=buttoncommand,label=buttonlabel,accesskey=buttonaccesskey,default=buttonhighlight,disabled=mainactiondisabled",
+      };
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (!this._hasSlotted) {
+        return;
+      }
+
+      // If the label and/or accesskey for the primary button is set by
+      // inherited attributes, its data-l10n-id needs to be unset or
+      // DOM Localization will overwrite the values.
+      if (name === "buttonlabel" || name === "buttonaccesskey") {
+        this.button?.removeAttribute("data-l10n-id");
+      }
+
+      super.attributeChangedCallback(name, oldValue, newValue);
+    }
+
+    show() {
+      this.slotContents();
+
+      if (this.checkboxState) {
+        this.checkbox.checked = this.checkboxState.checked;
+        this.checkbox.setAttribute("label", this.checkboxState.label);
+        this.checkbox.hidden = false;
+      } else {
+        this.checkbox.hidden = true;
+        // Reset checked state to avoid wrong using of previous value.
+        this.checkbox.checked = false;
+      }
+
+      this.hidden = false;
+    }
+
+    static get markup() {
+      return `
+      <hbox class="popup-notification-header-container"></hbox>
+      <hbox align="start" class="popup-notification-body-container">
+        <image class="popup-notification-icon"/>
+        <vbox pack="start" class="popup-notification-body">
+          <hbox align="start">
+            <vbox flex="1">
+              <label class="popup-notification-origin header" crop="center"></label>
+              <!-- These need to be on the same line to avoid creating
+                  whitespace between them (whitespace is added in the
+                  localization file, if necessary). -->
+              <description class="popup-notification-description"><html:span></html:span><html:b></html:b><html:span></html:span><html:b></html:b><html:span></html:span></description>
+              <description class="popup-notification-hint-text"></description>
+            </vbox>
+            <toolbarbutton class="messageCloseButton close-icon popup-notification-closebutton tabbable" data-l10n-id="close-notification-message"></toolbarbutton>
+          </hbox>
+          <vbox class="popup-notification-bottom-content" align="start">
+            <label class="popup-notification-learnmore-link" is="text-link" data-l10n-id="popup-notification-learn-more"></label>
+            <checkbox class="popup-notification-checkbox" oncommand="PopupNotifications._onCheckboxCommand(event)"/>
+            <description class="popup-notification-warning"/>
+          </vbox>
+        </vbox>
+      </hbox>
+      <hbox class="popup-notification-footer-container"></hbox>
+      <html:moz-button-group class="panel-footer">
+        <button class="popup-notification-secondary-button footer-button"/>
+        <button type="menu" class="popup-notification-dropmarker footer-button" data-l10n-id="popup-notification-more-actions-button">
+          <menupopup position="after_end" data-l10n-id="popup-notification-more-actions-button">
+          </menupopup>
+        </button>
+        <button class="popup-notification-primary-button primary footer-button" data-l10n-id="popup-notification-default-button"/>
+      </html:moz-button-group>
+      `;
+    }
+
+    slotContents() {
+      if (this._hasSlotted) {
+        return;
+      }
+      this._hasSlotted = true;
+      MozXULElement.insertFTLIfNeeded("toolkit/global/notification.ftl");
+      MozXULElement.insertFTLIfNeeded("toolkit/global/popupnotification.ftl");
+      this.appendChild(this.constructor.fragment);
+
+      window.ensureCustomElements("moz-button-group");
+
+      this.button = this.querySelector(".popup-notification-primary-button");
+      if (
+        this.hasAttribute("buttonlabel") ||
+        this.hasAttribute("buttonaccesskey")
+      ) {
+        this.button.removeAttribute("data-l10n-id");
+      }
+      this.secondaryButton = this.querySelector(
+        ".popup-notification-secondary-button"
+      );
+      this.checkbox = this.querySelector(".popup-notification-checkbox");
+      this.closebutton = this.querySelector(".popup-notification-closebutton");
+      this.menubutton = this.querySelector(".popup-notification-dropmarker");
+      this.menupopup = this.menubutton.querySelector("menupopup");
+
+      let popupnotificationfooter = this.querySelector(
+        "popupnotificationfooter"
+      );
+      if (popupnotificationfooter) {
+        this.querySelector(".popup-notification-footer-container").append(
+          popupnotificationfooter
+        );
+      }
+
+      let popupnotificationheader = this.querySelector(
+        "popupnotificationheader"
+      );
+      if (popupnotificationheader) {
+        this.querySelector(".popup-notification-header-container").append(
+          popupnotificationheader
+        );
+      }
+
+      for (let popupnotificationcontent of this.querySelectorAll(
+        "popupnotificationcontent"
+      )) {
+        this.appendNotificationContent(popupnotificationcontent);
+      }
+
+      this.initializeAttributeInheritance();
+    }
+
+    appendNotificationContent(el) {
+      this.querySelector(".popup-notification-bottom-content").before(el);
+    }
+  }
+
+  customElements.define("popupnotification", MozPopupNotification);
+}