[filemanager] New visuals for file name, saved and overwrite original UI elemetns in image editor.

chrome/browser/resources/file_manager/js/image_editor/gallery.js

Index: chrome/browser/resources/file_manager/js/image_editor/gallery.js
===================================================================
--- chrome/browser/resources/file_manager/js/image_editor/gallery.js	(revision 132564)
+++ chrome/browser/resources/file_manager/js/image_editor/gallery.js	(working copy)
@@ -130,15 +130,18 @@
   this.toolbar_.className = 'toolbar tool dimmable';
   this.container_.appendChild(this.toolbar_);
 
-  var filenameSpacer = doc.createElement('div');
-  filenameSpacer.className = 'filename-spacer';
-  this.toolbar_.appendChild(filenameSpacer);
+  this.filenameSpacer_ = doc.createElement('div');
+  this.filenameSpacer_.className = 'filename-spacer';
+  this.toolbar_.appendChild(this.filenameSpacer_);
 
+  var nameBox = doc.createElement('div');
+  nameBox.className = 'namebox';
+  this.filenameSpacer_.appendChild(nameBox);
+
   this.filenameText_ = doc.createElement('div');
-  this.filenameText_.className = 'name';
   this.filenameText_.addEventListener('click',
       this.onFilenameClick_.bind(this));
-  filenameSpacer.appendChild(this.filenameText_);
+  nameBox.appendChild(this.filenameText_);
 
   this.filenameEdit_ = doc.createElement('input');
   this.filenameEdit_.setAttribute('type', 'text');
@@ -146,24 +149,36 @@
       this.onFilenameEditBlur_.bind(this));
   this.filenameEdit_.addEventListener('keydown',
       this.onFilenameEditKeydown_.bind(this));
-  filenameSpacer.appendChild(this.filenameEdit_);
+  nameBox.appendChild(this.filenameEdit_);
 
   var options = doc.createElement('div');
   options.className = 'options';
-  filenameSpacer.appendChild(options);
+  this.filenameSpacer_.appendChild(options);
 
   this.savedLabel_ = doc.createElement('div');
   this.savedLabel_.className = 'saved';
   this.savedLabel_.textContent = this.displayStringFunction_('saved');
   options.appendChild(this.savedLabel_);
 
-  this.keepOriginal_ = doc.createElement('div');
-  this.keepOriginal_.className = 'keep-original';
-  this.keepOriginal_.textContent = this.displayStringFunction_('keep_original');
-  this.keepOriginal_.addEventListener('click',
-      this.onKeepOriginalClick_.bind(this));
-  options.appendChild(this.keepOriginal_);
+  var overwriteOriginalBox = doc.createElement('div');
+  overwriteOriginalBox.className = 'overwrite-original';
+  options.appendChild(overwriteOriginalBox);
 
+  this.overwriteOriginal_ = doc.createElement('input');
+  this.overwriteOriginal_.type = 'checkbox';
+  this.overwriteOriginal_.id = 'overwrite-checkbox';
+  this.overwriteOriginal_.className = 'common';
+  this.overwriteOriginal_.setAttribute('white', 'true');
+  overwriteOriginalBox.appendChild(this.overwriteOriginal_);
+  this.overwriteOriginal_.addEventListener('click',
+      this.onOverwriteOriginalClick_.bind(this));
+
+  var overwriteLabel = doc.createElement('label');
+  overwriteLabel.textContent =
+      this.displayStringFunction_('overwrite_original');
+  overwriteLabel.setAttribute('for', 'overwrite-checkbox');
+  overwriteOriginalBox.appendChild(overwriteLabel);
+
   this.buttonSpacer_ = doc.createElement('div');
   this.buttonSpacer_.className = 'button-spacer';
   this.toolbar_.appendChild(this.buttonSpacer_);
