Add type annotations to gallery/js/gallery.js.

ui/file_manager/gallery/js/gallery.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.
 
 /**
  * Called from the main frame when unloading.
  * @param {boolean=} opt_exiting True if the app is exiting.
  */
-function unload(opt_exiting) { Gallery.instance.onUnload(opt_exiting); }
+function unload(opt_exiting) { gallery.onUnload(opt_exiting); }
 
 /**
  * Overrided metadata worker's path.
  * @type {string}
- * @const
  */
 ContentProvider.WORKER_SCRIPT = '/js/metadata_worker.js';
 
 /**
  * Data model for gallery.
  *
- * @param {MetadataCache} metadataCache Metadata cache.
+ * @param {!MetadataCache} metadataCache Metadata cache.
  * @constructor
  * @extends {cr.ui.ArrayDataModel}
  */
 function GalleryDataModel(metadataCache) {
   cr.ui.ArrayDataModel.call(this, []);
 
   /**
    * Metadata cache.
-   * @type {MetadataCache}
+   * @type {!MetadataCache}
    * @private
    */
   this.metadataCache_ = metadataCache;
 
   /**
    * Directory where the image is saved if the image is located in a read-only
    * volume.
    * @type {DirectoryEntry}
    */
   this.fallbackSaveDirectory = null;
@@ skipping 15 matching lines @@
  */
 GalleryDataModel.MAX_SCREEN_IMAGE_CACHE_ = 5;
 
 GalleryDataModel.prototype = {
   __proto__: cr.ui.ArrayDataModel.prototype
 };
 
 /**
  * Saves new image.
  *
- * @param {VolumeManager} volumeManager Volume manager instance.
- * @param {Gallery.Item} item Original gallery item.
- * @param {HTMLCanvasElement} canvas Canvas containing new image.
+ * @param {!VolumeManager} volumeManager Volume manager instance.
+ * @param {!Gallery.Item} item Original gallery item.
+ * @param {!HTMLCanvasElement} canvas Canvas containing new image.
  * @param {boolean} overwrite Whether to overwrite the image to the item or not.
- * @return {Promise} Promise to be fulfilled with when the operation completes.
+ * @return {!Promise} Promise to be fulfilled with when the operation completes.
  */
 GalleryDataModel.prototype.saveItem = function(
     volumeManager, item, canvas, overwrite) {
   var oldEntry = item.getEntry();
   var oldMetadata = item.getMetadata();
   var oldLocationInfo = item.getLocationInfo();
   var metadataEncoder = ImageEncoder.encodeMetadata(
       item.getMetadata(), canvas, 1 /* quality */);
   var newMetadata = ContentProvider.ConvertContentMetadata(
       metadataEncoder.getMetadata(),
@@ skipping 49 matching lines @@
             this.splice(this.indexOf(item) + 1, 0, anotherItem);
           }
 
           fulfill();
         }.bind(this));
   }.bind(this));
 };
 
 /**
  * Evicts image caches in the items.
- * @param {Gallery.Item} currentSelectedItem Current selected item.
  */
