[filemanager] Content metadata moved to the cache.

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

 // Copyright (c) 2012 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 16 matching lines @@
 
   this.butterTimer_ = null;
   this.currentButter_ = null;
   this.butterLastShowTime_ = 0;
 
   this.filesystemObserverId_ = null;
   this.gdataObserverId_ = null;
 
   this.commands_ = {};
 
-  this.thumbnailUrlCache_ = {};
-
   this.document_ = dialogDom.ownerDocument;
   this.dialogType_ = this.params_.type || FileManager.DialogType.FULL_PAGE;
 
   metrics.recordEnum('Create', this.dialogType_,
       [FileManager.DialogType.SELECT_FOLDER,
       FileManager.DialogType.SELECT_SAVEAS_FILE,
       FileManager.DialogType.SELECT_OPEN_FILE,
       FileManager.DialogType.SELECT_OPEN_MULTI_FILE,
       FileManager.DialogType.FULL_PAGE]);
 
@@ skipping 212 matching lines @@
    * FileWatcher that also watches for metadata changes.
    * @extends {FileWatcher}
    */
   FileManager.MetadataFileWatcher = function(fileManager) {
     FileWatcher.call(this,
                      fileManager.filesystem_.root,
                      fileManager.directoryModel_,
                      fileManager.volumeManager_);
     this.metadataCache_ = fileManager.metadataCache_;
 
-    this.filesystemChanngeHandler_ =
+    this.filesystemChangeHandler_ =
         fileManager.updateMetadataInUI_.bind(fileManager, 'filesystem');
-    this.gdataChanngeHandler_ =
+    this.thumbnailChangeHandler_ =
+        fileManager.updateMetadataInUI_.bind(fileManager, 'thumbnail');
+    this.gdataChangeHandler_ =
         fileManager.updateMetadataInUI_.bind(fileManager, 'gdata');
 
     this.filesystemObserverId_ = null;
+    this.thumbnailObserverId_ = null;
     this.gdataObserverId_ = null;
 
     // Holds the directories known to contain files with stale metadata
     // as URL to bool map.
     this.directoriesWithStaleMetadata_ = {};
   };
 
   FileManager.MetadataFileWatcher.prototype.__proto__ = FileWatcher.prototype;
 
   /**
    * Changed metadata observers for the new directory.
    * @override
    * @param {DirectoryEntryi?} entry New watched directory entry.
    * @override
    */
   FileManager.MetadataFileWatcher.prototype.changeWatchedEntry =
       function(entry) {
     FileWatcher.prototype.changeWatchedEntry.call(this, entry);
 
     if (this.filesystemObserverId_)
       this.metadataCache_.removeObserver(this.filesystemObserverId_);
+    if (this.thumbnailObserverId_)
+      this.metadataCache_.removeObserver(this.thumbnailObserverId_);
     if (this.gdataObserverId_)
       this.metadataCache_.removeObserver(this.gdataObserverId_);
     this.filesystemObserverId_ = null;
     this.gdataObserverId_ = null;
     if (!entry)
       return;
 
     this.filesystemObserverId_ = this.metadataCache_.addObserver(
         entry,
         MetadataCache.CHILDREN,
         'filesystem',
-        this.filesystemChanngeHandler_);
+        this.filesystemChangeHandler_);
+
+    this.thumbnailObserverId_ = this.metadataCache_.addObserver(
+        entry,
+        MetadataCache.CHILDREN,
+        'thumbnail',
+        this.thumbnailChangeHandler_);
 
     if (DirectoryModel.getRootType(entry.fullPath) ==
         DirectoryModel.RootType.GDATA) {
       this.gdataObserverId_ = this.metadataCache_.addObserver(
           entry,
           MetadataCache.CHILDREN,
           'gdata',
-          this.gdataChanngeHandler_);
+          this.gdataChangeHandler_);
     }
   };
 
   /**
    * @override
    */
   FileManager.MetadataFileWatcher.prototype.onFileInWatchedDirectoryChanged =
       function() {
     FileWatcher.prototype.onFileInWatchedDirectoryChanged.apply(this);
     delete this.directoriesWithStaleMetadata_[
@@ skipping 101 matching lines @@
   };
 
   /**
    * Continue initializing the file manager after resolving roots.
    */
   FileManager.prototype.init_ = function() {
     metrics.startInterval('Load.DOM');
     this.initCommands_();
 
     this.metadataCache_ = MetadataCache.createFull();
+    // PyAuto tests monitor this state by polling this variable
+    this.__defineGetter__('workerInitialized_', function() {
+       return this.metadataCache_.isInitialized();
+    }.bind(this));
 
     this.dateFormatter_ = v8Intl.DateTimeFormat(
         {} /* default locale */,
         {year: 'numeric', month: 'short', day: 'numeric',
          hour: 'numeric', minute: 'numeric'});
     this.timeFormatter_ = v8Intl.DateTimeFormat(
         {} /* default locale */,
         {hour: 'numeric', minute: 'numeric'});
 
     this.collator_ = this.locale_.createCollator({
@@ skipping 49 matching lines @@
 
     var sortField =
         window.localStorage['sort-field-' + this.dialogType_] ||
         'modificationTime';
     var sortDirection =
         window.localStorage['sort-direction-' + this.dialogType_] || 'desc';
     this.directoryModel_.sortFileList(sortField, sortDirection);
 
     this.refocus();
 
-    this.metadataProvider_ =
-        new MetadataProvider(this.filesystem_.root.toURL());
-
-    // PyAuto tests monitor this state by polling this variable
-    this.__defineGetter__('workerInitialized_', function() {
-       return self.getMetadataProvider().isInitialized();
-    });
-
     if (this.dialogType_ == FileManager.DialogType.FULL_PAGE)
       this.initDataTransferOperations_();
 
     this.table_.endBatchUpdates();
     this.grid_.endBatchUpdates();
 
     // Show the page now unless it's already delayed.
     this.delayShow_(0);
 
     metrics.recordInterval('Load.DOM');
@@ skipping 1215 matching lines @@
   };
 
   /**
    * Create a box containing a centered thumbnail image.
    *
    * @param {Entry} entry Entry which thumbnail is generating for.
    * @param {boolean} True if fill, false if fit.
    * @param {function(HTMLElement)} opt_imageLoadCallback Callback called when
    *                                the image has been loaded before inserting
    *                                it into the DOM.
-   * @return {HTMLDivElement} Thumbnal box.
+   * @param {HTMLDivElement=} opt_box Existing box to render in.
+   * @return {HTMLDivElement} Thumbnail box.
    */
-  FileManager.prototype.renderThumbnailBox_ = function(entry, fill,
-                                                       opt_imageLoadCallback) {
-    var box = this.document_.createElement('div');
-    box.className = 'img-container';
-    var img = this.document_.createElement('img');
+  FileManager.prototype.renderThumbnailBox_ = function(
+      entry, fill, opt_imageLoadCallback, opt_box) {
     var self = this;
 
+    var box;
+    if (opt_box) {
+      box = opt_box;
+    } else {
+      box = this.document_.createElement('div');
+      box.className = 'img-container';
+    }
+    var img = box.querySelector('img') || this.document_.createElement('img');
+
     function onThumbnailURL(iconType, url, transform) {
-      self.thumbnailUrlCache_[entry.fullPath] = {
-        iconType: iconType,
-        url: url,
-        transform: transform
-      };
       img.onload = function() {
         self.centerImage_(img.style, img.width, img.height, fill);
         if (opt_imageLoadCallback)
           opt_imageLoadCallback(img, transform);
-        box.appendChild(img);
+        if (img.parentNode != box)
+          box.appendChild(img);
       };
       img.onerror = function() {
         // Use the default icon if we could not fetch the correct one.
         img.src = FileType.getPreviewArt(iconType);
         transform = null;
         util.applyTransform(box, transform);
 
-        var cached = self.thumbnailUrlCache_[entry.fullPath];
-        if (!cached.failed) {
-          cached.failed = true;
-          // Failing to fetch a thumbnail likely means that the thumbnail URL
-          // is now stale. Request a refresh of the current directory, to get
-          // the new thumbnail URLs. Once the directory is refreshed, we'll get
-          // notified via onFileChanged event.
-          self.fileWatcher_.requestMetadataRefresh(entry);
-        }
+        // Failing to fetch a thumbnail likely means that the thumbnail URL
+        // is now stale. Request a refresh of the current directory, to get
+        // the new thumbnail URLs. Once the directory is refreshed, we'll get
+        // notified via onFileChanged event.
+        self.fileWatcher_.requestMetadataRefresh(entry);
       };
       img.src = url;
       util.applyTransform(box, transform);
     }
 
-    // TODO(dgozman): move to new metadata cache.
-    var cached = this.thumbnailUrlCache_[entry.fullPath];
-    // Don't reuse the cached URL if we are now retrying.
-    if (cached && !cached.failed)
-      onThumbnailURL(cached.iconType, cached.url, cached.transform);
-    else {
-      if (cached && cached.failed) {
-        delete cached.failed;
-        this.metadataProvider_.reset(entry.toURL());  // Clear the cache.
-      }
-      this.getThumbnailURL(entry, onThumbnailURL);
-    }
+    this.getThumbnailURL(entry, onThumbnailURL);
 
     return box;
   };
 
   FileManager.prototype.decorateThumbnail_ = function(li, entry) {
     li.className = 'thumbnail-item';
 
     if (this.showCheckboxes_)
       li.appendChild(this.renderSelectionCheckbox_(entry));
 
@@ skipping 288 matching lines @@
     if (!checkbox) return;
     checkbox.style.display = '';
     checkbox.checked = gdata.pinned;
   };
 
   FileManager.prototype.refreshCurrentDirectoryMetadata_ = function() {
     var entries = this.directoryModel_.getFileList().slice();
     // We don't pass callback here. When new metadata arrives, we have an
     // observer registered to update the UI.
 
-    this.metadataCache_.clear(entries, 'filesystem');
-    this.metadataCache_.get(entries, 'filesystem', null);
+    // TODO(dgozman): refresh content metadata only when modificationTime
+    // changed.
+    this.metadataCache_.clear(entries, 'filesystem|thumbnail|media');
+    this.metadataCache_.get(entries, 'filesystem|thumbnail', null);
     if (this.isOnGData()) {
       this.metadataCache_.clear(entries, 'gdata');
       this.metadataCache_.get(entries, 'gdata', null);
     }
   };
 
   FileManager.prototype.dailyUpdateModificationTime_ = function() {
     var fileList = this.directoryModel_.getFileList();
     var urls = [];
     for (var i = 0; i < fileList.length; i++) {
       urls.push(fileList.item(i).toURL());
     }
     this.metadataCache_.get(
         fileList.slice(), 'filesystem',
         this.updateMetadataInUI_.bind(this, 'filesystem', urls));
 
     setTimeout(this.dailyUpdateModificationTime_.bind(this),
                MILLISECONDS_IN_DAY);
   };
 
   FileManager.prototype.updateMetadataInUI_ = function(
       type, urls, properties) {
-    if (this.listType_ != FileManager.ListType.DETAIL) return;
+    var isDetail = this.listType_ == FileManager.ListType.DETAIL;
+    var isThumbnail = this.listType_ == FileManager.ListType.THUMBNAIL;
 
     var items = {};
     var entries = {};
     var dm = this.directoryModel_.getFileList();
     for (var index = 0; index < dm.length; index++) {
       var listItem = this.currentList_.getListItemByIndex(index);
       if (!listItem) continue;
       var entry = dm.item(index);
       var url = entry.toURL();
       items[url] = listItem;
       entries[url] = entry;
     }
 
     for (var index = 0; index < urls.length; index++) {
       var url = urls[index];
       if (!(url in items)) continue;
       var listItem = items[url];
       var entry = entries[url];
       var props = properties[index];
-      if (type == 'filesystem') {
+      if (type == 'filesystem' && isDetail) {
         this.updateDate_(listItem.querySelector('.date'), props);
         this.updateSize_(listItem.querySelector('.size'), entry, props);
       } else if (type == 'gdata') {
-        var offline = listItem.querySelector('.offline');
-        if (offline)  // This column is only present in full page mode.
-          this.updateOffline_(offline, props);
+        if (isDetail) {
+          var offline = listItem.querySelector('.offline');
+          if (offline)  // This column is only present in full page mode.
+            this.updateOffline_(offline, props);
+        }
         this.updateGDataStyle_(listItem, entry, props);
+      } else if (type == 'thumbnail' && isThumbnail) {
+        var box = listItem.querySelector('.img-container');
+        this.renderThumbnailBox_(entry, false /* fit, not fill */,
+                                 null /* callback */, box);
       }
     }
   };
 
   /**
    * Restore the item which is being renamed while refreshing the file list. Do
    * nothing if no item is being renamed or such an item disappeared.
    *
    * While refreshing file list it gets repopulated with new file entries.
    * There is not a big difference wether DOM items stay the same or not.
@@ skipping 317 matching lines @@
     function setVisibility(visibility) {
       panel.setAttribute('visibility', visibility);
     }
   };
 
   FileManager.prototype.isOnGData = function() {
     return this.directoryModel_.getCurrentRootType() ==
            DirectoryModel.RootType.GDATA;
   };
 
-  FileManager.prototype.getMetadataProvider = function() {
-    return this.metadataProvider_;
-  };
-
   /**
    * Creates combobox item based on task.
    * @param {Object} task Task to convert.
    * @return {Object} Item appendable to combobox drop-down list.
    */
   FileManager.prototype.createComboboxItem_ = function(task) {
     return { label: task.title, iconUrl: task.iconUrl, task: task };
   }
 
   /**
@@ skipping 482 matching lines @@
       var context = {
         // We show the root label in readonly warning (e.g. archive name).
         readonlyDirName:
             readonly ?
                 (self.isOnGData() ?
                     self.getRootLabel_(
                         DirectoryModel.getRootPath(currentDir.fullPath)) :
                     self.directoryModel_.getRootName()) :
                 null,
         saveDirEntry: readonly ? downloadsDir : currentDir,
-        metadataProvider: self.getMetadataProvider(),
+        rootUrl: self.filesystem_.root.toURL(),
         getShareActions: self.getShareActions_.bind(self),
         onNameChange: function(name) {
           self.document_.title = gallerySelection = name;
           self.updateLocation_(true /*replace*/, dirPath + '/' + name);
         },
         onClose: function() {
           if (singleSelection)
             self.directoryModel_.selectEntry(gallerySelection);
           history.back(1);
         },
@@ skipping 143 matching lines @@
     currentWidth = Math.min(currentWidth,
                             containerWidth - pathWidth - collapsedWidth);
     bc.lastChild.style.width = (currentWidth - lastCrumbSeparatorWidth) + 'px';
   };
 
   FileManager.prototype.getThumbnailURL = function(entry, callback) {
     if (!entry)
       return;
 
     var iconType = FileType.getIcon(entry);
+    var metadataCache = this.metadataCache_;
 
     function returnStockIcon() {
-      callback(iconType, FileType.getPreviewArt(iconType));
+      callback(iconType, FileType.getPreviewArt(iconType), '');
     }
 
-    var self = this;
-    this.getMetadataProvider().fetch(entry.toURL(), function(metadata) {
-      if (metadata.thumbnailURL) {
-        callback(iconType, metadata.thumbnailURL,
-                 metadata.thumbnailTransform);
+    function tryUsingImageUrl() {
+      metadataCache.get(entry, 'filesystem|media', function(metadata) {
+        if (FileType.canUseImageUrlForPreview(
+                metadata.media.width,
+                metadata.media.height,
+                metadata.filesystem.size)) {
+          callback(iconType, entry.toURL(), metadata.media.imageTransform);
+        } else {
+          returnStockIcon();
+        }
+      });
+    }
+
+    metadataCache.get(entry, 'thumbnail', function(thumbnail) {
+      if (thumbnail) {
+        callback(iconType, thumbnail.url, thumbnail.transform);
       } else if (iconType == 'image') {
-        self.metadataCache_.get(entry, 'filesystem', function(filesystem) {
-          if (FileType.canUseImageUrlForPreview(metadata, filesystem.size)) {
-            callback(iconType, entry.toURL(), metadata.imageTransform);
-          } else {
-            returnStockIcon();
-          }
-        });
+        tryUsingImageUrl();
       } else {
         returnStockIcon();
       }
     });
   };
 
   FileManager.prototype.focusCurrentList_ = function() {
     if (this.listType_ == FileManager.ListType.DETAIL)
       this.table_.focus();
     else  // this.listType_ == FileManager.ListType.THUMBNAIL)
@@ skipping 176 matching lines @@
       if (this.selection &&
           this.selection.totalCount == 1 &&
           this.selection.entries[0].isFile &&
           this.filenameInput_.value != this.selection.entries[0].name) {
         this.filenameInput_.value = this.selection.entries[0].name;
       }
     }
 
     this.updateOkButton_();
 
-    var newThumbnailUrlCache = {};
-    if (this.selection) {
-      var entries = this.selection.entries;
-      for (var i = 0; i < entries.length; i++) {
-        var path = entries[i].fullPath;
-        if (path in this.thumbnailUrlCache_)
-          newThumbnailUrlCache[path] = this.thumbnailUrlCache_[path];
-      }
-    }
-    this.thumbnailUrlCache_ = newThumbnailUrlCache;
-
     setTimeout(this.onSelectionChangeComplete_.bind(this, event), 0);
   };
 
   /**
    * Handle selection change related tasks that won't run properly during
    * the actual selection change event.
    */
   FileManager.prototype.onSelectionChangeComplete_ = function(event) {
     // Inform tests it's OK to click buttons now.
     chrome.test.sendMessage('selection-change-complete');
@@ skipping 1201 matching lines @@
     function closeBanner() {
       self.cleanupGDataWelcome_();
       // Stop showing the welcome banner.
       localStorage[WELCOME_HEADER_COUNTER_KEY] = WELCOME_HEADER_COUNTER_LIMIT;
     }
 
     return maybeShowBanner;
   };
 })();