Revert "Gallery: Replace buttons in top toolbar with paper-button and new icons."

ui/file_manager/gallery/js/gallery.js

 // Copyright 2014 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.
 
 /**
  * Overrided metadata worker's path.
  * @type {string}
  */
 ContentMetadataProvider.WORKER_SCRIPT = '/js/metadata_worker.js';
 
@@ skipping 67 matching lines @@
   // -----------------------------------------------------------------
   // Initializes the UI.
 
   // Initialize the dialog label.
   cr.ui.dialogs.BaseDialog.OK_LABEL = str('GALLERY_OK_LABEL');
   cr.ui.dialogs.BaseDialog.CANCEL_LABEL = str('GALLERY_CANCEL_LABEL');
 
   var content = queryRequiredElement(document, '#content');
   content.addEventListener('click', this.onContentClick_.bind(this));
 
+  this.header_ = queryRequiredElement(document, '#header');
   this.topToolbar_ = queryRequiredElement(document, '#top-toolbar');
   this.bottomToolbar_ = queryRequiredElement(document, '#bottom-toolbar');
 
   this.filenameSpacer_ = queryRequiredElement(this.topToolbar_,
       '.filename-spacer');
   this.filenameEdit_ = util.createChild(this.filenameSpacer_,
                                         'namebox', 'input');
 
   this.filenameEdit_.setAttribute('type', 'text');
   this.filenameEdit_.addEventListener('blur',
       this.onFilenameEditBlur_.bind(this));
 
   this.filenameEdit_.addEventListener('focus',
       this.onFilenameFocus_.bind(this));
 
   this.filenameEdit_.addEventListener('keydown',
       this.onFilenameEditKeydown_.bind(this));
 
   var buttonSpacer = queryRequiredElement(this.topToolbar_, '.button-spacer');
 
   this.prompt_ = new ImageEditor.Prompt(this.container_, strf);
 
   this.errorBanner_ = new ErrorBanner(this.container_);
 
-  var slideModeButton = queryRequiredElement(
-      this.topToolbar_, '.button.slide-mode');
-  slideModeButton.addEventListener(
-      'click', this.onSlideModeButtonClicked_.bind(this));
-
-  var mosaicModeButton = queryRequiredElement(
-      this.topToolbar_, '.button.mosaic-mode');
-  mosaicModeButton.addEventListener(
-      'click', this.onMosaicModeButtonClicked_.bind(this));
+  this.modeButton_ = queryRequiredElement(this.topToolbar_, 'button.mode');
+  this.modeButton_.addEventListener('click',
+      this.toggleMode_.bind(this, undefined));
 
   this.mosaicMode_ = new MosaicMode(content,
                                     this.errorBanner_,
                                     this.dataModel_,
                                     this.selectionModel_,
                                     this.volumeManager_,
                                     this.toggleMode_.bind(this, undefined));
 
   this.slideMode_ = new SlideMode(this.container_,
                                   content,
                                   this.topToolbar_,
                                   this.bottomToolbar_,
                                   this.prompt_,
                                   this.errorBanner_,
                                   this.dataModel_,
                                   this.selectionModel_,
                                   this.metadataModel_,
                                   this.thumbnailModel_,
                                   this.context_,
                                   this.volumeManager_,
                                   this.toggleMode_.bind(this),
                                   str);
 
   this.slideMode_.addEventListener('image-displayed', function() {
     cr.dispatchSimpleEvent(this, 'image-displayed');
   }.bind(this));
 
-  this.deleteButton_ = queryRequiredElement(this.topToolbar_, '.button.delete');
+  this.deleteButton_ = this.initToolbarButton_('delete', 'GALLERY_DELETE');
   this.deleteButton_.addEventListener('click', this.delete_.bind(this));
 
