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

chrome/browser/resources/options/password_manager_list.js

 // Copyright (c) 2012 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.
 
 cr.define('options.passwordManager', function() {
   /** @const */ var ArrayDataModel = cr.ui.ArrayDataModel;
   /** @const */ var DeletableItemList = options.DeletableItemList;
   /** @const */ var DeletableItem = options.DeletableItem;
   /** @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;
+  // The following constants should be synchronized with the constants in
+  // chrome/browser/ui/webui/options/password_manager_handler.cc.
+  /** @const */ var ORIGIN_FIELD = 'origin';
+  /** @const */ var SHOWN_URL_FIELD = 'shownUrl';
+  /** @const */ var IS_SECURE_FIELD = 'isSecure';
+  /** @const */ var USERNAME_FIELD = 'username';
+  /** @const */ var PASSWORD_FIELD = 'password';
+  /** @const */ var FEDERATION_FIELD = 'federation';
+  /** @const */ var ORIGINAL_INDEX_FIELD = 'index';
 
   /**
    * Creates a new passwords list item.
    * @param {cr.ui.ArrayDataModel} dataModel The data model that contains this
    *     item.
    * @param {Array} entry An array of the form [url, username, password,
    *     federation]. When the list has been filtered, a fifth element [index]
    *     may be present.
    * @param {boolean} showPasswords If true, add a button to the element to
    *     allow the user to reveal the saved password.
    * @constructor
    * @extends {options.DeletableItem}
    */
   function PasswordListItem(dataModel, entry, showPasswords) {
     var el = cr.doc.createElement('div');
     el.dataItem = entry;
     el.dataModel = dataModel;
     el.__proto__ = PasswordListItem.prototype;
     el.showPasswords_ = showPasswords;
     el.decorate();
 
     return el;
   }
 
+  /**
+   * Returns title for password's origin (removes the scheme if the url is
+   * insecure and removes trailing punctuation symbols).
+   * @param {string} url The url.
+   * @param {boolean} isSecure True if the url is secure.
+   * @return {string} The title for password's origin.
+   */
+  function getTitleForPasswordOrigin(url, isSecure) {
+    if (!isSecure) {
+      var ind = url.indexOf('://');
+      if (ind >= 0) {
+        url = url.substring(ind + 3);
+      }
+    }
+    // Since the direction is switched to RTL, punctuation symbols appear on the
+    // left side, that is wrong. So, just remove trailing punctuation symbols.
+    url = url.replace(/[^A-Za-z0-9]+$/, '');
+    return url;
+  }
+
   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;
-
-      // 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(
+      var urlDiv = this.ownerDocument.createElement('div');
+      urlDiv.className = 'favicon-cell left-elided-url url';
+      urlDiv.setAttribute(
+          'title', getTitleForPasswordOrigin(this.url, this.isUrlSecure));
+      var urlLink = this.ownerDocument.createElement('a');
+      urlLink.href = this.url;
+      urlLink.textContent = this.shownUrl.split('').reverse().join('');
+      urlDiv.appendChild(urlLink);
+      urlDiv.style.backgroundImage = getFaviconImageSet(
           'origin/' + this.url, 16);
-      this.contentElement.appendChild(urlLabel);
+      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.title = this.username;
+      this.contentElement.appendChild(usernameDiv);
+      var usernameInput = this.ownerDocument.createElement('input');
+      usernameInput.type = 'text';
+      usernameInput.className = 'inactive-item';
+      usernameInput.readOnly = true;
+      usernameInput.value = this.username;
+      usernameDiv.appendChild(usernameInput);
+      this.usernameField = usernameInput;
 
       if (this.federation) {
         // The federation.
         var federationDiv = this.ownerDocument.createElement('div');
         federationDiv.className = 'federation';
         federationDiv.textContent = this.federation;
         this.contentElement.appendChild(federationDiv);
       } else {
         // The stored password.
         var passwordInputDiv = this.ownerDocument.createElement('div');
         passwordInputDiv.className = 'password';
 
         // 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);
         var deletableItem = this;
         passwordInput.addEventListener('focus', function() {
           deletableItem.handleFocus();
         });
         this.passwordField = passwordInput;
         this.setFocusable_(false);
 
@@ skipping 11 matching lines @@
             event.stopPropagation();
           }, false);
           button.addEventListener('focus', function() {
             deletableItem.handleFocus();
           });
           passwordInputDiv.appendChild(button);
           this.passwordShowButton = button;
         }
         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;
       }
     },
 
     /**
      * Set the focusability of this row.
      * @param {boolean} focusable
      * @private
      */
