Compile Image Editor in gyp v2

ui/file_manager/gallery/js/image_editor/image_editor.js

Index: ui/file_manager/gallery/js/image_editor/image_editor.js
diff --git a/ui/file_manager/gallery/js/image_editor/image_editor.js b/ui/file_manager/gallery/js/image_editor/image_editor.js
index 0adb1b30552f6d5be169ce0ae76fff9cf5680508..cbd3cdbf50b69daf9e3a497e1909e633a00b71a4 100644
--- a/ui/file_manager/gallery/js/image_editor/image_editor.js
+++ b/ui/file_manager/gallery/js/image_editor/image_editor.js
@@ -9,9 +9,10 @@
  * @param {!Viewport} viewport The viewport.
  * @param {!ImageView} imageView The ImageView containing the images to edit.
  * @param {!ImageEditorPrompt} prompt Prompt instance.
- * @param {!Object} DOMContainers Various DOM containers required for the
+ * @param {!{image: !HTMLElement, root: !HTMLElement, toolbar: !HTMLElement,
+ * mode: !HTMLElement}} DOMContainers Various DOM containers required for the
  *     editor.
- * @param {!Array<!ImageEditor.Mode>} modes Available editor modes.
+ * @param {!Array<!ImageEditorMode>} modes Available editor modes.
  * @param {function(string, ...string)} displayStringFunction String
  *     formatting function.
  * @constructor
