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

ui/file_manager/gallery/js/gallery.js

Index: ui/file_manager/gallery/js/gallery.js
diff --git a/ui/file_manager/gallery/js/gallery.js b/ui/file_manager/gallery/js/gallery.js
index 8db0e495568515fa03ec93c49f2d92cf87ed06ba..fa83ec6d3910b53d9fb15f08b81f0c0d40c6b01a 100644
--- a/ui/file_manager/gallery/js/gallery.js
+++ b/ui/file_manager/gallery/js/gallery.js
@@ -6,19 +6,18 @@
  * 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}

[fukino, 2014/12/12 15:15:25]

cannot this be const?

[yawano, 2014/12/15 01:45:24]

Added reply at ContentProvider.WORKER_SCRIPT of metadata_cache.js.

- * @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}
  */
@@ -27,7 +26,7 @@ function GalleryDataModel(metadataCache) {
 
   /**
    * Metadata cache.
-   * @type {MetadataCache}
+   * @type {!MetadataCache}
    * @private
    */
   this.metadataCache_ = metadataCache;
@@ -63,11 +62,11 @@ GalleryDataModel.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) {
@@ -137,9 +136,8 @@ GalleryDataModel.prototype.saveItem = function(
 
 /**
  * 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();
@@ -182,11 +180,23 @@ GalleryDataModel.prototype.evictCache = function(currentSelectedItem) {
  * @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())
@@ -199,9 +209,11 @@ function Gallery(volumeManager) {
     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;
@@ -221,109 +233,30 @@ function Gallery(volumeManager) {
   });
   this.selectionModel_ = new cr.ui.ListSelectionModel();
 
-  this.initDom_();
-  this.initListeners_();
-}
-
-/**
- * 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';
-
-/**
- * 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;
+  /**
+   * @type {(SlideMode|MosaicMode)}
+   * @private
+   */
+  this.currentMode_ = null;
 
-  if (this.volumeManager_.getVolumeInfo(this.selectedEntry_) ===
-      event.volumeInfo) {
-    close();
-  }
-};
+  /**
+   * @type {boolean}
+   * @private
+   */
+  this.changingMode_ = false;
 
-/**
- * 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 the UI.
 
-/**
- * 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(); };
 
@@ -348,7 +281,8 @@ Gallery.prototype.initDom_ = function() {
   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');
 
@@ -362,23 +296,23 @@ Gallery.prototype.initDom_ = function() {
   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));

[fukino, 2014/12/12 15:15:25]

'undefined' looks redundant

[yawano, 2014/12/15 01:45:24]

Interface of toggleMode_ is function(opt_callback, opt_event). In order to pass
the event to opt_event, I think we need to bind undefined to opt_callback here.

[fukino, 2014/12/15 02:15:28]

Sorry, I misunderstood the code. Thank you  for explanation!

 
   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,
@@ -413,6 +347,88 @@ Gallery.prototype.initDom_ = function() {
   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_);
 };
 
 /**
@@ -424,7 +440,7 @@ Gallery.prototype.initDom_ = function() {
  * @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;
 };
@@ -599,7 +615,7 @@ Gallery.prototype.executeWhenReady = function(callback) {
 };
 
 /**
- * @return {Object} File manager private API.
+ * @return {!Object} File manager private API.
  */
 Gallery.getFileManagerPrivate = function() {
   return chrome.fileManagerPrivate || window.top.chrome.fileManagerPrivate;
@@ -624,7 +640,7 @@ Gallery.prototype.onUserAction_ = function() {
 
 /**
  * Sets the current mode, update the UI.
- * @param {Object} mode Current mode.
+ * @param {!(SlideMode|MosaicMode)} mode Current mode.
  * @private
  */
 Gallery.prototype.setCurrentMode_ = function(mode) {
@@ -673,7 +689,7 @@ Gallery.prototype.toggleMode_ = function(opt_callback, opt_event) {
         tileRect,
         function() {
           // Animate back to normal position.
-          mosaic.transform();
+          mosaic.transform(null, null);
           mosaic.show();
           onModeChanged();
         }.bind(this));
@@ -743,11 +759,12 @@ Gallery.prototype.delete_ = function() {
       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(
@@ -755,7 +772,7 @@ Gallery.prototype.getSelectedItems = function() {
 };
 
 /**
- * @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) {
@@ -793,7 +810,7 @@ Gallery.prototype.onSplice_ = function() {
 
 /**
  * Content change event handler.
- * @param {Event} event Event.
+ * @param {!Event} event Event.
  * @private
 */
 Gallery.prototype.onContentChange_ = function(event) {
@@ -806,7 +823,7 @@ Gallery.prototype.onContentChange_ = function(event) {
 /**
  * Keydown handler.
  *
- * @param {Event} event Event.
+ * @param {!Event} event Event.
  * @private
  */
 Gallery.prototype.onKeyDown_ = function(event) {
@@ -820,7 +837,7 @@ Gallery.prototype.onKeyDown_ = function(event) {
       break;
 
     case 'U+004D':  // 'm' switches between Slide and Mosaic mode.
-      this.toggleMode_(null, event);
+      this.toggleMode_(undefined, event);
       break;
 
     case 'U+0056':  // 'v'
@@ -835,7 +852,7 @@ Gallery.prototype.onKeyDown_ = function(event) {
       break;
 
     case 'U+001B':  // Escape
-      close();
+      window.close();
       break;
   }
 };
@@ -918,8 +935,7 @@ Gallery.prototype.onFilenameFocus_ = function() {
 /**
  * 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) {
@@ -950,14 +966,15 @@ Gallery.prototype.onFilenameEditBlur_ = function(event) {
 
   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;
@@ -1034,7 +1051,7 @@ 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;