Accessibility: Fix color enhancer filtering

ui/accessibility/extensions/colorenhancer/src/cvd.js

 // Copyright 2015 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.
 
 
 /**
  * Global exports.  Used by popup to show effect of filter during setup.
  */
 (function(exports) {
+  // TODO(wnwen): Replace var with let.
   var curDelta = 0;
   var curSeverity = 0;
   var curType = 'PROTANOMALY';
   var curSimulate = false;
   var curEnable = false;
   var curFilter = 0;
+  var cssTemplate = `
+html[cvd="0"] {
+  -webkit-filter: url('#cvd_extension_0');
+}
+html[cvd="1"] {
+  -webkit-filter: url('#cvd_extension_1');
+}
+`;
 
+  /** @const {string} */
+  var SVG_DEFAULT_MATRIX =
+    '1 0 0 0 0 ' +
+    '0 1 0 0 0 ' +
+    '0 0 1 0 0 ' +
+    '0 0 0 1 0';
+
+  var svgContent = `
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <defs>
+    <filter x="0" y="0" width="99999" height="99999" id="cvd_extension_0">
+      <feColorMatrix id="cvd_matrix_0" type="matrix" values="
+          ${SVG_DEFAULT_MATRIX}"/>
+    </filter>
+    <filter x="0" y="0" width="99999" height="99999" id="cvd_extension_1">
+      <feColorMatrix id="cvd_matrix_1" type="matrix" values="
+          ${SVG_DEFAULT_MATRIX}"/>
+    </filter>
+  </defs>
+</svg>
+`;
 
   // ======= 3x3 matrix ops =======
 
   /**
    * The 3x3 identity matrix.
    * @const {object}
    */
   var IDENTITY_MATRIX_3x3 = [
     [1, 0, 0],
     [0, 1, 0],
@@ skipping 268 matching lines @@
           add3x3(IDENTITY_MATRIX_3x3, cvdCorrectionMatrix),
           tmpProduct);
     }
 
     return effectiveMatrix;
   }
 
 
   // ======= Page linker =======
 
-  /** @const {string} */
-  var SVG_DEFAULT_MATRIX =
-    '1 0 0 0 0 ' +
-    '0 1 0 0 0 ' +
-    '0 0 1 0 0 ' +
-    '0 0 0 1 0';
-
-  var svgContent =
-    '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">' +
-    '  <defs>' +
-    '    <filter id="cvd_extension_0">' +
-    '      <feColorMatrix id="cvd_matrix_0" type="matrix" values="' +
-        SVG_DEFAULT_MATRIX + '"/>' +
-    '    </filter>' +
-    '    <filter id="cvd_extension_1">' +
-    '      <feColorMatrix id="cvd_matrix_1" type="matrix" values="' +
-        SVG_DEFAULT_MATRIX + '"/>' +
-    '    </filter>' +
-    '  </defs>' +
-    '</svg>';
+  const STYLE_ID = 'cvd_style';
+  const WRAP_ID = 'cvd_extension_svg_filter';
 
   /**
-   * Checks for svg filter matrix presence and append to DOM if not present.
+   * Checks for required elements, adding if missing.
    */
-  function addSvgIfMissing() {
-    var wrap = document.getElementById('cvd_extension_svg_filter');
+  function addElements() {
+    var style = document.getElementById(STYLE_ID);
+    if (!style) {
+      var baseUrl = window.location.href.replace(window.location.hash, '');
+      style = document.createElement('style');
+      style.id = STYLE_ID;
+      style.setAttribute('type', 'text/css');
+      style.innerHTML = cssTemplate.replace(/#/g, baseUrl + '#');
+      document.head.appendChild(style);
+    }
+
+    var wrap = document.getElementById(WRAP_ID);
     if (!wrap) {
       wrap = document.createElement('span');
-      wrap.id = 'cvd_extension_svg_filter';
+      wrap.id = WRAP_ID;
       wrap.setAttribute('hidden', '');
       wrap.innerHTML = svgContent;
       document.body.appendChild(wrap);
     }
   }
 
   /**
    * Updates the SVG filter based on the RGB correction/simulation matrix.
    * @param {!Object} matrix  3x3 RGB transformation matrix.
    */
   function setFilter(matrix) {
-    addSvgIfMissing();
+    addElements();
     var next = 1 - curFilter;
 
     debugPrint('update: matrix#' + next + '=' +
         humanReadbleStringFrom3x3(matrix));
 
     var matrixElem = document.getElementById('cvd_matrix_' + next);
     matrixElem.setAttribute('values', svgMatrixStringFrom3x3(matrix));
 
     document.documentElement.setAttribute('cvd', next);
 
@@ skipping 117 matching lines @@
 
   /**
    * Clears color correction filter.
    */
   exports.clearColorEnhancementFilter = function() {
     clearFilter();
   };
 })(this);
 
 this.initializeExtension();