Merge pull request #4795 from adobe/larz/ui-transitions-squashed

Animate modal bar appearance/disappearance.

Author: Narciso Jaramillo

src/styles/brackets.less

@@ -90,6 +90,7 @@ a, img {
 }
 
 .main-view {
+    background: @background-color-3; // to keep the theme background consistent
     height: 100%;
 
     .sidebar {
@@ -215,7 +216,7 @@ a, img {
     left: 0;
     top: -1px;
     width: 6px;
-    -webkit-transition: 0.1s linear all;
+    transition: 0.1s linear all;
 }
 
 #indent-width-input:focus {
@@ -567,8 +568,7 @@ a, img {
         -webkit-transform: translateZ(0);
         transform: translateZ(0);
 
-        -webkit-transition: height 0.125s ease-out;
-        transition: height 0.125s ease-out;
+        transition: height 250ms cubic-bezier(0, 1.02, 0.6, 1);
     }
 
     .CodeMirror {
@@ -652,8 +652,7 @@ a, img {
         top: @top-margin;
 
         &.animate {
-            -webkit-transition: height 0.1s ease-out;
-            -webkit-transition: top 0.1s ease-out;
+            transition: top 0.1s ease-out;
         }
     }
 
@@ -699,7 +698,7 @@ a, img {
 
         .selected {
             color: @inline-color-3;
-            -webkit-transition: color 0.1s ease-out .15s;
+            transition: color 0.1s ease-out .15s;
         }
     }
 }
@@ -774,17 +773,38 @@ a, img {
 
 /* Modal bar for Find/Quick Open */
 
+.modal-bar.hide {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;    
+    -webkit-transform: translate(0, -44px);
+    transform: translate(0, -44px);
+    transition: -webkit-transform 266ms cubic-bezier(0, 0.56, 0, 1);
+    transition: transform 266ms cubic-bezier(0, 0.56, 0, 1);
+    
+    body:not(.has-appshell-menus) & {
+        top: 37px;
+    }    
+}
+
 .modal-bar {
+    display: block;
     text-align: left;
 
     font-family: @sansFontFamily;
     font-size: 14px;
     color: @tc-text;
     background: @tc-gray-panel;
+    overflow: hidden; 
     padding: 5px 4px 4px 14px;
-    overflow: hidden;
 
-    body.in-browser & {
+    -webkit-transform: translate(0, 0); // Prefix still required.
+    transition: -webkit-transform 66ms cubic-bezier(0, 0.62, 0.04, 0.99);
+    z-index: @z-index-brackets-modalbar;       
+    
+    body.in-browser &,
+    body:not(.has-appshell-menus) & {
         // Separator line between us and the HTML menu/titlebar above
         border-top: 1px solid darken(@background-color-3, @bc-color-step-size);
     }

src/styles/brackets_variables.less

@@ -49,6 +49,7 @@
 @z-index-brackets-inline-editor-shadow: @z-index-brackets-ui;
 @z-index-brackets-toolbar: @z-index-brackets-ui;
 @z-index-brackets-max: @z-index-brackets-toolbar;
+@z-index-brackets-modalbar: @z-index-brackets-toolbar - 1;
 
 @z-index-brackets-sidebar-resizer: @z-index-brackets-ui + 2;
 @z-index-brackets-resizer-div: @z-index-brackets-sidebar-resizer + 1;

src/view/PanelManager.js

@@ -64,7 +64,7 @@ define(function (require, exports, module) {
 
         $editorHolder.siblings().each(function (i, elem) {
             var $elem = $(elem);
-            if ($elem.css("display") !== "none") {
+            if ($elem.css("display") !== "none" && $elem.css("position") !== "absolute") {
                 availableHt -= $elem.outerHeight();
             }
         });

src/widgets/ModalBar.js

@@ -49,9 +49,13 @@ define(function (require, exports, module) {
         this._handleInputKeydown = this._handleInputKeydown.bind(this);
         this._handleFocusChange = this._handleFocusChange.bind(this);
 
-        this._$root = $("<div class='modal-bar'/>")
+        this._$root = $("<div class='modal-bar hide'/>")
             .html(template)
             .insertBefore("#editor-holder");
+
+        // Forcing the renderer to do a layout, which will cause it to apply the transform for the "hide" class, so it will animate when you remove the class.
+        window.getComputedStyle(this._$root.get(0)).getPropertyValue("top");
+        this._$root.removeClass("hide");
 
         // If something *other* than an editor (like another modal bar) has focus, set the focus 
         // to the editor here, before opening up the new modal bar. This ensures that the old
@@ -123,8 +127,11 @@ define(function (require, exports, module) {
             window.document.body.removeEventListener("focusin", this._handleFocusChange, true);
         }
 
-        this._$root.remove();
-
+        var self = this;
+        this._$root.addClass("hide").one("webkitTransitionEnd", function () {
+            self._$root.remove();
+        });
+        
         // Preserve scroll position of the current full editor across the editor refresh, adjusting for the 
         // height of the modal bar so the code doesn't appear to shift if possible.
         var fullEditor = EditorManager.getCurrentFullEditor(),