@@ -30,7 +31,7 @@ function ImageEditor(
   this.displayStringFunction_ = displayStringFunction;
 
   /**
-   * @private {ImageEditor.Mode}
+   * @private {ImageEditorMode}
    */
   this.currentMode_ = null;
 
@@ -57,10 +58,10 @@ function ImageEditor(
       this.rootContainer_, this.container_, this.getBuffer());
   this.panControl_.setDoubleTapCallback(this.onDoubleTap_.bind(this));
 
-  this.mainToolbar_ = new ImageEditor.Toolbar(
-      DOMContainers.toolbar, displayStringFunction);
+  this.mainToolbar_ =
+      new ImageEditorToolbar(DOMContainers.toolbar, displayStringFunction);
 
-  this.modeToolbar_ = new ImageEditor.Toolbar(
+  this.modeToolbar_ = new ImageEditorToolbar(
       DOMContainers.mode, displayStringFunction,
       this.onOptionsChange.bind(this), true /* done button */);
   this.modeToolbar_.addEventListener(
@@ -86,9 +87,11 @@ function ImageEditor(
   // Create action buttons.
   for (var i = 0; i != this.modes_.length; i++) {
     var mode = this.modes_[i];
-    mode.bind(this, this.createToolButton_(mode.name, mode.title,
-          this.enterMode.bind(this, mode),
-          mode.instant));
+    var button = this.createToolButton_(
+        mode.name, mode.title, this.enterMode.bind(this, mode), mode.instant);
+    mode.bind(
+        button, this.getBuffer(), this.getViewport(), this.getImageView());
+    this.registerAction_(mode.name);
   }
 
   /**
@@ -148,10 +151,9 @@ ImageEditor.prototype.createToolButton_ = function(
     name, title, handler, isInstant) {
   var button = this.mainToolbar_.addButton(
       title,
-      isInstant ? ImageEditor.Toolbar.ButtonType.ICON :
-                  ImageEditor.Toolbar.ButtonType.ICON_TOGGLEABLE,
-      handler,
-      name /* opt_className */);
+      isInstant ? ImageEditorToolbar.ButtonType.ICON :
+                  ImageEditorToolbar.ButtonType.ICON_TOGGLEABLE,
+      handler, name /* opt_className */);
   return button;
 };
 
@@ -224,8 +226,8 @@ ImageEditor.prototype.openSession = function(
         item.setAsOriginal();
 
         self.commandQueue_ = new CommandQueue(
-            self.container_.ownerDocument, assert(self.imageView_.getImage()),
-            saveFunction);
+            assert(self.container_.ownerDocument),
+            assert(self.imageView_.getImage()), saveFunction);
         self.commandQueue_.attachUI(
             self.getImageView(), self.getPrompt(), self.filesToast_,
             self.updateUndoRedo.bind(self), self.lockUI.bind(self));
@@ -293,6 +295,7 @@ ImageEditor.prototype.undo = function() {
 
   // First undo click should dismiss the uncommitted modifications.
   if (this.currentMode_ && this.currentMode_.isUpdated()) {
+    this.modeToolbar_.reset();
     this.currentMode_.reset();
     return;
   }
@@ -367,203 +370,6 @@ ImageEditor.prototype.onOptionsChange = function(options) {
 };
 
 /**
- * ImageEditor.Mode represents a modal state dedicated to a specific operation.
- * Inherits from ImageBuffer. Overlay to simplify the drawing of mode-specific
- * tools.
- *
- * @param {string} name The mode name.
- * @param {string} title The mode title.
- * @constructor
- * @struct
- * @extends {ImageBuffer.Overlay}
- */
-ImageEditor.Mode = function(name, title) {
-  this.name = name;
-  this.title = title;
-  this.message_ = 'GALLERY_ENTER_WHEN_DONE';
-
-  /**
-   * @type {boolean}
-   */
-  this.implicitCommit = false;
-
-  /**
-   * @type {boolean}
-   */
-  this.instant = false;
-
-  /**
-   * @type {number}
-   */
-  this.paddingTop = 0;
-
-  /**
-   * @type {number}
-   */
-  this.paddingBottom = 0;
-
-  /**
-   * @type {ImageEditor}
-   * @private
-   */
-  this.editor_ = null;
-
-  /**
-   * @type {Viewport}
-   * @private
-   */
-  this.viewport_ = null;
-
-  /**
-   * @type {HTMLElement}
-   * @private
-   */
-  this.button_ = null;
-
-  /**
-   * @type {boolean}
-   * @private
-   */
-  this.updated_ = false;
-
-  /**
-   * @type {ImageView}
-   * @private
-   */
-  this.imageView_ = null;
-};
-
-ImageEditor.Mode.prototype = { __proto__: ImageBuffer.Overlay.prototype };
-
-/**
- * @return {Viewport} Viewport instance.
- */
-ImageEditor.Mode.prototype.getViewport = function() { return this.viewport_; };
-
-/**
- * @return {ImageView} ImageView instance.
- */
-ImageEditor.Mode.prototype.getImageView = function() {
-  return this.imageView_;
-};
-
-/**
- * @return {string} The mode-specific message to be displayed when entering.
- */
-ImageEditor.Mode.prototype.getMessage = function() { return this.message_; };
-
-/**
- * @return {boolean} True if the mode is applicable in the current context.
- */
-ImageEditor.Mode.prototype.isApplicable = function() { return true; };
-
-/**
- * Called once after creating the mode button.
- *
- * @param {!ImageEditor} editor The editor instance.
- * @param {!HTMLElement} button The mode button.
- */
-
-ImageEditor.Mode.prototype.bind = function(editor, button) {
-  this.editor_ = editor;
-  this.editor_.registerAction_(this.name);
-  this.button_ = button;
-  this.viewport_ = editor.getViewport();
-  this.imageView_ = editor.getImageView();
-};
-
-/**
- * Called before entering the mode.
- */
-ImageEditor.Mode.prototype.setUp = function() {
-  this.editor_.getBuffer().addOverlay(this);
-  this.updated_ = false;
-};
-
-/**
- * Create mode-specific controls here.
- * @param {!ImageEditor.Toolbar} toolbar The toolbar to populate.
- */
-ImageEditor.Mode.prototype.createTools = function(toolbar) {};
-
-/**
- * Called before exiting the mode.
- */
-ImageEditor.Mode.prototype.cleanUpUI = function() {
-  this.editor_.getBuffer().removeOverlay(this);
-};
-
-/**
- * Called after exiting the mode.
- */
-ImageEditor.Mode.prototype.cleanUpCaches = function() {};
-
-/**
- * Called when any of the controls changed its value.
- * @param {Object} options A map of options.
- */
-ImageEditor.Mode.prototype.update = function(options) {
-  this.markUpdated();
-};
-
-/**
- * Mark the editor mode as updated.
- */
-ImageEditor.Mode.prototype.markUpdated = function() {
-  this.updated_ = true;
-};
-
-/**
- * @return {boolean} True if the mode controls changed.
- */
-ImageEditor.Mode.prototype.isUpdated = function() { return this.updated_; };
-
-/**
- * @return {boolean} True if a key event should be consumed by the mode.
- */
-ImageEditor.Mode.prototype.isConsumingKeyEvents = function() { return false; };
-
-/**
- * Resets the mode to a clean state.
- */
-ImageEditor.Mode.prototype.reset = function() {
-  this.editor_.modeToolbar_.reset();
-  this.updated_ = false;
-};
-
-/**
- * @return {Command} Command.
- */
-ImageEditor.Mode.prototype.getCommand = function() {
-  return null;
-};
-
-/**
- * One-click editor tool, requires no interaction, just executes the command.
- *
- * @param {string} name The mode name.
- * @param {string} title The mode title.
- * @param {!Command} command The command to execute on click.
- * @constructor
- * @extends {ImageEditor.Mode}
- * @struct
- */
-ImageEditor.Mode.OneClick = function(name, title, command) {
-  ImageEditor.Mode.call(this, name, title);
-  this.instant = true;
-  this.command_ = command;
-};
-
-ImageEditor.Mode.OneClick.prototype = {__proto__: ImageEditor.Mode.prototype};
-
-/**
- * @override
- */
-ImageEditor.Mode.OneClick.prototype.getCommand = function() {
-  return this.command_;
-};
-
-/**
  * Register the action name. Required for metrics reporting.
  * @param {string} name Button name.
  * @private
@@ -573,14 +379,14 @@ ImageEditor.prototype.registerAction_ = function(name) {
 };
 
 /**
- * @return {ImageEditor.Mode} The current mode.
+ * @return {ImageEditorMode} The current mode.
  */
 ImageEditor.prototype.getMode = function() { return this.currentMode_; };
 
 /**
  * The user clicked on the mode button.
  *
- * @param {!ImageEditor.Mode} mode The new mode.
+ * @param {!ImageEditorMode} mode The new mode.
  */
 ImageEditor.prototype.enterMode = function(mode) {
   if (this.isLocked()) return;
@@ -613,7 +419,7 @@ ImageEditor.prototype.enterMode = function(mode) {
 /**
  * Set up the new editing mode.
  *
- * @param {!ImageEditor.Mode} mode The mode.
+ * @param {!ImageEditorMode} mode The mode.
  * @private
  */
 ImageEditor.prototype.setUpMode_ = function(mode) {
@@ -635,9 +441,9 @@ ImageEditor.prototype.setUpMode_ = function(mode) {
   // able to set up with new screen size.
   if (!this.currentMode_.instant) {
     this.getViewport().setScreenTop(
-        ImageEditor.Toolbar.HEIGHT + mode.paddingTop);
+        ImageEditorToolbar.HEIGHT + mode.paddingTop);
     this.getViewport().setScreenBottom(
-        ImageEditor.Toolbar.HEIGHT * 2 + mode.paddingBottom);
+        ImageEditorToolbar.HEIGHT * 2 + mode.paddingBottom);
     this.getImageView().applyViewportChange();
   }
 
@@ -688,8 +494,8 @@ ImageEditor.prototype.leaveModeInternal_ = function(commit, leaveToSwitchMode) {
   // If the current mode is 'Resize', and commit is required,
   // leaving mode should be stopped when an input value is not valid.
   if(commit && this.currentMode_.name === 'resize') {
-    var resizeMode = /** @type {!ImageEditor.Mode.Resize} */
-                              (this.currentMode_);
+    var resizeMode = /** @type {!ImageEditorMode.Resize} */
+        (this.currentMode_);
     if(!resizeMode.isInputValid()) {
       resizeMode.showAlertDialog();
       return;
@@ -703,8 +509,8 @@ ImageEditor.prototype.leaveModeInternal_ = function(commit, leaveToSwitchMode) {
   // might change screen size. We should avoid to show intermediate animation
   // which tries to restore screen size.
   if (!leaveToSwitchMode) {
-    this.getViewport().setScreenTop(ImageEditor.Toolbar.HEIGHT);
-    this.getViewport().setScreenBottom(ImageEditor.Toolbar.HEIGHT);
+    this.getViewport().setScreenTop(ImageEditorToolbar.HEIGHT);
+    this.getViewport().setScreenBottom(ImageEditorToolbar.HEIGHT);
     this.getImageView().applyViewportChange();
   }
 
@@ -1119,347 +925,3 @@ ImageEditor.MouseControl.prototype.updateCursor_ = function(position) {
   if (newCursor != oldCursor)  // Avoid flicker.
     this.container_.setAttribute('cursor', newCursor);
 };
-
-/**
- * A toolbar for the ImageEditor.
- * @param {!HTMLElement} parent The parent element.
- * @param {function(string)} displayStringFunction A string formatting function.
- * @param {function(Object)=} opt_updateCallback The callback called when
- *     controls change.
- * @param {boolean=} opt_showActionButtons True to show action buttons.
- * @constructor
- * @extends {cr.EventTarget}
- * @struct
- */
-ImageEditor.Toolbar = function(
-    parent, displayStringFunction, opt_updateCallback, opt_showActionButtons) {
-  this.wrapper_ = parent;
-  this.displayStringFunction_ = displayStringFunction;
-
-  /**
-   * @type {?function(Object)}
-   * @private
-   */
-  this.updateCallback_ = opt_updateCallback || null;
-
-  /**
-   * @private {!HTMLElement}
-   */
-  this.container_ = /** @type {!HTMLElement} */ (document.createElement('div'));
-  this.container_.classList.add('container');
-  this.wrapper_.appendChild(this.container_);
-
-    // Create action buttons.
-  if (opt_showActionButtons) {
-    var actionButtonsLayer = document.createElement('div');
-    actionButtonsLayer.classList.add('action-buttons');
-
-    this.cancelButton_ = ImageEditor.Toolbar.createButton_(
-        'GALLERY_CANCEL_LABEL', ImageEditor.Toolbar.ButtonType.LABEL_UPPER_CASE,
-        this.onCancelClicked_.bind(this), 'cancel');
-    actionButtonsLayer.appendChild(this.cancelButton_);
-
-    this.doneButton_ = ImageEditor.Toolbar.createButton_(
-        'GALLERY_DONE', ImageEditor.Toolbar.ButtonType.LABEL_UPPER_CASE,
-        this.onDoneClicked_.bind(this), 'done');
-    actionButtonsLayer.appendChild(this.doneButton_);
-
-    this.wrapper_.appendChild(actionButtonsLayer);
-  }
-};
-
-ImageEditor.Toolbar.prototype.__proto__ = cr.EventTarget.prototype;
-
-/**
- * Height of the toolbar.
- * @const {number}
- */
-ImageEditor.Toolbar.HEIGHT = 48; // px
-
-/**
- * Handles click event of done button.
- * @private
- */
-ImageEditor.Toolbar.prototype.onDoneClicked_ = function() {
-  this.doneButton_.querySelector('paper-ripple').simulatedRipple();
-
-  var event = new Event('done-clicked');
-  this.dispatchEvent(event);
-};
-
-/**
- * Handles click event of cancel button.
- * @private
- */
-ImageEditor.Toolbar.prototype.onCancelClicked_ = function() {
-  this.cancelButton_.querySelector('paper-ripple').simulatedRipple();
-
-  var event = new Event('cancel-clicked');
-  this.dispatchEvent(event);
-};
-
-/**
- * Returns the parent element.
- * @return {!HTMLElement}
- */
-ImageEditor.Toolbar.prototype.getElement = function() {
-  return this.container_;
-};
-
-/**
- * Clear the toolbar.
- */
-ImageEditor.Toolbar.prototype.clear = function() {
-  ImageUtil.removeChildren(this.container_);
-};
-
-/**
- * Add a control.
- * @param {!HTMLElement} element The control to add.
- * @return {!HTMLElement} The added element.
- */
-ImageEditor.Toolbar.prototype.add = function(element) {
-  this.container_.appendChild(element);
-  return element;
-};
-
-/**
- * Button type.
- * @enum {string}
- */
-ImageEditor.Toolbar.ButtonType = {
-  ICON: 'icon',
-  ICON_TOGGLEABLE: 'icon_toggleable',
-  LABEL: 'label',
-  LABEL_UPPER_CASE: 'label_upper_case'
-};
-
-/**
- * Create a button.
- *
- * @param {string} title String ID of button title.
- * @param {ImageEditor.Toolbar.ButtonType} type Button type.
- * @param {function(Event)} handler onClick handler.
- * @param {string=} opt_class Extra class name.
- * @return {!HTMLElement} The created button.
- * @private
- */
-ImageEditor.Toolbar.createButton_ = function(
-    title, type, handler, opt_class) {
-  var button = /** @type {!HTMLElement} */ (document.createElement('button'));
-  if (opt_class)
-    button.classList.add(opt_class);
-  button.classList.add('edit-toolbar');
-
-  if (type === ImageEditor.Toolbar.ButtonType.ICON ||
-      type === ImageEditor.Toolbar.ButtonType.ICON_TOGGLEABLE) {
-    var icon = document.createElement('div');
-    icon.classList.add('icon');
-
-    // Show tooltip for icon button.
-    assertInstanceof(document.querySelector('files-tooltip'), FilesTooltip)
-        .addTarget(button);
-
-    button.appendChild(icon);
-
-    if (type === ImageEditor.Toolbar.ButtonType.ICON) {
-      var filesRipple = document.createElement('files-ripple');
-      button.appendChild(filesRipple);
-    } else {
-      var filesToggleRipple = document.createElement('files-toggle-ripple');
-      button.appendChild(filesToggleRipple);
-    }
-  } else if (type === ImageEditor.Toolbar.ButtonType.LABEL ||
-      type === ImageEditor.Toolbar.ButtonType.LABEL_UPPER_CASE) {
-    var label = document.createElement('span');
-    label.classList.add('label');
-    label.textContent =
-        type === ImageEditor.Toolbar.ButtonType.LABEL_UPPER_CASE ?
-        strf(title).toLocaleUpperCase() : strf(title);
-
-    button.appendChild(label);
-
-    var paperRipple = document.createElement('paper-ripple');
-    button.appendChild(paperRipple);
-  } else {
-    assertNotReached();
-  }
-
-  button.label = strf(title);
-  button.setAttribute('aria-label', strf(title));
-
-  GalleryUtil.decorateMouseFocusHandling(button);
-
-  button.addEventListener('click', handler, false);
-  button.addEventListener('keydown', function(event) {
-    // Stop propagation of Enter key event to prevent it from being captured by
-    // image editor.
-    if (event.key === 'Enter')
-      event.stopPropagation();
-  });
-
-  return button;
-};
-
-/**
- * Add a button.
- *
- * @param {string} title Button title.
- * @param {ImageEditor.Toolbar.ButtonType} type Button type.
- * @param {function(Event)} handler onClick handler.
- * @param {string=} opt_class Extra class name.
- * @return {!HTMLElement} The added button.
- */
-ImageEditor.Toolbar.prototype.addButton = function(
-    title, type, handler, opt_class) {
-  var button = ImageEditor.Toolbar.createButton_(
-      title, type, handler, opt_class);
-  this.add(button);
-  return button;
-};
-
-/**
- * Add a input field.
- *
- * @param {string} name Input name
- * @param {string} title Input title
- * @param {function(Event)} handler onInput and onChange handler
- * @param {string|number} value Default value
- * @param {string=} opt_unit Unit for an input field
- * @return {!HTMLElement} Input Element
- */
-ImageEditor.Toolbar.prototype.addInput = function(
-    name, title, handler, value, opt_unit) {
-
-  var input = /** @type {!HTMLElement} */ (document.createElement('div'));
-  input.classList.add('input', name);
-
-  var text = document.createElement('paper-input');
-  text.setAttribute('label', strf(title));
-  text.classList.add('text', name);
-  text.value = value;
-
-  // We should listen to not only 'change' event, but also 'input' because we
-  // want to update values as soon as the user types characters.
-  text.addEventListener('input', handler, false);
-  text.addEventListener('change', handler, false);
-  input.appendChild(text);
-
-  if(opt_unit) {
-    var unit_label = document.createElement('span');
-    unit_label.textContent = opt_unit;
-    unit_label.classList.add('unit_label');
-    input.appendChild(unit_label);
-  }
-
-  input.name = name;
-  input.getValue = function(text) {
-    return text.value;
-  }.bind(this, text);
-  input.setValue = function(text, value) {
-    text.value = value;
-  }.bind(this, text);
-
-  this.add(input);
-
-  return input;
-};
-
-/**
- * Add a range control (scalar value picker).
- *
- * @param {string} name An option name.
- * @param {string} title An option title.
- * @param {number} min Min value of the option.
- * @param {number} value Default value of the option.
- * @param {number} max Max value of the options.
- * @param {number=} opt_scale A number to multiply by when setting
- *     min/value/max in DOM.
- * @param {boolean=} opt_showNumeric True if numeric value should be displayed.
- * @return {!HTMLElement} Range element.
- */
-ImageEditor.Toolbar.prototype.addRange = function(
-    name, title, min, value, max, opt_scale, opt_showNumeric) {
-  var range = /** @type {!HTMLElement} */ (document.createElement('div'));
-  range.classList.add('range', name);
-
-  var icon = document.createElement('icon');
-  icon.classList.add('icon');
-  range.appendChild(icon);
-
-  var label = document.createElement('span');
-  label.textContent = strf(title);
-  label.classList.add('label');
-  range.appendChild(label);
-
-  var scale = opt_scale || 1;
-  var slider = document.createElement('paper-slider');
-  slider.min = Math.ceil(min * scale);
-  slider.max = Math.floor(max * scale);
-  slider.value = value * scale;
-  slider.addEventListener('change', function(event) {
-    if (this.updateCallback_)
-      this.updateCallback_(this.getOptions());
-  }.bind(this));
-  range.appendChild(slider);
-
-  range.name = name;
-  range.getValue = function(slider, scale) {
-    return slider.value / scale;
-  }.bind(this, slider, scale);
-
-  // Swallow the left and right keys, so they are not handled by other
-  // listeners.
-  range.addEventListener('keydown', function(e) {
-    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight')
-      e.stopPropagation();
-  });
-
-  this.add(range);
-
-  return range;
-};
-
-/**
- * @return {!Object} options A map of options.
- */
-ImageEditor.Toolbar.prototype.getOptions = function() {
-  var values = {};
-
-  for (var child = this.container_.firstChild;
-       child;
-       child = child.nextSibling) {
-    if (child.name)
-      values[child.name] = child.getValue();
-  }
-
-  return values;
-};
-
-/**
- * Reset the toolbar.
- */
-ImageEditor.Toolbar.prototype.reset = function() {
-  for (var child = this.wrapper_.firstChild; child; child = child.nextSibling) {
-    if (child.reset) child.reset();
-  }
-};
-
-/**
- * Show/hide the toolbar.
- * @param {boolean} on True if show.
- */
-ImageEditor.Toolbar.prototype.show = function(on) {
-  if (!this.wrapper_.firstChild)
-    return;  // Do not show empty toolbar;
-
-  this.wrapper_.hidden = !on;
-
-  // Focus the first input on the toolbar.
-  if (on) {
-    var input = this.container_.querySelector(
-       'button, paper-button, input, paper-input, paper-slider');
-    if (input)
-      input.focus();
-  }
-};