Photo Editor: better mode transitions

chrome/browser/resources/file_manager/css/gallery.css

 /* Copyright (c) 2012 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. */
 
 body {
   -webkit-user-select: none;
   font-family: Open Sans, Droid Sans Fallback, sans-serif;
   font-size: 84%;
   margin: 0;
 }
@@ skipping 88 matching lines @@
 
 .gallery[tools] .image-container[cursor='ne-resize'],
 .gallery[tools] .image-container[cursor='sw-resize'] {
   cursor: url('../images/gallery/cursor_swne.png') 18 18;
 }
 
 .gallery .image-container > .image {
   /* Keep in sync with ImageView.ANIMATION_DURATION in image_view.js*/
   -webkit-transition-duration: 180ms;
   -webkit-transition-property: -webkit-transform, opacity;
-  -webkit-transition-timing-function: ease-in-out;
+  -webkit-transition-timing-function: linear;
   pointer-events: none;
   position: absolute;
 }
 
 .gallery .image-container > .image[fade] {
   opacity: 0;
 }
 
 /* Full resolution image is invisible unless printing. */
 .gallery .image-container > canvas.fullres {
   display: none;
 }
 
 @media print {
-  /* Do not print anything but the image. */
-  .gallery > .content > :not(.image-container) {
+  /* Do not print anything but the image content. */
+  .gallery > :not(.content) {
     display: none !important;
   }
 
   /* Center the printed image. */
   .gallery .image-container {
     -webkit-box-align: center;
     -webkit-box-orient: horizontal;
     -webkit-box-pack: center;
     display: -webkit-box;
   }
@@ skipping 944 matching lines @@
 
 .gallery[video] .video-controls {
   -webkit-box-flex: 1;
   display: -webkit-box;
 }
 
 .gallery[video] > .toolbar .edit-bar {
   display: none;
 }
 
+/* Mosaic view. */
 .mosaic {
-  bottom: 56px;  /* Make space for the toolbar. */
+  /* -webkit-transition-duration is set in Javascript. */
+  -webkit-transition-property: -webkit-transform;
+  -webkit-transition-timing-function: linear;
+
+  bottom: 0;
   left: 0;
   overflow-x: scroll;
   overflow-y: hidden;
   position: absolute;
   right: 0;
   top: 0;
 }
 
 .mosaic::-webkit-scrollbar {
   background: transparent;
 }
 
 .mosaic::-webkit-scrollbar-thumb {
   background: rgb(31, 31, 31);
 }
 
 .gallery:not([mode='mosaic']) .mosaic::-webkit-scrollbar-thumb {
   background: transparent;
 }
 
 .mosaic-tile {
   position: absolute;
 }
 
-.gallery:not([mode='mosaic']) .mosaic-tile {
+/* Mosaic tile's opacity is controlled by |visible| attribute which changes
+   separately from .gallery[mode] */
+.mosaic:not([visible]) .mosaic-tile {
   opacity: 0;
 }
 
 /* Animate tile's opacity, except for the selected tile which should show/hide
   instantly (this looks better when zooming to/from the slide mode). */
 .mosaic-tile:not([selected]) {
-  -webkit-transition: opacity 280ms ease-in;
+  -webkit-transition: opacity 350ms linear;
 }
 
 /* Must be in sync with mosaic_mode.js.
   Mosaic.Layout.SPACING should be equal to
     top + bottom + border-top-width + border-bottom-width AND
     left + right + border-left-width + border-right-width */
 .mosaic-tile .img-border {
   border: 1px solid transparent;  /* Space between the outline and the image. */
   bottom: 4px;
   left: 4px;
   outline: 2px solid transparent;
   overflow: hidden;
   position: absolute;
   right: 4px;
   top: 4px;
 }
 
-.mosaic-tile[selected] .img-border {
+/* Selected and hover state are only visible when zoom transition is over. */
+.mosaic[visible='normal'] .mosaic-tile[selected] .img-border {
   outline-color: rgb(51, 153, 255);
 }
 
-.mosaic.hover-visible .mosaic-tile:hover:not([selected]) .img-border {
+.mosaic[visible='normal'].hover-visible
+                          .mosaic-tile:hover:not([selected]) .img-border {
   outline-color: rgb(182, 212, 252);
 }
 
 .mosaic-tile .img-wrapper {
   bottom: 0;
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
 }
@@ skipping 14 matching lines @@
 .gallery:not([mode='slide']) .arrow-box {
   opacity: 0;
   pointer-events: none;
 }
 
 /* Temporary. Remove this along with the delete confirmation dialog
   when Undo delete is implemented. */
 .cr-dialog-shield {
   background-color: black;
 }