Gallery.app: make edit button toggleable.

ui/file_manager/gallery/js/slide_mode.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.
 
 /**
  * Slide mode displays a single image and has a set of controls to navigate
  * between the images and to edit an image.
  *
  * @param {!HTMLElement} container Main container element.
  * @param {!HTMLElement} content Content container element.
@@ skipping 320 matching lines @@
       this.selectionModel_, thumbnailModel);
   this.ribbonSpacer_.appendChild(this.ribbon_);
 
   util.createChild(this.container_, 'spinner');
 
   /**
    * @type {!HTMLElement}
    * @const
    */
   var slideShowButton = queryRequiredElement(this.topToolbar_,
-      '.button.slideshow');
+      'paper-button.slideshow');
   slideShowButton.addEventListener('click',
       this.startSlideshow.bind(this, SlideMode.SLIDESHOW_INTERVAL_FIRST));
 
   /**
    * @type {!HTMLElement}
    * @const
    */
   var slideShowToolbar = util.createChild(
       this.container_, 'tool slideshow-toolbar');
   util.createChild(slideShowToolbar, 'slideshow-play').
       addEventListener('click', this.toggleSlideshowPause_.bind(this));
   util.createChild(slideShowToolbar, 'slideshow-end').
       addEventListener('click', this.stopSlideshow_.bind(this));
 
   // Editor.
   /**
    * @type {!HTMLElement}
    * @private
    * @const
    */
-  this.editButton_ = queryRequiredElement(this.topToolbar_, '.button.edit');
+  this.editButton_ = queryRequiredElement(this.topToolbar_, 'button.edit');
   this.editButton_.addEventListener('click', this.toggleEditor.bind(this));
 
   /**
+   * @private {!FilesToggleRipple}
+   * @const
+   */
+  this.editButtonToggleRipple_ = /** @type {!FilesToggleRipple} */
+      (assert(this.editButton_.querySelector('files-toggle-ripple')));
+
+  /**
    * @type {!HTMLElement}
    * @private
    * @const
    */
-  this.printButton_ = queryRequiredElement(this.topToolbar_, '.button.print');
+  this.printButton_ = queryRequiredElement(
+      this.topToolbar_, 'paper-button.print');
   this.printButton_.addEventListener('click', this.print_.bind(this));
 
   /**
    * @type {!HTMLElement}
    * @private
    * @const
    */
   this.editBarSpacer_ = queryRequiredElement(this.bottomToolbar_,
       '.edit-bar-spacer');
 
@@ skipping 1136 matching lines @@
     cr.dispatchSimpleEvent(this, 'useraction');
 
   if (!this.active_) {
     this.toggleMode_(this.toggleEditor.bind(this));
     return;
   }
 
   this.stopSlideshow_();
 
   ImageUtil.setAttribute(this.container_, 'editing', !this.isEditing());
+  this.editButtonToggleRipple_.activated = this.isEditing();
 
   if (this.isEditing()) { // isEditing has just been flipped to a new value.
     // Reset zoom.
     this.viewport_.resetView();
     this.imageView_.applyViewportChange();
     if (this.context_.readonlyDirName) {
       this.editor_.getPrompt().showAt(
           'top', 'GALLERY_READONLY_WARNING', 0, this.context_.readonlyDirName);
     }
     this.touchHandlers_.enabled = false;
@@ skipping 306 matching lines @@
   var event = assertInstanceof(event, MouseEvent);
   var viewport = this.slideMode_.getViewport();
   if (!this.enabled_ || !viewport.isZoomed())
     return;
   this.stopOperation();
   viewport.setOffset(
       viewport.getOffsetX() + event.wheelDeltaX,
       viewport.getOffsetY() + event.wheelDeltaY);
   this.slideMode_.applyViewportChange();
 };