[filebrowser] First step to image editor.

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

 // Copyright (c) 2011 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.
 
 /**
  * ImageEditor is the top level object that holds together and connects
  * everything needed for image editing.
  * @param {HTMLElement} container
  * @param {function(Blob)} saveCallback
  * @param {function()} closeCallback
+ * @param {HTMLElement} toolbarContainer
  */
-function ImageEditor(container, saveCallback, closeCallback) {
+function ImageEditor(container, toolbarContainer, saveCallback, closeCallback) {
   this.container_ = container;
   this.saveCallback_ = saveCallback;
   this.closeCallback_ = closeCallback;
 
   this.container_.innerHTML = '';
 
   var document = this.container_.ownerDocument;
 
   this.canvasWrapper_ = document.createElement('div');
   this.canvasWrapper_.className = 'canvas-wrapper';
   container.appendChild(this.canvasWrapper_);
 
   var canvas = document.createElement('canvas');
   this.canvasWrapper_.appendChild(canvas);
   canvas.width = this.canvasWrapper_.clientWidth;
   canvas.height = this.canvasWrapper_.clientHeight;
 
   this.buffer_ = new ImageBuffer(canvas);
 
-  this.scaleControl_ = new ImageEditor.ScaleControl(
-      this.canvasWrapper_, this.getBuffer().getViewport());
+  // TODO(dgozman): consider adding a ScaleControl in v2.
 
   this.panControl_ = new ImageEditor.MouseControl(canvas, this.getBuffer());
 
-  this.toolbar_ =
-      new ImageEditor.Toolbar(container, this.onOptionsChange.bind(this));
+  this.toolbar_ = new ImageEditor.Toolbar(toolbarContainer,
+      this.onOptionsChange.bind(this));
   this.initToolbar();
 }
 
 /**
  * Create an ImageEditor instance bound to a current web page, load the content.
  *
  * Use this method when image_editor.html is loaded into an iframe.
  *
  * @param {function(Blob)} saveCallback
  * @param {function()} closeCallback
  * @param {HTMLCanvasElement|HTMLImageElement|String} source
  * @param {Object} opt_metadata
  * @return {ImageEditor}
  */
 ImageEditor.open = function(saveCallback, closeCallback, source, opt_metadata) {
   var container = document.getElementsByClassName('image-editor')[0];
-  var editor = new ImageEditor(container, saveCallback, closeCallback);
+  var toolbar = document.getElementsByClassName('toolbar-container')[0];
+  var editor = new ImageEditor(container, toolbar, saveCallback, closeCallback);
   if (ImageEditor.resizeListener) {
     // Make sure we do not leak the previous instance.
     window.removeEventListener('resize', ImageEditor.resizeListener, false);
   }
   ImageEditor.resizeListener = editor.resizeFrame.bind(editor);
   window.addEventListener('resize', ImageEditor.resizeListener, false);
   editor.load(source, opt_metadata);
   return editor;
 };
 
@@ skipping 44 matching lines @@
   if (this.currentMode_)
     this.currentMode_.update(options);
   ImageUtil.trace.reportTimer('update');
 };
 
 ImageEditor.prototype.initToolbar = function() {
   this.toolbar_.clear();
 
   this.createModeButtons();
   this.toolbar_.addButton('Save', this.save.bind(this, true));
-  this.toolbar_.addButton('Close', this.close.bind(this, false));
 };
 
 /**
  * ImageEditor.Mode represents a modal state dedicated to a specific operation.
  * Inherits from ImageBuffer.Overlay to simplify the drawing of
  * mode-specific tools.
  */
 
 ImageEditor.Mode = function(displayName) {
   this.displayName = displayName;
@@ skipping 418 matching lines @@
       values[child.name] = child.getValue();
   }
   return values;
 };
 
 ImageEditor.Toolbar.prototype.reset = function() {
   for (var child = this.wrapper_.firstChild; child; child = child.nextSibling) {
     if (child.reset) child.reset();
   }
 };