src/ui/file_manager/file_manager/foreground/js/tree.css.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)');
  58   prepareTriangle('tree-triangle-inverted', '#ffffff', '#ffffff');
  59 })();