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

ui/file_manager/gallery/js/gallery.js

Index: ui/file_manager/gallery/js/gallery.js
diff --git a/ui/file_manager/gallery/js/gallery.js b/ui/file_manager/gallery/js/gallery.js
index 67a6e68b53daa73bf0e6ddfb52415645ae924144..027e0e3d2eca302ed4a1511f54933234f863bfca 100644
--- a/ui/file_manager/gallery/js/gallery.js
+++ b/ui/file_manager/gallery/js/gallery.js
@@ -85,6 +85,7 @@ function Gallery(volumeManager) {
   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');
 
@@ -109,15 +110,9 @@ function Gallery(volumeManager) {
 
   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_,
@@ -145,10 +140,10 @@ function Gallery(volumeManager) {
     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));
 
@@ -237,6 +232,20 @@ Gallery.prototype.onPageHide_ = function() {
 };
 
 /**
+ * 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.
@@ -398,9 +407,6 @@ Gallery.prototype.onUserAction_ = function() {
  * 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_)
@@ -409,97 +415,62 @@ Gallery.prototype.setCurrentMode_ = function(mode) {
   this.currentMode_ = mode;
   this.container_.setAttribute('mode', this.currentMode_.getName());
   this.updateSelectionAndState_();
+  this.updateButtons_();
 };
 
 /**
- * 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.
+ * Mode toggle event handler.
+ * @param {function()=} opt_callback Callback.
  * @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;
-    }
+Gallery.prototype.toggleMode_ = function(opt_callback, opt_event) {
+  if (!this.modeButton_)
+    return;
 
-    if (opt_event)
-      this.onUserAction_();
+  if (this.changingMode_) // Do not re-enter while changing the mode.
+    return;
 
-    this.changingMode_ = true;
+  if (opt_event)
+    this.onUserAction_();
 
-    var onModeChanged = function() {
-      this.changingMode_ = false;
-      fulfill();
-    }.bind(this);
+  this.changingMode_ = true;
 
-    var tileIndex = Math.max(0, this.selectionModel_.selectedIndex);
+  var onModeChanged = function() {
+    this.changingMode_ = false;
+    if (opt_callback) opt_callback();
+  }.bind(this);
 
-    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));
-};
+  var tileIndex = Math.max(0, this.selectionModel_.selectedIndex);
 
-/**
- * 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_;
+  var mosaic = this.mosaicMode_.getMosaic();
+  var tileRect = mosaic.getTileRect(tileIndex);
 
-  this.changeCurrentMode_(targetMode, opt_event).then(function() {
-    if (opt_callback)
-      opt_callback();
-  });
+  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;
+  }
 };
 
 /**
@@ -848,6 +819,19 @@ Gallery.prototype.updateThumbnails_ = function() {
 };
 
 /**
+ * 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() {