@@ skipping 24 matching lines @@
       if (button)
         button.textContent = loadTimeData.getString('passwordShowButton');
     },
 
     /**
      * Get the original index of this item in the data model.
      * @return {number} The index.
      * @private
      */
     getOriginalIndex_: function() {
-      var index = this.dataItem[ORIGINAL_DATA_INDEX];
+      var index = this.dataItem[ORIGINAL_INDEX_FIELD];
       return index ? index : this.dataModel.indexOf(this.dataItem);
     },
 
     /**
      * On-click event handler. Swaps the type of the input field from password
      * to text and back.
      * @private
      */
     onClick_: function(event) {
       if (this.passwordField.type == 'password') {
         // After the user is authenticated, showPassword() will be called.
         PasswordManager.requestShowPassword(this.getOriginalIndex_());
       } else {
         this.hidePassword();
       }
     },
 
     /**
      * Get and set the URL for the entry.
      * @type {string}
      */
     get url() {
-      return this.dataItem[URL_DATA_INDEX];
+      return this.dataItem[ORIGIN_FIELD];
     },
     set url(url) {
-      this.dataItem[URL_DATA_INDEX] = url;
+      this.dataItem[ORIGIN_FIELD] = url;
     },
 
     /**
+     * Get and set the shown url for the entry.
+     * @type {string}
+     */
+    get shownUrl() {
+      return this.dataItem[SHOWN_URL_FIELD];
+    },
+    set shownUrl(shownUrl) {
+      this.dataItem[SHOWN_URL_FIELD] = shownUrl;
+    },
+
+    /**
+     * Get and set whether the origin uses secure scheme.
+     * @type {boolean}
+     */
+    get isUrlSecure() {
+      return this.dataItem[IS_SECURE_FIELD];
+    },
+    set isUrlSecure(isUrlSecure) {
+      this.dataItem[IS_SECURE_FIELD] = isUrlSecure;
+    },
+
+    /**
      * Get and set the username for the entry.
      * @type {string}
      */
     get username() {
-      return this.dataItem[USERNAME_DATA_INDEX];
+      return this.dataItem[USERNAME_FIELD];
     },
     set username(username) {
-      this.dataItem[USERNAME_DATA_INDEX] = username;
+      this.dataItem[USERNAME_FIELD] = username;
     },
 
     /**
      * Get and set the password for the entry.
      * @type {string}
      */
     get password() {
-      return this.dataItem[PASSWORD_DATA_INDEX];
+      return this.dataItem[PASSWORD_FIELD];
     },
     set password(password) {
-      this.dataItem[PASSWORD_DATA_INDEX] = password;
+      this.dataItem[PASSWORD_FIELD] = password;
     },
 
     /**
      * Get and set the federation for the entry.
      * @type {string}
      */
     get federation() {
-      return this.dataItem[FEDERATION_DATA_INDEX];
+      return this.dataItem[FEDERATION_FIELD];
     },
     set federation(federation) {
-      this.dataItem[FEDERATION_DATA_INDEX] = federation;
+      this.dataItem[FEDERATION_FIELD] = federation;
     },
   };
 
   /**
    * Creates a new PasswordExceptions list item.
    * @param {Array} entry A pair of the form [url, username].
    * @constructor
    * @extends {options.DeletableItem}
    */
   function PasswordExceptionsListItem(entry) {
     var el = cr.doc.createElement('div');
     el.dataItem = entry;
     el.__proto__ = PasswordExceptionsListItem.prototype;
     el.decorate();
 
     return el;
   }
 
   PasswordExceptionsListItem.prototype = {
     __proto__: DeletableItem.prototype,
 
     /**
      * Call when an element is decorated as a list item.
      */
     decorate: 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;
-
-      // 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(
+      var urlDiv = this.ownerDocument.createElement('div');
+      urlDiv.className = 'url';
+      urlDiv.classList.add('favicon-cell');
+      urlDiv.classList.add('left-elided-url');
+      urlDiv.setAttribute(
+          'title', getTitleForPasswordOrigin(this.url, this.isUrlSecure));
+      var urlLink = this.ownerDocument.createElement('a');
+      urlLink.href = this.url;
+      urlLink.textContent = this.shownUrl.split('').reverse().join('');
+      urlDiv.appendChild(urlLink);
+      urlDiv.style.backgroundImage = getFaviconImageSet(
           'origin/' + this.url, 16);
-      this.contentElement.appendChild(urlLabel);
+      this.contentElement.appendChild(urlDiv);
     },
 
     /**
      * Get the url for the entry.
      * @type {string}
      */
     get url() {
-      return this.dataItem;
+      return this.dataItem[ORIGIN_FIELD];
     },
     set url(url) {
-      this.dataItem = url;
+      this.dataItem[ORIGIN_FIELD] = url;
+    },
+
+    /**
+     * Get and set the shown url for the entry.
+     * @type {string}
+     */
+    get shownUrl() {
+      return this.dataItem[SHOWN_URL_FIELD];
+    },
+    set shownUrl(shownUrl) {
+      this.dataItem[SHOWN_URL_FIELD] = shownUrl;
+    },
+
+    /**
+     * Get and set whether the origin uses secure scheme.
+     * @type {boolean}
+     */
+    get isUrlSecure() {
+      return this.dataItem[IS_SECURE_FIELD];
+    },
+    set isUrlSecure(isUrlSecure) {
+      this.dataItem[IS_SECURE_FIELD] = isUrlSecure;
     },
   };
 
   /**
    * Create a new passwords list.
    * @constructor
    * @extends {options.DeletableItemList}
    */
   var PasswordsList = cr.ui.define('list');
 
