Gallery: Add debugMe method to Gallery.

ui/file_manager/gallery/js/mosaic_mode.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.
 
 /**
  * @param {!Element} container Content container.
  * @param {!ErrorBanner} errorBanner Error banner.
  * @param {!cr.ui.ArrayDataModel} dataModel Data model.
  * @param {!cr.ui.ListSelectionModel} selectionModel Selection model.
  * @param {!VolumeManager} volumeManager Volume manager.
@@ skipping 50 matching lines @@
       if (!document.activeElement ||
           document.activeElement.localName !== 'button') {
         this.toggleMode_();
         event.preventDefault();
       }
       return;
   }
   this.mosaic_.onKeyDown(event);
 };
 
+/**
+ * Enters the debug mode.
+ */
+MosaicMode.prototype.debugMe = function() {
+  this.mosaic_.debugMe();
+};
+
 ////////////////////////////////////////////////////////////////////////////////
 
 /**
  * Mosaic control.
  *
  * @param {!Document} document Document.
  * @param {!ErrorBanner} errorBanner Error banner.
  * @param {!cr.ui.ArrayDataModel} dataModel Data model.
  * @param {!cr.ui.ListSelectionModel} selectionModel Selection model.
  * @param {!VolumeManager} volumeManager Volume manager.
@@ skipping 645 matching lines @@
 };
 
 /**
  * @return {number} Item count
  * @private
  */
 Mosaic.prototype.getItemCount_ = function() {
   return this.dataModel_.length;
 };
 
+/**
+ * Enters the debug me.
+ */
+Mosaic.prototype.debugMe = function() {
+  this.classList.add('debug-me');
+};
+
 ////////////////////////////////////////////////////////////////////////////////
 
 /**
  * Creates a selection controller that is to be used with grid.
  * @param {!cr.ui.ListSelectionModel} selectionModel The selection model to
  *     interact with.
  * @param {!Mosaic.Layout} layoutModel The layout model to use.
  * @constructor
  * @struct
  * @extends {cr.ui.ListSelectionController}
@@ skipping 1385 matching lines @@
   // specified loader.
   var finalizeLoader = function(mode, success, loader) {
     if (success && this.wrapper_) {
       // Show the fade-in animation only when previously there was no image
       // attached in this tile.
       if (!this.imageLoaded_ && !this.imagePreloaded_)
         this.wrapper_.classList.add('animated');
       else
         this.wrapper_.classList.remove('animated');
     }
+
+    // Add debug mode classes.
+    this.wrapper_.classList.remove('load-target-content-metadata');
+    this.wrapper_.classList.remove('load-target-external-metadata');
+    this.wrapper_.classList.remove('load-target-file-entry');
+    switch (loader.getLoadTarget()) {
+      case ThumbnailLoader.LoadTarget.CONTENT_METADATA:
+        this.wrapper_.classList.add('load-target-content-metadata');
+        break;
+      case ThumbnailLoader.LoadTarget.EXTERNAL_METADATA:
+        this.wrapper_.classList.add('load-target-external-metadata');
+        break;
+      case ThumbnailLoader.LoadTarget.FILE_ENTRY:
+        this.wrapper_.classList.add('load-target-file-entry');
+        break;
+    }
     loader.attachImage(this.wrapper_, ThumbnailLoader.FillMode.OVER_FILL);
     onImageLoaded(success);
+
     switch (mode) {
       case Mosaic.Tile.LoadMode.LOW_DPI:
         this.imagePreloading_ = false;
         this.imagePreloaded_ = true;
         break;
       case Mosaic.Tile.LoadMode.HIGH_DPI:
         this.imageLoading_ = false;
         this.imageLoaded_ = true;
         break;
     }
@@ skipping 129 matching lines @@
   return new ImageRect(this.left_ - this.container_.scrollLeft, this.top_,
       this.width_, this.height_).inflate(-margin, -margin);
 };
 
 /**
  * @return {number} X coordinate of the tile center.
  */
 Mosaic.Tile.prototype.getCenterX = function() {
   return this.left_ + Math.round(this.width_ / 2);
 };