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

Morph X button into a little red "Remove" button on first click to let user confirm the action. And remove user on the 2nd click.

BUG=chromium-os:18309
TEST=Verify fix for chromium-os:18309.


Review URL: http://codereview.chromium.org/7628013

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

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

@@ -135,6 +135,7 @@ podrow {
 }
 
 .remove-user-button {
+  -webkit-transition: width .1s ease-in-out, background .2s ease-in-out;
   -webkit-box-shadow: none;
   background: url('chrome://theme/IDR_CLOSE_BAR') center center no-repeat;
   border: 0;
@@ -152,3 +153,14 @@ podrow {
   -webkit-box-shadow: none;
   background: url('chrome://theme/IDR_CLOSE_BAR_H') center center no-repeat;
 }
+
+.remove-user-button.active {
+  background-color: #e94949;
+  background-image: none;
+  border-radius: 4px;
+  color: white;
+  font-size: 10px;
+  height: initial;
+  padding: 2px 4px;
+  width: initial;
+}

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

@@ -46,6 +46,8 @@ cr.define('login', function() {
 
       this.enterButtonElement.addEventListener('click',
           this.activate.bind(this));
+      this.removeUserButtonElement.addEventListener('mouseout',
+          this.handleRemoveButtonMouseOut_.bind(this));
     },
 
     /**
@@ -142,6 +144,27 @@ cr.define('login', function() {
       }
     },
 
+    /**
+     * 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.
      */
@@ -178,12 +201,29 @@ cr.define('login', function() {
         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();
@@ -338,6 +378,7 @@ cr.define('login', function() {
           // 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");
@@ -359,6 +400,7 @@ cr.define('login', function() {
         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;
       }

chrome/browser/ui/webui/chromeos/login/signin_screen_handler.cc

@@ -97,6 +97,8 @@ void SigninScreenHandler::GetLocalizedStrings(
       l10n_util::GetStringUTF16(IDS_CREATE_ACCOUNT_BUTTON));
   localized_strings->SetString("guestSignin",
       l10n_util::GetStringUTF16(IDS_BROWSE_WITHOUT_SIGNING_IN_BUTTON));
+  localized_strings->SetString("removeUser",
+      l10n_util::GetStringUTF16(IDS_LOGIN_REMOVE));
 
   if (extension_driven_)
     localized_strings->SetString("authType", "ext");