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

ui/webui/resources/js/cr/ui/table/table_column.js

Index: ui/webui/resources/js/cr/ui/table/table_column.js
diff --git a/ui/webui/resources/js/cr/ui/table/table_column.js b/ui/webui/resources/js/cr/ui/table/table_column.js
index 193ca8675a35baa82bf6079fc69d06d20b7a700c..04816fb4d2fa8268a16b5489b199c07f2a6ae843 100644
--- a/ui/webui/resources/js/cr/ui/table/table_column.js
+++ b/ui/webui/resources/js/cr/ui/table/table_column.js
@@ -22,7 +22,9 @@ cr.define('cr.ui.table', function() {
     this.id_ = id;
     this.name_ = name;
     this.width_ = width;
+    this.hiddenWidth_ = width;
     this.endAlign_ = !!opt_endAlign;
+    this.visible_ = true;
   }
 
   TableColumn.prototype = {
@@ -40,6 +42,10 @@ cr.define('cr.ui.table', function() {
       tableColumn.renderFunction = this.renderFunction_;
       tableColumn.headerRenderFunction = this.headerRenderFunction_;
       tableColumn.defaultOrder = this.defaultOrder_;
+
+      tableColumn.hiddenWidth_ = this.hiddenWidth_;
+      tableColumn.visible_  = this.visible_;
+
       return tableColumn;
     },
 
@@ -54,6 +60,9 @@ cr.define('cr.ui.table', function() {
       var div = /** @type {HTMLElement} */
           (table.ownerDocument.createElement('div'));
       div.textContent = dataItem[columnId];
+      if (!this.visible) {
+        div.style.display = 'none';

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

div.hidden = !this.visible;

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

Done.

+      }
       return div;
     },
 
@@ -65,6 +74,21 @@ cr.define('cr.ui.table', function() {
     headerRenderFunction_: function(table) {
       return table.ownerDocument.createTextNode(this.name);
     },
+
+    /**
+     * @param {boolean} visible The new value of the visibility flag.
+     * @private
+     */
+    onVisibilityChange_: function(visible) {
+      if (visible) {
+        // Restore old column width.
+        this.width = this.hiddenWidth_;
+      } else {
+        // Save off the width, then zero out.
+        this.hiddenWidth_ = this.width_;
+        this.width = 0;
+      }
+    },
   };
 
   /**
@@ -86,6 +110,22 @@ cr.define('cr.ui.table', function() {
   cr.defineProperty(TableColumn, 'width');

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

can't you just create a getter for this and return 0 if hidden?

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

I didn't realize you could define custom getters and still use
cr.defineProperty.  Much cleaner now.  Thanks!

 
   /**
+   * The column width when hidden.
+   * @type {number}
+   */
+  cr.defineProperty(TableColumn, 'hiddenWidth');
+
+  /**
+   * The column visibility.
+   * @type {boolean}
+   */
+  cr.defineProperty(
+      TableColumn,
+      'visible',
+      cr.PropertyKind.JS,
+      TableColumn.prototype.onVisibilityChange_);
+
+  /**
    * True if the column is aligned to end.
    * @type {boolean}
    */