FileBrowser: tuned colors according to mocks.

BUG=chromium-os:29969
TEST=

Review URL: https://chromiumcodereview.appspot.com/10221035

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@134477 0039d316-1c4b-4281-b951-d872f2087c98

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

@@ -210,43 +210,41 @@ div.sidebar-splitter {
 }
 
 /* Roots list at the left. */
-list.roots-list {
-  border-right: 1px solid #d2d2d2;
+#roots-list {
+  border-right: 1px solid rgb(170, 170, 170);
 }
 
-list.roots-list > * {
+#roots-list > * {
   background-color: #e6e6e6;
+  background-image: none;
   border: none;
-  border-radius: 0;
   height: 39px;
   margin: 0;
   padding: 0 5px;
 }
 
-list.roots-list > .accepts,
-list.roots-list > [lead][selected],
-list.roots-list > [lead],
-list.roots-list > [selected],
-list.roots-list > [anchor] {
-  background-color: rgb(204, 219, 243);
-  background-image: none;
-  border-bottom: 1px solid rgb(195, 210, 233);
-  border-top: 1px solid rgb(195, 210, 233);
-  height: 37px;
+#roots-list > :hover {
+  background-color: rgba(0, 0, 0, 0.05);
+  border-color: rgba(0, 0, 0, 0.05);
+}
+
+#roots-list > .accepts,
+#roots-list > [lead][selected],
+#roots-list > [lead],
+#roots-list > [selected],
+#roots-list > [anchor] {
+  background-color: rgb(204, 204, 204);
 }
 
-list.roots-list > .accepts:hover,
-list.roots-list > [lead]:hover,
-list.roots-list > [lead][selected]:hover,
-list.roots-list > [selected]:hover,
-list.roots-list > [anchor]:hover {
-  background-color: rgb(193, 211, 236) !important;
-  border-bottom: 1px solid transparent !important;
-  border-top: 1px solid transparent !important;
-  height: 37px !important;
+#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);
 }
 
