DOMUI prefs: First stage of changing lists to match mocks.

This does two things:
- Adds a mode to the DOMUI List class where the list auto-sizes.
- Overrides the default list styling to make it more like the mocks (just basic cosmetic styling at this point).

BUG=None
TEST=Lists in DOMUI prefs should look more like the current mocks.

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

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

7 files changed, 82 insertions, 22 deletions

diff --git a/chrome/browser/resources/options/browser_options.html b/chrome/browser/resources/options/browser_options.html
index 143f2e1..8d68798 100644
--- a/chrome/browser/resources/options/browser_options.html
+++ b/chrome/browser/resources/options/browser_options.html
@@ -16,17 +16,15 @@
           metric="Options_Startup_Custom">
           <span i18n-content="startupShowPages"></span></label>
       <div class="suboption">
-        <div class="left-side-table">
+        <div id="startupPageManagement">
+          <list id="startupPages"></list>
           <div>
-            <list id="startupPages"></list>
-          </div>
-          <div>
-            <div><button id="startupAddButton"
-                i18n-content="startupAddButton"></button></div>
-            <div><button id="startupRemoveButton"
-                i18n-content="startupRemoveButton"></button></div>
-            <div><button id="startupUseCurrentButton"
-                i18n-content="startupUseCurrent"></button></div>
+            <button id="startupAddButton"
+                i18n-content="startupAddButton"></button>
+            <button id="startupRemoveButton"
+                i18n-content="startupRemoveButton"></button>
+            <button id="startupUseCurrentButton"
+                i18n-content="startupUseCurrent"></button>
           </div>
         </div>
       </div>
diff --git a/chrome/browser/resources/options/browser_options.js b/chrome/browser/resources/options/browser_options.js
index e6ec689..69cdcfb 100644
--- a/chrome/browser/resources/options/browser_options.js
+++ b/chrome/browser/resources/options/browser_options.js
@@ -87,15 +87,12 @@ cr.define('options', function() {
 
       var list = $('startupPages');
       options.browser_options.StartupPageList.decorate(list);
+      list.autoExpands = true;
       list.selectionModel = new ListSelectionModel;
 
       list.selectionModel.addEventListener(
           'change', this.updateRemoveButtonState_.bind(this));
 
-      this.addEventListener('visibleChange', function(event) {
-        $('startupPages').redraw();
-      });
-
       // Check if we are in the guest mode.
       if (cr.commandLine.options['--bwsi']) {
         // Disable input and button elements under the startup section.
@@ -187,6 +184,7 @@ cr.define('options', function() {
      * @param {Array} pages List of startup pages.
      */
     updateStartupPages_: function(pages) {
+      // TODO(stuartmorgan): Once the sub-page is done, handle 0 and > 10 pages.
       $('startupPages').dataModel = new ArrayDataModel(pages);
       this.updateRemoveButtonState_();
     },
diff --git a/chrome/browser/resources/options/browser_options_page.css b/chrome/browser/resources/options/browser_options_page.css
index a351bb2..3a8b617 100644
--- a/chrome/browser/resources/options/browser_options_page.css
+++ b/chrome/browser/resources/options/browser_options_page.css
@@ -1,6 +1,16 @@
+#startupPageManagement {
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+}
+
 #startupPages {
-  border: solid 1px #999999;
-  height: 100px;
+  height: auto;
+  padding-bottom: 1px;
+}
+
+#startupPageManagement > :last-child {
+  border-top: 1px solid #d9d9d9;
+  padding: 5px 10px;
 }
 
 #customHomePageGroup {
diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css
index 20a85ae..d5398af 100644
--- a/chrome/browser/resources/options/options_page.css
+++ b/chrome/browser/resources/options/options_page.css
@@ -339,6 +339,29 @@ select {
   background-color: pink;
 }
 
+list > * {
+  -webkit-box-align: center;
+  -webkit-box-sizing: border-box;
+  border-radius: 0px;
+  display: -webkit-box;
+  height: 32px;
+  border: none;
+}
+
+list > :hover {
+  background-color: #f2f2f2;
+}
+
+list > [selected],
+list:focus > [selected],
+list:focus > [lead][selected],
+list > [selected]:hover {
+  background-color: #f2f2f2;
+  border-top: 1px solid #b2b2b2;
+  border-bottom: 1px solid #b2b2b2;
+  background-image: none;
+}
+
 list > .heading {
   color: #666666;
 }
@@ -378,6 +401,11 @@ html[dir=rtl].option-name {
   background-repeat: no-repeat;
 }
 
+list .favicon-cell {
+  -webkit-margin-start: 7px;
+  -webkit-padding-start: 26px;
+}
+
 html[dir=rtl] .favicon-cell {
   background-position: right;
 }
diff --git a/chrome/browser/resources/options/search_engine_manager.css b/chrome/browser/resources/options/search_engine_manager.css
index 4fa9268..7c40f25 100644
--- a/chrome/browser/resources/options/search_engine_manager.css
+++ b/chrome/browser/resources/options/search_engine_manager.css
@@ -1,3 +1,8 @@
+#searchEngineList {
+  height: auto;
+  padding-bottom: 1px;
+}
+
 #searchEngineList > div, #searchEngineHeading {
   display: -webkit-box;
 }
