[Password manager] Human readable origins for Android credentials on chrome://settings/passwords

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;
 
   // 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 URL_FIELD = 'url';
+  /** @const */ var SHOWN_ORIGIN_FIELD = 'shownOrigin';
   /** @const */ var IS_ANDROID_URI_FIELD = 'isAndroidUri';
+  /** @const */ var IS_CLICKABLE_FIELD = 'isClickable';
   /** @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 {Object} entry A dictionary of data on new list item. When the
    *     list has been filtered, one more 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. If the origin is  Android URI, returns
-   * the origin as it is. Removes the scheme if the url is insecure and removes
-   * trailing punctuation symbols.
+   * Returns title for password's origin. If the origin is not clickable,
+   * returns the origin as it is. For clickable origins, removes the scheme if
+   * the url is insecure and removes trailing punctuation symbols.
    * @param {Object} item A dictionary of data on the list item.
    * @return {string} The title for password's origin.
    */
   function getTitleForPasswordOrigin(item) {
     var title = item.url;
-    if (item.isAndroidUri)
+    if (!item.isClickable)
       return title;
     if (!item.isSecure) {
       var ind = title.indexOf('://');
       if (ind >= 0) {
         title = title.substring(ind + 3);
       }
     }
     return title;
   }
 
   /**
-   * Helper function that creates an HTML element for displaying the origin of
-   * saved password.
+   * Helper function that creates an HTML element for displaying the link to
+   * the origin of saved password.
    * @param {Object} item A dictionary of data on the list item.
    * @param {Element} urlDiv div-element that will enclose the created
    *     element.
-   * @return {Element} The element for displaying password origin.
+   * @return {Element} The element for displaying the link to the origin.
    */
   function createUrlLink(item, urlDiv) {
     var urlLink;
-    if (!item.isAndroidUri) {
+    if (item.isClickable) {
       urlLink = item.ownerDocument.createElement('a');
       urlLink.href = item.url;
       urlLink.setAttribute('target', '_blank');
       urlLink.dir = 'ltr';
     } else {
       urlLink = item.ownerDocument.createElement('span');
     }
-    urlLink.textContent = item.shownUrl;
+    urlLink.textContent = item.shownOrigin;
     urlLink.addEventListener('focus', function() {
       item.handleFocus();
     }.bind(item));
     return urlLink;
   }
 
+  /**
+   * Helper function that creates an HTML element that is appended to the

[Evan Stade, 2016/03/24 16:50:36]

not sure if helper is useful. Just inline it?

[kolos1, 2016/03/29 09:03:03]

Done.

+   * clickable origins of Android credentials.
+   * @return {Element} The element to append Android clickable origins.
+   */
+  function createAndroidUriSuffix() {
+    var androidUriSuffix = cr.doc.createElement('span');
+    androidUriSuffix.className = 'android-uri-suffix';
+    androidUriSuffix.textContent = loadTimeData.getString('androidUriSuffix');
+    return androidUriSuffix;
+  }
+
+  /**
+   * Helper function that creates an HTML element for displaying the origin of
+   * saved password. It also sets some properties in |item|.
+   * @param {Object} item A dictionary of data on the list item.
+   * @return {Element} The element for displaying the origin of saved password.
+   */
+  function createUrlDiv(item) {
+    var urlDiv = cr.doc.createElement('div');
+    urlDiv.className = 'favicon-cell url';
+    urlDiv.setAttribute('title', getTitleForPasswordOrigin(item));
+    urlDiv.style.backgroundImage = getFaviconImageSet(
+        'origin/' + item.url, 16);
+
+    item.urlLink = createUrlLink(item, urlDiv);
+    urlDiv.appendChild(item.urlLink);
+
+    if (item.isAndroidUri && item.isClickable) {
+      item.androidUriSuffix = createAndroidUriSuffix();
+      urlDiv.appendChild(item.androidUriSuffix);
+    }
+
+    item.urlDiv = urlDiv;
+    return urlDiv;
+  }
+
   PasswordListItem.prototype = {
     __proto__: DeletableItem.prototype,
 
     /** @override */
     decorate: function() {
       DeletableItem.prototype.decorate.call(this);
 
       // The URL of the site.
-      var urlDiv = this.ownerDocument.createElement('div');
-      urlDiv.className = 'favicon-cell url';
-      urlDiv.setAttribute('title', getTitleForPasswordOrigin(this));
-      urlDiv.style.backgroundImage = getFaviconImageSet(
-          'origin/' + this.url, 16);
-
-      this.urlLink = createUrlLink(this, urlDiv);
-      urlDiv.appendChild(this.urlLink);
-
-      this.urlDiv = urlDiv;
-      this.contentElement.appendChild(urlDiv);
+      this.contentElement.appendChild(createUrlDiv(this));
 
       // The stored username.
       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;
@@ skipping 133 matching lines @@
     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.
+     * Get the URL for the entry.
      * @type {string}
      */
     get url() {
-      return this.dataItem[ORIGIN_FIELD];
-    },
-    set url(url) {
-      this.dataItem[ORIGIN_FIELD] = url;
+      return this.dataItem[URL_FIELD];
     },
 
     /**
-     * Get and set the shown url for the entry.
+     * Get the shown origin for the entry.
      * @type {string}
      */
-    get shownUrl() {
-      return this.dataItem[SHOWN_URL_FIELD];
-    },
-    set shownUrl(shownUrl) {
-      this.dataItem[SHOWN_URL_FIELD] = shownUrl;
+    get shownOrigin() {
+      return this.dataItem[SHOWN_ORIGIN_FIELD];
     },
 
     /**
-     * Get and set whether the origin is Android URI.
+     * Get whether the origin is Android URI.
      * @type {boolean}
      */
     get isAndroidUri() {
       return this.dataItem[IS_ANDROID_URI_FIELD];
     },
-    set isAndroidUri(isAndroidUri) {
-      this.dataItem[IS_ANDROID_URI_FIELD] = isAndroidUri;
+
+    /**
+     * Get whether the origin is clickable.
+     * @type {boolean}
+     */
+    get isClickable() {
+      return this.dataItem[IS_CLICKABLE_FIELD];
     },
 
     /**
-     * Get and set whether the origin uses secure scheme.
+     * Get whether the origin uses secure scheme.
      * @type {boolean}
      */
     get isSecure() {
       return this.dataItem[IS_SECURE_FIELD];
     },
-    set isSecure(isSecure) {
-      this.dataItem[IS_SECURE_FIELD] = isSecure;
-    },
 
     /**
-     * Get and set the username for the entry.
+     * Get the username for the entry.
      * @type {string}
      */
     get username() {
       return this.dataItem[USERNAME_FIELD];
     },
-    set username(username) {
-      this.dataItem[USERNAME_FIELD] = username;
-    },
 
     /**
-     * Get and set the password for the entry.
+     * Get the password for the entry.
      * @type {string}
      */
     get password() {
       return this.dataItem[PASSWORD_FIELD];
     },
-    set password(password) {
-      this.dataItem[PASSWORD_FIELD] = password;
-    },
 
     /**
-     * Get and set the federation for the entry.
+     * Get the federation for the entry.
      * @type {string}
      */
     get federation() {
       return this.dataItem[FEDERATION_FIELD];
     },
-    set federation(federation) {
-      this.dataItem[FEDERATION_FIELD] = federation;
-    },
   };
 
   /**
    * Creates a new PasswordExceptions list item.
    * @param {Object} entry A dictionary of data on new list item.
    * @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 urlDiv = this.ownerDocument.createElement('div');
-      urlDiv.className = 'favicon-cell url';
-      urlDiv.setAttribute('title', getTitleForPasswordOrigin(this));
-      urlDiv.style.backgroundImage = getFaviconImageSet(
-        'origin/' + this.url, 16);
-
-      this.urlLink = createUrlLink(this, urlDiv);
-      urlDiv.appendChild(this.urlLink);
-
-      this.urlDiv = urlDiv;
-      this.contentElement.appendChild(urlDiv);
+      this.contentElement.appendChild(createUrlDiv(this));
     },
 
     /** @override */
     selectionChanged: function() {
       if (this.selected) {
         this.setFocusable_(true);
         this.urlLink.focus();
       } else {
         this.setFocusable_(false);
       }
     },
 
     /**
      * Set the focusability of this row.
      * @param {boolean} focusable
      * @private
      */
     setFocusable_: function(focusable) {
       var tabIndex = focusable ? 0 : -1;
       this.urlLink.tabIndex = tabIndex;
       this.closeButtonElement.tabIndex = tabIndex;
     },
 
     /**
      * Get the url for the entry.
      * @type {string}
      */
     get url() {
-      return this.dataItem[ORIGIN_FIELD];
-    },
-    set url(url) {
-      this.dataItem[ORIGIN_FIELD] = url;
+      return this.dataItem[URL_FIELD];
     },
 
     /**
-     * Get and set the shown url for the entry.
+     * Get the shown origin for the entry.
      * @type {string}
      */
-    get shownUrl() {
-      return this.dataItem[SHOWN_URL_FIELD];
-    },
-    set shownUrl(shownUrl) {
-      this.dataItem[SHOWN_URL_FIELD] = shownUrl;
+    get shownOrigin() {
+      return this.dataItem[SHOWN_ORIGIN_FIELD];
     },
 
     /**
-     * Get and set whether the origin is Android URI.
+     * Get whether the origin is Android URI.
      * @type {boolean}
      */
     get isAndroidUri() {
       return this.dataItem[IS_ANDROID_URI_FIELD];
     },
-    set isAndroidUri(isAndroidUri) {
-      this.dataItem[IS_ANDROID_URI_FIELD] = isAndroidUri;
+
+    /**
+     * Get whether the origin is clickable.
+     * @type {boolean}
+     */
+    get isClickable() {
+      return this.dataItem[IS_CLICKABLE_FIELD];
     },
 
     /**
-     * Get and set whether the origin uses secure scheme.
+     * Get whether the origin uses secure scheme.
      * @type {boolean}
      */
     get isSecure() {
       return this.dataItem[IS_SECURE_FIELD];
     },
-    set isSecure(isSecure) {
-      this.dataItem[IS_SECURE_FIELD] = isSecure;
-    },
   };
 
   /**
    * Create a new passwords list.
    * @constructor
    * @extends {options.DeletableItemList}
    */
   var PasswordsList = cr.ui.define('list');
 
   PasswordsList.prototype = {
@@ skipping 96 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,
+    URL_FIELD: URL_FIELD,
+    SHOWN_ORIGIN_FIELD: SHOWN_ORIGIN_FIELD,
+    IS_ANDROID_URI_FIELD: IS_ANDROID_URI_FIELD,
+    IS_CLICKABLE_FIELD: IS_CLICKABLE_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
   };
 });