Polish arrows in the middle bar.

This patch adds inverted versions of the arrows used on the blue selection. Along the way, removes flickering when expanding the tree for the first time.

TEST=Go to Drive, navigate over the middle bar.
BUG=246914

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

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

6 files changed, 69 insertions, 6 deletions

diff --git a/chrome/browser/resources/file_manager/css/file_manager.css b/chrome/browser/resources/file_manager/css/file_manager.css
index 556c3a5..5f7c647 100644
--- a/chrome/browser/resources/file_manager/css/file_manager.css
+++ b/chrome/browser/resources/file_manager/css/file_manager.css
@@ -405,11 +405,16 @@ body[new-ui] #directory-tree .tree-children .tree-row {
   height: 37px;
   left: 3px;
   margin: -13px;
+  opacity: 1;
   top: 0;
   vertical-align: middle;
   width: 37px;
 }
 
+body[new-ui] #directory-tree:focus .tree-row[selected] > .expand-icon {
+  background-image: -webkit-canvas(tree-triangle-inverted);
+}
+
 #directory-tree .tree-row > .volume-icon {
   background-position: center 2px;
   background-repeat: no-repeat;
diff --git a/chrome/browser/resources/file_manager/js/main_scripts.js b/chrome/browser/resources/file_manager/js/main_scripts.js
index e26d78f..ab8b9bb 100644
--- a/chrome/browser/resources/file_manager/js/main_scripts.js
+++ b/chrome/browser/resources/file_manager/js/main_scripts.js
@@ -43,7 +43,6 @@
 //<include src="../../../../../ui/webui/resources/js/cr/ui/list_selection_controller.js"/>
 //<include src="../../../../../ui/webui/resources/js/cr/ui/list.js"/>
 //<include src="../../../../../ui/webui/resources/js/cr/ui/tree.js"/>
-//<include src="../../../../../ui/webui/resources/css/tree.css.js"/>
 //<include src="../../../../../ui/webui/resources/js/cr/ui/autocomplete_list.js"/>
 //
 //<include src="../../../../../ui/webui/resources/js/cr/ui/splitter.js"/>
@@ -91,6 +90,7 @@
 //<include src="file_type.js"/>
 //<include src="scrollbar.js"/>
 //<include src="sidebar.js"/>
+//<include src="tree.css.js"/>
 //<include src="volume_list.js"/>
 //<include src="volume_manager.js"/>
 //<include src="media/media_util.js"/>
