Bug 939943 - [Australis] Make the Exit Customize button more obvious. r=mconley

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

@@ -17,10 +17,11 @@
       <footer id="PanelUI-footer">
         <!-- The parentNode is used so that the footer is presented as the anchor
              instead of just the button being the anchor. -->
+        <toolbarbutton id="PanelUI-customize" label="&appMenuCustomize.label;"
+                       exitLabel="&appMenuCustomizeExit.label;" tabindex="0"
+                       oncommand="gCustomizeMode.toggle();"/>
         <toolbarbutton id="PanelUI-help" label="&helpMenu.label;" tabindex="0"
                        oncommand="PanelUI.showHelpView(this.parentNode);"/>
-        <toolbarbutton id="PanelUI-customize" label="&appMenuCustomize.label;" tabindex="0"
-                       oncommand="gCustomizeMode.toggle();"/>
         <toolbarbutton id="PanelUI-quit" tabindex="0"
 #ifdef XP_WIN
                        label="&quitApplicationCmdWin.label;"

browser/components/customizableui/src/CustomizeMode.jsm

@@ -135,6 +135,10 @@ CustomizeMode.prototype = {
       let mainView = window.PanelUI.mainView;
       panelHolder.appendChild(mainView);
 
+      let customizeButton = document.getElementById("PanelUI-customize");
+      customizeButton.setAttribute("enterLabel", customizeButton.getAttribute("label"));
+      customizeButton.setAttribute("label", customizeButton.getAttribute("exitLabel"));
+
       this._transitioning = true;
 
       let customizer = document.getElementById("customization-container");
@@ -255,6 +259,10 @@ CustomizeMode.prototype = {
       window.PanelUI.setMainView(window.PanelUI.mainView);
       window.PanelUI.menuButton.disabled = false;
 
+      let customizeButton = document.getElementById("PanelUI-customize");
+      customizeButton.setAttribute("exitLabel", customizeButton.getAttribute("label"));
+      customizeButton.setAttribute("label", customizeButton.getAttribute("enterLabel"));
+
       // We have to use setAttribute/removeAttribute here instead of the
       // property because the XBL property will be set later, and right
       // now we'd be setting an expando, which breaks the XBL property.

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

@@ -328,6 +328,7 @@ These should match what Safari and other Apple applications use on OS X Lion. --
 <!ENTITY showAllHistoryCmd.commandkey "H">
 
 <!ENTITY appMenuCustomize.label "Customize">
+<!ENTITY appMenuCustomizeExit.label "Exit Customize">
 <!ENTITY appMenuHistory.label "History">
 <!ENTITY appMenuHistory.showAll.label "Show All History">
 <!ENTITY appMenuHistory.clearRecent.label "Clear Recent History…">

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

@@ -212,19 +212,36 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   border-bottom-style: none;
   border-radius: 0;
   transition: background-color;
-  -moz-box-orient: vertical;
-  flex: 1 1 33.33%;
+  -moz-box-orient: horizontal;
 }
-:-moz-any(#PanelUI-help, #PanelUI-customize, #PanelUI-quit) > .toolbarbutton-icon {
-  margin: 0 0 3px;
+
+#PanelUI-help,
+#PanelUI-quit {
+  min-width: 46px;
+}
+
+#PanelUI-customize > .toolbarbutton-text {
+  text-align: start;
+}
+
+#PanelUI-help > .toolbarbutton-text,
+#PanelUI-quit > .toolbarbutton-text {
+  display: none;
+}
+
+#PanelUI-help > .toolbarbutton-icon,
+#PanelUI-quit > .toolbarbutton-icon {
+  -moz-margin-end: 0;
 }
 
 #PanelUI-customize {
+  flex: 1;
+  -moz-padding-start: 15px;
+  -moz-border-start-style: none;
   list-style-image: url(chrome://browser/skin/menuPanel-customize.png);
 }
 
 #PanelUI-help {
-  -moz-border-start-style: none;
   list-style-image: url(chrome://browser/skin/menuPanel-help.png);
 }