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

BUG=488227
TEST=none

Review URL: https://codereview.chromium.org/1142303007

Cr-Commit-Position: refs/heads/master@{#333239}

ui/file_manager/gallery/css/gallery.css

@@ -43,7 +43,7 @@ input[type='checkbox']:checked {
 }
 
 /* Common background for both mosaic and slide mode. */
-.gallery .content {
+.gallery > .content {
   background-color: black;
 }
 
@@ -157,13 +157,12 @@ input[type='checkbox']:checked {
   -webkit-box-orient: horizontal;
   -webkit-box-pack: start;
   background-color: rgba(40, 42, 45, 0.9);
-  border-top: 1px solid rgba(50, 50, 50, 0.8);
   display: flex;
-  height: 55px;
+  height: 48px;
   left: 0;
   opacity: 0;
   overflow: hidden;
-  padding: 0 10px;
+  padding: 0;
   pointer-events: none;
   position: absolute;
   right: 0;
@@ -176,6 +175,7 @@ input[type='checkbox']:checked {
 
 .gallery > .toolbar.bottom {
   bottom: 0;
+  height: 55px;
 }
 
 .gallery > .toolbar.bottom > .slide-mode-toolbar {
@@ -303,6 +303,7 @@ input[type='checkbox']:checked {
 /* Filename */
 
 .gallery .filename-spacer {
+  -webkit-margin-start: 16px;
   flex: 1 0 auto;
   height: 100%;
   min-width: 140px;
@@ -335,7 +336,7 @@ input[type='checkbox']:checked {
   padding: 0 3px;
   position: absolute;
   text-overflow: ellipsis;
-  top: 15px;
+  top: 13px;
   white-space: nowrap;
   width: 100%;
 }
@@ -730,95 +731,72 @@ input[type='checkbox']:checked {
   display: none;
 }
 
-.gallery[mode='slide'] > .toolbar button.mode {
-  background-image: -webkit-image-set(
-      url(../images/100/icon_mosaic.png) 1x,
-      url(../images/200/icon_mosaic.png) 2x);
-}
-
-.gallery[mode='slide'] > .toolbar button.mode:active {
-  background-image: -webkit-image-set(
-      url(../images/100/icon_mosaic_selected.png) 1x,
-      url(../images/200/icon_mosaic_selected.png) 2x);
-}
-
-.gallery[mode='mosaic'] > .toolbar button.mode {
-  background-image: -webkit-image-set(
-      url(../images/100/icon_1up.png) 1x,
-      url(../images/200/icon_1up.png) 2x);
-}
-
-.gallery[mode='mosaic'] > .toolbar button.mode:active {
-  background-image: -webkit-image-set(
-      url(../images/100/icon_1up_selected.png) 1x,
-      url(../images/200/icon_1up_selected.png) 2x);
-}
-
-.gallery > .toolbar button.slideshow {
-  background-image: -webkit-image-set(
-      url(../images/100/icon_slideshow.png) 1x,
-      url(../images/200/icon_slideshow.png) 2x);
+.gallery > .toolbar paper-button {
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 32px;
+  margin: 0 8px;
+  min-width: 32px;
+  width: 32px;
 }
 
-.gallery > .toolbar button.slideshow:active,
-.gallery > .toolbar button.slideshow[pressed] {
-  background-image: -webkit-image-set(
-      url(../images/100/icon_slideshow_selected.png) 1x,
-      url(../images/200/icon_slideshow_selected.png) 2x);
+/* Since currently Gallery does not use shadow dom with Polymer, ::shadow
+ * selector does not work correctly. */
+.gallery > .toolbar paper-button::shadow paper-ripple,
+.gallery > .toolbar paper-button > paper-ripple {
+  color: white;
 }
 
-.gallery > .toolbar button.delete {
+.gallery > .toolbar paper-button.edit {
   background-image: -webkit-image-set(
-      url(../images/100/icon_delete.png) 1x,
-      url(../images/200/icon_delete.png) 2x);
+      url(../images/100/edit.png) 1x,
+      url(../images/200/edit.png) 2x);
 }
 
-.gallery > .toolbar button.delete:active {
+.gallery > .toolbar paper-button.print {
   background-image: -webkit-image-set(
-      url(../images/100/icon_delete_selected.png) 1x,
-      url(../images/200/icon_delete_selected.png) 2x);
+      url(../images/100/print.png) 1x,
+      url(../images/200/print.png) 2x);
 }
 
-.gallery > .toolbar button.edit {
+.gallery > .toolbar paper-button.delete {
   background-image: -webkit-image-set(
-      url(../images/100/icon_edit.png) 1x,
-      url(../images/200/icon_edit.png) 2x);
+      url(../images/100/delete.png) 1x,
+      url(../images/200/delete.png) 2x);
 }
 
-.gallery > .toolbar button.edit:active,
-.gallery > .toolbar button.edit[pressed] {
+.gallery > .toolbar paper-button.slide-mode {
   background-image: -webkit-image-set(
-      url(../images/100/icon_edit_selected.png) 1x,
-      url(../images/200/icon_edit_selected.png) 2x);
+      url(../images/100/slide_view.png) 1x,
+      url(../images/200/slide_view.png) 2x);
 }
 
-.gallery > .toolbar button.print {
+.gallery > .toolbar paper-button.mosaic-mode {
   background-image: -webkit-image-set(
-      url(../images/100/icon_print.png) 1x,
-      url(../images/200/icon_print.png) 2x);
+      url(../images/100/mosaic_view.png) 1x,
+      url(../images/200/mosaic_view.png) 2x);
 }
 
-.gallery > .toolbar button.print:active,
-.gallery > .toolbar button.print[pressed] {
+.gallery > .toolbar paper-button.slideshow {
   background-image: -webkit-image-set(
-      url(../images/100/icon_print_selected.png) 1x,
-      url(../images/200/icon_print_selected.png) 2x);
+      url(../images/100/slideshow.png) 1x,
+      url(../images/200/slideshow.png) 2x);
 }
 
-.gallery > .toolbar button.share {
+.gallery > .toolbar paper-button.share {
   background-image: -webkit-image-set(
-      url(../images/100/icon_share.png) 1x,
-      url(../images/200/icon_share.png) 2x);
+      url(../images/100/share.png) 1x,
+      url(../images/200/share.png) 2x);
 }
 
-.gallery > .toolbar button.share:active,
-.gallery > .toolbar button.share[pressed] {
-  background-image: -webkit-image-set(
-      url(../images/100/icon_share_selected.png) 1x,
-      url(../images/200/icon_share_selected.png) 2x);
+.gallery[editing] > .toolbar paper-button.edit {
+  opacity: 0.5;
+  pointer-events: none;
 }
 
-.gallery > .toolbar button.share[disabled] {
+.gallery[mode='slide'] > .toolbar paper-button.slide-mode,
+.gallery[mode='mosaic'] > .toolbar paper-button.mosaic-mode,
+.gallery > .toolbar paper-button[disabled] {
   display: none;
 }
 

ui/file_manager/gallery/gallery.html

@@ -12,6 +12,8 @@
   <link rel="stylesheet" href="../file_manager/foreground/css/share_dialog.css">
   <link rel="stylesheet" href="css/gallery.css">
 
+  <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+
   <!-- Don't load gallery_scripts.js when flattening is disabled -->
   <if expr="False"><!-- </if>
     <script src="js/gallery_scripts.js"></script>
@@ -45,7 +47,7 @@
     <script src="chrome://resources/js/cr/ui/list.js"></script>
     <script src="chrome://resources/js/cr/ui/grid.js"></script>
 
-    <!-- Base classes. ->
+    <!-- Base classes. -->
     <script src="../file_manager/foreground/js/metadata/metadata_cache_set.js"></script>
     <script src="../file_manager/foreground/js/metadata/new_metadata_provider.js"></script>
 
@@ -94,16 +96,16 @@
 <body>
   <div class="gallery">
     <div id="content" class="content"></div>
-    <div id="header" class="header tool dimmable"></div>
     <div id="top-toolbar" class="toolbar top tool dimmable">
       <div class="filename-spacer"></div>
       <div class="button-spacer">
-        <button class="button mode"></button>
-        <button class="button slideshow"></button>
-        <button class="button edit"></button>
-        <button class="button print"></button>
-        <button class="delete"></button>
-        <button class="share"></button>
+        <paper-button class="button edit" i18n-values="title:GALLERY_EDIT" disabled></paper-button>
+        <paper-button class="button print" i18n-values="title:GALLERY_PRINT" disabled></paper-button>
+        <paper-button class="button delete" i18n-values="title:GALLERY_DELETE"></paper-button>
+        <paper-button class="button slide-mode" i18n-values="title:GALLERY_SLIDE"></paper-button>
+        <paper-button class="button mosaic-mode" i18n-values="title:GALLERY_MOSAIC"></paper-button>
+        <paper-button class="button slideshow" i18n-values="title:GALLERY_SLIDESHOW"></paper-button>
+        <paper-button class="button share" i18n-values="title:GALLERY_SHARE"></paper-button>
       </div>
     </div>
     <div id="bottom-toolbar" class="toolbar bottom tool dimmable">

ui/file_manager/gallery/js/gallery.js

@@ -85,7 +85,6 @@ 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');
 
@@ -110,9 +109,15 @@ function Gallery(volumeManager) {
 
   this.errorBanner_ = new ErrorBanner(this.container_);
 
-  this.modeButton_ = queryRequiredElement(this.topToolbar_, 'button.mode');
-  this.modeButton_.addEventListener('click',
-      this.toggleMode_.bind(this, undefined));
+  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.mosaicMode_ = new MosaicMode(content,
                                     this.errorBanner_,
@@ -140,10 +145,10 @@ function Gallery(volumeManager) {
     cr.dispatchSimpleEvent(this, 'image-displayed');
   }.bind(this));
 
-  this.deleteButton_ = this.initToolbarButton_('delete', 'GALLERY_DELETE');
+  this.deleteButton_ = queryRequiredElement(this.topToolbar_, '.button.delete');
   this.deleteButton_.addEventListener('click', this.delete_.bind(this));
 
-  this.shareButton_ = this.initToolbarButton_('share', 'GALLERY_SHARE');
+  this.shareButton_ = queryRequiredElement(this.topToolbar_, '.button.share');
   this.shareButton_.addEventListener(
       'click', this.onShareButtonClick_.bind(this));
 
@@ -231,20 +236,6 @@ Gallery.prototype.onPageHide_ = function() {
   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.
  *
@@ -407,6 +398,9 @@ 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_)
@@ -415,62 +409,97 @@ Gallery.prototype.setCurrentMode_ = function(mode) {
   this.currentMode_ = mode;
   this.container_.setAttribute('mode', this.currentMode_.getName());
   this.updateSelectionAndState_();
-  this.updateButtons_();
 };
 
 /**
- * Mode toggle event handler.
- * @param {function()=} opt_callback Callback.
+ * 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.toggleMode_ = function(opt_callback, opt_event) {
-  if (!this.modeButton_)
-    return;
+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 (this.changingMode_) // Do not re-enter while changing the mode.
-    return;
+    if (opt_event)
+      this.onUserAction_();
 
-  if (opt_event)
-    this.onUserAction_();
+    this.changingMode_ = true;
 
-  this.changingMode_ = true;
+    var onModeChanged = function() {
+      this.changingMode_ = false;
+      fulfill();
+    }.bind(this);
 
-  var onModeChanged = function() {
-    this.changingMode_ = false;
-    if (opt_callback) opt_callback();
-  }.bind(this);
+    var tileIndex = Math.max(0, this.selectionModel_.selectedIndex);
 
-  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));
+};
 
-  var mosaic = this.mosaicMode_.getMosaic();
-  var tileRect = mosaic.getTileRect(tileIndex);
+/**
+ * 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.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;
-  }
+  this.changeCurrentMode_(targetMode, opt_event).then(function() {
+    if (opt_callback)
+      opt_callback();
+  });
 };
 
 /**
@@ -818,19 +847,6 @@ 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.
  */

ui/file_manager/gallery/js/slide_mode.js

@@ -341,8 +341,7 @@ function SlideMode(container, content, topToolbar, bottomToolbar, prompt,
    * @const
    */
   var slideShowButton = queryRequiredElement(this.topToolbar_,
-      'button.slideshow');
-  slideShowButton.title = this.displayStringFunction_('GALLERY_SLIDESHOW');
+      '.button.slideshow');
   slideShowButton.addEventListener('click',
       this.startSlideshow.bind(this, SlideMode.SLIDESHOW_INTERVAL_FIRST));
 
@@ -363,9 +362,7 @@ function SlideMode(container, content, topToolbar, bottomToolbar, prompt,
    * @private
    * @const
    */
-  this.editButton_ = queryRequiredElement(this.topToolbar_, 'button.edit');
-  this.editButton_.title = this.displayStringFunction_('GALLERY_EDIT');
-  this.editButton_.disabled = true;  // Disabled by default.
+  this.editButton_ = queryRequiredElement(this.topToolbar_, '.button.edit');
   this.editButton_.addEventListener('click', this.toggleEditor.bind(this));
 
   /**
@@ -373,9 +370,7 @@ function SlideMode(container, content, topToolbar, bottomToolbar, prompt,
    * @private
    * @const
    */
-  this.printButton_ = queryRequiredElement(this.topToolbar_, 'button.print');
-  this.printButton_.title = this.displayStringFunction_('GALLERY_PRINT');
-  this.printButton_.disabled = true;  // Disabled by default.
+  this.printButton_ = queryRequiredElement(this.topToolbar_, '.button.print');
   this.printButton_.addEventListener('click', this.print_.bind(this));
 
   /**

ui/file_manager/integration_tests/gallery/photo_editor.js

@@ -30,7 +30,7 @@ function setupPhotoEditor(testVolumeName, volumeType) {
 
     // Lauch the photo editor.
     var photoEditorPromise = slideImagePromise.then(function() {
-      return gallery.waitAndClickElement(appId, 'button.edit');
+      return gallery.waitAndClickElement(appId, '.button.edit');
     });
 
     return photoEditorPromise.then(function() {

ui/file_manager/integration_tests/gallery/slide_mode.js

@@ -78,7 +78,7 @@ function deleteImage(testVolumeName, volumeType) {
     appId = args.appId;
     return gallery.waitForSlideImage(appId, 800, 600, 'My Desktop Background');
   }).then(function() {
-    return gallery.waitAndClickElement(appId, 'button.delete');
+    return gallery.waitAndClickElement(appId, '.button.delete');
   }).then(function() {
     return gallery.waitAndClickElement(appId, '.cr-dialog-ok');
   }).then(function() {