-  this.shareButton_ = queryRequiredElement(this.topToolbar_, '.button.share');
+  this.shareButton_ = this.initToolbarButton_('share', 'GALLERY_SHARE');
   this.shareButton_.addEventListener(
       'click', this.onShareButtonClick_.bind(this));
 
   this.dataModel_.addEventListener('splice', this.onSplice_.bind(this));
   this.dataModel_.addEventListener('content', this.onContentChange_.bind(this));
 
   this.selectionModel_.addEventListener('change', this.onSelection_.bind(this));
   this.slideMode_.addEventListener('useraction', this.onUserAction_.bind(this));
 
   this.shareDialog_ = new ShareDialog(this.container_);
@@ skipping 68 matching lines @@
  * Unloads the Gallery.
  * @private
  */
 Gallery.prototype.onPageHide_ = function() {
   this.volumeManager_.removeEventListener(
       'externally-unmounted', this.onExternallyUnmountedBound_);
   this.volumeManager_.dispose();
 };
 
 /**
+ * Initializes a toolbar button.
+ *
+ * @param {string} className Class to add.
+ * @param {string} title Button title.
+ * @return {!HTMLElement} Newly created button.
+ * @private
+ */
+Gallery.prototype.initToolbarButton_ = function(className, title) {
+  var button = queryRequiredElement(this.topToolbar_, 'button.' + className);
+  button.title = str(title);
+  return button;
+};
+
+/**
  * Loads the content.
  *
  * @param {!Array<!Entry>} selectedEntries Array of selected entries.
  */
 Gallery.prototype.load = function(selectedEntries) {
   GalleryUtil.createEntrySet(selectedEntries).then(function(allEntries) {
     this.loadInternal_(allEntries, selectedEntries);
   }.bind(this));
 };
 