-list.roots-list li.root-item {
+#roots-list li.root-item {
   -webkit-box-align: center;
   display: -webkit-box;
   padding-left: 11px;
@@ -477,7 +475,7 @@ button.settings {
   display: -webkit-box;
 }
 
-.list-container {
+#list-container {
   -webkit-box-flex: 1;
   display: -webkit-box;
   position: relative;
@@ -560,36 +558,38 @@ div.img-container > img {
   position: absolute;
 }
 
-.list-container list > *,
-.list-container grid > * {
+#list-container list > *,
+#list-container grid > * {
   background-image: none;
   border-radius: 0;
   line-height: 30px;
 }
 
-.list-container list > [selected],
-.list-container grid > [selected] {
+#list-container list > [selected],
+#list-container grid > [selected] {
   background-color: rgb(203, 219, 241);
-  border-color: rgb(224, 233, 247);
 }
 
-.list-container list > .accepts[selected],
-.list-container grid > .accepts[selected],
-.list-container list > [selected]:hover,
-.list-container grid > [selected]:hover {
+#list-container list > li.table-row[selected] {
+  border-top: 1px solid rgb(224, 233, 247);
+}
+
+#list-container list > .accepts[selected],
+#list-container grid > .accepts[selected],
+#list-container list > [selected]:hover,
+#list-container grid > [selected]:hover {
   background-color: rgb(193, 211, 236);
 }
 
-.list-container list > .accepts,
-.list-container grid > .accepts,
-.list-container list > :hover,
-.list-container grid > :hover {
-  background-color: rgb(242, 246, 250);
-  border-color: rgb(242, 246, 250);
+#list-container list > .accepts,
+#list-container grid > .accepts,
+#list-container list > :hover,
+#list-container grid > :hover {
+  background-color: #f1f1f1;
 }
 
-.list-container.nohover list > :not([selected]):hover,
-.list-container.nohover grid > :not([selected]):hover {
+#list-container.nohover list > :not([selected]):hover,
+#list-container.nohover grid > :not([selected]):hover {
   background-color: transparent;
   border-color: transparent;
 }
@@ -807,29 +807,31 @@ input.rename {
   top: 1px;
 }
 
-li.thumbnail-item .file-checkbox {
+#list-container li.thumbnail-item .file-checkbox {
   -webkit-margin-start: 7px;
   margin-top: 6px;
   opacity: 0;
 }
 
-li.table-row:hover .file-checkbox,
-li.table-row:hover .pin,
-li.thumbnail-item:hover .file-checkbox {
+#list-container li.table-row:hover .file-checkbox,
+#list-container li.table-row:hover .pin,
+#list-container li.thumbnail-item:hover .file-checkbox {
   opacity: 0.5;
 }
 
 .file-checkbox:hover,
 .pin:hover,
-li.table-row[selected] .file-checkbox,
-li.table-row[selected] .pin,
-li.table-row .pin:checked,
-li.thumbnail-item[selected] .file-checkbox {
+#list-container li.table-row[selected] .file-checkbox,
+#list-container li.table-row[selected] .pin,
+#list-container li.table-row .pin:checked,
+#list-container li.thumbnail-item[selected] .file-checkbox {
   opacity: 1 !important;
 }
 
-li.table-row {
-  line-height: 38px;
+#list-container li.table-row {
+  border: none;
+  border-top: 1px solid transparent;
+  line-height: 39px;
   padding-bottom: 1px;
   padding-top: 1px;
 }

chrome/browser/resources/file_manager/js/file_manager.js

@@ -520,7 +520,7 @@ FileManager.prototype = {
     this.filenameInput_.addEventListener(
         'focus', this.onFilenameInputFocus_.bind(this));
 
-    this.listContainer_ = this.dialogDom_.querySelector('.list-container');
+    this.listContainer_ = this.dialogDom_.querySelector('#list-container');
     this.listContainer_.addEventListener(
         'keydown', this.onListKeyDown_.bind(this));
     this.listContainer_.addEventListener(
@@ -642,7 +642,7 @@ FileManager.prototype = {
   };
 
   FileManager.prototype.initRootsList_ = function() {
-    this.rootsList_ = this.dialogDom_.querySelector('.roots-list');
+    this.rootsList_ = this.dialogDom_.querySelector('#roots-list');
     cr.ui.List.decorate(this.rootsList_);
     this.rootsList_.startBatchUpdates();
 
@@ -3718,7 +3718,7 @@ FileManager.prototype = {
   };
 
   /**
-   * KeyDown event handler for the div.list-container element.
+   * KeyDown event handler for the div#list-container element.
    */
   FileManager.prototype.onListKeyDown_ = function(event) {
     if (event.srcElement.tagName == 'INPUT') {
@@ -3805,7 +3805,7 @@ FileManager.prototype = {
   };
 
   /**
-   * KeyPress event handler for the div.list-container element.
+   * KeyPress event handler for the div#list-container element.
    */
   FileManager.prototype.onListKeyPress_ = function(event) {
     if (event.srcElement.tagName == 'INPUT') {
@@ -3826,7 +3826,7 @@ FileManager.prototype = {
   };
 
   /**
-   * Mousemove event handler for the div.list-container element.
+   * Mousemove event handler for the div#list-container element.
    */
   FileManager.prototype.onListMouseMove_ = function(event) {
     // The user grabbed the mouse, restore the hover highlighting.

chrome/browser/resources/file_manager/main.html

@@ -126,7 +126,7 @@
     <div class=dialog-title invisibleif='full-page'>[TITLE]</div>
     <div class=dialog-container>
       <div class=dialog-sidebar>
-        <list class=roots-list></list>
+        <list id="roots-list"></list>
       </div>
       <div class=sidebar-splitter></div>
       <div class=dialog-main>
@@ -152,7 +152,7 @@
         <div class="gdrive-welcome header"></div>
         <div class=dialog-body>
           <div class=filelist-panel>
-            <div class=list-container>
+            <div id="list-container">
               <div class=detail-table tabindex=0></div>
               <grid class=thumbnail-grid tabindex=0></grid>
               <div class=spinner></div>