diff --git a/devtools/server/actors/styleeditor.js b/devtools/server/actors/styleeditor.js
index 92c718b8adbf..67b5cc66e3c7 100644
--- a/devtools/server/actors/styleeditor.js
+++ b/devtools/server/actors/styleeditor.js
@@ -17,6 +17,8 @@ const protocol = require("devtools/shared/protocol");
 const {Arg, Option, method, RetVal, types} = protocol;
 const {LongStringActor, ShortLongString} = require("devtools/server/actors/string");
 const {fetch} = require("devtools/shared/DevToolsUtils");
+const {OldStyleSheetFront} = require("devtools/shared/fronts/styleeditor");
+const {oldStyleSheetSpec} = require("devtools/shared/specs/styleeditor");
 
 loader.lazyGetter(this, "CssLogic", () => require("devtools/shared/inspector/css-logic").CssLogic);
 
@@ -32,28 +34,8 @@ transition-property: all !important;\
 
 var LOAD_ERROR = "error-load";
 
-/**
- * A StyleSheetActor represents a stylesheet on the server.
- */
-var OldStyleSheetActor = protocol.ActorClass({
-  typeName: "old-stylesheet",
-
-  events: {
-    "property-change" : {
-      type: "propertyChange",
-      property: Arg(0, "string"),
-      value: Arg(1, "json")
-    },
-    "source-load" : {
-      type: "sourceLoad",
-      source: Arg(0, "string")
-    },
-    "style-applied" : {
-      type: "styleApplied"
-    }
-  },
-
-  toString: function () {
+var OldStyleSheetActor = protocol.ActorClassWithSpec(oldStyleSheetSpec, {
+  toString: function() {
     return "[OldStyleSheetActor " + this.actorID + "]";
   },
 
@@ -170,14 +152,12 @@ var OldStyleSheetActor = protocol.ActorClass({
    * @return {object}
    *         'disabled' - the disabled state after toggling.
    */
-  toggleDisabled: method(function () {
+  toggleDisabled: function () {
     this.rawSheet.disabled = !this.rawSheet.disabled;
     this._notifyPropertyChanged("disabled");
 
     return this.rawSheet.disabled;
-  }, {
-    response: { disabled: RetVal("boolean")}
-  }),
+  },
 
   /**
    * Send an event notifying that a property of the stylesheet
@@ -194,11 +174,11 @@ var OldStyleSheetActor = protocol.ActorClass({
     * Fetch the source of the style sheet from its URL. Send a "sourceLoad"
     * event when it's been fetched.
     */
-  fetchSource: method(function () {
+  fetchSource: function () {
     this._getText().then((content) => {
       events.emit(this, "source-load", this.text);
     });
-  }),
+  },
 
   /**
    * Fetch the text for this stylesheet from the cache or network. Return
@@ -290,7 +270,7 @@ var OldStyleSheetActor = protocol.ActorClass({
    *         'text' - new text
    *         'transition' - whether to do CSS transition for change.
    */
-  update: method(function (text, transition) {
+  update: function (text, transition) {
     DOMUtils.parseStyleSheet(this.rawSheet, text);
 
     this.text = text;
@@ -303,12 +283,7 @@ var OldStyleSheetActor = protocol.ActorClass({
     else {
       this._notifyStyleApplied();
     }
-  }, {
-    request: {
-      text: Arg(0, "string"),
-      transition: Arg(1, "boolean")
-    }
-  }),
+  },
 
   /**
    * Insert a catch-all transition rule into the document. Set a timeout
@@ -347,6 +322,7 @@ var OldStyleSheetActor = protocol.ActorClass({
 });
 
 /**
+<<<<<<< 6db477279f016462d0b622691e95b0dd02c4ff4a
  * StyleSheetFront is the client-side counterpart to a StyleSheetActor.
  */
 var OldStyleSheetFront = protocol.FrontClass(OldStyleSheetActor, {
diff --git a/devtools/shared/fronts/styleeditor.js b/devtools/shared/fronts/styleeditor.js
new file mode 100644
index 000000000000..7ed5d5eecc7e
--- /dev/null
+++ b/devtools/shared/fronts/styleeditor.js
@@ -0,0 +1,81 @@
+/* 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 { ShortLongString } = require("devtools/server/actors/string");
+const { Front, FrontClassWithSpec } = require("devtools/shared/protocol");
+const { oldStyleSheetSpec } = require("devtools/shared/specs/styleeditor");
+const promise = require("promise");
+const events = require("sdk/event/core");
+
+/**
+ * StyleSheetFront is the client-side counterpart to a StyleSheetActor.
+ */
+const OldStyleSheetFront = FrontClassWithSpec(oldStyleSheetSpec, {
+  initialize: function (conn, form, ctx, detail) {
+    Front.prototype.initialize.call(this, conn, form, ctx, detail);
+
+    this._onPropertyChange = this._onPropertyChange.bind(this);
+    events.on(this, "property-change", this._onPropertyChange);
+  },
+
+  destroy: function () {
+    events.off(this, "property-change", this._onPropertyChange);
+
+    Front.prototype.destroy.call(this);
+  },
+
+  _onPropertyChange: function (property, value) {
+    this._form[property] = value;
+  },
+
+  form: function (form, detail) {
+    if (detail === "actorid") {
+      this.actorID = form;
+      return;
+    }
+    this.actorID = form.actor;
+    this._form = form;
+  },
+
+  getText: function () {
+    let deferred = promise.defer();
+
+    events.once(this, "source-load", (source) => {
+      let longStr = new ShortLongString(source);
+      deferred.resolve(longStr);
+    });
+    this.fetchSource();
+
+    return deferred.promise;
+  },
+
+  getOriginalSources: function () {
+    return promise.resolve([]);
+  },
+
+  get href() {
+    return this._form.href;
+  },
+  get nodeHref() {
+    return this._form.nodeHref;
+  },
+  get disabled() {
+    return !!this._form.disabled;
+  },
+  get title() {
+    return this._form.title;
+  },
+  get isSystem() {
+    return this._form.system;
+  },
+  get styleSheetIndex() {
+    return this._form.styleSheetIndex;
+  },
+  get ruleCount() {
+    return this._form.ruleCount;
+  }
+});
+
+exports.OldStyleSheetFront = OldStyleSheetFront;
diff --git a/devtools/shared/specs/moz.build b/devtools/shared/specs/moz.build
index d27764a84d46..af846a2fa89f 100644
--- a/devtools/shared/specs/moz.build
+++ b/devtools/shared/specs/moz.build
@@ -10,6 +10,7 @@ DevToolsModules(
     'highlighters.js',
     'inspector.js',
     'storage.js',
+    'styleeditor.js',
     'styles.js',
     'stylesheets.js'
 )
diff --git a/devtools/shared/specs/styleeditor.js b/devtools/shared/specs/styleeditor.js
new file mode 100644
index 000000000000..94e1a4056900
--- /dev/null
+++ b/devtools/shared/specs/styleeditor.js
@@ -0,0 +1,40 @@
+/* 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");
+
+const oldStyleSheetSpec = generateActorSpec({
+  typeName: "old-stylesheet",
+
+  events: {
+    "property-change": {
+      type: "propertyChange",
+      property: Arg(0, "string"),
+      value: Arg(1, "json")
+    },
+    "source-load": {
+      type: "sourceLoad",
+      source: Arg(0, "string")
+    },
+    "style-applied": {
+      type: "styleApplied"
+    }
+  },
+
+  methods: {
+    toggleDisabled: {
+      response: { disabled: RetVal("boolean")}
+    },
+    fetchSource: {},
+    update: {
+      request: {
+        text: Arg(0, "string"),
+        transition: Arg(1, "boolean")
+      }
+    }
+  }
+});
+
+exports.oldStyleSheetSpec = oldStyleSheetSpec;