Create ListContainer and SpinnerController class.

BUG=267281
TEST=None

Review URL: https://codereview.chromium.org/695883002

Cr-Commit-Position: refs/heads/master@{#302591}

ui/file_manager/file_manager/foreground/js/compiled_resources.gyp

@@ -75,6 +75,7 @@
           './navigation_list_model.js',
           './progress_center_item_group.js',
           './search_controller.js',
+          './spinner_controller.js',
           './share_client.js',
           './thumbnail_loader.js',
           './ui/conflict_dialog.js',
@@ -87,6 +88,7 @@
           './ui/file_grid.js',
           './ui/file_manager_ui.js',
           './ui/file_table.js',
+          './ui/list_container.js',
           './ui/location_line.js',
           './ui/multi_profile_share_dialog.js',
           './ui/preview_panel.js',

ui/file_manager/file_manager/foreground/js/file_manager.js

@@ -181,6 +181,13 @@ function FileManager() {
    */
   this.searchController_ = null;
 
+  /**
+   * Controller for spinner.
+   * @type {SpinnerController}
+   * @private
+   */
+  this.spinnerController_ = null;
+
   /**
    * Banners in the file list.
    * @type {FileListBannerController}
@@ -329,13 +336,6 @@ function FileManager() {
    */
   this.currentList_ = null;
 
-  /**
-   * Spinner on file list which is shown while loading.
-   * @type {HTMLDivElement}
-   * @private
-   */
-  this.spinner_ = null;
-
   /**
    * The container element of the dialog.
    * @type {HTMLDivElement}
@@ -343,13 +343,6 @@ function FileManager() {
    */
   this.dialogContainer_ = null;
 
-  /**
-   * The container element of the file list.
-   * @type {HTMLDivElement}
-   * @private
-   */
-  this.listContainer_ = null;
-
   /**
    * Open-with command in the context menu.
    * @type {cr.ui.Command}
@@ -412,13 +405,6 @@ function FileManager() {
    */
   this.scanUpdatedTimer_ = 0;
 
-  /**
-   * Timer ID to delay showing spinner after a scan starts.
-   * @type {number}
-   * @private
-   */
-  this.showSpinnerTimeout_ = 0;
-
   // --------------------------------------------------------------------------
   // Search states.
 
@@ -1085,8 +1071,9 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
     cr.ui.contextMenuHandler.setContextMenu(this.renameInput_,
                                             this.textContextMenu_);
     this.registerInputCommands_(this.renameInput_);
-    this.document_.addEventListener('command',
-                                    this.setNoHover_.bind(this, true));
+    this.document_.addEventListener(
+        'command',
+        this.ui_.listContainer.clearHover.bind(this.ui_.listContainer));
   };
 
   /**
@@ -1303,10 +1290,6 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
     var taskItems = queryRequiredElement(dom, '#tasks');
     this.taskItems_ = /** @type {HTMLButtonElement} */ (taskItems);
 
-    var spinner = queryRequiredElement(dom, '#list-container > .spinner-layer');
-    this.spinner_ = /** @type {HTMLDivElement} */ (spinner);
-    this.showSpinner_(true);
-
     var fullPage = this.dialogType == DialogType.FULL_PAGE;
     var table = queryRequiredElement(dom, '.detail-table');
     var grid = queryRequiredElement(dom, '.thumbnail-grid');
@@ -1362,14 +1345,12 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
     this.ui_.dialogFooter.filenameInput.addEventListener(
         'focus', this.onFilenameInputFocus_.bind(this));
 
-    this.listContainer_ = /** @type {!HTMLDivElement} */
-        (this.dialogDom_.querySelector('#list-container'));
-    this.listContainer_.addEventListener(
+    this.ui_.listContainer =
+        new ListContainer(queryRequiredElement(dom, '#list-container'));
+    this.ui_.listContainer.element.addEventListener(
         'keydown', this.onListKeyDown_.bind(this));
-    this.listContainer_.addEventListener(
-        'keypress', this.onListKeyPress_.bind(this));
-    this.listContainer_.addEventListener(
-        'mousemove', this.onListMouseMove_.bind(this));
+    this.ui_.listContainer.element.addEventListener(
+        ListContainer.EventType.TEXT_SEARCH, this.onTextSearch_.bind(this));
 
     this.ui_.dialogFooter.okButton.addEventListener(
         'click', this.onOk_.bind(this));
@@ -1569,6 +1550,11 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
         this.fileFilter_,
         this.ui_.alertDialog);
 
+    // Create spinner controller.
+    this.spinnerController_ = new SpinnerController(
+        this.ui_.listContainer.spinner, this.directoryModel_);
+    this.spinnerController_.show();
+
     // Update metadata to change 'Today' and 'Yesterday' dates.
     var today = new Date();
     today.setHours(0);
@@ -3064,11 +3050,7 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
       this.scanUpdatedTimer_ = 0;
     }
 