@@ skipping 35 matching lines @@
 
       if (loadTimeData.getBoolean('disableShowPasswords'))
         showPasswords = false;
 
       return new PasswordListItem(this.dataModel, entry, showPasswords);
     },
 
     /** @override */
     deleteItemAtIndex: function(index) {
       var item = this.dataModel.item(index);
-      if (item && item[ORIGINAL_DATA_INDEX] != undefined) {
+      if (item && item[ORIGINAL_INDEX_FIELD] != undefined) {
         // The fifth element, if present, is the original index to delete.
-        index = item[ORIGINAL_DATA_INDEX];
+        index = item[ORIGINAL_INDEX_FIELD];
       }
       PasswordManager.removeSavedPassword(index);
     },
 
     /**
      * The length of the list.
      */
     get length() {
       return this.dataModel.length;
     },
@@ skipping 39 matching lines @@
     get length() {
       return this.dataModel.length;
     },
   };
 
   return {
     PasswordListItem: PasswordListItem,
     PasswordExceptionsListItem: PasswordExceptionsListItem,
     PasswordsList: PasswordsList,
     PasswordExceptionsList: PasswordExceptionsList,
+    ORIGIN_FIELD: ORIGIN_FIELD,
+    SHOWN_URL_FIELD: SHOWN_URL_FIELD,
+    IS_SECURE_FIELD: IS_SECURE_FIELD,
+    USERNAME_FIELD: USERNAME_FIELD,
+    PASSWORD_FIELD: PASSWORD_FIELD,
+    FEDERATION_FIELD: FEDERATION_FIELD,
+    ORIGINAL_INDEX_FIELD: ORIGINAL_INDEX_FIELD
   };
 });