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(

[arv (Not doing code reviews), 2012/11/30 19:05:52]

Why is this removed? If the table is using a size relative to the window size it
needs to be updated.

[SeRya, 2012/12/01 20:14:37]

A moved it to Task Manager. File manager has already have this logic. Why I
think it's a wrong place to handle window resize:
1. List only need to be resized if its size is relative to window size.
2. Not only window resizing could cause resiling list. In case of Task Manager
is is the only reason but in Fine Manager there are a lot of other reasons:
dragging vertical splitter, showing/hidding the bottom panel and so on.

So this code is not competent enough to make decision when list must be updated.
Handling it here partially blures responsibility.

-          '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';
+    },
+
+    /**
      * 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
   };
 });