-    if (this.spinner_.hidden) {
-      this.cancelSpinnerTimeout_();
-      this.showSpinnerTimeout_ =
-          setTimeout(this.showSpinner_.bind(this, true), 500);
-    }
+    this.spinnerController_.showLater();
   };
 
   /**
@@ -3082,7 +3064,7 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
 
     if (this.commandHandler)
       this.commandHandler.updateAvailability();
-    this.hideSpinnerLater_();
+    this.spinnerController_.hide();
 
     if (this.scanUpdatedTimer_) {
       clearTimeout(this.scanUpdatedTimer_);
@@ -3122,7 +3104,7 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
       // We need to hide the spinner only once.
       if (!this.scanUpdatedAtLeastOnceOrCompleted_) {
         this.scanUpdatedAtLeastOnceOrCompleted_ = true;
-        this.hideSpinnerLater_();
+        this.spinnerController_.hide();
       }
 
       // Update the UI.
@@ -3147,7 +3129,7 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
 
     if (this.commandHandler)
       this.commandHandler.updateAvailability();
-    this.hideSpinnerLater_();
+    this.spinnerController_.hide();
     if (this.scanCompletedTimer_) {
       clearTimeout(this.scanCompletedTimer_);
       this.scanCompletedTimer_ = 0;
@@ -3174,39 +3156,6 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
     this.selectionHandler_.onFileSelectionChanged();
   };
 
-  /**
-   * @private
-   */
-  FileManager.prototype.cancelSpinnerTimeout_ = function() {
-    if (this.showSpinnerTimeout_) {
-      clearTimeout(this.showSpinnerTimeout_);
-      this.showSpinnerTimeout_ = 0;
-    }
-  };
-
-  /**
-   * @private
-   */
-  FileManager.prototype.hideSpinnerLater_ = function() {
-    this.cancelSpinnerTimeout_();
-    this.showSpinner_(false);
-  };
-
-  /**
-   * @param {boolean} on True to show, false to hide.
-   * @private
-   */
-  FileManager.prototype.showSpinner_ = function(on) {
-    if (on && this.directoryModel_ && this.directoryModel_.isScanning())
-      this.spinner_.hidden = false;
-
-    if (!on && (!this.directoryModel_ ||
-                !this.directoryModel_.isScanning() ||
-                this.directoryModel_.getFileList().length != 0)) {
-      this.spinner_.hidden = true;
-    }
-  };
-
   FileManager.prototype.createNewFolder = function() {
     var defaultName = str('DEFAULT_NEW_FOLDER_NAME');
 
@@ -3342,11 +3291,6 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
    * @private
    */
   FileManager.prototype.onListKeyDown_ = function(event) {
-    if (event.srcElement.tagName == 'INPUT') {
-      // Ignore keydown handler in the rename input box.
-      return;
-    }
-
     switch (util.getKeyModifiers(event) + event.keyCode) {
       case '8':  // Backspace => Up one directory.
         event.preventDefault();
@@ -3377,65 +3321,6 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
         }
         break;
     }
-
-    switch (event.keyIdentifier) {
-      case 'Home':
-      case 'End':
-      case 'Up':
-      case 'Down':
-      case 'Left':
-      case 'Right':
-        // When navigating with keyboard we hide the distracting mouse hover
-        // highlighting until the user moves the mouse again.
-        this.setNoHover_(true);
-        break;
-    }
-  };
-
-  /**
-   * Suppress/restore hover highlighting in the list container.
-   * @param {boolean} on True to temporarity hide hover state.
-   * @private
-   */
-  FileManager.prototype.setNoHover_ = function(on) {
-    if (on) {
-      this.listContainer_.classList.add('nohover');
-    } else {
-      this.listContainer_.classList.remove('nohover');
-    }
-  };
-
-  /**
-   * KeyPress event handler for the div#list-container element.
-   * @param {Event} event Key event.
-   * @private
-   */
-  FileManager.prototype.onListKeyPress_ = function(event) {
-    if (event.srcElement.tagName == 'INPUT') {
-      // Ignore keypress handler in the rename input box.
-      return;
-    }
-
-    if (event.ctrlKey || event.metaKey || event.altKey)
-      return;
-
-    var now = new Date();
-    var char = String.fromCharCode(event.charCode).toLowerCase();
-    var text = now - this.textSearchState_.date > 1000 ? '' :
-        this.textSearchState_.text;
-    this.textSearchState_ = {text: text + char, date: now};
-
-    this.doTextSearch_();
-  };
-
-  /**
-   * Mousemove event handler for the div#list-container element.
-   * @param {Event} event Mouse event.
-   * @private
-   */
-  FileManager.prototype.onListMouseMove_ = function(event) {
-    // The user grabbed the mouse, restore the hover highlighting.
-    this.setNoHover_(false);
   };
 
   /**
@@ -3443,11 +3328,8 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
    * starting with entered text (case-insensitive).
    * @private
    */
