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

ui/file_manager/gallery/js/ribbon.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.
 
 /**
  * Scrollable thumbnail ribbon at the bottom of the Gallery in the Slide mode.
  *
- * @param {Document} document Document.
- * @param {cr.ui.ArrayDataModel} dataModel Data model.
- * @param {cr.ui.ListSelectionModel} selectionModel Selection model.
- * @return {Element} Ribbon element.
+ * @param {!Document} document Document.
+ * @param {!cr.ui.ArrayDataModel} dataModel Data model.
+ * @param {!cr.ui.ListSelectionModel} selectionModel Selection model.
+ * @return {!HTMLElement} Ribbon element.
+ * @extends {HTMLElement}
  * @constructor
+ * @suppress {checkStructDictInheritance}
+ * @struct
  */
 function Ribbon(document, dataModel, selectionModel) {
-  var self = document.createElement('div');
+  var self = assertInstanceof(document.createElement('div'), HTMLElement);
   Ribbon.decorate(self, dataModel, selectionModel);
   return self;
 }
 
 /**
  * Inherit from HTMLDivElement.
  */
 Ribbon.prototype.__proto__ = HTMLDivElement.prototype;
 
 /**
  * Decorate a Ribbon instance.
  *
- * @param {Ribbon} self Self pointer.
- * @param {cr.ui.ArrayDataModel} dataModel Data model.
- * @param {cr.ui.ListSelectionModel} selectionModel Selection model.
+ * @param {!HTMLElement} self Self pointer.
+ * @param {!cr.ui.ArrayDataModel} dataModel Data model.
+ * @param {!cr.ui.ListSelectionModel} selectionModel Selection model.
  */
 Ribbon.decorate = function(self, dataModel, selectionModel) {
   self.__proto__ = Ribbon.prototype;
+  self = /** @type{!Ribbon} */ (self);
   self.dataModel_ = dataModel;
   self.selectionModel_ = selectionModel;
 
+  /** @type {!Object} */ self.renderCache_ = {};

[fukino, 2014/11/13 07:14:26]

I like the following style to be consistent with other classes.

/** @type {!Object} */
self.renderCache_ = {};

[yawano, 2014/11/13 08:18:52]

Done.

+  /** @type {number} */ self.firstVisibleIndex_ = 0;
+  /** @type {number} */ self.lastVisibleIndex_ = -1;
+  /** @type {?function(!Event)} */ self.onContentBound_ = null;
+  /** @type {?function(!Event)} */ self.onSpliceBound_ = null;
+  /** @type {?function(!Event)} */ self.onSelectionBound_ = null;
+  /** @type {?number}*/ self.removeTimeout_ = null;
+
   self.className = 'ribbon';
 };
 
 /**
  * Max number of thumbnails in the ribbon.
- * @type {number}
+ * @type {!number}

[fukino, 2014/11/13 07:14:26]

number (and string, function) are non-nullable by default, so we don't need '!'.
See the Q&A part of
https://docs.google.com/document/d/1Q8ClzNzg5TEi5AM2iwABfWOSGfapuW9POeeyN67Wm...

[yawano, 2014/11/13 08:18:52]

Done.

+ * @const
  */
 Ribbon.ITEMS_COUNT = 5;
 
 /**
  * Force redraw the ribbon.
  */
 Ribbon.prototype.redraw = function() {
   this.onSelection_();
 };
 
@@ skipping 30 matching lines @@
   this.dataModel_.removeEventListener('content', this.onContentBound_);
   this.dataModel_.removeEventListener('splice', this.onSpliceBound_);
   this.selectionModel_.removeEventListener('change', this.onSelectionBound_);
 
   this.removeVanishing_();
   this.textContent = '';
 };
 
 /**
  * Data model splice handler.
- * @param {Event} event Event.
+ * @param {!Event} event Event.
  * @private
  */
 Ribbon.prototype.onSplice_ = function(event) {
   if (event.removed.length > 1) {
     console.error('Cannot remove multiple items.');
     return;
   }
 
   if (event.removed.length > 0 && event.added.length > 0) {
     console.error('Replacing is not implemented.');
@@ skipping 186 matching lines @@
   var vanishingNodes = this.querySelectorAll('[vanishing]');
   for (var i = 0; i != vanishingNodes.length; i++) {
     vanishingNodes[i].removeAttribute('vanishing');
     this.removeChild(vanishingNodes[i]);
   }
 };
 
 /**
  * Create a DOM element for a thumbnail.
  *
- * @param {number} index Item index.
- * @return {Element} Newly created element.
+ * @param {!number} index Item index.

[fukino, 2014/11/13 07:14:26]

ditto

[yawano, 2014/11/13 08:18:52]

Done.

+ * @return {!Element} Newly created element.
  * @private
  */
 Ribbon.prototype.renderThumbnail_ = function(index) {
   var item = this.dataModel_.item(index);
   var url = item.getEntry().toURL();
 
   var cached = this.renderCache_[url];
   if (cached) {
     var img = cached.querySelector('img');
     if (img)
@@ skipping 16 matching lines @@
   // TODO: Implement LRU eviction.
   // Never evict the thumbnails that are currently in the DOM because we rely
   // on this cache to find them by URL.
   this.renderCache_[url] = thumbnail;
   return thumbnail;
 };
 
 /**
  * Set the thumbnail image.
  *
- * @param {Element} thumbnail Thumbnail element.
- * @param {Gallery.Item} item Gallery item.
+ * @param {!Element} thumbnail Thumbnail element.
+ * @param {!Gallery.Item} item Gallery item.
  * @private
  */
 Ribbon.prototype.setThumbnailImage_ = function(thumbnail, item) {
   var loader = new ThumbnailLoader(
       item.getEntry(),
       ThumbnailLoader.LoaderType.IMAGE,
       item.getMetadata());
   loader.load(
       thumbnail.querySelector('.image-wrapper'),
       ThumbnailLoader.FillMode.FILL /* fill */,
       ThumbnailLoader.OptimizationMode.NEVER_DISCARD);
 };
 
 /**
  * Content change handler.
  *
- * @param {Event} event Event.
+ * @param {!Event} event Event.
  * @private
  */
 Ribbon.prototype.onContentChange_ = function(event) {
   var url = event.item.getEntry().toURL();
   if (event.oldEntry.toURL() !== url)
     this.remapCache_(event.oldEntry.toURL(), url);
 
   var thumbnail = this.renderCache_[url];
   if (thumbnail && event.item)
     this.setThumbnailImage_(thumbnail, event.item);
 };
 
 /**
  * Update the thumbnail element cache.
  *
- * @param {string} oldUrl Old url.
- * @param {string} newUrl New url.
+ * @param {!string} oldUrl Old url.

[fukino, 2014/11/13 07:14:26]

ditto

[yawano, 2014/11/13 08:18:52]

Done.

+ * @param {!string} newUrl New url.

[fukino, 2014/11/13 07:14:26]

ditto

[yawano, 2014/11/13 08:18:52]

Done.

  * @private
  */
 Ribbon.prototype.remapCache_ = function(oldUrl, newUrl) {
   if (oldUrl != newUrl && (oldUrl in this.renderCache_)) {
     this.renderCache_[newUrl] = this.renderCache_[oldUrl];
     delete this.renderCache_[oldUrl];
   }
 };