Bug 1355020 - part 1: disentangle update notifications from 'PanelUI' and hardcoded IDs, r=dthayer

MozReview-Commit-ID: EqLtDuRC8EH

--HG--
extra : rebase_source : 4508af1a155193ae556c0b9261aeb13a71afb0e9

browser/base/content/browser.css

@@ -1187,7 +1187,7 @@ toolbarpaletteitem[place="palette"][hidden] {
   max-width: 10em;
 }
 
-#main-window[customizing=true] .PanelUI-notification-menu-item {
+#main-window[customizing=true] .panel-banner-item {
   display: none;
 }
 

browser/base/content/test/appUpdate/head.js

@@ -208,7 +208,7 @@ function processStep({notificationId, button, beforeClick, cleanup}) {
       return;
     }
 
-    let notification = document.getElementById(`PanelUI-${notificationId}-notification`);
+    let notification = document.getElementById(`appMenu-${notificationId}-notification`);
     is(notification.hidden, false, `${notificationId} notification is showing`);
     if (beforeClick) {
       yield Task.spawn(beforeClick);

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

@@ -17,17 +17,12 @@
 
       <footer id="PanelUI-footer">
         <vbox id="PanelUI-footer-addons"></vbox>
-        <toolbarbutton id="PanelUI-update-available-menu-item"
+        <toolbarbutton class="panel-banner-item"
+                       label-update-available="&updateAvailable.panelUI.label;"
+                       label-update-manual="&updateManual.panelUI.label;"
+                       label-update-restart="&updateRestart.panelUI.label;"
+                       oncommand="PanelUI._onBannerItemSelected(event)"
                        wrap="true"
-                       label="&updateAvailable.panelUI.label;"
-                       hidden="true"/>
-        <toolbarbutton id="PanelUI-update-manual-menu-item"
-                       wrap="true"
-                       label="&updateManual.panelUI.label;"
-                       hidden="true"/>
-        <toolbarbutton id="PanelUI-update-restart-menu-item"
-                       wrap="true"
-                       label="&updateRestart.panelUI.label;"
                        hidden="true"/>
         <hbox id="PanelUI-footer-fxa">
           <hbox id="PanelUI-fxa-status"
@@ -431,7 +426,7 @@
           oncommand="PanicButtonNotifier.close()"/>
 </panel>
 
-<panel id="PanelUI-notification-popup"
+<panel id="appMenu-notification-popup"
        class="popup-notification-panel"
        type="arrow"
        position="after_start"
@@ -441,7 +436,7 @@
        noautohide="true"
        nopreventnavboxhide="true"
        role="alert">
-  <popupnotification id="PanelUI-update-available-notification"
+  <popupnotification id="appMenu-update-available-notification"
                      popupid="update-available"
                      label="&updateAvailable.header.message;"
                      buttonlabel="&updateAvailable.acceptButton.label;"
@@ -459,7 +454,7 @@
     </popupnotificationcontent>
   </popupnotification>
 
-  <popupnotification id="PanelUI-update-manual-notification"
+  <popupnotification id="appMenu-update-manual-notification"
                      popupid="update-manual"
                      label="&updateManual.header.message;"
                      buttonlabel="&updateManual.acceptButton.label;"
@@ -477,7 +472,7 @@
     </popupnotificationcontent>
   </popupnotification>
 
-  <popupnotification id="PanelUI-update-restart-notification"
+  <popupnotification id="appMenu-update-restart-notification"
                      popupid="update-restart"
                      label="&updateRestart.header.message2;"
                      buttonlabel="&updateRestart.acceptButton.label;"

browser/components/customizableui/content/panelUI.js

@@ -35,9 +35,8 @@ const PanelUI = {
       helpView: "PanelUI-helpView",
       menuButton: "PanelUI-menu-button",
       panel: gPhotonStructure ? "appMenu-popup" : "PanelUI-popup",
-      notificationPanel: "PanelUI-notification-popup",
+      notificationPanel: "appMenu-notification-popup",
       scroller: "PanelUI-contents-scroller",
-      footer: "PanelUI-footer",
 
       overflowFixedList: gPhotonStructure ? "widget-overflow-fixed-list" : "",
     };
@@ -703,13 +702,13 @@ const PanelUI = {
       this._hidePopup();
       this._clearBadge();
       if (!this.notifications[0].options.badgeOnly) {
-        this._showMenuItem(this.notifications[0]);
+        this._showBannerItem(this.notifications[0]);
       }
     } else if (doorhangers.length > 0) {
       if (window.fullScreen) {
         this._hidePopup();
         this._showBadge(doorhangers[0]);
-        this._showMenuItem(doorhangers[0]);
+        this._showBannerItem(doorhangers[0]);
       } else {
         this._clearBadge();
         this._showNotificationPanel(doorhangers[0]);
@@ -717,7 +716,7 @@ const PanelUI = {
     } else {
       this._hidePopup();
       this._showBadge(this.notifications[0]);
-      this._showMenuItem(this.notifications[0]);
+      this._showBannerItem(this.notifications[0]);
     }
   },
 
@@ -744,7 +743,7 @@ const PanelUI = {
   _clearAllNotifications() {
     this._clearNotificationPanel();
     this._clearBadge();
-    this._clearMenuItems();
+    this._clearBannerItem();
   },
 
   _refreshNotificationPanel(notification) {
@@ -766,32 +765,31 @@ const PanelUI = {
     this.menuButton.setAttribute("badge-status", badgeStatus);
   },
 
-  // "Menu item" here refers to an item in the hamburger panel menu. They will
-  // typically show up as a colored row near the bottom of the panel.
-  _showMenuItem(notification) {
-    this._clearMenuItems();
-
-    let menuItemId = this._getMenuItemId(notification);
-    let menuItem = document.getElementById(menuItemId);
-    if (menuItem) {
-      menuItem.notification = notification;
-      menuItem.setAttribute("oncommand", "PanelUI._onNotificationMenuItemSelected(event)");
-      menuItem.classList.add("PanelUI-notification-menu-item");
-      menuItem.hidden = false;
-      menuItem.fromPanelUINotifications = true;
+  // "Banner item" here refers to an item in the hamburger panel menu. They will
+  // typically show up as a colored row in the panel.
+  _showBannerItem(notification) {
+    if (!this._panelBannerItem) {
+      this._panelBannerItem = this.mainView.querySelector(".panel-banner-item");
     }
+    let label = this._panelBannerItem.getAttribute("label-" + notification.id);
+    // Ignore items we don't know about.
+    if (!label) {
+      return;
+    }
+    this._panelBannerItem.setAttribute("notificationid", notification.id);
+    this._panelBannerItem.setAttribute("label", label);
+    this._panelBannerItem.hidden = false;
+    this._panelBannerItem.notification = notification;
   },
 
   _clearBadge() {
     this.menuButton.removeAttribute("badge-status");
   },
 
-  _clearMenuItems() {
-    for (let child of this.footer.children) {
-      if (child.fromPanelUINotifications) {
-        child.notification = null;
-        child.hidden = true;
-      }
+  _clearBannerItem() {
+    if (this._panelBannerItem) {
+      this._panelBannerItem.notification = null;
+      this._panelBannerItem.hidden = true;
     }
   },
 
@@ -852,7 +850,7 @@ const PanelUI = {
     this._updateNotifications();
   },
 
-  _onNotificationMenuItemSelected(event) {
+  _onBannerItemSelected(event) {
     let target = event.originalTarget;
     if (!target.notification)
       throw "menucommand target has no associated action/notification";
@@ -870,12 +868,10 @@ const PanelUI = {
     this._updateNotifications();
   },
 
-  _getPopupId(notification) { return "PanelUI-" + notification.id + "-notification"; },
+  _getPopupId(notification) { return "appMenu-" + notification.id + "-notification"; },
 
   _getBadgeStatus(notification) { return notification.id; },
 
-  _getMenuItemId(notification) { return "PanelUI-" + notification.id + "-menu-item"; },
-
   _getPanelAnchor(candidate) {
     let iconAnchor =
       document.getAnonymousElementByAttribute(candidate, "class",

browser/components/customizableui/test/browser_panelUINotifications.js

@@ -32,7 +32,7 @@ add_task(function* testMainActionCalled() {
     let notifications = [...PanelUI.notificationPanel.children].filter(n => !n.hidden);
     is(notifications.length, 1, "PanelUI doorhanger is only displaying one notification.");
     let doorhanger = notifications[0];
-    is(doorhanger.id, "PanelUI-update-manual-notification", "PanelUI is displaying the update-manual notification.");
+    is(doorhanger.id, "appMenu-update-manual-notification", "PanelUI is displaying the update-manual notification.");
 
     let mainActionButton = doc.getAnonymousElementByAttribute(doorhanger, "anonid", "button");
     mainActionButton.click();
@@ -82,7 +82,7 @@ add_task(function* testSecondaryActionWorkflow() {
     let notifications = [...PanelUI.notificationPanel.children].filter(n => !n.hidden);
     is(notifications.length, 1, "PanelUI doorhanger is only displaying one notification.");
     let doorhanger = notifications[0];
-    is(doorhanger.id, "PanelUI-update-manual-notification", "PanelUI is displaying the update-manual notification.");
+    is(doorhanger.id, "appMenu-update-manual-notification", "PanelUI is displaying the update-manual notification.");
 
     let secondaryActionButton = doc.getAnonymousElementByAttribute(doorhanger, "anonid", "secondarybutton");
     secondaryActionButton.click();
@@ -94,7 +94,8 @@ add_task(function* testSecondaryActionWorkflow() {
 
     yield PanelUI.show();
     isnot(PanelUI.menuButton.getAttribute("badge-status"), "update-manual", "Badge is hidden on PanelUI button.");
-    let menuItem = doc.getElementById("PanelUI-update-manual-menu-item");
+    let menuItem = PanelUI.mainView.querySelector(".panel-banner-item");
+    is(menuItem.label, menuItem.getAttribute("label-update-manual"), "Showing correct label");
     is(menuItem.hidden, false, "update-manual menu item is showing.");
 
     yield PanelUI.hide();
@@ -136,7 +137,7 @@ add_task(function* testInteractionWithBadges() {
     let notifications = [...PanelUI.notificationPanel.children].filter(n => !n.hidden);
     is(notifications.length, 1, "PanelUI doorhanger is only displaying one notification.");
     let doorhanger = notifications[0];
-    is(doorhanger.id, "PanelUI-update-manual-notification", "PanelUI is displaying the update-manual notification.");
+    is(doorhanger.id, "appMenu-update-manual-notification", "PanelUI is displaying the update-manual notification.");
 
     let secondaryActionButton = doc.getAnonymousElementByAttribute(doorhanger, "anonid", "secondarybutton");
     secondaryActionButton.click();
@@ -147,7 +148,8 @@ add_task(function* testInteractionWithBadges() {
 
     yield PanelUI.show();
     isnot(PanelUI.menuButton.getAttribute("badge-status"), "update-manual", "Badge is hidden on PanelUI button.");
-    let menuItem = doc.getElementById("PanelUI-update-manual-menu-item");
+    let menuItem = PanelUI.mainView.querySelector(".panel-banner-item");
+    is(menuItem.label, menuItem.getAttribute("label-update-manual"), "Showing correct label");
     is(menuItem.hidden, false, "update-manual menu item is showing.");
 
     menuItem.click();
@@ -179,7 +181,7 @@ add_task(function* testAddingBadgeWhileDoorhangerIsShowing() {
     let notifications = [...PanelUI.notificationPanel.children].filter(n => !n.hidden);
     is(notifications.length, 1, "PanelUI doorhanger is only displaying one notification.");
     let doorhanger = notifications[0];
-    is(doorhanger.id, "PanelUI-update-manual-notification", "PanelUI is displaying the update-manual notification.");
+    is(doorhanger.id, "appMenu-update-manual-notification", "PanelUI is displaying the update-manual notification.");
 
     let mainActionButton = doc.getAnonymousElementByAttribute(doorhanger, "anonid", "button");
     mainActionButton.click();
@@ -265,7 +267,7 @@ add_task(function* testMultipleNonBadges() {
     notifications = [...PanelUI.notificationPanel.children].filter(n => !n.hidden);
     is(notifications.length, 1, "PanelUI doorhanger is only displaying one notification.");
     doorhanger = notifications[0];
-    is(doorhanger.id, "PanelUI-update-manual-notification", "PanelUI is displaying the update-manual notification.");
+    is(doorhanger.id, "appMenu-update-manual-notification", "PanelUI is displaying the update-manual notification.");
 
     PanelUI.showNotification("update-restart", updateRestartAction);
 
@@ -273,7 +275,7 @@ add_task(function* testMultipleNonBadges() {
     notifications = [...PanelUI.notificationPanel.children].filter(n => !n.hidden);
     is(notifications.length, 1, "PanelUI doorhanger is only displaying one notification.");
     doorhanger = notifications[0];
-    is(doorhanger.id, "PanelUI-update-restart-notification", "PanelUI is displaying the update-restart notification.");
+    is(doorhanger.id, "appMenu-update-restart-notification", "PanelUI is displaying the update-restart notification.");
 
     let secondaryActionButton = doc.getAnonymousElementByAttribute(doorhanger, "anonid", "secondarybutton");
     secondaryActionButton.click();
@@ -281,11 +283,10 @@ add_task(function* testMultipleNonBadges() {
     is(PanelUI.notificationPanel.state, "closed", "update-manual doorhanger is closed.");
     is(PanelUI.menuButton.getAttribute("badge-status"), "update-restart", "update-restart badge is displaying on PanelUI button.");
 
-    let menuItem;
-
     yield PanelUI.show();
     isnot(PanelUI.menuButton.getAttribute("badge-status"), "update-restart", "update-restart badge is hidden on PanelUI button.");
-    menuItem = doc.getElementById("PanelUI-update-restart-menu-item");
+    let menuItem = PanelUI.mainView.querySelector(".panel-banner-item");
+    is(menuItem.label, menuItem.getAttribute("label-update-restart"), "Showing correct label");
     is(menuItem.hidden, false, "update-restart menu item is showing.");
 
     menuItem.click();
@@ -296,7 +297,7 @@ add_task(function* testMultipleNonBadges() {
 
     yield PanelUI.show();
     isnot(PanelUI.menuButton.getAttribute("badge-status"), "update-manual", "update-manual badge is hidden on PanelUI button.");
-    menuItem = doc.getElementById("PanelUI-update-manual-menu-item");
+    is(menuItem.label, menuItem.getAttribute("label-update-manual"), "Showing correct label");
     is(menuItem.hidden, false, "update-manual menu item is showing.");
 
     menuItem.click();
@@ -318,7 +319,7 @@ add_task(function* testFullscreen() {
   let notifications = [...PanelUI.notificationPanel.children].filter(n => !n.hidden);
   is(notifications.length, 1, "PanelUI doorhanger is only displaying one notification.");
   let doorhanger = notifications[0];
-  is(doorhanger.id, "PanelUI-update-manual-notification", "PanelUI is displaying the update-manual notification.");
+  is(doorhanger.id, "appMenu-update-manual-notification", "PanelUI is displaying the update-manual notification.");
 
   let popuphiddenPromise = BrowserTestUtils.waitForEvent(PanelUI.notificationPanel, "popuphidden");
   EventUtils.synthesizeKey("VK_F11", {});

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

@@ -124,16 +124,12 @@
   min-height: 16px;
 }
 
-#PanelUI-update-restart-menu-item::after,
-#PanelUI-update-available-menu-item::after,
-#PanelUI-update-manual-menu-item::after {
+.panel-banner-item[notificationid^=update]::after {
   background: #74BF43 url(chrome://browser/skin/update-badge.svg) no-repeat center;
   border-radius: 50%;
 }
 
-#PanelUI-update-restart-menu-item,
-#PanelUI-update-available-menu-item,
-#PanelUI-update-manual-menu-item {
+.panel-banner-item[notificationid^=update] {
   list-style-image: url(chrome://branding/content/icon16.png);
 }
 
@@ -465,7 +461,7 @@ toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
 
 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
-#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > .PanelUI-notification-menu-item,
+#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > .panel-banner-item,
 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-label,
 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-icon,
@@ -588,7 +584,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
 }
 
 #PanelUI-footer-addons > toolbarbutton::after,
-.PanelUI-notification-menu-item::after {
+.panel-banner-item::after {
   content: "";
   width: 16px;
   height: 16px;
@@ -654,7 +650,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   margin: 0;
 }
 
-.PanelUI-notification-menu-item,
+.panel-banner-item,
 #PanelUI-help,
 #PanelUI-fxa-label,
 #PanelUI-fxa-icon,
@@ -673,13 +669,13 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   -moz-box-orient: horizontal;
 }
 
-.PanelUI-notification-menu-item {
+.panel-banner-item {
   border-top: 1px solid var(--panel-separator-color);
   border-bottom: 1px solid transparent;
   margin-bottom: -1px;
 }
 
-.PanelUI-notification-menu-item > .toolbarbutton-text {
+.panel-banner-item > .toolbarbutton-text {
   width: 0; /* Fancy cropping solution for flexbox. */
 }
 
@@ -688,7 +684,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   min-width: 46px;
 }
 
-.PanelUI-notification-menu-item > .toolbarbutton-text,
+.panel-banner-item > .toolbarbutton-text,
 #PanelUI-fxa-label > .toolbarbutton-text,
 #PanelUI-footer-addons > toolbarbutton > .toolbarbutton-text,
 #PanelUI-customize > .toolbarbutton-text {
@@ -703,7 +699,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   display: none;
 }
 
-.PanelUI-notification-menu-item > .toolbarbutton-icon,
+.panel-banner-item > .toolbarbutton-icon,
 #PanelUI-fxa-label > .toolbarbutton-icon,
 #PanelUI-fxa-icon > .toolbarbutton-icon,
 #PanelUI-customize > .toolbarbutton-icon,
@@ -731,7 +727,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
 
 /* descend from #PanelUI-footer to add specificity, or else the
    padding-inline-start will be overridden */
-#PanelUI-footer > .PanelUI-notification-menu-item {
+#PanelUI-footer > .panel-banner-item {
   width: calc(@menuPanelWidth@ + 30px);
   padding-inline-start: 15px;
   border-inline-start-style: none;
@@ -972,16 +968,16 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
 }
 
-.PanelUI-notification-menu-item {
+.panel-banner-item {
   color: black;
   background-color: hsla(96,65%,75%,.5);
 }
 
-.PanelUI-notification-menu-item:not([disabled]):hover {
+.panel-banner-item:not([disabled]):hover {
   background-color: hsla(96,65%,75%,.8);
 }
 
-.PanelUI-notification-menu-item:not([disabled]):hover:active {
+.panel-banner-item:not([disabled]):hover:active {
   background-color: hsl(96,65%,75%);
 }
 
@@ -1697,9 +1693,7 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left {
                       linear-gradient(rgba(255,255,255,0.3), transparent);
   }
 
-  #PanelUI-update-restart-menu-item,
-  #PanelUI-update-available-menu-item,
-  #PanelUI-update-manual-menu-item {
+  .panel-banner-item[notificationid^=update] {
     list-style-image: url(chrome://branding/content/icon32.png);
   }
 
@@ -1736,7 +1730,7 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left {
     -moz-image-region: rect(0, 32px, 32px, 0);
   }
 
-  .PanelUI-notification-menu-item > .toolbarbutton-icon,
+  .panel-banner-item > .toolbarbutton-icon,
   #PanelUI-fxa-label > .toolbarbutton-icon,
   #PanelUI-fxa-icon > .toolbarbutton-icon,
   #PanelUI-customize > .toolbarbutton-icon,