Bug 1500469 - Don't require /shared/css/properties-db.js in the inspector client. r=mtigley
authorGabriel Luong <gabriel.luong@gmail.com>
Fri, 19 Oct 2018 17:40:31 -0400
changeset 490455 4d6e6d7e58baedeb32896f24d569bad60672afbc
parent 490454 3133f6ab1bd8ea2aa261f8e9024ab3fb8eb0ddcb
child 490456 fab6a95048aaf7ca24a337e7a79963955b8cd34f
child 490570 f3bb47ac5f014dd6d8cc0747e0f57f76858d04c2
push id247
push userfmarier@mozilla.com
push dateSat, 27 Oct 2018 01:06:44 +0000
reviewersmtigley
bugs1500469
milestone64.0a1
Bug 1500469 - Don't require /shared/css/properties-db.js in the inspector client. r=mtigley
devtools/client/shared/css-angle.js
devtools/client/shared/output-parser.js
devtools/server/actors/css-properties.js
devtools/shared/css/color.js
devtools/shared/css/constants.js
devtools/shared/css/moz.build
devtools/shared/css/parsing-utils.js
devtools/shared/css/properties-db.js
devtools/shared/fronts/css-properties.js
--- a/devtools/client/shared/css-angle.js
+++ b/devtools/client/shared/css-angle.js
@@ -1,25 +1,24 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
-loader.lazyRequireGetter(this, "CSS_ANGLEUNIT",
-  "devtools/shared/css/properties-db", true);
-
 const SPECIALVALUES = new Set([
   "initial",
   "inherit",
   "unset"
 ]);
 
 const {getCSSLexer} = require("devtools/shared/css/lexer");
 
