[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

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /*
  * Base class that Ribbon uses to display photos.
  */
 
 function RibbonClient() {}
 
@@ skipping 50 matching lines @@
 Gallery.editorModes = [
   new ImageEditor.Mode.InstantAutofix(),
   new ImageEditor.Mode.Crop(),
   new ImageEditor.Mode.Exposure(),
   new ImageEditor.Mode.OneClick('rotate_left', new Command.Rotate(-1)),
   new ImageEditor.Mode.OneClick('rotate_right', new Command.Rotate(1))
 ];
 
 Gallery.FADE_TIMEOUT = 3000;
 Gallery.FIRST_FADE_TIMEOUT = 1000;
+Gallery.OVERWRITE_BUBBLE_MAX_TIMES = 5;
 
 Gallery.prototype.initDom_ = function() {
   var doc = this.document_;
 
   doc.oncontextmenu = function(e) { e.preventDefault(); };
 
   // Clean up after the previous instance of Gallery.
   this.container_.removeAttribute('editing');
   this.container_.removeAttribute('tools');
 
@@ skipping 42 matching lines @@
     this.filenameEdit_.blur();
     if (this.isShowingVideo_())
       this.mediaControls_.togglePlayStateWithFeedback();
   }).bind(this));
   this.container_.appendChild(this.imageContainer_);
 
   this.toolbar_ = doc.createElement('div');
   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_);
+
+  this.bubble_ = doc.createElement('div');
+  this.bubble_.className = 'bubble';
+  var bubbleContent = doc.createElement('div');
+  bubbleContent.innerHTML = this.displayStringFunction_('overwrite_bubble');
+  this.bubble_.appendChild(bubbleContent);
+  var bubblePointer = doc.createElement('span');
+  bubblePointer.className = 'pointer bottom';
+  this.bubble_.appendChild(bubblePointer);
+  var bubbleClose = doc.createElement('div');
+  bubbleClose.className = 'close-x';
+  bubbleClose.addEventListener('click', this.onCloseBubble_.bind(this));
+  this.bubble_.appendChild(bubbleClose);
+  this.bubble_.setAttribute('hidden', 'hidden');
+  this.toolbar_.appendChild(this.bubble_);
+
+  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');
   this.filenameEdit_.addEventListener('blur',
       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 white';
+  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_);
 
   this.ribbonSpacer_ = doc.createElement('div');
   this.ribbonSpacer_.className = 'ribbon-spacer';
   this.toolbar_.appendChild(this.ribbonSpacer_);
 
   this.mediaSpacer_ = doc.createElement('div');
