Files.app: Add subfolders in the left nav

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

Index: chrome/browser/resources/file_manager/css/file_manager.css
diff --git a/chrome/browser/resources/file_manager/css/file_manager.css b/chrome/browser/resources/file_manager/css/file_manager.css
index 8a0fc401e9ff4550b1ecb6a235fcc36fec42ed6e..28b7f679e2c0d3080f49dcc5c623b9f951a75a00 100644
--- a/chrome/browser/resources/file_manager/css/file_manager.css
+++ b/chrome/browser/resources/file_manager/css/file_manager.css
@@ -1,4 +1,4 @@
-/* Copyright (c) 2012 The Chromium Authors. All rights reserved.
+/* Copyright (c) 2013 The Chromium Authors. All rights reserved.

[mtomasz, 2013/03/14 10:15:39]

I am not sure about it, but one reviewer told me to set 2013 in new files. As
for old, I think we should leave 2012.

[yoshiki, 2013/03/14 13:43:42]

I didn't know but I've just heard same thing. Thanks,

  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
@@ -160,7 +160,7 @@ body.loaded {
   display: -webkit-box;
 }
 
-/* Roots list at the left. */
+/* Directory tree at the left. */
 .dialog-sidebar {
   -webkit-box-flex: 0;
   background-color: #e6e6e6;
@@ -184,80 +184,83 @@ div.sidebar-splitter {
   z-index: 2;
 }
 
-/* Roots list at the left. */
-#roots-list {
-  -webkit-box-flex: 1;
+#directory-tree {
   -webkit-box-orient: vertical;
   border-right: 1px solid rgb(170, 170, 170);
   display: -webkit-box;
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: 100%;
 }
 
-#roots-list > * {
+#directory-tree .tree-row {
   background-color: #e6e6e6;
   background-image: none;
   border: none;
-  height: 39px;
+  display: -webkit-box;
+  line-height: 39px;
   margin: 0;
-  padding: 0 5px;
+  padding: 0 3px;
 }
 
-#roots-list > :hover {
-  background-color: rgba(0, 0, 0, 0.05);
-  border-color: rgba(0, 0, 0, 0.05);
+#directory-tree .tree-row > .expand-icon {
+  margin: 0 2px;

[mtomasz, 2013/03/14 10:15:39]

This icon is very hard to click using the touch screen, at least on my one.

How about increasing the touch area, eg. such trick:
height: 37px;
margin: 0 -5px;
padding: 0 20px;

I know it's tricky, but helps a lot. I used it already in the butter bar. WDYT?

2. Shall we make cursor: pointer like on the unmount icon?

[yoshiki, 2013/03/14 13:43:42]

I enlarged the expand icon to 37x37. It seems to work well on a touch device.
Good idea! But I think it should be done in original tree.css.

+  top: -1px;
+  vertical-align: middle;
 }
 
-#roots-list > .accepts,
-#roots-list > [lead][selected],
-#roots-list > [lead],
-#roots-list > [selected],
-#roots-list > [anchor] {
-  background-color: rgb(204, 204, 204);
+#directory-tree .tree-row > .volume-icon {
+  background-position: center -2px;
+  background-repeat: no-repeat;
+  height: 16px;
+  margin-right: 4px;
+  vertical-align: middle;
+  width: 16px;
 }
 
-#roots-list:focus > .accepts,
-#roots-list:focus > [lead][selected],
-#roots-list:focus > [lead],
-#roots-list:focus > [selected],
-#roots-list:focus > [anchor] {
-  background-color: rgb(193, 209, 232);
+#directory-tree .tree-row > .label {
+  -webkit-box-flex: 1;
+  display: block;
+  margin: 0 3px;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
 }
 
-#roots-list > .accepts:hover,
-#roots-list > [lead]:hover,
-#roots-list > [lead][selected]:hover,
-#roots-list > [selected]:hover,
-#roots-list > [anchor]:hover {
-  background-color: rgb(192, 192, 192);
+#directory-tree .tree-row:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+  border-color: rgba(0, 0, 0, 0.05);
 }
 
-#roots-list:hover > .accepts:hover,
-#roots-list:hover > [lead]:hover,
-#roots-list:hover > [lead][selected]:hover,
-#roots-list:hover > [selected]:hover,
-#roots-list:hover > [anchor]:hover {
-  background-color: rgb(177, 193, 216);
+#directory-tree .accepts,
+#directory-tree .tree-row[lead][selected],
+#directory-tree .tree-row[lead],
+#directory-tree .tree-row[selected],
+#directory-tree .tree-row[anchor] {
+  background-color: rgb(204, 204, 204);
 }
 
-#roots-list li.root-item {
-  -webkit-box-align: center;
-  display: -webkit-box;
-  line-height: 22px;  /* To accomodate for icons. */
-  padding-left: 11px;
+#directory-tree:focus  .accepts,
+#directory-tree:focus  .tree-row[lead][selected],
+#directory-tree:focus  .tree-row[lead],
+#directory-tree:focus  .tree-row[selected],
+#directory-tree:focus  .tree-row[anchor] {
+  background-color: rgb(193, 209, 232);
 }
 
-li.root-item > .root-label {
-  -webkit-box-flex: 1;
-  margin: 0 2px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+#directory-tree  .accepts:hover,
+#directory-tree  .tree-row[lead]:hover,
+#directory-tree  .tree-row[lead][selected]:hover,
+#directory-tree  .tree-row[selected]:hover,
+#directory-tree  .tree-row[anchor]:hover {
+  background-color: rgb(192, 192, 192);
 }
 
-.volume-icon {
-  background-position: center 2px;
-  background-repeat: no-repeat;
-  height: 24px;
-  width: 24px;
+#directory-tree:hover .accepts:hover,
+#directory-tree:hover .tree-row[lead]:hover,
+#directory-tree:hover .tree-row[lead][selected]:hover,
+#directory-tree:hover .tree-row[selected]:hover,
+#directory-tree:hover .tree-row[anchor]:hover {
+  background-color: rgb(177, 193, 216);
 }
 
 div.root-eject {

[mtomasz, 2013/03/14 10:15:39]

Please add #roots-list or .root-item to (1) be consistent (2) avoid conflicts in
the future.

[yoshiki, 2013/03/14 13:43:42]

Done.

@@ -272,6 +275,7 @@ div.root-eject {
   height: 20px;
   margin-right: 6px;
   opacity: 0.7;
+  vertical-align: middle;
   width: 20px;
 }
 

[mtomasz, 2013/03/14 10:15:39]

ditto

[yoshiki, 2013/03/14 13:43:42]

Done.

@@ -279,6 +283,10 @@ div.root-eject:hover {
   opacity: 1;
 }
 
+div.root-eject[hidden] {

[mtomasz, 2013/03/14 10:15:39]

Is this necessary? AFAIK *[hidden] is defined by default.

[yoshiki, 2013/03/14 13:43:42]

I didn't know thanks!

[mtomasz, 2013/03/15 04:23:20]

Sorry, I was wrong. I mean *[hidden] is defined, but it is later overriden in
.tree-item > .tree-row > * to display: inline-block, so yet, this is actually
needed.

[yoshiki, 2013/03/15 08:01:06]

Done.

+  display: none;
+}
+
 .root-item[selected] > div.root-eject:not(:hover),
 .root-item:hover > div.root-eject:not(:hover) {
   opacity: 0.7;

[mtomasz, 2013/03/14 10:15:39]

nit: We have opacity: 0.7 here and in #277. Are both necessary?

[yoshiki, 2013/03/14 13:43:42]

I think Here is unnecessary. Removed.