+loader.lazyRequireGetter(this, "CSS_ANGLEUNIT", "devtools/shared/css/constants", true);
+
 /**
  * This module is used to convert between various angle units.
  *
  * Usage:
  *   let {angleUtils} = require("devtools/client/shared/css-angle");
  *   let angle = new angleUtils.CssAngle("180deg");
  *
  *   angle.authored === "180deg"
--- a/devtools/client/shared/output-parser.js
+++ b/devtools/client/shared/output-parser.js
@@ -6,31 +6,39 @@
 
 const Services = require("Services");
 const {angleUtils} = require("devtools/client/shared/css-angle");
 const {colorUtils} = require("devtools/shared/css/color");
 const {getCSSLexer} = require("devtools/shared/css/lexer");
 const EventEmitter = require("devtools/shared/event-emitter");
 const {appendText} = require("devtools/client/inspector/shared/utils");
 
-loader.lazyRequireGetter(this, "ANGLE_TAKING_FUNCTIONS",
-  "devtools/shared/css/properties-db", true);
-loader.lazyRequireGetter(this, "BASIC_SHAPE_FUNCTIONS",
-  "devtools/shared/css/properties-db", true);
-loader.lazyRequireGetter(this, "BEZIER_KEYWORDS",
-  "devtools/shared/css/properties-db", true);
-loader.lazyRequireGetter(this, "COLOR_TAKING_FUNCTIONS",
-  "devtools/shared/css/properties-db", true);
-loader.lazyRequireGetter(this, "CSS_TYPES",
-  "devtools/shared/css/properties-db", true);
+loader.lazyRequireGetter(this, "CSS_TYPES", "devtools/shared/css/constants", true);
 
 const STYLE_INSPECTOR_PROPERTIES = "devtools/shared/locales/styleinspector.properties";
 const {LocalizationHelper} = require("devtools/shared/l10n");
 const STYLE_INSPECTOR_L10N = new LocalizationHelper(STYLE_INSPECTOR_PROPERTIES);
 
+// Functions that accept an angle argument.
+const ANGLE_TAKING_FUNCTIONS = ["linear-gradient", "-moz-linear-gradient",
+                                "repeating-linear-gradient",
+                                "-moz-repeating-linear-gradient", "rotate", "rotateX",
+                                "rotateY", "rotateZ", "rotate3d", "skew", "skewX",
+                                "skewY", "hue-rotate"];
+// All cubic-bezier CSS timing-function names.
+const BEZIER_KEYWORDS = ["linear", "ease-in-out", "ease-in", "ease-out", "ease"];
+// Functions that accept a color argument.
+const COLOR_TAKING_FUNCTIONS = ["linear-gradient", "-moz-linear-gradient",
+                                "repeating-linear-gradient",
+                                "-moz-repeating-linear-gradient", "radial-gradient",
+                                "-moz-radial-gradient", "repeating-radial-gradient",
+                                "-moz-repeating-radial-gradient", "drop-shadow"];
+// Functions that accept a shape argument.
+const BASIC_SHAPE_FUNCTIONS = ["polygon", "circle", "ellipse", "inset"];
+
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 
 const FLEXBOX_HIGHLIGHTER_ENABLED_PREF = "devtools.inspector.flexboxHighlighter.enabled";
 const CSS_SHAPES_ENABLED_PREF = "devtools.inspector.shapesHighlighter.enabled";
 const CSS_SHAPE_OUTSIDE_ENABLED_PREF = "layout.css.shape-outside.enabled";
 
 /**
  * This module is used to process text for output by developer tools. This means
--- a/devtools/server/actors/css-properties.js
+++ b/devtools/server/actors/css-properties.js
@@ -1,23 +1,22 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
-loader.lazyRequireGetter(this, "CSS_TYPES",
-  "devtools/shared/css/properties-db", true);
-
 const protocol = require("devtools/shared/protocol");
 const { ActorClassWithSpec, Actor } = protocol;
 const { cssPropertiesSpec } = require("devtools/shared/specs/css-properties");
 const { cssColors } = require("devtools/shared/css/color-db");
 const InspectorUtils = require("InspectorUtils");
 
+loader.lazyRequireGetter(this, "CSS_TYPES", "devtools/shared/css/constants", true);
+
 exports.CssPropertiesActor = ActorClassWithSpec(cssPropertiesSpec, {
   typeName: "cssProperties",
 
   initialize(conn) {
     Actor.prototype.initialize.call(this, conn);
   },
 
   destroy() {
--- a/devtools/shared/css/color.js
+++ b/devtools/shared/css/color.js
@@ -3,18 +3,18 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const Services = require("Services");
 const {getCSSLexer} = require("devtools/shared/css/lexer");
 const {cssColors} = require("devtools/shared/css/color-db");
 
+loader.lazyRequireGetter(this, "CSS_ANGLEUNIT", "devtools/shared/css/constants", true);
 loader.lazyRequireGetter(this, "getAngleValueInDegrees", "devtools/shared/css/parsing-utils", true);
-loader.lazyRequireGetter(this, "CSS_ANGLEUNIT", "devtools/shared/css/properties-db", true);
 
 const COLOR_UNIT_PREF = "devtools.defaultColorUnit";
 
 const SPECIALVALUES = new Set([
   "currentcolor",
   "initial",
   "inherit",
   "transparent",
new file mode 100644
--- /dev/null
+++ b/devtools/shared/css/constants.js
@@ -0,0 +1,27 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+/**
+ * All CSS <angle> types that properties can support.
+ */
+exports.CSS_ANGLEUNIT = {
+  "deg": "deg",
+  "rad": "rad",
+  "grad": "grad",
+  "turn": "turn"
+};
+
+/**
+ * All CSS types that properties can support. This list can be manually edited.
+ *
+ * The existing numbers are for backward compatibility so that newer versions
+ * are still able to debug an old version correctly.
+ */
+exports.CSS_TYPES = {
+  "COLOR": 2,
+  "GRADIENT": 4,
+  "TIMING_FUNCTION": 10,
+};
--- a/devtools/shared/css/moz.build
+++ b/devtools/shared/css/moz.build
@@ -6,12 +6,13 @@
 
 DIRS += [
     'generated',
 ]
 
 DevToolsModules(
     'color-db.js',
     'color.js',
+    'constants.js',
     'lexer.js',
     'parsing-utils.js',
     'properties-db.js',
 )
--- a/devtools/shared/css/parsing-utils.js
+++ b/devtools/shared/css/parsing-utils.js
@@ -9,22 +9,21 @@
 // parseDeclarations - parse a CSS rule into declarations
 // RuleRewriter - rewrite CSS rule text
 // parsePseudoClassesAndAttributes - parse selector and extract
 //     pseudo-classes
 // parseSingleValue - parse a single CSS property value
 
 "use strict";
 
