Refactor the Photo Editor to enable new feature work

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;
 }
 
-.gallery {
+.gallery,
+.gallery .content {
   background: black;
   bottom: 0;
   left: 0;
   overflow: hidden;
   position: absolute;
   right: 0;
   top: 0;
 }
 
 /* Close button */
@@ skipping 23 matching lines @@
   opacity: 0.5;
 }
 
 .gallery[tools] > .close div:hover {
   background-color: rgba(81, 81, 81, 1);
   opacity: 0.7;
 }
 
 /* Image container and canvas elements */
 
-.gallery > .image-container {
+.gallery .image-container {
   background-color: rgba(0, 0, 0, 1);
   cursor: none;   /* Only visible when the toolbar is active */
   height: 100%;
   position: absolute;
   width: 100%;
 }
 
 .gallery[tools][locked] *,
 .gallery[tools][locked] .image-container[cursor] {
   cursor: wait;
@@ skipping 24 matching lines @@
 .gallery[tools] .image-container[cursor='nw-resize'],
 .gallery[tools] .image-container[cursor='se-resize'] {
   cursor: url('../images/gallery/cursor_nwse.png') 18 18;
 }
 
 .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 {
+.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;
   pointer-events: none;
   position: absolute;
 }
 
-.gallery > .image-container > .image[fade] {
+.gallery .image-container > .image[fade] {
   opacity: 0;
 }
 
 /* Full resolution image is invisible unless printing. */
-.gallery > .image-container > canvas.fullres {
+.gallery .image-container > canvas.fullres {
   display: none;
 }
 
 @media print {
   /* Do not print anything but the image. */
-  .gallery > :not(.image-container) {
+  .gallery > .content > :not(.image-container) {
     display: none !important;
   }
 
   /* Center the printed image. */
-  .gallery > .image-container {
+  .gallery .image-container {
     -webkit-box-align: center;
     -webkit-box-orient: horizontal;
     -webkit-box-pack: center;
     display: -webkit-box;
   }
 
   /* Do not print the screen resolution image. */
-  .gallery > .image-container > canvas.image {
+  .gallery .image-container > canvas.image {
     display: none !important;
   }
 
   /* Print the full resolution image instead. */
-  .gallery > .image-container > canvas.fullres {
+  .gallery .image-container > canvas.fullres {
     display: block !important;
     max-height: 100%;
     max-width: 100%;
   }
 
   /* Print video at the center of the page */
-  .gallery > .image-container > video.image {
+  .gallery .image-container > video.image {
     position: auto !important;
   }
 }
 
 /* Toolbar */
 
 .gallery > .toolbar {
   -webkit-box-align: stretch;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: start;
@@ skipping 204 matching lines @@
   opacity: 1;
 }
 
 .gallery[editing] .filename-spacer .overwrite-original,
 .gallery[editing] .filename-spacer .overwrite-original > * {
   cursor: pointer;
   opacity: 1;
   pointer-events: auto;
 }
 
-.gallery[editing] .filename-spacer[saved] .overwrite-original,
-.gallery[editing] .filename-spacer[saved] .overwrite-original > * {
+.gallery[editing] .options[saved] .overwrite-original,
+.gallery[editing] .options[saved] .overwrite-original > * {
   cursor: default;
   pointer-events: none;
 }
 
 .gallery .filename-spacer .overwrite-original input {
   margin-bottom: -2px;
   margin-right: 6px;
 }
 
 .gallery .filename-spacer .saved[highlighted] {
@@ skipping 241 matching lines @@
 
 .gallery > .toolbar .button[disabled] {
   opacity: 0.5;
   pointer-events: none;
 }
 
 .gallery > .toolbar .button[hidden] {
   display: none;
 }
 
+.gallery > .toolbar > .button {
+  position: relative;
+  z-index: 10;
+}
+
+.gallery > .toolbar > .button.grid {
+  background-image: -webkit-image-set(
+    url('../images/gallery/icon_edit.png') 1x,
+    url('../images/gallery/2x/icon_edit.png') 2x);
+}
+
+.gallery > .toolbar > .button.grid[pressed] {
+  background-image: -webkit-image-set(
+    url('../images/gallery/icon_edit_selected.png') 1x,
+    url('../images/gallery/2x/icon_edit_selected.png') 2x);
+}
+
 .gallery > .toolbar > .button.edit {
   background-image: -webkit-image-set(
     url('../images/gallery/icon_edit.png') 1x,
     url('../images/gallery/2x/icon_edit.png') 2x);
-  position: relative;
-  z-index: 10;
 }
 
 .gallery > .toolbar > .button.edit[pressed] {
   background-image: -webkit-image-set(
     url('../images/gallery/icon_edit_selected.png') 1x,
     url('../images/gallery/2x/icon_edit_selected.png') 2x);
 }
 
 .gallery > .toolbar > .button.share {
   background-image: -webkit-image-set(
     url('../images/gallery/icon_share.png') 1x,
     url('../images/gallery/2x/icon_share.png') 2x);
-  position: relative;
-  z-index: 10;
 }
 
 .gallery > .toolbar > .button.share[pressed] {
   background-image: -webkit-image-set(
     url('../images/gallery/icon_share_selected.png') 1x,
     url('../images/gallery/2x/icon_share_selected.png') 2x);
 }
 
 .gallery[error] > .toolbar .button.edit,
 .gallery[error] > .toolbar .button.share {
@@ skipping 260 matching lines @@
   right: 20px;
   width: 20px;
 }
 
 .gallery .share-menu[hidden] {
   bottom: -100%;  /* offscreen so that 'dimmed' attribute does not show it*/
   opacity: 0;
   pointer-events: none;
 }
 
-.gallery .share-menu > div {
-  -webkit-box-align: center;
-  -webkit-box-pack: start;
+.gallery .share-menu > .item {
   background-color: rgba(0, 0, 0, 0);
+  background-position: 5px center;
+  background-repeat: no-repeat;
   cursor: pointer;
-  display: -webkit-box;
   padding: 5px;
+  padding-left: 26px;
 }
 
-.gallery .share-menu > div:hover {
+.gallery .share-menu > .item:hover {
   background-color: rgba(240, 240, 240, 1);
 }
 
 .gallery .share-menu > div > img {
   display: block;
   margin-right: 5px;
 }
 
 /* Load spinner and error banner */
 
@@ skipping 88 matching lines @@
     max-height: 100%;
     max-width: 100%;
     object-fit: contain;
     top: 0 !important;
   }
 
   .gallery .tool {
     opacity: 0 !important;
   }
 }