[filebrowser] UI improvements in image editor.

BUG=chromium-os:19534
TEST=See bug.
Review URL: http://codereview.chromium.org/7887009

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@101060 0039d316-1c4b-4281-b951-d872f2087c98

22 files changed, 140 insertions, 44 deletions

diff --git a/chrome/browser/resources/component_extension_resources.grd b/chrome/browser/resources/component_extension_resources.grd
index 9e0d994..8bc89f4 100644
--- a/chrome/browser/resources/component_extension_resources.grd
+++ b/chrome/browser/resources/component_extension_resources.grd
@@ -65,9 +65,18 @@
         <include name="IDR_FILE_MANAGER_IMG_FILETYPE_LARGE_GENERIC_MULTIPLE" file="file_manager/images/filetype_large_generic_multiple.png" type="BINDATA" />
         <include name="IDR_FILE_MANAGER_IMG_FILETYPE_LARGE_VIDEO" file="file_manager/images/filetype_large_video.png" type="BINDATA" />
 
+        <include name="IDR_FILE_MANAGER_IMG_GALLERY_ARROW_LEFT" file="file_manager/images/gallery/arrow_left.png" type="BINDATA" />
+        <include name="IDR_FILE_MANAGER_IMG_GALLERY_ARROW_LEFT_DISABLED" file="file_manager/images/gallery/arrow_left_disabled.png" type="BINDATA" />
+        <include name="IDR_FILE_MANAGER_IMG_GALLERY_ARROW_RIGHT" file="file_manager/images/gallery/arrow_right.png" type="BINDATA" />
+        <include name="IDR_FILE_MANAGER_IMG_GALLERY_ARROW_RIGHT_DISABLED" file="file_manager/images/gallery/arrow_right_disabled.png" type="BINDATA" />
+        <include name="IDR_FILE_MANAGER_IMG_GALLERY_EDIT" file="file_manager/images/gallery/icon_edit.png" type="BINDATA" />
+        <include name="IDR_FILE_MANAGER_IMG_GALLERY_EDIT_SELECTED" file="file_manager/images/gallery/icon_edit_selected.png" type="BINDATA" />
+        <include name="IDR_FILE_MANAGER_IMG_GALLERY_SHARE" file="file_manager/images/gallery/icon_share.png" type="BINDATA" />
+        <include name="IDR_FILE_MANAGER_IMG_GALLERY_SHARE_SELECTED" file="file_manager/images/gallery/icon_share_selected.png" type="BINDATA" />
+
         <include name="IDR_FILE_MANAGER_ICON_DETAIL_VIEW" file="file_manager/images/icon-detail-view.png" type="BINDATA" />
         <include name="IDR_FILE_MANAGER_ICON_THUMB_VIEW" file="file_manager/images/icon-thumb-view.png" type="BINDATA" />
-	<include name="IDR_FILE_MANAGER_WARNING_ICON" file="file_manager/images/warning_icon_square_26x26.png" type="BINDATA"/>
+        <include name="IDR_FILE_MANAGER_WARNING_ICON" file="file_manager/images/warning_icon_square_26x26.png" type="BINDATA"/>
 
         <include name="IDR_FILE_MANAGER_BUTTON_ICON_COPY" file="file_manager/images/button-icon-copy.png" type="BINDATA" />
         <include name="IDR_FILE_MANAGER_BUTTON_ICON_PASTE" file="file_manager/images/button-icon-paste.png" type="BINDATA" />