-loader.lazyRequireGetter(this, "CSS_ANGLEUNIT",
-  "devtools/shared/css/properties-db", true);
-
 const promise = require("promise");
 const {getCSSLexer} = require("devtools/shared/css/lexer");
 
+loader.lazyRequireGetter(this, "CSS_ANGLEUNIT", "devtools/shared/css/constants", true);
+
 const SELECTOR_ATTRIBUTE = exports.SELECTOR_ATTRIBUTE = 1;
 const SELECTOR_ELEMENT = exports.SELECTOR_ELEMENT = 2;
 const SELECTOR_PSEUDO_CLASS = exports.SELECTOR_PSEUDO_CLASS = 3;
 
 // Used to test whether a newline appears anywhere in some text.
 const NEWLINE_RX = /[\r\n]/;
 // Used to test whether a bit of text starts an empty comment, either
 // an "ordinary" /* ... */ comment, or a "heuristic bypass" comment
--- a/devtools/shared/css/properties-db.js
+++ b/devtools/shared/css/properties-db.js
@@ -21,63 +21,16 @@ try {
                 `being run, then it needs to be fixed.`, error);
   db = {
     CSS_PROPERTIES: {},
     PSEUDO_ELEMENTS: []
   };
 }
 
 /**
- * All CSS types that properties can support. This list can be manually edited.
- *
- * The existing numbers are for backward compatibility so that newer versions
- * are still able to debug an old version correctly.
- */
-exports.CSS_TYPES = {
-  "COLOR": 2,
-  "GRADIENT": 4,
-  "TIMING_FUNCTION": 10,
-};
-
-/**
- * All CSS <angle> types that properties can support. This list can be manually edited.
- */
-exports.CSS_ANGLEUNIT = {
-  "deg": "deg",
-  "rad": "rad",
-  "grad": "grad",
-  "turn": "turn"
-};
-
-/**
- * All cubic-bezier CSS timing-function names. This list can be manually edited.
- */
-exports.BEZIER_KEYWORDS = ["linear", "ease-in-out", "ease-in", "ease-out", "ease"];
-
-/**
- * Functions that accept a color argument. This list can be manually edited.
- */
-exports.COLOR_TAKING_FUNCTIONS = ["linear-gradient", "-moz-linear-gradient",
-                                  "repeating-linear-gradient",
-                                  "-moz-repeating-linear-gradient", "radial-gradient",
-                                  "-moz-radial-gradient", "repeating-radial-gradient",
-                                  "-moz-repeating-radial-gradient", "drop-shadow"];
-
-/**
- * Functions that accept an angle argument. This list can be manually edited.
- */
-exports.ANGLE_TAKING_FUNCTIONS = ["linear-gradient", "-moz-linear-gradient",
-                                  "repeating-linear-gradient",
-                                  "-moz-repeating-linear-gradient", "rotate", "rotateX",
-                                  "rotateY", "rotateZ", "rotate3d", "skew", "skewX",
-                                  "skewY", "hue-rotate"];
-
-exports.BASIC_SHAPE_FUNCTIONS = ["polygon", "circle", "ellipse", "inset"];
-
-/**
  * The list of all CSS Pseudo Elements.
  *
  * This list can be updated with `mach devtools-css-db`.
  */
 exports.PSEUDO_ELEMENTS = db.PSEUDO_ELEMENTS;
 
 /**
  * A list of CSS Properties and their various characteristics. This is used on the
--- a/devtools/shared/fronts/css-properties.js
+++ b/devtools/shared/fronts/css-properties.js
@@ -153,17 +153,17 @@ CssProperties.prototype = {
    */
   isInherited(property) {
     return (this.properties[property] && this.properties[property].isInherited) ||
             isCssVariable(property);
   },
 
   /**
    * Checks if the property supports the given CSS type.
-   * CSS types should come from devtools/shared/css/properties-db.js' CSS_TYPES.
+   * CSS types should come from devtools/shared/css/constants.js' CSS_TYPES.
    *
    * @param {String} property The property to be checked.
    * @param {Number} type One of the type values from CSS_TYPES.
    * @return {Boolean}
    */
   supportsType(property, type) {
     return this.properties[property] && this.properties[property].supports.includes(type);
   },