Bug 877684 - Implement new Customize and Help button styling, r=jaws
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Tue, 25 Jun 2013 11:05:24 -0400
changeset 164566 a39e19167f5e7ec496cb3720229a65a54f863af9
parent 164565 ec67f6224dd93affbfc21dd45c4961f65a803e06
child 164567 633f38c4b84175857d19035f49b40b8089e35650
push id4703
push userakeybl@mozilla.com
push dateMon, 09 Dec 2013 20:24:19 +0000
treeherdermozilla-aurora@20af7fbd96c1 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs877684
milestone25.0a1
Bug 877684 - Implement new Customize and Help button styling, r=jaws
browser/components/customizableui/content/panelUI.inc.xul
browser/components/customizableui/src/CustomizeMode.jsm
browser/themes/osx/browser.css
browser/themes/osx/customizableui/panelUIOverlay.css
browser/themes/shared/customizableui/panelUIOverlay.inc.css
--- a/browser/components/customizableui/content/panelUI.inc.xul
+++ b/browser/components/customizableui/content/panelUI.inc.xul
@@ -10,24 +10,23 @@
        consumeoutsideclicks="true"
        noautofocus="true">
   <panelmultiview id="PanelUI-multiView" mainViewId="PanelUI-mainView">
     <panelview id="PanelUI-mainView" contextmenu="customizationPanelContextMenu">
       <vbox id="PanelUI-contents" type="grid"/>
 
       <vbox id="PanelUI-mainView-spring" flex="1"/>
 
-      <footer class="PanelUI-footer" align="center">
+      <footer class="PanelUI-footer">
+        <toolbarbutton id="PanelUI-customize-btn" label="&appMenuCustomize.label;"
+                       oncommand="gCustomizeMode.toggle()" flex="1"/>
         <!-- The parentNode is used so that the footer is presented as the anchor
              instead of just the button being the anchor. -->
-        <toolbarbutton id="PanelUI-help-btn" label="&helpMenu.label;"
-                       onclick="PanelUI.showHelpView(this.parentNode);"/>
-        <spacer flex="1"/>
-        <toolbarbutton id="PanelUI-customize-btn" label="&appMenuCustomize.label;"
-                       command="cmd_CustomizeToolbars"/>
+        <toolbarbutton id="PanelUI-help-btn" aria-label="&helpMenu.label;"
+                       oncommand="PanelUI.showHelpView(this.parentNode);"/>
       </footer>
     </panelview>
 
     <panelview id="PanelUI-history" flex="1">
       <label value="&appMenuHistory.label;"/>
       <toolbarbutton id="appMenuClearRecentHistory"
                      label="&appMenuHistory.clearRecent.label;"
                      command="Tools:Sanitize"/>
