Fixing column widths in tables.

chrome/browser/resources/shared/js/cr/ui/table.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.
 
 /**
  * @fileoverview This implements a table control.
  */
 
 cr.define('cr.ui', function() {
   /** @const */ var ListSelectionModel = cr.ui.ListSelectionModel;
@@ skipping 148 matching lines @@
     decorate: function() {
       this.header_ = this.ownerDocument.createElement('div');
       this.list_ = this.ownerDocument.createElement('list');
 
       this.appendChild(this.header_);
       this.appendChild(this.list_);
 
       TableList.decorate(this.list_);
       this.list_.selectionModel = new ListSelectionModel(this);
       this.list_.table = this;
+      this.list_.addEventListener('scroll', this.handleScroll_.bind(this));
 
       TableHeader.decorate(this.header_);
       this.header_.table = this;
 
       this.classList.add('table');
-      this.ownerDocument.defaultView.addEventListener(
-          'resize', this.header_.updateWidth.bind(this.header_));
 
       this.boundResize_ = this.resize.bind(this);
       this.boundHandleSorted_ = this.handleSorted_.bind(this);
       this.boundHandleChangeList_ = this.handleChangeList_.bind(this);
 
       // The contained list should be focusable, not the table itself.
       if (this.hasAttribute('tabindex')) {
         this.list_.setAttribute('tabindex', this.getAttribute('tabindex'));
         this.removeAttribute('tabindex');
       }
@@ skipping 60 matching lines @@
      * This handles data model 'change' and 'splice' events.
      * Since they may change the visibility of scrollbar, table may need to
      * re-calculation the width of column headers.
      * @param {Event} e The 'change' or 'splice' event.
      */
     handleChangeList_: function(e) {
       webkitRequestAnimationFrame(this.header_.updateWidth.bind(this.header_));
     },
 
     /**
+     * This handles list 'scroll' events. Scrolls the header accordingly.
+     * @param {Event} e Scroll event.
+     */
+    handleScroll_: function(e) {
+      this.header_.style.marginLeft = (-this.list_.scrollLeft) + 'px';

[arv (Not doing code reviews), 2012/12/03 15:53:48]

useless parentheses

[SeRya, 2012/12/03 16:59:36]

Done.

+    },
+
+    /**
      * Sort data by the given column.
      * @param {number} index The index of the column to sort by.
      */
     sort: function(i) {
       var cm = this.columnModel_;
       var sortStatus = this.list_.dataModel.sortStatus;
       if (sortStatus.field == cm.getId(i)) {
         var sortDirection = sortStatus.direction == 'desc' ? 'asc' : 'desc';
         this.list_.dataModel.sort(sortStatus.field, sortDirection);
       } else {
@@ skipping 40 matching lines @@
         }
       });
     },
 
     /**
      * Adjust column width to fit its content.
      * @param {number} index Index of the column to adjust width.
      */
     fitColumn: function(index) {
       var list = this.list_;
-      var listWidth = list.clientWidth;
       var listHeight = list.clientHeight;
-      if (listWidth == 0)
-        return;  // Ensure won't be division by 0.
 
       var cm = this.columnModel_;
       var dm = this.dataModel;
       var columnId = cm.getId(index);
       var doc = this.ownerDocument;
       var render = cm.getRenderFunction(index);
       var table = this;
       var MAXIMUM_ROWS_TO_MEASURE = 1000;
 
       // Create a temporaty list item, put all cells into it and measure its
@@ skipping 15 matching lines @@
         for (var i = firstIndex; i < lastIndex; i++) {
           var item = dm.item(i);
           var div = doc.createElement('div');
           div.className = 'table-row-cell';
           div.appendChild(render(item, columnId, table));
           container.appendChild(div);
         }
         list.appendChild(container);
         var width = parseFloat(getComputedStyle(container).width);
         list.removeChild(container);
-        cm.setWidth(index, width * 100 / listWidth);
+        cm.setWidth(index, width);
       });
+    },
+
+    normalizeColumns: function() {
+      this.columnModel.normalizeWidths(this.clientWidth);
     }
   };
 
   /**
    * Whether the table or one of its descendents has focus. This is necessary
    * because table contents can contain controls that can be focused, and for
    * some purposes (e.g., styling), the table can still be conceptually focused
    * at that point even though it doesn't actually have the page focus.
    */
   cr.defineProperty(Table, 'hasElementFocus', cr.PropertyKind.BOOL_ATTR);
 
   return {
     Table: Table
   };
 });