Implement Files.app V2 new scrollbars and bottom bar.

chrome/browser/resources/file_manager/css/file_manager.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. */
 
 html {
   height: 100%;
 }
 
 html.col-resize * {
   cursor: col-resize !important;
@@ skipping 20 matching lines @@
   /*display: -webkit-box;*/
   opacity: 1;
 }
 
 /* Drop opacity of selected rows to give a visual feedback on copy/cut
  * operation. */
 .blink {
   opacity: 0.8;
 }
 
+body[new-ui] ::-webkit-scrollbar {
+  height: 8px;
+  width: 8px;
+}
+
+body[new-ui] ::-webkit-scrollbar-track {
+  padding: 5px;
+}
+
+body[new-ui] ::-webkit-scrollbar-thumb {
+  background-color: rgb(180, 180, 180);
+}
+
 #butter-bar-container {
   -webkit-box-pack: center;
   display: -webkit-box;
   left: 0;
   pointer-events: none;
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 3;
 }
@@ skipping 1039 matching lines @@
   height: 61px;
   opacity: 1;
   padding: 0 16px 0 7px;
   position: relative;
   z-index: 3;
 }
 
 body[new-ui] .preview-panel {
   background-color: white;
   border-top: 1px solid #d4d4d4;
+  height: 51px;
+  padding: 0 12px 0 7px;
 }
 
 .preview-panel[visibility=hiding] {
   /* Using all seems to cause preview panel and checkbox flicking issue. */
   -webkit-transform: translate(0, 5px);
   -webkit-transition: opacity 220ms ease;
    opacity: 0;
 }
 
 .preview-panel[visibility=hidden] {
   display: none;
   opacity: 0;
 }
 
 .preview-thumbnails {
   -webkit-box-orient: horizontal;
   display: -webkit-box;
   padding-left: 39px;
 }
 
+body[new-ui] .preview-thumbnails {
+  padding-left: 25px;
+}
+
+
 .preview-thumbnails > .thumbnail {
   -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
   background-color: #f2f2f2;
   border: 1px solid #fff;
   height: 45px;
   margin: 0 0 0 -39px;  /* Show 7 pixels of the overlapped image */
   position: relative;
   width: 45px;
 }
 
 body[new-ui] .preview-thumbnails > .thumbnail {
+  -webkit-box-shadow: 0 1px 1px rgba(80, 80, 80, 0.5);
+  border: 1px solid #fff;
+  height: 35px;
+  margin: 0 0 0 -25px;  /* Overlapped images. */
+  width: 35px;
+}
+
+body[new-ui] .preview-thumbnails > .thumbnail {
   background-color: white;
 }
 
 .preview-thumbnails > .thumbnail > .img-container {
   background-size: 45px 45px;
   height: 45px;
   overflow: hidden;
   position: relative;
   width: 45px;
 }
 
+body[new-ui] .preview-thumbnails > .thumbnail > .img-container {
+  -webkit-box-sizing: border-box;
+  background-size: 35px 35px;
+  border: 1px solid white;
+  height: 35px;
+  width: 35px;
+}
+
 .preview-thumbnails > .popup {
   -webkit-transform: translate(0, 3px) scale(0.95);
   background-color: #f2f2f2;
   border: 2px solid #fff;
   box-shadow: 0 0 0 1px #F0F0F0,
               0 0 0 2px #D0D0D0,
               2px 2px 6px rgba(0, 0, 0, 0.2);
   margin: 6px 0 0 -40px;
   opacity: 0;
   pointer-events: none;
@@ skipping 742 matching lines @@
 }
 
 list.autocomplete-suggestions[hasElementFocus] > [selected],
 list.autocomplete-suggestions[hasElementFocus] > [lead],
 list.autocomplete-suggestions:not([hasElementFocus]) > [selected],
 list.autocomplete-suggestions:not([hasElementFocus]) > [lead] {
   background-color: rgb(238, 238, 238);
   background-image: none;
   border: 1px solid white;
 }