-GalleryDataModel.prototype.evictCache = function(currentSelectedItem) {
+GalleryDataModel.prototype.evictCache = function() {
   // Sort the item by the last accessed date.
   var sorted = this.slice().sort(function(a, b) {
     return b.getLastAccessedDate() - a.getLastAccessedDate();
   });
 
   // Evict caches.
   var contentCacheCount = 0;
   var screenCacheCount = 0;
   for (var i = 0; i < sorted.length; i++) {
     if (sorted[i].contentImage) {
@@ skipping 22 matching lines @@
     }
   }
 };
 
 /**
  * Gallery for viewing and editing image files.
  *
  * @param {!VolumeManager} volumeManager The VolumeManager instance of the
  *     system.
  * @constructor
+ * @struct
  */
 function Gallery(volumeManager) {
+  /**
+   * @type {{appWindow: chrome.app.window.AppWindow, onClose: function(),
+   *     onMaximize: function(), onMinimize: function(),
+   *     onAppRegionChanged: function(), metadataCache: MetadataCache,
+   *     readonlyDirName: string, displayStringFunction: function(),
+   *     loadTimeData: Object, curDirEntry: Entry, searchResults: *}}
+   * @private
+   *
+   * TODO(yawano): curDirEntry and searchResults seem not to be used.
+   *     Investigate them and remove them if possible.
+   */
   this.context_ = {
     appWindow: chrome.app.window.current(),
-    onClose: function() { close(); },
+    onClose: function() { window.close(); },
     onMaximize: function() {
       var appWindow = chrome.app.window.current();
       if (appWindow.isMaximized())
         appWindow.restore();
       else
         appWindow.maximize();
     },
     onMinimize: function() { chrome.app.window.current().minimize(); },
     onAppRegionChanged: function() {},
     metadataCache: MetadataCache.createFull(volumeManager),
     readonlyDirName: '',
     displayStringFunction: function() { return ''; },
-    loadTimeData: {}
+    loadTimeData: {},
+    curDirEntry: null,
+    searchResults: null
   };
-  this.container_ = document.querySelector('.gallery');
+  this.container_ = queryRequiredElement(document, '.gallery');
   this.document_ = document;
   this.metadataCache_ = this.context_.metadataCache;
   this.volumeManager_ = volumeManager;
   this.selectedEntry_ = null;
   this.metadataCacheObserverId_ = null;
   this.onExternallyUnmountedBound_ = this.onExternallyUnmounted_.bind(this);
 
   this.dataModel_ = new GalleryDataModel(
       this.context_.metadataCache);
   var downloadVolumeInfo = this.volumeManager_.getCurrentProfileVolumeInfo(
       VolumeManagerCommon.VolumeType.DOWNLOADS);
   downloadVolumeInfo.resolveDisplayRoot().then(function(entry) {
     this.dataModel_.fallbackSaveDirectory = entry;
   }.bind(this)).catch(function(error) {
     console.error(
         'Failed to obtain the fallback directory: ' + (error.stack || error));
   });
   this.selectionModel_ = new cr.ui.ListSelectionModel();
 
-  this.initDom_();
-  this.initListeners_();
-}
+  /**
+   * @type {(SlideMode|MosaicMode)}
+   * @private
+   */
+  this.currentMode_ = null;
 
-/**
- * Gallery extends cr.EventTarget.
- */
-Gallery.prototype.__proto__ = cr.EventTarget.prototype;
+  /**
+   * @type {boolean}
+   * @private
+   */
+  this.changingMode_ = false;
 
-/**
- * Tools fade-out timeout in milliseconds.
- * @const
- * @type {number}
- */
-Gallery.FADE_TIMEOUT = 2000;
+  // -----------------------------------------------------------------
+  // Initializes the UI.
 
-/**
- * First time tools fade-out timeout in milliseconds.
- * @const
- * @type {number}
- */
-Gallery.FIRST_FADE_TIMEOUT = 1000;
-
-/**
- * Time until mosaic is initialized in the background. Used to make gallery
- * in the slide mode load faster. In milliseconds.
- * @const
- * @type {number}
- */
-Gallery.MOSAIC_BACKGROUND_INIT_DELAY = 1000;
-
-/**
- * Types of metadata Gallery uses (to query the metadata cache).
- * @const
- * @type {string}
- */
-Gallery.METADATA_TYPE = 'thumbnail|filesystem|media|external';
-
-/**
- * Initializes listeners.
- * @private
- */
-Gallery.prototype.initListeners_ = function() {
-  this.keyDownBound_ = this.onKeyDown_.bind(this);
-  this.document_.body.addEventListener('keydown', this.keyDownBound_);
-
-  this.inactivityWatcher_ = new MouseInactivityWatcher(
-      this.container_, Gallery.FADE_TIMEOUT, this.hasActiveTool.bind(this));
-
-  // Search results may contain files from different subdirectories so
-  // the observer is not going to work.
-  if (!this.context_.searchResults && this.context_.curDirEntry) {
-    this.metadataCacheObserverId_ = this.metadataCache_.addObserver(
-        this.context_.curDirEntry,
-        MetadataCache.CHILDREN,
-        'thumbnail',
-        this.updateThumbnails_.bind(this));
-  }
-  this.volumeManager_.addEventListener(
-      'externally-unmounted', this.onExternallyUnmountedBound_);
-};
-
-/**
- * Closes gallery when a volume containing the selected item is unmounted.
- * @param {!Event} event The unmount event.
- * @private
- */
-Gallery.prototype.onExternallyUnmounted_ = function(event) {
-  if (!this.selectedEntry_)
-    return;
-
-  if (this.volumeManager_.getVolumeInfo(this.selectedEntry_) ===
-      event.volumeInfo) {
-    close();
-  }
-};
-
-/**
- * Unloads the Gallery.
- * @param {boolean} exiting True if the app is exiting.
- */
-Gallery.prototype.onUnload = function(exiting) {
-  if (this.metadataCacheObserverId_ !== null)
-    this.metadataCache_.removeObserver(this.metadataCacheObserverId_);
-  this.volumeManager_.removeEventListener(
-      'externally-unmounted', this.onExternallyUnmountedBound_);
-  this.slideMode_.onUnload(exiting);
-};
-
-/**
- * Initializes DOM UI
- * @private
- */
-Gallery.prototype.initDom_ = function() {
   // Initialize the dialog label.
   cr.ui.dialogs.BaseDialog.OK_LABEL = str('GALLERY_OK_LABEL');
   cr.ui.dialogs.BaseDialog.CANCEL_LABEL = str('GALLERY_CANCEL_LABEL');
 
-  var content = document.querySelector('#content');
+  var content = queryRequiredElement(document, '#content');
   content.addEventListener('click', this.onContentClick_.bind(this));
 
-  this.header_ = document.querySelector('#header');
-  this.toolbar_ = document.querySelector('#toolbar');
+  this.header_ = queryRequiredElement(document, '#header');
+  this.toolbar_ = queryRequiredElement(document, '#toolbar');
 
   var preventDefault = function(event) { event.preventDefault(); };
 
   var minimizeButton = util.createChild(this.header_,
                                         'minimize-button tool dimmable',
                                         'button');
   minimizeButton.tabIndex = -1;
   minimizeButton.addEventListener('click', this.onMinimize_.bind(this));
   minimizeButton.addEventListener('mousedown', preventDefault);
 
   var maximizeButton = util.createChild(this.header_,
                                         'maximize-button tool dimmable',
                                         'button');
   maximizeButton.tabIndex = -1;
   maximizeButton.addEventListener('click', this.onMaximize_.bind(this));
   maximizeButton.addEventListener('mousedown', preventDefault);
 
   var closeButton = util.createChild(this.header_,
                                      'close-button tool dimmable',
                                      'button');
   closeButton.tabIndex = -1;
   closeButton.addEventListener('click', this.onClose_.bind(this));
   closeButton.addEventListener('mousedown', preventDefault);
 
-  this.filenameSpacer_ = this.toolbar_.querySelector('.filename-spacer');
+  this.filenameSpacer_ = queryRequiredElement(this.toolbar_,
+      '.filename-spacer');
   this.filenameEdit_ = util.createChild(this.filenameSpacer_,
                                         'namebox', 'input');
 
   this.filenameEdit_.setAttribute('type', 'text');
   this.filenameEdit_.addEventListener('blur',
       this.onFilenameEditBlur_.bind(this));
 
   this.filenameEdit_.addEventListener('focus',
       this.onFilenameFocus_.bind(this));
 
   this.filenameEdit_.addEventListener('keydown',
       this.onFilenameEditKeydown_.bind(this));
 
-  var middleSpacer = this.filenameSpacer_ =
-      this.toolbar_.querySelector('.middle-spacer');
-  var buttonSpacer = this.toolbar_.querySelector('button-spacer');
+  var middleSpacer = queryRequiredElement(this.toolbar_, '.middle-spacer');
+  var buttonSpacer = queryRequiredElement(this.toolbar_, '.button-spacer');
 
   this.prompt_ = new ImageEditor.Prompt(this.container_, strf);
 
   this.errorBanner_ = new ErrorBanner(this.container_);
 
-  this.modeButton_ = this.toolbar_.querySelector('button.mode');
-  this.modeButton_.addEventListener('click', this.toggleMode_.bind(this, null));
+  this.modeButton_ = queryRequiredElement(this.toolbar_, 'button.mode');
+  this.modeButton_.addEventListener('click',
+      this.toggleMode_.bind(this, undefined));
 
   this.mosaicMode_ = new MosaicMode(content,
                                     this.errorBanner_,
                                     this.dataModel_,
                                     this.selectionModel_,
                                     this.volumeManager_,
-                                    this.toggleMode_.bind(this, null));
+                                    this.toggleMode_.bind(this));
 
   this.slideMode_ = new SlideMode(this.container_,
                                   content,
                                   this.toolbar_,
                                   this.prompt_,
                                   this.errorBanner_,
                                   this.dataModel_,
                                   this.selectionModel_,
                                   this.context_,
                                   this.volumeManager_,
@@ skipping 14 matching lines @@
   this.shareButton_.addEventListener(
       'click', this.onShareButtonClick_.bind(this));
 
   this.dataModel_.addEventListener('splice', this.onSplice_.bind(this));
   this.dataModel_.addEventListener('content', this.onContentChange_.bind(this));
 
   this.selectionModel_.addEventListener('change', this.onSelection_.bind(this));
   this.slideMode_.addEventListener('useraction', this.onUserAction_.bind(this));
 
   this.shareDialog_ = new ShareDialog(this.container_);
+
+  // -----------------------------------------------------------------
+  // Initialize listeners.
+
+  this.keyDownBound_ = this.onKeyDown_.bind(this);
+  this.document_.body.addEventListener('keydown', this.keyDownBound_);
+
+  this.inactivityWatcher_ = new MouseInactivityWatcher(
+      this.container_, Gallery.FADE_TIMEOUT, this.hasActiveTool.bind(this));
+
+  // Search results may contain files from different subdirectories so
+  // the observer is not going to work.
+  if (!this.context_.searchResults && this.context_.curDirEntry) {
+    this.metadataCacheObserverId_ = this.metadataCache_.addObserver(
+        this.context_.curDirEntry,
+        MetadataCache.CHILDREN,
+        'thumbnail',
+        this.updateThumbnails_.bind(this));
+  }
+  this.volumeManager_.addEventListener(
+      'externally-unmounted', this.onExternallyUnmountedBound_);
+}
+
+/**
+ * Gallery extends cr.EventTarget.
+ */
+Gallery.prototype.__proto__ = cr.EventTarget.prototype;
+
+/**
+ * Tools fade-out timeout in milliseconds.
+ * @const
+ * @type {number}
+ */
+Gallery.FADE_TIMEOUT = 2000;
+
+/**
+ * First time tools fade-out timeout in milliseconds.
+ * @const
+ * @type {number}
+ */
+Gallery.FIRST_FADE_TIMEOUT = 1000;
+
+/**
+ * Time until mosaic is initialized in the background. Used to make gallery
+ * in the slide mode load faster. In milliseconds.
+ * @const
+ * @type {number}
+ */
+Gallery.MOSAIC_BACKGROUND_INIT_DELAY = 1000;
+
+/**
+ * Types of metadata Gallery uses (to query the metadata cache).
+ * @const
+ * @type {string}
+ */
+Gallery.METADATA_TYPE = 'thumbnail|filesystem|media|external';
+
+/**
+ * Closes gallery when a volume containing the selected item is unmounted.
+ * @param {!Event} event The unmount event.
+ * @private
+ */
+Gallery.prototype.onExternallyUnmounted_ = function(event) {
+  if (!this.selectedEntry_)
+    return;
+
+  if (this.volumeManager_.getVolumeInfo(this.selectedEntry_) ===
+      event.volumeInfo) {
+    window.close();
+  }
 };
 
 /**
+ * Unloads the Gallery.
+ * @param {boolean=} opt_exiting True if the app is exiting.
+ */
+Gallery.prototype.onUnload = function(opt_exiting) {
+  if (this.metadataCacheObserverId_ !== null)
+    this.metadataCache_.removeObserver(this.metadataCacheObserverId_);
+  this.volumeManager_.removeEventListener(
+      'externally-unmounted', this.onExternallyUnmountedBound_);
+};
+
+/**
  * Initializes a toolbar button.
  *
  * @param {string} className Class to add.
  * @param {string} title Button title.
  * @return {!HTMLElement} Newly created button.
  * @private
  */
 Gallery.prototype.initToolbarButton_ = function(className, title) {
-  var button = this.toolbar_.querySelector('button.' + className);
+  var button = queryRequiredElement(this.toolbar_, 'button.' + className);
   button.title = str(title);
   return button;
 };
 
 /**
  * Loads the content.
  *
  * @param {!Array.<Entry>} entries Array of entries.
  * @param {!Array.<Entry>} selectedEntries Array of selected entries.
  */
@@ skipping 154 matching lines @@
 
 /**
  * Executes a function when the editor is done with the modifications.
  * @param {function()} callback Function to execute.
  */
 Gallery.prototype.executeWhenReady = function(callback) {
   this.currentMode_.executeWhenReady(callback);
 };
 
 /**
- * @return {Object} File manager private API.
+ * @return {!Object} File manager private API.
  */
 Gallery.getFileManagerPrivate = function() {
   return chrome.fileManagerPrivate || window.top.chrome.fileManagerPrivate;
 };
 
 /**
  * @return {boolean} True if some tool is currently active.
  */
 Gallery.prototype.hasActiveTool = function() {
   return (this.currentMode_ && this.currentMode_.hasActiveTool()) ||
       this.isRenaming_();
 };
 
 /**
 * External user action event handler.
 * @private
 */
 Gallery.prototype.onUserAction_ = function() {
   // Show the toolbar and hide it after the default timeout.
   this.inactivityWatcher_.kick();
 };
 
 /**
  * Sets the current mode, update the UI.
- * @param {Object} mode Current mode.
+ * @param {!(SlideMode|MosaicMode)} mode Current mode.
  * @private
  */
 Gallery.prototype.setCurrentMode_ = function(mode) {
   if (mode !== this.slideMode_ && mode !== this.mosaicMode_)
     console.error('Invalid Gallery mode');
 
   this.currentMode_ = mode;
   this.container_.setAttribute('mode', this.currentMode_.getName());
   this.updateSelectionAndState_();
   this.updateButtons_();
@@ skipping 28 matching lines @@
   var tileRect = mosaic.getTileRect(tileIndex);
 
   if (this.currentMode_ === this.slideMode_) {
     this.setCurrentMode_(this.mosaicMode_);
     mosaic.transform(
         tileRect, this.slideMode_.getSelectedImageRect(), true /* instant */);
     this.slideMode_.leave(
         tileRect,
         function() {
           // Animate back to normal position.
-          mosaic.transform();
+          mosaic.transform(null, null);
           mosaic.show();
           onModeChanged();
         }.bind(this));
   } else {
     this.setCurrentMode_(this.slideMode_);
     this.slideMode_.enter(
         tileRect,
         function() {
           // Animate to zoomed position.
           mosaic.transform(tileRect, this.slideMode_.getSelectedImageRect());
@@ skipping 49 matching lines @@
         this.selectionModel_.leadIndex = -1;
         // Remove items from the data model, starting from the highest index.
         while (indexesToRemove.length)
           this.dataModel_.splice(indexesToRemove.pop(), 1);
         // Delete actual files.
         deleteNext();
       }.bind(this),
       function() {
         // Restore the listener after a timeout so that ESC is processed.
         setTimeout(restoreListener, 0);
-      });
+      },
+      null);
 };
 
 /**
- * @return {Array.<Gallery.Item>} Current selection.
+ * @return {!Array.<Gallery.Item>} Current selection.
  */
 Gallery.prototype.getSelectedItems = function() {
   return this.selectionModel_.selectedIndexes.map(
       this.dataModel_.item.bind(this.dataModel_));
 };
 
 /**
- * @return {Array.<Entry>} Array of currently selected entries.
+ * @return {!Array.<Entry>} Array of currently selected entries.
  */
 Gallery.prototype.getSelectedEntries = function() {
   return this.selectionModel_.selectedIndexes.map(function(index) {
     return this.dataModel_.item(index).getEntry();
   }.bind(this));
 };
 
 /**
  * @return {?Gallery.Item} Current single selection.
  */
