Bug 1659589: Implement update method in stylesheets actor. r=ochameau,devtools-backward-compat-reviewers

Depends on D87046

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

devtools/client/styleeditor/StyleSheetEditor.jsm

@@ -490,7 +490,7 @@ StyleSheetEditor.prototype = {
     return sourceEditor.appendTo(inputElement).then(() => {
       sourceEditor.on("saveRequested", this.saveToFile);
 
-      if (this.styleSheet.update) {
+      if (!this.styleSheet.isOriginalSource) {
         sourceEditor.on("change", this.updateStyleSheet);
       }
 
@@ -598,7 +598,7 @@ StyleSheetEditor.prototype = {
   /**
    * Update live style sheet according to modifications.
    */
-  _updateStyleSheet: function() {
+  async _updateStyleSheet() {
     if (this.styleSheet.disabled) {
       // TODO: do we want to do this?
       return;
@@ -620,14 +620,24 @@ StyleSheetEditor.prototype = {
     }
 
     this._isUpdating = true;
-    this.styleSheet
-      .update(this._state.text, this.transitionsEnabled)
-      .then(() => {
-        // Clear any existing mappings from automatic CSS prettification
-        // because they were likely invalided by manually editing the stylesheet.
-        this._mappings = null;
-      })
-      .catch(console.error);
+
+    try {
+      const styleSheetsFront = await this._getStyleSheetsFront();
+      if (styleSheetsFront.traits.supportResourceRequests) {
+        await styleSheetsFront.update(
+          this.resourceId,
+          this._state.text,
+          this.transitionsEnabled
+        );
+      } else {
+        await this.styleSheet.update(this._state.text, this.transitionsEnabled);
+      }
+      // Clear any existing mappings from automatic CSS prettification
+      // because they were likely invalided by manually editing the stylesheet.
+      this._mappings = null;
+    } catch (e) {
+      console.error(e);
+    }
   },
 
   /**
@@ -819,15 +829,25 @@ StyleSheetEditor.prototype = {
    * file from disk and live update the stylesheet object with the contents.
    */
   updateLinkedStyleSheet: function() {
-    OS.File.read(this.linkedCSSFile).then(array => {
+    OS.File.read(this.linkedCSSFile).then(async array => {
       const decoder = new TextDecoder();
       const text = decoder.decode(array);
 
       // Ensure we don't re-fetch the text from the original source
       // actor when we're notified that the style sheet changed.
       this._isUpdating = true;
-      const relatedSheet = this.styleSheet.relatedStyleSheet;
-      relatedSheet.update(text, this.transitionsEnabled);
+
+      const styleSheetsFront = await this._getStyleSheetsFront();
+      if (styleSheetsFront.traits.supportResourceRequests) {
+        await styleSheetsFront.update(
+          this.resourceId,
+          text,
+          this.transitionsEnabled
+        );
+      } else {
+        const relatedSheet = this.styleSheet.relatedStyleSheet;
+        await relatedSheet.update(text, this.transitionsEnabled);
+      }
     }, this.markLinkedFileBroken);
   },
 

devtools/server/actors/stylesheets.js

@@ -914,6 +914,11 @@ var StyleSheetsActor = protocol.ActorClassWithSpec(styleSheetsSpec, {
     const actor = this._getStyleSheetActor(resourceId);
     return actor.getText();
   },
+
+  update(resourceId, text, transition) {
+    const actor = this._getStyleSheetActor(resourceId);
+    return actor.update(text, transition);
+  },
 });
 
 exports.StyleSheetsActor = StyleSheetsActor;

devtools/shared/specs/stylesheets.js

@@ -62,6 +62,7 @@ const styleSheetSpec = generateActorSpec({
         mediaRules: RetVal("nullable:array:mediarule"),
       },
     },
+    // Backward-compatibility: remove when FF81 hits release.
     update: {
       request: {
         text: Arg(0, "string"),
@@ -109,6 +110,14 @@ const styleSheetsSpec = generateActorSpec({
       request: { resourceId: Arg(0, "string") },
       response: { text: RetVal("longstring") },
     },
+    update: {
+      request: {
+        resourceId: Arg(0, "string"),
+        text: Arg(1, "string"),
+        transition: Arg(2, "boolean"),
+      },
+      response: {},
+    },
   },
 });