FileManager: Add thumbnail view.

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

 // Copyright (c) 2011 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.
 
 /**
  * FileManager constructor.
  *
  * FileManager objects encapsulate the functionality of the file selector
  * dialogs, as well as the full screen file manager application (though the
  * latter is not yet implemented).
@@ skipping 12 matching lines @@
  *       end with a trailing slash if it represents a directory.
  */
 function FileManager(dialogDom, rootEntries, params) {
   console.log('Init FileManager: ' + dialogDom);
 
   this.dialogDom_ = dialogDom;
   this.rootEntries_ = rootEntries;
   this.filesystem_ = rootEntries[0].filesystem;
   this.params_ = params || {};
 
+  this.listType_ = null;
+
   this.document_ = dialogDom.ownerDocument;
   this.dialogType_ =
     this.params_.type || FileManager.DialogType.FULL_PAGE;
 
   this.defaultPath_ = this.params_.defaultPath || '/';
 
   // DirectoryEntry representing the current directory of the dialog.
   this.currentDirEntry_ = null;
 
   this.addEventListener('directory-changed',
                         this.onDirectoryChanged_.bind(this));
   this.addEventListener('selection-summarized',
                         this.onSelectionSummarized_.bind(this));
 
   this.initDom_();
   this.initDialogType_();
 
   this.onDetailSelectionChanged_();
 
   chrome.fileBrowserPrivate.onDiskChanged.addListener(
       this.onDiskChanged_.bind(this));
 
-  this.table.querySelector('.list').focus();
+  // TODO(rginda) Add a focus() method to the various list classes to take care
+  // of this.
+  // this.currentList_.list_.focus();
 }
 
 FileManager.prototype = {
   __proto__: cr.EventTarget.prototype
 };
 
 // Anonymous "namespace".
 (function() {
 
   // Private variables and helper functions.
@@ skipping 73 matching lines @@
   }
 
   /**
    * Get the icon type for a given Entry.
    *
    * @param {Entry} entry An Entry subclass (FileEntry or DirectoryEntry).
    * @return {string} One of the keys from FileManager.iconTypes, or
    *     'unknown'.
    */
   function getIconType(entry) {
-    if (entry.isDirectory)
-      return 'folder';
+    if (entry.cachedIconType_)
+      return entry.cachedIconType_;
 
-    for (var name in iconTypes) {
-      var value = iconTypes[name];
+    var rv = 'unknown';
 
-      if (value instanceof RegExp) {
-        if (value.test(entry.name))
-          return name;
-      } else if (typeof value == 'function') {
-        try {
-          if (value(entry))
-            return name;
-        } catch (ex) {
-          console.error('Caught exception while evaluating iconType: ' +
-                        name, ex);
+    if (entry.isDirectory) {
+      rv = 'folder';
+    } else {
+      for (var name in iconTypes) {
+        var value = iconTypes[name];
+
+        if (value instanceof RegExp) {
+          if (value.test(entry.name))  {
+            rv = name;
+            break;
+          }
+        } else if (typeof value == 'function') {
+          try {
+            if (value(entry)) {
+              rv = name;
+              break;
+            }
+          } catch (ex) {
+            console.error('Caught exception while evaluating iconType: ' +
+                          name, ex);
+          }
+        } else {
+          console.log('Unexpected value in iconTypes[' + name + ']: ' + value);
         }
-      } else {
-        console.log('Unexpected value in iconTypes[' + name + ']: ' + value);
       }
     }
 
-    return 'unknown';
+    entry.cachedIconType_ = rv;
+    return rv;
   }
 
   /**
    * Call an asynchronous method on dirEntry, batching multiple callers.
    *
    * This batches multiple callers into a single invocation, calling all
    * interested parties back when the async call completes.
    *
    * The Entry method to be invoked should take two callbacks as parameters
    * (one for success and one for failure), and it should invoke those
@@ skipping 139 matching lines @@
    *
    * The successCallback is always invoked synchronously, since this does not
    * actually require an async call.  You should not depend on this, as it may
    * change if we were to start reading magic numbers (for example).
    *
    * @param {Entry} entry An HTML5 Entry object.
    * @param {function(Entry)} successCallback The function to invoke once the
    *     icon type is known.
    */
   function cacheEntryIconType(entry, successCallback) {
-    entry.cachedIconType_ = getIconType(entry);
+    getIconType(entry);
     if (successCallback)
       setTimeout(function() { successCallback(entry) }, 0);
   }
 
   // Public statics.
 
   /**
    * List of dialog types.
    *
    * Keep this in sync with FileManagerDialog::GetDialogTypeAsString, except
    * FULL_PAGE which is specific to this code.
    *
    * @enum {string}
    */
   FileManager.DialogType = {
     SELECT_FOLDER: 'folder',
     SELECT_SAVEAS_FILE: 'saveas-file',
     SELECT_OPEN_FILE: 'open-file',
     SELECT_OPEN_MULTI_FILE: 'open-multi-file',
     FULL_PAGE: 'full-page'
   };
 
+  FileManager.ListType = {
+    DETAIL: 'detail',
+    THUMBNAIL: 'thumb'
+  };
+
   /**
    * Load translated strings.
    */
   FileManager.initStrings = function(callback) {
     chrome.fileBrowserPrivate.getStrings(function(strings) {
       localStrings = new LocalStrings(strings);
       cr.initLocale(strings);
 
       if (callback)
         callback();
@@ skipping 33 matching lines @@
     var ary = this.dialogDom_.querySelectorAll('[visibleif]');
     for (var i = 0; i < ary.length; i++) {
       var expr = ary[i].getAttribute('visibleif');
       if (!eval(expr))
         ary[i].style.display = 'none';
     }
 
     // Populate the static localized strings.
     i18nTemplate.process(this.document_, localStrings.templateData);
 
-    // Set up the detail table.
-    var dataModel = new cr.ui.table.TableDataModel([]);
-    dataModel.sort('name');
-    dataModel.addEventListener('sorted',
-                               this.onDataModelSorted_.bind(this));
-    dataModel.prepareSort = this.prepareSort_.bind(this);
+    this.dataModel_ = new cr.ui.table.TableDataModel([]);
+    this.dataModel_.sort('name');
+    this.dataModel_.addEventListener('sorted',
+                                this.onDataModelSorted_.bind(this));
+    this.dataModel_.prepareSort = this.prepareSort_.bind(this);
 
+    this.initTable_();
+    this.initGrid_();
+
+    this.setListType(FileManager.ListType.DETAIL);
+
+    this.onResize_();
+    this.dialogDom_.style.opacity = '1';
+  };
+
+
+  FileManager.prototype.setListType = function(type) {
+    console.log('set list: ' + type);
+
+    if (type && type == this.listType_) {
+      console.log('no change: ' + type);
+      return;
+    }
+
+    if (type == FileManager.ListType.DETAIL) {
+      this.table_.style.display = '';
+      this.grid_.style.display = 'none';
+      this.currentList_ = this.table_;
+      this.dialogDom_.querySelector('button.detail-view').disabled = true;
+      this.dialogDom_.querySelector('button.thumbnail-view').disabled = false;
+    } else if (type == FileManager.ListType.THUMBNAIL) {
+      this.grid_.style.display = '';
+      this.table_.style.display = 'none';
+      this.currentList_ = this.grid_;
+      this.dialogDom_.querySelector('button.thumbnail-view').disabled = true;
+      this.dialogDom_.querySelector('button.detail-view').disabled = false;
+    } else {
+      throw new Error('Unknown list type: ' + type);
+    }
+
+    this.listType_ = type;
+    this.onResize_();
+    this.currentList_.redraw();
+
+    console.log('type now: ' + this.listType_);
+  };
+
+  /**
+   * Initialize the file thumbnail grid.
+   */
+  FileManager.prototype.initGrid_ = function() {
+    this.grid_ = this.dialogDom_.querySelector('.thumbnail-grid');
+    cr.ui.Grid.decorate(this.grid_);
+    this.grid_.dataModel = this.dataModel_;
+
+    var self = this;
+    this.grid_.itemConstructor = function(entry) {
+      return self.renderThumbnail_(entry);
+    };
+
+    if (this.dialogType_ != FileManager.DialogType.SELECT_OPEN_MULTI_FILE) {
+      this.grid_.selectionModel = new cr.ui.ListSingleSelectionModel();
+    }
+
+    this.grid_.addEventListener(
+        'dblclick', this.onDetailDoubleClick_.bind(this));
+    this.grid_.selectionModel.addEventListener(
+        'change', this.onDetailSelectionChanged_.bind(this));
+  };
+
+  /**
+   * Initialize the file list table.
+   */
+  FileManager.prototype.initTable_ = function() {
     var columns = [
         new cr.ui.table.TableColumn('cachedIconType_', '', 5.4),
         new cr.ui.table.TableColumn('name', str('NAME_COLUMN_LABEL'), 64),
         new cr.ui.table.TableColumn('cachedSize_',
                                     str('SIZE_COLUMN_LABEL'), 15.5),
         new cr.ui.table.TableColumn('cachedMtime_',
                                     str('DATE_COLUMN_LABEL'), 21)
     ];
 
     columns[0].renderFunction = this.renderIconType_.bind(this);
     columns[1].renderFunction = this.renderName_.bind(this);
     columns[2].renderFunction = this.renderSize_.bind(this);
     columns[3].renderFunction = this.renderDate_.bind(this);
 
-    this.table = this.dialogDom_.querySelector('.detail-table');
-    cr.ui.Table.decorate(this.table);
+    this.table_ = this.dialogDom_.querySelector('.detail-table');
+    cr.ui.Table.decorate(this.table_);
 
-    this.table.dataModel = dataModel;
-    this.table.columnModel = new cr.ui.table.TableColumnModel(columns);
+    this.table_.dataModel = this.dataModel_;
+    this.table_.columnModel = new cr.ui.table.TableColumnModel(columns);
 
     if (this.dialogType_ == FileManager.DialogType.SELECT_OPEN_FILE ||
         this.dialogType_ == FileManager.DialogType.SELECT_OPEN_FOLDER ||
         this.dialogType_ == FileManager.DialogType.SELECT_SAVEAS_FILE) {
-      this.table.selectionModel = new cr.ui.table.TableSingleSelectionModel();
+      this.table_.selectionModel = new cr.ui.table.TableSingleSelectionModel();
     }
 
-    this.table.addEventListener(
+    this.table_.addEventListener(
         'dblclick', this.onDetailDoubleClick_.bind(this));
-    this.table.selectionModel.addEventListener(
+    this.table_.selectionModel.addEventListener(
         'change', this.onDetailSelectionChanged_.bind(this));
-
-    this.onResize_();
-    this.dialogDom_.style.opacity = '1';
   };
 
   FileManager.prototype.onResize_ = function() {
-    // TODO(rginda): Remove this hack when cr.ui.List supports resizing.
-    this.table.list_.style.height =
-      (this.table.clientHeight - this.table.header_.clientHeight) + 'px';
-    this.table.redraw();
+    console.log('onResize');
+
+    this.table_.style.height = this.grid_.style.height =
+      this.grid_.parentNode.clientHeight + 'px';
+    this.table_.style.width = this.grid_.style.width =
+      this.grid_.parentNode.clientWidth + 'px';
+
+    this.table_.list_.style.width = this.table_.parentNode.clientWidth + 'px';
+    this.table_.list_.style.height = (this.table_.clientHeight - 1 -
+                                      this.table_.header_.clientHeight) + 'px';
+
+    if (this.listType_ == FileManager.ListType.THUMBNAIL) {
+      var self = this;
+      setTimeout(function () { self.grid_.columns = 0 }, 100);
+    } else {
+      this.currentList_.redraw();
+    }
   };
 
   /**
    * Tweak the UI to become a particular kind of dialog, as determined by the
    * dialog type parameter passed to the constructor.
    */
   FileManager.prototype.initDialogType_ = function() {
     var defaultTitle;
     var okLabel = str('OPEN_LABEL');
 
@@ skipping 95 matching lines @@
     }
 
     function checkCount() {
       if (uncachedCount == 0) {
         // Callback via a setTimeout so the sync/async semantics don't change
         // based on whether or not the value is cached.
         setTimeout(callback, 0);
       }
     }
 
-    var dataModel = this.table.dataModel;
+    var dataModel = this.dataModel_;
     var uncachedCount = dataModel.length;
 
     for (var i = uncachedCount - 1; i >= 0 ; i--) {
       var entry = dataModel.item(i);
       if (field in entry) {
         uncachedCount--;
       } else {
         cacheFunction(entry, function() {
           uncachedCount--;
           checkCount();
         });
       }
     }
 
     checkCount();
   }
 
+  FileManager.prototype.renderThumbnail_ = function(entry) {
+    var li = this.document_.createElement('li');
+    li.className = 'thumbnail-item';
+
+    var img = this.document_.createElement('img');
+    this.setIconSrc(entry, img);
+    li.appendChild(img);
+
+    var div = this.document_.createElement('div');
+    div.textContent = entry.name;
+    li.appendChild(div);
+
+    cr.defineProperty(li, 'lead', cr.PropertyKind.BOOL_ATTR);
+    cr.defineProperty(li, 'selected', cr.PropertyKind.BOOL_ATTR);
+
+    return li;
+  }
+
   /**
    * 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.
    */
   FileManager.prototype.renderIconType_ = function(entry, columnId, table) {
@@ skipping 83 matching lines @@
   /**
    * Compute summary information about the current selection.
    *
    * This method dispatches the 'selection-summarized' event when it completes.
    * Depending on how many of the selected files already have known sizes, the
    * dispatch may happen immediately, or after a number of async calls complete.
    */
   FileManager.prototype.summarizeSelection_ = function() {
     var selection = this.selection = {
       entries: [],
-      uris: [],
+      urls: [],
       leadEntry: null,
       totalCount: 0,
       fileCount: 0,
       directoryCount: 0,
       bytes: 0,
       iconType: null,
     };
 
     this.previewSummary_.textContent = str('COMPUTING_SELECTION');
     this.taskButtons_.innerHTML = '';
 
-    var selectedIndexes = this.table.selectionModel.selectedIndexes;
+    var selectedIndexes = this.currentList_.selectionModel.selectedIndexes;
     if (!selectedIndexes.length) {
       cr.dispatchSimpleEvent(this, 'selection-summarized');
       return;
     }
 
     var fileCount = 0;
     var byteCount = 0;
     var pendingFiles = [];
 
     for (var i = 0; i < selectedIndexes.length; i++) {
-      var entry = this.table.dataModel.item(selectedIndexes[i]);
+      var entry = this.dataModel_.item(selectedIndexes[i]);
 
       selection.entries.push(entry);
-      selection.uris.push(entry.toURI());
+
+      selection.urls.push(entry.toURL());
 
       if (selection.iconType == null) {
         selection.iconType = getIconType(entry);
       } else if (selection.iconType != 'unknown') {
         var iconType = getIconType(entry);
         if (selection.iconType != iconType)
           selection.iconType = 'unknown';
       }
 
       selection.totalCount++;
 
       if (entry.isFile) {
         if (!('cachedSize_' in entry)) {
           // Any file that hasn't been rendered may be missing its cachedSize_
           // property.  For example, visit a large file list, and press ctrl-a
           // to select all.  In this case, we need to asynchronously get the
           // sizes for these files before telling the world the selection has
           // been summarized.  See the 'computeNextFile' logic below.
           pendingFiles.push(entry);
           continue;
         } else {
           selection.bytes += entry.cachedSize_;
         }
         selection.fileCount += 1;
       } else {
         selection.directoryCount += 1;
       }
     }
 
-    var leadIndex = this.table.selectionModel.leadIndex;
+    var leadIndex = this.currentList_.selectionModel.leadIndex;
     if (leadIndex > -1) {
-      selection.leadEntry = this.table.dataModel.item(leadIndex);
+      selection.leadEntry = this.dataModel_.item(leadIndex);
     } else {
       selection.leadEntry = selection.entries[0];
     }
 
     var self = this;
 
     function cacheNextFile(fileEntry) {
       if (fileEntry) {
         // We're careful to modify the 'selection', rather than 'self.selection'
         // here, just in case the selection has changed since this summarization
         // began.
         selection.bytes += fileEntry.cachedSize_;
       }
 
       if (pendingFiles.length) {
         cacheEntrySize(pendingFiles.pop(), cacheNextFile);
       } else {
         self.dispatchEvent(new cr.Event('selection-summarized'));
       }
     };
 
     if (this.dialogType_ == FileManager.DialogType.FULL_PAGE) {
-      chrome.fileBrowserPrivate.getFileTasks(selection.uris,
+      chrome.fileBrowserPrivate.getFileTasks(selection.urls,
                                              this.onTasksFound_.bind(this));
     }
 
     cacheNextFile();
   };
 
   FileManager.prototype.onTasksFound_ = function(tasksList) {
     for (var i = 0; i < tasksList.length; i++) {
       var task = tasksList[i];
 
       var button = this.document_.createElement('button');
       button.addEventListener('click', this.onTaskButtonClicked_.bind(this));
       button.className = 'task-button';
       button.task = task;
 
       var img = this.document_.createElement('img');
       img.src = task.iconUrl;
 
       button.appendChild(img);
       button.appendChild(this.document_.createTextNode(task.title));
 
       this.taskButtons_.appendChild(button);
     }
   };
 
   FileManager.prototype.onTaskButtonClicked_ = function(event) {
     chrome.fileBrowserPrivate.executeTask(event.srcElement.task.taskId,
-                                          this.selection.uris);
+                                          this.selection.urls);
   }
 
   /**
    * Update the breadcrumb display to reflect the current directory.
    */
   FileManager.prototype.updateBreadcrumbs_ = function() {
     var bc = this.dialogDom_.querySelector('.breadcrumbs');
     bc.innerHTML = '';
 
     var fullPath = this.currentDirEntry_.fullPath.replace(/\/$/, '');
@@ skipping 50 matching lines @@
       this.previewFilename_.textContent = '';
       return;
     }
 
     var previewName = this.selection.leadEntry.name;
     if (this.currentDirEntry_.name == '')
       previewName = this.getLabelForRootPath_(previewName);
 
     this.previewFilename_.textContent = previewName;
 
-    var entry = this.selection.leadEntry;
+    var iconType = getIconType(this.selection.leadEntry);
+    if (iconType == 'image') {
+      this.previewImage_.classList.add('transparent-background');
+      if (fileManager.selection.totalCount > 1)
+        this.previewImage_.classList.add('multiple-selected');
+    }
+
+    this.setIconSrc(this.selection.leadEntry, this.previewImage_);
+
+  };
+
+  FileManager.prototype.setIconSrc = function(entry, img, callback) {
     var iconType = getIconType(entry);
     if (iconType != 'image') {
       // Not an image, display a canned clip-art graphic.
-      this.previewImage_.src = previewArt[iconType];
+      img.src = previewArt[iconType];
     } else {
       // File is an image, fetch the thumbnail.
 
-      var fileManager = this;
-
-      batchAsyncCall(entry, 'file', function(file) {
-        var reader = new FileReader();
-
-        reader.onerror = util.ferr('Error reading preview: ' + entry.fullPath);
-        reader.onloadend = function(e) {
-          fileManager.previewImage_.src = this.result;
-          fileManager.previewImage_.classList.add('transparent-background');
-          if (fileManager.selection.totalCount > 1)
-            fileManager.previewImage_.classList.add('multiple-selected');
-        };
-
-        reader.readAsDataURL(file);
-      });
+      img.src = entry.toURL();
     }
+    if (callback)
+      callback();
   };
 
   /**
    * Change the current directory.
    *
    * Dispatches the 'directory-changed' event when the directory is successfully
    * changed.
    *
    * @param {string} path The absolute path to the new directory.
    */
@@ skipping 28 matching lines @@
           }
         });
   };
 
   /**
    * Invoked by the table dataModel after a sort completes.
    *
    * We use this hook to make sure selected files stay visible after a sort.
    */
   FileManager.prototype.onDataModelSorted_ = function() {
-    var i = this.table.selectionModel.leadIndex;
-    this.table.scrollIntoView(i);
+    var i = this.currentList_.selectionModel.leadIndex;
+    this.currentList_.scrollIntoView(i);
   }
 
   /**
    * Update the selection summary UI when the selection summarization completes.
    */
   FileManager.prototype.onSelectionSummarized_ = function() {
     if (this.selection.totalCount == 0) {
       this.previewSummary_.textContent = str('NOTHING_SELECTED');
 
     } else if (this.selection.totalCount == 1) {
@@ skipping 51 matching lines @@
     this.okButton_.disabled = !selectable;
     this.updatePreview_();
   };
 
   /**
    * Handle a double-click event on an entry in the detail list.
    *
    * @param {Event} event The click event.
    */
   FileManager.prototype.onDetailDoubleClick_ = function(event) {
-    var i = this.table.selectionModel.leadIndex;
-    var entry = this.table.dataModel.item(i);
+    var i = this.currentList_.selectionModel.leadIndex;
+    var entry = this.dataModel_.item(i);
 
     if (entry.isDirectory)
       return this.changeDirectory(entry.fullPath);
 
     if (!this.okButton_.disabled)
       this.onOk_();
 
   };
 
   /**
@@ skipping 19 matching lines @@
    *
    * @param {function()} opt_callback Optional function to invoke when the
    *     rescan is complete.
    */
   FileManager.prototype.rescanDirectory_ = function(opt_callback) {
     var self = this;
     var reader;
 
     function onReadSome(entries) {
       if (entries.length == 0) {
-        if (self.table.dataModel.sortStatus.field != 'name')
-          self.table.dataModel.updateIndex(0);
+        if (self.dataModel_.sortStatus.field != 'name')
+          self.dataModel_.updateIndex(0);
 
         if (opt_callback)
           opt_callback();
         return;
       }
 
       // Splice takes the to-be-spliced-in array as individual parameters,
       // rather than as an array, so we need to perform some acrobatics...
       var spliceArgs = [].slice.call(entries);
 
       // Hide files that start with a dot ('.').
       // TODO(rginda): User should be able to override this.  Support for other
       // commonly hidden patterns might be nice too.
       spliceArgs = spliceArgs.filter(function(e) {
         return e.name.substr(0, 1) != '.';
       });
 
       spliceArgs.unshift(0, 0);  // index, deleteCount
-      self.table.dataModel.splice.apply(self.table.dataModel, spliceArgs);
+      self.dataModel_.splice.apply(self.dataModel_, spliceArgs);
 
       // Keep reading until entries.length is 0.
       reader.readEntries(onReadSome);
     };
 
     // Clear the table first.
-    this.table.dataModel.splice(0, this.table.dataModel.length);
+    this.dataModel_.splice(0, this.dataModel_.length);
 
     this.updateBreadcrumbs_();
 
     if (this.currentDirEntry_.fullPath != '/') {
       // If not the root directory, just read the contents.
       reader = this.currentDirEntry_.createReader();
       reader.readEntries(onReadSome);
       return;
     }
 
     // Otherwise, use the provided list of root subdirectories, since the
     // real local filesystem root directory (the one we use outside the
     // harness) can't be enumerated yet.
     var spliceArgs = [].slice.call(this.rootEntries_);
     spliceArgs.unshift(0, 0);  // index, deleteCount
-    self.table.dataModel.splice.apply(self.table.dataModel, spliceArgs);
-    self.table.dataModel.updateIndex(0);
+    self.dataModel_.splice.apply(self.dataModel_, spliceArgs);
+    self.dataModel_.updateIndex(0);
 
     if (opt_callback)
       opt_callback();
   };
 
   FileManager.prototype.onFilenameInputKeyUp_ = function(event) {
     this.okButton_.disabled = this.filenameInput_.value.length == 0;
 
     if (event.keyCode == 13 /* Enter */ && !this.okButton_.disabled)
       this.onOk_();
@@ skipping 27 matching lines @@
       if (name.indexOf('/') == -1)
         break;
 
       alert(strf('ERROR_INVALID_FOLDER_CHARACTER', '/'));
     }
 
     var self = this;
 
     function onSuccess(dirEntry) {
       self.rescanDirectory_(function () {
-        for (var i = 0; i < self.table.dataModel.length; i++) {
-          if (self.table.dataModel.item(i).name == dirEntry.name) {
-            self.table.selectionModel.selectedIndex = i;
-            self.table.scrollIndexIntoView(i);
-            self.table.focus();
+        for (var i = 0; i < self.dataModel_.length; i++) {
+          if (self.dataModel_.item(i).name == dirEntry.name) {
+            self.currentList_.selectionModel.selectedIndex = i;
+            self.currentList_.scrollIndexIntoView(i);
+            self.currentList_.focus();
             return;
           }
         };
       });
     }
 
     function onError(err) {
       window.alert(strf('ERROR_CREATING_FOLDER', name,
                         util.getFileErrorMnemonic(err.code)));
     }
@@ skipping 66 matching lines @@
       var filename = this.filenameInput_.value;
       if (!filename)
         throw new Error('Missing filename!');
 
       chrome.fileBrowserPrivate.selectFile(currentPath + filename, 0);
       window.close();
       return;
     }
 
     var ary = [];
-    var selectedIndexes = this.table.selectionModel.selectedIndexes;
+    var selectedIndexes = this.currentList_.selectionModel.selectedIndexes;
 
     // All other dialog types require at least one selected list item.
     // The logic to control whether or not the ok button is enabled should
     // prevent us from ever getting here, but we sanity check to be sure.
     if (!selectedIndexes.length)
       throw new Error('Nothing selected!');
 
     for (var i = 0; i < selectedIndexes.length; i++) {
-      var entry = this.table.dataModel.item(selectedIndexes[i]);
+      var entry = this.dataModel_.item(selectedIndexes[i]);
       if (!entry) {
         console.log('Error locating selected file at index: ' + i);
         continue;
       }
 
       ary.push(currentPath + entry.name);
     }
 
     // Multi-file selection has no other restrictions.
     if (this.dialogType_ == FileManager.DialogType.SELECT_OPEN_MULTI_FILE) {
@@ skipping 12 matching lines @@
     } else if (this.dialogType_ == FileManager.DialogType.SELECT_OPEN_FILE) {
       if (!this.selection.leadEntry.isFile)
         throw new Error('Selected entry is not a file!');
     }
 
     chrome.fileBrowserPrivate.selectFile(ary[0], 0);
     window.close();
   };
 
 })();