Move overwrite original checkbox and saved label to bottom toolbar.

ui/file_manager/gallery/css/gallery.css

 /* Copyright (c) 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. */
 
 body {
   -webkit-user-select: none;
   font-size: 84%;
   margin: 0;
 }
 
@@ skipping 138 matching lines @@
   }
 }
 
 /* Toolbar */
 
 .gallery > .header,
 .gallery > .toolbar {
   -webkit-box-align: stretch;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: start;
-  background-color: rgba(30, 30, 30, 0.8);
   display: flex;
   left: 0;
   opacity: 0;
   padding: 0 10px;
   pointer-events: none;
   position: absolute;
   right: 0;
   transition: opacity 300ms ease;
 }
 
 .gallery > .header {
   -webkit-app-region: drag;
   -webkit-box-align: center;
   -webkit-box-pack: end;
+  background-color: rgba(30, 30, 30, 0.8);
   border-bottom: 1px solid rgba(50, 50, 50, 0.8);
   display: -webkit-box;
   height: 45px;
   top: 0;
 }
 
+.gallery > .toolbar {
+  background-color: rgba(40, 42, 45, 0.9);
+}
+
 .gallery .header button {
   -webkit-app-region: no-drag;
 }
 
 .gallery > .toolbar {
   border-top: 1px solid rgba(50, 50, 50, 0.8);
   height: 55px;
   overflow: hidden;
 }
 
 .gallery > .toolbar.top {
   top: 45px; /* Header height. */
 }
 
 .gallery > .toolbar.bottom {
   bottom: 0;
 }
 
+.gallery > .toolbar.bottom > .slide-mode-toolbar {
+  left: 0;
+  opacity: 1;
+  position: absolute;
+  visibility: visible;
+  width: 100%;
+}
+
+.gallery > .toolbar.bottom > .edit-mode-toolbar {
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  visibility: hidden;
+  width: 100%;
+}
+
+.gallery[editing] > .toolbar.bottom > .slide-mode-toolbar {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.gallery[editing] > .toolbar.bottom > .edit-mode-toolbar {
+  opacity: 1;
+  visibility: visible;
+}
+
 .gallery[tools]:not([slideshow]) > .header,
 .gallery[tools]:not([slideshow]) > .toolbar {
   opacity: 1;
   pointer-events: auto;
 }
 
 /* Hide immediately when entering the slideshow. */
 .gallery[tools][slideshow] > .toolbar {
   transition-duration: 0ms;
 }
@@ skipping 117 matching lines @@
   outline: none;
   overflow: hidden;
   padding: 0 3px;
   position: absolute;
   text-overflow: ellipsis;
   top: 15px;
   white-space: nowrap;
   width: 100%;
 }
 
-.gallery[editing] .filename-spacer .namebox {
-  height: 21px;
-  top: 5px;
-}
-
 .gallery .filename-spacer .namebox[disabled] {
   -webkit-user-select: none;
   cursor: default;
 }
 
 .gallery .filename-spacer .namebox:not([disabled]):not(:focus):hover {
   background-color: rgba(48, 48, 48, 1.0);
 }
 
 .gallery .filename-spacer .namebox:focus {
   background-color: white;
   color: black;
   cursor: text;
 }
 
