[filebrowser] Add left panel with roots.

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

 /*
  * Copyright (c) 2011 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.
  */
 
 /* Outer frame of the dialog. */
 body {
    -webkit-box-flex: 1;
    -webkit-box-orient: vertical;
@@ skipping 68 matching lines @@
 .butter-bar a {
   -webkit-margin-start: 1em;
 }
 
 .butter-error {
   color: rgb(100, 0, 0);
   background-color: rgba(255, 100, 100, 0.5);
   border: 1px red solid;
 }
 
+/* Commands should not be visible on the screen. */
+command {
+  visibility: hidden;
+}
+
 /* The top title of the dialog. */
 .dialog-title {
   -webkit-box-sizing: border-box;
   -webkit-padding-start: 15px;
   background-image: -webkit-linear-gradient(top, #fff,#f6f6f6);
   border-bottom: 1px #d6d9e3 solid;
   color: #42506c;
   font-size: 15px;
   font-weight: bold;
   height: 32px;
   padding-top: 8px;
   padding-bottom: 8px;
 }
 
+.dialog-container {
+  display: -webkit-box;
+  -webkit-box-orient: horizontal;
+  -webkit-box-align: stretch;
+  overflow: hidden;
+  -webkit-box-flex: 1;
+}
+
+.dialog-main {
+  -webkit-box-flex: 1;
+  display:-webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-box-align: stretch;
+}
+
+.dialog-sidebar {
+  position: relative;
+  -webkit-box-flex: 0;
+  width: 200px;
+  margin-left: -200px;
+  background-color: rgba(240,240,240,1);
+  margin-bottom: 15px;
+  margin-top: 15px;
+  -webkit-border-top-right-radius: 4px;
+  -webkit-border-top-left-radius: 4px;
+  -webkit-border-bottom-left-radius: 4px;
+  -webkit-transition: margin-left 180ms ease;
+  overflow: hidden;
+}
+
+.dialog-container[sidebar] .dialog-sidebar {
+  margin-left: 15px;
+}
+
+list.roots-list {
+  width: 100%;
+}
+
+list.roots-list > * {
+  border: none;
+  border-radius: 0;
+  line-height: 35px;
+  margin: 0;
+  padding: 0 5px;
+  background-color: rgba(240,240,240,1);
+}
+
+list.roots-list > [lead],
+list.roots-list > [selected],
+list.roots-list > [anchor] {
+  background-color: hsl(214,91%,89%);
+}
+
+list.roots-list > [lead]:hover,
+list.roots-list > [selected]:hover,
+list.roots-list > [anchor]:hover {
+  background-color: hsl(214,91%,87%);
+}
+
+list.roots-list li.root-item {
+  display: -webkit-box;
+  -webkit-box-align: center;
+  -webkit-box-pack: start;
+}
+
+li.root-item > * {
+  display: block;
+  margin-right: 5px;
+}
+
+li.root-item > .spacer {
+  -webkit-box-flex: 1;
+}
+
+img.root-eject {
+  opacity: 0.5;
+  cursor: pointer;
+  width: 15px;
+  height: 12px;
+}
+
+img.root-eject:hover {
+  opacity: 1.0;
+}
+
 /* Breadcrumbs and things under the title but above the list view. */
 .dialog-header {
   -webkit-box-orient: horizontal;
   -webkit-box-align: center;
   display: -webkit-box;
-  margin: 15px;
+  margin-top: 15px;
+  margin-right: 15px;
   margin-bottom: 4px;
+  margin-left: 15px;
+  -webkit-transition: all 180ms ease;
+ }
+
+/* Container for the detail and thumbnail (not implemented yet) list views. */
+.dialog-container[sidebar] .dialog-header {
+  margin-left: 0;
 }
 
-/* Container for the detail and thumbnail (not implemented yet) list views. */
+div.close-sidebar {
+  cursor: pointer;
+  position: absolute;
+  right: 0;
+  top: 2px;
+  display: none;
+  z-index: 10;
+  background-color: white;
+  border: 1px solid rgba(200,200,200,1);
+  width: 13px;
+  height: 24px;
+}
+
+div.close-sidebar:hover {
+  background-color: rgba(240,240,240,1);
+}
+
+div.open-sidebar {
+  cursor: pointer;
+  margin-right: 10px;
+  background-color: white;
+  width: 13px;
+  height: 24px;
+}
+
+div.open-sidebar:hover {
+  background-color: rgba(240,240,240,1);
+}
+
+.dialog-container[sidebar] div.open-sidebar {
+  display: none;;
+}
+
+.dialog-container[sidebar] div.close-sidebar {
+  display: block;
+}
+
+/* Container for the detail and thumbnail list views. */
 .dialog-body {
   -webkit-box-orient: vertical;
   -webkit-box-flex: 1;
   border: 1px #aaa solid;
   border-radius: 4px;
   display: -webkit-box;
-  margin: 15px;
-  margin-top: 0;
+  margin-right: 15px;
+  margin-bottom: 15px;
+  margin-left: 15px;
   overflow: hidden;
+  -webkit-transition: all 180ms ease;
+}
+
+.dialog-container[sidebar] .dialog-body {
+  -webkit-border-top-left-radius: 0;
+  -webkit-border-bottom-left-radius: 0;
+  margin-left: 0;
 }
 
 /* Container for the ok/cancel buttons. */
 .dialog-footer {
   -webkit-box-orient: horizontal;
   display: -webkit-box;
   margin: 15px;
   margin-top: 0;
 }
 
 /* The container for breadcrumb elements. */
 .breadcrumbs {
   -webkit-box-orient: horizontal;
   -webkit-box-flex: 1;
   display: -webkit-box;
+  -webkit-box-align: center;
   font-size: 15px;
   line-height: 15px;
   height: 18px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.dialog-container[sidebar] .breadcrumbs {
+  margin-left: 10px;
+}
+
+/* Icon at the start of breadcrumb path. Corresponds to the root. */
+.breadcrumb-icon {
+  margin-right: 5px;
+  display: block;
+}
+
+.dialog-container[sidebar] .breadcrumb-icon {
+  display: none;
+}
+
 /* A single directory name in the list of path breadcrumbs. */
 .breadcrumb-path {
   color: #265692;
   cursor: pointer;
   font-size: 14px;
 }
 
 /* The final breadcrumb, representing the current directory. */
 .breadcrumb-last {
   color: #666;
@@ skipping 48 matching lines @@
   padding: 15px;
 }
 
 .downloads-warning div {
   display: -webkit-box;
   -webkit-box-flex: 1;
 }
 
 /* The cr.ui.Grid representing the detailed file list. */
 .thumbnail-grid {
-  position: absolute;
-  top: 0;
-  left: 0;
-  border: 0;
+  width: 100%;
   overflow-y: scroll;
 }
 
 /* An item in the thumbnail view. */
 .thumbnail-item {
   margin-top: 10px;
   margin-left: 10px;
   width: 120px;
   height: 145px;
   text-align: center;
@@ skipping 34 matching lines @@
 }
 
 /* Text box used for renaming in the thumbnail list. */
 .thumbnail-grid input.rename {
   -webkit-margin-start: -2px;
   position: absolute;
 }
 
 /* The cr.ui.Table representing the detailed file list. */
 .detail-table {
-  position: absolute;
-  top: 0;
-  left: 0;
+  width: 100%;
   border: 0;
 }
 
 /* Bottom pane describing current selection. */
 .preview-panel {
   -webkit-box-orient: horizontal;
   display: -webkit-box;
   height: 61px;
   background-color: #F0F0F0;
   padding: 0px 14px 0px 14px;
@@ skipping 300 matching lines @@
 /* Overlay pane covering the entire file manager window (e.g. image editor)*/
 .overlay-pane {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: none;
   z-index: 100;
 }