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