Bug 1373016 - switch from a tip panel to a permanent message for empty overflow panels in customize mode for photon, r=jaws

MozReview-Commit-ID: GhQoSgPXL9q

--HG--
extra : rebase_source : acc57eb6347a5017077358e84c5803719f3331ef

browser/base/content/browser.css

@@ -1237,7 +1237,6 @@ toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > #downloads-
 }
 
 #customization-panelHolder > #widget-overflow-fixed-list {
-  padding-bottom: 50px; /* Make sure there's always space to drop stuff. */
   flex: 0 1 auto; /* Size to content, but allow ourselves to shrink */
   display: flex;
   flex-direction: column;

browser/components/customizableui/CustomizeMode.jsm

@@ -412,7 +412,9 @@ CustomizeMode.prototype = {
       this._updateEmptyPaletteNotice();
 
       this._updateLWThemeButtonIcon();
+      if (!AppConstants.MOZ_PHOTON_THEME) {
         this.maybeShowTip(panelHolder);
+      }
 
       this._handler.isEnteringCustomizeMode = false;
       if (!gPhotonStructure) {

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

@@ -353,7 +353,8 @@
         <vbox id="widget-overflow-list" class="widget-overflow-list"
               overflowfortoolbar="nav-bar"/>
         <toolbarseparator id="widget-overflow-fixed-separator" hidden="true"/>
-        <vbox id="widget-overflow-fixed-list" class="widget-overflow-list" hidden="true"/>
+        <vbox id="widget-overflow-fixed-list" class="widget-overflow-list" hidden="true"
+              emptylabel="&customizeMode.emptyOverflowList.description;"/>
       </vbox>
 #ifdef MOZ_PHOTON_THEME
     </panelview>

browser/locales/en-US/chrome/browser/browser.dtd

@@ -854,6 +854,7 @@ you can use these alternative items. Otherwise, their values should be empty.  -
 <!ENTITY customizeMode.lwthemes.menuManage.accessKey "M">
 <!ENTITY customizeMode.lwthemes.menuGetMore "Get More Themes">
 <!ENTITY customizeMode.lwthemes.menuGetMore.accessKey "G">
+<!ENTITY customizeMode.emptyOverflowList.description "Drag and drop items here to keep them within reach but out of your toolbar…">
 
 <!ENTITY getUserMedia.selectCamera.label "Camera to share:">
 <!ENTITY getUserMedia.selectCamera.accesskey "C">

browser/themes/osx/browser.css

@@ -2207,6 +2207,7 @@ html|*.addon-webext-perm-list {
   border-left: 3px solid transparent;
 }
 
+%ifndef MOZ_PHOTON_THEME
 @media (min-resolution: 2dppx) {
   .customization-tipPanel-infoBox {
     background-image: url(chrome://browser/skin/customizableui/info-icon-customizeTip@2x.png);
@@ -2226,6 +2227,7 @@ html|*.addon-webext-perm-list {
     list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip@2x.png");
   }
 }
+%endif
 
 /* End customization mode */
 

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

@@ -570,4 +570,31 @@ toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
   margin-inline-start: 22.35em;
 }
 
+%ifdef MOZ_PHOTON_THEME
+#customization-panelHolder > #widget-overflow-fixed-list:not(:empty) {
+  padding-bottom: 50px; /* Make sure there's always space to drop stuff. */
+}
+
+#customization-panelHolder > #widget-overflow-fixed-list:empty {
+  background-image: url("chrome://browser/skin/customizableui/empty-overflow-panel.png");
+  background-position: center top 10px;
+  background-size: 218px 134px;
+  background-repeat: no-repeat;
+}
+
+#customization-panelHolder > #widget-overflow-fixed-list:empty::after {
+  content: attr(emptylabel);
+  padding: 154px 10px 10px; /* 154 = 134 for the image, 10px space on either side. */
+  text-align: center;
+  display: block;
+}
+
+@media (min-resolution: 1.1dppx) {
+  #customization-panelHolder > #widget-overflow-fixed-list:empty {
+    background-image: url("chrome://browser/skin/customizableui/empty-overflow-panel@2x.png");
+  }
+}
+
+%else
 %include customizeTip.inc.css
+%endif

browser/themes/shared/jar.inc.mn

@@ -34,16 +34,21 @@
   skin/classic/browser/controlcenter/warning-gray.svg          (../shared/controlcenter/warning-gray.svg)
   skin/classic/browser/controlcenter/warning-yellow.svg        (../shared/controlcenter/warning-yellow.svg)
   skin/classic/browser/customizableui/customizeFavicon.ico     (../shared/customizableui/customizeFavicon.ico)
+  skin/classic/browser/customizableui/menuPanel-customizeFinish.png  (../shared/customizableui/menuPanel-customizeFinish.png)
+  skin/classic/browser/customizableui/menuPanel-customizeFinish@2x.png  (../shared/customizableui/menuPanel-customizeFinish@2x.png)
+#ifdef MOZ_PHOTON_THEME
+  skin/classic/browser/customizableui/empty-overflow-panel.png     (../shared/customizableui/empty-overflow-panel.png)
+  skin/classic/browser/customizableui/empty-overflow-panel@2x.png  (../shared/customizableui/empty-overflow-panel@2x.png)
+#else
   skin/classic/browser/customizableui/customize-illustration.png  (../shared/customizableui/customize-illustration.png)
   skin/classic/browser/customizableui/customize-illustration@2x.png  (../shared/customizableui/customize-illustration@2x.png)
   skin/classic/browser/customizableui/customize-illustration-rtl.png  (../shared/customizableui/customize-illustration-rtl.png)
   skin/classic/browser/customizableui/customize-illustration-rtl@2x.png  (../shared/customizableui/customize-illustration-rtl@2x.png)
   skin/classic/browser/customizableui/info-icon-customizeTip.png  (../shared/customizableui/info-icon-customizeTip.png)
   skin/classic/browser/customizableui/info-icon-customizeTip@2x.png  (../shared/customizableui/info-icon-customizeTip@2x.png)
-  skin/classic/browser/customizableui/menuPanel-customizeFinish.png  (../shared/customizableui/menuPanel-customizeFinish.png)
-  skin/classic/browser/customizableui/menuPanel-customizeFinish@2x.png  (../shared/customizableui/menuPanel-customizeFinish@2x.png)
   skin/classic/browser/customizableui/panelarrow-customizeTip.png  (../shared/customizableui/panelarrow-customizeTip.png)
   skin/classic/browser/customizableui/panelarrow-customizeTip@2x.png  (../shared/customizableui/panelarrow-customizeTip@2x.png)
+#endif
   skin/classic/browser/customizableui/subView-arrow-back-inverted.png  (../shared/customizableui/subView-arrow-back-inverted.png)
   skin/classic/browser/customizableui/subView-arrow-back-inverted@2x.png  (../shared/customizableui/subView-arrow-back-inverted@2x.png)
   skin/classic/browser/customizableui/subView-arrow-back-inverted-rtl.png  (../shared/customizableui/subView-arrow-back-inverted-rtl.png)