Bookmark manager - Change the tree expand icon behavior to match Brian's requests.

BUG=None
TEST=Open bookmarks manager. The tree should show the expand icons all the time (given that there are nested folders).


Review URL: http://codereview.chromium.org/1639001

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

2 files changed, 15 insertions, 58 deletions

diff --git a/chrome/browser/resources/bookmark_manager/css/tree.css b/chrome/browser/resources/bookmark_manager/css/tree.css
index 35a2663..5d1acd8f 100644
--- a/chrome/browser/resources/bookmark_manager/css/tree.css
+++ b/chrome/browser/resources/bookmark_manager/css/tree.css
@@ -18,40 +18,28 @@ tree {
 }
 
 .expand-icon {
-  width: 11px;
+  width: 16px;
   height: 16px;
   display: inline-block;
   vertical-align: top;
   position: relative;
   top: 2px;
-  background-image: -webkit-canvas(triangle-empty);
+  background-image: -webkit-canvas(tree-triangle);
   background-position: 50% 50%;
   background-repeat: no-repeat;
-  -webkit-transition: all .15s, opacity 1.5s;
-  opacity: 0;
+  -webkit-transition: all .15s;
+  opacity: .6;
+  -webkit-transform: rotate(-90deg);
 }
 
 html[dir=rtl] .expand-icon {
-  -webkit-transform: scale(-1, 1);
-}
-
-tree:hover .expand-icon,
-tree:focus .expand-icon {
-  opacity: 1;
-  -webkit-transition: all .15s, opacity .5s;
+  -webkit-transform: rotate(90deg);
 }
 
 .tree-item[expanded] > .tree-row > .expand-icon {
-  background-image: -webkit-canvas(triangle-filled);
-  -webkit-transform: translate(0, 3px) rotate(45deg);
-}
-
-html[dir=rtl] .tree-item[expanded] > .tree-row > .expand-icon {
-  -webkit-transform: scale(-1, 1) translate(0, 3px) rotate(45deg); /* flip */
-}
-
-.tree-item > .tree-row > .expand-icon:hover {
-  background-image: -webkit-canvas(triangle-hover);
+  background-image: -webkit-canvas(tree-triangle);
+  -webkit-transform: rotate(0deg);
+  opacity: .5;
 }
 
 .tree-row .expand-icon {
diff --git a/chrome/browser/resources/bookmark_manager/css/tree.css.js b/chrome/browser/resources/bookmark_manager/css/tree.css.js
index 66c7e42..a6ce38e 100644
--- a/chrome/browser/resources/bookmark_manager/css/tree.css.js
+++ b/chrome/browser/resources/bookmark_manager/css/tree.css.js
@@ -5,49 +5,18 @@
 (function() {
   var a = 7;
   var a2 = a / 2;
-  var ctx = document.getCSSCanvasContext('2d', 'triangle-filled', a2 + 2, a + 1);
+  var ctx = document.getCSSCanvasContext('2d', 'tree-triangle', a + 1, a2 + 2);
 
   ctx.fillStyle = '#000';
   ctx.translate(.5, .5);
-  ctx.beginPath();
-  ctx.moveTo(0, 0);
-  ctx.lineTo(0, a);
-  ctx.lineTo(a2, a2);
-  ctx.closePath();
-  ctx.fill();
-  ctx.stroke();
-
-  var ctx = document.getCSSCanvasContext('2d', 'triangle-empty', a2 + 2, a + 1);
-
-  ctx.strokeStyle = '#999';
-  ctx.lineWidth  = 1.2;
-  ctx.translate(.5, .5);
-  ctx.fillStyle = '#000';
-  ctx.beginPath();
 
-
-  ctx.moveTo(0, 0);
-  ctx.lineTo(0, a);
-  ctx.lineTo(a2, a2);
-  ctx.closePath();
-  ctx.stroke();
-
-  var ctx = document.getCSSCanvasContext('2d', 'triangle-hover', a2 + 2 + 4, a + 1 + 4);
-
-  ctx.shadowColor = 'hsl(214,91%,89%)'
-  ctx.shadowBlur = 3;
-  ctx.shadowOffsetX = 1;
-  ctx.shadowOffsetY = 0;
-
-  ctx.strokeStyle = 'hsl(214,91%,79%)';
-  ctx.lineWidth  = 1.2;
-  ctx.translate(.5 + 2, .5 + 2);
-  ctx.fillStyle = '#000';
   ctx.beginPath();
-
   ctx.moveTo(0, 0);
-  ctx.lineTo(0, a);
-  ctx.lineTo(a2, a2);
+  ctx.lineTo(0, 1);
+  ctx.lineTo(a2, 1 + a2);
+  ctx.lineTo(a, 1);
+  ctx.lineTo(a, 0);
   ctx.closePath();
+  ctx.fill();
   ctx.stroke();
 })();