Adding simple filters to ChromeOS Image Editor.

chrome/browser/resources/file_manager/js/image_editor/image_buffer.js

Index: chrome/browser/resources/file_manager/js/image_editor/image_buffer.js
diff --git a/chrome/browser/resources/file_manager/js/image_editor/image_buffer.js b/chrome/browser/resources/file_manager/js/image_editor/image_buffer.js
index 75bb05e8c555aaa5e1b403c966358562e42fb47c..88049f609870142e9e88ef379b90ad1d0e7c1b03 100644
--- a/chrome/browser/resources/file_manager/js/image_editor/image_buffer.js
+++ b/chrome/browser/resources/file_manager/js/image_editor/image_buffer.js
@@ -191,7 +191,8 @@ ImageBuffer.Margin.prototype.draw = function(context) {
   Rect.fillBetween(context,
       this.viewport_.getImageBoundsOnScreen(),
       this.viewport_.getScreenBounds());
-  Rect.stroke(context, this.viewport_.getImageBoundsOnScreen());
+
+  Rect.outline(context, this.viewport_.getImageBoundsOnScreen());
   context.restore();
 };
 
@@ -342,27 +343,23 @@ ImageBuffer.Overview.prototype.update = function() {
     this.contentGeneration_ = this.content_.getCacheGeneration();
 
     var aspect = imageBounds.width / imageBounds.height;
-    if (aspect > 1) {
-      this.bounds_ = new Rect(ImageBuffer.Overview.MAX_SIZE,
-                              ImageBuffer.Overview.MAX_SIZE / aspect);
-    } else {
-      this.bounds_ = new Rect(ImageBuffer.Overview.MAX_SIZE * aspect,
-                              ImageBuffer.Overview.MAX_SIZE);
-    }
 
-    this.canvas_ =
-        this.content_.copyCanvas(this.bounds_.width, this.bounds_.height);
+    this.canvas_ = this.content_.copyCanvas(
+        ImageBuffer.Overview.MAX_SIZE * Math.min(aspect, 1),
+        ImageBuffer.Overview.MAX_SIZE / Math.max(aspect, 1));
   }
 
+  this.bounds_ = null;
   this.clipped_ = null;
 
   if (this.viewport_.isClipped()) {
     var screenBounds = this.viewport_.getScreenBounds();
 
-    this.bounds_ = this.bounds_.moveTo(
-        screenBounds.width - ImageBuffer.Overview.RIGHT - this.bounds_.width,
-        screenBounds.height - ImageBuffer.Overview.BOTTOM -
-            this.bounds_.height);
+    this.bounds_ = new Rect(
+        screenBounds.width - ImageBuffer.Overview.RIGHT - this.canvas_.width,
+        screenBounds.height - ImageBuffer.Overview.BOTTOM - this.canvas_.height,
+        this.canvas_.width,
+        this.canvas_.height);
 
     this.scale_ = this.bounds_.width / imageBounds.width;
 
@@ -380,10 +377,6 @@ ImageBuffer.Overview.prototype.draw = function(context) {
   // Draw the thumbnail.
   Rect.drawImage(context, this.canvas_, this.bounds_);
 
-  // Draw the thumbnail border.
-  context.strokeStyle = '#000000';
-  Rect.stroke(context, this.bounds_);
-
   // Draw the shadow over the off-screen part of the thumbnail.
   context.globalAlpha = 0.3;
   context.fillStyle = '#000000';
@@ -391,14 +384,19 @@ ImageBuffer.Overview.prototype.draw = function(context) {
 
   // Outline the on-screen part of the thumbnail.
   context.strokeStyle = '#FFFFFF';
-  Rect.stroke(context, this.clipped_);
+  Rect.outline(context, this.clipped_);
+
+  context.globalAlpha = 1;
+  // Draw the thumbnail border.
+  context.strokeStyle = '#000000';
+  Rect.outline(context, this.bounds_);
 };
 
 ImageBuffer.Overview.prototype.getCursorStyle = function(x, y) {
   if (!this.bounds_ || !this.bounds_.inside(x, y)) return null;
 
   // Indicate that the on-screen part is draggable.
-  if (this.clipped_.inside(x, y)) return 'move';
+  if (this.clipped_ && this.clipped_.inside(x, y)) return 'move';
 
   // Indicate that the rest of the thumbnail is clickable.
   return 'crosshair';