Bug 1561349 - Implement message templates for What's New panel r=andreio

This needs to land together or right around when the `whatsnew-panel` branch is merged and exported.

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

--HG--
extra : moz-landing-system : lando

browser/components/customizableui/content/panelUI.js

@@ -17,6 +17,11 @@ ChromeUtils.defineModuleGetter(
   "PanelMultiView",
   "resource:///modules/PanelMultiView.jsm"
 );
+ChromeUtils.defineModuleGetter(
+  this,
+  "ToolbarPanelHub",
+  "resource://activity-stream/lib/ToolbarPanelHub.jsm"
+);
 
 /**
  * Maintains the state and dispatches events for the main menu panel.
@@ -45,6 +50,7 @@ const PanelUI = {
       overflowFixedList: "widget-overflow-fixed-list",
       overflowPanel: "widget-overflow",
       navbar: "nav-bar",
+      whatsNewPanel: "PanelUI-whatsNew",
     };
   },
 
@@ -186,6 +192,7 @@ const PanelUI = {
     this.menuButton.removeEventListener("keypress", this);
     CustomizableUI.removeListener(this);
     this.libraryView.removeEventListener("ViewShowing", this);
+    this.whatsNewPanel.removeEventListener("ViewShowing", this);
   },
 
   /**
@@ -314,6 +321,8 @@ const PanelUI = {
       case "ViewShowing":
         if (aEvent.target == this.libraryView) {
           this.onLibraryViewShowing(aEvent.target).catch(Cu.reportError);
+        } else if (aEvent.target == this.whatsNewPanel) {
+          this.onWhatsNewPanelShowing();
         }
         break;
     }
@@ -423,6 +432,7 @@ const PanelUI = {
     }
 
     this.ensureLibraryInitialized(viewNode);
+    this.ensureWhatsNewInitialized(viewNode);
 
     let container = aAnchor.closest("panelmultiview");
     if (container) {
@@ -636,6 +646,31 @@ const PanelUI = {
     });
   },
 
+  /**
+   * Sets up the event listener for when the What's New panel is shown.
+   *
+   * @param {panelview} panelView The What's New panelview.
+   */
+  ensureWhatsNewInitialized(panelView) {
+    if (panelView != this.whatsNewPanel || panelView._initialized) {
+      return;
+    }
+
+    panelView._initialized = true;
+    panelView.addEventListener("ViewShowing", this);
+  },
+
+  /**
+   * When the What's New panel is showing, we fetch the messages to show.
+   */
+  onWhatsNewPanelShowing() {
+    ToolbarPanelHub.renderMessages(
+      window,
+      document,
+      "PanelUI-whatsNew-message-container"
+    );
+  },
+
   /**
    * NB: The enable- and disableSingleSubviewPanelAnimations methods only
    * affect the hiding/showing animations of single-subview panels (tempPanel

browser/themes/shared/customizableui/panelUI.inc.css

@@ -1807,4 +1807,68 @@ toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after {
 
 #customizationui-widget-multiview #PanelUI-whatsNew-title {
   display: flex;
+  margin: 0 0 6px;
+}
+
+#PanelUI-whatsNew .whatsNew-message {
+  border-bottom: 1px solid var(--panel-separator-color);
+  cursor: pointer;
+  margin: 0 0 6px;
+  padding-bottom: 10px;
+}
+
+#PanelUI-whatsNew .whatsNew-message-date {
+  font-size: 11px;
+  margin: 0;
+  opacity: 0.6;
+  padding: 0 6px;
+}
+
+#PanelUI-whatsNew .whatsNew-message-body {
+  padding: 6px;
+}
+
+#PanelUI-whatsNew .whatsNew-message-body.has-icon {
+  padding-inline-end: 46px;
+  position: relative;
+}
+
+#PanelUI-whatsNew .whatsNew-message-icon {
+  inset-inline-end: 6px;
+  height: 32px;
+  position: absolute;
+  top: 10px;
+  width: 32px;
+}
+
+#PanelUI-whatsNew .whatsNew-message-title {
+  font-size: 17px;
+  font-weight: 600;
+  line-height: 24px;
+  margin: 2px 0;
+}
+
+#PanelUI-whatsNew  .whatsNew-message-body p {
+  font-size: 13px;
+  line-height: 18px;
+  margin: 0;
+}
+
+#PanelUI-whatsNew button {
+  background: none;
+  border: 0;
+  color: #45a1ff;
+  cursor: pointer;
+  font-size: 12px;
+  margin-top: 16px;
+  padding: 0;
+}
+
+#PanelUI-whatsNew button:hover {
+  color: #0a84ff;
+  text-decoration: underline;
+}
+
+#PanelUI-whatsNew button:active {
+  color: #0060df;
 }