diff --git a/chrome/browser/resources/file_manager/images/gallery/arrow_left.png b/chrome/browser/resources/file_manager/images/gallery/arrow_left.png
new file mode 100644
index 0000000..57ebd3c
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/gallery/arrow_left.png
diff --git a/chrome/browser/resources/file_manager/images/gallery/arrow_left_disabled.png b/chrome/browser/resources/file_manager/images/gallery/arrow_left_disabled.png
new file mode 100644
index 0000000..dcc8f96
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/gallery/arrow_left_disabled.png
diff --git a/chrome/browser/resources/file_manager/images/gallery/arrow_right.png b/chrome/browser/resources/file_manager/images/gallery/arrow_right.png
new file mode 100644
index 0000000..7c5b2bf
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/gallery/arrow_right.png
diff --git a/chrome/browser/resources/file_manager/images/gallery/arrow_right_disabled.png b/chrome/browser/resources/file_manager/images/gallery/arrow_right_disabled.png
new file mode 100644
index 0000000..2d1c713
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/gallery/arrow_right_disabled.png
diff --git a/chrome/browser/resources/file_manager/images/gallery/icon_autofix.png b/chrome/browser/resources/file_manager/images/gallery/icon_autofix.png
new file mode 100644
index 0000000..21998ba
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/gallery/icon_autofix.png
diff --git a/chrome/browser/resources/file_manager/images/gallery/icon_autofix_selected.png b/chrome/browser/resources/file_manager/images/gallery/icon_autofix_selected.png
new file mode 100644
index 0000000..ee50d50
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/gallery/icon_autofix_selected.png
diff --git a/chrome/browser/resources/file_manager/images/gallery/icon_brightness.png b/chrome/browser/resources/file_manager/images/gallery/icon_brightness.png
new file mode 100644
index 0000000..3f2a531
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/gallery/icon_brightness.png
diff --git a/chrome/browser/resources/file_manager/images/gallery/icon_brightness_selected.png b/chrome/browser/resources/file_manager/images/gallery/icon_brightness_selected.png
new file mode 100644
index 0000000..05f14c7
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/gallery/icon_brightness_selected.png
diff --git a/chrome/browser/resources/file_manager/images/gallery/icon_crop.png b/chrome/browser/resources/file_manager/images/gallery/icon_crop.png
new file mode 100644
index 0000000..de8c92b
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/gallery/icon_crop.png
diff --git a/chrome/browser/resources/file_manager/images/gallery/icon_crop_selected.png b/chrome/browser/resources/file_manager/images/gallery/icon_crop_selected.png
new file mode 100644
index 0000000..8b89b2b3
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/gallery/icon_crop_selected.png
diff --git a/chrome/browser/resources/file_manager/images/gallery/icon_edit.png b/chrome/browser/resources/file_manager/images/gallery/icon_edit.png
new file mode 100644
index 0000000..7687d61
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/gallery/icon_edit.png
diff --git a/chrome/browser/resources/file_manager/images/gallery/icon_edit_selected.png b/chrome/browser/resources/file_manager/images/gallery/icon_edit_selected.png
new file mode 100644
index 0000000..7f9ba7a9
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/gallery/icon_edit_selected.png
diff --git a/chrome/browser/resources/file_manager/images/gallery/icon_rotate.png b/chrome/browser/resources/file_manager/images/gallery/icon_rotate.png
new file mode 100644
index 0000000..6b0bdf2
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/gallery/icon_rotate.png
diff --git a/chrome/browser/resources/file_manager/images/gallery/icon_rotate_selected.png b/chrome/browser/resources/file_manager/images/gallery/icon_rotate_selected.png
new file mode 100644
index 0000000..075dfdb
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/gallery/icon_rotate_selected.png
diff --git a/chrome/browser/resources/file_manager/images/gallery/icon_share.png b/chrome/browser/resources/file_manager/images/gallery/icon_share.png
new file mode 100644
index 0000000..0ca1050
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/gallery/icon_share.png
diff --git a/chrome/browser/resources/file_manager/images/gallery/icon_share_selected.png b/chrome/browser/resources/file_manager/images/gallery/icon_share_selected.png
new file mode 100644
index 0000000..de0bcd2
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/gallery/icon_share_selected.png
diff --git a/chrome/browser/resources/file_manager/images/gallery/icon_undo.png b/chrome/browser/resources/file_manager/images/gallery/icon_undo.png
new file mode 100644
index 0000000..7d67bb3
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/gallery/icon_undo.png
diff --git a/chrome/browser/resources/file_manager/js/image_editor/gallery.css b/chrome/browser/resources/file_manager/js/image_editor/gallery.css
index 779723e..a324562 100644
--- a/chrome/browser/resources/file_manager/js/image_editor/gallery.css
+++ b/chrome/browser/resources/file_manager/js/image_editor/gallery.css
@@ -28,7 +28,7 @@ body {
 .gallery > .image-container {
   position: absolute;
   top: 30px;
-  bottom: 80px;
+  bottom: 0px;
   width: 100%;
   background-color: rgba(0,0,0,1);
 }
@@ -37,18 +37,26 @@ body {
   position: absolute;
   bottom: 0px;
   width: 100%;
-  height: 80px;
+  height: 60px;
   padding: 3px;
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: start;
   -webkit-box-align: stretch;
+  opacity: 1.0;
+  -webkit-transition: opacity 0.5s ease-in-out;
+  background-color: rgba(18,18,18,0.75);
+  border-top: 1px solid rgba(31,31,31,0.75);
+}
+
+.gallery > .toolbar[hidden] {
+  opacity: 0.0;
 }
 
 .gallery .ribbon {
   -webkit-box-flex: 1;
-  border: solid 1px white;
   overflow: hidden;
+  height: 100%;
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: left;
@@ -58,8 +66,29 @@ body {
 .gallery .ribbon-right {
   width: 20px;
   height: 100%;
-  background-color: red;
   cursor: pointer;
+  display: -webkit-box;
+  -webkit-box-align: center;
+  -webkit-box-pack: center;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+.gallery .ribbon-left {
+  background-image: url(../../images/gallery/arrow_left.png);
+}
+
+.gallery .ribbon-left[disabled] {
+  background-image: url(../../images/gallery/arrow_left_disabled.png);
+}
+
+.gallery .ribbon-right {
+  background-image: url(../../images/gallery/arrow_right.png);
+  border-right: 1px solid rgba(87,87,87,0.5);
+}
+
+.gallery .ribbon-right[disabled] {
+  background-image: url(../../images/gallery/arrow_right_disabled.png);
 }
 
 .gallery .ribbon-image {
@@ -69,19 +98,19 @@ body {
   -webkit-box-align: center;
   overflow: hidden;
   cursor: pointer;
-  width: 70px;
-  height: 70px;
-  margin: 4px;
-  border: 1px solid rgba(255,255,255,0); /* transparent white */
+  width: 47px;
+  height: 47px;
+  margin: 2px;
+  border: 2px solid rgba(255,255,255,0); /* transparent white */
 }
 
 .gallery .ribbon-image[selected] {
-  border: 1px solid rgba(255,255,0,1);
+  border: 2px solid rgba(255,233,168,1);
 }
 
 .gallery .ribbon-image > img {
-  max-width: 70px;
-  max-height: 70px;
+  max-width: 45px;
+  max-height: 45px;
 }
 
 .gallery .ribbon-spacer {
@@ -92,43 +121,80 @@ body {
 .gallery .edit-bar {
   -webkit-box-flex: 0;
   width: 60%;
+  height: 100%;
   color: white;
   display: -webkit-box;
   -webkit-box-orient: horizontal;
+  -webkit-transition: width 0.5s ease-in-out;
+}
+
+.gallery .edit-bar > .toolbar {
+  opacity: 1.0;
+  -webkit-transition: opacity 0.25s ease-in-out 0.25s;
 }
 
 .gallery .edit-bar[hidden] {
+  width: 0%;
+  -webkit-transition: width 0.5s ease-in-out;
+}
+
+.gallery .edit-bar[hidden] > .toolbar {
+  opacity: 0;
+  -webkit-transition: opacity 0.25s ease-in-out;
+}
+
+.gallery .edit-bar[hidden] > .toolbar[hidden] {
   display: none;
 }
 
-.gallery .toolbar > .button {
+.gallery > .toolbar > .button {
   -webkit-box-flex: 0;
   padding: 10px;
   cursor: pointer;
-  margin: 8px 3px;
-  width: 80px;
+  width: 75px;
+  margin: 10px 5px;
 
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-align: center;
+  -webkit-box-pack: end;
+
+  background-repeat: no-repeat;
+  background-position: left center;
 }
 
-.gallery .button {
-  background-color: rgba(0,0,0,1);
+.gallery > .toolbar > .button {
+  background-color: rgba(0,0,0,0);
   color: white;
 }
 
-.gallery .button:hover {
-  background-color: rgba(127,127,127,1);
+.gallery > .toolbar > .button:hover {
+  background-color: rgba(31,31,31,1);
   color: white;
 }
 
-.gallery .button[pressed] {
-  background-color: rgba(255,255,255,1);
+.gallery > .toolbar > .button[pressed] {
+  background-color: rgba(240,240,240,1);
   color: black;
 }
 
-.gallery .button[pressed]:hover {
-  background-color: rgba(127,127,127,1);
+.gallery > .toolbar > .button[pressed]:hover {
+  background-color: rgba(240,240,240,1);
   color: black;
 }
+
+.gallery > .toolbar > .button.edit {
+  background-image: url(../../images/gallery/icon_edit.png);
+}
+
+.gallery > .toolbar > .button.edit[pressed] {
+  background-image: url(../../images/gallery/icon_edit_selected.png);
+}
+
+.gallery > .toolbar > .button.share {
+  background-image: url(../../images/gallery/icon_share.png);
+}
+
+.gallery > .toolbar > .button.share[pressed] {
+  background-image: url(../../images/gallery/icon_share_selected.png);
+}
diff --git a/chrome/browser/resources/file_manager/js/image_editor/gallery.js b/chrome/browser/resources/file_manager/js/image_editor/gallery.js
index 7e94ad9..f50884d 100644
--- a/chrome/browser/resources/file_manager/js/image_editor/gallery.js
+++ b/chrome/browser/resources/file_manager/js/image_editor/gallery.js
@@ -49,16 +49,17 @@ Gallery.prototype.initDom_ = function() {
 
   this.editBar_  = doc.createElement('div');
   this.editBar_.className = 'edit-bar';
+  this.editBar_.setAttribute('hidden', 'hidden');
   this.toolbar_.appendChild(this.editBar_);
 
   this.editButton_ = doc.createElement('div');
-  this.editButton_.className = 'button';
+  this.editButton_.className = 'button edit';
   this.editButton_.textContent = Gallery.EDIT_LABEL;
   this.editButton_.addEventListener('click', this.onEdit_.bind(this));
   this.toolbar_.appendChild(this.editButton_);
 
   this.shareButton_ = doc.createElement('div');
-  this.shareButton_.className = 'button';
+  this.shareButton_.className = 'button share';
   this.shareButton_.textContent = Gallery.SHARE_LABEL;
   this.shareButton_.addEventListener('click', this.onShare_.bind(this));
   this.toolbar_.appendChild(this.shareButton_);
@@ -69,8 +70,12 @@ Gallery.prototype.initDom_ = function() {
 
 Gallery.prototype.load = function(parentDirEntry, entries) {
   this.editBar_.setAttribute('hidden', 'hidden');
+  // Firstchild is the toolbar with buttons, which should be hidden at start.
+  this.editBar_.firstChild.setAttribute('hidden', 'hidden');
   this.editButton_.removeAttribute('pressed');
   this.shareButton_.removeAttribute('pressed');
+  this.toolbar_.removeAttribute('hidden');
+  this.editing_ = false;
 
   this.ribbon_.setEntries(entries);
   this.parentDirEntry_ = parentDirEntry;
@@ -122,18 +127,29 @@ Gallery.prototype.onImageSelected_ = function(entry) {
 };
 
 Gallery.prototype.onEdit_ = function(event) {
-  // TODO(dgozman): nice animation.
+  var self = this;
   if (this.editing_) {
     this.editBar_.setAttribute('hidden', 'hidden');
     this.editButton_.removeAttribute('pressed');
     this.editing_ = false;
     this.initiateFading_();
+    window.setTimeout(function() {
+      // Hide the toolbar, so it will not overlap with buttons.
+      self.editBar_.firstChild.setAttribute('hidden', 'hidden');
+      self.ribbon_.redraw();
+    }, 500);
   } else {
-    this.editBar_.removeAttribute('hidden');
-    this.editButton_.setAttribute('pressed', 'pressed');
-    this.editing_ = true;
+    this.cancelFading_();
+    // Show the toolbar.
+    this.editBar_.firstChild.removeAttribute('hidden');
+    // Use setTimeout, so computed style will be recomputed.
+    window.setTimeout(function() {
+      self.editBar_.removeAttribute('hidden');
+      self.editButton_.setAttribute('pressed', 'pressed');
+      self.editing_ = true;
+      self.ribbon_.redraw();
+    }, 0);
   }
-  this.ribbon_.redraw();
 };
 
 Gallery.prototype.onShare_ = function(event) {
@@ -160,9 +176,7 @@ Gallery.prototype.onKeyDown_ = function(event) {
 };
 
 Gallery.prototype.onMouseMove_ = function(e) {
-  if (this.fadeTimeoutId_) {
-    window.clearTimeout(this.fadeTimeoutId_);
-  }
+  this.cancelFading_();
   this.toolbar_.removeAttribute('hidden');
   this.initiateFading_();
 };
@@ -173,28 +187,37 @@ Gallery.prototype.onFadeTimeout_ = function() {
 };
 
 Gallery.prototype.initiateFading_ = function() {
-  if (this.editing_) {
+  if (this.editing_ || this.fadeTimeoutId_) {
     return;
   }
   this.fadeTimeoutId_ = window.setTimeout(
       this.onFadeTimeoutBound_, Gallery.FADE_TIMEOUT);
 };
 
+Gallery.prototype.cancelFading_ = function() {
+  if (this.fadeTimeoutId_) {
+    window.clearTimeout(this.fadeTimeoutId_);
+    this.fadeTimeoutId_ = null;
+  }
+};
+
 function Ribbon(parentNode, onSelect) {
   this.container_ = parentNode;
   this.document_ = parentNode.ownerDocument;
 
-  this.bar_ = this.document_.createElement('div');
-  this.bar_.className = 'ribbon';
-  this.container_.appendChild(this.bar_);
-
   this.left_ = this.document_.createElement('div');
   this.left_.className = 'ribbon-left';
   this.left_.addEventListener('click', this.scrollLeft.bind(this));
+  this.container_.appendChild(this.left_);
+
+  this.bar_ = this.document_.createElement('div');
+  this.bar_.className = 'ribbon';
+  this.container_.appendChild(this.bar_);
 
   this.right_ = this.document_.createElement('div');
   this.right_.className = 'ribbon-right';
   this.right_.addEventListener('click', this.scrollRight.bind(this));
+  this.container_.appendChild(this.right_);
 
   this.spacer_ = this.document_.createElement('div');
   this.spacer_.className = 'ribbon-spacer';
@@ -252,18 +275,16 @@ Ribbon.prototype.redraw = function() {
   this.bar_.textContent = '';
 
   // TODO(dgozman): get rid of these constants.
-  var itemWidth = 80;
+  var itemWidth = 49;
   var width = this.bar_.clientWidth - 40;
 
   var fit = Math.round(Math.floor(width / itemWidth));
   var lastIndex = Math.min(this.entries_.length, this.firstIndex_ + fit);
   this.firstIndex_ = Math.max(0, lastIndex - fit);
-  this.bar_.appendChild(this.left_);
   for (var index = this.firstIndex_; index < lastIndex; ++index) {
     this.bar_.appendChild(this.images_[index]);
   }
   this.bar_.appendChild(this.spacer_);
-  this.bar_.appendChild(this.right_);
 };
 
 Ribbon.prototype.scrollLeft = function() {
diff --git a/chrome/browser/resources/file_manager/js/image_editor/image_adjust.js b/chrome/browser/resources/file_manager/js/image_editor/image_adjust.js
index cf53f40..e53c1b4 100644
--- a/chrome/browser/resources/file_manager/js/image_editor/image_adjust.js
+++ b/chrome/browser/resources/file_manager/js/image_editor/image_adjust.js
@@ -325,7 +325,7 @@ ImageEditor.Mode.Blur = function() {
 ImageEditor.Mode.Blur.prototype =
     {__proto__: ImageEditor.Mode.Adjust.prototype};
 
-ImageEditor.Mode.register(ImageEditor.Mode.Blur);
+// TODO(dgozman): register Mode.Blur in v2.
 
 ImageEditor.Mode.Blur.prototype.createTools = function(toolbar) {
   toolbar.addRange('strength', 0, 0, 1, 100);
@@ -343,7 +343,7 @@ ImageEditor.Mode.Sharpen = function() {
 ImageEditor.Mode.Sharpen.prototype =
     {__proto__: ImageEditor.Mode.Adjust.prototype};
 
-ImageEditor.Mode.register(ImageEditor.Mode.Sharpen);
+// TODO(dgozman): register Mode.Sharpen in v2.
 
 ImageEditor.Mode.Sharpen.prototype.createTools = function(toolbar) {
   toolbar.addRange('strength', 0, 0, 1, 100);
diff --git a/chrome/browser/resources/file_manager/js/image_editor/image_transform.js b/chrome/browser/resources/file_manager/js/image_editor/image_transform.js
index 16e8ed1..95aa156 100644
--- a/chrome/browser/resources/file_manager/js/image_editor/image_transform.js
+++ b/chrome/browser/resources/file_manager/js/image_editor/image_transform.js
@@ -12,7 +12,7 @@ ImageEditor.Mode.Resize = function() {
 
 ImageEditor.Mode.Resize.prototype = {__proto__: ImageEditor.Mode.prototype};
 
-ImageEditor.Mode.register(ImageEditor.Mode.Resize);
+// TODO(dgozman): register Mode.Resize in v2.
 
 ImageEditor.Mode.Resize.prototype.createTools = function(toolbar) {
   var canvas = this.getContent().getCanvas();