@@ skipping 176 matching lines @@
         this.displayStringFunction_);
     } else {
       this.shareMode_ = null;
     }
   }.bind(this));
 };
 
 Gallery.prototype.onImageContentChanged_ = function() {
   this.imageChanges_++;
   if (this.imageChanges_ == 0) return;
-  if (this.imageChanges_ == 1) {  // First edit
-    this.keepOriginal_.setAttribute('visible', 'true');
-    this.savedLabel_.style.display = 'inline-block';
+
+  if (this.imageChanges_ == 1) {
+    // First edit.
+    this.filenameSpacer_.setAttribute('saved', 'saved');
+    this.filenameSpacer_.setAttribute('overwrite', 'overwrite');
+
+    var key = 'gallery-overwrite-original';
+    var overwrite = key in localStorage ? (localStorage[key] == "true") : true;
+    this.overwriteOriginal_.checked = overwrite;
+    this.applyOverwrite_(overwrite);
+
+    key = 'gallery-overwrite-bubble';
+    var times = key in localStorage ? parseInt(localStorage[key], 10) : 0;
+    if (times < Gallery.OVERWRITE_BUBBLE_MAX_TIMES) {
+      this.bubble_.removeAttribute('hidden');
+      localStorage[key] = times + 1;
+    }
+
     ImageUtil.metrics.recordUserAction(ImageUtil.getMetricName('Edit'));
   }
+
   var label = this.savedLabel_;
   setTimeout(function(){ label.setAttribute('highlighted', 'true'); }, 0);
   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.applyOverwrite_ = function(overwrite) {
+  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.onOverwriteOriginalClick_ = function(event) {
+  var overwrite = event.target.checked;
+  localStorage['gallery-overwrite-original'] = overwrite;
+  this.applyOverwrite_(overwrite);
+};
+
+Gallery.prototype.onCloseBubble_ = function(event) {
+  this.bubble_.setAttribute('hidden', 'hidden');
+  localStorage['gallery-overwrite-bubble'] = Gallery.OVERWRITE_BUBBLE_MAX_TIMES;
 };
 
 Gallery.prototype.saveItem_ = function(item, callback, canvas, modified) {
   if (modified) {
     item.save(this.context_.saveDirEntry, this.context_.metadataProvider,
         canvas, callback);
   } else {
     if (callback) callback();
   }
 };
 
 Gallery.prototype.saveChanges_ = function(opt_callback) {
   this.imageChanges_ = 0;
+  this.bubble_.setAttribute('hidden', 'hidden');
   if (this.isShowingVideo_()) {
     // This call ensures that editor leaves the mode and closes respective UI
     // elements. Currently, the only mode for videos is sharing.
     this.editor_.leaveModeGently();
     if (opt_callback) opt_callback();
     return;
   }
   this.editor_.requestImage(
       this.saveItem_.bind(this, this.ribbon_.getSelectedItem(), opt_callback));
 };
@@ skipping 17 matching lines @@
   }
 
   this.context_.onNameChange(fullName);
 
   var displayName = ImageUtil.getFileNameFromFullName(fullName);
   this.filenameEdit_.value = displayName;
   this.filenameText_.textContent = displayName;
 };
 
 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_();
 };
 
 Gallery.prototype.onFilenameEditBlur_ = function() {
   if (this.filenameEdit_.value && this.filenameEdit_.value[0] == '.') {
     this.editor_.getPrompt().show('file_hidden_name', 5000);
     this.filenameEdit_.focus();
     return;
   }
 
   if (this.filenameEdit_.value) {
     this.renameItem_(this.ribbon_.getSelectedItem(),
         this.filenameEdit_.value);
   }
 
-  ImageUtil.setAttribute(this.container_, 'renaming', false);
+  ImageUtil.setAttribute(this.filenameSpacer_, 'renaming', false);
   this.initiateFading_();
 };
 
 Gallery.prototype.onFilenameEditKeydown_ = function() {
   switch (event.keyCode) {
     case 27:  // Escape
       this.updateFilename_();
       this.filenameEdit_.blur();
       break;
 
@@ skipping 21 matching lines @@
 
   function onSuccess(entry) {
     item.setUrl(entry.toURL());
     self.updateFilename_();
   }
 
   function doRename() {
     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.
       dir.getFile(
           ImageUtil.getFullNameFromUrl(item.getUrl()),
           {create: false},
           function(entry) { entry.moveTo(dir, newName, onSuccess, onError); },
           onError);
     }
   }
 
   function onVictimFound(victim) {
     self.editor_.getPrompt().show('file_exists', 3000);
     self.filenameEdit_.value = name;
     self.onFilenameClick_();
   }
 
   dir.getFile(newName, {create: false, exclusive: false},
       onVictimFound, doRename);
 };
 
 Gallery.prototype.isRenaming_ = function() {
-  return this.container_.hasAttribute('renaming');
+  return this.filenameSpacer_.hasAttribute('renaming');
 };
 
 Gallery.getFileBrowserPrivate = function() {
   return chrome.fileBrowserPrivate || window.top.chrome.fileBrowserPrivate;
 };
 
 Gallery.prototype.toggleFullscreen_ = function() {
   Gallery.getFileBrowserPrivate().toggleFullscreen();
 };
 
@@ skipping 17 matching lines @@
   this.saveChanges_(this.close_.bind(this));
 };
 
 Gallery.prototype.prefetchImage = function(id, content, metadata) {
   this.editor_.prefetchImage(id, content, metadata);
 };
 
 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);
 
   this.showSpinner_(true);
 
   var self = this;
   function loadDone(loadType) {
     var video = self.isShowingVideo_();
     ImageUtil.setAttribute(self.container_, 'video', video);
@@ skipping 109 matching lines @@
       this.editor_.getPrompt().showAt(
           'top', 'readonly_warning', 0, this.context_.readonlyDirName);
     }
     this.cancelFading_();
   } else {
     this.editor_.getPrompt().hide();
     if (!this.isShowingVideo_()) {
       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_();
   }
 
   ImageUtil.setAttribute(this.editButton_, 'pressed', this.isEditing_());
 };
 
 Gallery.prototype.isSharing_ = function(event) {
   return this.shareMode_ && this.shareMode_ == this.editor_.getMode();
 };
 
@@ skipping 564 matching lines @@
   tryNext(10);
 };
 
 Ribbon.Item.prototype.setCopyName = function(dirEntry, opt_callback) {
   this.createCopyName_(dirEntry, function(name) {
     this.nameForSaving_ = name;
     if (opt_callback) opt_callback();
   }.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;
 };
 
 // The url and metadata stored in the item are not valid while the modified
 // image is being saved. Use the results of the latest edit instead.
 
 Ribbon.Item.prototype.overrideContent = function(canvas, metadata) {
   this.canvas_ = canvas;
   this.backupMetadata_ = this.metadata_;
@@ skipping 141 matching lines @@
 ShareMode.prototype.setUp = function() {
   ImageEditor.Mode.prototype.setUp.apply(this, arguments);
   ImageUtil.setAttribute(this.menu_, 'hidden', false);
   ImageUtil.setAttribute(this.button_, 'pressed', false);
 };
 
 ShareMode.prototype.cleanUpUI = function() {
   ImageEditor.Mode.prototype.cleanUpUI.apply(this, arguments);
   ImageUtil.setAttribute(this.menu_, 'hidden', true);
 };