From 322df5de355b3908bafc396cc7ab009b533cba23 Mon Sep 17 00:00:00 2001 From: Jacob Dufault Date: Wed, 6 Sep 2017 00:10:06 +0000 Subject: [PATCH] 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 Commit-Queue: Jacob Dufault Cr-Commit-Position: refs/heads/master@{#499811} --- .../lock_screen_apps/state_controller.cc | 9 ++++- .../chromeos/login/md_top_header_bar.css | 7 +--- .../chromeos/login/md_top_header_bar.js | 39 +++++++++---------- 3 files changed, 27 insertions(+), 28 deletions(-) diff --git a/chrome/browser/chromeos/lock_screen_apps/state_controller.cc b/chrome/browser/chromeos/lock_screen_apps/state_controller.cc index 5b3854192b46c..b09f9eb9a40cb 100644 --- a/chrome/browser/chromeos/lock_screen_apps/state_controller.cc +++ b/chrome/browser/chromeos/lock_screen_apps/state_controller.cc @@ -7,6 +7,7 @@ #include #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; } diff --git a/chrome/browser/resources/chromeos/login/md_top_header_bar.css b/chrome/browser/resources/chromeos/login/md_top_header_bar.css index 191413130c3c2..fb88a5bcf03e8 100644 --- a/chrome/browser/resources/chromeos/login/md_top_header_bar.css +++ b/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; diff --git a/chrome/browser/resources/chromeos/login/md_top_header_bar.js b/chrome/browser/resources/chromeos/login/md_top_header_bar.js index 3a11efa125e29..f96902192ae97 100644 --- a/chrome/browser/resources/chromeos/login/md_top_header_bar.js +++ b/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'); }, /**