Handle the PasswordManagerAllowShowPasswords preference in the options webui.

chrome/browser/resources/options/password_manager_list.js

 // Copyright (c) 2010 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 ArrayDataModel = cr.ui.ArrayDataModel;
   const DeletableItemList = options.DeletableItemList;
   const DeletableItem = options.DeletableItem;
   const List = cr.ui.List;
 
   /**
    * Creates a new passwords list item.
    * @param {Array} entry An array of the form [url, username, password].
    * @constructor
    * @extends {cr.ui.ListItem}
    */
-  function PasswordListItem(entry) {
+  function PasswordListItem(entry, showPassword) {
     var el = cr.doc.createElement('div');
     el.dataItem = entry;
     el.__proto__ = PasswordListItem.prototype;
+    el.showPassword = showPassword;
     el.decorate();
 
     return el;
   }
 
   PasswordListItem.prototype = {
     __proto__: DeletableItem.prototype,
 
     /** @inheritDoc */
     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('url');
       urlLabel.textContent = this.url;
       urlLabel.style.backgroundImage = url('chrome://favicon/' + this.url);
       this.contentElement.appendChild(urlLabel);
 
       // The stored username.
       var usernameLabel = this.ownerDocument.createElement('div');
       usernameLabel.className = 'name';
       usernameLabel.textContent = this.username;
       this.contentElement.appendChild(usernameLabel);
 
-      // The stored password.
-      var passwordInputDiv = this.ownerDocument.createElement('div');
-      passwordInputDiv.className = 'password';
+      if (this.showPassword) {

[James Hawkins, 2011/03/29 17:37:23]

if (!this.showPassword)
  return;

^ Huge indented blocks are bad for readability.

[Joao da Silva, 2011/03/31 10:03:22]

This has moved a couple of lines down.

+        // The stored password.
+        var passwordInputDiv = this.ownerDocument.createElement('div');
+        passwordInputDiv.className = 'password';

[stuartmorgan, 2011/03/29 15:24:58]

Having a huge blank space on the right hand side of the table seems unlikely to
be the desired UI here. Seems like we should either change the column widths, or
the password should be displayed as ****** but not displayable or editable.

[James Hawkins, 2011/03/29 17:37:23]

Agreed. Are we showing some sort of UI to the user to let them know why they
aren't seeing the password? If a user is familiar with the UI from another
machine where they can see passwords, then they arrive at this situation, it
would seem jarring and broken w/out notification.

[Joao da Silva, 2011/03/31 10:03:22]

Fixed. The password input div is kept, but the "show" button is not included
when passwords are hidden. The password length is also fixed at 8 chars when
hidden.

[Joao da Silva, 2011/03/31 10:03:22]

When a preference is managed by policy there is a banner at the top of the page
telling the user that the IT administrator has changed some preferences.

 
-      // The password input field.
-      var passwordInput = this.ownerDocument.createElement('input');
-      passwordInput.type = 'password';
-      passwordInput.className = 'inactive-password';
-      passwordInput.readOnly = true;
-      passwordInput.value = this.password;
-      passwordInputDiv.appendChild(passwordInput);
+        // The password input field.
+        var passwordInput = this.ownerDocument.createElement('input');
+        passwordInput.type = 'password';
+        passwordInput.className = 'inactive-password';
+        passwordInput.readOnly = true;
+        passwordInput.value = this.password;
+        passwordInputDiv.appendChild(passwordInput);
 
-      // The show/hide button.
-      var button = this.ownerDocument.createElement('button');
-      button.classList.add('hidden');
-      button.classList.add('password-button');
-      button.textContent = localStrings.getString('passwordShowButton');
-      button.addEventListener('click', this.onClick_, true);
-      passwordInputDiv.appendChild(button);
+        // The show/hide button.
+        var button = this.ownerDocument.createElement('button');
+        button.classList.add('hidden');
+        button.classList.add('password-button');
+        button.textContent = localStrings.getString('passwordShowButton');
+        button.addEventListener('click', this.onClick_, true);
+        passwordInputDiv.appendChild(button);
 
-      this.contentElement.appendChild(passwordInputDiv);
+        this.contentElement.appendChild(passwordInputDiv);
+      }
     },
 
     /** @inheritDoc */
     selectionChanged: function() {
+      if (!this.showPassword)
+        return;

[James Hawkins, 2011/03/29 17:37:23]

nit: Blank line after if block.

[Joao da Silva, 2011/03/31 10:03:22]

Done.

       var passwordInput = this.querySelector('input[type=password]');
       var textInput = this.querySelector('input[type=text]');
       var input = passwordInput || textInput;
       var button = input.nextSibling;
       if (this.selected) {
         input.classList.remove('inactive-password');
         button.classList.remove('hidden');
       } else {
         input.classList.add('inactive-password');
         button.classList.add('hidden');
@@ skipping 102 matching lines @@
    * @constructor
    * @extends {cr.ui.List}
    */
   var PasswordsList = cr.ui.define('list');
 
   PasswordsList.prototype = {
     __proto__: DeletableItemList.prototype,
 
     /** @inheritDoc */
     createItem: function(entry) {
-      return new PasswordListItem(entry);
+      return new PasswordListItem(entry, this.showPasswords);
     },
 
     /** @inheritDoc */
     deleteItemAtIndex: function(index) {
       PasswordManager.removeSavedPassword(index);
     },
 
     /**
      * The length of the list.
      */
     get length() {
       return this.dataModel.length;
     },
+
+    showPasswords: true,

[James Hawkins, 2011/03/29 17:37:23]

Document.

[James Hawkins, 2011/03/29 17:37:23]

s/showPasswords/showPasswords_/ since it's presumably private.

[Joao da Silva, 2011/03/31 10:03:22]

Done.

[Joao da Silva, 2011/03/31 10:03:22]

It's not private. Should a getter and setter be used instead?

   };
 
   /**
    * Create a new passwords list.
    * @constructor
    * @extends {cr.ui.List}
    */
   var PasswordExceptionsList = cr.ui.define('list');
 
   PasswordExceptionsList.prototype = {
@@ skipping 17 matching lines @@
     },
   };
 
   return {
     PasswordListItem: PasswordListItem,
     PasswordExceptionsListItem: PasswordExceptionsListItem,
     PasswordsList: PasswordsList,
     PasswordExceptionsList: PasswordExceptionsList,
   };
 });