[Files.app] Split the JavaScript files into subdirectories: common, background, and foreground

chrome/browser/resources/file_manager/js/file_table.js

Index: chrome/browser/resources/file_manager/js/file_table.js
diff --git a/chrome/browser/resources/file_manager/js/file_table.js b/chrome/browser/resources/file_manager/js/file_table.js
deleted file mode 100644
index 2c9d741eafa6c2d459bb930f011d3e12b0f134ec..0000000000000000000000000000000000000000
--- a/chrome/browser/resources/file_manager/js/file_table.js
+++ /dev/null
@@ -1,1036 +0,0 @@
-// 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.
-
-'use strict';
-
-/**
- * Namespace for utility functions.
- */
-var filelist = {};
-
-/**
- * Custom column model for advanced auto-resizing.
- *
- * @param {Array.<cr.ui.table.TableColumn>} tableColumns Table columns.
- * @extends {cr.ui.table.TableColumnModel}
- * @constructor
- */
-function FileTableColumnModel(tableColumns) {
-  cr.ui.table.TableColumnModel.call(this, tableColumns);
-}
-
-/**
- * The columns whose index is less than the constant are resizable.
- * @const
- * @type {number}
- * @private
- */
-FileTableColumnModel.RESIZABLE_LENGTH_ = 4;
-
-/**
- * Inherits from cr.ui.TableColumnModel.
- */
-FileTableColumnModel.prototype.__proto__ =
-    cr.ui.table.TableColumnModel.prototype;
-
-/**
- * Minimum width of column.
- * @const
- * @type {number}
- * @private
- */
-FileTableColumnModel.MIN_WIDTH_ = 10;
-
-/**
- * Sets column width so that the column dividers move to the specified position.
- * This function also check the width of each column and keep the width larger
- * than MIN_WIDTH_.
- *
- * @private
- * @param {Array.<number>} newPos Positions of each column dividers.
- */
-FileTableColumnModel.prototype.applyColumnPositions_ = function(newPos) {
-  // Check the minimum width and adjust the positions.
-  for (var i = 0; i < newPos.length - 2; i++) {
-    if (newPos[i + 1] - newPos[i] < FileTableColumnModel.MIN_WIDTH_) {
-      newPos[i + 1] = newPos[i] + FileTableColumnModel.MIN_WIDTH_;
-    }
-  }
-  for (var i = newPos.length - 1; i >= 2; i--) {
-    if (newPos[i] - newPos[i - 1] < FileTableColumnModel.MIN_WIDTH_) {
-      newPos[i - 1] = newPos[i] - FileTableColumnModel.MIN_WIDTH_;
-    }
-  }
-  // Set the new width of columns
-  for (var i = 0; i < FileTableColumnModel.RESIZABLE_LENGTH_; i++) {
-    this.columns_[i].width = newPos[i + 1] - newPos[i];
-  }
-};
-
-/**
- * Normalizes widths to make their sum 100% if possible. Uses the proportional
- * approach with some additional constraints.
- *
- * @param {number} contentWidth Target width.
- * @override
- */
-FileTableColumnModel.prototype.normalizeWidths = function(contentWidth) {
-  var totalWidth = 0;
-  var fixedWidth = 0;
-  // Some columns have fixed width.
-  for (var i = 0; i < this.columns_.length; i++) {
-    if (i < FileTableColumnModel.RESIZABLE_LENGTH_)
-      totalWidth += this.columns_[i].width;
-    else
-      fixedWidth += this.columns_[i].width;
-  }
-  var newTotalWidth = Math.max(contentWidth - fixedWidth, 0);
-  var positions = [0];
-  var sum = 0;
-  for (var i = 0; i < FileTableColumnModel.RESIZABLE_LENGTH_; i++) {
-    var column = this.columns_[i];
-    sum += column.width;
-    // Faster alternative to Math.floor for non-negative numbers.
-    positions[i + 1] = ~~(newTotalWidth * sum / totalWidth);
-  }
-  this.applyColumnPositions_(positions);
-};
-
-/**
- * Handles to the start of column resizing by splitters.
- */
-FileTableColumnModel.prototype.handleSplitterDragStart = function() {
-  this.columnPos_ = [0];
-  for (var i = 0; i < this.columns_.length; i++) {
-    this.columnPos_[i + 1] = this.columns_[i].width + this.columnPos_[i];
-  }
-};
-
-/**
- * Handles to the end of column resizing by splitters.
- */
-FileTableColumnModel.prototype.handleSplitterDragEnd = function() {
-  this.columnPos_ = null;
-};
-
-/**
- * Sets the width of column with keeping the total width of table.
- * @param {number} columnIndex Index of column that is resized.
- * @param {number} columnWidth New width of the column.
- */
-FileTableColumnModel.prototype.setWidthAndKeepTotal = function(
-    columnIndex, columnWidth) {
-  // Skip to resize 'selection' column
-  if (columnIndex < 0 ||
-      columnIndex >= FileTableColumnModel.RESIZABLE_LENGTH_ ||
-      !this.columnPos_) {
-    return;
-  }
-
-  // Calculate new positions of column splitters.
-  var newPosStart =
-      this.columnPos_[columnIndex] + Math.max(columnWidth,
-                                              FileTableColumnModel.MIN_WIDTH_);
-  var newPos = [];
-  var posEnd = this.columnPos_[FileTableColumnModel.RESIZABLE_LENGTH_];
-  for (var i = 0; i < columnIndex + 1; i++) {
-    newPos[i] = this.columnPos_[i];
-  }
-  for (var i = columnIndex + 1;
-       i < FileTableColumnModel.RESIZABLE_LENGTH_;
-       i++) {
-    var posStart = this.columnPos_[columnIndex + 1];
-    newPos[i] = (posEnd - newPosStart) *
-                (this.columnPos_[i] - posStart) /
-                (posEnd - posStart) +
-                newPosStart;
-    // Faster alternative to Math.floor for non-negative numbers.
-    newPos[i] = ~~newPos[i];
-  }
-  newPos[columnIndex] = this.columnPos_[columnIndex];
-  newPos[FileTableColumnModel.RESIZABLE_LENGTH_] = posEnd;
-  this.applyColumnPositions_(newPos);
-
-  // Notifiy about resizing
-  cr.dispatchSimpleEvent(this, 'resize');
-};
-
-/**
- * Custom splitter that resizes column with retaining the sum of all the column
- * width.
- */
-var FileTableSplitter = cr.ui.define('div');
-
-/**
- * Inherits from cr.ui.TableSplitter.
- */
-FileTableSplitter.prototype.__proto__ = cr.ui.TableSplitter.prototype;
-
-/**
- * Handles the drag start event.
- */
-FileTableSplitter.prototype.handleSplitterDragStart = function() {
-  cr.ui.TableSplitter.prototype.handleSplitterDragStart.call(this);
-  this.table_.columnModel.handleSplitterDragStart();
-};
-
-/**
- * Handles the drag move event.
- * @param {number} deltaX Horizontal mouse move offset.
- */
-FileTableSplitter.prototype.handleSplitterDragMove = function(deltaX) {
-  this.table_.columnModel.setWidthAndKeepTotal(this.columnIndex,
-                                               this.columnWidth_ + deltaX,
-                                               true);
-};
-
-/**
- * Handles the drag end event.
- */
-FileTableSplitter.prototype.handleSplitterDragEnd = function() {
-  cr.ui.TableSplitter.prototype.handleSplitterDragEnd.call(this);
-  this.table_.columnModel.handleSplitterDragEnd();
-};
-
-/**
- * File list Table View.
- * @constructor
- */
-function FileTable() {
-  throw new Error('Designed to decorate elements');
-}
-
-/**
- * Inherits from cr.ui.Table.
- */
-FileTable.prototype.__proto__ = cr.ui.Table.prototype;
-
-/**
- * Decorates the element.
- * @param {HTMLElement} self Table to decorate.
- * @param {MetadataCache} metadataCache To retrieve metadata.
- * @param {boolean} fullPage True if it's full page File Manager,
- *                           False if a file open/save dialog.
- */
-FileTable.decorate = function(self, metadataCache, fullPage) {
-  cr.ui.Table.decorate(self);
-  self.__proto__ = FileTable.prototype;
-  self.metadataCache_ = metadataCache;
-  self.collator_ = Intl.Collator([], {numeric: true, sensitivity: 'base'});
-
-  var columns = [
-    new cr.ui.table.TableColumn('name', str('NAME_COLUMN_LABEL'),
-                                fullPage ? 386 : 324),
-    new cr.ui.table.TableColumn('size', str('SIZE_COLUMN_LABEL'),
-                                110, true),
-    new cr.ui.table.TableColumn('type', str('TYPE_COLUMN_LABEL'),
-                                fullPage ? 110 : 110),
-    new cr.ui.table.TableColumn('modificationTime',
-                                str('DATE_COLUMN_LABEL'),
-                                fullPage ? 150 : 210)
-  ];
-
-  columns[0].renderFunction = self.renderName_.bind(self);
-  columns[1].renderFunction = self.renderSize_.bind(self);
-  columns[1].defaultOrder = 'desc';
-  columns[2].renderFunction = self.renderType_.bind(self);
-  columns[3].renderFunction = self.renderDate_.bind(self);
-  columns[3].defaultOrder = 'desc';
-
-  var tableColumnModelClass;
-  tableColumnModelClass = FileTableColumnModel;
-  if (self.showCheckboxes) {
-    columns.push(new cr.ui.table.TableColumn('selection',
-                                             '',
-                                             50, true));
-    columns[4].renderFunction = self.renderSelection_.bind(self);
-    columns[4].headerRenderFunction =
-        self.renderSelectionColumnHeader_.bind(self);
-    columns[4].fixed = true;
-  }
-
-  var columnModel = Object.create(tableColumnModelClass.prototype, {
-    /**
-     * The number of columns.
-     * @type {number}
-     */
-    size: {
-      /**
-       * @this {FileTableColumnModel}
-       * @return {number} Number of columns.
-       */
-      get: function() {
-        return this.totalSize;
-      }
-    },
-
-    /**
-     * The number of columns.
-     * @type {number}
-     */
-    totalSize: {
-      /**
-       * @this {FileTableColumnModel}
-       * @return {number} Number of columns.
-       */
-      get: function() {
-        return columns.length;
-      }
-    },
-
-    /**
-     * Obtains a column by the specified horizontal position.
-     */
-    getHitColumn: {
-      /**
-       * @this {FileTableColumnModel}
-       * @param {number} x Horizontal position.
-       * @return {object} The object that contains column index, column width,
-       *     and hitPosition where the horizontal position is hit in the column.
-       */
-      value: function(x) {
-        for (var i = 0; x >= this.columns_[i].width; i++) {
-          x -= this.columns_[i].width;
-        }
-        if (i >= this.columns_.length)
-          return null;
-        return {index: i, hitPosition: x, width: this.columns_[i].width};
-      }
-    }
-  });
-
-  tableColumnModelClass.call(columnModel, columns);
-  self.columnModel = columnModel;
-  self.setDateTimeFormat(true);
-  self.setRenderFunction(self.renderTableRow_.bind(self,
-      self.getRenderFunction()));
-
-  self.scrollBar_ = MainPanelScrollBar();
-  self.scrollBar_.initialize(self, self.list);
-  // Keep focus on the file list when clicking on the header.
-  self.header.addEventListener('mousedown', function(e) {
-    self.list.focus();
-    e.preventDefault();
-  });
-
-  var handleSelectionChange = function() {
-    var selectAll = self.querySelector('#select-all-checkbox');
-    if (selectAll)
-      self.updateSelectAllCheckboxState_(selectAll);
-  };
-
-  self.relayoutAggregation_ =
-      new AsyncUtil.Aggregation(self.relayoutImmediately_.bind(self));
-
-  Object.defineProperty(self.list_, 'selectionModel', {
-    /**
-     * @this {cr.ui.List}
-     * @return {cr.ui.ListSelectionModel} The current selection model.
-     */
-    get: function() {
-      return this.selectionModel_;
-    },
-    /**
-     * @this {cr.ui.List}
-     */
-    set: function(value) {
-      var sm = this.selectionModel;
-      if (sm)
-        sm.removeEventListener('change', handleSelectionChange);
-
-      util.callInheritedSetter(this, 'selectionModel', value);
-      sm = value;
-
-      if (sm)
-        sm.addEventListener('change', handleSelectionChange);
-      handleSelectionChange();
-    }
-  });
-
-  // Override header#redraw to use FileTableSplitter.
-  self.header_.redraw = function() {
-    this.__proto__.redraw.call(this);
-    // Extend table splitters
-    var splitters = this.querySelectorAll('.table-header-splitter');
-    for (var i = 0; i < splitters.length; i++) {
-      if (splitters[i] instanceof FileTableSplitter)
-        continue;
-      FileTableSplitter.decorate(splitters[i]);
-    }
-  };
-
-  // Save the last selection. This is used by shouldStartDragSelection.
-  self.list.addEventListener('mousedown', function(e) {
-    this.lastSelection_ = this.selectionModel.selectedIndexes;
-  }.bind(self), true);
-  self.list.shouldStartDragSelection =
-      self.shouldStartDragSelection_.bind(self);
-
-  /**
-   * Obtains the index list of elements that are hit by the point or the
-   * rectangle.
-   *
-   * @param {number} x X coordinate value.
-   * @param {number} y Y coordinate value.
-   * @param {=number} opt_width Width of the coordinate.
-   * @param {=number} opt_height Height of the coordinate.
-   * @return {Array.<number>} Index list of hit elements.
-   */
-  self.list.getHitElements = function(x, y, opt_width, opt_height) {
-    var currentSelection = [];
-    var bottom = y + (opt_height || 0);
-    for (var i = 0; i < this.selectionModel_.length; i++) {
-      var itemMetrics = this.getHeightsForIndex_(i);
-      if (itemMetrics.top < bottom && itemMetrics.top + itemMetrics.height >= y)
-        currentSelection.push(i);
-    }
-    return currentSelection;
-  };
-};
-
-/**
- * Sets date and time format.
- * @param {boolean} use12hourClock True if 12 hours clock, False if 24 hours.
- */
-FileTable.prototype.setDateTimeFormat = function(use12hourClock) {
-  this.timeFormatter_ = Intl.DateTimeFormat(
-        [] /* default locale */,
-        {hour: 'numeric', minute: 'numeric',
-         hour12: use12hourClock});
-  this.dateFormatter_ = Intl.DateTimeFormat(
-        [] /* default locale */,
-        {year: 'numeric', month: 'short', day: 'numeric',
-         hour: 'numeric', minute: 'numeric',
-         hour12: use12hourClock});
-};
-
-/**
- * Obtains if the drag selection should be start or not by referring the mouse
- * event.
- * @param {MouseEvent} event Drag start event.
- * @return {boolean} True if the mouse is hit to the background of the list.
- * @private
- */
-FileTable.prototype.shouldStartDragSelection_ = function(event) {
-  // If the shift key is pressed, it should starts drag selection.
-  if (event.shiftKey)
-    return true;
-
-  // If the position values are negative, it points the out of list.
-  // It should start the drag selection.
-  var pos = DragSelector.getScrolledPosition(this.list, event);
-  if (!pos)
-    return false;
-  if (pos.x < 0 || pos.y < 0)
-    return true;
-
-  // If the item index is out of range, it should start the drag selection.
-  var itemHeight = this.list.measureItem().height;
-  // Faster alternative to Math.floor for non-negative numbers.
-  var itemIndex = ~~(pos.y / itemHeight);
-  if (itemIndex >= this.list.dataModel.length)
-    return true;
-
-  // If the pointed item is already selected, it should not start the drag
-  // selection.
-  if (this.lastSelection_.indexOf(itemIndex) != -1)
-    return false;
-
-  // If the horizontal value is not hit to column, it should start the drag
-  // selection.
-  var hitColumn = this.columnModel.getHitColumn(pos.x);
-  if (!hitColumn)
-    return true;
-
-  // Check if the point is on the column contents or not.
-  var item = this.list.getListItemByIndex(itemIndex);
-  switch (this.columnModel.columns_[hitColumn.index].id) {
-    case 'name':
-      var spanElement = item.querySelector('.filename-label span');
-      var spanRect = spanElement.getBoundingClientRect();
-      // The this.list.cachedBounds_ object is set by
-      // DragSelector.getScrolledPosition.
-      if (!this.list.cachedBounds)
-        return true;
-      var textRight =
-          spanRect.left - this.list.cachedBounds.left + spanRect.width;
-      return textRight <= hitColumn.hitPosition;
-    default:
-      return true;
-  }
-};
-
-/**
- * Update check and disable states of the 'Select all' checkbox.
- * @param {HTMLInputElement} checkbox The checkbox. If not passed, using
- *     the default one.
- * @private
- */
-FileTable.prototype.updateSelectAllCheckboxState_ = function(checkbox) {
-  // TODO(serya): introduce this.selectionModel.selectedCount.
-  checkbox.checked = this.dataModel.length > 0 &&
-      this.dataModel.length == this.selectionModel.selectedIndexes.length;
-  checkbox.disabled = this.dataModel.length == 0;
-};
-
-/**
- * Prepares the data model to be sorted by columns.
- * @param {cr.ui.ArrayDataModel} dataModel Data model to prepare.
- */
-FileTable.prototype.setupCompareFunctions = function(dataModel) {
-  dataModel.setCompareFunction('name',
-                               this.compareName_.bind(this));
-  dataModel.setCompareFunction('modificationTime',
-                               this.compareMtime_.bind(this));
-  dataModel.setCompareFunction('size',
-                               this.compareSize_.bind(this));
-  dataModel.setCompareFunction('type',
-                               this.compareType_.bind(this));
-};
-
-/**
- * Render the Name column of the detail table.
- *
- * Invoked by cr.ui.Table when a file needs to be rendered.
- *
- * @param {Entry} entry The Entry object to render.
- * @param {string} columnId The id of the column to be rendered.
- * @param {cr.ui.Table} table The table doing the rendering.
- * @return {HTMLDivElement} Created element.
- * @private
- */
-FileTable.prototype.renderName_ = function(entry, columnId, table) {
-  var label = this.ownerDocument.createElement('div');
-  label.appendChild(this.renderIconType_(entry, columnId, table));
-  label.entry = entry;
-  label.className = 'detail-name';
-  label.appendChild(filelist.renderFileNameLabel(this.ownerDocument, entry));
-  return label;
-};
-
-/**
- * Render the Selection column of the detail table.
- *
- * Invoked by cr.ui.Table when a file needs to be rendered.
- *
- * @param {Entry} entry The Entry object to render.
- * @param {string} columnId The id of the column to be rendered.
- * @param {cr.ui.Table} table The table doing the rendering.
- * @return {HTMLDivElement} Created element.
- * @private
- */
-FileTable.prototype.renderSelection_ = function(entry, columnId, table) {
-  var label = this.ownerDocument.createElement('div');
-  label.className = 'selection-label';
-  if (this.selectionModel.multiple) {
-    var checkBox = this.ownerDocument.createElement('input');
-    filelist.decorateSelectionCheckbox(checkBox, entry, this.list);
-    label.appendChild(checkBox);
-  }
-  return label;
-};
-
-/**
- * Render the Size column of the detail table.
- *
- * @param {Entry} entry The Entry object to render.
- * @param {string} columnId The id of the column to be rendered.
- * @param {cr.ui.Table} table The table doing the rendering.
- * @return {HTMLDivElement} Created element.
- * @private
- */
-FileTable.prototype.renderSize_ = function(entry, columnId, table) {
-  var div = this.ownerDocument.createElement('div');
-  div.className = 'size';
-  this.updateSize_(
-      div, entry, this.metadataCache_.getCached(entry, 'filesystem'));
-
-  return div;
-};
-
-/**
- * Sets up or updates the size cell.
- *
- * @param {HTMLDivElement} div The table cell.
- * @param {Entry} entry The corresponding entry.
- * @param {Object} filesystemProps Metadata.
- * @private
- */
-FileTable.prototype.updateSize_ = function(div, entry, filesystemProps) {
-  if (!filesystemProps) {
-    div.textContent = '...';
-  } else if (filesystemProps.size == -1) {
-    div.textContent = '--';
-  } else if (filesystemProps.size == 0 &&
-             FileType.isHosted(entry)) {
-    div.textContent = '--';
-  } else {
-    div.textContent = util.bytesToString(filesystemProps.size);
-  }
-};
-
-/**
- * Render the Type column of the detail table.
- *
- * @param {Entry} entry The Entry object to render.
- * @param {string} columnId The id of the column to be rendered.
- * @param {cr.ui.Table} table The table doing the rendering.
- * @return {HTMLDivElement} Created element.
- * @private
- */
-FileTable.prototype.renderType_ = function(entry, columnId, table) {
-  var div = this.ownerDocument.createElement('div');
-  div.className = 'type';
-  div.textContent = FileType.getTypeString(entry);
-  return div;
-};
-
-/**
- * Render the Date column of the detail table.
- *
- * @param {Entry} entry The Entry object to render.
- * @param {string} columnId The id of the column to be rendered.
- * @param {cr.ui.Table} table The table doing the rendering.
- * @return {HTMLDivElement} Created element.
- * @private
- */
-FileTable.prototype.renderDate_ = function(entry, columnId, table) {
-  var div = this.ownerDocument.createElement('div');
-  div.className = 'date';
-
-  this.updateDate_(div,
-      this.metadataCache_.getCached(entry, 'filesystem'));
-  return div;
-};
-
-/**
- * Sets up or updates the date cell.
- *
- * @param {HTMLDivElement} div The table cell.
- * @param {Object} filesystemProps Metadata.
- * @private
- */
-FileTable.prototype.updateDate_ = function(div, filesystemProps) {
-  if (!filesystemProps) {
-    div.textContent = '...';
-    return;
-  }
-
-  var modTime = filesystemProps.modificationTime;
-  var today = new Date();
-  today.setHours(0);
-  today.setMinutes(0);
-  today.setSeconds(0);
-  today.setMilliseconds(0);
-
-  /**
-   * Number of milliseconds in a day.
-   */
-  var MILLISECONDS_IN_DAY = 24 * 60 * 60 * 1000;
-
-  if (modTime >= today &&
-      modTime < today.getTime() + MILLISECONDS_IN_DAY) {
-    div.textContent = strf('TIME_TODAY', this.timeFormatter_.format(modTime));
-  } else if (modTime >= today - MILLISECONDS_IN_DAY && modTime < today) {
-    div.textContent = strf('TIME_YESTERDAY',
-                           this.timeFormatter_.format(modTime));
-  } else {
-    div.textContent =
-        this.dateFormatter_.format(filesystemProps.modificationTime);
-  }
-};
-
-/**
- * Updates the file metadata in the table item.
- *
- * @param {Element} item Table item.
- * @param {Entry} entry File entry.
- */
-FileTable.prototype.updateFileMetadata = function(item, entry) {
-  var props = this.metadataCache_.getCached(entry, 'filesystem');
-  this.updateDate_(item.querySelector('.date'), props);
-  this.updateSize_(item.querySelector('.size'), entry, props);
-};
-
-/**
- * Updates list items 'in place' on metadata change.
- * @param {string} type Type of metadata change.
- * @param {Object.<sting, Object>} propsMap Map from entry URLs to metadata
- *                                          properties.
- */
-FileTable.prototype.updateListItemsMetadata = function(type, propsMap) {
-  var forEachCell = function(selector, callback) {
-    var cells = this.querySelectorAll(selector);
-    for (var i = 0; i < cells.length; i++) {
-      var cell = cells[i];
-      var listItem = this.list_.getListItemAncestor(cell);
-      var entry = this.dataModel.item(listItem.listIndex);
-      if (entry) {
-        var props = propsMap[entry.toURL()];
-        if (props)
-          callback.call(this, cell, entry, props, listItem);
-      }
-    }
-  }.bind(this);
-  if (type == 'filesystem') {
-    forEachCell('.table-row-cell > .date', function(item, entry, props) {
-      this.updateDate_(item, props);
-    });
-    forEachCell('.table-row-cell > .size', function(item, entry, props) {
-      this.updateSize_(item, entry, props);
-    });
-  } else if (type == 'drive') {
-    // The cell name does not matter as the entire list item is needed.
-    forEachCell('.table-row-cell > .date',
-                function(item, entry, props, listItem) {
-      filelist.updateListItemDriveProps(listItem, props);
-    });
-  }
-};
-
-/**
- * Compare by mtime first, then by name.
- * @param {Entry} a First entry.
- * @param {Entry} b Second entry.
- * @return {number} Compare result.
- * @private
- */
-FileTable.prototype.compareName_ = function(a, b) {
-  return this.collator_.compare(a.name, b.name);
-};
-
-/**
- * Compare by mtime first, then by name.
- * @param {Entry} a First entry.
- * @param {Entry} b Second entry.
- * @return {number} Compare result.
- * @private
- */
-FileTable.prototype.compareMtime_ = function(a, b) {
-  var aCachedFilesystem = this.metadataCache_.getCached(a, 'filesystem');
-  var aTime = aCachedFilesystem ? aCachedFilesystem.modificationTime : 0;
-
-  var bCachedFilesystem = this.metadataCache_.getCached(b, 'filesystem');
-  var bTime = bCachedFilesystem ? bCachedFilesystem.modificationTime : 0;
-
-  if (aTime > bTime)
-    return 1;
-
-  if (aTime < bTime)
-    return -1;
-
-  return this.collator_.compare(a.name, b.name);
-};
-
-/**
- * Compare by size first, then by name.
- * @param {Entry} a First entry.
- * @param {Entry} b Second entry.
- * @return {number} Compare result.
- * @private
- */
-FileTable.prototype.compareSize_ = function(a, b) {
-  var aCachedFilesystem = this.metadataCache_.getCached(a, 'filesystem');
-  var aSize = aCachedFilesystem ? aCachedFilesystem.size : 0;
-
-  var bCachedFilesystem = this.metadataCache_.getCached(b, 'filesystem');
-  var bSize = bCachedFilesystem ? bCachedFilesystem.size : 0;
-
-  if (aSize != bSize) return aSize - bSize;
-    return this.collator_.compare(a.name, b.name);
-};
-
-/**
- * Compare by type first, then by subtype and then by name.
- * @param {Entry} a First entry.
- * @param {Entry} b Second entry.
- * @return {number} Compare result.
- * @private
- */
-FileTable.prototype.compareType_ = function(a, b) {
-  // Directories precede files.
-  if (a.isDirectory != b.isDirectory)
-    return Number(b.isDirectory) - Number(a.isDirectory);
-
-  var aType = FileType.getTypeString(a);
-  var bType = FileType.getTypeString(b);
-
-  var result = this.collator_.compare(aType, bType);
-  if (result != 0)
-    return result;
-
-  return this.collator_.compare(a.name, b.name);
-};
-
-/**
- * Renders table row.
- * @param {function(Entry, cr.ui.Table)} baseRenderFunction Base renderer.
- * @param {Entry} entry Corresponding entry.
- * @return {HTMLLiElement} Created element.
- * @private
- */
-FileTable.prototype.renderTableRow_ = function(baseRenderFunction, entry) {
-  var item = baseRenderFunction(entry, this);
-  filelist.decorateListItem(item, entry, this.metadataCache_);
-  return item;
-};
-
-/**
- * Renders the name column header.
- * @param {string} name Localized column name.
- * @return {HTMLLiElement} Created element.
- * @private
- */
-FileTable.prototype.renderNameColumnHeader_ = function(name) {
-  if (!this.selectionModel.multiple)
-    return this.ownerDocument.createTextNode(name);
-
-  var input = this.ownerDocument.createElement('input');
-  input.setAttribute('type', 'checkbox');
-  input.setAttribute('tabindex', -1);
-  input.id = 'select-all-checkbox';
-  input.className = 'common';
-
-  this.updateSelectAllCheckboxState_(input);
-
-  input.addEventListener('click', function(event) {
-    if (input.checked)
-      this.selectionModel.selectAll();
-    else
-      this.selectionModel.unselectAll();
-    event.stopPropagation();
-  }.bind(this));
-
-  var fragment = this.ownerDocument.createDocumentFragment();
-  fragment.appendChild(input);
-  fragment.appendChild(this.ownerDocument.createTextNode(name));
-  return fragment;
-};
-
-/**
- * Renders the selection column header.
- * @param {string} name Localized column name.
- * @return {HTMLLiElement} Created element.
- * @private
- */
-FileTable.prototype.renderSelectionColumnHeader_ = function(name) {
-  if (!this.selectionModel.multiple)
-    return this.ownerDocument.createTextNode('');
-
-  var input = this.ownerDocument.createElement('input');
-  input.setAttribute('type', 'checkbox');
-  input.setAttribute('tabindex', -1);
-  input.id = 'select-all-checkbox';
-  input.className = 'common';
-
-  this.updateSelectAllCheckboxState_(input);
-
-  input.addEventListener('click', function(event) {
-    if (input.checked)
-      this.selectionModel.selectAll();
-    else
-      this.selectionModel.unselectAll();
-    event.stopPropagation();
-  }.bind(this));
-
-  var fragment = this.ownerDocument.createDocumentFragment();
-  fragment.appendChild(input);
-  return fragment;
-};
-
-/**
- * Render the type column of the detail table.
- *
- * Invoked by cr.ui.Table when a file needs to be rendered.
- *
- * @param {Entry} entry The Entry object to render.
- * @param {string} columnId The id of the column to be rendered.
- * @param {cr.ui.Table} table The table doing the rendering.
- * @return {HTMLDivElement} Created element.
- * @private
- */
-FileTable.prototype.renderIconType_ = function(entry, columnId, table) {
-  var icon = this.ownerDocument.createElement('div');
-  icon.className = 'detail-icon';
-  icon.setAttribute('file-type-icon', FileType.getIcon(entry));
-  return icon;
-};
-
-/**
- * Sets the margin height for the transparent preview panel at the bottom.
- * @param {number} margin Margin to be set in px.
- */
-FileTable.prototype.setBottomMarginForPanel = function(margin) {
-  this.list_.style.paddingBottom = margin + 'px';
-  this.scrollBar_.setBottomMarginForPanel(margin);
-};
-
-/**
- * Redraws the UI. Skips multiple consecutive calls.
- */
-FileTable.prototype.relayout = function() {
-  this.relayoutAggregation_.run();
-};
-
-/**
- * Redraws the UI immediately.
- * @private
- */
-FileTable.prototype.relayoutImmediately_ = function() {
-  if (this.clientWidth > 0)
-    this.normalizeColumns();
-  this.redraw();
-  cr.dispatchSimpleEvent(this.list, 'relayout');
-};
-
-/**
- * Decorates (and wire up) a checkbox to be used in either a detail or a
- * thumbnail list item.
- * @param {HTMLInputElement} input Element to decorate.
- */
-filelist.decorateCheckbox = function(input) {
-  var stopEventPropagation = function(event) {
-    if (!event.shiftKey)
-      event.stopPropagation();
-  };
-  input.setAttribute('type', 'checkbox');
-  input.setAttribute('tabindex', -1);
-  input.classList.add('common');
-  input.addEventListener('mousedown', stopEventPropagation);
-  input.addEventListener('mouseup', stopEventPropagation);
-
-  input.addEventListener(
-      'click',
-      /**
-       * @this {HTMLInputElement}
-       */
-      function(event) {
-        // Revert default action and swallow the event
-        // if this is a multiple click or Shift is pressed.
-        if (event.detail > 1 || event.shiftKey) {
-          this.checked = !this.checked;
-          stopEventPropagation(event);
-        }
-      });
-};
-
-/**
- * Decorates selection checkbox.
- * @param {HTMLInputElement} input Element to decorate.
- * @param {Entry} entry Corresponding entry.
- * @param {cr.ui.List} list Owner list.
- */
-filelist.decorateSelectionCheckbox = function(input, entry, list) {
-  filelist.decorateCheckbox(input);
-  input.classList.add('file-checkbox');
-  input.addEventListener('click', function(e) {
-    var sm = list.selectionModel;
-    var listIndex = list.getListItemAncestor(this).listIndex;
-    sm.setIndexSelected(listIndex, this.checked);
-    sm.leadIndex = listIndex;
-    if (sm.anchorIndex == -1)
-      sm.anchorIndex = listIndex;
-
-  });
-  // Since we do not want to open the item when tap on checkbox, we need to
-  // stop propagation of TAP event dispatched by checkbox ideally. But all
-  // touch events from touch_handler are dispatched to the list control. So we
-  // have to stop propagation of native touchstart event to prevent list
-  // control from generating TAP event here. The synthetic click event will
-  // select the touched checkbox/item.
-  input.addEventListener('touchstart',
-                         function(e) { e.stopPropagation() });
-
-  var index = list.dataModel.indexOf(entry);
-  // Our DOM nodes get discarded as soon as we're scrolled out of view,
-  // so we have to make sure the check state is correct when we're brought
-  // back to life.
-  input.checked = list.selectionModel.getIndexSelected(index);
-};
-
-/**
- * Common item decoration for table's and grid's items.
- * @param {ListItem} li List item.
- * @param {Entry} entry The entry.
- * @param {MetadataCache} metadataCache Cache to retrieve metadada.
- */
-filelist.decorateListItem = function(li, entry, metadataCache) {
-  li.classList.add(entry.isDirectory ? 'directory' : 'file');
-  if (FileType.isOnDrive(entry)) {
-    // The metadata may not yet be ready. In that case, the list item will be
-    // updated when the metadata is ready via updateListItemsMetadata.
-    var driveProps = metadataCache.getCached(entry, 'drive');
-    if (driveProps)
-      filelist.updateListItemDriveProps(li, driveProps);
-  }
-
-  // Overriding the default role 'list' to 'listbox' for better
-  // accessibility on ChromeOS.
-  li.setAttribute('role', 'option');
-
-  Object.defineProperty(li, 'selected', {
-    /**
-     * @this {ListItem}
-     * @return {boolean} True if the list item is selected.
-     */
-    get: function() {
-      return this.hasAttribute('selected');
-    },
-
-    /**
-     * @this {ListItem}
-     */
-    set: function(v) {
-      if (v)
-        this.setAttribute('selected');
-      else
-        this.removeAttribute('selected');
-      var checkBox = this.querySelector('input.file-checkbox');
-      if (checkBox)
-        checkBox.checked = !!v;
-    }
-  });
-};
-
-/**
- * Render filename label for grid and list view.
- * @param {HTMLDocument} doc Owner document.
- * @param {Entry} entry The Entry object to render.
- * @return {HTMLDivElement} The label.
- */
-filelist.renderFileNameLabel = function(doc, entry) {
-  // Filename need to be in a '.filename-label' container for correct
-  // work of inplace renaming.
-  var box = doc.createElement('div');
-  box.className = 'filename-label';
-  var fileName = doc.createElement('span');
-  fileName.textContent = entry.name;
-  box.appendChild(fileName);
-
-  return box;
-};
-
-/**
- * Updates grid item or table row for the driveProps.
- * @param {cr.ui.ListItem} li List item.
- * @param {Object} driveProps Metadata.
- */
-filelist.updateListItemDriveProps = function(li, driveProps) {
-  if (li.classList.contains('file')) {
-    if (driveProps.availableOffline)
-      li.classList.remove('dim-offline');
-    else
-      li.classList.add('dim-offline');
-    // TODO(mtomasz): Consider adding some vidual indication for files which
-    // are not cached on LTE. Currently we show them as normal files.
-    // crbug.com/246611.
-  }
-
-  if (driveProps.customIconUrl) {
-    var iconDiv = li.querySelector('.detail-icon');
-    if (!iconDiv)
-      return;
-    iconDiv.style.backgroundImage = 'url(' + driveProps.customIconUrl + ')';
-  }
-};