Bug 1355020 - part 3: add notification container and styling for photon hamburger panel, r=mikedeboer

MozReview-Commit-ID: 4Jajbo9pzg5

--HG--
extra : rebase_source : ea83b92bb8626e0449f76a00099e86ae78e0a7ef

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

@@ -500,6 +500,14 @@
   <panelmultiview id="appMenu-multiView" mainViewId="appMenu-mainView">
     <panelview id="appMenu-mainView" class="cui-widget-panelview PanelUI-subView">
       <vbox class="panel-subview-body">
+        <vbox id="appMenu-addon-banners"/>
+        <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"
+                       hidden="true"/>
         <toolbarbutton id="appMenu-new-window-button"
                        class="subviewbutton subviewbutton-iconic"
                        label="&newNavigatorCmd.label;"

browser/components/customizableui/content/panelUI.js

@@ -37,7 +37,7 @@ const PanelUI = {
       panel: gPhotonStructure ? "appMenu-popup" : "PanelUI-popup",
       notificationPanel: "appMenu-notification-popup",
       scroller: "PanelUI-contents-scroller",
-      addonNotificationContainer: "PanelUI-footer-addons",
+      addonNotificationContainer: gPhotonStructure ? "appMenu-addon-banners" : "PanelUI-footer-addons",
 
       overflowFixedList: gPhotonStructure ? "widget-overflow-fixed-list" : "",
     };

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

@@ -314,7 +314,7 @@ panelview[id^=PanelUI-webext-] {
 }
 
 panelview:not([mainview]) .toolbarbutton-text,
-.cui-widget-panel toolbarbutton > .toolbarbutton-text {
+.cui-widget-panel toolbarbutton:not([wrap]) > .toolbarbutton-text {
   text-align: start;
   display: -moz-box;
 }
@@ -675,6 +675,15 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   margin-bottom: -1px;
 }
 
+/* in Photon, we have a bottom border as well. Reconcile with the above rule
+ * after photon launch. */
+#appMenu-mainView > .panel-subview-body > .panel-banner-item {
+  border-bottom: 1px solid var(--panel-separator-color);
+  margin-bottom: 3px;
+  padding-inline-start: 10px;
+}
+
+
 .panel-banner-item > .toolbarbutton-text {
   width: 0; /* Fancy cropping solution for flexbox. */
 }