core: use cssstyle to parse CSS colors instead of WebInspector (#6091)

lighthouse-core/audits/themed-omnibox.js

@@ -6,8 +6,8 @@
 'use strict';
 
 const MultiCheckAudit = require('./multi-check-audit');
-const validColor = require('../lib/web-inspector').Color.parse;
 const ManifestValues = require('../gather/computed/manifest-values');
+const cssParsers = require('cssstyle/lib/parsers');
 
 /**
  * @fileoverview
@@ -34,14 +34,22 @@ class ThemedOmnibox extends MultiCheckAudit {
     };
   }
 
+  /**
+   * @param {string} color
+   * @return {boolean}
+   */
+  static isValidColor(color) {
+    return cssParsers.valueType(color) === cssParsers.TYPES.COLOR;
+  }
+
   /**
    * @param {LH.Artifacts['ThemeColor']} themeColorMeta
    * @param {Array<string>} failures
    */
   static assessMetaThemecolor(themeColorMeta, failures) {
     if (themeColorMeta === null) {
       failures.push('No `<meta name="theme-color">` tag found');
-    } else if (!validColor(themeColorMeta)) {
+    } else if (!ThemedOmnibox.isValidColor(themeColorMeta)) {
       failures.push('The theme-color meta tag did not contain a valid CSS color');
     }
   }

lighthouse-core/lib/manifest-parser.js

@@ -6,7 +6,7 @@
 'use strict';
 
 const URL = require('./url-shim');
-const validateColor = require('./web-inspector').Color.parse;
+const cssParsers = require('cssstyle/lib/parsers');
 
 const ALLOWED_DISPLAY_VALUES = [
   'fullscreen',
@@ -31,6 +31,14 @@ const ALLOWED_ORIENTATION_VALUES = [
   'landscape-secondary',
 ];
 
+/**
+ * @param {string} color
+ * @return {boolean}
+ */
+function isValidColor(color) {
+  return cssParsers.valueType(color) === cssParsers.TYPES.COLOR;
+}
+
 /**
  * @param {*} raw
  * @param {boolean=} trim
@@ -66,9 +74,8 @@ function parseColor(raw) {
     return color;
   }
 
-  // Use DevTools's color parser to check CSS3 Color parsing.
-  const validatedColor = validateColor(color.raw);
-  if (!validatedColor) {
+  // Use color parser to check CSS3 Color parsing.
+  if (!isValidColor(color.raw)) {
     color.value = undefined;
     color.warning = 'ERROR: color parsing failed.';
   }

lighthouse-core/lib/web-inspector.js

@@ -149,9 +149,6 @@ module.exports = (function() {
     Log: 'log',
   };
 
-  // Dependencies for color parsing.
-  require('chrome-devtools-frontend/front_end/common/Color.js');
-
   // Dependencies for effective CSS rule calculation.
   require('chrome-devtools-frontend/front_end/common/TextRange.js');
   require('chrome-devtools-frontend/front_end/sdk/CSSMatchedStyles.js');

lighthouse-core/test/lib/web-inspector-test.js

@@ -12,7 +12,6 @@ const assert = require('assert');
 describe('Web Inspector lib', function() {
   it('WebInspector exported is the real one', () => {
     assert.equal(typeof WebInspector, 'object');
-    assert.ok(WebInspector.Color);
     assert.ok(WebInspector.CSSMetadata);
   });
 

package.json

@@ -115,6 +115,7 @@
     "chrome-devtools-frontend": "1.0.422034",
     "chrome-launcher": "^0.10.4",
     "configstore": "^3.1.1",
+    "cssstyle": "1.1.1",
     "devtools-timeline-model": "1.1.6",
     "esprima": "^4.0.1",
     "http-link-header": "^0.8.0",

typings/cssstyle/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license Copyright 2018 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+declare module 'cssstyle/lib/parsers' {
+  interface TYPES {
+    INTEGER: 1;
+    NUMBER: 2;
+    LENGTH: 3;
+    PERCENT: 4;
+    URL: 5;
+    COLOR: 6;
+    STRING: 7;
+    ANGLE: 8;
+    KEYWORD: 9;
+    NULL_OR_EMPTY_STR: 10;
+  }
+
+  export var TYPES: TYPES;
+  export function valueType(val: any): TYPES[keyof TYPES] | undefined;
+}

yarn.lock

@@ -1482,6 +1482,12 @@ cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.2.tgz#b8036170c79f07a90ff2f16e22284027a243848b"
 
+cssstyle@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-1.1.1.tgz#18b038a9c44d65f7a8e428a653b9f6fe42faf5fb"
+  dependencies:
+    cssom "0.3.x"
+
 "cssstyle@>= 0.2.37 < 0.3.0":
   version "0.2.37"
   resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-0.2.37.tgz#541097234cb2513c83ceed3acddc27ff27987d54"