--- a/browser/components/customizableui/src/CustomizeMode.jsm
+++ b/browser/components/customizableui/src/CustomizeMode.jsm
@@ -56,16 +56,28 @@ CustomizeMode.prototype = {
   _stowedPalette: null,
   _dragOverItem: null,
   _customizing: false,
 
   get panelUIContents() {
     return this.document.getElementById("PanelUI-contents");
   },
 
+  toggle: function() {
+    if (this._transitioning) {
+      return;
+    }
+    if (this._customizing) {
+      this.exit();
+    } else {
+      this.enter();
+    }
+  },
+
+
   enter: function() {
     if (this._customizing || this._transitioning) {
       return;
     }
 
     // We don't need to switch to kAboutURI, or open a new tab at
     // kAboutURI if we're already on it.
     if (this.browser.selectedBrowser.currentURI.spec != kAboutURI) {
@@ -136,16 +148,18 @@ CustomizeMode.prototype = {
 
       window.gNavToolbox.addEventListener("toolbarvisibilitychange", this);
 
       // Same goes for the menu button - if we're customizing, a click to the
       // menu button means a quick exit from customization mode.
       window.PanelUI.menuButton.addEventListener("click", this, false);
       window.PanelUI.menuButton.disabled = true;
 
+      window.document.getElementById("PanelUI-help-btn").disabled = true;
+
       this._updateResetButton();
 
       let customizableToolbars = document.querySelectorAll("toolbar[customizable=true]:not([autohide=true]):not([collapsed=true])");
       for (let toolbar of customizableToolbars)
         toolbar.setAttribute("customizing", true);
 
       window.PanelUI.endBatchUpdate();
       this._customizing = true;
@@ -210,16 +224,18 @@ CustomizeMode.prototype = {
       this.areas = [];
 
       // Let everybody in this window know that we're starting to
       // exit customization mode.
       this.dispatchToolboxEvent("customizationending");
       window.PanelUI.setMainView(window.PanelUI.mainView);
       window.PanelUI.menuButton.disabled = false;
 
+      window.document.getElementById("PanelUI-help-btn").disabled = false;
+
       // We need to set self._customizing to false before removing the tab
       // or the TabSelect event handler will think that we are exiting
       // customization mode for a second time.
       this._customizing = false;
 
       if (this.browser.selectedBrowser.currentURI.spec == kAboutURI) {
         let custBrowser = this.browser.selectedBrowser;
         if (custBrowser.canGoBack) {
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -976,18 +976,18 @@ toolbarbutton.bookmark-item > menupopup 
     -moz-image-region: rect(0px, 1472px, 64px, 1408px);
   }
 
   #preferences-button[customizableui-areatype="menu-panel"],
   toolbarpaletteitem[place="palette"] > #preferences-button {
     -moz-image-region: rect(0px, 1536px, 64px, 1472px);
   }
 
-  /* Wide panel control icons */
-
+  /* Footer and wide panel control icons */
+  #PanelUI-customize-btn,
   #edit-controls[customizableui-areatype="menu-panel"] > toolbarbutton,
   #zoom-controls[customizableui-areatype="menu-panel"] > toolbarbutton,
   toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
   toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
     list-style-image: url(chrome://browser/skin/menuPanel-small@2x.png);
   }
 
   #edit-controls[customizableui-areatype="menu-panel"] > #cut-button,
@@ -1009,16 +1009,29 @@ toolbarbutton.bookmark-item > menupopup 
   toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
     -moz-image-region: rect(0px, 160px, 32px, 128px);
   }
 
   #zoom-controls[customizableui-areatype="menu-panel"] > #zoom-in-button,
   toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
     -moz-image-region: rect(0px, 192px, 32px, 160px);
   }
+
+  #PanelUI-customize-btn {
+    -moz-image-region: rect(0, 32px, 32px, 0);
+  }
+
+  #PanelUI-help-btn {
+    list-style-image: url(chrome://global/skin/icons/question-32.png);
+  }
+
+  #PanelUI-customize-btn > .toolbarbutton-icon,
+  #PanelUI-help-btn > .toolbarbutton-icon {
+    width: 16px;
+  }
 }
 
 .toolbarbutton-1:not([type="menu-button"]),
 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
 #restore-button {
   min-width: 28px;
 }
 
--- a/browser/themes/osx/customizableui/panelUIOverlay.css
+++ b/browser/themes/osx/customizableui/panelUIOverlay.css
@@ -4,17 +4,17 @@
 
 %filter substitution
 %define menuPanelWidth 26em
 
 %include ../../shared/customizableui/panelUIOverlay.inc.css
 
 @media (min-resolution: 2dppx) {
   #customization-palette toolbarbutton > .toolbarbutton-icon,
-  #PanelUI-mainView toolbarbutton > .toolbarbutton-icon {
+  #PanelUI-contents toolbarbutton > .toolbarbutton-icon {
     width: 20px;
   }
 }
 
 #edit-controls[customizableui-areatype="menu-panel"] > toolbarbutton:not(:first-child),
 #zoom-controls[customizableui-areatype="menu-panel"] > toolbarbutton:not(:first-child) {
   -moz-margin-start: 0;
 }
--- a/browser/themes/shared/customizableui/panelUIOverlay.inc.css
+++ b/browser/themes/shared/customizableui/panelUIOverlay.inc.css
@@ -40,19 +40,23 @@
 }
 #PanelUI-popup > arrowscrollbox > scrollbox {
   overflow: visible;
 }
 
 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
   overflow: hidden;
   padding: 0;
+  box-shadow: none;
 }
 
-#PanelUI-mainView .toolbarbutton-text {
+#PanelUI-contents > toolbarpaletteitem > toolbaritem > toolbarbutton > .toolbarbutton-text,
+#PanelUI-contents > toolbaritem > toolbarbutton > .toolbarbutton-text,
+#PanelUI-contents > toolbarpaletteitem > toolbarbutton > .toolbarbutton-text,
+#PanelUI-contents > toolbarbutton > .toolbarbutton-text {
   display: -moz-box;
   font-size: 10px;
 }
 
 #PanelUI-contents #wrapper-edit-controls,
 #PanelUI-contents #wrapper-zoom-controls {
   margin-left: -1em;
   margin-right: -1em;
