Moved ChromeOS Image Editor into an iframe.

chrome/browser/resources/file_manager/js/file_manager.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.
 
 const EMPTY_IMAGE_URI = 'data:image/gif;base64,'
         + 'R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw%3D%3D';
 
 var g_slideshow_data = null;
 
 const IMAGE_EDITOR_ENABLED = false;
@@ skipping 506 matching lines @@
     this.previewMetadata_ = this.dialogDom_.querySelector('.preview-metadata');
     this.filenameInput_ = this.dialogDom_.querySelector('.filename-input');
     this.taskButtons_ = this.dialogDom_.querySelector('.task-buttons');
     this.okButton_ = this.dialogDom_.querySelector('.ok');
     this.cancelButton_ = this.dialogDom_.querySelector('.cancel');
     this.newFolderButton_ = this.dialogDom_.querySelector('.new-folder');
 
     this.renameInput_ = this.document_.createElement('input');
     this.renameInput_.className = 'rename';
 
-    this.imageEditorFrame_ = this.document_.createElement('div');
-    this.imageEditorFrame_.className = 'image-editor';
-    this.imageEditorFrame_.style.display = 'none';
-    this.dialogDom_.appendChild(this.imageEditorFrame_);
-
     this.renameInput_.addEventListener(
         'keydown', this.onRenameInputKeyDown_.bind(this));
     this.renameInput_.addEventListener(
         'blur', this.onRenameInputBlur_.bind(this));
 
     this.filenameInput_.addEventListener(
         'keyup', this.onFilenameInputKeyUp_.bind(this));
     this.filenameInput_.addEventListener(
         'focus', this.onFilenameInputFocus_.bind(this));
 
@@ skipping 815 matching lines @@
   };
 
   FileManager.prototype.onFileTaskExecute_ = function(id, details) {
     var urls = details.entries.map(function(entry) {
         return entry.toURL();
     });
     if (id == 'preview') {
       g_slideshow_data = urls;
       chrome.tabs.create({url: "slideshow.html"});
     } else if (id == 'edit') {
-      this.imageEditorFrame_.style.display = 'block';
-      this.imageEditor_ = new ImageEditor(
-          this.imageEditorFrame_,
-          this.onImageEditorSave.bind(this, details.entries[0]),
-          this.onImageEditorClose.bind(this));
-      this.imageEditor_.getBuffer().load(urls[0]);
+      this.openImageEditor_(details.entries[0]);
     } else if (id == 'play' || id == 'enqueue') {
       chrome.fileBrowserPrivate.viewFiles(urls, id);
     }
   };
 
-  FileManager.prototype.onImageEditorSave = function(entry, canvas) {
+  FileManager.prototype.openImageEditor_ = function(entry) {
     var self = this;
-    this.cacheMetadata_(entry, function(metadata) {
-      // The code below modifies the metadata parameter. We assume that this is
-      // the master copy, otherwise other cacheMetadata_ callers would not
-      // see our changes.
-      // The mime type is hardcoded as the editor only works with jpeg for now.
-      var blob = ImageEncoder.getBlob(canvas, 'image/jpeg', metadata)
-      // TODO(kaznacheev): Notify user properly about write failures.
-      util.writeBlobToFile(entry, blob, function(){},
-          util.flog('Error writing to ' + entry.fullPath));
-      self.updatePreview_();  // Metadata may have changed.
-    });
+
+    var editorFrame = this.document_.createElement('iframe');
+    editorFrame.className = 'overlay-pane';
+    editorFrame.scrolling = 'no';
+
+    editorFrame.onload = function() {
+      self.cacheMetadata_(entry, function(metadata) {
+        editorFrame.contentWindow.ImageEditor.open(
+            self.onImageEditorSave_.bind(self, entry),
+            function () { self.dialogDom_.removeChild(editorFrame) },
+            entry.toURL(),
+            metadata);
+      });
+    };
+
+    editorFrame.src = 'js/image_editor/image_editor.html';
+
+    this.dialogDom_.appendChild(editorFrame);
   };
 
-  FileManager.prototype.onImageEditorClose = function() {
-    this.imageEditorFrame_.style.display = 'none';
-    this.imageEditor_ = null;
+  FileManager.prototype.onImageEditorSave_ = function(entry, blob) {
+    // TODO(kaznacheev): Notify user properly about write failures.
+    util.writeBlobToFile(entry, blob, function(){},
+        util.flog('Error writing to ' + entry.fullPath));
+    this.updatePreview_();  // Metadata may have changed.
   };
 
   /**
    * Update the breadcrumb display to reflect the current directory.
    */
   FileManager.prototype.updateBreadcrumbs_ = function() {
     var bc = this.dialogDom_.querySelector('.breadcrumbs');
     bc.innerHTML = '';
 
     var fullPath = this.currentDirEntry_.fullPath.replace(/\/$/, '');
@@ skipping 1073 matching lines @@
       window.alert(str('ERROR_RESERVED_NAME'));
       return false;
     }
     if (this.filterFiles_ && name[0] == '.') {
       window.alert(str('ERROR_HIDDEN_NAME'));
       return false;
     }
     return true;
   };
 })();