Fixing column widths in tables.

chrome/browser/resources/shared/js/cr/ui/table/table_list.js

Index: chrome/browser/resources/shared/js/cr/ui/table/table_list.js
diff --git a/chrome/browser/resources/shared/js/cr/ui/table/table_list.js b/chrome/browser/resources/shared/js/cr/ui/table/table_list.js
index e9865982e2900324ccf58fcd166df4029d75a34a..3d3e50d168081718a7fa21d79cbb02b1302ce6b0 100644
--- a/chrome/browser/resources/shared/js/cr/ui/table/table_list.js
+++ b/chrome/browser/resources/shared/js/cr/ui/table/table_list.js
@@ -33,32 +33,123 @@ cr.define('cr.ui.table', function() {
     },
 
     /**
-     * Resizes columns.
+     * Resizes columns. Called when column width changed.
      */
     resize: function() {
-      var cm = this.table_.columnModel;
+      if (this.updateScrollbars_())
+        List.prototype.redraw.call(this);  // Redraw items only.
+      this.resizeCells_();
+    },
 
-      var cells = this.querySelectorAll('.table-row-cell');
-      if (cells.length % cm.size != 0) {
-        this.redraw();
-        return;
-      }
-      var rowsCount = cells.length / cm.size;
+    /**
+     * Updates width of cells.
+     */
+    resizeCells_: function() {
+      var cm = this.table_.columnModel;
+      for (var row = this.firstElementChild; row;
+           row = row.nextElementSibling) {
+        if (row.tagName != 'LI')
+          continue;
 
-      for (var row = 0; row < rowsCount; row++) {
         for (var i = 0; i < cm.size; i++) {
-          cells[row * cm.size + i].style.width = cm.getWidth(i) + '%';
+          row.children[i].style.width = cm.getWidth(i) + 'px';
         }
+        row.style.width = cm.totalWidth + 'px';
       }
+      this.afterFiller_.style.width = cm.totalWidth + 'px';
     },
 
     /**
      * Redraws the viewport.
      */
     redraw: function() {
-      if (!this.table_.columnModel)
+      if (this.batchCount_ != 0)
         return;
+      this.updateScrollbars_();
+
       List.prototype.redraw.call(this);
+      this.resizeCells_();
+    },
+
+    /**
+     * Returns the height of after filler in the list.
+     * @param {number} lastIndex The index of item past the last in viewport.
+     * @return {number} The height of after filler.
+     * @override
+     */
+    getAfterFillerHeight: function(lastIndex) {
+      // If the list is empty set height to 1 to show horizontal
+      // scroll bar.
+      return lastIndex == 0 ? 1 :
+          cr.ui.List.prototype.getAfterFillerHeight.call(this, lastIndex);
+    },
+
+    /**
+     * Shows or hides vertical and horizontal scroll bars in the list.
+     * @return {boolean} True if horizontal scroll bar changed.
+     */
+    updateScrollbars_: function() {
+      var cm = this.table.columnModel;
+      var style = this.style;
+      if (!cm || cm.size == 0) {
+        if (style.overflow != 'hidden') {
+          style.overflow = 'hidden';
+          return true;
+        } else {
+          return false;
+        }
+      }
+
+      var height = this.offsetHeight;
+      var changed = false;
+      var offsetWidth = this.offsetWidth;
+      if (cm.totalWidth > offsetWidth) {
+        if (style.overflowX != 'scroll') {
+          style.overflowX = 'scroll';
+        }
+        // Once we sure there will be horizontal
+        // scrollbar calculate with this height.
+        height = this.clientHeight;
+      }
+      if (this.areAllItemsVisible_(height)) {
+        if (cm.totalWidth <= offsetWidth && style.overflowX != 'hidden') {
+          style.overflowX = 'hidden';
+        }
+        changed = this.showVerticalScrollBar_(false);
+      } else {
+        changed = this.showVerticalScrollBar_(true);
+        var x = cm.totalWidth <= this.clientWidth ? 'hidden' : 'scroll';
+        if (style.overflowX != x) {
+          style.overflowX = x;
+        }
+      }
+      return changed;
+    },
+
+    /**
+     * Shows or hides vertical scroll bar.
+     * @param {boolean} show True to show.
+     * @return {boolean} True if visibility changed.
+     */
+    showVerticalScrollBar_: function(show) {
+      var style = this.style;
+      if (show && style.overflowY == 'scroll')
+        return false;
+      if (!show && style.overflowY == 'hidden')
+        return false;
+      style.overflowY = show ? 'scroll' : 'hidden';
+      return true;
+    },
+
+    /**
+     * @param {number} visibleHeight Height in pixels.
+     * @return {boolean} True if all rows could be accomodiated in
+     *                   visibleHeight pixels.
+     */
+    areAllItemsVisible_: function(visibleHeight) {
+      if (!this.dataModel || this.dataModel.length == 0)
+        return true;
+      return this.getItemTop(this.dataModel.length) <= visibleHeight;
     },
 
     /**
@@ -80,7 +171,7 @@ cr.define('cr.ui.table', function() {
 
       for (var i = 0; i < cm.size; i++) {
         var cell = table.ownerDocument.createElement('div');
-        cell.style.width = cm.getWidth(i) + '%';
+        cell.style.width = cm.getWidth(i) + 'px';
         cell.className = 'table-row-cell';
         if (cm.isEndAlign(i))
           cell.style.textAlign = 'end';
@@ -89,6 +180,7 @@ cr.define('cr.ui.table', function() {
 
         listItem.appendChild(cell);
       }
+      listItem.style.width = cm.totalWidth + 'px';
 
       return listItem;
     },