Bug 1657537 - Part 1 - Move the ISSUE_TYPE property to devtools/shared/constants.js r=mtigley

Most of the client side imports from the MDNCompatibility library is to access the MDNCompatibility.ISSUE_TYPE property. This patch moves the property into devtools/shared/constants.js from where it can be accessed on both the client and server side. Differential Revision: https://phabricator.services.mozilla.com/D86519
2020-09-15 14:26:23 +00:00 · 2020-09-15 14:26:23 +00:00 · 4825b53af6
--- a/devtools/client/inspector/compatibility/test/browser/browser_compatibility_css-property_issue.js
+++ b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_css-property_issue.js
@ -5,7 +5,7 @@

 // Test whether the deprecated CSS property is shown as issue correctly or not.

-const MDNCompatibility = require("devtools/shared/compatibility/MDNCompatibility");
+const { COMPATIBILITY_ISSUE_TYPE } = require("devtools/shared/constants");

 const TEST_URI = `
  <style>
@ -25,14 +25,14 @@ const TEST_URI = `

 const TEST_DATA_SELECTED = [
  {
-    type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY,
+    type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
    property: "border-block-color",
    url: "https://developer.mozilla.org/docs/Web/CSS/border-block-color",
    deprecated: false,
    experimental: false,
  },
  {
-    type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY_ALIASES,
+    type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY_ALIASES,
    property: "user-modify",
    url: "https://developer.mozilla.org/docs/Web/CSS/user-modify",
    aliases: ["user-modify"],
@ -44,7 +44,7 @@ const TEST_DATA_SELECTED = [
 const TEST_DATA_ALL = [
  ...TEST_DATA_SELECTED,
  {
-    type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY,
+    type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
    property: "font-variant-alternates",
    url: "https://developer.mozilla.org/docs/Web/CSS/font-variant-alternates",
    deprecated: true,
--- a/devtools/client/inspector/compatibility/test/browser/browser_compatibility_dynamic_js-attribute-change.js
+++ b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_dynamic_js-attribute-change.js
@ -3,7 +3,7 @@

 "use strict";

-const MDNCompatibility = require("devtools/shared/compatibility/MDNCompatibility");
+const { COMPATIBILITY_ISSUE_TYPE } = require("devtools/shared/constants");

 const {
  COMPATIBILITY_UPDATE_NODE_COMPLETE,
@ -12,7 +12,7 @@ const {
 // Test the behavior rules are dynamically added

 const ISSUE_CURSOR = {
-  type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY,
+  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
  property: "cursor",
  url: "https://developer.mozilla.org/docs/Web/CSS/cursor",
  deprecated: false,
@ -20,7 +20,7 @@ const ISSUE_CURSOR = {
 };

 const ISSUE_HYPHENS = {
-  type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY_ALIASES,
+  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY_ALIASES,
  aliases: ["hyphens"],
  property: "hyphens",
  url: "https://developer.mozilla.org/docs/Web/CSS/hyphens",
--- a/devtools/client/inspector/compatibility/test/browser/browser_compatibility_dynamic_js-dom-change.js
+++ b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_dynamic_js-dom-change.js
@ -3,7 +3,7 @@

 "use strict";

-const MDNCompatibility = require("devtools/shared/compatibility/MDNCompatibility");
+const { COMPATIBILITY_ISSUE_TYPE } = require("devtools/shared/constants");

 const {
  COMPATIBILITY_APPEND_NODE_COMPLETE,
@ -13,7 +13,7 @@ const {
 // Test the behavior rules are dynamically added

 const ISSUE_CURSOR = {
-  type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY,
+  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
  property: "cursor",
  url: "https://developer.mozilla.org/docs/Web/CSS/cursor",
  deprecated: false,
@ -21,7 +21,7 @@ const ISSUE_CURSOR = {
 };

 const ISSUE_HYPHENS = {
-  type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY_ALIASES,
+  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY_ALIASES,
  aliases: ["hyphens"],
  property: "hyphens",
  url: "https://developer.mozilla.org/docs/Web/CSS/hyphens",
--- a/devtools/client/inspector/compatibility/test/browser/browser_compatibility_dynamic_markup-dom-change.js
+++ b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_dynamic_markup-dom-change.js
@ -3,7 +3,7 @@

 "use strict";

-const MDNCompatibility = require("devtools/shared/compatibility/MDNCompatibility");
+const { COMPATIBILITY_ISSUE_TYPE } = require("devtools/shared/constants");

 const {
  COMPATIBILITY_APPEND_NODE_COMPLETE,
@ -13,7 +13,7 @@ const {
 // Test the behavior rules are dynamically added

 const ISSUE_CURSOR = {
-  type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY,
+  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
  property: "cursor",
  url: "https://developer.mozilla.org/docs/Web/CSS/cursor",
  deprecated: false,
@ -21,7 +21,7 @@ const ISSUE_CURSOR = {
 };

 const ISSUE_HYPHENS = {
-  type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY_ALIASES,
+  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY_ALIASES,
  aliases: ["hyphens"],
  property: "hyphens",
  url: "https://developer.mozilla.org/docs/Web/CSS/hyphens",
--- a/devtools/client/inspector/compatibility/test/browser/browser_compatibility_dynamic_ruleview-attribute-change.js
+++ b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_dynamic_ruleview-attribute-change.js
@ -3,7 +3,7 @@

 "use strict";

-const MDNCompatibility = require("devtools/shared/compatibility/MDNCompatibility");
+const { COMPATIBILITY_ISSUE_TYPE } = require("devtools/shared/constants");

 const {
  COMPATIBILITY_UPDATE_NODE_COMPLETE,
@ -12,7 +12,7 @@ const {
 // Test the behavior rules are dynamically added

 const ISSUE_CURSOR = {
-  type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY,
+  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
  property: "cursor",
  url: "https://developer.mozilla.org/docs/Web/CSS/cursor",
  deprecated: false,
@ -20,7 +20,7 @@ const ISSUE_CURSOR = {
 };

 const ISSUE_HYPHENS = {
-  type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY_ALIASES,
+  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY_ALIASES,
  aliases: ["hyphens"],
  property: "hyphens",
  url: "https://developer.mozilla.org/docs/Web/CSS/hyphens",
--- a/devtools/client/inspector/compatibility/test/node/components/components-compatibility-IssueItem.test.js
+++ b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-IssueItem.test.js
@ -10,7 +10,7 @@
 const { shallow } = require("enzyme");
 const React = require("react");

-const MDNCompatibility = require("devtools/shared/compatibility/MDNCompatibility");
+const { COMPATIBILITY_ISSUE_TYPE } = require("devtools/shared/constants");
 const IssueItem = React.createFactory(
  require("devtools/client/inspector/compatibility/components/IssueItem")
 );
@ -19,7 +19,7 @@ describe("IssueItem component", () => {
  it("renders an unsupported issue of CSS property", () => {
    const targetComponent = shallow(
      IssueItem({
-        type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY,
+        type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
        property: "test-property",
        url: "test-url",
        deprecated: false,
@ -36,7 +36,7 @@ describe("IssueItem component", () => {
  it("renders a deprecated issue of CSS property", () => {
    const targetComponent = shallow(
      IssueItem({
-        type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY,
+        type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
        property: "test-property",
        url: "test-url",
        deprecated: true,
@ -51,7 +51,7 @@ describe("IssueItem component", () => {
  it("renders an experimental issue of CSS property", () => {
    const targetComponent = shallow(
      IssueItem({
-        type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY,
+        type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
        property: "test-property",
        url: "test-url",
        deprecated: false,
@ -66,7 +66,7 @@ describe("IssueItem component", () => {
  it("renders a prefixNeeded issue of CSS property", () => {
    const targetComponent = shallow(
      IssueItem({
-        type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY,
+        type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
        property: "test-property",
        url: "test-url",
        aliases: ["test-alias-1", "test-alias-2"],
@ -82,7 +82,7 @@ describe("IssueItem component", () => {
  it("renders an issue which has deprecated and experimental", () => {
    const targetComponent = shallow(
      IssueItem({
-        type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY,
+        type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
        property: "test-property",
        url: "test-url",
        aliases: ["test-alias-1", "test-alias-2"],
@ -98,7 +98,7 @@ describe("IssueItem component", () => {
  it("renders an issue which has deprecated and prefixNeeded", () => {
    const targetComponent = shallow(
      IssueItem({
-        type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY,
+        type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
        property: "test-property",
        url: "test-url",
        aliases: ["test-alias-1", "test-alias-2"],
@ -114,7 +114,7 @@ describe("IssueItem component", () => {
  it("renders an issue which has experimental and prefixNeeded", () => {
    const targetComponent = shallow(
      IssueItem({
-        type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY,
+        type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
        property: "test-property",
        url: "test-url",
        aliases: ["test-alias-1", "test-alias-2"],
@ -130,7 +130,7 @@ describe("IssueItem component", () => {
  it("renders an issue which has deprecated, experimental and prefixNeeded", () => {
    const targetComponent = shallow(
      IssueItem({
-        type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY,
+        type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
        property: "test-property",
        url: "test-url",
        aliases: ["test-alias-1", "test-alias-2"],
@ -146,7 +146,7 @@ describe("IssueItem component", () => {
  it("renders an issue which has nodes that caused this issue", () => {
    const targetComponent = shallow(
      IssueItem({
-        type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY,
+        type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
        property: "test-property",
        url: "test-url",
        unsupportedBrowsers: [],
--- a/devtools/client/inspector/compatibility/test/node/components/components-compatibility-IssueList.test.js
+++ b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-IssueList.test.js
@ -10,7 +10,7 @@
 const { shallow } = require("enzyme");
 const React = require("react");

-const MDNCompatibility = require("devtools/shared/compatibility/MDNCompatibility");
+const { COMPATIBILITY_ISSUE_TYPE } = require("devtools/shared/constants");
 const IssueList = React.createFactory(
  require("devtools/client/inspector/compatibility/components/IssueList")
 );
@ -21,7 +21,7 @@ describe("IssueList component", () => {
      IssueList({
        issues: [
          {
-            type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY,
+            type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
            property: "border-block-color",
            url:
              "https://developer.mozilla.org/docs/Web/CSS/border-block-color",
@ -30,7 +30,7 @@ describe("IssueList component", () => {
            unsupportedBrowsers: [],
          },
          {
-            type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY_ALIASES,
+            type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY_ALIASES,
            property: "user-modify",
            url: "https://developer.mozilla.org/docs/Web/CSS/user-modify",
            aliases: ["user-modify"],
--- a/devtools/client/inspector/compatibility/test/node/components/components-compatibility-IssuePane.test.js
+++ b/devtools/client/inspector/compatibility/test/node/components/components-compatibility-IssuePane.test.js
@ -10,7 +10,7 @@
 const { shallow } = require("enzyme");
 const React = require("react");

-const MDNCompatibility = require("devtools/shared/compatibility/MDNCompatibility");
+const { COMPATIBILITY_ISSUE_TYPE } = require("devtools/shared/constants");
 const IssuePane = React.createFactory(
  require("devtools/client/inspector/compatibility/components/IssuePane")
 );
@ -26,7 +26,7 @@ describe("IssuePane component", () => {
      IssuePane({
        issues: [
          {
-            type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY,
+            type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
            property: "border-block-color",
            url:
              "https://developer.mozilla.org/docs/Web/CSS/border-block-color",
@ -35,7 +35,7 @@ describe("IssuePane component", () => {
            unsupportedBrowsers: [],
          },
          {
-            type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY_ALIASES,
+            type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY_ALIASES,
            property: "user-modify",
            url: "https://developer.mozilla.org/docs/Web/CSS/user-modify",
            aliases: ["user-modify"],
--- a/devtools/client/inspector/compatibility/types.js
+++ b/devtools/client/inspector/compatibility/types.js
@ -25,7 +25,7 @@ const browser = {
 const node = PropTypes.object;

 const issue = {
-  // Type of this issue. The type should be one of MDNCompatibility.ISSUE_TYPE.
+  // Type of this issue. The type should be one of COMPATIBILITY_ISSUE_TYPE.
  type: PropTypes.string.isRequired,
  // The CSS property which caused this issue.
  property: PropTypes.string.isRequired,
--- a/devtools/server/tests/browser/browser_compatibility_cssIssues.js
+++ b/devtools/server/tests/browser/browser_compatibility_cssIssues.js
@ -5,7 +5,7 @@

 // Check the output of getNodeCssIssues

-const MDNCompatibility = require("devtools/shared/compatibility/MDNCompatibility");
+const { COMPATIBILITY_ISSUE_TYPE } = require("devtools/shared/constants");
 const URL = MAIN_DOMAIN + "doc_compatibility.html";

 const CHROME_81 = {
@ -66,7 +66,7 @@ const TARGET_BROWSERS = [
 ];

 const ISSUE_USER_SELECT = {
-  type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY_ALIASES,
+  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY_ALIASES,
  property: "user-select",
  aliases: ["-moz-user-select"],
  url: "https://developer.mozilla.org/docs/Web/CSS/user-select",
@ -83,7 +83,7 @@ const ISSUE_USER_SELECT = {
 };

 const ISSUE_CLIP = {
-  type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY,
+  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
  property: "clip",
  url: "https://developer.mozilla.org/docs/Web/CSS/clip",
  deprecated: true,
--- a/devtools/shared/compatibility/MDNCompatibility.js
+++ b/devtools/shared/compatibility/MDNCompatibility.js
@ -12,20 +12,13 @@ const _SUPPORT_STATE = {
  UNSUPPORTED_PREFIX_NEEDED: "UNSUPPORTED_PREFIX_NEEDED",
 };

-const _ISSUE_TYPE = {
-  CSS_PROPERTY: "CSS_PROPERTY",
-  CSS_PROPERTY_ALIASES: "CSS_PROPERTY_ALIASES",
-};
+const { COMPATIBILITY_ISSUE_TYPE } = require("devtools/shared/constants");

 /**
 * A class with methods used to query the MDN compatibility data for CSS properties and
 * HTML nodes and attributes for specific browsers and versions.
 */
 class MDNCompatibility {
-  static get ISSUE_TYPE() {
-    return _ISSUE_TYPE;
-  }
-
  /**
   * Constructor.
   *
@ -491,8 +484,8 @@ class MDNCompatibility {
      }

      const type = summary.aliases
-        ? _ISSUE_TYPE.CSS_PROPERTY_ALIASES
-        : _ISSUE_TYPE.CSS_PROPERTY;
+        ? COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY_ALIASES
+        : COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY;
      issues.push(this._toIssue(summary, type));
    }

--- a/devtools/shared/compatibility/test/xpcshell/test_mdn-compatibility.js
+++ b/devtools/shared/compatibility/test/xpcshell/test_mdn-compatibility.js
@ -4,6 +4,7 @@

 // Test for the MDN compatibility diagnosis module.

+const { COMPATIBILITY_ISSUE_TYPE } = require("devtools/shared/constants");
 const MDNCompatibility = require("devtools/shared/compatibility/MDNCompatibility");
 const cssPropertiesCompatData = require("devtools/shared/compatibility/dataset/css-properties.json");

@ -53,7 +54,7 @@ const TEST_DATA = [
    browsers: [FIREFOX_1],
    expectedIssues: [
      {
-        type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY,
+        type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
        property: "grid-column",
        url: "https://developer.mozilla.org/docs/Web/CSS/grid-column",
        deprecated: false,
@ -74,7 +75,7 @@ const TEST_DATA = [
    browsers: [FIREFOX_69],
    expectedIssues: [
      {
-        type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY,
+        type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
        property: "clip",
        url: "https://developer.mozilla.org/docs/Web/CSS/clip",
        deprecated: true,
@ -89,7 +90,7 @@ const TEST_DATA = [
    browsers: [FIREFOX_1],
    expectedIssues: [
      {
-        type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY,
+        type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
        property: "font-variant-alternates",
        url:
          "https://developer.mozilla.org/docs/Web/CSS/font-variant-alternates",
@ -106,7 +107,7 @@ const TEST_DATA = [
    browsers: [FIREFOX_69, SAFARI_13],
    expectedIssues: [
      {
-        type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY_ALIASES,
+        type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY_ALIASES,
        property: "user-select",
        aliases: ["-moz-user-select"],
        url: "https://developer.mozilla.org/docs/Web/CSS/user-select",
@ -127,7 +128,7 @@ const TEST_DATA = [
    browsers: [FIREFOX_ANDROID_1, FIREFOX_69, SAFARI_13],
    expectedIssues: [
      {
-        type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY_ALIASES,
+        type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY_ALIASES,
        property: "user-select",
        aliases: ["-moz-user-select", "-webkit-user-select"],
        url: "https://developer.mozilla.org/docs/Web/CSS/user-select",
@ -153,7 +154,7 @@ const TEST_DATA = [
    browsers: [FIREFOX_1, FIREFOX_60, FIREFOX_69],
    expectedIssues: [
      {
-        type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY,
+        type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
        property: "-moz-binding",
        url: "https://developer.mozilla.org/docs/Web/CSS/-moz-binding",
        deprecated: true,
--- a/devtools/shared/constants.js
+++ b/devtools/shared/constants.js
@ -101,6 +101,13 @@ const SIMULATION_TYPE = {
  CONTRAST_LOSS: "CONTRAST_LOSS",
 };

+/* Compatibility Panel ====================================================== */
+
+const COMPATIBILITY_ISSUE_TYPE = {
+  CSS_PROPERTY: "CSS_PROPERTY",
+  CSS_PROPERTY_ALIASES: "CSS_PROPERTY_ALIASES",
+};
+
 /* WebConsole Panel ====================================================== */

 const MESSAGE_CATEGORY = {
@ -114,5 +121,6 @@ module.exports = {
    SCORES,
    SIMULATION_TYPE,
  },
+  COMPATIBILITY_ISSUE_TYPE,
  MESSAGE_CATEGORY,
 };