Fix ChromeOS users list multiple X problem.

- Use 'raw-button' for X button so that it fix the X image;
- Add a wrapper block to email and name text that fills up the space
  between icon and X button and has a max-width to avoid push X button
  out of view;

BUG=chromium-os:11220,chromium-os:10944
TEST=Verify fix for chromium-os:11220

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

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

2 files changed, 20 insertions, 19 deletions

diff --git a/chrome/browser/resources/options/chromeos_accounts_options_page.css b/chrome/browser/resources/options/chromeos_accounts_options_page.css
index 3cba823..1cc4f2e 100644
--- a/chrome/browser/resources/options/chromeos_accounts_options_page.css
+++ b/chrome/browser/resources/options/chromeos_accounts_options_page.css
@@ -11,7 +11,6 @@
 }
 
 .user-list-item {
-  line-height: 35px;
   padding: 2px;
 }
 
@@ -19,7 +18,6 @@
   border: 1px solid black;
   width: 26px;
   height: 26px;
-  vertical-align: middle;
 }
 
 .user-email-label {
@@ -31,23 +29,18 @@
   -webkit-margin-start: 10px;
 }
 
+.user-email-name-block {
+  -webkit-box-flex: 1;
+  max-width: 318px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .remove-user-button {
   background-image: url(chrome://theme/IDR_CLOSE_BAR);
-  background-color: transparent;
-  border: 0;
   width: 16px;
   height: 16px;
-  margin-top: 8px;
-  min-width: 16px;
-  padding: 1px 6px 1px 6px;
-}
-
-html[dir=ltr] .remove-user-button {
-  float: right;
-}
-
-html[dir=rtl] .remove-user-button {
-  float: left;
 }
 
 .remove-user-button:hover {
diff --git a/chrome/browser/resources/options/chromeos_accounts_user_list.js b/chrome/browser/resources/options/chromeos_accounts_user_list.js
index 36f565f..591dc95 100644
--- a/chrome/browser/resources/options/chromeos_accounts_user_list.js
+++ b/chrome/browser/resources/options/chromeos_accounts_user_list.js
@@ -103,7 +103,7 @@ cr.define('options.accounts', function() {
       // Handle left button click
       if (e.button == 0) {
         var el = e.target;
-        if (el.className == 'remove-user-button') {
+        if (el.classList.contains('remove-user-button')) {
           this.removeUser(el.parentNode.user);
         }
       }
@@ -173,13 +173,21 @@ cr.define('options.accounts', function() {
           localStrings.getStringF('username_format', this.user.name) :
           this.user.name;
 
+      var emailNameBlock = this.ownerDocument.createElement('div');
+      emailNameBlock.className = 'user-email-name-block';
+      emailNameBlock.appendChild(labelEmail);
+      emailNameBlock.appendChild(labelName);
+      emailNameBlock.title = this.user.owner ?
+          localStrings.getStringF('username_format', this.user.email) :
+          this.user.email;
+
       this.appendChild(icon);
-      this.appendChild(labelEmail);
-      this.appendChild(labelName);
+      this.appendChild(emailNameBlock);
 
       if (!this.user.owner) {
         var removeButton = this.ownerDocument.createElement('button');
-        removeButton.className = 'remove-user-button';
+        removeButton.classList.add('raw-button');
+        removeButton.classList.add('remove-user-button');
         this.appendChild(removeButton);
       }
     }