Refactor the Photo Editor to enable new feature work

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

Index: chrome/browser/resources/file_manager/css/gallery.css
diff --git a/chrome/browser/resources/file_manager/css/gallery.css b/chrome/browser/resources/file_manager/css/gallery.css
index 505c94781acee051a4709b1185a6ed5fb73e9cd4..4ca908cf747de39e86305a33b16c9fcfdaeb82bf 100644
--- a/chrome/browser/resources/file_manager/css/gallery.css
+++ b/chrome/browser/resources/file_manager/css/gallery.css
@@ -9,7 +9,8 @@ body {
   margin: 0;
 }
 
-.gallery {
+.gallery,
+.gallery .content {
   background: black;
   bottom: 0;
   left: 0;
@@ -53,7 +54,7 @@ body {
 
 /* 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%;
@@ -98,7 +99,7 @@ body {
   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;
@@ -107,23 +108,23 @@ body {
   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;
@@ -131,19 +132,19 @@ body {
   }
 
   /* 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;
   }
 }
@@ -368,8 +369,8 @@ body {
   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;
 }
@@ -631,12 +632,27 @@ body {
   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] {
@@ -649,8 +665,6 @@ body {
   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] {
@@ -931,16 +945,16 @@ body {
   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);
 }