-  FileManager.prototype.doTextSearch_ = function() {
-    var text = this.textSearchState_.text;
-    if (!text)
-      return;
-
+  FileManager.prototype.onTextSearch_ = function() {
+    var text = this.ui_.listContainer.textSearchState.text;
     var dm = this.directoryModel_.getFileList();
     for (var index = 0; index < dm.length; ++index) {
       var name = dm.item(index).name;
@@ -3457,7 +3339,7 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
       }
     }
 
-    this.textSearchState_.text = '';
+    this.ui_.listContainer.textSearchState.text = '';
   };
 
   /**

ui/file_manager/file_manager/foreground/js/main_scripts.js

@@ -97,6 +97,7 @@
 //<include src="progress_center_item_group.js">
 //<include src="search_controller.js">
 //<include src="share_client.js">
+//<include src="spinner_controller.js">
 //<include src="thumbnail_loader.js">
 //<include src="ui/conflict_dialog.js">
 //<include src="ui/default_action_dialog.js">
@@ -108,6 +109,7 @@
 //<include src="ui/file_grid.js">
 //<include src="ui/file_manager_ui.js">
 //<include src="ui/file_table.js">
+//<include src="ui/list_container.js">
 //<include src="ui/location_line.js">
 //<include src="ui/multi_profile_share_dialog.js">
 //<include src="ui/preview_panel.js">

ui/file_manager/file_manager/foreground/js/spinner_controller.js

+// Copyright 2014 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.
+
+/**
+ * Controller for spinner.
+ * @param {!HTMLElement} element
+ * @param {!DirectoryModel} directoryModel
+ * @constructor
+ */
+function SpinnerController(element, directoryModel) {
+  /**
+   * The container element of the file list.
+   * @type {!HTMLElement}
+   * @const
+   * @private
+   */
+  this.element_ = element;
+
+  /**
+   * Directory model.
+   * @type {!DirectoryModel}
+   * @const
+   * @private
+   */
+  this.directoryModel_ = directoryModel;
+
+  /**
+   * @type {number}
+   * @private
+   */
+  this.timeoutId_ = 0;
+}
+
+/**
+ * Shows the spinner.
+ */
+SpinnerController.prototype.show = function() {
+  if (!this.directoryModel_.isScanning())
+    return;
+  this.element_.hidden = false;
+  clearTimeout(this.timeoutId_);
+  this.timeoutId_ = 0;
+};
+
+/**
+ * Hides the spinner.
+ */
+SpinnerController.prototype.hide = function() {
+  if (this.directoryModel_.isScanning() &&
+      this.directoryModel_.getFileList().length == 0) {
+    return;
+  }
+  this.element_.hidden = true;
+  clearTimeout(this.timeoutId_);
+  this.timeoutId_ = 0;
+};
+
+/**
+ * Shows the spinner after 500ms.
+ */
+SpinnerController.prototype.showLater = function() {
+  if (!this.element_.hidden)
+    return;
+  clearTimeout(this.timeoutId_);
+  this.timeoutId_ = setTimeout(this.show.bind(this), 500);
+};

ui/file_manager/file_manager/foreground/js/ui/file_manager_ui.js

