Improve profile menu animation

Summary:
The text sliding around feels a bit jank to me. Instead, here's an attempt at a three-part effect:

  - Fade out the content of the menu (first quarter of the animation).
  - Shrink the menu (half the animation).
  - Fade the menu content back in (final quarter).

This isn't perfect, but feels less weird to me since the text doesn't dance?

Test Plan: clickey clickey

Reviewers: chad

Reviewed By: chad

Differential Revision: https://secure.phabricator.com/D15098

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '1d1e9a3a',
+    'core.pkg.css' => '4dd8bb4d',
     'core.pkg.js' => '573e6664',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '2de124c9',
@@ -143,7 +143,7 @@ return array(
     'rsrc/css/phui/phui-object-item-list-view.css' => '26c30d3f',
     'rsrc/css/phui/phui-pager.css' => 'bea33d23',
     'rsrc/css/phui/phui-pinboard-view.css' => '2495140e',
-    'rsrc/css/phui/phui-profile-menu.css' => '43826c43',
+    'rsrc/css/phui/phui-profile-menu.css' => '0734510a',
     'rsrc/css/phui/phui-property-list-view.css' => '27b2849e',
     'rsrc/css/phui/phui-remarkup-preview.css' => '1a8f2591',
     'rsrc/css/phui/phui-spacing.css' => '042804d6',
@@ -500,7 +500,7 @@ return array(
     'rsrc/js/core/phtize.js' => 'd254d646',
     'rsrc/js/phui/behavior-phui-dropdown-menu.js' => '54733475',
     'rsrc/js/phui/behavior-phui-object-box-tabs.js' => '2bfa2836',
-    'rsrc/js/phui/behavior-phui-profile-menu.js' => 'bfc2e675',
+    'rsrc/js/phui/behavior-phui-profile-menu.js' => '12884df9',
     'rsrc/js/phuix/PHUIXActionListView.js' => 'b5c256b8',
     'rsrc/js/phuix/PHUIXActionView.js' => '8cf6d262',
     'rsrc/js/phuix/PHUIXAutocomplete.js' => '21dc9144',
@@ -649,7 +649,7 @@ return array(
     'javelin-behavior-pholio-mock-view' => 'fbe497e7',
     'javelin-behavior-phui-dropdown-menu' => '54733475',
     'javelin-behavior-phui-object-box-tabs' => '2bfa2836',
-    'javelin-behavior-phui-profile-menu' => 'bfc2e675',
+    'javelin-behavior-phui-profile-menu' => '12884df9',
     'javelin-behavior-policy-control' => 'ae45872f',
     'javelin-behavior-policy-rule-editor' => '5e9f347c',
     'javelin-behavior-project-boards' => 'ba4fa35c',
@@ -819,7 +819,7 @@ return array(
     'phui-object-item-list-view-css' => '26c30d3f',
     'phui-pager-css' => 'bea33d23',
     'phui-pinboard-view-css' => '2495140e',
-    'phui-profile-menu-css' => '43826c43',
+    'phui-profile-menu-css' => '0734510a',
     'phui-property-list-view-css' => '27b2849e',
     'phui-remarkup-preview-css' => '1a8f2591',
     'phui-spacing-css' => '042804d6',
@@ -926,6 +926,11 @@ return array(
       'javelin-install',
       'javelin-util',
     ),
+    '12884df9' => array(
+      'javelin-behavior',
+      'javelin-stratcom',
+      'javelin-dom',
+    ),
     '13c739ea' => array(
       'javelin-behavior',
       'javelin-stratcom',
@@ -1774,11 +1779,6 @@ return array(
       'javelin-util',
       'javelin-request',
     ),
-    'bfc2e675' => array(
-      'javelin-behavior',
-      'javelin-stratcom',
-      'javelin-dom',
-    ),
     'bff6884b' => array(
       'javelin-install',
       'javelin-dom',

webroot/rsrc/css/phui/phui-profile-menu.css

@@ -18,7 +18,6 @@
   vertical-align: top;
   width: {$menu.profile.width};
   max-width: {$menu.profile.width};
-  transition: .2s;
   margin-top: 0;
   overflow: hidden;
 }
@@ -110,7 +109,6 @@
   .phui-list-item-href:hover {
   background-color: {$menu.profile.background.hover};
   color: {$menu.profile.text.selected};
-  transition: 0.2s;
 }
 
 .phui-profile-menu .phabricator-side-menu
@@ -120,14 +118,12 @@
   .phui-list-item-href:hover
   .phui-list-item-icon {
   color: {$menu.profile.text.selected};
-  transition: 0.2s;
 }
 
 .phui-profile-menu .phabricator-side-menu .phui-list-item-selected
   .phui-list-item-href {
   background-color: {$menu.profile.background.selected};
   color: {$menu.profile.text.selected};
-  transition: 0.2s;
 }
 
 .phui-profile-menu .phabricator-side-menu .phui-divider {
@@ -224,16 +220,87 @@ div.phui-profile-menu .phabricator-side-menu .phui-profile-menu-footer-2 {
 .phui-profile-menu .phui-profile-menu-footer-1,
 .phui-profile-menu .phui-profile-menu-footer-2 {
   width: {$menu.profile.width};
-  transition: .2s;
 }
 
 .phui-profile-menu .phui-profile-menu-collapsed .phui-profile-menu-footer-1,
 .phui-profile-menu .phui-profile-menu-collapsed .phui-profile-menu-footer-2 {
   width: {$menu.profile.width.collapsed};
-  transition: .2s;
 }
 
 .phui-profile-menu .phabricator-side-menu
   .phui-list-item-selected.phui-profile-menu-footer .phui-list-item-href {
-    background: transparent;
+  background: transparent;
+}
+
+.phui-profile-menu .phui-profile-menu-collapsing
+  .phabricator-nav-local {
+  animation: profile-menu-collapse 0.2s;
+}
+
+.phui-profile-menu .phui-profile-menu-expanding
+  .phabricator-nav-local {
+  animation: profile-menu-expand 0.2s;
+}
+
+.phui-profile-menu .phui-profile-menu-collapsing
+  .phabricator-side-menu .phui-list-item-href {
+  animation: profile-menu-blink 0.2s;
+}
+
+.phui-profile-menu .phui-profile-menu-expanding
+  .phabricator-side-menu .phui-list-item-href {
+  animation: profile-menu-blink 0.2s;
+}
+
+@keyframes profile-menu-blink {
+  0% {
+    opacity: 1.0;
+  }
+  25% {
+    opacity: 0.0;
+  }
+  75% {
+    opacity: 0.0;
+  }
+  100% {
+    opacity: 1.0;
+  }
+}
+
+@keyframes profile-menu-collapse {
+  0% {
+    width: {$menu.profile.width};
+    max-width: {$menu.profile.width};
+  }
+  33% {
+    width: {$menu.profile.width};
+    max-width: {$menu.profile.width};
+  }
+  66% {
+    width: {$menu.profile.width.collapsed};
+    max-width: {$menu.profile.width.collapsed};
+  }
+  100% {
+    width: {$menu.profile.width.collapsed};
+    max-width: {$menu.profile.width.collapsed};
+  }
+}
+
+@keyframes profile-menu-expand {
+  0% {
+    width: {$menu.profile.width.collapsed};
+    max-width: {$menu.profile.width.collapsed};
+  }
+  33% {
+    width: {$menu.profile.width.collapsed};
+    max-width: {$menu.profile.width.collapsed};
+  }
+  66% {
+    width: {$menu.profile.width};
+    max-width: {$menu.profile.width};
+  }
+  100% {
+    width: {$menu.profile.width};
+    max-width: {$menu.profile.width};
+  }
 }

webroot/rsrc/js/phui/behavior-phui-profile-menu.js

@@ -24,8 +24,22 @@ JX.behavior('phui-profile-menu', function(config) {
 
   JX.DOM.listen(collapse_node, 'click', null, function(e) {
     is_collapsed = !is_collapsed;
-    JX.DOM.alterClass(menu_node, 'phui-profile-menu-collapsed', is_collapsed);
+
-    JX.DOM.alterClass(menu_node, 'phui-profile-menu-expanded', !is_collapsed);
+    JX.DOM.alterClass(menu_node, 'phui-profile-menu-collapsing', is_collapsed);
+    JX.DOM.alterClass(menu_node, 'phui-profile-menu-expanding', !is_collapsed);
+
+    var duration = 0.2;
+
+    setTimeout(function() {
+      JX.DOM.alterClass(menu_node, 'phui-profile-menu-collapsed', is_collapsed);
+      JX.DOM.alterClass(menu_node, 'phui-profile-menu-expanded', !is_collapsed);
+    }, (duration / 2) * 1000);
+
+    setTimeout(function() {
+      JX.DOM.alterClass(menu_node, 'phui-profile-menu-collapsing', false);
+      JX.DOM.alterClass(menu_node, 'phui-profile-menu-expanding', false);
+    }, duration * 1000);
+
 
     if (config.settingsURI) {
       new JX.Request(config.settingsURI)