Adding a visibility property to cr.ui.table.TableColumn.

ui/webui/resources/js/cr/ui/table/table_column_model.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 is a table column model
  */
 cr.define('cr.ui.table', function() {
   /** @const */ var EventTarget = cr.EventTarget;
 
@@ skipping 79 matching lines @@
 
     /**
      * Sets width of column at the given index.
      * @param {number} index The index of the column.
      * @param {number} width Column width.
      */
     setWidth: function(index, width) {
       if (index < 0 || index >= this.columns_.size - 1)
         return;
 
+      var column = this.columns_[index];
+      var widthProperty = column.visible ? 'width' : 'hiddenWidth';
+
       width = Math.max(width, MIMIMAL_WIDTH);
-      if (width == this.columns_[index].width)
+      if (width == column[widthProperty])
         return;
 
-      this.columns_[index].width = width;
-      cr.dispatchSimpleEvent(this, 'resize');
+      column[widthProperty] = width;
+
+      // Dispatch an event if a visible column was resized.
+      if (column.visible)
+        cr.dispatchSimpleEvent(this, 'resize');

[Dan Beam, 2015/03/17 23:04:13]

wouldn't we dispatch this even if a column is hidden?

[Ben Kwa, 2015/03/18 02:48:11]

If the column is hidden, resizing it does nothing in the UI, so there's no point
dispatching this event.

     },
 
     /**
      * Returns render function for the column at the given index.
      * @param {number} index The index of the column.
      * @return {function(*, string, cr.ui.Table): HTMLElement} Render function.
      */
     getRenderFunction: function(index) {
       return this.columns_[index].renderFunction;
     },
@@ skipping 60 matching lines @@
      * @param {string} id The id to find.
      * @return {number} The index of column with given id or -1 if not found.
      */
     indexOf: function(id) {
       for (var i = 0; i < this.size; i++) {
         if (this.getId(i) == id)
           return i;
       }
       return -1;
     },
+
+    /**
+     * Show/hide a column.
+     * @param {number} index The column index.
+     * @param {boolean} visible The column visibility.
+     */
+    setVisible: function(index, visible) {
+      if (index < 0 || index > this.columns_.size - 1)

[Dan Beam, 2015/03/17 23:04:13]

should this be an assert?

[Ben Kwa, 2015/03/18 02:48:11]

It could be.  I was following the pattern in the rest of the class.

+        return;
+
+      var column = this.columns_[index];
+      if (column.visible === visible) {

[Dan Beam, 2015/03/17 23:04:13]

prefer ==

[Dan Beam, 2015/03/17 23:04:13]

no curlies

[Ben Kwa, 2015/03/18 16:13:50]

Done.

[Ben Kwa, 2015/03/18 16:13:50]

Done.

+        return;
+      }
+
+      // Changing column visibility alters the width.  Save the total width out
+      // first, then change the column visibility, then relayout the table.
+      var contentWidth = this.totalWidth;
+      column.visible = visible;
+      this.normalizeWidths(contentWidth);
+    },
+
+    /**
+     * Returns a column's visibility.
+     * @param {number} index The column index.
+     * @return {boolean} Whether the column is visible.
+     */
+    isVisible: function(index) {

[Dan Beam, 2015/03/17 23:04:13]

assert(this.columns_[index]);

[Ben Kwa, 2015/03/18 02:48:11]

This was me going with convention again - the other getters in this class just
dereference the columns_ array.

+      return this.columns_[index].visible;
+    }
   };
 
   return {
     TableColumnModel: TableColumnModel
   };
 });