@@ -103,6 +103,12 @@ function FileManagerUI(element, dialogType) {
    */
   this.toggleViewButton = null;
 
+  /**
+   * List container.
+   * @type {ListContainer}
+   */
+  this.listContainer = null;
+
   /**
    * Dialog footer.
    * @type {DialogFooter}

ui/file_manager/file_manager/foreground/js/ui/list_container.js

+// Copyright 2014 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.
+
+/**
+ * @constructor
+ * @struct
+ */
+function TextSearchState() {
+  /**
+   * @type {string}
+   */
+  this.text = '';
+
+  /**
+   * @type {!Date}
+   */
+  this.date = new Date();
+}
+
+/**
+ * List container for the file table and the grid view.
+ * @param {!HTMLElement} element Element of the container.
+ * @constructor
+ * @struct
+ */
+function ListContainer(element) {
+  /**
+   * The container element of the file list.
+   * @type {!HTMLElement}
+   * @const
+   */
+  this.element = element;
+
+  /**
+   * Spinner on file list which is shown while loading.
+   * @type {!HTMLElement}
+   * @const
+   */
+  this.spinner = queryRequiredElement(element, '.spinner-layer');
+
+  /**
+   * @type {!TextSearchState}
+   * @const
+   */
+  this.textSearchState = new TextSearchState();
+
+  this.element.addEventListener('keydown', this.onKeyDown_.bind(this));
+  this.element.addEventListener('keypress', this.onKeyPress_.bind(this));
+  this.element.addEventListener('mousemove', this.onMouseMove_.bind(this));
+}
+
+/**
+ * @enum {string}
+ * @const
+ */
+ListContainer.EventType = {
+  TEXT_SEARCH: 'textsearch'
+};
+
+/**
+ * Clears hover highlighting in the list container until next mouse move.
+ */
+ListContainer.prototype.clearHover = function() {
+  this.element.classList.add('nohover');
+};
+
+/**
+ * KeyDown event handler for the div#list-container element.
+ * @param {!Event} event Key event.
+ * @private
+ */
+ListContainer.prototype.onKeyDown_ = function(event) {
+  // Ignore keydown handler in the rename input box.
+  if (event.srcElement.tagName == 'INPUT') {
+    event.stopImmediatePropagation();
+    return;
+  }
+
+  switch (event.keyIdentifier) {
+    case 'Home':
+    case 'End':
+    case 'Up':
+    case 'Down':
+    case 'Left':
+    case 'Right':
+      // When navigating with keyboard we hide the distracting mouse hover
+      // highlighting until the user moves the mouse again.
+      this.clearHover();
+      break;
+  }
+};
+
+/**
+ * KeyPress event handler for the div#list-container element.
+ * @param {!Event} event Key event.
+ * @private
+ */
+ListContainer.prototype.onKeyPress_ = function(event) {
+  // Ignore keypress handler in the rename input box.
+  if (event.srcElement.tagName == 'INPUT' ||
+      event.ctrlKey ||
+      event.metaKey ||
+      event.altKey) {
+    event.stopImmediatePropagation();
+    return;
+  }
+
+  var now = new Date();
+  var character = String.fromCharCode(event.charCode).toLowerCase();
+  var text = now - this.textSearchState.date > 1000 ? '' :
+      this.textSearchState.text;
+  this.textSearchState.text = text + character;
+  this.textSearchState.date = now;
+
+  if (this.textSearchState.text)
+    cr.dispatchSimpleEvent(this.element, ListContainer.EventType.TEXT_SEARCH);
+};
+
+/**
+ * Mousemove event handler for the div#list-container element.
+ * @param {Event} event Mouse event.
+ * @private
+ */
+ListContainer.prototype.onMouseMove_ = function(event) {
+  // The user grabbed the mouse, restore the hover highlighting.
+  this.element.classList.remove('nohover');
+};

ui/file_manager/file_manager/main.html

@@ -110,6 +110,7 @@
       <script src="foreground/js/progress_center_item_group.js"></script>
       <script src="foreground/js/search_controller.js"></script>
       <script src="foreground/js/share_client.js"></script>
+      <script src="foreground/js/spinner_controller.js"></script>
       <script src="foreground/js/thumbnail_loader.js"></script>
       <script src="foreground/js/ui/conflict_dialog.js"></script>
       <script src="foreground/js/ui/default_action_dialog.js"></script>
@@ -121,6 +122,7 @@
       <script src="foreground/js/ui/file_grid.js"></script>
       <script src="foreground/js/ui/file_manager_ui.js"></script>
       <script src="foreground/js/ui/file_table.js"></script>
+      <script src="foreground/js/ui/list_container.js"></script>
       <script src="foreground/js/ui/location_line.js"></script>
       <script src="foreground/js/ui/multi_profile_share_dialog.js"></script>
       <script src="foreground/js/ui/preview_panel.js"></script>