Bug 964262 - Fade in icons in Australis' customization mode. ui-r=phlsa, r=Gijs, a=sylvestre
authorBlake Winton <bwinton@latte.ca>
Tue, 04 Mar 2014 08:00:00 -0500
changeset 183333 614541a852004e66d4c245c736cc502d34630e63
parent 183332 f87901f237ee65aa548d96ec7a949edbd28a1f6a
child 183334 791fa5b46a1824e691d37133da991509cccbe820
push id3343
push userffxbld
push dateMon, 17 Mar 2014 21:55:32 +0000
treeherdermozilla-beta@2f7d3415f79f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersphlsa, Gijs, sylvestre
bugs964262
milestone29.0a2
Bug 964262 - Fade in icons in Australis' customization mode. ui-r=phlsa, r=Gijs, a=sylvestre
browser/components/customizableui/src/CustomizeMode.jsm
browser/themes/shared/customizableui/customizeMode.inc.css
--- a/browser/components/customizableui/src/CustomizeMode.jsm
+++ b/browser/components/customizableui/src/CustomizeMode.jsm
@@ -191,16 +191,17 @@ CustomizeMode.prototype = {
       // need to force the menu panel to register itself, or else customization
       // is really not going to work. We pass "true" to ensureRegistered to
       // indicate that we're handling calling startBatchUpdate and
       // endBatchUpdate.
       yield window.PanelUI.ensureReady(true);
 
       // Hide the palette before starting the transition for increased perf.
       this.visiblePalette.hidden = true;
+      this.visiblePalette.removeAttribute("showing");
 
       // Disable the button-text fade-out mask
       // during the transition for increased perf.
       let panelContents = window.PanelUI.contents;
       panelContents.setAttribute("customize-transitioning", "true");
 
       // Move the mainView in the panel to the holder so that we can see it
       // while customizing.
@@ -258,16 +259,22 @@ CustomizeMode.prototype = {
 
       CustomizableUI.addListener(this);
       window.PanelUI.endBatchUpdate();
       this._customizing = true;
       this._transitioning = false;
 
       // Show the palette now that the transition has finished.
       this.visiblePalette.hidden = false;
+      window.setTimeout(() => {
+        // Force layout reflow to ensure the animation runs,
+        // and make it async so it doesn't affect the timing.
+        this.visiblePalette.clientTop;
+        this.visiblePalette.setAttribute("showing", "true");
+      }, 0);
       this.paletteSpacer.hidden = true;
       this._updateEmptyPaletteNotice();
 
       this.maybeShowTip(panelHolder);
 
       this._handler.isEnteringCustomizeMode = false;
       panelContents.removeAttribute("customize-transitioning");
 
@@ -338,16 +345,17 @@ CustomizeMode.prototype = {
 
     let window = this.window;
     let document = this.document;
     let documentElement = document.documentElement;
 
     // Hide the palette before starting the transition for increased perf.
     this.paletteSpacer.hidden = false;
     this.visiblePalette.hidden = true;
+    this.visiblePalette.removeAttribute("showing");
     this.paletteEmptyNotice.hidden = true;
 
     // Disable the button-text fade-out mask
     // during the transition for increased perf.
     let panelContents = window.PanelUI.contents;
     panelContents.setAttribute("customize-transitioning", "true");
 
     // Disable the reset and undo reset buttons while transitioning:
--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -171,16 +171,25 @@ toolbarpaletteitem[mousedown] {
 }
 
 .panel-customization-placeholder,
 toolbarpaletteitem[place="palette"],
 toolbarpaletteitem[place="panel"] {
   transition: transform .3s ease-in-out;
 }
 
+#customization-palette {
+  transition: opacity .3s ease-in-out;
+  opacity: 0;
+}
+
+#customization-palette[showing="true"] {
+  opacity: 1;
+}
+
 toolbarpaletteitem[notransition].panel-customization-placeholder,
 toolbarpaletteitem[notransition][place="toolbar"],
 toolbarpaletteitem[notransition][place="palette"],
 toolbarpaletteitem[notransition][place="panel"] {
   transition: none;
 }
 
 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,