diff --git a/chrome/browser/resources/file_manager/js/sidebar.js b/chrome/browser/resources/file_manager/js/sidebar.js
index 36478b4..cfde174 100644
--- a/chrome/browser/resources/file_manager/js/sidebar.js
+++ b/chrome/browser/resources/file_manager/js/sidebar.js
@@ -327,10 +327,9 @@ DirectoryItem.prototype.decorate = function(
   this.dirEntry_ = dirEntry;
   this.fileFilter_ = this.directoryModel_.getFileFilter();
 
-  // Sets hasChildren=true tentatively. This will be overridden after
+  // Sets hasChildren=false tentatively. This will be overridden after
   // scanning sub-directories in DirectoryTreeUtil.updateSubElementsFromList.
-  // Special search does not have children.
-  this.hasChildren = !PathUtil.isSpecialSearchRoot(path);
+  this.hasChildren = false;
 
   this.addEventListener('expand', this.onExpand_.bind(this), false);
   var volumeManager = VolumeManager.getInstance();
diff --git a/chrome/browser/resources/file_manager/js/tree.css.js b/chrome/browser/resources/file_manager/js/tree.css.js
new file mode 100644
index 0000000..d641d4c
--- /dev/null
+++ b/chrome/browser/resources/file_manager/js/tree.css.js
@@ -0,0 +1,59 @@
+// Copyright 2013 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.
+
+'use strict';
+
+/**
+ * Custom version of chrome://resources/css/tree.css.js, adding support for
+ * inverted arrow icons.
+ */
+(function() {
+  /**
+   * @type {number}
+   * @const
+   */
+  var WIDTH = 14;
+
+  /**
+   * @type {number}
+   * @const
+   */
+  var HEIGHT = WIDTH / 2 + 2;
+
+  /**
+   * @type {number}
+   * @const
+   */
+  var MARGIN = 1;
+
+  /**
+   * @param {string} name CSS canvas identifier.
+   * @param {string} backgroundColor Background color.
+   * @param {string} strokeColor Outline color.
+   */
+  function prepareTriangle(name, backgroundColor, strokeColor) {
+    var ctx = document.getCSSCanvasContext('2d',
+                                           name,
+                                           WIDTH + MARGIN * 2,
+                                           HEIGHT + MARGIN * 2);
+
+    ctx.fillStyle = backgroundColor;
+    ctx.strokeStyle = strokeColor;
+    ctx.translate(MARGIN, MARGIN);
+
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.lineTo(0, 2);
+    ctx.lineTo(WIDTH / 2, HEIGHT);
+    ctx.lineTo(WIDTH, 2);
+    ctx.lineTo(WIDTH, 0);
+    ctx.closePath();
+    ctx.fill();
+    ctx.stroke();
+  }
+
+  prepareTriangle(
+      'tree-triangle', 'rgba(122, 122, 122, 0.6)', 'rgba(0, 0, 0, 0.6)');
+  prepareTriangle('tree-triangle-inverted', '#ffffff', '#ffffff');
+})();
diff --git a/chrome/browser/resources/file_manager/main.html b/chrome/browser/resources/file_manager/main.html
index 7b4982c..000b474 100644
--- a/chrome/browser/resources/file_manager/main.html
+++ b/chrome/browser/resources/file_manager/main.html
@@ -59,7 +59,6 @@
       <script src="chrome://resources/js/cr/ui/list_selection_controller.js"></script>
       <script src="chrome://resources/js/cr/ui/list.js"></script>
       <script src="chrome://resources/js/cr/ui/tree.js"></script>
-      <script src="chrome://resources/css/tree.css.js"></script>
       <script src="chrome://resources/js/cr/ui/autocomplete_list.js"></script>
 
       <script src="chrome://resources/js/cr/ui/splitter.js"></script>
@@ -102,6 +101,7 @@
       <script src="js/file_transfer_controller.js"></script>
       <script src="js/file_type.js"></script>
       <script src="js/sidebar.js"></script>
+      <script src="js/tree.css.js"></script>
       <script src="js/volume_manager.js"></script>
       <script src="js/media/media_util.js"></script>
       <script src="js/metadata/metadata_cache.js"></script>
diff --git a/chrome/browser/resources/file_manager/main_new_ui.html b/chrome/browser/resources/file_manager/main_new_ui.html
index 7066c60..9af22bf 100644
--- a/chrome/browser/resources/file_manager/main_new_ui.html
+++ b/chrome/browser/resources/file_manager/main_new_ui.html
@@ -58,7 +58,6 @@
       <script src="chrome://resources/js/cr/ui/list_selection_controller.js"></script>
       <script src="chrome://resources/js/cr/ui/list.js"></script>
       <script src="chrome://resources/js/cr/ui/tree.js"></script>
-      <script src="chrome://resources/css/tree.css.js"></script>
       <script src="chrome://resources/js/cr/ui/autocomplete_list.js"></script>
 
       <script src="chrome://resources/js/cr/ui/splitter.js"></script>
@@ -103,6 +102,7 @@
       <script src="js/file_type.js"></script>
       <script src="js/scrollbar.js"></script>
       <script src="js/sidebar.js"></script>
+      <script src="js/tree.css.js"></script>
       <script src="js/volume_manager.js"></script>
       <script src="js/volume_list.js"></script>
       <script src="js/media/media_util.js"></script>