Revert of Gallery: Add toolbar at the top of window.

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.
- * @param {!HTMLElement} topToolbar Top toolbar element.
- * @param {!HTMLElement} bottomToolbar Toolbar element.
+ * @param {!HTMLElement} toolbar Toolbar element.
  * @param {!ImageEditor.Prompt} prompt Prompt.
  * @param {!ErrorBanner} errorBanner Error banner.
  * @param {!cr.ui.ArrayDataModel} dataModel Data model.
  * @param {!cr.ui.ListSelectionModel} selectionModel Selection model.
  * @param {!MetadataModel} metadataModel
  * @param {!ThumbnailModel} thumbnailModel
  * @param {!Object} context Context.
  * @param {!VolumeManagerWrapper} volumeManager Volume manager.
  * @param {function(function())} toggleMode Function to toggle the Gallery mode.
  * @param {function(string):string} displayStringFunction String formatting
  *     function.
  * @constructor
  * @struct
  * @suppress {checkStructDictInheritance}
  * @extends {cr.EventTarget}
  */
-function SlideMode(container, content, topToolbar, bottomToolbar, prompt,
-    errorBanner, dataModel, selectionModel, metadataModel, thumbnailModel,
-    context, volumeManager, toggleMode, displayStringFunction) {
+function SlideMode(container, content, toolbar, prompt, errorBanner, dataModel,
+    selectionModel, metadataModel, thumbnailModel, context, volumeManager,
+    toggleMode, displayStringFunction) {
   /**
    * @type {!HTMLElement}
    * @private
    * @const
    */
   this.container_ = container;
 
   /**
    * @type {!Document}
    * @private
    * @const
    */
   this.document_ = assert(container.ownerDocument);
 
   /**
    * @type {!HTMLElement}
    * @const
    */
   this.content = content;
 
   /**
    * @type {!HTMLElement}
    * @private
    * @const
    */
-  this.topToolbar_ = topToolbar;
-
-  /**
-   * @type {!HTMLElement}
-   * @private
-   * @const
-   */
-  this.bottomToolbar_ = bottomToolbar;
+  this.toolbar_ = toolbar;
 
   /**
    * @type {!ImageEditor.Prompt}
    * @private
    * @const
    */
   this.prompt_ = prompt;
 
   /**
    * @type {!ErrorBanner}
@@ skipping 145 matching lines @@
 
   this.document_.addEventListener('click', this.onDocumentClick_.bind(this));
 
   /**
    * Overwrite options and info bubble.
    * @type {!HTMLElement}
    * @private
    * @const
    */
   this.options_ = util.createChild(queryRequiredElement(
-      this.topToolbar_, '.filename-spacer'), 'options');
+      this.toolbar_, '.filename-spacer'), 'options');
 
   /**
    * @type {!HTMLElement}
    * @private
    * @const
    */
   this.savedLabel_ = util.createChild(this.options_, 'saved');
   this.savedLabel_.textContent = this.displayStringFunction_('GALLERY_SAVED');
 
   /**
@@ skipping 30 matching lines @@
       this.overwriteOriginalBox_, '', 'label');
   overwriteLabel.textContent =
       this.displayStringFunction_('GALLERY_OVERWRITE_ORIGINAL');
   overwriteLabel.setAttribute('for', 'overwrite-checkbox');
 
   /**
    * @type {!HTMLElement}
    * @private
    * @const
    */
-  this.bubble_ = util.createChild(this.bottomToolbar_, 'bubble');
+  this.bubble_ = util.createChild(this.toolbar_, 'bubble');
   this.bubble_.hidden = true;
 
   /**
    * @type {!HTMLElement}
    * @const
    */
   var bubbleContent = util.createChild(this.bubble_);
   bubbleContent.innerHTML = this.displayStringFunction_(
       'GALLERY_OVERWRITE_BUBBLE');
 
@@ skipping 36 matching lines @@
       this.arrowBox_, 'arrow right tool dimmable');
   this.arrowRight_.addEventListener('click',
       this.advanceManually.bind(this, 1));
   util.createChild(this.arrowRight_);
 
   /**
    * @type {!HTMLElement}
    * @private
    * @const
    */
-  this.ribbonSpacer_ = queryRequiredElement(this.bottomToolbar_,
-      '.ribbon-spacer');
+  this.ribbonSpacer_ = queryRequiredElement(this.toolbar_, '.ribbon-spacer');
 
   /**
    * @type {!Ribbon}
    * @private
    * @const
    */
   this.ribbon_ = new Ribbon(
       this.document_, this.dataModel_, this.selectionModel_, thumbnailModel);
   this.ribbonSpacer_.appendChild(this.ribbon_);
 
   util.createChild(this.container_, 'spinner');
 
   /**
    * @type {!HTMLElement}
    * @const
    */
-  var slideShowButton = queryRequiredElement(this.topToolbar_,
-      'button.slideshow');
+  var slideShowButton = queryRequiredElement(this.toolbar_, 'button.slideshow');
   slideShowButton.title = this.displayStringFunction_('GALLERY_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.toolbar_, 'button.edit');
   this.editButton_.title = this.displayStringFunction_('GALLERY_EDIT');
   this.editButton_.disabled = true;  // Disabled by default.
   this.editButton_.addEventListener('click', this.toggleEditor.bind(this));
 
   /**
    * @type {!HTMLElement}
    * @private
    * @const
    */
-  this.printButton_ = queryRequiredElement(this.topToolbar_, 'button.print');
+  this.printButton_ = queryRequiredElement(this.toolbar_, 'button.print');
   this.printButton_.title = this.displayStringFunction_('GALLERY_PRINT');
   this.printButton_.disabled = true;  // Disabled by default.
   this.printButton_.addEventListener('click', this.print_.bind(this));
 
   /**
    * @type {!HTMLElement}
    * @private
    * @const
    */
-  this.editBarSpacer_ = queryRequiredElement(this.bottomToolbar_,
-      '.edit-bar-spacer');
+  this.editBarSpacer_ = queryRequiredElement(this.toolbar_, '.edit-bar-spacer');
 
   /**
    * @type {!HTMLElement}
    * @private
    * @const
    */
   this.editBarMain_ = util.createChild(this.editBarSpacer_, 'edit-main');
 
   /**
    * @type {!HTMLElement}
@@ skipping 1459 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();
 };