@@ -71,21 +75,19 @@
   width: calc(100% + 2em);
 }
 
 #PanelUI-contents #wrapper-edit-controls #edit-controls,
 #PanelUI-contents #wrapper-zoom-controls #zoom-controls {
   -moz-margin-start: 0;
 }
 
-.PanelUI-footer,
 #PanelUI-contents #edit-controls,
 #PanelUI-contents #zoom-controls,
 #PanelUI-contents,
-.PanelUI-footer,
 .panel-mainview:not([panelid="PanelUI-popup"]) {
   max-width: @menuPanelWidth@;
   padding: .5em 1em;
 }
 
 #PanelUI-contents[type="list"] toolbarbutton > .toolbarbutton-text,
 panelview:not([mainview]) .toolbarbutton-text,
 #customizationui-widget-panel toolbarbutton > .toolbarbutton-text {
@@ -182,29 +184,67 @@ toolbarpaletteitem[place="palette"] > to
 #zoom-out-button > .toolbarbutton-text,
 #zoom-reset-button > .toolbarbutton-icon {
   display: none;
 }
 
 .PanelUI-footer {
   background-color: rgba(0, 0, 0, 0.05);
   border-top: 1px solid rgba(0,0,0,.1);
+  padding: 0;
+  margin: 0;
 }
 
-.PanelUI-footer toolbarbutton > .toolbarbutton-icon {
+#PanelUI-help-btn,
+#PanelUI-customize-btn {
+  margin: -1px 0 0;
+  padding: 12px;
+  -moz-appearance: none;
+  box-shadow: none;
+  background-image: none;
+  border: none;
+  border-top: 1px solid transparent;
+  border-radius: 0;
+  transition: background-color;
+}
+#PanelUI-help-btn {
+  -moz-border-start: 1px solid transparent;
+  list-style-image: url(chrome://global/skin/icons/question-16.png);
+}
+#PanelUI-customize-btn {
+  -moz-border-end: 1px solid transparent;
+  list-style-image: url(chrome://browser/skin/menuPanel-small.png);
+  -moz-image-region: rect(0, 16px, 16px, 0);
+}
+
+#PanelUI-help-btn[disabled] {
+  opacity: 0.4;
+}
+
+#PanelUI-help-btn:not([disabled]):hover,
+#PanelUI-customize-btn:hover {
+  border-top: 1px solid rgba(8,25,42,0.1);
+  background-color: rgba(0,0,0,0.1);
+  box-shadow: none;
+}
+
+#PanelUI-help-btn:not([disabled]):hover {
+  -moz-border-start: 1px solid rgba(8,25,42,0.2);
+}
+
+#PanelUI-customize-btn:hover {
+  -moz-border-end: 1px solid rgba(8,25,42,0.2);
+}
+
+#PanelUI-help-btn > .toolbarbutton-text {
   display: none;
 }
 
-#PanelUI-help-btn {
-  -moz-appearance: none;
-  border: none;
-  box-shadow: none;
-  background: transparent;
-  text-decoration: underline;
-  cursor: pointer;
+#PanelUI-customize-btn > .toolbarbutton-text {
+  text-align: start;
 }
 
 #customization-palette .toolbarbutton-text {
   display: none;
 }
 
 panelview toolbarbutton,
 #widget-overflow-list > toolbarbutton,
@@ -222,18 +262,17 @@ panelview toolbarbutton,
   transition-property: background-color, border-color, box-shadow;
   transition-duration: 150ms;
 }
 
 panelview toolbarbutton:not([disabled]):not([checked]):not([open]):not(:active):hover,
 #widget-overflow-list > toolbarbutton:not([disabled]):not([checked]):not([open]):not(:active):hover,
 #PanelUI-contents #edit-controls toolbarbutton,
 #PanelUI-contents #zoom-controls toolbarbutton,
-.customizationmode-button,
-#PanelUI-mainView #PanelUI-customize-btn {
+.customizationmode-button {
   background-image: -moz-linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1));
   border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.2) hsla(210,54%,20%,.25);
   box-shadow: 0 1px hsla(0,0%,100%,.3) inset,
               0 1px hsla(210,54%,20%,.03),
               0 0 2px hsla(210,54%,20%,.1);
 }
 
 panelview toolbarbutton:not([disabled]):-moz-any([open],[checked],:hover:active),