Home | History | Annotate | Download | only in js 
      1 // Copyright 2013 The Chromium Authors. All rights reserved.
      2 // Use of this source code is governed by a BSD-style license that can be
      3 // found in the LICENSE file.
      4 
      5 'use strict';
      6 
      7 /**
      8  * Custom version of chrome://resources/css/tree.css.js, adding support for
      9  * inverted arrow icons.
     10  */
     11 (function() {
     12   /**
     13    * @type {number}
     14    * @const
     15    */
     16   var WIDTH = 14;
     17 
     18   /**
     19    * @type {number}
     20    * @const
     21    */
     22   var HEIGHT = WIDTH / 2 + 2;
     23 
     24   /**
     25    * @type {number}
     26    * @const
     27    */
     28   var MARGIN = 1;
     29 
     30   /**
     31    * @param {string} name CSS canvas identifier.
     32    * @param {string} backgroundColor Background color.
     33    * @param {string} strokeColor Outline color.
     34    */
     35   function prepareTriangle(name, backgroundColor, strokeColor) {
     36     var ctx = document.getCSSCanvasContext('2d',
     37                                            name,
     38                                            WIDTH + MARGIN * 2,
     39                                            HEIGHT + MARGIN * 2);
     40 
     41     ctx.fillStyle = backgroundColor;
     42     ctx.strokeStyle = strokeColor;
     43     ctx.translate(MARGIN, MARGIN);
     44 
     45     ctx.beginPath();
     46     ctx.moveTo(0, 0);
     47     ctx.lineTo(0, 2);
     48     ctx.lineTo(WIDTH / 2, HEIGHT);
     49     ctx.lineTo(WIDTH, 2);
     50     ctx.lineTo(WIDTH, 0);
     51     ctx.closePath();
     52     ctx.fill();
     53     ctx.stroke();
     54   }
     55 
     56   prepareTriangle(
     57       'tree-triangle', 'rgba(122, 122, 122, 0.6)', 'rgba(0, 0, 0, 0.6)');
     58   prepareTriangle('tree-triangle-inverted', '#ffffff', '#ffffff');
     59 })();
     60