Bug 867317 - Implement transition for showing and hiding toolbars. r=jaws
authorDão Gottwald <dao@mozilla.com>
Fri, 20 Jun 2014 14:11:55 +0200
changeset 189801 4a9dfa33774d
parent 189800 86fbf924bf86
child 189802 dfc773f41f56
push id26995
push userkwierso@gmail.com
push dateFri, 20 Jun 2014 20:58:27 +0000
treeherdermozilla-central@776f6d341b3f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs867317
milestone33.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 867317 - Implement transition for showing and hiding toolbars. r=jaws
browser/components/places/tests/browser/browser_drag_bookmarks_on_toolbar.js
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/windows/browser.css
--- a/browser/components/places/tests/browser/browser_drag_bookmarks_on_toolbar.js
+++ b/browser/components/places/tests/browser/browser_drag_bookmarks_on_toolbar.js
@@ -133,16 +133,26 @@ function getExpectedDataForPlacesNode(aN
     var wrappedFlavor = aFlavor + ": " +
                         PlacesUtils.wrapNode(aNode, aFlavor);
     wrappedNode.push(wrappedFlavor);
   });
 
   return [wrappedNode];
 }
 
+function afterToolbarTransition(callback) {
+  function listener(event) {
+    if (event.propertyName == "max-height") {
+      toolbar.removeEventListener("transitionend", listener);
+      callback();
+    }
+  }
+  toolbar.addEventListener("transitionend", listener);
+}
+
 var gTests = [
 
 //------------------------------------------------------------------------------
 
   {
     desc: "Drag a folder on toolbar",
     run: function() {
       // Create a test folder to be dragged.
@@ -229,27 +239,32 @@ function nextTest() {
     var test = gTests.shift();
     waitForFocus(function() {
       info("Start of test: " + test.desc);
       test.run();
     });
   }
   else {
     // Collapse the personal toolbar if needed.
-    if (wasCollapsed)
+    if (wasCollapsed) {
       setToolbarVisibility(toolbar, false);
-    finish();
+      afterToolbarTransition(finish);
+    } else {
+      finish();
+    }
   }
 }
 
 let toolbar = document.getElementById("PersonalToolbar");
 let wasCollapsed = toolbar.collapsed;
 
 function test() {
   waitForExplicitFinish();
 
   // Uncollapse the personal toolbar if needed.
-  if (wasCollapsed)
+  if (wasCollapsed) {
     setToolbarVisibility(toolbar, true);
-
-  nextTest();
+    afterToolbarTransition(nextTest);
+  } else {
+    nextTest();
+  }
 }
 
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -46,16 +46,28 @@
   background-color: -moz-Dialog;
 }
 
 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar) {
   padding-top: 1px;
   padding-bottom: 1px;
 }
 
+#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
+  overflow: -moz-hidden-unscrollable;
+  max-height: 4em;
+  transition: min-height 170ms ease-out, max-height 170ms ease-out;
+}
+
+#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
+  min-height: 0.1px;
+  max-height: 0;
+  transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
+}
+
 #TabsToolbar:not([collapsed="true"]) + #nav-bar {
   border-top: 1px solid hsla(0,0%,0%,.3) !important;
   background-clip: padding-box;
   margin-top: -1px; /* Move up into the TabsToolbar for the inner highlight at the top of the nav-bar */
   /* Position the toolbar above the bottom of background tabs */
   position: relative;
   z-index: 1;
 }
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -104,16 +104,28 @@ toolbarseparator {
   min-height: 22px;
 }
 
 #navigator-toolbox > toolbar:not(#TabsToolbar):not(#nav-bar):not(:-moz-lwtheme) {
   -moz-appearance: none;
   background: url(chrome://browser/skin/Toolbar-background-noise.png) hsl(0,0%,83%);
 }
 
+#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
+  overflow: -moz-hidden-unscrollable;
+  max-height: 4em;
+  transition: min-height 170ms ease-out, max-height 170ms ease-out;
+}
+
+#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
+  min-height: 0.1px;
+  max-height: 0;
+  transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
+}
+
 #nav-bar {
   -moz-appearance: none;
   background: url(chrome://browser/skin/Toolbar-background-noise.png),
               linear-gradient(hsl(0,0%,93%), hsl(0,0%,83%));
   background-clip: border-box;
   background-origin: border-box !important;
 
   /* Move the noise texture out of the top 1px strip because that overlaps
@@ -144,17 +156,17 @@ toolbarseparator {
   position: relative;
   z-index: 1;
 }
 
 #nav-bar-customization-target {
   padding: 4px;
 }
 
-#PersonalToolbar {
+#PersonalToolbar:not([collapsed=true]) {
   padding: 0 4px 4px;
   /* 4px padding ^  plus 19px personal-bookmarks (see below) */
   min-height: 23px;
 }
 
 #navigator-toolbox > toolbar:not(#TabsToolbar):-moz-lwtheme {
   background-color: @toolbarColorLWT@;
   background-image: url(chrome://browser/skin/Toolbar-background-noise.png);
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -73,16 +73,28 @@
   -moz-appearance: none;
   border-style: none;
 }
 
 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
   background-color: -moz-Dialog;
 }
 
+#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
+  overflow: -moz-hidden-unscrollable;
+  max-height: 4em;
+  transition: min-height 170ms ease-out, max-height 170ms ease-out;
+}
+
+#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
+  min-height: 0.1px;
+  max-height: 0;
+  transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
+}
+
 %ifdef WINDOWS_AERO
 @media not all and (-moz-windows-compositor),
        not all and (-moz-windows-default-theme) {
 %endif
   #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
   #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
     color: CaptionText;
   }