@@ -360,8 +375,9 @@
   this.imageChanges_++;
   if (this.imageChanges_ == 0) return;
   if (this.imageChanges_ == 1) {  // First edit
-    this.keepOriginal_.setAttribute('visible', 'true');
-    this.savedLabel_.style.display = 'inline-block';
+    this.filenameSpacer_.setAttribute('saved', 'saved');
+    this.filenameSpacer_.setAttribute('overwrite', 'overwrite');
+    this.overwriteOriginal_.checked = true;
     ImageUtil.metrics.recordUserAction(ImageUtil.getMetricName('Edit'));
   }
   var label = this.savedLabel_;
@@ -369,10 +385,15 @@
   setTimeout(function(){ label.removeAttribute('highlighted'); }, 300);
 };
 
-Gallery.prototype.onKeepOriginalClick_ = function() {
-  this.keepOriginal_.removeAttribute('visible');
-  this.ribbon_.getSelectedItem().setCopyName(this.context_.saveDirEntry,
-    this.updateFilename_.bind(this));
+Gallery.prototype.onOverwriteOriginalClick_ = function(event) {
+  var overwrite = event.target.checked;
+  if (overwrite) {
+    this.ribbon_.getSelectedItem().setOriginalName(this.context_.saveDirEntry,
+      this.updateFilename_.bind(this));
+  } else {
+    this.ribbon_.getSelectedItem().setCopyName(this.context_.saveDirEntry,
+      this.updateFilename_.bind(this));
+  }
 };
 
 Gallery.prototype.saveItem_ = function(item, callback, canvas, modified) {
@@ -423,7 +444,7 @@
 };
 
 Gallery.prototype.onFilenameClick_ = function() {
-  ImageUtil.setAttribute(this.container_, 'renaming', true);
+  ImageUtil.setAttribute(this.filenameSpacer_, 'renaming', true);
   setTimeout(this.filenameEdit_.select.bind(this.filenameEdit_), 0);
   this.cancelFading_();
 };
@@ -440,7 +461,7 @@
         this.filenameEdit_.value);
   }
 
-  ImageUtil.setAttribute(this.container_, 'renaming', false);
+  ImageUtil.setAttribute(this.filenameSpacer_, 'renaming', false);
   this.initiateFading_();
 };
 
@@ -482,7 +503,7 @@
     if (self.imageChanges_ > 0) {
       // Use this name in the next save operation.
       item.setNameForSaving(newName);
-      self.keepOriginal_.removeAttribute('visible');
+      this.filenameSpacer_.removeAttribute('overwrite');
       self.updateFilename_();
     } else {
       // Rename file in place.
@@ -505,7 +526,7 @@
 };
 
 Gallery.prototype.isRenaming_ = function() {
-  return this.container_.hasAttribute('renaming');
+  return this.filenameSpacer_.hasAttribute('renaming');
 };
 
 Gallery.getFileBrowserPrivate = function() {
@@ -543,8 +564,8 @@
 Gallery.prototype.openImage = function(id, content, metadata, slide, callback) {
   // The first change is load, we should not count it.
   this.imageChanges_ = -1;
-  this.savedLabel_.style.display = 'none';
-  this.keepOriginal_.removeAttribute('visible');
+  this.filenameSpacer_.removeAttribute('overwrite');
+  this.filenameSpacer_.removeAttribute('saved');
 
   var item = this.ribbon_.getSelectedItem();
   this.updateFilename_(content);
@@ -674,8 +695,9 @@
       var item = this.ribbon_.getSelectedItem();
       this.editor_.requestImage(item.updateThumbnail.bind(item));
     }
-    this.savedLabel_.style.display = 'none';
-    this.keepOriginal_.removeAttribute('visible');
+    this.filenameSpacer_.removeAttribute('saved');
+    this.filenameSpacer_.removeAttribute('overwrite');
+    this.saveChanges_();
     this.initiateFading_();
   }
 
@@ -1260,6 +1282,11 @@
   }.bind(this));
 };
 
+Ribbon.Item.prototype.setOriginalName = function(dirEntry, opt_callback) {
+  this.nameForSaving_ = null;
+  if (opt_callback) opt_callback();
+};
+
 Ribbon.Item.prototype.setNameForSaving = function(newName) {
   this.nameForSaving_ = newName;
 };