[ChromeOS] Add an extra stage to remove a user in WebUI login.

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

 // Copyright (c) 2011 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview User pod row implementation.
  */
 
 cr.define('login', function() {
   // Pod width. 170px Pod + 10px padding + 10px margin on both sides.
@@ skipping 28 matching lines @@
     /** @inheritDoc */
     decorate: function() {
       // Make this focusable
       if (!this.hasAttribute('tabindex'))
         this.tabIndex = 0;
 
       this.addEventListener('mousedown', this.handleMouseDown_.bind(this));
 
       this.enterButtonElement.addEventListener('click',
           this.activate.bind(this));
+      this.removeUserButtonElement.addEventListener('mouseout',
+          this.handleRemoveButtonMouseOut_.bind(this));
     },
 
     /**
      * Initializes the pod after its properties set and added to a pod row.
      */
     initialize: function() {
       if (!this.isGuest) {
         this.passwordElement.addEventListener('keydown',
             this.parentNode.handleKeyDown.bind(this.parentNode));
       }
@@ skipping 77 matching lines @@
      */
     get mainInput() {
       if (this.isGuest) {
         return this.enterButtonElement;
       } else {
         return this.passwordElement;
       }
     },
 
     /**
+     * Whether remove button is active state.
+     * @type {boolean}
+     */
+    get activeRemoveButton() {
+      return this.removeUserButtonElement.classList.contains('active');
+    },
+    set activeRemoveButton(active) {
+      if (active == this.activeRemoveButton)
+        return;
+
+      if (active) {
+        this.removeUserButtonElement.classList.add('active');
+        this.removeUserButtonElement.textContent =
+            localStrings.getString('removeUser');
+      } else {
+        this.removeUserButtonElement.classList.remove('active');
+        this.removeUserButtonElement.textContent = '';
+      }
+    },
+
+    /**
      * Focuses on input element.
      */
     focusInput: function() {
       this.mainInput.focus();
     },
 
     /**
      * Activates the pod.
      * @return {boolean} True if activated successfully.
      */
@@ skipping 16 matching lines @@
      * @param {boolean} takeFocus True to take focus.
      */
     reset: function(takeFocus) {
       this.passwordElement.value = '';
 
       if (takeFocus)
         this.mainInput.focus();
     },
 
     /**
+     * Handles mouseout on remove button button.
+     */
+    handleRemoveButtonMouseOut_: function(e) {
+      this.activeRemoveButton = false;
+    },
+
+    /**
+     * Handles mousedown on remove user button.
+     */
+    handleRemoevButtonMouseDown_: function(e) {
+      if (this.activeRemoveButton)
+        chrome.send('removeUser', [this.user.emailAddress]);
+      else
+        this.activeRemoveButton = true;
+    },
+
+    /**
      * Handles mousedown event.
      */
     handleMouseDown_: function(e) {
       if (e.target == this.removeUserButtonElement) {
-        chrome.send('removeUser', [this.user.emailAddress]);
+        this.handleRemoevButtonMouseDown_(e);
 
         // Prevent default so that we don't trigger 'focus' event.
         e.preventDefault();
       }
     }
   };
 
 
   /**
    * Creates a new pod row element.
@@ skipping 134 matching lines @@
         return;
 
       if (pod) {
         if (pod.isGuest ||
             localStrings.getString('authType') != 'ext' ||
             pod.user.oauthTokenStatus == OAUTH_TOKEN_STATUS_VALID) {
           // Focus current pod if it is guest pod, or
           // we are not using gaia ext for signin or
           // the user has a valid oauth token.
           for (var i = 0; i < this.pods.length; ++i) {
+            this.pods[i].activeRemoveButton = false;
             if (this.pods[i] == pod) {
               pod.classList.remove("faded");
               pod.classList.add("focused");
             } else {
               this.pods[i].classList.remove('focused');
               this.pods[i].classList.add('faded');
             }
           }
           pod.focusInput();
 
           this.focusedPod_ = pod;
           this.scrollPodIntoView(pod);
         } else {
           // Otherwise, switch to Gaia signin.
           Oobe.showSigninUI(pod.user.emailAddress);
           this.focusPod();  // Clears current focus.
         }
       } else {
         for (var i = 0; i < this.pods.length; ++i) {
           this.pods[i].classList.remove('focused');
           this.pods[i].classList.remove('faded');
+          this.pods[i].activeRemoveButton = false;
         }
         this.focusedPod_ = undefined;
       }
     },
 
     /**
      * Returns the currently activated pod.
      */
     get activated() {
       return this.activatedPod_;
@@ skipping 110 matching lines @@
           }
           break;
       }
     }
   };
 
   return {
     PodRow: PodRow
   };
 });