Changes to show message for case with no passwords or exceptions.

Add hidden ...-empty-placeholder divs to swap in for password and
exception lists when they are empty.  Swap them in when the password
manager sets the dataModel of the lists.

BUG=71441
TEST=chrome://settings/passwords - test both empty passwords or exceptions.

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

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

4 files changed, 36 insertions, 3 deletions

diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css
index 9107c8a..ee696ca 100644
--- a/chrome/browser/resources/options/options_page.css
+++ b/chrome/browser/resources/options/options_page.css
@@ -431,11 +431,20 @@ div.disabled {
   color: #000;
 }
 
-.settings-list {
+.settings-list,
+.settings-list-empty {
   border: 1px solid #d9d9d9;
   border-radius: 2px;
 }
 
+.settings-list-empty {
+  background-color: #f4f4f4;
+  box-sizing: border-box;
+  min-height: 125px;
+  padding-left: 20px;
+  padding-top: 20px;
+}
+
 list > * {
   -webkit-box-align: center;
   -webkit-transition: .15s background-color;
diff --git a/chrome/browser/resources/options/password_manager.html b/chrome/browser/resources/options/password_manager.html
index 1e404fe..d794deb 100644
--- a/chrome/browser/resources/options/password_manager.html
+++ b/chrome/browser/resources/options/password_manager.html
@@ -2,6 +2,18 @@
   <h1 i18n-content="passwordsPage"></h1>
   <h3 i18n-content="savedPasswordsTitle"></h3>
   <list id="saved-passwords-list" class="settings-list"></list>
+  <div id="saved-passwords-list-empty-placeholder"
+       class="settings-list-empty" hidden>
+    <span i18n-content="passwordsNoPasswordsDescription"></span>
+    <a target="_blank" i18n-content="learnMore"
+       i18n-values="href:passwordManagerLearnMoreURL"></a>
+  </div>
   <h3 i18n-content="passwordExceptionsTitle"></h3>
   <list id="password-exceptions-list" class="settings-list"></list>
+  <div id="password-exceptions-list-empty-placeholder" hidden
+       class="settings-list-empty">
+    <span i18n-content="passwordsNoExceptionsDescription"></span>
+    <a target="_blank" i18n-content="learnMore"
+       i18n-values="href:passwordManagerLearnMoreURL"></a>
+  </div>
 </div>
diff --git a/chrome/browser/resources/options/password_manager.js b/chrome/browser/resources/options/password_manager.js
index 6e9f7de..c4fef98 100644
--- a/chrome/browser/resources/options/password_manager.js
+++ b/chrome/browser/resources/options/password_manager.js
@@ -82,12 +82,24 @@ cr.define('options', function() {
     },
 
     /**
+     * Updates the visibility of the list and empty list placeholder.
+     * @param {!List} list The list to toggle visilibility for.
+     */
+    updateListVisibility_: function(list) {
+      var empty = list.dataModel.length == 0;
+      var listPlaceHolderID = list.id + '-empty-placeholder';
+      list.hidden = empty;
+      $(listPlaceHolderID).hidden = !empty;
+    },
+
+    /**
      * Updates the data model for the saved passwords list with the values from
      * |entries|.
      * @param {Array} entries The list of saved password data.
      */
     setSavedPasswordsList_: function(entries) {
       this.savedPasswordsList_.dataModel = new ArrayDataModel(entries);
+      this.updateListVisibility_(this.savedPasswordsList_);
     },
 
     /**
@@ -97,6 +109,7 @@ cr.define('options', function() {
      */
     setPasswordExceptionsList_: function(entries) {
       this.passwordExceptionsList_.dataModel = new ArrayDataModel(entries);
+      this.updateListVisibility_(this.passwordExceptionsList_);
     },
   };
 
@@ -146,4 +159,3 @@ cr.define('options', function() {
   };
 
 });
-
diff --git a/chrome/browser/resources/shared/js/cr/ui/list.js b/chrome/browser/resources/shared/js/cr/ui/list.js
index 5f02ca2..0f725fd 100644
--- a/chrome/browser/resources/shared/js/cr/ui/list.js
+++ b/chrome/browser/resources/shared/js/cr/ui/list.js
@@ -715,7 +715,7 @@ cr.define('cr.ui', function() {
 
       var desiredScrollHeight = this.getHeightsForIndex_(dataModel.length).top;
 
-      var autoExpands = this.autoExpands_
+      var autoExpands = this.autoExpands_;
       var firstIndex = autoExpands ? 0 : this.getIndexForListOffset_(scrollTop);
       var itemsInViewPort = autoExpands ? dataModel.length : Math.min(
           dataModel.length - firstIndex,