Add an ability for resize in gallery.

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 9db0b9aaa2483838fbd7ffd5cf00855c8a1439cd..e9ddc4bd6728dc4ec118dd658f90c61857f22872 100644
--- a/ui/file_manager/gallery/js/image_editor/image_editor.js
+++ b/ui/file_manager/gallery/js/image_editor/image_editor.js
@@ -44,6 +44,11 @@ function ImageEditor(
    */
   this.settingUpNextMode_ = false;
 
+  /**
+   * @private {boolean}
+   */
+  this.showingAlertDialog_ = false;
+
   ImageUtil.removeChildren(this.container_);
 
   this.viewport_ = viewport;
@@ -679,6 +684,21 @@ ImageEditor.prototype.leaveModeInternal_ = function(commit, leaveToSwitchMode) {
   if (!this.currentMode_)
     return;
 
+  // If the current mode is image-resize, and commit is required,
+  // leaving mode should be stopped when an input value is not valid.
+  if(commit && this.currentMode_.name === 'image-resize') {

[fukino, 2016/09/05 13:44:34]

I think this 'image-resize' should be 'resize'?
The dialog won't be shown on the latest code.

[harukam, 2016/09/06 08:10:29]

Sorry, thanks.

+    var resizeMode = /** @type {!ImageEditor.Mode.Resize} */
+                              (this.currentMode_);
+    if(!resizeMode.isInputValid()) {
+      this.showingAlertDialog_ = true;
+
+      resizeMode.showAlertDialog(function() {
+        this.showingAlertDialog_ = false;
+      }.bind(this));
+      return;
+    }
+  }
+
   this.modeToolbar_.show(false);
 
   // If it leaves to switch mode, do not restore screen size since the next mode
@@ -751,6 +771,8 @@ ImageEditor.prototype.onKeyDown = function(event) {
   switch (util.getKeyModifiers(event) + event.key) {
     case 'Escape':
     case 'Enter':
+      if (this.showingAlertDialog_)
+        return false;
       if (this.getMode()) {
         this.leaveModeInternal_(event.key === 'Enter',
             false /* not to switch mode */);
@@ -1298,6 +1320,77 @@ ImageEditor.Toolbar.prototype.addButton = function(
 };
 
 /**
+ * Add a checkbox
+ *
+ * @param {string} name Checkbox name
+ * @param {string} title Checkbox title
+ * @param {function(Event)} handler onChange handler
+ * @param {boolean} value Default value
+ * @return {!HTMLElement} Checkbox Element
+ */
+ImageEditor.Toolbar.prototype.addCheckbox = function(
+    name, title, handler, value) {
+
+  var checkbox = /** @type {!HTMLElement} */
+      (document.createElement('paper-checkbox'));
+  checkbox.textContent = strf(title);
+  checkbox.addEventListener('change', handler, false);
+  checkbox.checked = value;
+  checkbox.classList.add('checkbox', name);
+
+  this.add(checkbox);
+
+  return checkbox;
+};
+
+/**
+ * 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 for not only 'change' event, but also 'input' because of

[fukino, 2016/09/05 13:44:34]

listen to

[harukam, 2016/09/06 08:10:29]

Acknowledged.

+  // calling handler as fast as possible.

[fukino, 2016/09/05 13:44:34]

"because of calling..." doesn't sound saying purpose.

How about "because we want to update values as soon as the user types
characters." or something like that?

[harukam, 2016/09/06 08:10:29]

It's helpful, thanks.

+  text.addEventListener('input', handler, false);
+  text.addEventListener('change', handler, false);

[harukam, 2016/09/05 10:37:00]

I set a handler listening for 'change' event to adjust
test.util.sync.changeValue in gallery/js/test_util.js.

+  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.