-.gallery .filename-spacer .options {
-  -webkit-box-align: center;
-  -webkit-box-orient: horizontal;
-  -webkit-box-pack: start;
-  display: -webkit-box;
-  height: 0;
-  opacity: 0;
-  top: 50px;
-  visibility: hidden;
-}
-
-.gallery[editing] .filename-spacer .options {
-  height: auto;
-  opacity: 1;
-  top: 28px;
-  visibility: visible;
-}
-
-.gallery .filename-spacer .saved,
-.gallery .filename-spacer .overwrite-original {
-  cursor: inherit;
-  font-size: 90%;
-  margin-left: 3px;
-  margin-right: 18px;
-  opacity: 0;
-  pointer-events: none;
-  transition: all linear 120ms;
-}
-
-.gallery[editing] .filename-spacer .saved {
-  color: white;
-  opacity: 0.5;
-}
-
-.gallery[editing] .filename-spacer .overwrite-original,
-.gallery[editing] .filename-spacer .overwrite-original > * {
-  cursor: pointer;
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.gallery[editing] .overwrite-original[disabled] {
-  opacity: 0.5;
-}
-
-.gallery[editing] .overwrite-original[disabled],
-.gallery[editing] .overwrite-original[disabled] > * {
-  cursor: default;
-  pointer-events: none;
-}
-
-.gallery .filename-spacer .saved[highlighted] {
-  transform: scaleX(1.1) scaleY(1.1) rotate(0);
-  opacity: 1;
-}
-
 /* Bubble */
 
 .gallery .toolbar .bubble {
   bottom: 65px;
   font-size: 85%;
   left: 50px;
   position: absolute;
   width: 220px;
 }
 
 .gallery:not([editing]) .toolbar .bubble {
   display: none;
 }
 
 /* Middle spacer */
 
 .gallery .middle-spacer {
   align-items: center;
   display: flex;
   flex: 1 0 auto;
   flex-direction: column;
 }
 
 /* Toolbar buttons */
 
 .gallery .button-spacer {
+  align-items: center;
   display: flex;
   flex: none;
   justify-content: flex-end;
   width: 252px; /* 42px button x 6 */
 }
 
 /* Thumbnails */
 
 .gallery .ribbon-spacer {
   height: 55px;
-  margin-bottom: -55px;
 }
 
 .gallery .toolbar .ribbon {
   height: 100%;
+  margin: 0 auto;
   overflow: hidden;
   transition: opacity 180ms linear, visibility 0ms linear;
   white-space: nowrap;
   z-index: 0;
 }
 
 .gallery[editing] .toolbar .ribbon {
   opacity: 0;
   transition-delay: 0ms, 180ms;
   visibility: hidden;
@@ skipping 49 matching lines @@
 }
 
 .gallery .image-wrapper > img {
   position: absolute;
 }
 
 .gallery .image-wrapper > img:not(.cached) {
   -webkit-animation: fadeIn 500ms ease-in;
 }
 
-/* Editor buttons */
+/* Editor toolbar. */
 
-.gallery .edit-bar-spacer {
-  -webkit-box-align: center;
-  -webkit-box-orient: horizontal;
-  -webkit-box-pack: center;
-  display: -webkit-box;
+.gallery .edit-mode-toolbar .options {
+  align-items: center;
+  display: flex;
   height: 100%;
-  left: 280px;
+  left: 0;
   opacity: 0;
-  right: 280px;
+  position: absolute;
+  visibility: hidden;
+}
+
+.gallery .edit-mode-toolbar .edit-bar-spacer {
+  display: block;
+  height: 100%;
+  opacity: 0;
   transition: opacity 180ms linear, visibility 0ms linear 180ms;
   visibility: hidden;
-  margin-bottom: -55px;
 }
 
+.gallery[editing] .edit-mode-toolbar .options {
+  opacity: 1;
+  visibility: visible;
+}
+
+.gallery .edit-mode-toolbar .saved,
+.gallery .edit-mode-toolbar .overwrite-original {
+  cursor: inherit;
+  font-size: 90%;
+  opacity: 0;
+  pointer-events: none;
+  transition: all linear 120ms;
+}
+
+.gallery .edit-mode-toolbar .overwrite-original {
+  margin-left: 16px;
+}
+
+.gallery .edit-mode-toolbar .saved {
+  margin-left: 14px;
+}
+
+.gallery .edit-mode-toolbar .overwrite-original > input {
+  float: left;

[mtomasz, 2015/06/02 10:59:20]

nit: Please confirm that the new UI renders correctly on RTL.

[yawano, 2015/06/02 11:37:34]

Thank you for the catch! It didn't work in RTL. I fixed it with the new patch
set.

+  margin: 1px 0;
+}
+
+.gallery .edit-mode-toolbar .overwrite-original > .label {
+  color: white;
+  float: left;
+  margin-left: 8px;
+}
+
+.gallery[editing] .edit-mode-toolbar .saved {
+  color: white;
+  opacity: 0.5;
+}
+
+.gallery[editing] .edit-mode-toolbar .overwrite-original,
+.gallery[editing] .edit-mode-toolbar .overwrite-original > * {
+  cursor: pointer;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.gallery[editing] .overwrite-original[disabled] {
+  opacity: 0.5;
+}
+
+.gallery[editing] .overwrite-original[disabled],
+.gallery[editing] .overwrite-original[disabled] > * {
+  cursor: default;
+  pointer-events: none;
+}
+
+.gallery .edit-mode-toolbar .saved[highlighted] {
+  transform: scaleX(1.1) scaleY(1.1) rotate(0);
+  opacity: 1;
+}
+
+/* Editor buttons. */
+
 .gallery .toolbar .edit-main {
-  -webkit-box-orient: horizontal;
-  -webkit-box-pack: center;
+  align-items: center;
   color: white;
-  display: -webkit-box;
+  display: flex;
   height: 55px;
+  justify-content: center;
   overflow: visible;
 }
 
 .gallery[editing] .edit-bar-spacer {
   opacity: 1.0;
   pointer-events: auto;
   transition-delay: 100ms, 100ms;
   visibility: visible;
 }
 
@@ skipping 12 matching lines @@
   flex: none;
   opacity: 0.99;  /* Workaround for http://crosbug.com/21065 */
   padding: 1px;  /* Instead of a border. */
   position: relative;
   z-index: 10;
 }
 
 .gallery .header button,
 .gallery .toolbar button {
   height: 40px;
-  margin: 6px 0;
   min-width: 40px;  /* Reset. */
   width: 40px;
 }
 
+.gallery .header button {
+  margin: 6px 0;
+}
+
 .gallery .toolbar button:focus {
   z-index: 11;
 }
 
 /* By default, labels are hidden. */
 .gallery > .toolbar button span {
   display: none;
 }
 
 /* Show labels if there is enough space. */
@@ skipping 777 matching lines @@
   background-color: rgba(255, 0, 0, 0.3);
 }
 
 .debug-me .load-target-external-metadata::before {
   background-color: rgba(0, 255, 0, 0.3);
 }
 
 .debug-me .load-target-file-entry::before {
   background-color: rgba(0, 0, 255, 0.3);
 }