cros: Better animation when dismissing lock-screen note.

This does not fix the animation if the note app was started via a stylus eject.

Bug: 762097
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Ie77c765d3b3d65cf0e7be038e384c94b7d5103c5
Reviewed-on: https://chromium-review.googlesource.com/650647
Reviewed-by: Toni Barzic <tbarzic@chromium.org>
Commit-Queue: Jacob Dufault <jdufault@chromium.org>
Cr-Commit-Position: refs/heads/master@{#499811}

chrome/browser/chromeos/lock_screen_apps/state_controller.cc

@@ -7,6 +7,7 @@
 #include <utility>
 
 #include "ash/public/interfaces/constants.mojom.h"
+#include "ash/wm/window_animations.h"
 #include "base/base64.h"
 #include "base/bind.h"
 #include "base/command_line.h"
@@ -488,8 +489,14 @@ void StateController::ResetNoteTakingWindowAndMoveToNextState(
     if (focus_cycler_delegate_)
       focus_cycler_delegate_->UnregisterLockScreenAppFocusHandler();
 
-    if (close_window && note_app_window_->GetBaseWindow())
+    if (close_window && note_app_window_->GetBaseWindow()) {
+      // Whenever we close the window we want to immediately hide it without
+      // animating, as the underlying UI implements a special animation. If we
+      // also animate the window the animations will conflict.
+      ::wm::SetWindowVisibilityAnimationTransition(
+          note_app_window_->GetNativeWindow(), ::wm::ANIMATE_NONE);
       note_app_window_->GetBaseWindow()->Close();
+    }
     note_app_window_ = nullptr;
   }
 

chrome/browser/resources/chromeos/login/md_top_header_bar.css

@@ -57,14 +57,10 @@
   pointer-events: none;
 }
 
-.new-note-action:not(.new-note-action-short-transition) {
+.new-note-action {
   transition: all 300ms;
 }
 
-.new-note-action-short-transition {
-  transition: all 5ms;
-}
-
 html[dir=rtl] .new-note-action {
   border-radius: 0 0 44px 0;
 }
@@ -83,7 +79,6 @@ html[dir=rtl] .new-note-action:focus {
 }
 
 .new-note-action-container-activated > .new-note-action {
-  background-color: #000;
   bottom: auto;
   left: auto;
   position: absolute;

chrome/browser/resources/chromeos/login/md_top_header_bar.js

@@ -351,8 +351,9 @@ cr.define('login', function() {
       if (this.lockScreenAppsState_ == state)
         return;
 
+      var previousState = this.lockScreenAppsState_;
       this.lockScreenAppsState_ = state;
-      this.updateUi_();
+      this.updateUi_(previousState);
     },
 
     /** override */
@@ -367,25 +368,10 @@ cr.define('login', function() {
     },
 
     /**
+     * @param {!LockScreenAppsState} previousState
      * @private
      */
-    updateUi_: function() {
-      // Shorten transition duration when moving to available state, in
-      // particular when moving from foreground state - when moving from
-      // foreground state container gets cropped to top right corner
-      // immediately, while action element is updated from full screen with
-      // a transition. If the transition is too long, the action would be
-      // displayed as full square for a fraction of a second, which can look
-      // janky.
-      if (this.lockScreenAppsState_ == LOCK_SCREEN_APPS_STATE.AVAILABLE) {
-        $('new-note-action')
-            .classList.toggle('new-note-action-short-transition', true);
-        this.runOnNoteActionTransitionEnd_(function() {
-          $('new-note-action')
-              .classList.toggle('new-note-action-short-transition', false);
-        });
-      }
-
+    updateUi_: function(previousState) {
       this.swipeDetector_.setEnabled(
           this.lockScreenAppsState_ == LOCK_SCREEN_APPS_STATE.AVAILABLE);
 
@@ -413,14 +399,24 @@ cr.define('login', function() {
           .classList.toggle('new-note-action-above-login-header', false);
 
       if (this.lockScreenAppsState_ != LOCK_SCREEN_APPS_STATE.FOREGROUND) {
-        // Reset properties that might have been set as a result of activating
-        // new note action.
+        var transitionOut =
+            previousState == LOCK_SCREEN_APPS_STATE.FOREGROUND &&
+            this.lockScreenAppsState_ == LOCK_SCREEN_APPS_STATE.AVAILABLE;
         $('new-note-action-container')
-            .classList.toggle('new-note-action-container-activated', false);
+            .classList.toggle(
+                'new-note-action-container-activated', transitionOut);
+        if (transitionOut) {
+          this.runOnNoteActionTransitionEnd_(function() {
+            $('new-note-action-container')
+                .classList.toggle('new-note-action-container-activated', false);
+          });
+        }
+
         $('new-note-action').style.removeProperty('border-bottom-left-radius');
         $('new-note-action').style.removeProperty('border-bottom-right-radius');
         $('new-note-action').style.removeProperty('height');
         $('new-note-action').style.removeProperty('width');
+        $('new-note-action').style.removeProperty('background-color');
       }
     },
 
@@ -498,6 +494,7 @@ cr.define('login', function() {
       newNoteAction.style.setProperty(
           isRTL() ? 'border-bottom-right-radius' : 'border-bottom-left-radius',
           targetSize);
+      newNoteAction.style.setProperty('background-color', '#000');
     },
 
     /**