Bug 1674362 - [devtools] Extract PageStyle and StyleRule specs to individual files r=rcaliman,devtools-backward-compat-reviewers

Depends on D95297

After moving actors to individual files, we should also do the same with specs.
Both actors are using shared types, which are moved to a shared types file.

Differential Revision: https://phabricator.services.mozilla.com/D95298

devtools/client/fronts/styles.js

@@ -8,10 +8,8 @@ const {
   FrontClassWithSpec,
   registerFront,
 } = require("devtools/shared/protocol");
-const {
-  pageStyleSpec,
-  styleRuleSpec,
-} = require("devtools/shared/specs/styles");
+const { pageStyleSpec } = require("devtools/shared/specs/page-style");
+const { styleRuleSpec } = require("devtools/shared/specs/style-rule");
 const promise = require("promise");
 
 loader.lazyRequireGetter(

devtools/client/inspector/computed/computed.js

@@ -8,7 +8,7 @@ const promise = require("promise");
 const flags = require("devtools/shared/flags");
 const ToolDefinitions = require("devtools/client/definitions").Tools;
 const CssLogic = require("devtools/shared/inspector/css-logic");
-const { ELEMENT_STYLE } = require("devtools/shared/specs/styles");
+const { ELEMENT_STYLE } = require("devtools/shared/specs/style-rule");
 const OutputParser = require("devtools/client/shared/output-parser");
 const { PrefObserver } = require("devtools/client/shared/prefs");
 const { createChild } = require("devtools/client/inspector/shared/utils");

devtools/client/inspector/fonts/fonts.js

@@ -12,7 +12,7 @@ const {
 } = require("devtools/client/shared/vendor/react");
 const { Provider } = require("devtools/client/shared/vendor/react-redux");
 const { debounce } = require("devtools/shared/debounce");
-const { ELEMENT_STYLE } = require("devtools/shared/specs/styles");
+const { ELEMENT_STYLE } = require("devtools/shared/specs/style-rule");
 
 const FontsApp = createFactory(
   require("devtools/client/inspector/fonts/components/FontsApp")

devtools/client/inspector/rules/models/element-style.js

@@ -8,7 +8,7 @@ const Services = require("Services");
 const promise = require("promise");
 const Rule = require("devtools/client/inspector/rules/models/rule");
 const UserProperties = require("devtools/client/inspector/rules/models/user-properties");
-const { ELEMENT_STYLE } = require("devtools/shared/specs/styles");
+const { ELEMENT_STYLE } = require("devtools/shared/specs/style-rule");
 
 loader.lazyRequireGetter(
   this,

devtools/client/inspector/rules/models/rule.js

@@ -6,7 +6,7 @@
 
 const promise = require("promise");
 const CssLogic = require("devtools/shared/inspector/css-logic");
-const { ELEMENT_STYLE } = require("devtools/shared/specs/styles");
+const { ELEMENT_STYLE } = require("devtools/shared/specs/style-rule");
 const TextProperty = require("devtools/client/inspector/rules/models/text-property");
 const Services = require("Services");
 

devtools/client/inspector/rules/rules.js

@@ -9,7 +9,7 @@ const Services = require("Services");
 const flags = require("devtools/shared/flags");
 const { l10n } = require("devtools/shared/inspector/css-logic");
 const { PSEUDO_CLASSES } = require("devtools/shared/css/constants");
-const { ELEMENT_STYLE } = require("devtools/shared/specs/styles");
+const { ELEMENT_STYLE } = require("devtools/shared/specs/style-rule");
 const OutputParser = require("devtools/client/shared/output-parser");
 const { PrefObserver } = require("devtools/client/shared/prefs");
 const ElementStyle = require("devtools/client/inspector/rules/models/element-style");

devtools/client/inspector/rules/test/browser_rules_inherited-properties_03.js

@@ -5,7 +5,7 @@
 
 // Check that inline inherited properties appear in the nested element.
 
-var { ELEMENT_STYLE } = require("devtools/shared/specs/styles");
+var { ELEMENT_STYLE } = require("devtools/shared/specs/style-rule");
 
 const TEST_URI = `
   <div id="test2" style="color: red">

devtools/client/inspector/rules/views/rule-editor.js

@@ -6,7 +6,7 @@
 
 const { l10n } = require("devtools/shared/inspector/css-logic");
 const { PSEUDO_CLASSES } = require("devtools/shared/css/constants");
-const { ELEMENT_STYLE } = require("devtools/shared/specs/styles");
+const { ELEMENT_STYLE } = require("devtools/shared/specs/style-rule");
 const Rule = require("devtools/client/inspector/rules/models/rule");
 const {
   InplaceEditor,

devtools/server/actors/page-style.js

@@ -11,10 +11,8 @@ const { LongStringActor } = require("devtools/server/actors/string");
 const InspectorUtils = require("InspectorUtils");
 const TrackChangeEmitter = require("devtools/server/actors/utils/track-change-emitter");
 
-const {
-  pageStyleSpec,
-  ELEMENT_STYLE,
-} = require("devtools/shared/specs/styles");
+const { pageStyleSpec } = require("devtools/shared/specs/page-style");
+const { ELEMENT_STYLE } = require("devtools/shared/specs/style-rule");
 
 const {
   TYPES,

devtools/server/actors/style-rule.js

@@ -17,7 +17,7 @@ const {
 const {
   styleRuleSpec,
   ELEMENT_STYLE,
-} = require("devtools/shared/specs/styles");
+} = require("devtools/shared/specs/style-rule");
 
 loader.lazyRequireGetter(
   this,

devtools/shared/specs/index.js

@@ -164,6 +164,11 @@ const Types = (exports.__TypesForTests = [
     spec: "devtools/shared/specs/object",
     front: null,
   },
+  {
+    types: ["pagestyle"],
+    spec: "devtools/shared/specs/page-style",
+    front: "devtools/client/fronts/styles",
+  },
   {
     types: ["perf"],
     spec: "devtools/shared/specs/perf",
@@ -243,8 +248,8 @@ const Types = (exports.__TypesForTests = [
     front: "devtools/client/fronts/string",
   },
   {
-    types: ["pagestyle", "domstylerule"],
-    spec: "devtools/shared/specs/styles",
+    types: ["domstylerule"],
+    spec: "devtools/shared/specs/style-rule",
     front: "devtools/client/fronts/styles",
   },
   {

devtools/shared/specs/moz.build

@@ -7,6 +7,7 @@
 DIRS += [
     "addon",
     "descriptors",
+    "style",
     "targets",
     "worker",
 ]
@@ -36,6 +37,7 @@ DevToolsModules(
     "network.js",
     "node.js",
     "object.js",
+    "page-style.js",
     "perf.js",
     "performance-recording.js",
     "performance.js",
@@ -49,7 +51,7 @@ DevToolsModules(
     "stacktraces.js",
     "storage.js",
     "string.js",
-    "styles.js",
+    "style-rule.js",
     "stylesheets.js",
     "symbol-iterator.js",
     "symbol.js",

devtools/shared/specs/page-style.js

@@ -0,0 +1,132 @@
+/* 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";
+
+const {
+  Arg,
+  Option,
+  RetVal,
+  generateActorSpec,
+  types,
+} = require("devtools/shared/protocol");
+
+// Load the shared types for style actors
+require("devtools/shared/specs/style/style-types");
+
+// Preload the style-rule spec to make sure that domstylerule is fully defined.
+// The inspector still uses actorHasMethod, which relies on dumping the protocol
+// specs. This can be removed when actorHasMethod is removed.
+require("devtools/shared/specs/style-rule");
+
+const pageStyleSpec = generateActorSpec({
+  typeName: "pagestyle",
+
+  events: {
+    "stylesheet-updated": {
+      type: "styleSheetUpdated",
+    },
+  },
+
+  methods: {
+    getComputed: {
+      request: {
+        node: Arg(0, "domnode"),
+        markMatched: Option(1, "boolean"),
+        onlyMatched: Option(1, "boolean"),
+        filter: Option(1, "string"),
+        filterProperties: Option(1, "nullable:array:string"),
+      },
+      response: {
+        computed: RetVal("json"),
+      },
+    },
+    getAllUsedFontFaces: {
+      request: {
+        includePreviews: Option(0, "boolean"),
+        includeVariations: Option(1, "boolean"),
+        previewText: Option(0, "string"),
+        previewFontSize: Option(0, "string"),
+        previewFillStyle: Option(0, "string"),
+      },
+      response: {
+        fontFaces: RetVal("array:fontface"),
+      },
+    },
+    getUsedFontFaces: {
+      request: {
+        node: Arg(0, "domnode"),
+        includePreviews: Option(1, "boolean"),
+        includeVariations: Option(1, "boolean"),
+        previewText: Option(1, "string"),
+        previewFontSize: Option(1, "string"),
+        previewFillStyle: Option(1, "string"),
+      },
+      response: {
+        fontFaces: RetVal("array:fontface"),
+      },
+    },
+    getMatchedSelectors: {
+      request: {
+        node: Arg(0, "domnode"),
+        property: Arg(1, "string"),
+        filter: Option(2, "string"),
+      },
+      response: RetVal(
+        types.addDictType("matchedselectorresponse", {
+          rules: "array:domstylerule",
+          sheets: "array:stylesheet",
+          matched: "array:matchedselector",
+        })
+      ),
+    },
+    getRule: {
+      request: {
+        ruleId: Arg(0, "string"),
+      },
+      response: {
+        rule: RetVal("nullable:domstylerule"),
+      },
+    },
+    getApplied: {
+      request: {
+        node: Arg(0, "domnode"),
+        inherited: Option(1, "boolean"),
+        matchedSelectors: Option(1, "boolean"),
+        skipPseudo: Option(1, "boolean"),
+        filter: Option(1, "string"),
+      },
+      response: RetVal("appliedStylesReturn"),
+    },
+    isPositionEditable: {
+      request: { node: Arg(0, "domnode") },
+      response: { value: RetVal("boolean") },
+    },
+    getLayout: {
+      request: {
+        node: Arg(0, "domnode"),
+        autoMargins: Option(1, "boolean"),
+      },
+      response: RetVal("json"),
+    },
+    addNewRule: {
+      request: {
+        node: Arg(0, "domnode"),
+        pseudoClasses: Arg(1, "nullable:array:string"),
+      },
+      response: RetVal("appliedStylesReturn"),
+    },
+    getAttributesInOwnerDocument: {
+      request: {
+        search: Arg(0, "string"),
+        attributeType: Arg(1, "string"),
+        node: Arg(2, "nullable:domnode"),
+      },
+      response: {
+        attributes: RetVal("array:string"),
+      },
+    },
+  },
+});
+
+exports.pageStyleSpec = pageStyleSpec;

devtools/shared/specs/style-rule.js

@@ -0,0 +1,60 @@
+/* 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";
+
+const { Arg, RetVal, generateActorSpec } = require("devtools/shared/protocol");
+
+// Load the shared types for style actors
+require("devtools/shared/specs/style/style-types");
+
+const styleRuleSpec = generateActorSpec({
+  typeName: "domstylerule",
+
+  events: {
+    "location-changed": {
+      type: "locationChanged",
+      line: Arg(0, "number"),
+      column: Arg(1, "number"),
+    },
+    "rule-updated": {
+      type: "ruleUpdated",
+      rule: Arg(0, "domstylerule"),
+    },
+  },
+
+  methods: {
+    getRuleText: {
+      response: {
+        text: RetVal("string"),
+      },
+    },
+    setRuleText: {
+      request: {
+        newText: Arg(0, "string"),
+        modifications: Arg(1, "array:json"),
+      },
+      response: { rule: RetVal("domstylerule") },
+    },
+    modifyProperties: {
+      request: { modifications: Arg(0, "array:json") },
+      response: { rule: RetVal("domstylerule") },
+    },
+    modifySelector: {
+      request: {
+        node: Arg(0, "domnode"),
+        value: Arg(1, "string"),
+        editAuthored: Arg(2, "boolean"),
+      },
+      response: RetVal("modifiedStylesReturn"),
+    },
+  },
+});
+
+exports.styleRuleSpec = styleRuleSpec;
+
+// The PageStyle actor flattens the DOM CSS objects a little bit, merging
+// Rules and their Styles into one actor.  For elements (which have a style
+// but no associated rule) we fake a rule with the following style id.
+const ELEMENT_STYLE = 100;
+exports.ELEMENT_STYLE = ELEMENT_STYLE;

devtools/shared/specs/style/moz.build

@@ -0,0 +1,9 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+
+DevToolsModules(
+    "style-types.js",
+)

devtools/shared/specs/style/style-types.js

@@ -0,0 +1,85 @@
+/* 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";
+
+const { RetVal, types } = require("devtools/shared/protocol");
+
+// Predeclare the domstylerule actor type
+types.addActorType("domstylerule");
+
+/**
+ * DOM Nodes returned by the style actor will be owned by the DOM walker
+ * for the connection.
+ */
+types.addLifetime("walker", "walker");
+
+/**
+ * When asking for the styles applied to a node, we return a list of
+ * appliedstyle json objects that lists the rules that apply to the node
+ * and which element they were inherited from (if any).
+ *
+ * Note appliedstyle only sends the list of actorIDs and is not a valid return
+ * value on its own. appliedstyle should be returned with the actual list of
+ * StyleRuleActor and StyleSheetActor. See appliedStylesReturn.
+ */
+types.addDictType("appliedstyle", {
+  rule: "domstylerule#actorid",
+  inherited: "nullable:domnode#actorid",
+  keyframes: "nullable:domstylerule#actorid",
+});
+
+types.addDictType("matchedselector", {
+  rule: "domstylerule#actorid",
+  selector: "string",
+  value: "string",
+  status: "number",
+});
+
+types.addDictType("appliedStylesReturn", {
+  entries: "array:appliedstyle",
+  rules: "array:domstylerule",
+  sheets: "array:stylesheet",
+});
+
+types.addDictType("modifiedStylesReturn", {
+  isMatching: RetVal("boolean"),
+  ruleProps: RetVal("nullable:appliedStylesReturn"),
+});
+
+types.addDictType("fontpreview", {
+  data: "nullable:longstring",
+  size: "json",
+});
+
+types.addDictType("fontvariationaxis", {
+  tag: "string",
+  name: "string",
+  minValue: "number",
+  maxValue: "number",
+  defaultValue: "number",
+});
+
+types.addDictType("fontvariationinstancevalue", {
+  axis: "string",
+  value: "number",
+});
+
+types.addDictType("fontvariationinstance", {
+  name: "string",
+  values: "array:fontvariationinstancevalue",
+});
+
+types.addDictType("fontface", {
+  name: "string",
+  CSSFamilyName: "string",
+  rule: "nullable:domstylerule",
+  srcIndex: "number",
+  URI: "string",
+  format: "string",
+  preview: "nullable:fontpreview",
+  localName: "string",
+  metadata: "string",
+  variationAxes: "array:fontvariationaxis",
+  variationInstances: "array:fontvariationinstance",
+});

devtools/shared/specs/styles.js

@@ -1,254 +0,0 @@
-/* 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";
-
-const {
-  Arg,
-  Option,
-  RetVal,
-  generateActorSpec,
-  types,
-} = require("devtools/shared/protocol");
-
-// Predeclare the domstylerule actor type
-types.addActorType("domstylerule");
-
-/**
- * DOM Nodes returned by the style actor will be owned by the DOM walker
- * for the connection.
- */
-types.addLifetime("walker", "walker");
-
-/**
- * When asking for the styles applied to a node, we return a list of
- * appliedstyle json objects that lists the rules that apply to the node
- * and which element they were inherited from (if any).
- *
- * Note appliedstyle only sends the list of actorIDs and is not a valid return
- * value on its own. appliedstyle should be returned with the actual list of
- * StyleRuleActor and StyleSheetActor. See appliedStylesReturn.
- */
-types.addDictType("appliedstyle", {
-  rule: "domstylerule#actorid",
-  inherited: "nullable:domnode#actorid",
-  keyframes: "nullable:domstylerule#actorid",
-});
-
-types.addDictType("matchedselector", {
-  rule: "domstylerule#actorid",
-  selector: "string",
-  value: "string",
-  status: "number",
-});
-
-types.addDictType("appliedStylesReturn", {
-  entries: "array:appliedstyle",
-  rules: "array:domstylerule",
-  sheets: "array:stylesheet",
-});
-
-types.addDictType("modifiedStylesReturn", {
-  isMatching: RetVal("boolean"),
-  ruleProps: RetVal("nullable:appliedStylesReturn"),
-});
-
-types.addDictType("fontpreview", {
-  data: "nullable:longstring",
-  size: "json",
-});
-
-types.addDictType("fontvariationaxis", {
-  tag: "string",
-  name: "string",
-  minValue: "number",
-  maxValue: "number",
-  defaultValue: "number",
-});
-
-types.addDictType("fontvariationinstancevalue", {
-  axis: "string",
-  value: "number",
-});
-
-types.addDictType("fontvariationinstance", {
-  name: "string",
-  values: "array:fontvariationinstancevalue",
-});
-
-types.addDictType("fontface", {
-  name: "string",
-  CSSFamilyName: "string",
-  rule: "nullable:domstylerule",
-  srcIndex: "number",
-  URI: "string",
-  format: "string",
-  preview: "nullable:fontpreview",
-  localName: "string",
-  metadata: "string",
-  variationAxes: "array:fontvariationaxis",
-  variationInstances: "array:fontvariationinstance",
-});
-
-const pageStyleSpec = generateActorSpec({
-  typeName: "pagestyle",
-
-  events: {
-    "stylesheet-updated": {
-      type: "styleSheetUpdated",
-    },
-  },
-
-  methods: {
-    getComputed: {
-      request: {
-        node: Arg(0, "domnode"),
-        markMatched: Option(1, "boolean"),
-        onlyMatched: Option(1, "boolean"),
-        filter: Option(1, "string"),
-        filterProperties: Option(1, "nullable:array:string"),
-      },
-      response: {
-        computed: RetVal("json"),
-      },
-    },
-    getAllUsedFontFaces: {
-      request: {
-        includePreviews: Option(0, "boolean"),
-        includeVariations: Option(1, "boolean"),
-        previewText: Option(0, "string"),
-        previewFontSize: Option(0, "string"),
-        previewFillStyle: Option(0, "string"),
-      },
-      response: {
-        fontFaces: RetVal("array:fontface"),
-      },
-    },
-    getUsedFontFaces: {
-      request: {
-        node: Arg(0, "domnode"),
-        includePreviews: Option(1, "boolean"),
-        includeVariations: Option(1, "boolean"),
-        previewText: Option(1, "string"),
-        previewFontSize: Option(1, "string"),
-        previewFillStyle: Option(1, "string"),
-      },
-      response: {
-        fontFaces: RetVal("array:fontface"),
-      },
-    },
-    getMatchedSelectors: {
-      request: {
-        node: Arg(0, "domnode"),
-        property: Arg(1, "string"),
-        filter: Option(2, "string"),
-      },
-      response: RetVal(
-        types.addDictType("matchedselectorresponse", {
-          rules: "array:domstylerule",
-          sheets: "array:stylesheet",
-          matched: "array:matchedselector",
-        })
-      ),
-    },
-    getRule: {
-      request: {
-        ruleId: Arg(0, "string"),
-      },
-      response: {
-        rule: RetVal("nullable:domstylerule"),
-      },
-    },
-    getApplied: {
-      request: {
-        node: Arg(0, "domnode"),
-        inherited: Option(1, "boolean"),
-        matchedSelectors: Option(1, "boolean"),
-        skipPseudo: Option(1, "boolean"),
-        filter: Option(1, "string"),
-      },
-      response: RetVal("appliedStylesReturn"),
-    },
-    isPositionEditable: {
-      request: { node: Arg(0, "domnode") },
-      response: { value: RetVal("boolean") },
-    },
-    getLayout: {
-      request: {
-        node: Arg(0, "domnode"),
-        autoMargins: Option(1, "boolean"),
-      },
-      response: RetVal("json"),
-    },
-    addNewRule: {
-      request: {
-        node: Arg(0, "domnode"),
-        pseudoClasses: Arg(1, "nullable:array:string"),
-      },
-      response: RetVal("appliedStylesReturn"),
-    },
-    getAttributesInOwnerDocument: {
-      request: {
-        search: Arg(0, "string"),
-        attributeType: Arg(1, "string"),
-        node: Arg(2, "nullable:domnode"),
-      },
-      response: {
-        attributes: RetVal("array:string"),
-      },
-    },
-  },
-});
-
-exports.pageStyleSpec = pageStyleSpec;
-
-const styleRuleSpec = generateActorSpec({
-  typeName: "domstylerule",
-
-  events: {
-    "location-changed": {
-      type: "locationChanged",
-      line: Arg(0, "number"),
-      column: Arg(1, "number"),
-    },
-    "rule-updated": {
-      type: "ruleUpdated",
-      rule: Arg(0, "domstylerule"),
-    },
-  },
-
-  methods: {
-    getRuleText: {
-      response: {
-        text: RetVal("string"),
-      },
-    },
-    setRuleText: {
-      request: {
-        newText: Arg(0, "string"),
-        modifications: Arg(1, "array:json"),
-      },
-      response: { rule: RetVal("domstylerule") },
-    },
-    modifyProperties: {
-      request: { modifications: Arg(0, "array:json") },
-      response: { rule: RetVal("domstylerule") },
-    },
-    modifySelector: {
-      request: {
-        node: Arg(0, "domnode"),
-        value: Arg(1, "string"),
-        editAuthored: Arg(2, "boolean"),
-      },
-      response: RetVal("modifiedStylesReturn"),
-    },
-  },
-});
-
-exports.styleRuleSpec = styleRuleSpec;
-
-// The PageStyle actor flattens the DOM CSS objects a little bit, merging
-// Rules and their Styles into one actor.  For elements (which have a style
-// but no associated rule) we fake a rule with the following style id.
-const ELEMENT_STYLE = 100;
-exports.ELEMENT_STYLE = ELEMENT_STYLE;