diff --git a/chrome/browser/resources/options/search_engine_manager.js b/chrome/browser/resources/options/search_engine_manager.js
index d227905..3e50004 100644
--- a/chrome/browser/resources/options/search_engine_manager.js
+++ b/chrome/browser/resources/options/search_engine_manager.js
@@ -31,6 +31,7 @@ cr.define('options', function() {
       options.search_engines.SearchEngineList.decorate(this.list_);
       var selectionModel = new ListSingleSelectionModel
       this.list_.selectionModel = selectionModel;
+      this.list_.autoExpands = true;
 
       selectionModel.addEventListener('change',
           this.selectionChanged_.bind(this));
@@ -58,10 +59,6 @@ cr.define('options', function() {
           localStrings.getStringWithoutAccelerator('addSearchEngineButton');
       $('removeSearchEngineButton').textContent =
           localStrings.getStringWithoutAccelerator('removeSearchEngineButton');
-
-      this.addEventListener('visibleChange', function(event) {
-          $('searchEngineList').redraw();
-      });
     },
 
     /**
diff --git a/chrome/browser/resources/shared/js/cr/ui/list.js b/chrome/browser/resources/shared/js/cr/ui/list.js
index 6b98944..042733b 100644
--- a/chrome/browser/resources/shared/js/cr/ui/list.js
+++ b/chrome/browser/resources/shared/js/cr/ui/list.js
@@ -88,6 +88,14 @@ cr.define('cr.ui', function() {
      */
     itemHeight_: 0,
 
+    /**
+     * Whether or not the list is autoexpanding. If true, the list resizes
+     * its height to accomadate all children.
+     * @type {boolean}
+     * @private
+     */
+    autoExpands_: false,
+
     dataModel_: null,
 
     /**
@@ -165,6 +173,20 @@ cr.define('cr.ui', function() {
     },
 
     /**
+     * Whether or not the list auto-expands.
+     * @type {boolean}
+     */
+    get autoExpands() {
+      return this.autoExpands_;
+    },
+    set autoExpands(autoExpands) {
+      if (this.autoExpands_ == autoExpands)
+        return;
+      this.autoExpands_ = autoExpands;
+      this.redraw();
+    },
+
+    /**
      * Convenience alias for selectionModel.selectedItem
      * @type {cr.ui.ListItem}
      */
@@ -464,8 +486,10 @@ cr.define('cr.ui', function() {
 
       var desiredScrollHeight = dataModel.length * itemHeight;
 
-      var firstIndex = Math.floor(scrollTop / itemHeight);
-      var itemsInViewPort = Math.min(dataModel.length - firstIndex,
+      var autoExpands = this.autoExpands_
+      var firstIndex = autoExpands ? 0 : Math.floor(scrollTop / itemHeight);
+      var itemsInViewPort = autoExpands ? dataModel.length : Math.min(
+          dataModel.length - firstIndex,
           Math.ceil((scrollTop + clientHeight - firstIndex * itemHeight) /
                     itemHeight));
       var lastIndex = firstIndex + itemsInViewPort;