Use actual client width of list excluding scroll bar for adjusting column widths.

ui/webui/resources/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 174 matching lines @@
       }
 
       this.addEventListener('focus', this.handleElementFocus_, true);
       this.addEventListener('blur', this.handleElementBlur_, true);
     },
 
     /**
      * Redraws the table.
      */
     redraw: function() {
+      var widthBeforeUpdate = this.list_.clientWidth;
       this.list_.redraw();
+      // When resizing the window, vertical scrollbar might appear/disappear
+      // based on the balance between the view size and # of items. This logic
+      // is placed here instead of resize() because clientWidth is updated
+      // after drawing.
+      if (this.list_.clientWidth != widthBeforeUpdate) {
+        this.normalizeColumns();
+        this.list_.redraw();
+      }
       this.header_.redraw();
     },
 
     startBatchUpdates: function() {
       this.list_.startBatchUpdates();
       this.header_.startBatchUpdates();
     },
 
     endBatchUpdates: function() {
+      var widthBeforeUpdate = this.list_.clientWidth;
       this.list_.endBatchUpdates();
+      // Update of the list content may change the client width of the list
+      // because vertical scrollbar might appear/disappear depending on the
+      // number of items.
+      if (this.list_.clientWidth != widthBeforeUpdate) {
+        this.normalizeColumns();
+        this.list_.redraw();
+      }
       this.header_.endBatchUpdates();
     },
 
     /**
      * Resize the table columns.
      */
     resize: function() {
       // We resize columns only instead of full redraw.
       this.list_.resize();
       this.header_.resize();
@@ skipping 138 matching lines @@
           container.appendChild(div);
         }
         list.appendChild(container);
         var width = parseFloat(window.getComputedStyle(container).width);
         list.removeChild(container);
         cm.setWidth(index, width);
       });
     },
 
     normalizeColumns: function() {
-      this.columnModel.normalizeWidths(this.clientWidth);
+      // list_.clientWidth must be used here instead of this.clientWidth,
+      // because it can be narrower by the thickness of the vertical scrollbar.
+      this.columnModel.normalizeWidths(this.list_.clientWidth);

[yamaguchi, 2017/03/14 09:07:30]

cr.ui.table.TableColumnModel.normalizeWidths only changes the first column.
A good point with it is that it doesn't cause column size drift even when
repeatedly flipping the scroll bar on/off.
Downside of it is that the it shrinks the first column which shows the file
names (relatively important information) in case of the Files app.

Another option would be to resize all columns keeping the ratio.

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