[Password Manager] Copiable username and origin. Linkable origin elided from the left.

chrome/browser/resources/options/password_manager_list.js

Index: chrome/browser/resources/options/password_manager_list.js
diff --git a/chrome/browser/resources/options/password_manager_list.js b/chrome/browser/resources/options/password_manager_list.js
index f8ed9e8a5fdc5423ac10318d6bacaf1bb2450d75..8f462632fb8a3be17b3f26a1b7d76fd57471031c 100644
--- a/chrome/browser/resources/options/password_manager_list.js
+++ b/chrome/browser/resources/options/password_manager_list.js
@@ -9,10 +9,12 @@ cr.define('options.passwordManager', function() {
   /** @const */ var List = cr.ui.List;
 
   /** @const */ var URL_DATA_INDEX = 0;
-  /** @const */ var USERNAME_DATA_INDEX = 1;
-  /** @const */ var PASSWORD_DATA_INDEX = 2;
-  /** @const */ var FEDERATION_DATA_INDEX = 3;
-  /** @const */ var ORIGINAL_DATA_INDEX = 4;
+  /** @const */ var SHOWN_URL_DATA_INDEX = 1;
+  /** @const */ var IS_URL_SECURE_DATA_INDEX = 2;
+  /** @const */ var USERNAME_DATA_INDEX = 3;
+  /** @const */ var PASSWORD_DATA_INDEX = 4;
+  /** @const */ var FEDERATION_DATA_INDEX = 5;
+  /** @const */ var ORIGINAL_DATA_INDEX = 6;
 
   /**
    * Creates a new passwords list item.
@@ -40,33 +42,46 @@ cr.define('options.passwordManager', function() {
   PasswordListItem.prototype = {
     __proto__: DeletableItem.prototype,
 
+
     /** @override */
     decorate: function() {
       DeletableItem.prototype.decorate.call(this);
 
       // The URL of the site.
-      var urlLabel = this.ownerDocument.createElement('div');
-      urlLabel.classList.add('favicon-cell');
-      urlLabel.classList.add('weakrtl');
-      urlLabel.classList.add('url');
-      urlLabel.setAttribute('title', this.url);
-      urlLabel.textContent = this.url;
+      var urlDiv = this.ownerDocument.createElement('div');
+      urlDiv.classList.add('favicon-cell');

[Evan Stade, 2015/09/29 18:06:53]

urlDiv.className = 'favicon-cell left-elided-url url';

[kolos1, 2015/09/29 18:29:01]

Done.

+      urlDiv.classList.add('left-elided-url');
+      urlDiv.classList.add('url');
+      urlDiv.setAttribute('title', this.url);
+      var urlLink = this.ownerDocument.createElement('a');
+      urlLink.href = this.url;
+      urlLink.textContent = this.shownUrl.split('').reverse().join('');
+      urlDiv.appendChild(urlLink);
 
       // The favicon URL is prefixed with "origin/", which essentially removes
       // the URL path past the top-level domain and ensures that a scheme (e.g.,
       // http) is being used. This ensures that the favicon returned is the
       // default favicon for the domain and that the URL has a scheme if none
       // is present in the password manager.
-      urlLabel.style.backgroundImage = getFaviconImageSet(
-          'origin/' + this.url, 16);
-      this.contentElement.appendChild(urlLabel);
+      if (this.isUrlSecure) {
+        urlDiv.style.backgroundImage = getFaviconImageSet(
+            'origin/' + this.url, 16);
+      }
+      this.contentElement.appendChild(urlDiv);
 
       // The stored username.
-      var usernameLabel = this.ownerDocument.createElement('div');
-      usernameLabel.className = 'name';
-      usernameLabel.textContent = this.username;
-      usernameLabel.title = this.username;
-      this.contentElement.appendChild(usernameLabel);
+      var usernameDiv = this.ownerDocument.createElement('div');
+      usernameDiv.className = 'name';
+      //usernameDiv.textContent = this.username;
+      usernameDiv.title = this.username;
+      this.contentElement.appendChild(usernameDiv);
+      var usernameInput = this.ownerDocument.createElement('input');
+      usernameInput.type = 'text';

[Evan Stade, 2015/09/29 18:06:53]

one other good way of doing this is to use html templates:

<div hidden>
  <input id="usernameInputTemplate" type="text" class="inactive-item" ...>
  <input id="passwordInputTemplate" ...>
</div>

then in JS you just do:

var node = $('usernameInputTemplate').cloneNode(true);
node.id = '';  // or node.removeAttribute('id');

+      usernameInput.className = 'inactive-item';
+      usernameInput.readOnly = true;
+      usernameInput.value = this.username;
+      usernameDiv.appendChild(usernameInput);
+      this.usernameField = usernameInput;
 
       if (this.federation) {
         // The federation.
@@ -82,7 +97,7 @@ cr.define('options.passwordManager', function() {
         // The password input field.
         var passwordInput = this.ownerDocument.createElement('input');
         passwordInput.type = 'password';
-        passwordInput.className = 'inactive-password';
+        passwordInput.className = 'inactive-item';
         passwordInput.readOnly = true;
         passwordInput.value = this.showPasswords_ ? this.password : '********';
         passwordInputDiv.appendChild(passwordInput);
@@ -114,24 +129,26 @@ cr.define('options.passwordManager', function() {
         }
         this.contentElement.appendChild(passwordInputDiv);
       }
-
     },
 
     /** @override */
     selectionChanged: function() {
-      var input = this.passwordField;
+      var usernameInput = this.usernameField;
+      var passwordInput = this.passwordField;
       var button = this.passwordShowButton;
       // The button doesn't exist when passwords can't be shown.
       if (!button)
         return;
 
       if (this.selected) {
-        input.classList.remove('inactive-password');
+        usernameInput.classList.remove('inactive-item');
+        passwordInput.classList.remove('inactive-item');
         this.setFocusable_(true);
         button.hidden = false;
-        input.focus();
+        passwordInput.focus();
       } else {
-        input.classList.add('inactive-password');
+        usernameInput.classList.add('inactive-item');
+        passwordInput.classList.add('inactive-item');
         this.setFocusable_(false);
         button.hidden = true;
       }
@@ -206,6 +223,28 @@ cr.define('options.passwordManager', function() {
     },
 
     /**
+     * Get and set the shown url for the entry.
+     * @type {string}
+     */
+    get shownUrl() {
+      return this.dataItem[SHOWN_URL_DATA_INDEX];
+    },
+    set shownUrl(shownUrl) {
+      this.dataItem[SHOWN_URL_DATA_INDEX] = shownUrl;
+    },
+
+    /**
+     * Get and set whether the origin uses secure scheme.
+     * @type {boolean}
+     */
+    get isUrlSecure() {
+      return this.dataItem[IS_URL_SECURE_DATA_INDEX];
+    },
+    set isUrlSecure(isUrlSecure) {
+      this.dataItem[IS_URL_SECURE_DATA_INDEX] = isUrlSecure;
+    },
+
+    /**
      * Get and set the username for the entry.
      * @type {string}
      */
@@ -264,20 +303,26 @@ cr.define('options.passwordManager', function() {
       DeletableItem.prototype.decorate.call(this);
 
       // The URL of the site.
-      var urlLabel = this.ownerDocument.createElement('div');
-      urlLabel.className = 'url';
-      urlLabel.classList.add('favicon-cell');
-      urlLabel.classList.add('weakrtl');
-      urlLabel.textContent = this.url;
+      var urlDiv = this.ownerDocument.createElement('div');
+      urlDiv.className = 'url';
+      urlDiv.classList.add('favicon-cell');
+      urlDiv.classList.add('left-elided-url');
+      urlDiv.setAttribute('title', this.url);
+      var urlLink = this.ownerDocument.createElement('a');
+      urlLink.href = this.url;
+      urlLink.textContent = this.shownUrl.split('').reverse().join('');
+      urlDiv.appendChild(urlLink);
 
       // The favicon URL is prefixed with "origin/", which essentially removes
       // the URL path past the top-level domain and ensures that a scheme (e.g.,
       // http) is being used. This ensures that the favicon returned is the
       // default favicon for the domain and that the URL has a scheme if none
       // is present in the password manager.
-      urlLabel.style.backgroundImage = getFaviconImageSet(
-          'origin/' + this.url, 16);
-      this.contentElement.appendChild(urlLabel);
+      if (this.isUrlSecure) {
+        urlDiv.style.backgroundImage = getFaviconImageSet(
+            'origin/' + this.url, 16);
+      }
+      this.contentElement.appendChild(urlDiv);
     },
 
     /**
@@ -285,10 +330,32 @@ cr.define('options.passwordManager', function() {
      * @type {string}
      */
     get url() {
-      return this.dataItem;
+      return this.dataItem[URL_DATA_INDEX];
     },
     set url(url) {
-      this.dataItem = url;
+      this.dataItem[URL_DATA_INDEX] = url;
+    },
+
+    /**
+     * Get and set the shown url for the entry.
+     * @type {string}
+     */
+    get shownUrl() {
+      return this.dataItem[SHOWN_URL_DATA_INDEX];
+    },
+    set shownUrl(shownUrl) {
+      this.dataItem[SHOWN_URL_DATA_INDEX] = shownUrl;
+    },
+
+    /**
+     * Get and set whether the origin uses secure scheme.
+     * @type {boolean}
+     */
+    get isUrlSecure() {
+      return this.dataItem[IS_URL_SECURE_DATA_INDEX];
+    },
+    set isUrlSecure(isUrlSecure) {
+      this.dataItem[IS_URL_SECURE_DATA_INDEX] = isUrlSecure;
     },
   };
 
@@ -406,5 +473,12 @@ cr.define('options.passwordManager', function() {
     PasswordExceptionsListItem: PasswordExceptionsListItem,
     PasswordsList: PasswordsList,
     PasswordExceptionsList: PasswordExceptionsList,
+    URL_DATA_INDEX: URL_DATA_INDEX,
+    SHOWN_URL_DATA_INDEX: SHOWN_URL_DATA_INDEX,
+    IS_URL_SECURE_DATA_INDEX: IS_URL_SECURE_DATA_INDEX,
+    USERNAME_DATA_INDEX: USERNAME_DATA_INDEX,
+    PASSWORD_DATA_INDEX: PASSWORD_DATA_INDEX,
+    FEDERATION_DATA_INDEX: FEDERATION_DATA_INDEX,
+    ORIGINAL_DATA_INDEX: ORIGINAL_DATA_INDEX
   };
 });