Merge 114424 - [filebrowser] Improve visuals and fix issues when renaming image in editor.

BUG=chromium-os:24033,chromium-os:23974,chromium-os:23860,chromium-os:23769
TEST=See bugs.
Review URL: http://codereview.chromium.org/8935004

TBR=dgozman@chromium.org
Review URL: http://codereview.chromium.org/8951002

git-svn-id: svn://svn.chromium.org/chrome/branches/963/src@114568 0039d316-1c4b-4281-b951-d872f2087c98

2 files changed, 72 insertions, 18 deletions

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 c8f5076..0e53f59 100644
--- a/chrome/browser/resources/file_manager/js/image_editor/gallery.css
+++ b/chrome/browser/resources/file_manager/js/image_editor/gallery.css
@@ -229,22 +229,49 @@ body {
 /* Filename */
 
 .gallery .filename-spacer {
-  padding: 0 10px;
-  display: -webkit-box;
-  -webkit-box-orient: horizontal;
-  -webkit-box-align: center;
+  position: relative;
+  width: 270px;
 }
 
+.gallery[renaming] .filename-spacer > div,
 .gallery .filename-spacer > input {
+  opacity: 0;
+  z-index: 0;
+}
+
+.gallery .filename-spacer > div,
+.gallery[renaming] .filename-spacer > input {
+  opacity: 1;
+  z-index: 1;
+}
+
+.gallery .filename-spacer > input,
+.gallery .filename-spacer > div {
+  font-family: Open Sans,Droid Sans Fallback,sans-serif;
+  position: absolute;
+  left: 10px;
+  top: 15px;
   background-color: transparent;
   color: white;
-  width: 200px;
+  width: 260px;
+  height: 21px;
   border: none;
   outline: none;
+  font-size: 120%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.gallery .filename-spacer > input:focus {
-  background-color: rgba(48, 48, 48, 0.75);
+.gallery .filename-spacer > div:hover {
+  background-color: rgba(48, 48, 48, 1.0);
+  cursor: pointer;
+}
+
+.gallery .filename-spacer > input:focus,
+.gallery .filename-spacer > input:focus:hover {
+  background-color: white;
+  color: black;
   border-right: 1px solid white;
   border-bottom: 1px solid white;
 }
@@ -268,12 +295,12 @@ body {
 
   width: 280px;
   max-width: 100%;
-  -webkit-transition: max-width 500ms ease-in-out;
+  -webkit-transition: opacity 180ms linear;
   z-index: 0;
 }
 
 .gallery[editing] .toolbar .ribbon {
-  max-width: 0;
+  opacity: 0;
 }
 
 .gallery .ribbon-image {
@@ -321,17 +348,18 @@ body {
   overflow: hidden;
   pointer-events: none;
   right: 0;
-  width: 75%;
+  width: 100%;
+  opacity: 0;
   height: 55px;
   color: white;
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: center;
-  -webkit-transition: width 500ms ease-in-out;
-  }
+  -webkit-transition: opacity 180ms linear;
+}
 
 .gallery[editing] .toolbar .edit-bar {
-  width: 100%;
+  opacity: 1;
 }
 
 .gallery .edit-main {
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 01c03ec..f8fa8a7 100644
--- a/chrome/browser/resources/file_manager/js/image_editor/gallery.js
+++ b/chrome/browser/resources/file_manager/js/image_editor/gallery.js
@@ -101,10 +101,15 @@ Gallery.prototype.initDom_ = function(shareActions) {
   filenameSpacer.className = 'filename-spacer';
   this.toolbar_.appendChild(filenameSpacer);
 
+  this.filenameText_ = doc.createElement('div');
+  this.filenameText_.addEventListener('click',
+      this.onFilenameClick_.bind(this));
+  filenameSpacer.appendChild(this.filenameText_);
+
   this.filenameEdit_ = doc.createElement('input');
   this.filenameEdit_.setAttribute('type', 'text');
   this.filenameEdit_.addEventListener('blur',
-      this.updateFilename_.bind(this));
+      this.onFilenameEditBlur_.bind(this));
   this.filenameEdit_.addEventListener('keydown',
       this.onFilenameEditKeydown_.bind(this));
   filenameSpacer.appendChild(this.filenameEdit_);
@@ -266,7 +271,21 @@ Gallery.prototype.updateFilename_ = function() {
 
   var fullName = item.getCopyName() ||
       ImageUtil.getFullNameFromUrl(item.getUrl());
-  this.filenameEdit_.value = ImageUtil.getFileNameFromFullName(fullName);
+  var displayName = ImageUtil.getFileNameFromFullName(fullName);
+  this.filenameEdit_.value = displayName;
+  this.filenameText_.textContent = displayName;
+};
+
+Gallery.prototype.onFilenameClick_ = function() {
+  ImageUtil.setAttribute(this.container_, 'renaming', true);
+  setTimeout(this.filenameEdit_.select.bind(this.filenameEdit_), 0);
+  this.cancelFading_();
+};
+
+Gallery.prototype.onFilenameEditBlur_ = function() {
+  ImageUtil.setAttribute(this.container_, 'renaming', false);
+  this.updateFilename_();
+  this.initiateFading_();
 };
 
 Gallery.prototype.onFilenameEditKeydown_ = function() {
@@ -333,6 +352,10 @@ Gallery.prototype.renameItem_ = function(item, name) {
       onVictimFound, doRename);
 };
 
+Gallery.prototype.isRenaming_ = function() {
+  return this.container_.hasAttribute('renaming');
+};
+
 Gallery.prototype.onClose_ = function() {
   // TODO: handle write errors gracefully (suggest retry or saving elsewhere).
   this.saveChanges_(this.closeCallback_);
@@ -350,7 +373,9 @@ Gallery.prototype.openImage = function(id, content, metadata, slide, callback) {
   if (item) {
     this.updateFilename_();
   } else {
-    this.filenameEdit_.value = ImageUtil.getFileNameFromUrl(content);
+    var displayName = ImageUtil.getFileNameFromUrl(content);
+    this.filenameEdit_.value = displayName;
+    this.filenameText_.textContent = displayName;
   }
 
   var self = this;
@@ -483,12 +508,13 @@ Gallery.prototype.onMouseMove_ = function(e) {
 
 Gallery.prototype.onFadeTimeout_ = function() {
   this.fadeTimeoutId_ = null;
-  if (this.isEditing_() || this.isSharing_()) return;
+  if (this.isEditing_() || this.isSharing_() || this.isRenaming_()) return;
   this.container_.removeAttribute('tools');
 };
 
 Gallery.prototype.initiateFading_ = function(opt_timeout) {
-  if (this.mouseOverTool_ || this.isEditing_() || this.isSharing_())
+  if (this.mouseOverTool_ || this.isEditing_() || this.isSharing_() ||
+      this.isRenaming_())
     return;
 
   if (!this.fadeTimeoutId_)