@@ skipping 141 matching lines @@
 */
 Gallery.prototype.onUserAction_ = function() {
   // Show the toolbar and hide it after the default timeout.
   this.inactivityWatcher_.kick();
 };
 
 /**
  * Sets the current mode, update the UI.
  * @param {!(SlideMode|MosaicMode)} mode Current mode.
  * @private
- *
- * TODO(yawano): Since this method is confusing with changeCurrentMode_. Rename
- *     or remove this method.
  */
 Gallery.prototype.setCurrentMode_ = function(mode) {
   if (mode !== this.slideMode_ && mode !== this.mosaicMode_)
     console.error('Invalid Gallery mode');
 
   this.currentMode_ = mode;
   this.container_.setAttribute('mode', this.currentMode_.getName());
   this.updateSelectionAndState_();
-};
-
-/**
- * Handles click event of SlideModeButton.
- * @param {!Event} event An event.
- * @private
- */
-Gallery.prototype.onSlideModeButtonClicked_ = function(event) {
-  this.changeCurrentMode_(this.slideMode_, event);
-};
-
-/**
- * Handles click event of MosaicModeButton.
- * @param {!Event} event An event.
- * @private
- */
-Gallery.prototype.onMosaicModeButtonClicked_ = function(event) {
-  this.changeCurrentMode_(this.mosaicMode_, event);
-};
-
-/**
- * Change current mode.
- * @param {!(SlideMode|MosaicMode)} mode Target mode.
- * @param {Event=} opt_event Event that caused this call.
- * @private
- */
-Gallery.prototype.changeCurrentMode_ = function(mode, opt_event) {
-  return new Promise(function(fulfill, reject) {
-    // Do not re-enter while changing the mode.
-    if (this.currentMode_ === mode || this.changingMode_) {
-      fulfill();
-      return;
-    }
-
-    if (opt_event)
-      this.onUserAction_();
-
-    this.changingMode_ = true;
-
-    var onModeChanged = function() {
-      this.changingMode_ = false;
-      fulfill();
-    }.bind(this);
-
-    var tileIndex = Math.max(0, this.selectionModel_.selectedIndex);
-
-    var mosaic = this.mosaicMode_.getMosaic();
-    var tileRect = mosaic.getTileRect(tileIndex);
-
-    if (mode === this.mosaicMode_) {
-      this.setCurrentMode_(this.mosaicMode_);
-      mosaic.transform(
-          tileRect, this.slideMode_.getSelectedImageRect(), true /* instant */);
-      this.slideMode_.leave(
-          tileRect,
-          function() {
-            // Animate back to normal position.
-            mosaic.transform(null, null);
-            mosaic.show();
-            onModeChanged();
-          }.bind(this));
-      this.bottomToolbar_.hidden = true;
-    } else {
-      this.setCurrentMode_(this.slideMode_);
-      this.slideMode_.enter(
-          tileRect,
-          function() {
-            // Animate to zoomed position.
-            mosaic.transform(tileRect, this.slideMode_.getSelectedImageRect());
-            mosaic.hide();
-          }.bind(this),
-          onModeChanged);
-      this.bottomToolbar_.hidden = false;
-    }
-  }.bind(this));
+  this.updateButtons_();
 };
 
 /**
  * Mode toggle event handler.
  * @param {function()=} opt_callback Callback.
  * @param {Event=} opt_event Event that caused this call.
  * @private
  */
 Gallery.prototype.toggleMode_ = function(opt_callback, opt_event) {
-  var targetMode = this.currentMode_ === this.slideMode_ ?
-      this.mosaicMode_ : this.slideMode_;
+  if (!this.modeButton_)
+    return;
 
-  this.changeCurrentMode_(targetMode, opt_event).then(function() {
-    if (opt_callback)
-      opt_callback();
-  });
+  if (this.changingMode_) // Do not re-enter while changing the mode.
+    return;
+
+  if (opt_event)
+    this.onUserAction_();
+
+  this.changingMode_ = true;
+
+  var onModeChanged = function() {
+    this.changingMode_ = false;
+    if (opt_callback) opt_callback();
+  }.bind(this);
+
+  var tileIndex = Math.max(0, this.selectionModel_.selectedIndex);
+
+  var mosaic = this.mosaicMode_.getMosaic();
+  var tileRect = mosaic.getTileRect(tileIndex);
+
+  if (this.currentMode_ === this.slideMode_) {
+    this.setCurrentMode_(this.mosaicMode_);
+    mosaic.transform(
+        tileRect, this.slideMode_.getSelectedImageRect(), true /* instant */);
+    this.slideMode_.leave(
+        tileRect,
+        function() {
+          // Animate back to normal position.
+          mosaic.transform(null, null);
+          mosaic.show();
+          onModeChanged();
+        }.bind(this));
+    this.bottomToolbar_.hidden = true;
+  } else {
+    this.setCurrentMode_(this.slideMode_);
+    this.slideMode_.enter(
+        tileRect,
+        function() {
+          // Animate to zoomed position.
+          mosaic.transform(tileRect, this.slideMode_.getSelectedImageRect());
+          mosaic.hide();
+        }.bind(this),
+        onModeChanged);
+    this.bottomToolbar_.hidden = false;
+  }
 };
 
 /**
  * Deletes the selected items.
  * @private
  */
 Gallery.prototype.delete_ = function() {
   this.onUserAction_();
 
   // Clone the sorted selected indexes array.
@@ skipping 328 matching lines @@
     this.slideMode_.updateThumbnails();
 
   if (this.mosaicMode_) {
     var mosaic = this.mosaicMode_.getMosaic();
     if (mosaic.isInitialized())
       mosaic.reload();
   }
 };
 
 /**
+ * Updates buttons.
+ * @private
+ */
+Gallery.prototype.updateButtons_ = function() {
+  if (this.modeButton_) {
+    var oppositeMode =
+        this.currentMode_ === this.slideMode_ ? this.mosaicMode_ :
+                                                this.slideMode_;
+    this.modeButton_.title = str(oppositeMode.getTitle());
+  }
+};
+
+/**
  * Enters the debug mode.
  */
 Gallery.prototype.debugMe = function() {
   this.mosaicMode_.debugMe();
 };
 
 /**
  * Singleton gallery.
  * @type {Gallery}
  */
@@ skipping 47 matching lines @@
 initializePromise.then(reload);
 
 /**
  * Enteres the debug mode.
  */
 window.debugMe = function() {
   initializePromise.then(function() {
     gallery.debugMe();
   });
 };