@@ skipping 17 matching lines @@
 /**
   * Data model splice event handler.
   * @private
   */
 Gallery.prototype.onSplice_ = function() {
   this.selectionModel_.adjustLength(this.dataModel_.length);
 };
 
 /**
  * Content change event handler.
- * @param {Event} event Event.
+ * @param {!Event} event Event.
  * @private
 */
 Gallery.prototype.onContentChange_ = function(event) {
   var index = this.dataModel_.indexOf(event.item);
   if (index !== this.selectionModel_.selectedIndex)
     console.error('Content changed for unselected item');
   this.updateSelectionAndState_();
 };
 
 /**
  * Keydown handler.
  *
- * @param {Event} event Event.
+ * @param {!Event} event Event.
  * @private
  */
 Gallery.prototype.onKeyDown_ = function(event) {
   if (this.currentMode_.onKeyDown(event))
     return;
 
   switch (util.getKeyModifiers(event) + event.keyIdentifier) {
     case 'U+0008': // Backspace.
       // The default handler would call history.back and close the Gallery.
       event.preventDefault();
       break;
 
     case 'U+004D':  // 'm' switches between Slide and Mosaic mode.
-      this.toggleMode_(null, event);
+      this.toggleMode_(undefined, event);
       break;
 
     case 'U+0056':  // 'v'
     case 'MediaPlayPause':
       this.slideMode_.startSlideshow(SlideMode.SLIDESHOW_INTERVAL_FIRST, event);
       break;
 
     case 'U+007F':  // Delete
     case 'Shift-U+0033':  // Shift+'3' (Delete key might be missing).
     case 'U+0044':  // 'd'
       this.delete_();
       break;
 
     case 'U+001B':  // Escape
-      close();
+      window.close();
       break;
   }
 };
 
 // Name box and rename support.
 
 /**
  * Updates the UI related to the selected item and the persistent state.
  *
  * @private
@@ skipping 62 matching lines @@
 Gallery.prototype.onFilenameFocus_ = function() {
   ImageUtil.setAttribute(this.filenameSpacer_, 'renaming', true);
   this.filenameEdit_.originalValue = this.filenameEdit_.value;
   setTimeout(this.filenameEdit_.select.bind(this.filenameEdit_), 0);
   this.onUserAction_();
 };
 
 /**
  * Blur event handler on filename edit box.
  *
- * @param {Event} event Blur event.
- * @return {Promise} Promise fulfilled on renaming completed.
+ * @param {!Event} event Blur event.
  * @private
  */
 Gallery.prototype.onFilenameEditBlur_ = function(event) {
   var item = this.getSingleSelectedItem();
   if (item) {
     var oldEntry = item.getEntry();
 
     item.rename(this.filenameEdit_.value).then(function() {
       var event = new Event('content');
       event.item = item;
@@ skipping 10 matching lines @@
         this.prompt_.showStringAt('center', error, 5000);
       else
         return Promise.reject(error);
     }.bind(this)).catch(function(error) {
       console.error(error.stack || error);
     });
   }
 
   ImageUtil.setAttribute(this.filenameSpacer_, 'renaming', false);
   this.onUserAction_();
-  return Promise.resolve();
 };
 
 /**
  * Keydown event handler on filename edit box
+ * @param {!Event} event A keyboard event.
  * @private
  */
-Gallery.prototype.onFilenameEditKeydown_ = function() {
+Gallery.prototype.onFilenameEditKeydown_ = function(event) {
+  event = assertInstanceof(event, KeyboardEvent);
   switch (event.keyCode) {
     case 27:  // Escape
       this.filenameEdit_.value = this.filenameEdit_.originalValue;
       this.filenameEdit_.blur();
       break;
 
     case 13:  // Enter
       this.filenameEdit_.blur();
       break;
   }
@@ skipping 56 matching lines @@
 };
 
 /**
  * Singleton gallery.
  * @type {Gallery}
  */
 var gallery = null;
 
 /**
  * Initialize the window.
- * @param {Object} backgroundComponents Background components.
+ * @param {!BackgroundComponents} backgroundComponents Background components.
  */
 window.initialize = function(backgroundComponents) {
   window.loadTimeData.data = backgroundComponents.stringData;
   gallery = new Gallery(backgroundComponents.volumeManager);
 };
 
 /**
  * Loads entries.
  * @param {!Array.<Entry>} entries Array of entries.
  * @param {!Array.<Entry>} selectedEntries Array of selected entries.
  */
 window.loadEntries = function(entries, selectedEntries) {
   gallery.load(entries, selectedEntries);
 };