[cros] Make remove button on active user pod not deactivate it.

BUG=141562


Review URL: https://chromiumcodereview.appspot.com/10872083

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@153729 0039d316-1c4b-4281-b951-d872f2087c98

2 files changed, 23 insertions, 5 deletions

diff --git a/chrome/browser/resources/chromeos/login/user_pod_row.css b/chrome/browser/resources/chromeos/login/user_pod_row.css
index 0bb012b..3edf2c27 100644
--- a/chrome/browser/resources/chromeos/login/user_pod_row.css
+++ b/chrome/browser/resources/chromeos/login/user_pod_row.css
@@ -87,6 +87,13 @@ html[oobe=new] .pod:not(.focused) {
   -webkit-transform: scale(0.9);
 }
 
+/* TODO(ivankr): workaround that forces a reflow for remove button when it
+ * becomes .active and its width/height change.
+ */
+html[oobe=new] .pod.focused {
+  -webkit-transform: scale(1.0);
+}
+
 .pod.init {
   -webkit-transform: scale(2.4);
   opacity: 0;
@@ -258,7 +265,7 @@ html[oobe=new] .remove-user-button {
   opacity: 1;
 }
 
-.pod.focused .remove-user-button {
+html[oobe=old] .pod.focused .remove-user-button {
   /* Track shifting of .user-image on pod focus. */
   -webkit-transform: translateY(-1px);
   -webkit-transition: -webkit-transform 140ms ease;
diff --git a/chrome/browser/resources/chromeos/login/user_pod_row.js b/chrome/browser/resources/chromeos/login/user_pod_row.js
index 7a3d359..6fe75fe 100644
--- a/chrome/browser/resources/chromeos/login/user_pod_row.js
+++ b/chrome/browser/resources/chromeos/login/user_pod_row.js
@@ -317,13 +317,15 @@ cr.define('login', function() {
         return;
 
       if (active) {
-        this.parentNode.focusPod(undefined, true);  // Force focus clear first.
-        this.removeUserButtonElement.classList.add('active');
+        // Clear focus first if another pod is focused.
+        if (!this.parentNode.isFocused(this))
+          this.parentNode.focusPod(undefined, true);
         this.removeUserButtonElement.textContent =
             localStrings.getString('removeUser');
+        this.removeUserButtonElement.classList.add('active');
       } else {
-        this.removeUserButtonElement.classList.remove('active');
         this.removeUserButtonElement.textContent = '';
+        this.removeUserButtonElement.classList.remove('active');
       }
     },
 
@@ -648,13 +650,22 @@ cr.define('login', function() {
     },
 
     /**
+     * Whether the pod is currently focused.
+     * @param {UserPod} pod Pod to check for focus.
+     * @return {boolean} Pod focus status.
+     */
+    isFocused: function(pod) {
+      return this.focusedPod_ == pod;
+    },
+
+    /**
      * Focuses a given user pod or clear focus when given null.
      * @param {UserPod=} podToFocus User pod to focus (undefined clears focus).
      * @param {boolean=} opt_force If true, forces focus update even when
      *                             podToFocus is already focused.
      */
     focusPod: function(podToFocus, opt_force) {
-      if (this.focusedPod_ == podToFocus && !opt_force)
+      if (this.isFocused(podToFocus) && !opt_force)
         return;
 
       // Make sure there's only one focusPod operation happening at a time.