Add an ability for resize in gallery.

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;
   background-color: black;
   font-size: 84%;
   margin: 0;
 }
@@ skipping 728 matching lines @@
       url(../images/100/auto_fix.png) 1x,
       url(../images/200/auto_fix.png) 2x);
 }
 
 .edit-main button.crop .icon {
   background-image:  -webkit-image-set(
       url(../images/100/crop.png) 1x,
       url(../images/200/crop.png) 2x);
 }
 
+.edit-main button.resize .icon {
+  background-image:  -webkit-image-set(
+      url(../images/100/resize.png) 1x,
+      url(../images/200/resize.png) 2x);
+}
+
 .edit-main button.exposure .icon {
   background-image: -webkit-image-set(
       url(../images/100/brightness.png) 1x,
       url(../images/200/brightness.png) 2x);
 }
 
 .edit-main button.rotate_right .icon {
   background-image: -webkit-image-set(
       url(../images/100/rotate_right.png) 1x,
       url(../images/200/rotate_right.png) 2x);
@@ skipping 22 matching lines @@
   -webkit-box-orient: horizontal;
   -webkit-box-pack: center;
   bottom: 48px;
   display: block;
   height: 48px;
   pointer-events: none;
   position: absolute;
   width: 100%;
 }
 
+.gallery[editor-mode="resize"] .edit-modal {
+  height: 56px;
+}
+
 .edit-modal-wrapper[hidden] {
   display: none;
 }
 
 .edit-modal-wrapper {
   background-color: rgb(20, 22, 25);
   color: white;
   height: 100%;
   opacity: 0.9;
   pointer-events: auto;
@@ skipping 196 matching lines @@
 }
 
 .gallery .crop-frame .corner.top {
   top: -6px;
 }
 
 .gallery .crop-frame .corner.bottom {
   bottom: -6px;
 }
 
+/* Input UI */
+.edit-modal .input {
+  align-items: flex-end;
+  display: flex;
+  width: 90px;
+}
+
+.edit-modal .input > .unit_label {
+  color: rgba(255, 255, 255, 0.54);
+  margin-bottom: 10px;
+}
+
+.edit-modal .lockicon {
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 16px;
+  margin: 16px;
+  margin-top: auto;
+  width: 16px;
+}
+
+.edit-modal .lockicon:focus {
+  outline: none;
+}
+
+.edit-modal .lockicon[locked] {
+  background-image: -webkit-image-set(
+      url(../images/100/ratio_locked.png) 1x,
+      url(../images/200/ratio_locked.png) 2x);
+}
+
+.edit-modal .lockicon:not([locked]) {
+  opacity: 0.54;
+  background-image: -webkit-image-set(
+      url(../images/100/ratio_unlocked.png) 1x,
+      url(../images/200/ratio_unlocked.png) 2x);
+}
+
 /* Prompt/notification panel */
 
 .gallery .prompt-wrapper {
   -webkit-box-orient: horizontal;
   -webkit-box-pack: center;
   display: -webkit-box;
   height: 100%;
   pointer-events: none;
   position: absolute;
   width: 100%;
@@ skipping 353 matching lines @@
 .thumbnail-view .animation-thumbnail {
   background-repeat: no-repeat;
   background-size: cover;
   display: none;
   position: absolute;
 }
 
 .thumbnail-view .animation-thumbnail.animating {
   display: block;
 }