Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

65 files changed, 8370 insertions, 0 deletions

diff --git a/devtools/client/fronts/accessibility.js b/devtools/client/fronts/accessibility.js
new file mode 100644
index 0000000000..3a60856164
--- /dev/null
+++ b/devtools/client/fronts/accessibility.js
@@ -0,0 +1,583 @@
+/* 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 {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  accessibleSpec,
+  accessibleWalkerSpec,
+  accessibilitySpec,
+  parentAccessibilitySpec,
+  simulatorSpec,
+} = require("resource://devtools/shared/specs/accessibility.js");
+const events = require("resource://devtools/shared/event-emitter.js");
+
+class AccessibleFront extends FrontClassWithSpec(accessibleSpec) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+
+    this.before("audited", this.audited.bind(this));
+    this.before("name-change", this.nameChange.bind(this));
+    this.before("value-change", this.valueChange.bind(this));
+    this.before("description-change", this.descriptionChange.bind(this));
+    this.before("shortcut-change", this.shortcutChange.bind(this));
+    this.before("reorder", this.reorder.bind(this));
+    this.before("text-change", this.textChange.bind(this));
+    this.before("index-in-parent-change", this.indexInParentChange.bind(this));
+    this.before("states-change", this.statesChange.bind(this));
+    this.before("actions-change", this.actionsChange.bind(this));
+    this.before("attributes-change", this.attributesChange.bind(this));
+  }
+
+  marshallPool() {
+    return this.getParent();
+  }
+
+  get useChildTargetToFetchChildren() {
+    return this._form.useChildTargetToFetchChildren;
+  }
+
+  get role() {
+    return this._form.role;
+  }
+
+  get name() {
+    return this._form.name;
+  }
+
+  get value() {
+    return this._form.value;
+  }
+
+  get description() {
+    return this._form.description;
+  }
+
+  get keyboardShortcut() {
+    return this._form.keyboardShortcut;
+  }
+
+  get childCount() {
+    return this._form.childCount;
+  }
+
+  get domNodeType() {
+    return this._form.domNodeType;
+  }
+
+  get indexInParent() {
+    return this._form.indexInParent;
+  }
+
+  get states() {
+    return this._form.states;
+  }
+
+  get actions() {
+    return this._form.actions;
+  }
+
+  get attributes() {
+    return this._form.attributes;
+  }
+
+  get checks() {
+    return this._form.checks;
+  }
+
+  form(form) {
+    this.actorID = form.actor;
+    this._form = this._form || {};
+    Object.assign(this._form, form);
+  }
+
+  nameChange(name, parent) {
+    this._form.name = name;
+    // Name change event affects the tree rendering, we fire this event on
+    // accessibility walker as the point of interaction for UI.
+    const accessibilityWalkerFront = this.getParent();
+    if (accessibilityWalkerFront) {
+      events.emit(accessibilityWalkerFront, "name-change", this, parent);
+    }
+  }
+
+  valueChange(value) {
+    this._form.value = value;
+  }
+
+  descriptionChange(description) {
+    this._form.description = description;
+  }
+
+  shortcutChange(keyboardShortcut) {
+    this._form.keyboardShortcut = keyboardShortcut;
+  }
+
+  reorder(childCount) {
+    this._form.childCount = childCount;
+    // Reorder event affects the tree rendering, we fire this event on
+    // accessibility walker as the point of interaction for UI.
+    const accessibilityWalkerFront = this.getParent();
+    if (accessibilityWalkerFront) {
+      events.emit(accessibilityWalkerFront, "reorder", this);
+    }
+  }
+
+  textChange() {
+    // Text event affects the tree rendering, we fire this event on
+    // accessibility walker as the point of interaction for UI.
+    const accessibilityWalkerFront = this.getParent();
+    if (accessibilityWalkerFront) {
+      events.emit(accessibilityWalkerFront, "text-change", this);
+    }
+  }
+
+  indexInParentChange(indexInParent) {
+    this._form.indexInParent = indexInParent;
+  }
+
+  statesChange(states) {
+    this._form.states = states;
+  }
+
+  actionsChange(actions) {
+    this._form.actions = actions;
+  }
+
+  attributesChange(attributes) {
+    this._form.attributes = attributes;
+  }
+
+  audited(checks) {
+    this._form.checks = this._form.checks || {};
+    Object.assign(this._form.checks, checks);
+  }
+
+  hydrate() {
+    return super.hydrate().then(properties => {
+      Object.assign(this._form, properties);
+    });
+  }
+
+  async children() {
+    if (!this.useChildTargetToFetchChildren) {
+      return super.children();
+    }
+
+    const { walker: domWalkerFront } = await this.targetFront.getFront(
+      "inspector"
+    );
+    const node = await domWalkerFront.getNodeFromActor(this.actorID, [
+      "rawAccessible",
+      "DOMNode",
+    ]);
+    // We are using DOM inspector/walker API here because we want to keep both
+    // the accessiblity tree and the DOM tree in sync. This is necessary for
+    // several features that the accessibility panel provides such as inspecting
+    // a corresponding DOM node or any other functionality that requires DOM
+    // node ancestries to be resolved all the way up to the top level document.
+    const {
+      nodes: [documentNodeFront],
+    } = await domWalkerFront.children(node);
+    const accessibilityFront = await documentNodeFront.targetFront.getFront(
+      "accessibility"
+    );
+
+    return accessibilityFront.accessibleWalkerFront.children();
+  }
+
+  /**
+   * Helper function that helps with building a complete snapshot of
+   * accessibility tree starting at the level of current accessible front. It
+   * accumulates subtrees from possible out of process frames that are children
+   * of the current accessible front.
+   * @param  {JSON} snapshot
+   *         Snapshot of the current accessible front or one of its in process
+   *         children when recursing.
+   *
+   * @return {JSON}
+   *         Complete snapshot of current accessible front.
+   */
+  async _accumulateSnapshot(snapshot) {
+    const { childCount, useChildTargetToFetchChildren } = snapshot;
+    // No children, we are done.
+    if (childCount === 0) {
+      return snapshot;
+    }
+
+    // If current accessible is not a remote frame, continue accumulating inside
+    // its children.
+    if (!useChildTargetToFetchChildren) {
+      const childSnapshots = [];
+      for (const childSnapshot of snapshot.children) {
+        childSnapshots.push(this._accumulateSnapshot(childSnapshot));
+      }
+      await Promise.all(childSnapshots);
+      return snapshot;
+    }
+
+    // When we have a remote frame, we need to obtain an accessible front for a
+    // remote frame document and retrieve its snapshot.
+    const inspectorFront = await this.targetFront.getFront("inspector");
+    const frameNodeFront =
+      await inspectorFront.getNodeActorFromContentDomReference(
+        snapshot.contentDOMReference
+      );
+    // Remove contentDOMReference and useChildTargetToFetchChildren properties.
+    delete snapshot.contentDOMReference;
+    delete snapshot.useChildTargetToFetchChildren;
+    if (!frameNodeFront) {
+      return snapshot;
+    }
+
+    // Remote frame lives in the same process as the current accessible
+    // front we can retrieve the accessible front directly.
+    const frameAccessibleFront = await this.parentFront.getAccessibleFor(
+      frameNodeFront
+    );
+    if (!frameAccessibleFront) {
+      return snapshot;
+    }
+
+    const [docAccessibleFront] = await frameAccessibleFront.children();
+    const childSnapshot = await docAccessibleFront.snapshot();
+    snapshot.children.push(childSnapshot);
+
+    return snapshot;
+  }
+
+  /**
+   * Retrieves a complete JSON snapshot for an accessible subtree of a given
+   * accessible front (inclduing OOP frames).
+   */
+  async snapshot() {
+    const snapshot = await super.snapshot();
+    await this._accumulateSnapshot(snapshot);
+    return snapshot;
+  }
+}
+
+class AccessibleWalkerFront extends FrontClassWithSpec(accessibleWalkerSpec) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+
+    this.documentReady = this.documentReady.bind(this);
+    this.on("document-ready", this.documentReady);
+  }
+
+  destroy() {
+    this.off("document-ready", this.documentReady);
+    super.destroy();
+  }
+
+  form(json) {
+    this.actorID = json.actor;
+  }
+
+  documentReady() {
+    if (this.targetFront.isTopLevel) {
+      this.emit("top-level-document-ready");
+    }
+  }
+
+  pick(doFocus) {
+    if (doFocus) {
+      return this.pickAndFocus();
+    }
+
+    return super.pick();
+  }
+
+  /**
+   * Get the accessible object ancestry starting from the given accessible to
+   * the top level document. The top level document is in the top level content process.
+   * @param  {Object} accessible
+   *         Accessible front to determine the ancestry for.
+   *
+   * @return {Array}  ancestry
+   *         List of ancestry objects which consist of an accessible with its
+   *         children.
+   */
+  async getAncestry(accessible) {
+    const ancestry = await super.getAncestry(accessible);
+
+    const parentTarget = await this.targetFront.getParentTarget();
+    if (!parentTarget) {
+      return ancestry;
+    }
+
+    // Get an accessible front for the parent frame. We go through the
+    // inspector's walker to keep both inspector and accessibility trees in
+    // sync.
+    const { walker: domWalkerFront } = await this.targetFront.getFront(
+      "inspector"
+    );
+    const frameNodeFront = (await domWalkerFront.getRootNode()).parentNode();
+    const accessibilityFront = await parentTarget.getFront("accessibility");
+    const { accessibleWalkerFront } = accessibilityFront;
+    const frameAccessibleFront = await accessibleWalkerFront.getAccessibleFor(
+      frameNodeFront
+    );
+
+    if (!frameAccessibleFront) {
+      // Most likely we are inside a hidden frame.
+      return Promise.reject(
+        `Can't get the ancestry for an accessible front ${accessible.actorID}. It is in the detached tree.`
+      );
+    }
+
+    // Compose the final ancestry out of ancestry for the given accessible in
+    // the current process and recursively get the ancestry for the frame
+    // accessible.
+    ancestry.push(
+      {
+        accessible: frameAccessibleFront,
+        children: await frameAccessibleFront.children(),
+      },
+      ...(await accessibleWalkerFront.getAncestry(frameAccessibleFront))
+    );
+
+    return ancestry;
+  }
+
+  /**
+   * Run an accessibility audit for a document that accessibility walker is
+   * responsible for (in process). In addition to plainly running an audit (in
+   * cases when the document is in the OOP frame), this method also updates
+   * relative ancestries of audited accessible objects all the way up to the top
+   * level document for the toolbox.
+   * @param {Object} options
+   *                 - {Array}    types
+   *                   types of the accessibility issues to audit for
+   *                 - {Function} onProgress
+   *                   callback function for a progress audit-event
+   *                 - {Boolean} retrieveAncestries (defaults to true)
+   *                   Set to false to _not_ retrieve ancestries of audited accessible objects.
+   *                   This is used when a specific document is selected in the iframe picker
+   *                   and we want to treat it as the root of the accessibility panel tree.
+   */
+  async audit({ types, onProgress, retrieveAncestries = true }) {
+    const onAudit = new Promise(resolve => {
+      const auditEventHandler = ({ type, ancestries, progress }) => {
+        switch (type) {
+          case "error":
+            this.off("audit-event", auditEventHandler);
+            resolve({ error: true });
+            break;
+          case "completed":
+            this.off("audit-event", auditEventHandler);
+            resolve({ ancestries });
+            break;
+          case "progress":
+            onProgress(progress);
+            break;
+          default:
+            break;
+        }
+      };
+
+      this.on("audit-event", auditEventHandler);
+      super.startAudit({ types });
+    });
+
+    const audit = await onAudit;
+    // If audit resulted in an error, if there's nothing to report or if the callsite
+    // explicitly asked to not retrieve ancestries, we are done.
+    // (no need to check for ancestry across the remote frame hierarchy).
+    // See also https://bugzilla.mozilla.org/show_bug.cgi?id=1641551 why the rest of
+    // the code path is only supported when content toolbox fission is enabled.
+    if (audit.error || audit.ancestries.length === 0 || !retrieveAncestries) {
+      return audit;
+    }
+
+    const parentTarget = await this.targetFront.getParentTarget();
+    // If there is no parent target, we do not need to update ancestries as we
+    // are in the top level document.
+    if (!parentTarget) {
+      return audit;
+    }
+
+    // Retrieve an ancestry (cross process) for a current root document and make
+    // audit report ancestries relative to it.
+    const [docAccessibleFront] = await this.children();
+    let docAccessibleAncestry;
+    try {
+      docAccessibleAncestry = await this.getAncestry(docAccessibleFront);
+    } catch (e) {
+      // We are in a detached subtree. We do not consider this an error, instead
+      // we need to ignore the audit for this frame and return an empty report.
+      return { ancestries: [] };
+    }
+    for (const ancestry of audit.ancestries) {
+      // Compose the final ancestries out of the ones in the audit report
+      // relative to this document and the ancestry of the document itself
+      // (cross process).
+      ancestry.push(...docAccessibleAncestry);
+    }
+
+    return audit;
+  }
+
+  /**
+   * A helper wrapper function to show tabbing order overlay for a given target.
+   * The only additional work done is resolving domnode front from a
+   * ContentDOMReference received from a remote target.
+   *
+   * @param  {Object} startElm
+   *         domnode front to be used as the starting point for generating the
+   *         tabbing order.
+   * @param  {Number} startIndex
+   *         Starting index for the tabbing order.
+   */
+  async _showTabbingOrder(startElm, startIndex) {
+    const { contentDOMReference, index } = await super.showTabbingOrder(
+      startElm,
+      startIndex
+    );
+    let elm;
+    if (contentDOMReference) {
+      const inspectorFront = await this.targetFront.getFront("inspector");
+      elm = await inspectorFront.getNodeActorFromContentDomReference(
+        contentDOMReference
+      );
+    }
+
+    return { elm, index };
+  }
+
+  /**
+   * Show tabbing order overlay for a given target.
+   *
+   * @param  {Object} startElm
+   *         domnode front to be used as the starting point for generating the
+   *         tabbing order.
+   * @param  {Number} startIndex
+   *         Starting index for the tabbing order.
+   *
+   * @return {JSON}
+   *         Tabbing order information for the last element in the tabbing
+   *         order. It includes a domnode front and a tabbing index. If we are
+   *         at the end of the tabbing order for the top level content document,
+   *         the domnode front will be null. If focus manager discovered a
+   *         remote IFRAME, then the domnode front is for the IFRAME itself.
+   */
+  async showTabbingOrder(startElm, startIndex) {
+    let { elm: currentElm, index: currentIndex } = await this._showTabbingOrder(
+      startElm,
+      startIndex
+    );
+
+    // If no remote frames were found, currentElm will be null.
+    while (currentElm) {
+      // Safety check to ensure that the currentElm is a remote frame.
+      if (currentElm.useChildTargetToFetchChildren) {
+        const { walker: domWalkerFront } =
+          await currentElm.targetFront.getFront("inspector");
+        const {
+          nodes: [childDocumentNodeFront],
+        } = await domWalkerFront.children(currentElm);
+        const { accessibleWalkerFront } =
+          await childDocumentNodeFront.targetFront.getFront("accessibility");
+        // Show tabbing order in the remote target, while updating the tabbing
+        // index.
+        ({ index: currentIndex } = await accessibleWalkerFront.showTabbingOrder(
+          childDocumentNodeFront,
+          currentIndex
+        ));
+      }
+
+      // Finished with the remote frame, continue in tabbing order, from the
+      // remote frame.
+      ({ elm: currentElm, index: currentIndex } = await this._showTabbingOrder(
+        currentElm,
+        currentIndex
+      ));
+    }
+
+    return { elm: currentElm, index: currentIndex };
+  }
+}
+
+class AccessibilityFront extends FrontClassWithSpec(accessibilitySpec) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+
+    this.before("init", this.init.bind(this));
+    this.before("shutdown", this.shutdown.bind(this));
+
+    // Attribute name from which to retrieve the actorID out of the target
+    // actor's form
+    this.formAttributeName = "accessibilityActor";
+  }
+
+  async initialize() {
+    this.accessibleWalkerFront = await super.getWalker();
+    this.simulatorFront = await super.getSimulator();
+    const { enabled } = await super.bootstrap();
+    this.enabled = enabled;
+
+    try {
+      this._traits = await this.getTraits();
+    } catch (e) {
+      // @backward-compat { version 84 } getTraits isn't available on older server.
+      this._traits = {};
+    }
+  }
+
+  get traits() {
+    return this._traits;
+  }
+
+  init() {
+    this.enabled = true;
+  }
+
+  shutdown() {
+    this.enabled = false;
+  }
+}
+
+class ParentAccessibilityFront extends FrontClassWithSpec(
+  parentAccessibilitySpec
+) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+    this.before("can-be-enabled-change", this.canBeEnabled.bind(this));
+    this.before("can-be-disabled-change", this.canBeDisabled.bind(this));
+
+    // Attribute name from which to retrieve the actorID out of the target
+    // actor's form
+    this.formAttributeName = "parentAccessibilityActor";
+  }
+
+  async initialize() {
+    ({ canBeEnabled: this.canBeEnabled, canBeDisabled: this.canBeDisabled } =
+      await super.bootstrap());
+  }
+
+  canBeEnabled(canBeEnabled) {
+    this.canBeEnabled = canBeEnabled;
+  }
+
+  canBeDisabled(canBeDisabled) {
+    this.canBeDisabled = canBeDisabled;
+  }
+}
+
+const SimulatorFront = FrontClassWithSpec(simulatorSpec);
+
+exports.AccessibleFront = AccessibleFront;
+registerFront(AccessibleFront);
+exports.AccessibleWalkerFront = AccessibleWalkerFront;
+registerFront(AccessibleWalkerFront);
+exports.AccessibilityFront = AccessibilityFront;
+registerFront(AccessibilityFront);
+exports.ParentAccessibilityFront = ParentAccessibilityFront;
+registerFront(ParentAccessibilityFront);
+exports.SimulatorFront = SimulatorFront;
+registerFront(SimulatorFront);
diff --git a/devtools/client/fronts/addon/addons.js b/devtools/client/fronts/addon/addons.js
new file mode 100644
index 0000000000..84d495b850
--- /dev/null
+++ b/devtools/client/fronts/addon/addons.js
@@ -0,0 +1,25 @@
+/* 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 {
+  addonsSpec,
+} = require("resource://devtools/shared/specs/addon/addons.js");
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+
+class AddonsFront extends FrontClassWithSpec(addonsSpec) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+
+    // Attribute name from which to retrieve the actorID out of the target actor's form
+    this.formAttributeName = "addonsActor";
+  }
+}
+
+exports.AddonsFront = AddonsFront;
+registerFront(AddonsFront);
diff --git a/devtools/client/fronts/addon/moz.build b/devtools/client/fronts/addon/moz.build
new file mode 100644
index 0000000000..e382173641
--- /dev/null
+++ b/devtools/client/fronts/addon/moz.build
@@ -0,0 +1,10 @@
+# -*- 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(
+    "addons.js",
+    "webextension-inspected-window.js",
+)
diff --git a/devtools/client/fronts/addon/webextension-inspected-window.js b/devtools/client/fronts/addon/webextension-inspected-window.js
new file mode 100644
index 0000000000..cf0674dfa8
--- /dev/null
+++ b/devtools/client/fronts/addon/webextension-inspected-window.js
@@ -0,0 +1,31 @@
+/* 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 {
+  webExtensionInspectedWindowSpec,
+} = require("resource://devtools/shared/specs/addon/webextension-inspected-window.js");
+
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+
+/**
+ * The corresponding Front object for the WebExtensionInspectedWindowActor.
+ */
+class WebExtensionInspectedWindowFront extends FrontClassWithSpec(
+  webExtensionInspectedWindowSpec
+) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+
+    // Attribute name from which to retrieve the actorID out of the target actor's form
+    this.formAttributeName = "webExtensionInspectedWindowActor";
+  }
+}
+
+exports.WebExtensionInspectedWindowFront = WebExtensionInspectedWindowFront;
+registerFront(WebExtensionInspectedWindowFront);
diff --git a/devtools/client/fronts/animation.js b/devtools/client/fronts/animation.js
new file mode 100644
index 0000000000..7dd17fc6e5
--- /dev/null
+++ b/devtools/client/fronts/animation.js
@@ -0,0 +1,214 @@
+/* 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 {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  animationPlayerSpec,
+  animationsSpec,
+} = require("resource://devtools/shared/specs/animation.js");
+
+class AnimationPlayerFront extends FrontClassWithSpec(animationPlayerSpec) {
+  constructor(conn, targetFront, parentFront) {
+    super(conn, targetFront, parentFront);
+
+    this.state = {};
+    this.before("changed", this.onChanged.bind(this));
+  }
+
+  form(form) {
+    this._form = form;
+    this.state = this.initialState;
+  }
+
+  /**
+   * If the AnimationsActor was given a reference to the WalkerActor previously
+   * then calling this getter will return the animation target NodeFront.
+   */
+  get animationTargetNodeFront() {
+    if (!this._form.animationTargetNodeActorID) {
+      return null;
+    }
+
+    return this.conn.getFrontByID(this._form.animationTargetNodeActorID);
+  }
+
+  /**
+   * Getter for the initial state of the player. Up to date states can be
+   * retrieved by calling the getCurrentState method.
+   */
+  get initialState() {
+    return {
+      type: this._form.type,
+      startTime: this._form.startTime,
+      currentTime: this._form.currentTime,
+      playState: this._form.playState,
+      playbackRate: this._form.playbackRate,
+      name: this._form.name,
+      duration: this._form.duration,
+      delay: this._form.delay,
+      endDelay: this._form.endDelay,
+      iterationCount: this._form.iterationCount,
+      iterationStart: this._form.iterationStart,
+      easing: this._form.easing,
+      fill: this._form.fill,
+      direction: this._form.direction,
+      animationTimingFunction: this._form.animationTimingFunction,
+      isRunningOnCompositor: this._form.isRunningOnCompositor,
+      propertyState: this._form.propertyState,
+      documentCurrentTime: this._form.documentCurrentTime,
+      createdTime: this._form.createdTime,
+      currentTimeAtCreated: this._form.currentTimeAtCreated,
+      absoluteValues: this.calculateAbsoluteValues(this._form),
+      properties: this._form.properties,
+    };
+  }
+
+  /**
+   * Executed when the AnimationPlayerActor emits a "changed" event. Used to
+   * update the local knowledge of the state.
+   */
+  onChanged(partialState) {
+    const { state } = this.reconstructState(partialState);
+    this.state = state;
+  }
+
+  /**
+   * Refresh the current state of this animation on the client from information
+   * found on the server. Doesn't return anything, just stores the new state.
+   */
+  async refreshState() {
+    const data = await this.getCurrentState();
+    if (this.currentStateHasChanged) {
+      this.state = data;
+    }
+  }
+
+  /**
+   * getCurrentState interceptor re-constructs incomplete states since the actor
+   * only sends the values that have changed.
+   */
+  getCurrentState() {
+    this.currentStateHasChanged = false;
+    return super.getCurrentState().then(partialData => {
+      const { state, hasChanged } = this.reconstructState(partialData);
+      this.currentStateHasChanged = hasChanged;
+      return state;
+    });
+  }
+
+  reconstructState(data) {
+    let hasChanged = false;
+
+    for (const key in this.state) {
+      if (typeof data[key] === "undefined") {
+        data[key] = this.state[key];
+      } else if (data[key] !== this.state[key]) {
+        hasChanged = true;
+      }
+    }
+
+    data.absoluteValues = this.calculateAbsoluteValues(data);
+    return { state: data, hasChanged };
+  }
+
+  calculateAbsoluteValues(data) {
+    const {
+      createdTime,
+      currentTime,
+      currentTimeAtCreated,
+      delay,
+      duration,
+      endDelay = 0,
+      fill,
+      iterationCount,
+      playbackRate,
+    } = data;
+
+    const toRate = v => v / Math.abs(playbackRate);
+    const isPositivePlaybackRate = playbackRate > 0;
+    let absoluteDelay = 0;
+    let absoluteEndDelay = 0;
+    let isDelayFilled = false;
+    let isEndDelayFilled = false;
+
+    if (isPositivePlaybackRate) {
+      absoluteDelay = toRate(delay);
+      absoluteEndDelay = toRate(endDelay);
+      isDelayFilled = fill === "both" || fill === "backwards";
+      isEndDelayFilled = fill === "both" || fill === "forwards";
+    } else {
+      absoluteDelay = toRate(endDelay);
+      absoluteEndDelay = toRate(delay);
+      isDelayFilled = fill === "both" || fill === "forwards";
+      isEndDelayFilled = fill === "both" || fill === "backwards";
+    }
+
+    let endTime = 0;
+
+    if (duration === Infinity) {
+      // Set endTime so as to enable the scrubber with keeping the consinstency of UI
+      // even the duration was Infinity. In case of delay is longer than zero, handle
+      // the graph duration as double of the delay amount. In case of no delay, handle
+      // the duration as 1ms which is short enough so as to make the scrubber movable
+      // and the limited duration is prioritized.
+      endTime = absoluteDelay > 0 ? absoluteDelay * 2 : 1;
+    } else {
+      endTime =
+        absoluteDelay +
+        toRate(duration * (iterationCount || 1)) +
+        absoluteEndDelay;
+    }
+
+    const absoluteCreatedTime = isPositivePlaybackRate
+      ? createdTime
+      : createdTime - endTime;
+    const absoluteCurrentTimeAtCreated = isPositivePlaybackRate
+      ? currentTimeAtCreated
+      : endTime - currentTimeAtCreated;
+    const animationCurrentTime = isPositivePlaybackRate
+      ? currentTime
+      : endTime - currentTime;
+    const absoluteCurrentTime =
+      absoluteCreatedTime + toRate(animationCurrentTime);
+    const absoluteStartTime = absoluteCreatedTime + Math.min(absoluteDelay, 0);
+    const absoluteStartTimeAtCreated =
+      absoluteCreatedTime + absoluteCurrentTimeAtCreated;
+    // To show whole graph with endDelay, we add negative endDelay amount to endTime.
+    const endTimeWithNegativeEndDelay = endTime - Math.min(absoluteEndDelay, 0);
+    const absoluteEndTime = absoluteCreatedTime + endTimeWithNegativeEndDelay;
+
+    return {
+      createdTime: absoluteCreatedTime,
+      currentTime: absoluteCurrentTime,
+      currentTimeAtCreated: absoluteCurrentTimeAtCreated,
+      delay: absoluteDelay,
+      endDelay: absoluteEndDelay,
+      endTime: absoluteEndTime,
+      isDelayFilled,
+      isEndDelayFilled,
+      startTime: absoluteStartTime,
+      startTimeAtCreated: absoluteStartTimeAtCreated,
+    };
+  }
+}
+
+exports.AnimationPlayerFront = AnimationPlayerFront;
+registerFront(AnimationPlayerFront);
+
+class AnimationsFront extends FrontClassWithSpec(animationsSpec) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+
+    // Attribute name from which to retrieve the actorID out of the target actor's form
+    this.formAttributeName = "animationsActor";
+  }
+}
+
+exports.AnimationsFront = AnimationsFront;
+registerFront(AnimationsFront);
diff --git a/devtools/client/fronts/array-buffer.js b/devtools/client/fronts/array-buffer.js
new file mode 100644
index 0000000000..c7741ffe3f
--- /dev/null
+++ b/devtools/client/fronts/array-buffer.js
@@ -0,0 +1,26 @@
+/* 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 {
+  arrayBufferSpec,
+} = require("resource://devtools/shared/specs/array-buffer.js");
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+
+/**
+ * A ArrayBufferClient provides a way to access ArrayBuffer from the
+ * devtools server.
+ */
+class ArrayBufferFront extends FrontClassWithSpec(arrayBufferSpec) {
+  form(json) {
+    this.length = json.length;
+  }
+}
+
+exports.ArrayBufferFront = ArrayBufferFront;
+registerFront(ArrayBufferFront);
diff --git a/devtools/client/fronts/blackboxing.js b/devtools/client/fronts/blackboxing.js
new file mode 100644
index 0000000000..ab26c484cc
--- /dev/null
+++ b/devtools/client/fronts/blackboxing.js
@@ -0,0 +1,17 @@
+/* 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 {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  blackboxingSpec,
+} = require("resource://devtools/shared/specs/blackboxing.js");
+
+class BlackboxingFront extends FrontClassWithSpec(blackboxingSpec) {}
+
+registerFront(BlackboxingFront);
diff --git a/devtools/client/fronts/breakpoint-list.js b/devtools/client/fronts/breakpoint-list.js
new file mode 100644
index 0000000000..c8fc57226b
--- /dev/null
+++ b/devtools/client/fronts/breakpoint-list.js
@@ -0,0 +1,17 @@
+/* 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 {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  breakpointListSpec,
+} = require("resource://devtools/shared/specs/breakpoint-list.js");
+
+class BreakpointListFront extends FrontClassWithSpec(breakpointListSpec) {}
+
+registerFront(BreakpointListFront);
diff --git a/devtools/client/fronts/changes.js b/devtools/client/fronts/changes.js
new file mode 100644
index 0000000000..4737156dcf
--- /dev/null
+++ b/devtools/client/fronts/changes.js
@@ -0,0 +1,33 @@
+/* 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 {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const { changesSpec } = require("resource://devtools/shared/specs/changes.js");
+
+/**
+ * ChangesFront, the front object for the ChangesActor
+ */
+class ChangesFront extends FrontClassWithSpec(changesSpec) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+
+    // Attribute name from which to retrieve the actorID out of the target actor's form
+    this.formAttributeName = "changesActor";
+  }
+
+  async initialize() {
+    // Ensure the corresponding ChangesActor is immediately available and ready to track
+    // changes by calling a method on it. Actors are lazy and won't be created until
+    // actually used.
+    await super.start();
+  }
+}
+
+exports.ChangesFront = ChangesFront;
+registerFront(ChangesFront);
diff --git a/devtools/client/fronts/compatibility.js b/devtools/client/fronts/compatibility.js
new file mode 100644
index 0000000000..292411e6af
--- /dev/null
+++ b/devtools/client/fronts/compatibility.js
@@ -0,0 +1,18 @@
+/* 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 {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  compatibilitySpec,
+} = require("resource://devtools/shared/specs/compatibility.js");
+
+class CompatibilityFront extends FrontClassWithSpec(compatibilitySpec) {}
+
+exports.CompatibilityFront = CompatibilityFront;
+registerFront(CompatibilityFront);
diff --git a/devtools/client/fronts/css-properties.js b/devtools/client/fronts/css-properties.js
new file mode 100644
index 0000000000..93e9d52900
--- /dev/null
+++ b/devtools/client/fronts/css-properties.js
@@ -0,0 +1,203 @@
+/* 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 {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  cssPropertiesSpec,
+} = require("resource://devtools/shared/specs/css-properties.js");
+
+loader.lazyRequireGetter(
+  this,
+  "cssColors",
+  "resource://devtools/shared/css/color-db.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "CSS_TYPES",
+  "resource://devtools/shared/css/constants.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "isCssVariable",
+  "resource://devtools/shared/inspector/css-logic.js",
+  true
+);
+
+/**
+ * The CssProperties front provides a mechanism to have a one-time asynchronous
+ * load of a CSS properties database. This is then fed into the CssProperties
+ * interface that provides synchronous methods for finding out what CSS
+ * properties the current server supports.
+ */
+class CssPropertiesFront extends FrontClassWithSpec(cssPropertiesSpec) {
+  constructor(client, targetFront) {
+    super(client, targetFront);
+
+    // Attribute name from which to retrieve the actorID out of the target actor's form
+    this.formAttributeName = "cssPropertiesActor";
+  }
+
+  async initialize() {
+    const db = await super.getCSSDatabase();
+    this.cssProperties = new CssProperties(normalizeCssData(db));
+  }
+
+  destroy() {
+    this.cssProperties = null;
+    super.destroy();
+  }
+}
+
+/**
+ * Ask questions to a CSS database. This class does not care how the database
+ * gets loaded in, only the questions that you can ask to it.
+ * Prototype functions are bound to 'this' so they can be passed around as helper
+ * functions.
+ *
+ * @param {Object} db
+ *                 A database of CSS properties
+ * @param {Object} inheritedList
+ *                 The key is the property name, the value is whether or not
+ *                 that property is inherited.
+ */
+function CssProperties(db) {
+  this.properties = db.properties;
+
+  this.isKnown = this.isKnown.bind(this);
+  this.isInherited = this.isInherited.bind(this);
+  this.supportsType = this.supportsType.bind(this);
+}
+
+CssProperties.prototype = {
+  /**
+   * Checks to see if the property is known by the browser. This function has
+   * `this` already bound so that it can be passed around by reference.
+   *
+   * @param {String} property The property name to be checked.
+   * @return {Boolean}
+   */
+  isKnown(property) {
+    // Custom Property Names (aka CSS Variables) are case-sensitive; do not lowercase.
+    property = property.startsWith("--") ? property : property.toLowerCase();
+    return !!this.properties[property] || isCssVariable(property);
+  },
+
+  /**
+   * Checks to see if the property is an inherited one.
+   *
+   * @param {String} property The property name to be checked.
+   * @return {Boolean}
+   */
+  isInherited(property) {
+    return this.properties[property]?.isInherited;
+  },
+
+  /**
+   * Checks if the property supports the given CSS type.
+   *
+   * @param {String} property The property to be checked.
+   * @param {String} type One of the values from InspectorPropertyType.
+   * @return {Boolean}
+   */
+  supportsType(property, type) {
+    const id = CSS_TYPES[type];
+    return (
+      this.properties[property] &&
+      (this.properties[property].supports.includes(type) ||
+        this.properties[property].supports.includes(id))
+    );
+  },
+
+  /**
+   * Gets the CSS values for a given property name.
+   *
+   * @param {String} property The property to use.
+   * @return {Array} An array of strings.
+   */
+  getValues(property) {
+    return this.properties[property] ? this.properties[property].values : [];
+  },
+
+  /**
+   * Gets the CSS property names.
+   *
+   * @return {Array} An array of strings.
+   */
+  getNames(property) {
+    return Object.keys(this.properties);
+  },
+
+  /**
+   * Return a list of subproperties for the given property.  If |name|
+   * does not name a valid property, an empty array is returned.  If
+   * the property is not a shorthand property, then array containing
+   * just the property itself is returned.
+   *
+   * @param {String} name The property to query
+   * @return {Array} An array of subproperty names.
+   */
+  getSubproperties(name) {
+    // Custom Property Names (aka CSS Variables) are case-sensitive; do not lowercase.
+    name = name.startsWith("--") ? name : name.toLowerCase();
+    if (this.isKnown(name)) {
+      if (this.properties[name] && this.properties[name].subproperties) {
+        return this.properties[name].subproperties;
+      }
+      return [name];
+    }
+    return [];
+  },
+};
+
+/**
+ * Even if the target has the cssProperties actor, the returned data may not be in the
+ * same shape or have all of the data we need. This normalizes the data and fills in
+ * any missing information like color values.
+ *
+ * @return {Object} The normalized CSS database.
+ */
+function normalizeCssData(db) {
+  // If there is a `from` attributes, it means that it comes from RDP
+  // and it is not the client `generateCssProperties()` object passed by tests.
+  if (typeof db.from == "string") {
+    // This is where to put backward compat tweaks here to support old runtimes.
+  }
+
+  reattachCssColorValues(db);
+
+  return db;
+}
+
+/**
+ * Color values are omitted to save on space. Add them back here.
+ * @param {Object} The CSS database.
+ */
+function reattachCssColorValues(db) {
+  if (db.properties.color.values[0] === "COLOR") {
+    const colors = Object.keys(cssColors);
+
+    for (const name in db.properties) {
+      const property = db.properties[name];
+      // "values" can be undefined if {name} was not found in CSS_PROPERTIES_DB.
+      if (property.values && property.values[0] === "COLOR") {
+        property.values.shift();
+        property.values = property.values.concat(colors).sort();
+      }
+    }
+  }
+}
+
+module.exports = {
+  CssPropertiesFront,
+  CssProperties,
+  normalizeCssData,
+};
+registerFront(CssPropertiesFront);
diff --git a/devtools/client/fronts/descriptors/descriptor-mixin.js b/devtools/client/fronts/descriptors/descriptor-mixin.js
new file mode 100644
index 0000000000..ac38e104b5
--- /dev/null
+++ b/devtools/client/fronts/descriptors/descriptor-mixin.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";
+
+/**
+ * A Descriptor represents a debuggable context. It can be a browser tab, a tab on
+ * a remote device, like a tab on Firefox for Android. But it can also be an add-on,
+ * as well as firefox parent process, or just one of its content process.
+ * It can be very similar to a Target. The key difference is the lifecycle of these two classes.
+ * The descriptor is meant to be always alive and meaningful/usable until the end of the RDP connection.
+ * Typically a Tab Descriptor will describe the tab and not the one document currently loaded in this tab,
+ * while the Target, will describe this one document and a new Target may be created on each navigation.
+ */
+function DescriptorMixin(parentClass) {
+  class Descriptor extends parentClass {
+    constructor(client, targetFront, parentFront) {
+      super(client, targetFront, parentFront);
+
+      this._client = client;
+
+      // Pass a true value in order to distinguish this event reception
+      // from any manual destroy caused by the frontend
+      this.on(
+        "descriptor-destroyed",
+        this.destroy.bind(this, { isServerDestroyEvent: true })
+      );
+    }
+
+    get client() {
+      return this._client;
+    }
+
+    async destroy({ isServerDestroyEvent } = {}) {
+      if (this.isDestroyed()) {
+        return;
+      }
+      // This workaround is mostly done for Workers, as WorkerDescriptor
+      // extends the Target class, which causes some issue down the road:
+      // In Target.destroy, we call WorkerDescriptorActor.detach *before* calling super.destroy(),
+      // and so hold on before calling Front.destroy() which would reject all pending requests, including detach().
+      // When calling detach, the server will emit "descriptor-destroyed", which will call Target.destroy again,
+      // but will still be blocked on detach resolution and won't call Front.destroy, and won't reject pending requests either.
+      //
+      // So call Front.baseFrontClassDestroyed manually from here, so that we ensure rejecting the pending detach request
+      // and unblock Target.destroy resolution.
+      //
+      // Here is the inheritance chain for WorkerDescriptor:
+      // WorkerDescriptor -> Descriptor (from descriptor-mixin.js) -> Target (from target-mixin.js) -> Front (protocol.js) -> Pool (protocol.js) -> EventEmitter
+      if (isServerDestroyEvent) {
+        this.baseFrontClassDestroy();
+      }
+
+      await super.destroy();
+    }
+  }
+  return Descriptor;
+}
+exports.DescriptorMixin = DescriptorMixin;
diff --git a/devtools/client/fronts/descriptors/descriptor-types.js b/devtools/client/fronts/descriptors/descriptor-types.js
new file mode 100644
index 0000000000..00164509ab
--- /dev/null
+++ b/devtools/client/fronts/descriptors/descriptor-types.js
@@ -0,0 +1,17 @@
+/* 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";
+
+/**
+ * List of all descriptor types.
+ *
+ * This will be expose via `descriptorType` on all descriptor fronts.
+ */
+module.exports = {
+  PROCESS: "process",
+  WORKER: "worker",
+  TAB: "tab",
+  EXTENSION: "extension",
+};
diff --git a/devtools/client/fronts/descriptors/moz.build b/devtools/client/fronts/descriptors/moz.build
new file mode 100644
index 0000000000..665a0f252a
--- /dev/null
+++ b/devtools/client/fronts/descriptors/moz.build
@@ -0,0 +1,14 @@
+# -*- 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(
+    "descriptor-mixin.js",
+    "descriptor-types.js",
+    "process.js",
+    "tab.js",
+    "webextension.js",
+    "worker.js",
+)
diff --git a/devtools/client/fronts/descriptors/process.js b/devtools/client/fronts/descriptors/process.js
new file mode 100644
index 0000000000..6efc1bd4d7
--- /dev/null
+++ b/devtools/client/fronts/descriptors/process.js
@@ -0,0 +1,142 @@
+/* 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 {
+  processDescriptorSpec,
+} = require("resource://devtools/shared/specs/descriptors/process.js");
+const {
+  WindowGlobalTargetFront,
+} = require("resource://devtools/client/fronts/targets/window-global.js");
+const {
+  ContentProcessTargetFront,
+} = require("resource://devtools/client/fronts/targets/content-process.js");
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  DescriptorMixin,
+} = require("resource://devtools/client/fronts/descriptors/descriptor-mixin.js");
+const DESCRIPTOR_TYPES = require("resource://devtools/client/fronts/descriptors/descriptor-types.js");
+
+class ProcessDescriptorFront extends DescriptorMixin(
+  FrontClassWithSpec(processDescriptorSpec)
+) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+    this._isParent = false;
+    this._processTargetFront = null;
+    this._targetFrontPromise = null;
+  }
+
+  descriptorType = DESCRIPTOR_TYPES.PROCESS;
+
+  form(json) {
+    this.id = json.id;
+    this._isParent = json.isParent;
+    this._isWindowlessParent = json.isWindowlessParent;
+    this.traits = json.traits || {};
+  }
+
+  async _createProcessTargetFront(form) {
+    let front = null;
+    // the request to getTarget may return a ContentProcessTargetActor or a
+    // ParentProcessTargetActor. In most cases getProcess(0) will return the
+    // main process target actor, which is a ParentProcessTargetActor, but
+    // not in xpcshell, which uses a ContentProcessTargetActor. So select
+    // the right front based on the actor ID.
+    if (form.actor.includes("parentProcessTarget")) {
+      // ParentProcessTargetActor doesn't have a specific front, instead it uses
+      // WindowGlobalTargetFront on the client side.
+      front = new WindowGlobalTargetFront(this._client, null, this);
+    } else {
+      front = new ContentProcessTargetFront(this._client, null, this);
+    }
+    // As these fronts aren't instantiated by protocol.js, we have to set their actor ID
+    // manually like that:
+    front.actorID = form.actor;
+    front.form(form);
+
+    // @backward-compat { version 84 } Older server don't send the processID in the form
+    if (!front.processID) {
+      front.processID = this.id;
+    }
+
+    this.manage(front);
+    return front;
+  }
+
+  /**
+   * This flag should be true for parent process descriptors of a regular
+   * browser instance, where you can expect the target to be associated with a
+   * window global.
+   *
+   * This will typically be true for the descriptor used by the Browser Toolbox
+   * or the Browser Console opened against a regular Firefox instance.
+   *
+   * On the contrary this will be false for parent process descriptors created
+   * for xpcshell debugging or for background task debugging.
+   */
+  get isBrowserProcessDescriptor() {
+    return this._isParent && !this._isWindowlessParent;
+  }
+
+  get isParentProcessDescriptor() {
+    return this._isParent;
+  }
+
+  get isProcessDescriptor() {
+    return true;
+  }
+
+  getCachedTarget() {
+    return this._processTargetFront;
+  }
+
+  async getTarget() {
+    // Only return the cached Target if it is still alive.
+    if (this._processTargetFront && !this._processTargetFront.isDestroyed()) {
+      return this._processTargetFront;
+    }
+    // Otherwise, ensure that we don't try to spawn more than one Target by
+    // returning the pending promise
+    if (this._targetFrontPromise) {
+      return this._targetFrontPromise;
+    }
+    this._targetFrontPromise = (async () => {
+      let targetFront = null;
+      try {
+        const targetForm = await super.getTarget();
+        targetFront = await this._createProcessTargetFront(targetForm);
+      } catch (e) {
+        // This is likely to happen if we get a lot of events which drop previous
+        // processes.
+        console.log(
+          `Request to connect to ProcessDescriptor "${this.id}" failed: ${e}`
+        );
+      }
+      // Save the reference to the target only after the call to attach
+      // so that getTarget always returns the attached target in case of concurrent calls
+      this._processTargetFront = targetFront;
+      // clear the promise if we are finished so that we can re-connect if
+      // necessary
+      this._targetFrontPromise = null;
+      return targetFront;
+    })();
+    return this._targetFrontPromise;
+  }
+
+  destroy() {
+    if (this._processTargetFront) {
+      this._processTargetFront.destroy();
+      this._processTargetFront = null;
+    }
+    this._targetFrontPromise = null;
+    super.destroy();
+  }
+}
+
+exports.ProcessDescriptorFront = ProcessDescriptorFront;
+registerFront(ProcessDescriptorFront);
diff --git a/devtools/client/fronts/descriptors/tab.js b/devtools/client/fronts/descriptors/tab.js
new file mode 100644
index 0000000000..097aed7674
--- /dev/null
+++ b/devtools/client/fronts/descriptors/tab.js
@@ -0,0 +1,330 @@
+/* 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 {
+  tabDescriptorSpec,
+} = require("resource://devtools/shared/specs/descriptors/tab.js");
+const DESCRIPTOR_TYPES = require("resource://devtools/client/fronts/descriptors/descriptor-types.js");
+
+loader.lazyRequireGetter(
+  this,
+  "gDevTools",
+  "resource://devtools/client/framework/devtools.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "WindowGlobalTargetFront",
+  "resource://devtools/client/fronts/targets/window-global.js",
+  true
+);
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  DescriptorMixin,
+} = require("resource://devtools/client/fronts/descriptors/descriptor-mixin.js");
+
+const POPUP_DEBUG_PREF = "devtools.popups.debug";
+
+/**
+ * DescriptorFront for tab targets.
+ *
+ * @fires remoteness-change
+ *        Fired only for target switching, when the debugged tab is a local tab.
+ *        TODO: This event could move to the server in order to support
+ *        remoteness change for remote debugging.
+ */
+class TabDescriptorFront extends DescriptorMixin(
+  FrontClassWithSpec(tabDescriptorSpec)
+) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+
+    // The tab descriptor can be configured to create either local tab targets
+    // (eg, regular tab toolbox) or browsing context targets (eg tab remote
+    // debugging).
+    this._localTab = null;
+
+    // Flag to prevent the server from trying to spawn targets by the watcher actor.
+    this._disableTargetSwitching = false;
+
+    this._onTargetDestroyed = this._onTargetDestroyed.bind(this);
+    this._handleTabEvent = this._handleTabEvent.bind(this);
+
+    // When the target is created from the server side,
+    // it is not created via TabDescriptor.getTarget.
+    // Instead, it is retrieved by the TargetCommand which
+    // will call TabDescriptor.setTarget from TargetCommand.onTargetAvailable
+    if (this.isServerTargetSwitchingEnabled()) {
+      this._targetFrontPromise = new Promise(
+        r => (this._resolveTargetFrontPromise = r)
+      );
+    }
+  }
+
+  descriptorType = DESCRIPTOR_TYPES.TAB;
+
+  form(json) {
+    this.actorID = json.actor;
+    this._form = json;
+    this.traits = json.traits || {};
+  }
+
+  /**
+   * Destroy the front.
+   *
+   * @param Boolean If true, it means that we destroy the front when receiving the descriptor-destroyed
+   *                event from the server.
+   */
+  destroy({ isServerDestroyEvent = false } = {}) {
+    if (this.isDestroyed()) {
+      return;
+    }
+
+    // The descriptor may be destroyed first by the frontend.
+    // When closing the tab, the toolbox document is almost immediately removed from the DOM.
+    // The `unload` event fires and toolbox destroys itself, as well as its related client.
+    //
+    // In such case, we emit the descriptor-destroyed event
+    if (!isServerDestroyEvent) {
+      this.emit("descriptor-destroyed");
+    }
+    if (this.isLocalTab) {
+      this._teardownLocalTabListeners();
+    }
+    super.destroy();
+  }
+
+  getWatcher() {
+    const isPopupDebuggingEnabled = Services.prefs.getBoolPref(
+      POPUP_DEBUG_PREF,
+      false
+    );
+    return super.getWatcher({
+      isServerTargetSwitchingEnabled: this.isServerTargetSwitchingEnabled(),
+      isPopupDebuggingEnabled,
+    });
+  }
+
+  setLocalTab(localTab) {
+    this._localTab = localTab;
+    this._setupLocalTabListeners();
+  }
+
+  get isTabDescriptor() {
+    return true;
+  }
+
+  get isLocalTab() {
+    return !!this._localTab;
+  }
+
+  get localTab() {
+    return this._localTab;
+  }
+
+  _setupLocalTabListeners() {
+    this.localTab.addEventListener("TabClose", this._handleTabEvent);
+    this.localTab.addEventListener("TabRemotenessChange", this._handleTabEvent);
+  }
+
+  _teardownLocalTabListeners() {
+    this.localTab.removeEventListener("TabClose", this._handleTabEvent);
+    this.localTab.removeEventListener(
+      "TabRemotenessChange",
+      this._handleTabEvent
+    );
+  }
+
+  isServerTargetSwitchingEnabled() {
+    return !this._disableTargetSwitching;
+  }
+
+  /**
+   * Called by CommandsFactory, when the WebExtension codebase instantiates
+   * a commands. We have to flag the TabDescriptor for them as they don't support
+   * target switching and gets severely broken when enabling server target which
+   * introduce target switching for all navigations and reloads
+   */
+  setIsForWebExtension() {
+    this.disableTargetSwitching();
+  }
+
+  /**
+   * Method used by the WebExtension which still need to disable server side targets,
+   * and also a few xpcshell tests which are using legacy API and don't support watcher actor.
+   */
+  disableTargetSwitching() {
+    this._disableTargetSwitching = true;
+    // Delete these two attributes which have to be set early from the constructor,
+    // but we don't know yet if target switch should be disabled.
+    delete this._targetFrontPromise;
+    delete this._resolveTargetFrontPromise;
+  }
+
+  get isZombieTab() {
+    return this._form.isZombieTab;
+  }
+
+  get browserId() {
+    return this._form.browserId;
+  }
+
+  get selected() {
+    return this._form.selected;
+  }
+
+  get title() {
+    return this._form.title;
+  }
+
+  get url() {
+    return this._form.url;
+  }
+
+  get favicon() {
+    // Note: the favicon is not part of the default form() payload, it will be
+    // added in `retrieveFavicon`.
+    return this._form.favicon;
+  }
+
+  _createTabTarget(form) {
+    const front = new WindowGlobalTargetFront(this._client, null, this);
+
+    // As these fronts aren't instantiated by protocol.js, we have to set their actor ID
+    // manually like that:
+    front.actorID = form.actor;
+    front.form(form);
+    this.manage(front);
+    return front;
+  }
+
+  _onTargetDestroyed() {
+    // Clear the cached targetFront when the target is destroyed.
+    // Note that we are also checking that _targetFront has a valid actorID
+    // in getTarget, this acts as an additional security to avoid races.
+    this._targetFront = null;
+  }
+
+  /**
+   * Safely retrieves the favicon via getFavicon() and populates this._form.favicon.
+   *
+   * We could let callers explicitly retrieve the favicon instead of inserting it in the
+   * form dynamically.
+   */
+  async retrieveFavicon() {
+    try {
+      this._form.favicon = await this.getFavicon();
+    } catch (e) {
+      // We might request the data for a tab which is going to be destroyed.
+      // In this case the TargetFront will be destroyed. Otherwise log an error.
+      if (!this.isDestroyed()) {
+        console.error("Failed to retrieve the favicon for " + this.url, e);
+      }
+    }
+  }
+
+  /**
+   * Top-level targets created on the server will not be created and managed
+   * by a descriptor front. Instead they are created by the Watcher actor.
+   * On the client side we manually re-establish a link between the descriptor
+   * and the new top-level target.
+   */
+  setTarget(targetFront) {
+    // Completely ignore the previous target.
+    // We might nullify the _targetFront unexpectely due to previous target
+    // being destroyed after the new is created
+    if (this._targetFront) {
+      this._targetFront.off("target-destroyed", this._onTargetDestroyed);
+    }
+    this._targetFront = targetFront;
+
+    targetFront.on("target-destroyed", this._onTargetDestroyed);
+
+    if (this.isServerTargetSwitchingEnabled()) {
+      this._resolveTargetFrontPromise(targetFront);
+
+      // Set a new promise in order to:
+      // 1) Avoid leaking the targetFront we just resolved into the previous promise.
+      // 2) Never return an empty target from `getTarget`
+      //
+      // About the second point:
+      // There is a race condition where we call `onTargetDestroyed` (which clears `this.targetFront`)
+      // a bit before calling `setTarget`. So that `this.targetFront` could be null,
+      // while we now a new target will eventually come when calling `setTarget`.
+      // Setting a new promise will help wait for the next target while `_targetFront` is null.
+      // Note that `getTarget` first look into `_targetFront` before checking for `_targetFrontPromise`.
+      this._targetFrontPromise = new Promise(
+        r => (this._resolveTargetFrontPromise = r)
+      );
+    }
+  }
+  getCachedTarget() {
+    return this._targetFront;
+  }
+  async getTarget() {
+    if (this._targetFront && !this._targetFront.isDestroyed()) {
+      return this._targetFront;
+    }
+
+    if (this._targetFrontPromise) {
+      return this._targetFrontPromise;
+    }
+
+    this._targetFrontPromise = (async () => {
+      let newTargetFront = null;
+      try {
+        const targetForm = await super.getTarget();
+        newTargetFront = this._createTabTarget(targetForm);
+        this.setTarget(newTargetFront);
+      } catch (e) {
+        console.log(
+          `Request to connect to TabDescriptor "${this.id}" failed: ${e}`
+        );
+      }
+
+      this._targetFrontPromise = null;
+      return newTargetFront;
+    })();
+    return this._targetFrontPromise;
+  }
+
+  /**
+   * Handle tabs events.
+   */
+  async _handleTabEvent(event) {
+    switch (event.type) {
+      case "TabClose":
+        // Always destroy the toolbox opened for this local tab descriptor.
+        // When the toolbox is in a Window Host, it won't be removed from the
+        // DOM when the tab is closed.
+        const toolbox = gDevTools.getToolboxForDescriptorFront(this);
+        if (toolbox) {
+          // Toolbox.destroy will call target.destroy eventually.
+          await toolbox.destroy();
+        }
+        break;
+      case "TabRemotenessChange":
+        this._onRemotenessChange();
+        break;
+    }
+  }
+
+  /**
+   * Automatically respawn the toolbox when the tab changes between being
+   * loaded within the parent process and loaded from a content process.
+   * Process change can go in both ways.
+   */
+  async _onRemotenessChange() {
+    // In a near future, this client side code should be replaced by actor code,
+    // notifying about new tab targets.
+    this.emit("remoteness-change", this._targetFront);
+  }
+}
+
+exports.TabDescriptorFront = TabDescriptorFront;
+registerFront(TabDescriptorFront);
diff --git a/devtools/client/fronts/descriptors/webextension.js b/devtools/client/fronts/descriptors/webextension.js
new file mode 100644
index 0000000000..5db86ee5f8
--- /dev/null
+++ b/devtools/client/fronts/descriptors/webextension.js
@@ -0,0 +1,173 @@
+/* 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 {
+  webExtensionDescriptorSpec,
+} = require("resource://devtools/shared/specs/descriptors/webextension.js");
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  DescriptorMixin,
+} = require("resource://devtools/client/fronts/descriptors/descriptor-mixin.js");
+const DESCRIPTOR_TYPES = require("resource://devtools/client/fronts/descriptors/descriptor-types.js");
+loader.lazyRequireGetter(
+  this,
+  "WindowGlobalTargetFront",
+  "resource://devtools/client/fronts/targets/window-global.js",
+  true
+);
+
+class WebExtensionDescriptorFront extends DescriptorMixin(
+  FrontClassWithSpec(webExtensionDescriptorSpec)
+) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+    this.traits = {};
+  }
+
+  descriptorType = DESCRIPTOR_TYPES.EXTENSION;
+
+  form(json) {
+    this.actorID = json.actor;
+
+    // Do not use `form` name to avoid colliding with protocol.js's `form` method
+    this._form = json;
+    this.traits = json.traits || {};
+  }
+
+  get backgroundScriptStatus() {
+    return this._form.backgroundScriptStatus;
+  }
+
+  get debuggable() {
+    return this._form.debuggable;
+  }
+
+  get hidden() {
+    return this._form.hidden;
+  }
+
+  get iconDataURL() {
+    return this._form.iconDataURL;
+  }
+
+  get iconURL() {
+    return this._form.iconURL;
+  }
+
+  get id() {
+    return this._form.id;
+  }
+
+  get isSystem() {
+    return this._form.isSystem;
+  }
+
+  get isWebExtensionDescriptor() {
+    return true;
+  }
+
+  get isWebExtension() {
+    return this._form.isWebExtension;
+  }
+
+  get manifestURL() {
+    return this._form.manifestURL;
+  }
+
+  get name() {
+    return this._form.name;
+  }
+
+  get persistentBackgroundScript() {
+    return this._form.persistentBackgroundScript;
+  }
+
+  get temporarilyInstalled() {
+    return this._form.temporarilyInstalled;
+  }
+
+  get url() {
+    return this._form.url;
+  }
+
+  get warnings() {
+    return this._form.warnings;
+  }
+
+  isServerTargetSwitchingEnabled() {
+    // For now, we don't expose any target out of the WatcherActor.
+    // And the top level target is still manually instantiated by the descriptor.
+    // We most likely need to wait for full enabling of EFT before being able to spawn
+    // the extension target from the server side as doing this would most likely break
+    // the iframe dropdown. It would break it as spawning the targets from the server
+    // would probably mean getting rid of the usage of WindowGlobalTargetActor._setWindow
+    // and instead spawn one target per extension document.
+    // That, instead of having a unique target for all the documents.
+    return false;
+  }
+
+  getWatcher() {
+    return super.getWatcher({
+      isServerTargetSwitchingEnabled: this.isServerTargetSwitchingEnabled(),
+    });
+  }
+
+  _createWebExtensionTarget(form) {
+    const front = new WindowGlobalTargetFront(this.conn, null, this);
+    front.form(form);
+    this.manage(front);
+    return front;
+  }
+
+  /**
+   * Retrieve the WindowGlobalTargetFront representing a
+   * WebExtensionTargetActor if this addon is a webextension.
+   *
+   * WebExtensionDescriptors will be created for any type of addon type
+   * (webextension, search plugin, themes). Only webextensions can be targets.
+   * This method will throw for other addon types.
+   *
+   * TODO: We should filter out non-webextension & non-debuggable addons on the
+   * server to avoid the isWebExtension check here. See Bug 1644355.
+   */
+  async getTarget() {
+    if (!this.isWebExtension) {
+      throw new Error(
+        "Tried to create a target for an addon which is not a webextension: " +
+          this.actorID
+      );
+    }
+
+    if (this._targetFront && !this._targetFront.isDestroyed()) {
+      return this._targetFront;
+    }
+
+    if (this._targetFrontPromise) {
+      return this._targetFrontPromise;
+    }
+
+    this._targetFrontPromise = (async () => {
+      let targetFront = null;
+      try {
+        const targetForm = await super.getTarget();
+        targetFront = this._createWebExtensionTarget(targetForm);
+      } catch (e) {
+        console.log(
+          `Request to connect to WebExtensionDescriptor "${this.id}" failed: ${e}`
+        );
+      }
+      this._targetFront = targetFront;
+      this._targetFrontPromise = null;
+      return targetFront;
+    })();
+    return this._targetFrontPromise;
+  }
+}
+
+exports.WebExtensionDescriptorFront = WebExtensionDescriptorFront;
+registerFront(WebExtensionDescriptorFront);
diff --git a/devtools/client/fronts/descriptors/worker.js b/devtools/client/fronts/descriptors/worker.js
new file mode 100644
index 0000000000..47f016f15f
--- /dev/null
+++ b/devtools/client/fronts/descriptors/worker.js
@@ -0,0 +1,146 @@
+/* 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 {
+  workerDescriptorSpec,
+} = require("resource://devtools/shared/specs/descriptors/worker.js");
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  TargetMixin,
+} = require("resource://devtools/client/fronts/targets/target-mixin.js");
+const {
+  DescriptorMixin,
+} = require("resource://devtools/client/fronts/descriptors/descriptor-mixin.js");
+const DESCRIPTOR_TYPES = require("resource://devtools/client/fronts/descriptors/descriptor-types.js");
+
+class WorkerDescriptorFront extends DescriptorMixin(
+  TargetMixin(FrontClassWithSpec(workerDescriptorSpec))
+) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+
+    this.traits = {};
+  }
+
+  descriptorType = DESCRIPTOR_TYPES.WORKER;
+
+  form(json) {
+    this.actorID = json.actor;
+    this.id = json.id;
+
+    // Save the full form for Target class usage.
+    // Do not use `form` name to avoid colliding with protocol.js's `form` method
+    this.targetForm = json;
+    this._url = json.url;
+    this.type = json.type;
+    this.scope = json.scope;
+    this.fetch = json.fetch;
+    this.traits = json.traits;
+  }
+
+  get name() {
+    // this._url is nullified in TargetMixin#destroy.
+    if (!this.url) {
+      return null;
+    }
+
+    return this.url.split("/").pop();
+  }
+
+  get isWorkerDescriptor() {
+    return true;
+  }
+
+  get isDedicatedWorker() {
+    return this.type === Ci.nsIWorkerDebugger.TYPE_DEDICATED;
+  }
+
+  get isSharedWorker() {
+    return this.type === Ci.nsIWorkerDebugger.TYPE_SHARED;
+  }
+
+  get isServiceWorker() {
+    return this.type === Ci.nsIWorkerDebugger.TYPE_SERVICE;
+  }
+
+  // For now, WorkerDescriptor is morphed into a WorkerTarget when calling this method.
+  // Ideally, we would split this into two distinct classes.
+  async morphWorkerDescriptorIntoWorkerTarget() {
+    // temporary, will be moved once we have a target actor
+    return this.getTarget();
+  }
+
+  async getTarget() {
+    if (this._attach) {
+      return this._attach;
+    }
+
+    this._attach = (async () => {
+      if (this.isDestroyedOrBeingDestroyed()) {
+        return this;
+      }
+
+      if (this.isServiceWorker) {
+        this.registration = await this._getRegistrationIfActive();
+        if (this.registration) {
+          await this.registration.preventShutdown();
+        }
+      }
+
+      if (this.isDestroyedOrBeingDestroyed()) {
+        return this;
+      }
+
+      const workerTargetForm = await super.getTarget();
+
+      // Set the console and thread actor IDs on the form so it is accessible by TargetMixin.getFront
+      this.targetForm.consoleActor = workerTargetForm.consoleActor;
+      this.targetForm.threadActor = workerTargetForm.threadActor;
+      this.targetForm.tracerActor = workerTargetForm.tracerActor;
+
+      if (this.isDestroyedOrBeingDestroyed()) {
+        return this;
+      }
+
+      return this;
+    })();
+    return this._attach;
+  }
+
+  async detach() {
+    try {
+      await super.detach();
+
+      if (this.registration) {
+        // Bug 1644772 - Sometimes, the Browser Toolbox fails opening with a connection timeout
+        // with an exception related to this call to allowShutdown and its usage of detachDebugger API.
+        await this.registration.allowShutdown();
+        this.registration = null;
+      }
+    } catch (e) {
+      this.logDetachError(e, "worker");
+    }
+  }
+
+  async _getRegistrationIfActive() {
+    const { registrations } =
+      await this.client.mainRoot.listServiceWorkerRegistrations();
+    return registrations.find(({ activeWorker }) => {
+      return activeWorker && this.id === activeWorker.id;
+    });
+  }
+
+  reconfigure() {
+    // Toolbox and options panel are calling this method but Worker Target can't be
+    // reconfigured. So we ignore this call here.
+    return Promise.resolve();
+  }
+}
+
+exports.WorkerDescriptorFront = WorkerDescriptorFront;
+registerFront(exports.WorkerDescriptorFront);
diff --git a/devtools/client/fronts/device.js b/devtools/client/fronts/device.js
new file mode 100644
index 0000000000..47f57c30b8
--- /dev/null
+++ b/devtools/client/fronts/device.js
@@ -0,0 +1,23 @@
+/* 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 { deviceSpec } = require("resource://devtools/shared/specs/device.js");
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+
+class DeviceFront extends FrontClassWithSpec(deviceSpec) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+
+    // Attribute name from which to retrieve the actorID out of the target actor's form
+    this.formAttributeName = "deviceActor";
+  }
+}
+
+exports.DeviceFront = DeviceFront;
+registerFront(DeviceFront);
diff --git a/devtools/client/fronts/frame.js b/devtools/client/fronts/frame.js
new file mode 100644
index 0000000000..525f0d1170
--- /dev/null
+++ b/devtools/client/fronts/frame.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";
+
+const { frameSpec } = require("resource://devtools/shared/specs/frame.js");
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+
+class FrameFront extends FrontClassWithSpec(frameSpec) {
+  form(json) {
+    this.displayName = json.displayName;
+    this.arguments = json.arguments;
+    this.type = json.type;
+    this.where = json.where;
+    this.this = json.this;
+    this.data = json;
+    this.asyncCause = json.asyncCause;
+    this.state = json.state;
+  }
+}
+
+module.exports = FrameFront;
+registerFront(FrameFront);
diff --git a/devtools/client/fronts/highlighters.js b/devtools/client/fronts/highlighters.js
new file mode 100644
index 0000000000..b1e159e5fc
--- /dev/null
+++ b/devtools/client/fronts/highlighters.js
@@ -0,0 +1,53 @@
+/* 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 {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  customHighlighterSpec,
+} = require("resource://devtools/shared/specs/highlighters.js");
+const {
+  safeAsyncMethod,
+} = require("resource://devtools/shared/async-utils.js");
+
+class CustomHighlighterFront extends FrontClassWithSpec(customHighlighterSpec) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+
+    // show/hide requests can be triggered while DevTools are closing.
+    this.show = safeAsyncMethod(this.show.bind(this), () => this.isDestroyed());
+    this.hide = safeAsyncMethod(this.hide.bind(this), () => this.isDestroyed());
+
+    this._isShown = false;
+  }
+
+  show(...args) {
+    this._isShown = true;
+    return super.show(...args);
+  }
+
+  hide() {
+    this._isShown = false;
+    return super.hide();
+  }
+
+  isShown() {
+    return this._isShown;
+  }
+
+  destroy() {
+    if (this.isDestroyed()) {
+      return;
+    }
+    super.finalize(); // oneway call, doesn't expect a response.
+    super.destroy();
+  }
+}
+
+exports.CustomHighlighterFront = CustomHighlighterFront;
+registerFront(CustomHighlighterFront);
diff --git a/devtools/client/fronts/inspector.js b/devtools/client/fronts/inspector.js
new file mode 100644
index 0000000000..116993078b
--- /dev/null
+++ b/devtools/client/fronts/inspector.js
@@ -0,0 +1,282 @@
+/* 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 Telemetry = require("resource://devtools/client/shared/telemetry.js");
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  inspectorSpec,
+} = require("resource://devtools/shared/specs/inspector.js");
+
+loader.lazyRequireGetter(
+  this,
+  "captureScreenshot",
+  "resource://devtools/client/shared/screenshot.js",
+  true
+);
+
+const TELEMETRY_EYEDROPPER_OPENED = "DEVTOOLS_EYEDROPPER_OPENED_COUNT";
+const TELEMETRY_EYEDROPPER_OPENED_MENU =
+  "DEVTOOLS_MENU_EYEDROPPER_OPENED_COUNT";
+const SHOW_ALL_ANONYMOUS_CONTENT_PREF =
+  "devtools.inspector.showAllAnonymousContent";
+
+const telemetry = new Telemetry();
+
+/**
+ * Client side of the inspector actor, which is used to create
+ * inspector-related actors, including the walker.
+ */
+class InspectorFront extends FrontClassWithSpec(inspectorSpec) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+
+    this._client = client;
+    this._highlighters = new Map();
+
+    // Attribute name from which to retrieve the actorID out of the target actor's form
+    this.formAttributeName = "inspectorActor";
+
+    // Map of highlighter types to unsettled promises to create a highlighter of that type
+    this._pendingGetHighlighterMap = new Map();
+
+    this.noopStylesheetListener = () => {};
+  }
+
+  // async initialization
+  async initialize() {
+    if (this.initialized) {
+      return this.initialized;
+    }
+
+    // Watch STYLESHEET resources to fill the ResourceCommand cache.
+    // StyleRule front's `get parentStyleSheet()` will query the cache to
+    // retrieve the resource corresponding to the parent stylesheet of a rule.
+    const { resourceCommand } = this.targetFront.commands;
+    // Backup resourceCommand, targetFront.commands might be null in `destroy`.
+    this.resourceCommand = resourceCommand;
+    await resourceCommand.watchResources([resourceCommand.TYPES.STYLESHEET], {
+      onAvailable: this.noopStylesheetListener,
+    });
+
+    // Bail out if the inspector is closed while watchResources was pending
+    if (this.isDestroyed()) {
+      return null;
+    }
+
+    this.initialized = await Promise.all([
+      this._getWalker(),
+      this._getPageStyle(),
+    ]);
+
+    return this.initialized;
+  }
+
+  async _getWalker() {
+    const showAllAnonymousContent = Services.prefs.getBoolPref(
+      SHOW_ALL_ANONYMOUS_CONTENT_PREF
+    );
+    this.walker = await this.getWalker({
+      showAllAnonymousContent,
+    });
+
+    // We need to reparent the RootNode of remote iframe Walkers
+    // so that their parent is the NodeFront of the <iframe>
+    // element, coming from another process/target/WalkerFront.
+    await this.walker.reparentRemoteFrame();
+  }
+
+  hasHighlighter(type) {
+    return this._highlighters.has(type);
+  }
+
+  async _getPageStyle() {
+    this.pageStyle = await super.getPageStyle();
+  }
+
+  async getCompatibilityFront() {
+    if (!this._compatibility) {
+      this._compatibility = await super.getCompatibility();
+    }
+
+    return this._compatibility;
+  }
+
+  destroy() {
+    if (this.isDestroyed()) {
+      return;
+    }
+    this._compatibility = null;
+
+    const { resourceCommand } = this;
+    resourceCommand.unwatchResources([resourceCommand.TYPES.STYLESHEET], {
+      onAvailable: this.noopStylesheetListener,
+    });
+    this.resourceCommand = null;
+
+    this.walker = null;
+
+    // CustomHighlighter fronts are managed by InspectorFront and so will be
+    // automatically destroyed. But we have to clear the `_highlighters`
+    // Map as well as explicitly call `finalize` request on all of them.
+    this.destroyHighlighters();
+    super.destroy();
+  }
+
+  destroyHighlighters() {
+    for (const type of this._highlighters.keys()) {
+      if (this._highlighters.has(type)) {
+        const highlighter = this._highlighters.get(type);
+        if (!highlighter.isDestroyed()) {
+          highlighter.finalize();
+        }
+        this._highlighters.delete(type);
+      }
+    }
+  }
+
+  async getHighlighterByType(typeName) {
+    let highlighter = null;
+    try {
+      highlighter = await super.getHighlighterByType(typeName);
+    } catch (_) {
+      throw new Error(
+        "The target doesn't support " +
+          `creating highlighters by types or ${typeName} is unknown`
+      );
+    }
+    return highlighter;
+  }
+
+  getKnownHighlighter(type) {
+    return this._highlighters.get(type);
+  }
+
+  /**
+   * Return a highlighter instance of the given type.
+   * If an instance was previously created, return it. Else, create and return a new one.
+   *
+   * Store a promise for the request to create a new highlighter. If another request
+   * comes in before that promise is resolved, wait for it to resolve and return the
+   * highlighter instance it resolved with instead of creating a new request.
+   *
+   * @param  {String} type
+   *         Highlighter type
+   * @return {Promise}
+   *         Promise which resolves with a highlighter instance of the given type
+   */
+  async getOrCreateHighlighterByType(type) {
+    let front = this._highlighters.get(type);
+    let pendingGetHighlighter = this._pendingGetHighlighterMap.get(type);
+
+    if (!front && !pendingGetHighlighter) {
+      pendingGetHighlighter = (async () => {
+        const highlighter = await this.getHighlighterByType(type);
+        this._highlighters.set(type, highlighter);
+        this._pendingGetHighlighterMap.delete(type);
+        return highlighter;
+      })();
+
+      this._pendingGetHighlighterMap.set(type, pendingGetHighlighter);
+    }
+
+    if (pendingGetHighlighter) {
+      front = await pendingGetHighlighter;
+    }
+
+    return front;
+  }
+
+  async pickColorFromPage(options) {
+    let screenshot = null;
+
+    // @backward-compat { version 87 } ScreenshotContentActor was only added in 87.
+    //                  When connecting to older server, the eyedropper will  use drawWindow
+    //                  to retrieve the screenshot of the page (that's a decent fallback,
+    //                  even if it doesn't handle remote frames).
+    if (this.targetFront.hasActor("screenshotContent")) {
+      try {
+        // We use the screenshot actors as it can retrieve an image of the current viewport,
+        // handling remote frame if need be.
+        const { data } = await captureScreenshot(this.targetFront, {
+          browsingContextID: this.targetFront.browsingContextID,
+          disableFlash: true,
+          ignoreDprForFileScale: true,
+        });
+        screenshot = data;
+      } catch (e) {
+        // We simply log the error and still call pickColorFromPage as it will default to
+        // use drawWindow in order to get the screenshot of the page (that's a decent
+        // fallback, even if it doesn't handle remote frames).
+        console.error(
+          "Error occured when taking a screenshot for the eyedropper",
+          e
+        );
+      }
+    }
+
+    await super.pickColorFromPage({
+      ...options,
+      screenshot,
+    });
+
+    if (options?.fromMenu) {
+      telemetry.getHistogramById(TELEMETRY_EYEDROPPER_OPENED_MENU).add(true);
+    } else {
+      telemetry.getHistogramById(TELEMETRY_EYEDROPPER_OPENED).add(true);
+    }
+  }
+
+  /**
+   * Given a node grip, return a NodeFront on the right context.
+   *
+   * @param {Object} grip: The node grip.
+   * @returns {Promise<NodeFront|null>} A promise that resolves with  a NodeFront or null
+   *                                    if the NodeFront couldn't be created/retrieved.
+   */
+  async getNodeFrontFromNodeGrip(grip) {
+    return this.getNodeActorFromContentDomReference(grip.contentDomReference);
+  }
+
+  async getNodeActorFromContentDomReference(contentDomReference) {
+    const { browsingContextId } = contentDomReference;
+    // If the contentDomReference lives in the same browsing context id than the
+    // current one, we can directly use the current walker.
+    if (this.targetFront.browsingContextID === browsingContextId) {
+      return this.walker.getNodeActorFromContentDomReference(
+        contentDomReference
+      );
+    }
+
+    // If the contentDomReference has a different browsing context than the current one,
+    // we are either in Fission or in the Multiprocess Browser Toolbox, so we need to
+    // retrieve the walker of the WindowGlobalTarget.
+    // Get the target for this remote frame element
+
+    // Tab and Process Descriptors expose a Watcher, which should be used to
+    // fetch the node's target.
+    let target;
+    const { watcherFront } = this.targetFront.commands;
+    if (watcherFront) {
+      target = await watcherFront.getWindowGlobalTarget(browsingContextId);
+    } else {
+      // For descriptors which don't expose a watcher (e.g. WebExtension)
+      // we used to call RootActor::getBrowsingContextDescriptor, but it was
+      // removed in FF77.
+      // Support for watcher in WebExtension descriptors is Bug 1644341.
+      throw new Error(
+        `Unable to call getNodeActorFromContentDomReference for ${this.targetFront.actorID}`
+      );
+    }
+    const { walker } = await target.getFront("inspector");
+    return walker.getNodeActorFromContentDomReference(contentDomReference);
+  }
+}
+
+exports.InspectorFront = InspectorFront;
+registerFront(InspectorFront);
diff --git a/devtools/client/fronts/inspector/moz.build b/devtools/client/fronts/inspector/moz.build
new file mode 100644
index 0000000000..de635f5947
--- /dev/null
+++ b/devtools/client/fronts/inspector/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(
+    "rule-rewriter.js",
+)
diff --git a/devtools/client/fronts/inspector/rule-rewriter.js b/devtools/client/fronts/inspector/rule-rewriter.js
new file mode 100644
index 0000000000..30d1cf88d2
--- /dev/null
+++ b/devtools/client/fronts/inspector/rule-rewriter.js
@@ -0,0 +1,745 @@
+/* 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/. */
+
+// This file holds various CSS parsing and rewriting utilities.
+// Some entry points of note are:
+// 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";
+
+const { getCSSLexer } = require("resource://devtools/shared/css/lexer.js");
+const {
+  COMMENT_PARSING_HEURISTIC_BYPASS_CHAR,
+  escapeCSSComment,
+  parseNamedDeclarations,
+  unescapeCSSComment,
+} = require("resource://devtools/shared/css/parsing-utils.js");
+
+loader.lazyRequireGetter(
+  this,
+  ["getIndentationFromPrefs", "getIndentationFromString"],
+  "resource://devtools/shared/indentation.js",
+  true
+);
+
+// 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
+// like /*! ... */.
+const EMPTY_COMMENT_START_RX = /^\/\*!?[ \r\n\t\f]*$/;
+// Used to test whether a bit of text ends an empty comment.
+const EMPTY_COMMENT_END_RX = /^[ \r\n\t\f]*\*\//;
+// Used to test whether a string starts with a blank line.
+const BLANK_LINE_RX = /^[ \t]*(?:\r\n|\n|\r|\f|$)/;
+
+/**
+ * Return an object that can be used to rewrite declarations in some
+ * source text.  The source text and parsing are handled in the same
+ * way as @see parseNamedDeclarations, with |parseComments| being true.
+ * Rewriting is done by calling one of the modification functions like
+ * setPropertyEnabled.  The returned object has the same interface
+ * as @see RuleModificationList.
+ *
+ * An example showing how to disable the 3rd property in a rule:
+ *
+ *    let rewriter = new RuleRewriter(isCssPropertyKnown, ruleActor,
+ *                                    ruleActor.authoredText);
+ *    rewriter.setPropertyEnabled(3, "color", false);
+ *    rewriter.apply().then(() => { ... the change is made ... });
+ *
+ * The exported rewriting methods are |renameProperty|, |setPropertyEnabled|,
+ * |createProperty|, |setProperty|, and |removeProperty|.  The |apply|
+ * method can be used to send the edited text to the StyleRuleActor;
+ * |getDefaultIndentation| is useful for the methods requiring a
+ * default indentation value; and |getResult| is useful for testing.
+ *
+ * Additionally, editing will set the |changedDeclarations| property
+ * on this object.  This property has the same form as the |changed|
+ * property of the object returned by |getResult|.
+ *
+ * @param {Function} isCssPropertyKnown
+ *        A function to check if the CSS property is known. This is either an
+ *        internal server function or from the CssPropertiesFront.
+ *        that are supported by the server. Note that if Bug 1222047
+ *        is completed then isCssPropertyKnown will not need to be passed in.
+ *        The CssProperty front will be able to obtained directly from the
+ *        RuleRewriter.
+ * @param {StyleRuleFront} rule The style rule to use.  Note that this
+ *        is only needed by the |apply| and |getDefaultIndentation| methods;
+ *        and in particular for testing it can be |null|.
+ * @param {String} inputString The CSS source text to parse and modify.
+ * @return {Object} an object that can be used to rewrite the input text.
+ */
+function RuleRewriter(isCssPropertyKnown, rule, inputString) {
+  this.rule = rule;
+  this.isCssPropertyKnown = isCssPropertyKnown;
+  // The RuleRewriter sends CSS rules as text to the server, but with this modifications
+  // array, it also sends the list of changes so the server doesn't have to re-parse the
+  // rule if it needs to track what changed.
+  this.modifications = [];
+
+  // Keep track of which any declarations we had to rewrite while
+  // performing the requested action.
+  this.changedDeclarations = {};
+
+  // If not null, a promise that must be wait upon before |apply| can
+  // do its work.
+  this.editPromise = null;
+
+  // If the |defaultIndentation| property is set, then it is used;
+  // otherwise the RuleRewriter will try to compute the default
+  // indentation based on the style sheet's text.  This override
+  // facility is for testing.
+  this.defaultIndentation = null;
+
+  this.startInitialization(inputString);
+}
+
+RuleRewriter.prototype = {
+  /**
+   * An internal function to initialize the rewriter with a given
+   * input string.
+   *
+   * @param {String} inputString the input to use
+   */
+  startInitialization(inputString) {
+    this.inputString = inputString;
+    // Whether there are any newlines in the input text.
+    this.hasNewLine = /[\r\n]/.test(this.inputString);
+    // The declarations.
+    this.declarations = parseNamedDeclarations(
+      this.isCssPropertyKnown,
+      this.inputString,
+      true
+    );
+    this.decl = null;
+    this.result = null;
+  },
+
+  /**
+   * An internal function to complete initialization and set some
+   * properties for further processing.
+   *
+   * @param {Number} index The index of the property to modify
+   */
+  completeInitialization(index) {
+    if (index < 0) {
+      throw new Error("Invalid index " + index + ". Expected positive integer");
+    }
+    // |decl| is the declaration to be rewritten, or null if there is no
+    // declaration corresponding to |index|.
+    // |result| is used to accumulate the result text.
+    if (index < this.declarations.length) {
+      this.decl = this.declarations[index];
+      this.result = this.inputString.substring(0, this.decl.offsets[0]);
+    } else {
+      this.decl = null;
+      this.result = this.inputString;
+    }
+  },
+
+  /**
+   * A helper function to compute the indentation of some text.  This
+   * examines the rule's existing text to guess the indentation to use;
+   * unlike |getDefaultIndentation|, which examines the entire style
+   * sheet.
+   *
+   * @param {String} string the input text
+   * @param {Number} offset the offset at which to compute the indentation
+   * @return {String} the indentation at the indicated position
+   */
+  getIndentation(string, offset) {
+    let originalOffset = offset;
+    for (--offset; offset >= 0; --offset) {
+      const c = string[offset];
+      if (c === "\r" || c === "\n" || c === "\f") {
+        return string.substring(offset + 1, originalOffset);
+      }
+      if (c !== " " && c !== "\t") {
+        // Found some non-whitespace character before we found a newline
+        // -- let's reset the starting point and keep going, as we saw
+        // something on the line before the declaration.
+        originalOffset = offset;
+      }
+    }
+    // Ran off the end.
+    return "";
+  },
+
+  /**
+   * Modify a property value to ensure it is "lexically safe" for
+   * insertion into a style sheet.  This function doesn't attempt to
+   * ensure that the resulting text is a valid value for the given
+   * property; but rather just that inserting the text into the style
+   * sheet will not cause unwanted changes to other rules or
+   * declarations.
+   *
+   * @param {String} text The input text.  This should include the trailing ";".
+   * @return {Array} An array of the form [anySanitized, text], where
+   *                 |anySanitized| is a boolean that indicates
+   *                  whether anything substantive has changed; and
+   *                  where |text| is the text that has been rewritten
+   *                  to be "lexically safe".
+   */
+  sanitizePropertyValue(text) {
+    // Start by stripping any trailing ";".  This is done here to
+    // avoid the case where the user types "url(" (which is turned
+    // into "url(;" by the rule view before coming here), being turned
+    // into "url(;)" by this code -- due to the way "url(...)" is
+    // parsed as a single token.
+    text = text.replace(/;$/, "");
+    const lexer = getCSSLexer(text);
+
+    let result = "";
+    let previousOffset = 0;
+    const parenStack = [];
+    let anySanitized = false;
+
+    // Push a closing paren on the stack.
+    const pushParen = (token, closer) => {
+      result =
+        result +
+        text.substring(previousOffset, token.startOffset) +
+        text.substring(token.startOffset, token.endOffset);
+      // We set the location of the paren in a funny way, to handle
+      // the case where we've seen a function token, where the paren
+      // appears at the end.
+      parenStack.push({ closer, offset: result.length - 1 });
+      previousOffset = token.endOffset;
+    };
+
+    // Pop a closing paren from the stack.
+    const popSomeParens = closer => {
+      while (parenStack.length) {
+        const paren = parenStack.pop();
+
+        if (paren.closer === closer) {
+          return true;
+        }
+
+        // Found a non-matching closing paren, so quote it.  Note that
+        // these are processed in reverse order.
+        result =
+          result.substring(0, paren.offset) +
+          "\\" +
+          result.substring(paren.offset);
+        anySanitized = true;
+      }
+      return false;
+    };
+
+    while (true) {
+      const token = lexer.nextToken();
+      if (!token) {
+        break;
+      }
+
+      if (token.tokenType === "symbol") {
+        switch (token.text) {
+          case ";":
+            // We simply drop the ";" here.  This lets us cope with
+            // declarations that don't have a ";" and also other
+            // termination.  The caller handles adding the ";" again.
+            result += text.substring(previousOffset, token.startOffset);
+            previousOffset = token.endOffset;
+            break;
+
+          case "{":
+            pushParen(token, "}");
+            break;
+
+          case "(":
+            pushParen(token, ")");
+            break;
+
+          case "[":
+            pushParen(token, "]");
+            break;
+
+          case "}":
+          case ")":
+          case "]":
+            // Did we find an unmatched close bracket?
+            if (!popSomeParens(token.text)) {
+              // Copy out text from |previousOffset|.
+              result += text.substring(previousOffset, token.startOffset);
+              // Quote the offending symbol.
+              result += "\\" + token.text;
+              previousOffset = token.endOffset;
+              anySanitized = true;
+            }
+            break;
+        }
+      } else if (token.tokenType === "function") {
+        pushParen(token, ")");
+      }
+    }
+
+    // Fix up any unmatched parens.
+    popSomeParens(null);
+
+    // Copy out any remaining text, then any needed terminators.
+    result += text.substring(previousOffset, text.length);
+    const eofFixup = lexer.performEOFFixup("", true);
+    if (eofFixup) {
+      anySanitized = true;
+      result += eofFixup;
+    }
+    return [anySanitized, result];
+  },
+
+  /**
+   * Start at |index| and skip whitespace
+   * backward in |string|.  Return the index of the first
+   * non-whitespace character, or -1 if the entire string was
+   * whitespace.
+   * @param {String} string the input string
+   * @param {Number} index the index at which to start
+   * @return {Number} index of the first non-whitespace character, or -1
+   */
+  skipWhitespaceBackward(string, index) {
+    for (
+      --index;
+      index >= 0 && (string[index] === " " || string[index] === "\t");
+      --index
+    ) {
+      // Nothing.
+    }
+    return index;
+  },
+
+  /**
+   * Terminate a given declaration, if needed.
+   *
+   * @param {Number} index The index of the rule to possibly
+   *                       terminate.  It might be invalid, so this
+   *                       function must check for that.
+   */
+  maybeTerminateDecl(index) {
+    if (
+      index < 0 ||
+      index >= this.declarations.length ||
+      // No need to rewrite declarations in comments.
+      "commentOffsets" in this.declarations[index]
+    ) {
+      return;
+    }
+
+    const termDecl = this.declarations[index];
+    let endIndex = termDecl.offsets[1];
+    // Due to an oddity of the lexer, we might have gotten a bit of
+    // extra whitespace in a trailing bad_url token -- so be sure to
+    // skip that as well.
+    endIndex = this.skipWhitespaceBackward(this.result, endIndex) + 1;
+
+    const trailingText = this.result.substring(endIndex);
+    if (termDecl.terminator) {
+      // Insert the terminator just at the end of the declaration,
+      // before any trailing whitespace.
+      this.result =
+        this.result.substring(0, endIndex) + termDecl.terminator + trailingText;
+      // In a couple of cases, we may have had to add something to
+      // terminate the declaration, but the termination did not
+      // actually affect the property's value -- and at this spot, we
+      // only care about reporting value changes.  In particular, we
+      // might have added a plain ";", or we might have terminated a
+      // comment with "*/;".  Neither of these affect the value.
+      if (termDecl.terminator !== ";" && termDecl.terminator !== "*/;") {
+        this.changedDeclarations[index] =
+          termDecl.value + termDecl.terminator.slice(0, -1);
+      }
+    }
+    // If the rule generally has newlines, but this particular
+    // declaration doesn't have a trailing newline, insert one now.
+    // Maybe this style is too weird to bother with.
+    if (this.hasNewLine && !NEWLINE_RX.test(trailingText)) {
+      this.result += "\n";
+    }
+  },
+
+  /**
+   * Sanitize the given property value and return the sanitized form.
+   * If the property is rewritten during sanitization, make a note in
+   * |changedDeclarations|.
+   *
+   * @param {String} text The property text.
+   * @param {Number} index The index of the property.
+   * @return {String} The sanitized text.
+   */
+  sanitizeText(text, index) {
+    const [anySanitized, sanitizedText] = this.sanitizePropertyValue(text);
+    if (anySanitized) {
+      this.changedDeclarations[index] = sanitizedText;
+    }
+    return sanitizedText;
+  },
+
+  /**
+   * Rename a declaration.
+   *
+   * @param {Number} index index of the property in the rule.
+   * @param {String} name current name of the property
+   * @param {String} newName new name of the property
+   */
+  renameProperty(index, name, newName) {
+    this.completeInitialization(index);
+    this.result += CSS.escape(newName);
+    // We could conceivably compute the name offsets instead so we
+    // could preserve white space and comments on the LHS of the ":".
+    this.completeCopying(this.decl.colonOffsets[0]);
+    this.modifications.push({ type: "set", index, name, newName });
+  },
+
+  /**
+   * Enable or disable a declaration
+   *
+   * @param {Number} index index of the property in the rule.
+   * @param {String} name current name of the property
+   * @param {Boolean} isEnabled true if the property should be enabled;
+   *                        false if it should be disabled
+   */
+  setPropertyEnabled(index, name, isEnabled) {
+    this.completeInitialization(index);
+    const decl = this.decl;
+    const priority = decl.priority;
+    let copyOffset = decl.offsets[1];
+    if (isEnabled) {
+      // Enable it.  First see if the comment start can be deleted.
+      const commentStart = decl.commentOffsets[0];
+      if (EMPTY_COMMENT_START_RX.test(this.result.substring(commentStart))) {
+        this.result = this.result.substring(0, commentStart);
+      } else {
+        this.result += "*/ ";
+      }
+
+      // Insert the name and value separately, so we can report
+      // sanitization changes properly.
+      const commentNamePart = this.inputString.substring(
+        decl.offsets[0],
+        decl.colonOffsets[1]
+      );
+      this.result += unescapeCSSComment(commentNamePart);
+
+      // When uncommenting, we must be sure to sanitize the text, to
+      // avoid things like /* decl: }; */, which will be accepted as
+      // a property but which would break the entire style sheet.
+      let newText = this.inputString.substring(
+        decl.colonOffsets[1],
+        decl.offsets[1]
+      );
+      newText = cssTrimRight(unescapeCSSComment(newText));
+      this.result += this.sanitizeText(newText, index) + ";";
+
+      // See if the comment end can be deleted.
+      const trailingText = this.inputString.substring(decl.offsets[1]);
+      if (EMPTY_COMMENT_END_RX.test(trailingText)) {
+        copyOffset = decl.commentOffsets[1];
+      } else {
+        this.result += " /*";
+      }
+    } else {
+      // Disable it.  Note that we use our special comment syntax
+      // here.
+      const declText = this.inputString.substring(
+        decl.offsets[0],
+        decl.offsets[1]
+      );
+      this.result +=
+        "/*" +
+        COMMENT_PARSING_HEURISTIC_BYPASS_CHAR +
+        " " +
+        escapeCSSComment(declText) +
+        " */";
+    }
+    this.completeCopying(copyOffset);
+
+    if (isEnabled) {
+      this.modifications.push({
+        type: "set",
+        index,
+        name,
+        value: decl.value,
+        priority,
+      });
+    } else {
+      this.modifications.push({ type: "disable", index, name });
+    }
+  },
+
+  /**
+   * Return a promise that will be resolved to the default indentation
+   * of the rule.  This is a helper for internalCreateProperty.
+   *
+   * @return {Promise} a promise that will be resolved to a string
+   *         that holds the default indentation that should be used
+   *         for edits to the rule.
+   */
+  async getDefaultIndentation() {
+    if (!this.rule.parentStyleSheet) {
+      return null;
+    }
+
+    const prefIndent = getIndentationFromPrefs();
+    if (prefIndent) {
+      const { indentUnit, indentWithTabs } = prefIndent;
+      return indentWithTabs ? "\t" : " ".repeat(indentUnit);
+    }
+
+    const styleSheetsFront = await this.rule.targetFront.getFront(
+      "stylesheets"
+    );
+    const { str: source } = await styleSheetsFront.getText(
+      this.rule.parentStyleSheet.resourceId
+    );
+    const { indentUnit, indentWithTabs } = getIndentationFromString(source);
+    return indentWithTabs ? "\t" : " ".repeat(indentUnit);
+  },
+
+  /**
+   * An internal function to create a new declaration.  This does all
+   * the work of |createProperty|.
+   *
+   * @param {Number} index index of the property in the rule.
+   * @param {String} name name of the new property
+   * @param {String} value value of the new property
+   * @param {String} priority priority of the new property; either
+   *                          the empty string or "important"
+   * @param {Boolean} enabled True if the new property should be
+   *                          enabled, false if disabled
+   * @return {Promise} a promise that is resolved when the edit has
+   *                   completed
+   */
+  async internalCreateProperty(index, name, value, priority, enabled) {
+    this.completeInitialization(index);
+    let newIndentation = "";
+    if (this.hasNewLine) {
+      if (this.declarations.length) {
+        newIndentation = this.getIndentation(
+          this.inputString,
+          this.declarations[0].offsets[0]
+        );
+      } else if (this.defaultIndentation) {
+        newIndentation = this.defaultIndentation;
+      } else {
+        newIndentation = await this.getDefaultIndentation();
+      }
+    }
+
+    this.maybeTerminateDecl(index - 1);
+
+    // If we generally have newlines, and if skipping whitespace
+    // backward stops at a newline, then insert our text before that
+    // whitespace.  This ensures the indentation we computed is what
+    // is actually used.
+    let savedWhitespace = "";
+    if (this.hasNewLine) {
+      const wsOffset = this.skipWhitespaceBackward(
+        this.result,
+        this.result.length
+      );
+      if (this.result[wsOffset] === "\r" || this.result[wsOffset] === "\n") {
+        savedWhitespace = this.result.substring(wsOffset + 1);
+        this.result = this.result.substring(0, wsOffset + 1);
+      }
+    }
+
+    let newText = CSS.escape(name) + ": " + this.sanitizeText(value, index);
+    if (priority === "important") {
+      newText += " !important";
+    }
+    newText += ";";
+
+    if (!enabled) {
+      newText =
+        "/*" +
+        COMMENT_PARSING_HEURISTIC_BYPASS_CHAR +
+        " " +
+        escapeCSSComment(newText) +
+        " */";
+    }
+
+    this.result += newIndentation + newText;
+    if (this.hasNewLine) {
+      this.result += "\n";
+    }
+    this.result += savedWhitespace;
+
+    if (this.decl) {
+      // Still want to copy in the declaration previously at this
+      // index.
+      this.completeCopying(this.decl.offsets[0]);
+    }
+  },
+
+  /**
+   * Create a new declaration.
+   *
+   * @param {Number} index index of the property in the rule.
+   * @param {String} name name of the new property
+   * @param {String} value value of the new property
+   * @param {String} priority priority of the new property; either
+   *                          the empty string or "important"
+   * @param {Boolean} enabled True if the new property should be
+   *                          enabled, false if disabled
+   */
+  createProperty(index, name, value, priority, enabled) {
+    this.editPromise = this.internalCreateProperty(
+      index,
+      name,
+      value,
+      priority,
+      enabled
+    );
+    // Log the modification only if the created property is enabled.
+    if (enabled) {
+      this.modifications.push({ type: "set", index, name, value, priority });
+    }
+  },
+
+  /**
+   * Set a declaration's value.
+   *
+   * @param {Number} index index of the property in the rule.
+   *                       This can be -1 in the case where
+   *                       the rule does not support setRuleText;
+   *                       generally for setting properties
+   *                       on an element's style.
+   * @param {String} name the property's name
+   * @param {String} value the property's value
+   * @param {String} priority the property's priority, either the empty
+   *                          string or "important"
+   */
+  setProperty(index, name, value, priority) {
+    this.completeInitialization(index);
+    // We might see a "set" on a previously non-existent property; in
+    // that case, act like "create".
+    if (!this.decl) {
+      this.createProperty(index, name, value, priority, true);
+      return;
+    }
+
+    // Note that this assumes that "set" never operates on disabled
+    // properties.
+    this.result +=
+      this.inputString.substring(
+        this.decl.offsets[0],
+        this.decl.colonOffsets[1]
+      ) + this.sanitizeText(value, index);
+
+    if (priority === "important") {
+      this.result += " !important";
+    }
+    this.result += ";";
+    this.completeCopying(this.decl.offsets[1]);
+    this.modifications.push({ type: "set", index, name, value, priority });
+  },
+
+  /**
+   * Remove a declaration.
+   *
+   * @param {Number} index index of the property in the rule.
+   * @param {String} name the name of the property to remove
+   */
+  removeProperty(index, name) {
+    this.completeInitialization(index);
+
+    // If asked to remove a property that does not exist, bail out.
+    if (!this.decl) {
+      return;
+    }
+
+    // If the property is disabled, then first enable it, and then
+    // delete it.  We take this approach because we want to remove the
+    // entire comment if possible; but the logic for dealing with
+    // comments is hairy and already implemented in
+    // setPropertyEnabled.
+    if (this.decl.commentOffsets) {
+      this.setPropertyEnabled(index, name, true);
+      this.startInitialization(this.result);
+      this.completeInitialization(index);
+    }
+
+    let copyOffset = this.decl.offsets[1];
+    // Maybe removing this rule left us with a completely blank
+    // line.  In this case, we'll delete the whole thing.  We only
+    // bother with this if we're looking at sources that already
+    // have a newline somewhere.
+    if (this.hasNewLine) {
+      const nlOffset = this.skipWhitespaceBackward(
+        this.result,
+        this.decl.offsets[0]
+      );
+      if (
+        nlOffset < 0 ||
+        this.result[nlOffset] === "\r" ||
+        this.result[nlOffset] === "\n"
+      ) {
+        const trailingText = this.inputString.substring(copyOffset);
+        const match = BLANK_LINE_RX.exec(trailingText);
+        if (match) {
+          this.result = this.result.substring(0, nlOffset + 1);
+          copyOffset += match[0].length;
+        }
+      }
+    }
+    this.completeCopying(copyOffset);
+    this.modifications.push({ type: "remove", index, name });
+  },
+
+  /**
+   * An internal function to copy any trailing text to the output
+   * string.
+   *
+   * @param {Number} copyOffset Offset into |inputString| of the
+   *        final text to copy to the output string.
+   */
+  completeCopying(copyOffset) {
+    // Add the trailing text.
+    this.result += this.inputString.substring(copyOffset);
+  },
+
+  /**
+   * Apply the modifications in this object to the associated rule.
+   *
+   * @return {Promise} A promise which will be resolved when the modifications
+   *         are complete.
+   */
+  apply() {
+    return Promise.resolve(this.editPromise).then(() => {
+      return this.rule.setRuleText(this.result, this.modifications);
+    });
+  },
+
+  /**
+   * Get the result of the rewriting.  This is used for testing.
+   *
+   * @return {object} an object of the form {changed: object, text: string}
+   *                  |changed| is an object where each key is
+   *                  the index of a property whose value had to be
+   *                  rewritten during the sanitization process, and
+   *                  whose value is the new text of the property.
+   *                  |text| is the rewritten text of the rule.
+   */
+  getResult() {
+    return { changed: this.changedDeclarations, text: this.result };
+  },
+};
+
+/**
+ * Like trimRight, but only trims CSS-allowed whitespace.
+ */
+function cssTrimRight(str) {
+  const match = /^(.*?)[ \t\r\n\f]*$/.exec(str);
+  if (match) {
+    return match[1];
+  }
+  return str;
+}
+
+module.exports = RuleRewriter;
diff --git a/devtools/client/fronts/layout.js b/devtools/client/fronts/layout.js
new file mode 100644
index 0000000000..6f84032ba6
--- /dev/null
+++ b/devtools/client/fronts/layout.js
@@ -0,0 +1,184 @@
+/* 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 {
+  safeAsyncMethod,
+} = require("resource://devtools/shared/async-utils.js");
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  flexboxSpec,
+  flexItemSpec,
+  gridSpec,
+  layoutSpec,
+} = require("resource://devtools/shared/specs/layout.js");
+
+class FlexboxFront extends FrontClassWithSpec(flexboxSpec) {
+  form(form) {
+    this._form = form;
+  }
+
+  /**
+   * In some cases, the FlexboxActor already knows the NodeActor ID of the node where the
+   * flexbox is located. In such cases, this getter returns the NodeFront for it.
+   */
+  get containerNodeFront() {
+    if (!this._form.containerNodeActorID) {
+      return null;
+    }
+
+    return this.conn.getFrontByID(this._form.containerNodeActorID);
+  }
+
+  /**
+   * Get the WalkerFront instance that owns this FlexboxFront.
+   */
+  get walkerFront() {
+    return this.parentFront.walkerFront;
+  }
+
+  /**
+   * Get the computed style properties for the flex container.
+   */
+  get properties() {
+    return this._form.properties;
+  }
+}
+
+class FlexItemFront extends FrontClassWithSpec(flexItemSpec) {
+  form(form) {
+    this._form = form;
+  }
+
+  /**
+   * Get the flex item sizing data.
+   */
+  get flexItemSizing() {
+    return this._form.flexItemSizing;
+  }
+
+  /**
+   * In some cases, the FlexItemActor already knows the NodeActor ID of the node where the
+   * flex item is located. In such cases, this getter returns the NodeFront for it.
+   */
+  get nodeFront() {
+    if (!this._form.nodeActorID) {
+      return null;
+    }
+
+    return this.conn.getFrontByID(this._form.nodeActorID);
+  }
+
+  /**
+   * Get the WalkerFront instance that owns this FlexItemFront.
+   */
+  get walkerFront() {
+    return this.parentFront.walkerFront;
+  }
+
+  /**
+   * Get the computed style properties for the flex item.
+   */
+  get computedStyle() {
+    return this._form.computedStyle;
+  }
+
+  /**
+   * Get the style properties for the flex item.
+   */
+  get properties() {
+    return this._form.properties;
+  }
+}
+
+class GridFront extends FrontClassWithSpec(gridSpec) {
+  form(form) {
+    this._form = form;
+  }
+
+  /**
+   * In some cases, the GridActor already knows the NodeActor ID of the node where the
+   * grid is located. In such cases, this getter returns the NodeFront for it.
+   */
+  get containerNodeFront() {
+    if (!this._form.containerNodeActorID) {
+      return null;
+    }
+
+    return this.conn.getFrontByID(this._form.containerNodeActorID);
+  }
+
+  /**
+   * Get the WalkerFront instance that owns this GridFront.
+   */
+  get walkerFront() {
+    return this.parentFront.walkerFront;
+  }
+
+  /**
+   * Get the text direction of the grid container.
+   */
+  get direction() {
+    return this._form.direction;
+  }
+
+  /**
+   * Getter for the grid fragments data.
+   */
+  get gridFragments() {
+    return this._form.gridFragments;
+  }
+
+  /**
+   * Get whether or not the grid is a subgrid.
+   */
+  get isSubgrid() {
+    return !!this._form.isSubgrid;
+  }
+
+  /**
+   * Get the writing mode of the grid container.
+   */
+  get writingMode() {
+    return this._form.writingMode;
+  }
+}
+
+class LayoutFront extends FrontClassWithSpec(layoutSpec) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+
+    this.getAllGrids = safeAsyncMethod(
+      this.getAllGrids.bind(this),
+      () => this.isDestroyed(),
+      []
+    );
+  }
+  /**
+   * Get the WalkerFront instance that owns this LayoutFront.
+   */
+  get walkerFront() {
+    return this.parentFront;
+  }
+
+  getAllGrids() {
+    if (!this.walkerFront.rootNode) {
+      return [];
+    }
+    return this.getGrids(this.walkerFront.rootNode);
+  }
+}
+
+exports.FlexboxFront = FlexboxFront;
+registerFront(FlexboxFront);
+exports.FlexItemFront = FlexItemFront;
+registerFront(FlexItemFront);
+exports.GridFront = GridFront;
+registerFront(GridFront);
+exports.LayoutFront = LayoutFront;
+registerFront(LayoutFront);
diff --git a/devtools/client/fronts/manifest.js b/devtools/client/fronts/manifest.js
new file mode 100644
index 0000000000..0cd720d278
--- /dev/null
+++ b/devtools/client/fronts/manifest.js
@@ -0,0 +1,25 @@
+/* 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 {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  manifestSpec,
+} = require("resource://devtools/shared/specs/manifest.js");
+
+class ManifestFront extends FrontClassWithSpec(manifestSpec) {
+  constructor(client) {
+    super(client);
+
+    // attribute name from which to retrieve the actorID out of the target actor's form
+    this.formAttributeName = "manifestActor";
+  }
+}
+
+exports.ManifestFront = ManifestFront;
+registerFront(ManifestFront);
diff --git a/devtools/client/fronts/memory.js b/devtools/client/fronts/memory.js
new file mode 100644
index 0000000000..80ba417b67
--- /dev/null
+++ b/devtools/client/fronts/memory.js
@@ -0,0 +1,116 @@
+/* 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 { memorySpec } = require("resource://devtools/shared/specs/memory.js");
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+
+const lazy = {};
+ChromeUtils.defineESModuleGetters(lazy, {
+  FileUtils: "resource://gre/modules/FileUtils.sys.mjs",
+});
+loader.lazyRequireGetter(
+  this,
+  "HeapSnapshotFileUtils",
+  "resource://devtools/shared/heapsnapshot/HeapSnapshotFileUtils.js"
+);
+
+class MemoryFront extends FrontClassWithSpec(memorySpec) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+    this._client = client;
+    this.heapSnapshotFileActorID = null;
+
+    // Attribute name from which to retrieve the actorID out of the target actor's form
+    this.formAttributeName = "memoryActor";
+  }
+
+  /**
+   * Save a heap snapshot, transfer it from the server to the client if the
+   * server and client do not share a file system, and return the local file
+   * path to the heap snapshot.
+   *
+   * Note that this is safe to call for actors inside sandoxed child processes,
+   * as we jump through the correct IPDL hoops.
+   *
+   * @params Boolean options.forceCopy
+   *         Always force a bulk data copy of the saved heap snapshot, even when
+   *         the server and client share a file system.
+   *
+   * @params {Object|undefined} options.boundaries
+   *         The boundaries for the heap snapshot. See
+   *         ChromeUtils.webidl for more details.
+   *
+   * @returns Promise<String>
+   */
+  async saveHeapSnapshot(options = {}) {
+    const snapshotId = await super.saveHeapSnapshot(options.boundaries);
+
+    if (
+      !options.forceCopy &&
+      (await HeapSnapshotFileUtils.haveHeapSnapshotTempFile(snapshotId))
+    ) {
+      return HeapSnapshotFileUtils.getHeapSnapshotTempFilePath(snapshotId);
+    }
+
+    return this.transferHeapSnapshot(snapshotId);
+  }
+
+  /**
+   * Given that we have taken a heap snapshot with the given id, transfer the
+   * heap snapshot file to the client. The path to the client's local file is
+   * returned.
+   *
+   * @param {String} snapshotId
+   *
+   * @returns Promise<String>
+   */
+  async transferHeapSnapshot(snapshotId) {
+    if (!this.heapSnapshotFileActorID) {
+      const form = await this._client.mainRoot.rootForm;
+      this.heapSnapshotFileActorID = form.heapSnapshotFileActor;
+    }
+
+    try {
+      const request = this._client.request({
+        to: this.heapSnapshotFileActorID,
+        type: "transferHeapSnapshot",
+        snapshotId,
+      });
+
+      const outFilePath =
+        HeapSnapshotFileUtils.getNewUniqueHeapSnapshotTempFilePath();
+      const outFile = new lazy.FileUtils.File(outFilePath);
+      const outFileStream = lazy.FileUtils.openSafeFileOutputStream(outFile);
+
+      // This request is a bulk request. That's why the result of the request is
+      // an object with the `copyTo` function that can transfer the data to
+      // another stream.
+      // See devtools/shared/transport/transport.js to know more about this mode.
+      const { copyTo } = await request;
+      await copyTo(outFileStream);
+
+      lazy.FileUtils.closeSafeFileOutputStream(outFileStream);
+      return outFilePath;
+    } catch (e) {
+      if (e.error) {
+        // This isn't a real error, rather this is a message coming from the
+        // server. So let's throw a real error instead.
+        throw new Error(
+          `The server's actor threw an error: (${e.error}) ${e.message}`
+        );
+      }
+
+      // Otherwise, rethrow the error
+      throw e;
+    }
+  }
+}
+
+exports.MemoryFront = MemoryFront;
+registerFront(MemoryFront);
diff --git a/devtools/client/fronts/moz.build b/devtools/client/fronts/moz.build
new file mode 100644
index 0000000000..b81c4c3b1a
--- /dev/null
+++ b/devtools/client/fronts/moz.build
@@ -0,0 +1,59 @@
+# -*- 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/.
+
+DIRS += [
+    "addon",
+    "descriptors",
+    "inspector",
+    "targets",
+    "worker",
+]
+
+DevToolsModules(
+    "accessibility.js",
+    "animation.js",
+    "array-buffer.js",
+    "blackboxing.js",
+    "breakpoint-list.js",
+    "changes.js",
+    "compatibility.js",
+    "css-properties.js",
+    "device.js",
+    "frame.js",
+    "highlighters.js",
+    "inspector.js",
+    "layout.js",
+    "manifest.js",
+    "memory.js",
+    "network-content.js",
+    "network-parent.js",
+    "node.js",
+    "object.js",
+    "objects-manager.js",
+    "page-style.js",
+    "perf.js",
+    "preference.js",
+    "private-properties-iterator.js",
+    "property-iterator.js",
+    "reflow.js",
+    "responsive.js",
+    "root.js",
+    "screenshot-content.js",
+    "screenshot.js",
+    "source.js",
+    "storage.js",
+    "string.js",
+    "style-rule.js",
+    "style-sheets.js",
+    "symbol-iterator.js",
+    "target-configuration.js",
+    "thread-configuration.js",
+    "thread.js",
+    "tracer.js",
+    "walker.js",
+    "watcher.js",
+    "webconsole.js",
+)
diff --git a/devtools/client/fronts/network-content.js b/devtools/client/fronts/network-content.js
new file mode 100644
index 0000000000..43b4154c56
--- /dev/null
+++ b/devtools/client/fronts/network-content.js
@@ -0,0 +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";
+
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  networkContentSpec,
+} = require("resource://devtools/shared/specs/network-content.js");
+
+class NetworkContentFront extends FrontClassWithSpec(networkContentSpec) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+    // Attribute name from which to retrieve the actorID out of the target actor's form
+    this.formAttributeName = "networkContentActor";
+  }
+}
+
+exports.NetworkContentFront = NetworkContentFront;
+registerFront(NetworkContentFront);
diff --git a/devtools/client/fronts/network-parent.js b/devtools/client/fronts/network-parent.js
new file mode 100644
index 0000000000..c2b68449b5
--- /dev/null
+++ b/devtools/client/fronts/network-parent.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";
+
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  networkParentSpec,
+} = require("resource://devtools/shared/specs/network-parent.js");
+
+/**
+ * Client side for the network actor, used for managing network requests.
+ */
+
+class NetworkParentFront extends FrontClassWithSpec(networkParentSpec) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+    // Attribute name from which to retrieve the actorID out of the target actor's form
+    this.formAttributeName = "networkParentActor";
+  }
+}
+
+registerFront(NetworkParentFront);
diff --git a/devtools/client/fronts/node.js b/devtools/client/fronts/node.js
new file mode 100644
index 0000000000..8df63f2c1b
--- /dev/null
+++ b/devtools/client/fronts/node.js
@@ -0,0 +1,633 @@
+/* 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 {
+  FrontClassWithSpec,
+  types,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  nodeSpec,
+  nodeListSpec,
+} = require("resource://devtools/shared/specs/node.js");
+const {
+  SimpleStringFront,
+} = require("resource://devtools/client/fronts/string.js");
+
+loader.lazyRequireGetter(
+  this,
+  "nodeConstants",
+  "resource://devtools/shared/dom-node-constants.js"
+);
+
+const { XPCOMUtils } = ChromeUtils.importESModule(
+  "resource://gre/modules/XPCOMUtils.sys.mjs"
+);
+
+XPCOMUtils.defineLazyPreferenceGetter(
+  this,
+  "browserToolboxScope",
+  "devtools.browsertoolbox.scope"
+);
+
+const BROWSER_TOOLBOX_SCOPE_EVERYTHING = "everything";
+
+const HIDDEN_CLASS = "__fx-devtools-hide-shortcut__";
+
+/**
+ * Client side of a node list as returned by querySelectorAll()
+ */
+class NodeListFront extends FrontClassWithSpec(nodeListSpec) {
+  marshallPool() {
+    return this.getParent();
+  }
+
+  // Update the object given a form representation off the wire.
+  form(json) {
+    this.length = json.length;
+  }
+
+  item(index) {
+    return super.item(index).then(response => {
+      return response.node;
+    });
+  }
+
+  items(start, end) {
+    return super.items(start, end).then(response => {
+      return response.nodes;
+    });
+  }
+}
+
+exports.NodeListFront = NodeListFront;
+registerFront(NodeListFront);
+
+/**
+ * Convenience API for building a list of attribute modifications
+ * for the `modifyAttributes` request.
+ */
+class AttributeModificationList {
+  constructor(node) {
+    this.node = node;
+    this.modifications = [];
+  }
+
+  apply() {
+    const ret = this.node.modifyAttributes(this.modifications);
+    return ret;
+  }
+
+  destroy() {
+    this.node = null;
+    this.modification = null;
+  }
+
+  setAttributeNS(ns, name, value) {
+    this.modifications.push({
+      attributeNamespace: ns,
+      attributeName: name,
+      newValue: value,
+    });
+  }
+
+  setAttribute(name, value) {
+    this.setAttributeNS(undefined, name, value);
+  }
+
+  removeAttributeNS(ns, name) {
+    this.setAttributeNS(ns, name, undefined);
+  }
+
+  removeAttribute(name) {
+    this.setAttributeNS(undefined, name, undefined);
+  }
+}
+
+/**
+ * Client side of the node actor.
+ *
+ * Node fronts are strored in a tree that mirrors the DOM tree on the
+ * server, but with a few key differences:
+ *  - Not all children will be necessary loaded for each node.
+ *  - The order of children isn't guaranteed to be the same as the DOM.
+ * Children are stored in a doubly-linked list, to make addition/removal
+ * and traversal quick.
+ *
+ * Due to the order/incompleteness of the child list, it is safe to use
+ * the parent node from clients, but the `children` request should be used
+ * to traverse children.
+ */
+class NodeFront extends FrontClassWithSpec(nodeSpec) {
+  constructor(conn, targetFront, parentFront) {
+    super(conn, targetFront, parentFront);
+    // The parent node
+    this._parent = null;
+    // The first child of this node.
+    this._child = null;
+    // The next sibling of this node.
+    this._next = null;
+    // The previous sibling of this node.
+    this._prev = null;
+    // Store the flag to use it after destroy, where targetFront is set to null.
+    this._hasParentProcessTarget = targetFront.isParentProcess;
+  }
+
+  /**
+   * Destroy a node front.  The node must have been removed from the
+   * ownership tree before this is called, unless the whole walker front
+   * is being destroyed.
+   */
+  destroy() {
+    super.destroy();
+  }
+
+  // Update the object given a form representation off the wire.
+  form(form, ctx) {
+    // backward-compatibility: shortValue indicates we are connected to old server
+    if (form.shortValue) {
+      // If the value is not complete, set nodeValue to null, it will be fetched
+      // when calling getNodeValue()
+      form.nodeValue = form.incompleteValue ? null : form.shortValue;
+    }
+
+    this.traits = form.traits || {};
+
+    // Shallow copy of the form.  We could just store a reference, but
+    // eventually we'll want to update some of the data.
+    this._form = Object.assign({}, form);
+    this._form.attrs = this._form.attrs ? this._form.attrs.slice() : [];
+
+    if (form.parent) {
+      // Get the owner actor for this actor (the walker), and find the
+      // parent node of this actor from it, creating a standin node if
+      // necessary.
+      const owner = ctx.marshallPool();
+      if (typeof owner.ensureDOMNodeFront === "function") {
+        const parentNodeFront = owner.ensureDOMNodeFront(form.parent);
+        this.reparent(parentNodeFront);
+      }
+    }
+
+    if (form.host) {
+      const owner = ctx.marshallPool();
+      if (typeof owner.ensureDOMNodeFront === "function") {
+        this.host = owner.ensureDOMNodeFront(form.host);
+      }
+    }
+
+    if (form.inlineTextChild) {
+      this.inlineTextChild = types
+        .getType("domnode")
+        .read(form.inlineTextChild, ctx);
+    } else {
+      this.inlineTextChild = undefined;
+    }
+  }
+
+  /**
+   * Returns the parent NodeFront for this NodeFront.
+   */
+  parentNode() {
+    return this._parent;
+  }
+
+  /**
+   * Returns the NodeFront corresponding to the parentNode of this NodeFront, or the
+   * NodeFront corresponding to the host element for shadowRoot elements.
+   */
+  parentOrHost() {
+    return this.isShadowRoot ? this.host : this._parent;
+  }
+
+  /**
+   * Returns the owner DocumentElement|ShadowRootElement NodeFront for this NodeFront,
+   * or null if such element can't be found.
+   *
+   * @returns {NodeFront|null}
+   */
+  getOwnerRootNodeFront() {
+    let currentNode = this;
+    while (currentNode) {
+      if (
+        currentNode.isShadowRoot ||
+        currentNode.nodeType === Node.DOCUMENT_NODE
+      ) {
+        return currentNode;
+      }
+
+      currentNode = currentNode.parentNode();
+    }
+
+    return null;
+  }
+
+  /**
+   * Process a mutation entry as returned from the walker's `getMutations`
+   * request.  Only tries to handle changes of the node's contents
+   * themselves (character data and attribute changes), the walker itself
+   * will keep the ownership tree up to date.
+   */
+  updateMutation(change) {
+    if (change.type === "attributes") {
+      // We'll need to lazily reparse the attributes after this change.
+      this._attrMap = undefined;
+
+      // Update any already-existing attributes.
+      let found = false;
+      for (let i = 0; i < this.attributes.length; i++) {
+        const attr = this.attributes[i];
+        if (
+          attr.name == change.attributeName &&
+          attr.namespace == change.attributeNamespace
+        ) {
+          if (change.newValue !== null) {
+            attr.value = change.newValue;
+          } else {
+            this.attributes.splice(i, 1);
+          }
+          found = true;
+          break;
+        }
+      }
+      // This is a new attribute. The null check is because of Bug 1192270,
+      // in the case of a newly added then removed attribute
+      if (!found && change.newValue !== null) {
+        this.attributes.push({
+          name: change.attributeName,
+          namespace: change.attributeNamespace,
+          value: change.newValue,
+        });
+      }
+    } else if (change.type === "characterData") {
+      this._form.nodeValue = change.newValue;
+    } else if (change.type === "pseudoClassLock") {
+      this._form.pseudoClassLocks = change.pseudoClassLocks;
+    } else if (change.type === "events") {
+      this._form.hasEventListeners = change.hasEventListeners;
+    } else if (change.type === "mutationBreakpoint") {
+      this._form.mutationBreakpoints = change.mutationBreakpoints;
+    }
+  }
+
+  // Some accessors to make NodeFront feel more like a Node
+
+  get id() {
+    return this.getAttribute("id");
+  }
+
+  get nodeType() {
+    return this._form.nodeType;
+  }
+  get namespaceURI() {
+    return this._form.namespaceURI;
+  }
+  get nodeName() {
+    return this._form.nodeName;
+  }
+  get displayName() {
+    const { displayName, nodeName } = this._form;
+
+    // Keep `nodeName.toLowerCase()` for backward compatibility
+    return displayName || nodeName.toLowerCase();
+  }
+  get doctypeString() {
+    return (
+      "<!DOCTYPE " +
+      this._form.name +
+      (this._form.publicId ? ' PUBLIC "' + this._form.publicId + '"' : "") +
+      (this._form.systemId ? ' "' + this._form.systemId + '"' : "") +
+      ">"
+    );
+  }
+
+  get baseURI() {
+    return this._form.baseURI;
+  }
+
+  get browsingContextID() {
+    return this._form.browsingContextID;
+  }
+
+  get className() {
+    return this.getAttribute("class") || "";
+  }
+
+  // Check if the node has children but the current DevTools session is unable
+  // to retrieve them.
+  // Typically: a <frame> or <browser> element which loads a document in another
+  // process, but the toolbox' configuration prevents to inspect it (eg the
+  // parent-process only Browser Toolbox).
+  get childrenUnavailable() {
+    return (
+      // If form.useChildTargetToFetchChildren is true, it means the node HAS
+      // children in another target.
+      // Note: useChildTargetToFetchChildren might be undefined, force
+      // conversion to boolean. See Bug 1783613 to try and improve this.
+      !!this._form.useChildTargetToFetchChildren &&
+      // But if useChildTargetToFetchChildren is false, it means the client
+      // configuration prevents from displaying such children.
+      // This is the only case where children are considered as unavailable:
+      // they exist, but can't be retrieved by configuration.
+      !this.useChildTargetToFetchChildren
+    );
+  }
+  get hasChildren() {
+    return this.numChildren > 0;
+  }
+  get numChildren() {
+    if (this.childrenUnavailable) {
+      return 0;
+    }
+
+    return this._form.numChildren;
+  }
+  get useChildTargetToFetchChildren() {
+    if (
+      this._hasParentProcessTarget &&
+      browserToolboxScope != BROWSER_TOOLBOX_SCOPE_EVERYTHING
+    ) {
+      return false;
+    }
+
+    return !!this._form.useChildTargetToFetchChildren;
+  }
+  get hasEventListeners() {
+    return this._form.hasEventListeners;
+  }
+
+  get isMarkerPseudoElement() {
+    return this._form.isMarkerPseudoElement;
+  }
+  get isBeforePseudoElement() {
+    return this._form.isBeforePseudoElement;
+  }
+  get isAfterPseudoElement() {
+    return this._form.isAfterPseudoElement;
+  }
+  get isPseudoElement() {
+    return (
+      this.isBeforePseudoElement ||
+      this.isAfterPseudoElement ||
+      this.isMarkerPseudoElement
+    );
+  }
+  get isAnonymous() {
+    return this._form.isAnonymous;
+  }
+  get isInHTMLDocument() {
+    return this._form.isInHTMLDocument;
+  }
+  get tagName() {
+    return this.nodeType === nodeConstants.ELEMENT_NODE ? this.nodeName : null;
+  }
+
+  get isDocumentElement() {
+    return !!this._form.isDocumentElement;
+  }
+
+  get isTopLevelDocument() {
+    return this._form.isTopLevelDocument;
+  }
+
+  get isShadowRoot() {
+    return this._form.isShadowRoot;
+  }
+
+  get shadowRootMode() {
+    return this._form.shadowRootMode;
+  }
+
+  get isShadowHost() {
+    return this._form.isShadowHost;
+  }
+
+  get customElementLocation() {
+    return this._form.customElementLocation;
+  }
+
+  get isDirectShadowHostChild() {
+    return this._form.isDirectShadowHostChild;
+  }
+
+  // doctype properties
+  get name() {
+    return this._form.name;
+  }
+  get publicId() {
+    return this._form.publicId;
+  }
+  get systemId() {
+    return this._form.systemId;
+  }
+
+  getAttribute(name) {
+    const attr = this._getAttribute(name);
+    return attr ? attr.value : null;
+  }
+  hasAttribute(name) {
+    this._cacheAttributes();
+    return name in this._attrMap;
+  }
+
+  get hidden() {
+    const cls = this.getAttribute("class");
+    return cls && cls.indexOf(HIDDEN_CLASS) > -1;
+  }
+
+  get attributes() {
+    return this._form.attrs;
+  }
+
+  get mutationBreakpoints() {
+    return this._form.mutationBreakpoints;
+  }
+
+  get pseudoClassLocks() {
+    return this._form.pseudoClassLocks || [];
+  }
+  hasPseudoClassLock(pseudo) {
+    return this.pseudoClassLocks.some(locked => locked === pseudo);
+  }
+
+  get displayType() {
+    return this._form.displayType;
+  }
+
+  get isDisplayed() {
+    return this._form.isDisplayed;
+  }
+
+  get isScrollable() {
+    return this._form.isScrollable;
+  }
+
+  get causesOverflow() {
+    return this._form.causesOverflow;
+  }
+
+  get containerType() {
+    return this._form.containerType;
+  }
+
+  get isTreeDisplayed() {
+    let parent = this;
+    while (parent) {
+      if (!parent.isDisplayed) {
+        return false;
+      }
+      parent = parent.parentNode();
+    }
+    return true;
+  }
+
+  get inspectorFront() {
+    return this.parentFront.parentFront;
+  }
+
+  get walkerFront() {
+    return this.parentFront;
+  }
+
+  getNodeValue() {
+    // backward-compatibility: if nodevalue is null and shortValue is defined, the actual
+    // value of the node needs to be fetched on the server.
+    if (this._form.nodeValue === null && this._form.shortValue) {
+      return super.getNodeValue();
+    }
+
+    const str = this._form.nodeValue || "";
+    return Promise.resolve(new SimpleStringFront(str));
+  }
+
+  /**
+   * Return a new AttributeModificationList for this node.
+   */
+  startModifyingAttributes() {
+    return new AttributeModificationList(this);
+  }
+
+  _cacheAttributes() {
+    if (typeof this._attrMap != "undefined") {
+      return;
+    }
+    this._attrMap = {};
+    for (const attr of this.attributes) {
+      this._attrMap[attr.name] = attr;
+    }
+  }
+
+  _getAttribute(name) {
+    this._cacheAttributes();
+    return this._attrMap[name] || undefined;
+  }
+
+  /**
+   * Set this node's parent.  Note that the children saved in
+   * this tree are unordered and incomplete, so shouldn't be used
+   * instead of a `children` request.
+   */
+  reparent(parent) {
+    if (this._parent === parent) {
+      return;
+    }
+
+    if (this._parent && this._parent._child === this) {
+      this._parent._child = this._next;
+    }
+    if (this._prev) {
+      this._prev._next = this._next;
+    }
+    if (this._next) {
+      this._next._prev = this._prev;
+    }
+    this._next = null;
+    this._prev = null;
+    this._parent = parent;
+    if (!parent) {
+      // Subtree is disconnected, we're done
+      return;
+    }
+    this._next = parent._child;
+    if (this._next) {
+      this._next._prev = this;
+    }
+    parent._child = this;
+  }
+
+  /**
+   * Return all the known children of this node.
+   */
+  treeChildren() {
+    const ret = [];
+    for (let child = this._child; child != null; child = child._next) {
+      ret.push(child);
+    }
+    return ret;
+  }
+
+  /**
+   * Do we use a local target?
+   * Useful to know if a rawNode is available or not.
+   *
+   * This will, one day, be removed. External code should
+   * not need to know if the target is remote or not.
+   */
+  isLocalToBeDeprecated() {
+    return !!this.conn._transport._serverConnection;
+  }
+
+  /**
+   * Get a Node for the given node front.  This only works locally,
+   * and is only intended as a stopgap during the transition to the remote
+   * protocol.  If you depend on this you're likely to break soon.
+   */
+  rawNode(rawNode) {
+    if (!this.isLocalToBeDeprecated()) {
+      console.warn("Tried to use rawNode on a remote connection.");
+      return null;
+    }
+    const {
+      DevToolsServer,
+    } = require("resource://devtools/server/devtools-server.js");
+    const actor = DevToolsServer.searchAllConnectionsForActor(this.actorID);
+    if (!actor) {
+      // Can happen if we try to get the raw node for an already-expired
+      // actor.
+      return null;
+    }
+    return actor.rawNode;
+  }
+
+  async connectToFrame() {
+    if (!this.useChildTargetToFetchChildren) {
+      console.warn("Tried to open connection to an invalid frame.");
+      return null;
+    }
+    if (
+      this._childBrowsingContextTarget &&
+      !this._childBrowsingContextTarget.isDestroyed()
+    ) {
+      return this._childBrowsingContextTarget;
+    }
+
+    // Get the target for this frame element
+    this._childBrowsingContextTarget =
+      await this.targetFront.getWindowGlobalTarget(
+        this._form.browsingContextID
+      );
+
+    // Bug 1776250: When the target is destroyed, we need to easily find the
+    // parent node front so that we can update its frontend container in the
+    // markup-view.
+    this._childBrowsingContextTarget.setParentNodeFront(this);
+
+    return this._childBrowsingContextTarget;
+  }
+}
+
+exports.NodeFront = NodeFront;
+registerFront(NodeFront);
diff --git a/devtools/client/fronts/object.js b/devtools/client/fronts/object.js
new file mode 100644
index 0000000000..53752a778a
--- /dev/null
+++ b/devtools/client/fronts/object.js
@@ -0,0 +1,472 @@
+/* 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 { objectSpec } = require("resource://devtools/shared/specs/object.js");
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  LongStringFront,
+} = require("resource://devtools/client/fronts/string.js");
+
+const SUPPORT_ENUM_ENTRIES_SET = new Set([
+  "Headers",
+  "Map",
+  "WeakMap",
+  "Set",
+  "WeakSet",
+  "Storage",
+  "URLSearchParams",
+  "FormData",
+  "MIDIInputMap",
+  "MIDIOutputMap",
+  "HighlightRegistry",
+]);
+
+/**
+ * A ObjectFront is used as a front end for the ObjectActor that is
+ * created on the server, hiding implementation details.
+ */
+class ObjectFront extends FrontClassWithSpec(objectSpec) {
+  constructor(conn = null, targetFront = null, parentFront = null, data) {
+    if (!parentFront) {
+      throw new Error("ObjectFront require a parent front");
+    }
+
+    super(conn, targetFront, parentFront);
+
+    this._grip = data;
+    this.actorID = this._grip.actor;
+    this.valid = true;
+
+    parentFront.manage(this);
+  }
+
+  skipDestroy() {
+    // Object fronts are simple fronts, they don't need to be cleaned up on
+    // toolbox destroy. `conn` is a DebuggerClient instance, check the
+    // `isToolboxDestroy` flag to skip the destroy.
+    return this.conn && this.conn.isToolboxDestroy;
+  }
+
+  getGrip() {
+    return this._grip;
+  }
+
+  get isFrozen() {
+    return this._grip.frozen;
+  }
+
+  get isSealed() {
+    return this._grip.sealed;
+  }
+
+  get isExtensible() {
+    return this._grip.extensible;
+  }
+
+  /**
+   * Request the prototype and own properties of the object.
+   */
+  async getPrototypeAndProperties() {
+    const result = await super.prototypeAndProperties();
+
+    if (result.prototype) {
+      result.prototype = getAdHocFrontOrPrimitiveGrip(result.prototype, this);
+    }
+
+    // The result packet can have multiple properties that hold grips which we may need
+    // to turn into fronts.
+    const gripKeys = ["value", "getterValue", "get", "set"];
+
+    if (result.ownProperties) {
+      Object.entries(result.ownProperties).forEach(([key, descriptor]) => {
+        if (descriptor) {
+          for (const gripKey of gripKeys) {
+            if (descriptor.hasOwnProperty(gripKey)) {
+              result.ownProperties[key][gripKey] = getAdHocFrontOrPrimitiveGrip(
+                descriptor[gripKey],
+                this
+              );
+            }
+          }
+        }
+      });
+    }
+
+    if (result.safeGetterValues) {
+      Object.entries(result.safeGetterValues).forEach(([key, descriptor]) => {
+        if (descriptor) {
+          for (const gripKey of gripKeys) {
+            if (descriptor.hasOwnProperty(gripKey)) {
+              result.safeGetterValues[key][gripKey] =
+                getAdHocFrontOrPrimitiveGrip(descriptor[gripKey], this);
+            }
+          }
+        }
+      });
+    }
+
+    if (result.ownSymbols) {
+      result.ownSymbols.forEach((descriptor, i, arr) => {
+        if (descriptor) {
+          for (const gripKey of gripKeys) {
+            if (descriptor.hasOwnProperty(gripKey)) {
+              arr[i][gripKey] = getAdHocFrontOrPrimitiveGrip(
+                descriptor[gripKey],
+                this
+              );
+            }
+          }
+        }
+      });
+    }
+
+    return result;
+  }
+
+  /**
+   * Request a PropertyIteratorFront instance to ease listing
+   * properties for this object.
+   *
+   * @param options Object
+   *        A dictionary object with various boolean attributes:
+   *        - ignoreIndexedProperties Boolean
+   *          If true, filters out Array items.
+   *          e.g. properties names between `0` and `object.length`.
+   *        - ignoreNonIndexedProperties Boolean
+   *          If true, filters out items that aren't array items
+   *          e.g. properties names that are not a number between `0`
+   *          and `object.length`.
+   *        - sort Boolean
+   *          If true, the iterator will sort the properties by name
+   *          before dispatching them.
+   */
+  enumProperties(options) {
+    return super.enumProperties(options);
+  }
+
+  /**
+   * Request a PropertyIteratorFront instance to enumerate entries in a
+   * Map/Set-like object.
+   */
+  enumEntries() {
+    if (!SUPPORT_ENUM_ENTRIES_SET.has(this._grip.class)) {
+      console.error(
+        `enumEntries can't be called for "${
+          this._grip.class
+        }" grips. Supported grips are: ${[...SUPPORT_ENUM_ENTRIES_SET].join(
+          ", "
+        )}.`
+      );
+      return null;
+    }
+    return super.enumEntries();
+  }
+
+  /**
+   * Request a SymbolIteratorFront instance to enumerate symbols in an object.
+   */
+  enumSymbols() {
+    if (this._grip.type !== "object") {
+      console.error("enumSymbols is only valid for objects grips.");
+      return null;
+    }
+    return super.enumSymbols();
+  }
+
+  /**
+   * Request the property descriptor of the object's specified property.
+   *
+   * @param name string The name of the requested property.
+   */
+  getProperty(name) {
+    return super.property(name);
+  }
+
+  /**
+   * Request the value of the object's specified property.
+   *
+   * @param name string The name of the requested property.
+   * @param receiverId string|null The actorId of the receiver to be used for getters.
+   */
+  async getPropertyValue(name, receiverId) {
+    const response = await super.propertyValue(name, receiverId);
+
+    if (response.value) {
+      const { value } = response;
+      if (value.return) {
+        response.value.return = getAdHocFrontOrPrimitiveGrip(
+          value.return,
+          this
+        );
+      }
+
+      if (value.throw) {
+        response.value.throw = getAdHocFrontOrPrimitiveGrip(value.throw, this);
+      }
+    }
+    return response;
+  }
+
+  /**
+   * Get the body of a custom formatted object.
+   */
+  async customFormatterBody() {
+    const result = await super.customFormatterBody();
+
+    if (!result?.customFormatterBody) {
+      return result;
+    }
+
+    const createFrontsInJsonMl = item => {
+      if (Array.isArray(item)) {
+        return item.map(i => createFrontsInJsonMl(i));
+      }
+      return getAdHocFrontOrPrimitiveGrip(item, this);
+    };
+
+    result.customFormatterBody = createFrontsInJsonMl(
+      result.customFormatterBody
+    );
+
+    return result;
+  }
+
+  /**
+   * Request the prototype of the object.
+   */
+  async getPrototype() {
+    const result = await super.prototype();
+
+    if (!result.prototype) {
+      return result;
+    }
+
+    result.prototype = getAdHocFrontOrPrimitiveGrip(result.prototype, this);
+
+    return result;
+  }
+
+  /**
+   * Request the state of a promise.
+   */
+  async getPromiseState() {
+    if (this._grip.class !== "Promise") {
+      console.error("getPromiseState is only valid for promise grips.");
+      return null;
+    }
+
+    let response, promiseState;
+    try {
+      response = await super.promiseState();
+      promiseState = response.promiseState;
+    } catch (error) {
+      // @backward-compat { version 85 } On older server, the promiseState request didn't
+      // didn't exist (bug 1552648). The promise state was directly included in the grip.
+      if (error.message.includes("unrecognizedPacketType")) {
+        promiseState = this._grip.promiseState;
+        response = { promiseState };
+      } else {
+        throw error;
+      }
+    }
+
+    const { value, reason } = promiseState;
+
+    if (value) {
+      promiseState.value = getAdHocFrontOrPrimitiveGrip(value, this);
+    }
+
+    if (reason) {
+      promiseState.reason = getAdHocFrontOrPrimitiveGrip(reason, this);
+    }
+
+    return response;
+  }
+
+  /**
+   * Request the target and handler internal slots of a proxy.
+   */
+  async getProxySlots() {
+    if (this._grip.class !== "Proxy") {
+      console.error("getProxySlots is only valid for proxy grips.");
+      return null;
+    }
+
+    const response = await super.proxySlots();
+    const { proxyHandler, proxyTarget } = response;
+
+    if (proxyHandler) {
+      response.proxyHandler = getAdHocFrontOrPrimitiveGrip(proxyHandler, this);
+    }
+
+    if (proxyTarget) {
+      response.proxyTarget = getAdHocFrontOrPrimitiveGrip(proxyTarget, this);
+    }
+
+    return response;
+  }
+
+  get isSyntaxError() {
+    return this._grip.preview && this._grip.preview.name == "SyntaxError";
+  }
+}
+
+/**
+ * When we are asking the server for the value of a given variable, we might get different
+ * type of objects:
+ * - a primitive (string, number, null, false, boolean)
+ * - a long string
+ * - an "object" (i.e. not primitive nor long string)
+ *
+ * Each of those type need a different front, or none:
+ * - a primitive does not allow further interaction with the server, so we don't need
+ *   to have a dedicated front.
+ * - a long string needs a longStringFront to be able to retrieve the full string.
+ * - an object need an objectFront to retrieve properties, symbols and prototype.
+ *
+ * In the case an ObjectFront is created, we also check if the object has properties
+ * that should be turned into fronts as well.
+ *
+ * @param {String|Number|Object} options: The packet returned by the server.
+ * @param {Front} parentFront
+ *
+ * @returns {Number|String|Object|LongStringFront|ObjectFront}
+ */
+function getAdHocFrontOrPrimitiveGrip(packet, parentFront) {
+  // We only want to try to create a front when it makes sense, i.e when it has an
+  // actorID, unless:
+  // - it's a Symbol (See Bug 1600299)
+  // - it's a mapEntry (the preview.key and preview.value properties can hold actors)
+  // - it's a highlightRegistryEntry (the preview.value properties can hold actors)
+  // - or it is already a front (happens when we are using the legacy listeners in the ResourceCommand)
+  const isPacketAnObject = packet && typeof packet === "object";
+  const isFront = !!packet?.typeName;
+  if (
+    !isPacketAnObject ||
+    packet.type == "symbol" ||
+    (packet.type !== "mapEntry" &&
+      packet.type !== "highlightRegistryEntry" &&
+      !packet.actor) ||
+    isFront
+  ) {
+    return packet;
+  }
+
+  const { conn } = parentFront;
+  // If the parent front is a target, consider it as the target to use for all objects
+  const targetFront = parentFront.isTargetFront
+    ? parentFront
+    : parentFront.targetFront;
+
+  // We may have already created a front for this object actor since some actor (e.g. the
+  // thread actor) cache the object actors they create.
+  const existingFront = conn.getFrontByID(packet.actor);
+  if (existingFront) {
+    return existingFront;
+  }
+
+  const { type } = packet;
+
+  if (type === "longString") {
+    const longStringFront = new LongStringFront(conn, targetFront, parentFront);
+    longStringFront.form(packet);
+    parentFront.manage(longStringFront);
+    return longStringFront;
+  }
+
+  if (
+    (type === "mapEntry" || type === "highlightRegistryEntry") &&
+    packet.preview
+  ) {
+    const { key, value } = packet.preview;
+    packet.preview.key = getAdHocFrontOrPrimitiveGrip(
+      key,
+      parentFront,
+      targetFront
+    );
+    packet.preview.value = getAdHocFrontOrPrimitiveGrip(
+      value,
+      parentFront,
+      targetFront
+    );
+    return packet;
+  }
+
+  const objectFront = new ObjectFront(conn, targetFront, parentFront, packet);
+  createChildFronts(objectFront, packet);
+  return objectFront;
+}
+
+/**
+ * Create child fronts of the passed object front given a packet. Those child fronts are
+ * usually mapping actors of the packet sub-properties (preview items, promise fullfilled
+ * values, …).
+ *
+ * @param {ObjectFront} objectFront
+ * @param {String|Number|Object} packet: The packet returned by the server
+ */
+function createChildFronts(objectFront, packet) {
+  if (packet.preview) {
+    const { message, entries } = packet.preview;
+
+    // The message could be a longString.
+    if (packet.preview.message) {
+      packet.preview.message = getAdHocFrontOrPrimitiveGrip(
+        message,
+        objectFront
+      );
+    }
+
+    // Handle Map/WeakMap preview entries (the preview might be directly used if has all the
+    // items needed, i.e. if the Map has less than 10 items).
+    if (entries && Array.isArray(entries)) {
+      packet.preview.entries = entries.map(([key, value]) => [
+        getAdHocFrontOrPrimitiveGrip(key, objectFront),
+        getAdHocFrontOrPrimitiveGrip(value, objectFront),
+      ]);
+    }
+  }
+
+  if (packet && typeof packet.ownProperties === "object") {
+    for (const [name, descriptor] of Object.entries(packet.ownProperties)) {
+      // The descriptor can have multiple properties that hold grips which we may need
+      // to turn into fronts.
+      const gripKeys = ["value", "getterValue", "get", "set"];
+      for (const key of gripKeys) {
+        if (
+          descriptor &&
+          typeof descriptor === "object" &&
+          descriptor.hasOwnProperty(key)
+        ) {
+          packet.ownProperties[name][key] = getAdHocFrontOrPrimitiveGrip(
+            descriptor[key],
+            objectFront
+          );
+        }
+      }
+    }
+  }
+
+  // Handle custom formatters
+  if (packet && packet.useCustomFormatter && Array.isArray(packet.header)) {
+    const createFrontsInJsonMl = item => {
+      if (Array.isArray(item)) {
+        return item.map(i => createFrontsInJsonMl(i));
+      }
+      return getAdHocFrontOrPrimitiveGrip(item, objectFront);
+    };
+
+    packet.header = createFrontsInJsonMl(packet.header);
+  }
+}
+
+registerFront(ObjectFront);
+
+exports.ObjectFront = ObjectFront;
+exports.getAdHocFrontOrPrimitiveGrip = getAdHocFrontOrPrimitiveGrip;
diff --git a/devtools/client/fronts/objects-manager.js b/devtools/client/fronts/objects-manager.js
new file mode 100644
index 0000000000..f043a3078c
--- /dev/null
+++ b/devtools/client/fronts/objects-manager.js
@@ -0,0 +1,25 @@
+/* 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 {
+  objectsManagerSpec,
+} = require("resource://devtools/shared/specs/objects-manager.js");
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+
+class ObjectsManagerFront extends FrontClassWithSpec(objectsManagerSpec) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+
+    // Attribute name from which to retrieve the actorID out of the target actor's form
+    this.formAttributeName = "objectsManagerActor";
+  }
+}
+
+module.exports = ObjectsManagerFront;
+registerFront(ObjectsManagerFront);
diff --git a/devtools/client/fronts/page-style.js b/devtools/client/fronts/page-style.js
new file mode 100644
index 0000000000..dfe9f593e4
--- /dev/null
+++ b/devtools/client/fronts/page-style.js
@@ -0,0 +1,123 @@
+/* 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 {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  pageStyleSpec,
+} = require("resource://devtools/shared/specs/page-style.js");
+
+/**
+ * PageStyleFront, the front object for the PageStyleActor
+ */
+class PageStyleFront extends FrontClassWithSpec(pageStyleSpec) {
+  _attributesCache = new Map();
+
+  constructor(conn, targetFront, parentFront) {
+    super(conn, targetFront, parentFront);
+    this.inspector = this.getParent();
+
+    this._clearAttributesCache = this._clearAttributesCache.bind(this);
+    this.on("stylesheet-updated", this._clearAttributesCache);
+    this.walker.on("new-mutations", this._clearAttributesCache);
+  }
+
+  form(form) {
+    this._form = form;
+  }
+
+  get walker() {
+    return this.inspector.walker;
+  }
+
+  get supportsFontStretchLevel4() {
+    return this._form.traits && this._form.traits.fontStretchLevel4;
+  }
+
+  get supportsFontStyleLevel4() {
+    return this._form.traits && this._form.traits.fontStyleLevel4;
+  }
+
+  get supportsFontVariations() {
+    return this._form.traits && this._form.traits.fontVariations;
+  }
+
+  get supportsFontWeightLevel4() {
+    return this._form.traits && this._form.traits.fontWeightLevel4;
+  }
+
+  getMatchedSelectors(node, property, options) {
+    return super.getMatchedSelectors(node, property, options).then(ret => {
+      return ret.matched;
+    });
+  }
+
+  async getApplied(node, options = {}) {
+    const ret = await super.getApplied(node, options);
+    return ret.entries;
+  }
+
+  addNewRule(node, pseudoClasses) {
+    return super.addNewRule(node, pseudoClasses).then(ret => {
+      return ret.entries[0];
+    });
+  }
+
+  /**
+   * Get an array of existing attribute values in a node document, given an attribute type.
+   *
+   * @param {String} search: A string to filter attribute value on.
+   * @param {String} attributeType: The type of attribute we want to retrieve the values.
+   * @param {Element} node: The element we want to get possible attributes for. This will
+   *        be used to get the document where the search is happening.
+   * @returns {Array<String>} An array of strings
+   */
+  async getAttributesInOwnerDocument(search, attributeType, node) {
+    if (!attributeType) {
+      throw new Error("`type` should not be empty");
+    }
+
+    if (!search) {
+      return [];
+    }
+
+    const lcFilter = search.toLowerCase();
+
+    // If the new filter includes the string that was used on our last trip to the server,
+    // we can filter the cached results instead of calling the server again.
+    if (
+      this._attributesCache &&
+      this._attributesCache.has(attributeType) &&
+      search.startsWith(this._attributesCache.get(attributeType).search)
+    ) {
+      const cachedResults = this._attributesCache
+        .get(attributeType)
+        .results.filter(item => item.toLowerCase().startsWith(lcFilter));
+      this.emitForTests(
+        "getAttributesInOwnerDocument-cache-hit",
+        cachedResults
+      );
+      return cachedResults;
+    }
+
+    const results = await super.getAttributesInOwnerDocument(
+      search,
+      attributeType,
+      node
+    );
+    this._attributesCache.set(attributeType, { search, results });
+    return results;
+  }
+
+  _clearAttributesCache() {
+    this._attributesCache.clear();
+  }
+}
+
+exports.PageStyleFront = PageStyleFront;
+registerFront(PageStyleFront);
diff --git a/devtools/client/fronts/perf.js b/devtools/client/fronts/perf.js
new file mode 100644
index 0000000000..9ca0fb8b9d
--- /dev/null
+++ b/devtools/client/fronts/perf.js
@@ -0,0 +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";
+
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const { perfSpec } = require("resource://devtools/shared/specs/perf.js");
+
+class PerfFront extends FrontClassWithSpec(perfSpec) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+
+    // Attribute name from which to retrieve the actorID out of the target actor's form
+    this.formAttributeName = "perfActor";
+  }
+}
+
+registerFront(PerfFront);
diff --git a/devtools/client/fronts/preference.js b/devtools/client/fronts/preference.js
new file mode 100644
index 0000000000..e2c498ba4b
--- /dev/null
+++ b/devtools/client/fronts/preference.js
@@ -0,0 +1,33 @@
+/* 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 {
+  preferenceSpec,
+} = require("resource://devtools/shared/specs/preference.js");
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+
+class PreferenceFront extends FrontClassWithSpec(preferenceSpec) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+
+    // Attribute name from which to retrieve the actorID out of the target actor's form
+    this.formAttributeName = "preferenceActor";
+  }
+
+  async getTraits() {
+    if (!this._traits) {
+      this._traits = await super.getTraits();
+    }
+
+    return this._traits;
+  }
+}
+
+exports.PreferenceFront = PreferenceFront;
+registerFront(PreferenceFront);
diff --git a/devtools/client/fronts/private-properties-iterator.js b/devtools/client/fronts/private-properties-iterator.js
new file mode 100644
index 0000000000..6b7bd3c14a
--- /dev/null
+++ b/devtools/client/fronts/private-properties-iterator.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 {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  privatePropertiesIteratorSpec,
+} = require("resource://devtools/shared/specs/private-properties-iterator.js");
+const {
+  getAdHocFrontOrPrimitiveGrip,
+} = require("resource://devtools/client/fronts/object.js");
+
+class PrivatePropertiesIteratorFront extends FrontClassWithSpec(
+  privatePropertiesIteratorSpec
+) {
+  form(data) {
+    this.actorID = data.actor;
+    this.count = data.count;
+  }
+
+  async slice(start, count) {
+    const result = await super.slice({ start, count });
+    return this._onResult(result);
+  }
+
+  async all() {
+    const result = await super.all();
+    return this._onResult(result);
+  }
+
+  _onResult(result) {
+    if (!result.privateProperties) {
+      return result;
+    }
+
+    // The result packet can have multiple properties that hold grips which we may need
+    // to turn into fronts.
+    const gripKeys = ["value", "getterValue", "get", "set"];
+
+    result.privateProperties.forEach((item, i) => {
+      if (item?.descriptor) {
+        for (const gripKey of gripKeys) {
+          if (item.descriptor.hasOwnProperty(gripKey)) {
+            result.privateProperties[i].descriptor[gripKey] =
+              getAdHocFrontOrPrimitiveGrip(item.descriptor[gripKey], this);
+          }
+        }
+      }
+    });
+    return result;
+  }
+}
+
+exports.PrivatePropertiesIteratorFront = PrivatePropertiesIteratorFront;
+registerFront(PrivatePropertiesIteratorFront);
diff --git a/devtools/client/fronts/property-iterator.js b/devtools/client/fronts/property-iterator.js
new file mode 100644
index 0000000000..6348e435f9
--- /dev/null
+++ b/devtools/client/fronts/property-iterator.js
@@ -0,0 +1,67 @@
+/* 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 {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  propertyIteratorSpec,
+} = require("resource://devtools/shared/specs/property-iterator.js");
+const {
+  getAdHocFrontOrPrimitiveGrip,
+} = require("resource://devtools/client/fronts/object.js");
+
+/**
+ * A PropertyIteratorFront provides a way to access to property names and
+ * values of an object efficiently, slice by slice.
+ * Note that the properties can be sorted in the backend,
+ * this is controled while creating the PropertyIteratorFront
+ * from ObjectFront.enumProperties.
+ */
+class PropertyIteratorFront extends FrontClassWithSpec(propertyIteratorSpec) {
+  form(data) {
+    this.actorID = data.actor;
+    this.count = data.count;
+  }
+
+  async slice(start, count) {
+    const result = await super.slice({ start, count });
+    return this._onResult(result);
+  }
+
+  async all() {
+    const result = await super.all();
+    return this._onResult(result);
+  }
+
+  _onResult(result) {
+    if (!result.ownProperties) {
+      return result;
+    }
+
+    // The result packet can have multiple properties that hold grips which we may need
+    // to turn into fronts.
+    const gripKeys = ["value", "getterValue", "get", "set"];
+
+    Object.entries(result.ownProperties).forEach(([key, descriptor]) => {
+      if (descriptor) {
+        for (const gripKey of gripKeys) {
+          if (descriptor.hasOwnProperty(gripKey)) {
+            result.ownProperties[key][gripKey] = getAdHocFrontOrPrimitiveGrip(
+              descriptor[gripKey],
+              this
+            );
+          }
+        }
+      }
+    });
+    return result;
+  }
+}
+
+exports.PropertyIteratorFront = PropertyIteratorFront;
+registerFront(PropertyIteratorFront);
diff --git a/devtools/client/fronts/reflow.js b/devtools/client/fronts/reflow.js
new file mode 100644
index 0000000000..027e09e9a0
--- /dev/null
+++ b/devtools/client/fronts/reflow.js
@@ -0,0 +1,31 @@
+/* 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 { reflowSpec } = require("resource://devtools/shared/specs/reflow.js");
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+
+/**
+ * Usage example of the reflow front:
+ *
+ * let front = await target.getFront("reflow");
+ * front.on("reflows", this._onReflows);
+ * front.start();
+ * // now wait for events to come
+ */
+class ReflowFront extends FrontClassWithSpec(reflowSpec) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+
+    // Attribute name from which to retrieve the actorID out of the target actor's form
+    this.formAttributeName = "reflowActor";
+  }
+}
+
+exports.ReflowFront = ReflowFront;
+registerFront(ReflowFront);
diff --git a/devtools/client/fronts/responsive.js b/devtools/client/fronts/responsive.js
new file mode 100644
index 0000000000..c6f991c8a6
--- /dev/null
+++ b/devtools/client/fronts/responsive.js
@@ -0,0 +1,28 @@
+/* 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 {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  responsiveSpec,
+} = require("resource://devtools/shared/specs/responsive.js");
+
+/**
+ * The corresponding Front object for the Responsive actor.
+ */
+class ResponsiveFront extends FrontClassWithSpec(responsiveSpec) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+
+    // Attribute name from which to retrieve the actorID out of the target actor's form
+    this.formAttributeName = "responsiveActor";
+  }
+}
+
+exports.ResponsiveFront = ResponsiveFront;
+registerFront(ResponsiveFront);
diff --git a/devtools/client/fronts/root.js b/devtools/client/fronts/root.js
new file mode 100644
index 0000000000..92d780ea24
--- /dev/null
+++ b/devtools/client/fronts/root.js
@@ -0,0 +1,332 @@
+/* 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 { rootSpec } = require("resource://devtools/shared/specs/root.js");
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+
+loader.lazyRequireGetter(
+  this,
+  "getFront",
+  "resource://devtools/shared/protocol.js",
+  true
+);
+
+class RootFront extends FrontClassWithSpec(rootSpec) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+
+    // Cache root form as this will always be the same value.
+    Object.defineProperty(this, "rootForm", {
+      get() {
+        delete this.rootForm;
+        this.rootForm = this.getRoot();
+        return this.rootForm;
+      },
+      configurable: true,
+    });
+
+    // Cache of already created global scoped fronts
+    // [typeName:string => Front instance]
+    this.fronts = new Map();
+
+    this._client = client;
+  }
+
+  form(form) {
+    // Root Front is a special Front. It is the only one to set its actor ID manually
+    // out of the form object returned by RootActor.sayHello which is called when calling
+    // DevToolsClient.connect().
+    this.actorID = form.from;
+
+    this.applicationType = form.applicationType;
+    this.traits = form.traits;
+  }
+  /**
+   * Retrieve all service worker registrations with their corresponding workers.
+   * @param {Array} [workerTargets] (optional)
+   *        Array containing the result of a call to `listAllWorkerTargets`.
+   *        (this exists to avoid duplication of calls to that method)
+   * @return {Object[]} result - An Array of Objects with the following format
+   *         - {result[].registration} - The registration front
+   *         - {result[].workers} Array of form-like objects for service workers
+   */
+  async listAllServiceWorkers(workerTargets) {
+    const result = [];
+    const { registrations } = await this.listServiceWorkerRegistrations();
+    const allWorkers = workerTargets
+      ? workerTargets
+      : await this.listAllWorkerTargets();
+
+    for (const registrationFront of registrations) {
+      // workers from the registration, ordered from most recent to older
+      const workers = [
+        registrationFront.activeWorker,
+        registrationFront.waitingWorker,
+        registrationFront.installingWorker,
+        registrationFront.evaluatingWorker,
+      ]
+        // filter out non-existing workers
+        .filter(w => !!w)
+        // build a worker object with its WorkerDescriptorFront
+        .map(workerFront => {
+          const workerDescriptorFront = allWorkers.find(
+            targetFront => targetFront.id === workerFront.id
+          );
+
+          return {
+            id: workerFront.id,
+            name: workerFront.url,
+            state: workerFront.state,
+            stateText: workerFront.stateText,
+            url: workerFront.url,
+            workerDescriptorFront,
+          };
+        });
+
+      // TODO: return only the worker targets. See Bug 1620605
+      result.push({
+        registration: registrationFront,
+        workers,
+      });
+    }
+
+    return result;
+  }
+
+  /**
+   * Retrieve all service worker registrations as well as workers from the parent and
+   * content processes. Listing service workers involves merging information coming from
+   * registrations and workers, this method will combine this information to present a
+   * unified array of serviceWorkers. If you are only interested in other workers, use
+   * listWorkers.
+   *
+   * @return {Object}
+   *         - {Array} service
+   *           array of form-like objects for serviceworkers
+   *         - {Array} shared
+   *           Array of WorkerTargetActor forms, containing shared workers.
+   *         - {Array} other
+   *           Array of WorkerTargetActor forms, containing other workers.
+   */
+  async listAllWorkers() {
+    const allWorkers = await this.listAllWorkerTargets();
+    const serviceWorkers = await this.listAllServiceWorkers(allWorkers);
+
+    // NOTE: listAllServiceWorkers() now returns all the workers belonging to
+    //       a registration. To preserve the usual behavior at about:debugging,
+    //       in which we show only the most recent one, we grab the first
+    //       worker in the array only.
+    const result = {
+      service: serviceWorkers
+        .map(({ registration, workers }) => {
+          return workers.slice(0, 1).map(worker => {
+            return Object.assign(worker, {
+              registrationFront: registration,
+              fetch: registration.fetch,
+            });
+          });
+        })
+        .flat(),
+      shared: [],
+      other: [],
+    };
+
+    allWorkers.forEach(front => {
+      const worker = {
+        id: front.id,
+        url: front.url,
+        name: front.url,
+        workerDescriptorFront: front,
+      };
+
+      switch (front.type) {
+        case Ci.nsIWorkerDebugger.TYPE_SERVICE:
+          // do nothing, since we already fetched them in `serviceWorkers`
+          break;
+        case Ci.nsIWorkerDebugger.TYPE_SHARED:
+          result.shared.push(worker);
+          break;
+        default:
+          result.other.push(worker);
+      }
+    });
+
+    return result;
+  }
+
+  /** Get the target fronts for all worker threads running in any process. */
+  async listAllWorkerTargets() {
+    const listParentWorkers = async () => {
+      const { workers } = await this.listWorkers();
+      return workers;
+    };
+    const listChildWorkers = async () => {
+      const processes = await this.listProcesses();
+      const processWorkers = await Promise.all(
+        processes.map(async processDescriptorFront => {
+          // Ignore parent process
+          if (processDescriptorFront.isParentProcessDescriptor) {
+            return [];
+          }
+          try {
+            const front = await processDescriptorFront.getTarget();
+            if (!front) {
+              return [];
+            }
+            const response = await front.listWorkers();
+            return response.workers;
+          } catch (e) {
+            if (e.message.includes("Connection closed")) {
+              return [];
+            }
+            throw e;
+          }
+        })
+      );
+
+      return processWorkers.flat();
+    };
+
+    const [parentWorkers, childWorkers] = await Promise.all([
+      listParentWorkers(),
+      listChildWorkers(),
+    ]);
+
+    return parentWorkers.concat(childWorkers);
+  }
+
+  /**
+   * Fetch the ProcessDescriptorFront for the main process.
+   *
+   * `getProcess` requests allows to fetch the descriptor for any process and
+   * the main process is having the process ID zero.
+   */
+  getMainProcess() {
+    return this.getProcess(0);
+  }
+
+  /**
+   * Fetch the tab descriptor for the currently selected tab, or for a specific
+   * tab given as first parameter.
+   *
+   * @param [optional] object filter
+   *        A dictionary object with following optional attributes:
+   *         - browserId: use to match any tab
+   *         - tab: a reference to xul:tab element (used for local tab debugging)
+   *         - isWebExtension: an optional boolean to flag TabDescriptors
+   *        If nothing is specified, returns the actor for the currently
+   *        selected tab.
+   */
+  async getTab(filter) {
+    const packet = {};
+    if (filter) {
+      if (typeof filter.browserId == "number") {
+        packet.browserId = filter.browserId;
+      } else if ("tab" in filter) {
+        const browser = filter.tab.linkedBrowser;
+        packet.browserId = browser.browserId;
+      } else {
+        // Throw if a filter object have been passed but without
+        // any clearly idenfified filter.
+        throw new Error("Unsupported argument given to getTab request");
+      }
+    }
+
+    const descriptorFront = await super.getTab(packet);
+
+    // Will flag TabDescriptor used by WebExtension codebase.
+    if (filter?.isWebExtension) {
+      descriptorFront.setIsForWebExtension(true);
+    }
+
+    // If the tab is a local tab, forward it to the descriptor.
+    if (filter?.tab?.tagName == "tab") {
+      // Ignore the fake `tab` object we receive, where there is only a
+      // `linkedBrowser` attribute, but this isn't a real <tab> element.
+      // devtools/client/framework/test/browser_toolbox_target.js is passing such
+      // a fake tab.
+      descriptorFront.setLocalTab(filter.tab);
+    }
+
+    return descriptorFront;
+  }
+
+  /**
+   * Fetch the target front for a given add-on.
+   * This is just an helper on top of `listAddons` request.
+   *
+   * @param object filter
+   *        A dictionary object with following attribute:
+   *         - id: used to match the add-on to connect to.
+   */
+  async getAddon({ id }) {
+    const addons = await this.listAddons();
+    const webextensionDescriptorFront = addons.find(addon => addon.id === id);
+    return webextensionDescriptorFront;
+  }
+
+  /**
+   * Fetch the target front for a given worker.
+   * This is just an helper on top of `listAllWorkers` request.
+   *
+   * @param id
+   */
+  async getWorker(id) {
+    const { service, shared, other } = await this.listAllWorkers();
+    const worker = [...service, ...shared, ...other].find(w => w.id === id);
+    if (!worker) {
+      return null;
+    }
+    return worker.workerDescriptorFront || worker.registrationFront;
+  }
+
+  /**
+   * Test request that returns the object passed as first argument.
+   *
+   * `echo` is special as all the property of the given object have to be passed
+   * on the packet object. That's not something that can be achieve by requester helper.
+   */
+
+  echo(packet) {
+    packet.type = "echo";
+    return this.request(packet);
+  }
+
+  /*
+   * This function returns a protocol.js Front for any root actor.
+   * i.e. the one directly served from RootActor.listTabs or getRoot.
+   *
+   * @param String typeName
+   *        The type name used in protocol.js's spec for this actor.
+   */
+  async getFront(typeName) {
+    let front = this.fronts.get(typeName);
+    if (front) {
+      return front;
+    }
+    const rootForm = await this.rootForm;
+    front = getFront(this._client, typeName, rootForm);
+    this.fronts.set(typeName, front);
+    return front;
+  }
+
+  /*
+   * This function returns true if the root actor has a registered global actor
+   * with a given name.
+   * @param {String} actorName
+   *        The name of a global actor.
+   *
+   * @return {Boolean}
+   */
+  async hasActor(actorName) {
+    const rootForm = await this.rootForm;
+    return !!rootForm[actorName + "Actor"];
+  }
+}
+exports.RootFront = RootFront;
+registerFront(RootFront);
diff --git a/devtools/client/fronts/screenshot-content.js b/devtools/client/fronts/screenshot-content.js
new file mode 100644
index 0000000000..a1b8849a16
--- /dev/null
+++ b/devtools/client/fronts/screenshot-content.js
@@ -0,0 +1,25 @@
+/* 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 {
+  screenshotContentSpec,
+} = require("resource://devtools/shared/specs/screenshot-content.js");
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+
+class ScreenshotContentFront extends FrontClassWithSpec(screenshotContentSpec) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+
+    // Attribute name from which to retrieve the actorID out of the target actor's form
+    this.formAttributeName = "screenshotContentActor";
+  }
+}
+
+exports.ScreenshotContentFront = ScreenshotContentFront;
+registerFront(ScreenshotContentFront);
diff --git a/devtools/client/fronts/screenshot.js b/devtools/client/fronts/screenshot.js
new file mode 100644
index 0000000000..cbceec319e
--- /dev/null
+++ b/devtools/client/fronts/screenshot.js
@@ -0,0 +1,25 @@
+/* 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 {
+  screenshotSpec,
+} = require("resource://devtools/shared/specs/screenshot.js");
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+
+class ScreenshotFront extends FrontClassWithSpec(screenshotSpec) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+
+    // Attribute name from which to retrieve the actorID out of the target actor's form
+    this.formAttributeName = "screenshotActor";
+  }
+}
+
+exports.ScreenshotFront = ScreenshotFront;
+registerFront(ScreenshotFront);
diff --git a/devtools/client/fronts/source.js b/devtools/client/fronts/source.js
new file mode 100644
index 0000000000..d8a195bbb2
--- /dev/null
+++ b/devtools/client/fronts/source.js
@@ -0,0 +1,102 @@
+/* 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 { sourceSpec } = require("resource://devtools/shared/specs/source.js");
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  ArrayBufferFront,
+} = require("resource://devtools/client/fronts/array-buffer.js");
+
+/**
+ * A SourceFront provides a way to access the source text of a script.
+ *
+ * @param client DevToolsClient
+ *        The DevTools Client instance.
+ * @param form Object
+ *        The form sent across the remote debugging protocol.
+ */
+class SourceFront extends FrontClassWithSpec(sourceSpec) {
+  constructor(client, form) {
+    super(client);
+    if (form) {
+      this._url = form.url;
+      // this is here for the time being, until the source front is managed
+      // via protocol.js marshalling
+      this.actorID = form.actor;
+    }
+  }
+
+  form(json) {
+    this._url = json.url;
+  }
+
+  get actor() {
+    return this.actorID;
+  }
+
+  get url() {
+    return this._url;
+  }
+
+  // Alias for source.blackbox to avoid changing protocol.js packets
+  blackBox(range) {
+    return this.blackbox(range);
+  }
+
+  // Alias for source.unblackbox to avoid changing protocol.js packets
+  unblackBox() {
+    return this.unblackbox();
+  }
+
+  /**
+   * Get a Front for either an ArrayBuffer or LongString
+   * for this SourceFront's source.
+   */
+  async source() {
+    const response = await super.source();
+    return this._onSourceResponse(response);
+  }
+
+  _onSourceResponse(response) {
+    const { contentType, source } = response;
+    if (source instanceof ArrayBufferFront) {
+      return source.slice(0, source.length).then(function (resp) {
+        if (resp.error) {
+          return resp;
+        }
+        // Keeping str as a string, ArrayBuffer/Uint8Array will not survive
+        // setIn/mergeIn operations.
+        const str = atob(resp.encoded);
+        const newResponse = {
+          source: {
+            binary: str,
+            toString: () => "[wasm]",
+          },
+          contentType,
+        };
+        return newResponse;
+      });
+    }
+
+    return source.substring(0, source.length).then(function (resp) {
+      if (resp.error) {
+        return resp;
+      }
+
+      const newResponse = {
+        source: resp,
+        contentType,
+      };
+      return newResponse;
+    });
+  }
+}
+
+exports.SourceFront = SourceFront;
+registerFront(SourceFront);
diff --git a/devtools/client/fronts/storage.js b/devtools/client/fronts/storage.js
new file mode 100644
index 0000000000..7637471126
--- /dev/null
+++ b/devtools/client/fronts/storage.js
@@ -0,0 +1,55 @@
+/* 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 {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const { childSpecs } = require("resource://devtools/shared/specs/storage.js");
+
+for (const childSpec of Object.values(childSpecs)) {
+  class ChildStorageFront extends FrontClassWithSpec(childSpec) {
+    constructor(client, targetFront, parentFront) {
+      super(client, targetFront, parentFront);
+
+      this.on("single-store-update", this._onStoreUpdate.bind(this));
+    }
+
+    form(form) {
+      this.actorID = form.actor;
+      this.hosts = form.hosts;
+      this.traits = form.traits || {};
+      return null;
+    }
+
+    // Update the storage fronts `hosts` properties with potential new hosts and remove the deleted ones
+    async _onStoreUpdate({ changed, added, deleted }) {
+      // `resourceKey` comes from the storage resource and is set by the legacy listener
+      // -or- the resource transformer.
+      const { resourceKey } = this;
+      if (added) {
+        for (const host in added[resourceKey]) {
+          if (!this.hosts[host]) {
+            this.hosts[host] = added[resourceKey][host];
+          }
+        }
+      }
+      if (deleted) {
+        // While addition have to be added immediately, before ui.js receive single-store-update event
+        // Deletions have to be removed after ui.js processed single-store-update.
+        //
+        // Unfortunately it makes some tests to fail, for ex: browser_storage_cookies_delete_all.js
+        //
+        //setTimeout(()=> {
+        //  for (const host in deleted[resourceKey]) {
+        //    delete this.hosts[host];
+        //  }
+        //}, 2000);
+      }
+    }
+  }
+  registerFront(ChildStorageFront);
+}
diff --git a/devtools/client/fronts/string.js b/devtools/client/fronts/string.js
new file mode 100644
index 0000000000..0a05d20c3e
--- /dev/null
+++ b/devtools/client/fronts/string.js
@@ -0,0 +1,62 @@
+/* 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 {
+  DevToolsServer,
+} = require("resource://devtools/server/devtools-server.js");
+const {
+  longStringSpec,
+  SimpleStringFront,
+} = require("resource://devtools/shared/specs/string.js");
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+
+class LongStringFront extends FrontClassWithSpec(longStringSpec) {
+  destroy() {
+    this.initial = null;
+    this.length = null;
+    this.strPromise = null;
+    super.destroy();
+  }
+
+  form(data) {
+    this.actorID = data.actor;
+    this.initial = data.initial;
+    this.length = data.length;
+
+    this._grip = data;
+  }
+
+  // We expose the grip so consumers (e.g. ObjectInspector) that handle webconsole
+  // evaluations (which can return primitive, object fronts or longString front),
+  // can directly call this without further check.
+  getGrip() {
+    return this._grip;
+  }
+
+  string() {
+    if (!this.strPromise) {
+      const promiseRest = thusFar => {
+        if (thusFar.length === this.length) {
+          return Promise.resolve(thusFar);
+        }
+        return this.substring(
+          thusFar.length,
+          thusFar.length + DevToolsServer.LONG_STRING_READ_LENGTH
+        ).then(next => promiseRest(thusFar + next));
+      };
+
+      this.strPromise = promiseRest(this.initial);
+    }
+    return this.strPromise;
+  }
+}
+
+exports.LongStringFront = LongStringFront;
+registerFront(LongStringFront);
+exports.SimpleStringFront = SimpleStringFront;
+registerFront(SimpleStringFront);
diff --git a/devtools/client/fronts/style-rule.js b/devtools/client/fronts/style-rule.js
new file mode 100644
index 0000000000..c690e9e9e0
--- /dev/null
+++ b/devtools/client/fronts/style-rule.js
@@ -0,0 +1,310 @@
+/* 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 {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  styleRuleSpec,
+} = require("resource://devtools/shared/specs/style-rule.js");
+
+loader.lazyRequireGetter(
+  this,
+  "RuleRewriter",
+  "resource://devtools/client/fronts/inspector/rule-rewriter.js"
+);
+
+/**
+ * StyleRuleFront, the front for the StyleRule actor.
+ */
+class StyleRuleFront extends FrontClassWithSpec(styleRuleSpec) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+
+    this.before("location-changed", this._locationChangedPre.bind(this));
+  }
+
+  form(form) {
+    this.actorID = form.actor;
+    this._form = form;
+    this.traits = form.traits || {};
+  }
+
+  /**
+   * Ensure _form is updated when location-changed is emitted.
+   */
+  _locationChangedPre(line, column) {
+    this._form.line = line;
+    this._form.column = column;
+  }
+
+  /**
+   * Return a new RuleModificationList or RuleRewriter for this node.
+   * A RuleRewriter will be returned when the rule's canSetRuleText
+   * trait is true; otherwise a RuleModificationList will be
+   * returned.
+   *
+   * @param {CssPropertiesFront} cssProperties
+   *                             This is needed by the RuleRewriter.
+   * @return {RuleModificationList}
+   */
+  startModifyingProperties(cssProperties) {
+    if (this.canSetRuleText) {
+      return new RuleRewriter(cssProperties.isKnown, this, this.authoredText);
+    }
+    return new RuleModificationList(this);
+  }
+
+  get type() {
+    return this._form.type;
+  }
+  get line() {
+    return this._form.line || -1;
+  }
+  get column() {
+    return this._form.column || -1;
+  }
+  get cssText() {
+    return this._form.cssText;
+  }
+  get authoredText() {
+    return typeof this._form.authoredText === "string"
+      ? this._form.authoredText
+      : this._form.cssText;
+  }
+  get declarations() {
+    return this._form.declarations || [];
+  }
+  get keyText() {
+    return this._form.keyText;
+  }
+  get name() {
+    return this._form.name;
+  }
+  get selectors() {
+    return this._form.selectors;
+  }
+
+  /**
+   * When a rule is nested in another non-at-rule (aka CSS Nesting), this will return
+   * the "full" selectors, which includes ancestor rules selectors.
+   * To compute it, the parent selector (&) is recursively replaced by the parent
+   * rule selector wrapped in `:is()`.
+   * For example, with the following nested rule: `body { & > main {} }`,
+   * the desugared selectors will be [`:is(body) > main`],
+   * while the "regular" selectors will only be [`main`].
+   *
+   * See https://www.w3.org/TR/css-nesting-1/#nest-selector for more information.
+   *
+   * @returns {Array<String>} An array of the desugared selectors for this rule.
+   *                          This falls back to the regular list of selectors
+   *                          when desugared selectors are not sent by the server.
+   */
+  get desugaredSelectors() {
+    // We don't send the desugaredSelectors for top-level selectors, so fall back to
+    // the regular selectors in that case.
+    return this._form.desugaredSelectors || this._form.selectors;
+  }
+
+  get selectorWarnings() {
+    return this._form.selectorWarnings;
+  }
+
+  get parentStyleSheet() {
+    const resourceCommand = this.targetFront.commands.resourceCommand;
+    return resourceCommand.getResourceById(
+      resourceCommand.TYPES.STYLESHEET,
+      this._form.parentStyleSheet
+    );
+  }
+
+  get element() {
+    return this.conn.getFrontByID(this._form.element);
+  }
+
+  get href() {
+    if (this._form.href) {
+      return this._form.href;
+    }
+    const sheet = this.parentStyleSheet;
+    return sheet ? sheet.href : "";
+  }
+
+  get nodeHref() {
+    const sheet = this.parentStyleSheet;
+    return sheet ? sheet.nodeHref : "";
+  }
+
+  get canSetRuleText() {
+    return this._form.traits && this._form.traits.canSetRuleText;
+  }
+
+  get location() {
+    return {
+      source: this.parentStyleSheet,
+      href: this.href,
+      line: this.line,
+      column: this.column,
+    };
+  }
+
+  get ancestorData() {
+    return this._form.ancestorData;
+  }
+
+  get userAdded() {
+    return this._form.userAdded;
+  }
+
+  async modifySelector(node, value) {
+    const response = await super.modifySelector(
+      node,
+      value,
+      this.canSetRuleText
+    );
+
+    if (response.ruleProps) {
+      response.ruleProps = response.ruleProps.entries[0];
+    }
+    return response;
+  }
+
+  setRuleText(newText, modifications) {
+    this._form.authoredText = newText;
+    return super.setRuleText(newText, modifications);
+  }
+}
+
+exports.StyleRuleFront = StyleRuleFront;
+registerFront(StyleRuleFront);
+
+/**
+ * Convenience API for building a list of attribute modifications
+ * for the `modifyProperties` request.  A RuleModificationList holds a
+ * list of modifications that will be applied to a StyleRuleActor.
+ * The modifications are processed in the order in which they are
+ * added to the RuleModificationList.
+ *
+ * Objects of this type expose the same API as @see RuleRewriter.
+ * This lets the inspector use (mostly) the same code, regardless of
+ * whether the server implements setRuleText.
+ */
+class RuleModificationList {
+  /**
+   * Initialize a RuleModificationList.
+   * @param {StyleRuleFront} rule the associated rule
+   */
+  constructor(rule) {
+    this.rule = rule;
+    this.modifications = [];
+  }
+
+  /**
+   * Apply the modifications in this object to the associated rule.
+   *
+   * @return {Promise} A promise which will be resolved when the modifications
+   *         are complete; @see StyleRuleActor.modifyProperties.
+   */
+  apply() {
+    return this.rule.modifyProperties(this.modifications);
+  }
+
+  /**
+   * Add a "set" entry to the modification list.
+   *
+   * @param {Number} index index of the property in the rule.
+   *                       This can be -1 in the case where
+   *                       the rule does not support setRuleText;
+   *                       generally for setting properties
+   *                       on an element's style.
+   * @param {String} name the property's name
+   * @param {String} value the property's value
+   * @param {String} priority the property's priority, either the empty
+   *                          string or "important"
+   */
+  setProperty(index, name, value, priority) {
+    this.modifications.push({ type: "set", index, name, value, priority });
+  }
+
+  /**
+   * Add a "remove" entry to the modification list.
+   *
+   * @param {Number} index index of the property in the rule.
+   *                       This can be -1 in the case where
+   *                       the rule does not support setRuleText;
+   *                       generally for setting properties
+   *                       on an element's style.
+   * @param {String} name the name of the property to remove
+   */
+  removeProperty(index, name) {
+    this.modifications.push({ type: "remove", index, name });
+  }
+
+  /**
+   * Rename a property.  This implementation acts like
+   * |removeProperty|, because |setRuleText| is not available.
+   *
+   * @param {Number} index index of the property in the rule.
+   *                       This can be -1 in the case where
+   *                       the rule does not support setRuleText;
+   *                       generally for setting properties
+   *                       on an element's style.
+   * @param {String} name current name of the property
+   *
+   * This parameter is also passed, but as it is not used in this
+   * implementation, it is omitted.  It is documented here as this
+   * code also defined the interface implemented by @see RuleRewriter.
+   * @param {String} newName new name of the property
+   */
+  renameProperty(index, name) {
+    this.removeProperty(index, name);
+  }
+
+  /**
+   * Enable or disable a property.  This implementation acts like
+   * a no-op when enabling, because |setRuleText| is not available.
+   *
+   * @param {Number} index index of the property in the rule.
+   *                       This can be -1 in the case where
+   *                       the rule does not support setRuleText;
+   *                       generally for setting properties
+   *                       on an element's style.
+   * @param {String} name current name of the property
+   * @param {Boolean} isEnabled true if the property should be enabled;
+   *                        false if it should be disabled
+   */
+  setPropertyEnabled(index, name, isEnabled) {
+    if (!isEnabled) {
+      this.modifications.push({ type: "disable", index, name });
+    }
+  }
+
+  /**
+   * Create a new property.  This implementation does nothing, because
+   * |setRuleText| is not available.
+   *
+   * These parameters are passed, but as they are not used in this
+   * implementation, they are omitted.  They are documented here as
+   * this code also defined the interface implemented by @see
+   * RuleRewriter.
+   *
+   * @param {Number} index index of the property in the rule.
+   *                       This can be -1 in the case where
+   *                       the rule does not support setRuleText;
+   *                       generally for setting properties
+   *                       on an element's style.
+   * @param {String} name name of the new property
+   * @param {String} value value of the new property
+   * @param {String} priority priority of the new property; either
+   *                          the empty string or "important"
+   * @param {Boolean} enabled True if the new property should be
+   *                          enabled, false if disabled
+   */
+  createProperty() {
+    // Nothing.
+  }
+}
diff --git a/devtools/client/fronts/style-sheets.js b/devtools/client/fronts/style-sheets.js
new file mode 100644
index 0000000000..de6010aa74
--- /dev/null
+++ b/devtools/client/fronts/style-sheets.js
@@ -0,0 +1,37 @@
+/* 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 {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  styleSheetsSpec,
+} = require("resource://devtools/shared/specs/style-sheets.js");
+
+/**
+ * The corresponding Front object for the StyleSheetsActor.
+ */
+class StyleSheetsFront extends FrontClassWithSpec(styleSheetsSpec) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+
+    // Attribute name from which to retrieve the actorID out of the target actor's form
+    this.formAttributeName = "styleSheetsActor";
+  }
+
+  async getTraits() {
+    if (this._traits) {
+      return this._traits;
+    }
+    const { traits } = await super.getTraits();
+    this._traits = traits;
+    return this._traits;
+  }
+}
+
+exports.StyleSheetsFront = StyleSheetsFront;
+registerFront(StyleSheetsFront);
diff --git a/devtools/client/fronts/symbol-iterator.js b/devtools/client/fronts/symbol-iterator.js
new file mode 100644
index 0000000000..1f6cd2581c
--- /dev/null
+++ b/devtools/client/fronts/symbol-iterator.js
@@ -0,0 +1,56 @@
+/* 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 {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  symbolIteratorSpec,
+} = require("resource://devtools/shared/specs/symbol-iterator.js");
+const {
+  getAdHocFrontOrPrimitiveGrip,
+} = require("resource://devtools/client/fronts/object.js");
+
+/**
+ * A SymbolIteratorFront is used as a front end for the SymbolIterator that is
+ * created on the server, hiding implementation details.
+ */
+class SymbolIteratorFront extends FrontClassWithSpec(symbolIteratorSpec) {
+  form(data) {
+    this.actorID = data.actor;
+    this.count = data.count;
+  }
+
+  async slice(start, count) {
+    const result = await super.slice({ start, count });
+    return this._onResult(result);
+  }
+
+  async all() {
+    const result = await super.all();
+    return this._onResult(result);
+  }
+
+  _onResult(result) {
+    if (!result.ownSymbols) {
+      return result;
+    }
+
+    result.ownSymbols.forEach((item, i) => {
+      if (item?.descriptor) {
+        result.ownSymbols[i].descriptor.value = getAdHocFrontOrPrimitiveGrip(
+          item.descriptor.value,
+          this
+        );
+      }
+    });
+    return result;
+  }
+}
+
+exports.SymbolIteratorFront = SymbolIteratorFront;
+registerFront(SymbolIteratorFront);
diff --git a/devtools/client/fronts/target-configuration.js b/devtools/client/fronts/target-configuration.js
new file mode 100644
index 0000000000..33ed2cd593
--- /dev/null
+++ b/devtools/client/fronts/target-configuration.js
@@ -0,0 +1,33 @@
+/* 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 {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  targetConfigurationSpec,
+} = require("resource://devtools/shared/specs/target-configuration.js");
+
+/**
+ * The TargetConfigurationFront/Actor should be used to populate the DevTools server
+ * with settings read from the client side but which impact the server.
+ * For instance, "disable cache" is a feature toggled via DevTools UI (client),
+ * but which should be communicated to the targets (server).
+ *
+ * See the TargetConfigurationActor for a list of supported configuration options.
+ */
+class TargetConfigurationFront extends FrontClassWithSpec(
+  targetConfigurationSpec
+) {
+  form(json) {
+    // Read the initial configuration.
+    this.initialConfiguration = json.configuration;
+    this.traits = json.traits;
+  }
+}
+
+registerFront(TargetConfigurationFront);
diff --git a/devtools/client/fronts/targets/content-process.js b/devtools/client/fronts/targets/content-process.js
new file mode 100644
index 0000000000..7629cb8449
--- /dev/null
+++ b/devtools/client/fronts/targets/content-process.js
@@ -0,0 +1,57 @@
+/* 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 {
+  contentProcessTargetSpec,
+} = require("resource://devtools/shared/specs/targets/content-process.js");
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  TargetMixin,
+} = require("resource://devtools/client/fronts/targets/target-mixin.js");
+
+class ContentProcessTargetFront extends TargetMixin(
+  FrontClassWithSpec(contentProcessTargetSpec)
+) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+
+    this.traits = {};
+  }
+
+  form(json) {
+    this.actorID = json.actor;
+    this.processID = json.processID;
+
+    // Save the full form for Target class usage.
+    // Do not use `form` name to avoid colliding with protocol.js's `form` method
+    this.targetForm = json;
+
+    this.remoteType = json.remoteType;
+    this.isXpcShellTarget = json.isXpcShellTarget;
+  }
+
+  get name() {
+    // @backward-compat { version 87 } We now have `remoteType` attribute.
+    if (this.remoteType) {
+      return `(pid ${this.processID}) ${this.remoteType.replace(
+        "webIsolated=",
+        ""
+      )}`;
+    }
+    return `(pid ${this.processID}) Content Process`;
+  }
+
+  reconfigure() {
+    // Toolbox and options panel are calling this method but Worker Target can't be
+    // reconfigured. So we ignore this call here.
+    return Promise.resolve();
+  }
+}
+
+exports.ContentProcessTargetFront = ContentProcessTargetFront;
+registerFront(exports.ContentProcessTargetFront);
diff --git a/devtools/client/fronts/targets/moz.build b/devtools/client/fronts/targets/moz.build
new file mode 100644
index 0000000000..82b82f24a7
--- /dev/null
+++ b/devtools/client/fronts/targets/moz.build
@@ -0,0 +1,12 @@
+# -*- 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(
+    "content-process.js",
+    "target-mixin.js",
+    "window-global.js",
+    "worker.js",
+)
diff --git a/devtools/client/fronts/targets/target-mixin.js b/devtools/client/fronts/targets/target-mixin.js
new file mode 100644
index 0000000000..157e83e73a
--- /dev/null
+++ b/devtools/client/fronts/targets/target-mixin.js
@@ -0,0 +1,630 @@
+/* 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,
+  "getFront",
+  "resource://devtools/shared/protocol.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "getThreadOptions",
+  "resource://devtools/client/shared/thread-utils.js",
+  true
+);
+
+/**
+ * A Target represents a debuggable context. It can be a browser tab, a tab on
+ * a remote device, like a tab on Firefox for Android. But it can also be an add-on,
+ * as well as firefox parent process, or just one of its content process.
+ * A Target is related to a given TargetActor, for which we derive this class.
+ *
+ * Providing a generalized abstraction of a web-page or web-browser (available
+ * either locally or remotely) is beyond the scope of this class (and maybe
+ * also beyond the scope of this universe) However Target does attempt to
+ * abstract some common events and read-only properties common to many Tools.
+ *
+ * Supported read-only properties:
+ * - name, url
+ *
+ * Target extends EventEmitter and provides support for the following events:
+ * - close: The target window has been closed. All tools attached to this
+ *          target should close. This event is not currently cancelable.
+ *
+ * Optional events only dispatched by WindowGlobalTarget:
+ * - will-navigate: The target window will navigate to a different URL
+ * - navigate: The target window has navigated to a different URL
+ */
+function TargetMixin(parentClass) {
+  class Target extends parentClass {
+    constructor(client, targetFront, parentFront) {
+      super(client, targetFront, parentFront);
+
+      // TargetCommand._onTargetAvailable will set this public attribute.
+      // This is a reference to the related `commands` object and helps all fronts
+      // easily call any command method. Without this bit of magic, Fronts wouldn't
+      // be able to interact with any commands while it is frequently useful.
+      this.commands = null;
+
+      this.destroy = this.destroy.bind(this);
+
+      this.threadFront = null;
+
+      this._client = client;
+
+      // Cache of already created targed-scoped fronts
+      // [typeName:string => Front instance]
+      this.fronts = new Map();
+
+      // `resource-available-form` and `resource-updated-form` events can be emitted
+      // by target actors before the ResourceCommand could add event listeners.
+      // The target front will cache those events until the ResourceCommand has
+      // added the listeners.
+      this._resourceCache = {};
+
+      // In order to avoid destroying the `_resourceCache[event]`, we need to call `super.on()`
+      // instead of `this.on()`.
+      const offResourceAvailable = super.on(
+        "resource-available-form",
+        this._onResourceEvent.bind(this, "resource-available-form")
+      );
+      const offResourceUpdated = super.on(
+        "resource-updated-form",
+        this._onResourceEvent.bind(this, "resource-updated-form")
+      );
+
+      this._offResourceEvent = new Map([
+        ["resource-available-form", offResourceAvailable],
+        ["resource-updated-form", offResourceUpdated],
+      ]);
+
+      // Expose a promise that is resolved once the target front is usable
+      // i.e. once attachAndInitThread has been called and resolved.
+      this.initialized = new Promise(resolve => {
+        this._onInitialized = resolve;
+      });
+    }
+
+    on(eventName, listener) {
+      if (this._offResourceEvent && this._offResourceEvent.has(eventName)) {
+        // If a callsite sets an event listener for resource-(available|update)-form:
+
+        // we want to remove the listener we set here in the constructor…
+        const off = this._offResourceEvent.get(eventName);
+        this._offResourceEvent.delete(eventName);
+        off();
+
+        // …and call the new listener with the resources that were put in the cache.
+        if (this._resourceCache[eventName]) {
+          for (const cache of this._resourceCache[eventName]) {
+            listener(cache);
+          }
+          delete this._resourceCache[eventName];
+        }
+      }
+
+      return super.on(eventName, listener);
+    }
+
+    /**
+     * Boolean flag to help distinguish Target Fronts from other Fronts.
+     * As we are using a Mixin, we can't easily distinguish these fronts via instanceof().
+     */
+    get isTargetFront() {
+      return true;
+    }
+
+    get targetType() {
+      return this._targetType;
+    }
+
+    get isTopLevel() {
+      // We can't use `getTrait` here as this might be called from a destroyed target (e.g.
+      // from an onTargetDestroyed callback that was triggered by a legacy listener), which
+      // means `this.client` would be null, which would make `getTrait` throw (See Bug 1714974)
+      if (!this.targetForm.hasOwnProperty("isTopLevelTarget")) {
+        return !!this._isTopLevel;
+      }
+
+      return this.targetForm.isTopLevelTarget;
+    }
+
+    setTargetType(type) {
+      this._targetType = type;
+    }
+
+    setIsTopLevel(isTopLevel) {
+      if (!this.getTrait("supportsTopLevelTargetFlag")) {
+        this._isTopLevel = isTopLevel;
+      }
+    }
+
+    /**
+     * Get the immediate parent target for this target.
+     *
+     * @return {TargetMixin} the parent target.
+     */
+    async getParentTarget() {
+      return this.commands.targetCommand.getParentTarget(this);
+    }
+
+    /**
+     * Returns a Promise that resolves to a boolean indicating if the provided target is
+     * an ancestor of this instance.
+     *
+     * @param {TargetFront} target: The possible ancestor target.
+     * @returns Promise<Boolean>
+     */
+    async isTargetAnAncestor(target) {
+      const parentTargetFront = await this.getParentTarget();
+      if (!parentTargetFront) {
+        return false;
+      }
+
+      if (parentTargetFront == target) {
+        return true;
+      }
+
+      return parentTargetFront.isTargetAnAncestor(target);
+    }
+
+    /**
+     * Get the target for the given Browsing Context ID.
+     *
+     * @return {TargetMixin} the requested target.
+     */
+    async getWindowGlobalTarget(browsingContextID) {
+      // Just for sanity as commands attribute is set late from TargetCommand._onTargetAvailable
+      // but ideally target front should be used before this happens.
+      if (!this.commands) {
+        return null;
+      }
+      // Tab and Process Descriptors expose a Watcher, which is creating the
+      // targets and should be used to fetch any.
+      const { watcherFront } = this.commands;
+      if (watcherFront) {
+        // Safety check, in theory all watcher should support frames.
+        if (watcherFront.traits.frame) {
+          return watcherFront.getWindowGlobalTarget(browsingContextID);
+        }
+        return null;
+      }
+
+      // For descriptors which don't expose a watcher (e.g. WebExtension)
+      // we used to call RootActor::getBrowsingContextDescriptor, but it was
+      // removed in FF77.
+      // Support for watcher in WebExtension descriptors is Bug 1644341.
+      throw new Error(
+        `Unable to call getWindowGlobalTarget for ${this.actorID}`
+      );
+    }
+
+    /**
+     * Returns a boolean indicating whether or not the specific actor
+     * type exists.
+     *
+     * @param {String} actorName
+     * @return {Boolean}
+     */
+    hasActor(actorName) {
+      if (this.targetForm) {
+        return !!this.targetForm[actorName + "Actor"];
+      }
+      return false;
+    }
+
+    /**
+     * Returns a trait from the target actor if it exists,
+     * if not it will fallback to that on the root actor.
+     *
+     * @param {String} traitName
+     * @return {Mixed}
+     */
+    getTrait(traitName) {
+      // If the targeted actor exposes traits and has a defined value for this
+      // traits, override the root actor traits
+      if (this.targetForm.traits && traitName in this.targetForm.traits) {
+        return this.targetForm.traits[traitName];
+      }
+
+      return this.client.traits[traitName];
+    }
+
+    // Get a Front for a target-scoped actor.
+    // i.e. an actor served by RootActor.listTabs or RootActorActor.getTab requests
+    async getFront(typeName) {
+      if (this.isDestroyed()) {
+        throw new Error(
+          "Target already destroyed, unable to fetch children fronts"
+        );
+      }
+      let front = this.fronts.get(typeName);
+      if (front) {
+        // XXX: This is typically the kind of spot where switching to
+        // `isDestroyed()` is complicated, because `front` is not necessarily a
+        // Front...
+        const isFrontInitializing = typeof front.then === "function";
+        const isFrontAlive = !isFrontInitializing && !front.isDestroyed();
+        if (isFrontInitializing || isFrontAlive) {
+          return front;
+        }
+      }
+
+      front = getFront(this.client, typeName, this.targetForm, this);
+      this.fronts.set(typeName, front);
+      // replace the placeholder with the instance of the front once it has loaded
+      front = await front;
+      this.fronts.set(typeName, front);
+      return front;
+    }
+
+    getCachedFront(typeName) {
+      // do not wait for async fronts;
+      const front = this.fronts.get(typeName);
+      // ensure that the front is a front, and not async front
+      if (front?.actorID) {
+        return front;
+      }
+      return null;
+    }
+
+    get client() {
+      return this._client;
+    }
+
+    // Tells us if the related actor implements WindowGlobalTargetActor
+    // interface and requires to call `attach` request before being used and
+    // `detach` during cleanup.
+    get isBrowsingContext() {
+      return this.typeName === "windowGlobalTarget";
+    }
+
+    get name() {
+      if (this.isWebExtension || this.isContentProcess) {
+        return this.targetForm.name;
+      }
+      return this.title;
+    }
+
+    get title() {
+      return this._title || this.url;
+    }
+
+    get url() {
+      return this._url;
+    }
+
+    get isWorkerTarget() {
+      // XXX Remove the check on `workerDescriptor` as part of Bug 1667404.
+      return (
+        this.typeName === "workerTarget" || this.typeName === "workerDescriptor"
+      );
+    }
+
+    get isWebExtension() {
+      return !!(
+        this.targetForm &&
+        this.targetForm.actor &&
+        (this.targetForm.actor.match(/conn\d+\.webExtension(Target)?\d+/) ||
+          this.targetForm.actor.match(/child\d+\/webExtension(Target)?\d+/))
+      );
+    }
+
+    get isContentProcess() {
+      // browser content toolbox's form will be of the form:
+      //   server0.conn0.content-process0/contentProcessTarget7
+      // while xpcshell debugging will be:
+      //   server1.conn0.contentProcessTarget7
+      return !!(
+        this.targetForm &&
+        this.targetForm.actor &&
+        this.targetForm.actor.match(
+          /conn\d+\.(content-process\d+\/)?contentProcessTarget\d+/
+        )
+      );
+    }
+
+    get isParentProcess() {
+      return !!(
+        this.targetForm &&
+        this.targetForm.actor &&
+        this.targetForm.actor.match(/conn\d+\.parentProcessTarget\d+/)
+      );
+    }
+
+    getExtensionPathName(url) {
+      // Return the url if the target is not a webextension.
+      if (!this.isWebExtension) {
+        throw new Error("Target is not a WebExtension");
+      }
+
+      try {
+        const parsedURL = new URL(url);
+        // Only moz-extension URL should be shortened into the URL pathname.
+        if (parsedURL.protocol !== "moz-extension:") {
+          return url;
+        }
+        return parsedURL.pathname;
+      } catch (e) {
+        // Return the url if unable to resolve the pathname.
+        return url;
+      }
+    }
+
+    /**
+     * This method attaches the target and then attaches its related thread, sending it
+     * the options it needs (e.g. breakpoints, pause on exception setting, …).
+     * This function can be called multiple times, it will only perform the actual
+     * initialization process once; on subsequent call the original promise (_onThreadInitialized)
+     * will be returned.
+     *
+     * @param {TargetCommand} targetCommand
+     * @returns {Promise} A promise that resolves once the thread is attached and resumed.
+     */
+    attachAndInitThread(targetCommand) {
+      if (this._onThreadInitialized) {
+        return this._onThreadInitialized;
+      }
+
+      this._onThreadInitialized = this._attachAndInitThread(targetCommand);
+      // Resolve the `initialized` promise, while ignoring errors
+      // The empty function passed to catch will avoid spawning a new possibly rejected promise
+      this._onThreadInitialized.catch(() => {}).then(this._onInitialized);
+      return this._onThreadInitialized;
+    }
+
+    /**
+     * This method attach the target and then attach its related thread, sending it the
+     * options it needs (e.g. breakpoints, pause on exception setting, …)
+     *
+     * @private
+     * @param {TargetCommand} targetCommand
+     * @returns {Promise} A promise that resolves once the thread is attached and resumed.
+     */
+    async _attachAndInitThread(targetCommand) {
+      // If the target is destroyed or soon will be, don't go further
+      if (this.isDestroyedOrBeingDestroyed()) {
+        return;
+      }
+
+      // The current class we have is actually the WorkerDescriptorFront,
+      // which will morph into a target by fetching the underlying target's form.
+      // Ideally, worker targets would be spawn by the server, and we would no longer
+      // have the hybrid descriptor/target class which brings lots of complexity and confusion.
+      // To be removed in bug 1651522.
+      if (this.morphWorkerDescriptorIntoWorkerTarget) {
+        await this.morphWorkerDescriptorIntoWorkerTarget();
+      }
+
+      const isBrowserToolbox =
+        targetCommand.descriptorFront.isBrowserProcessDescriptor;
+      const isNonTopLevelFrameTarget =
+        !this.isTopLevel && this.targetType === targetCommand.TYPES.FRAME;
+
+      if (isBrowserToolbox && isNonTopLevelFrameTarget) {
+        // In the BrowserToolbox, non-top-level frame targets are already
+        // debugged via content-process targets.
+        // Do not attach the thread here, as it was already done by the
+        // corresponding content-process target.
+        return;
+      }
+
+      // Avoid attaching any thread actor in the browser console or in
+      // webextension commands in order to avoid triggering any type of
+      // breakpoint.
+      if (targetCommand.descriptorFront.doNotAttachThreadActor) {
+        return;
+      }
+
+      const options = await getThreadOptions();
+      // If the target is destroyed or soon will be, don't go further
+      if (this.isDestroyedOrBeingDestroyed()) {
+        return;
+      }
+      await this.attachThread(options);
+    }
+
+    async attachThread(options = {}) {
+      if (!this.targetForm || !this.targetForm.threadActor) {
+        throw new Error(
+          "TargetMixin sub class should set targetForm.threadActor before calling " +
+            "attachThread"
+        );
+      }
+      this.threadFront = await this.getFront("thread");
+
+      // Avoid attaching if the thread actor was already attached on target creation from the server side.
+      // This doesn't include:
+      // * targets that aren't yet supported by the Watcher (like web extensions),
+      // * workers, which still use a unique codepath for thread actor attach
+      // * all targets when connecting to an older server
+      // If all targets are supported by watcher actor, and workers no longer use
+      // its unique attach sequence, we can assume the thread front is always attached.
+      const isAttached = await this.threadFront.isAttached();
+
+      const isDestroyed =
+        this.isDestroyedOrBeingDestroyed() || this.threadFront.isDestroyed();
+      if (!isAttached && !isDestroyed) {
+        await this.threadFront.attach(options);
+      }
+
+      return this.threadFront;
+    }
+
+    isDestroyedOrBeingDestroyed() {
+      return this.isDestroyed() || this._destroyer;
+    }
+
+    /**
+     * Target is not alive anymore.
+     */
+    destroy() {
+      // If several things call destroy then we give them all the same
+      // destruction promise so we're sure to destroy only once
+      if (this._destroyer) {
+        return this._destroyer;
+      }
+
+      // This pattern allows to immediately return the destroyer promise.
+      // See Bug 1602727 for more details.
+      let destroyerResolve;
+      this._destroyer = new Promise(r => (destroyerResolve = r));
+      this._destroyTarget().then(destroyerResolve);
+
+      return this._destroyer;
+    }
+
+    async _destroyTarget() {
+      // If the target is being attached, try to wait until it's done, to prevent having
+      // pending connection to the server when the toolbox is destroyed.
+      if (this._onThreadInitialized) {
+        try {
+          await this._onThreadInitialized;
+        } catch (e) {
+          // We might still get into cases where attaching fails (e.g. the worker we're
+          // trying to attach to is already closed). Since the target is being destroyed,
+          // we don't need to do anything special here.
+        }
+      }
+
+      for (let [name, front] of this.fronts) {
+        try {
+          // If a Front with an async initialize method is still being instantiated,
+          // we should wait for completion before trying to destroy it.
+          if (front instanceof Promise) {
+            front = await front;
+          }
+          front.destroy();
+        } catch (e) {
+          console.warn("Error while destroying front:", name, e);
+        }
+      }
+      this.fronts.clear();
+
+      this.threadFront = null;
+      this._offResourceEvent = null;
+
+      // This event should be emitted before calling super.destroy(), because
+      // super.destroy() will remove all event listeners attached to this front.
+      this.emit("target-destroyed");
+
+      // Not all targets supports attach/detach. For example content process doesn't.
+      // Also ensure that the front is still active before trying to do the request.
+      if (this.detach && !this.isDestroyed()) {
+        // The client was handed to us, so we are not responsible for closing
+        // it. We just need to detach from the tab, if already attached.
+        // |detach| may fail if the connection is already dead, so proceed with
+        // cleanup directly after this.
+        try {
+          await this.detach();
+        } catch (e) {
+          this.logDetachError(e);
+        }
+      }
+
+      // Do that very last in order to let a chance to dispatch `detach` requests.
+      super.destroy();
+
+      this._cleanup();
+    }
+
+    /**
+     * Detach can fail under regular circumstances, if the target was already
+     * destroyed on the server side. All target fronts should handle detach
+     * error logging in similar ways so this might be used by subclasses
+     * with custom detach() implementations.
+     *
+     * @param {Error} e
+     *        The real error object.
+     * @param {String} targetType
+     *        The type of the target front ("worker", "browsing-context", ...)
+     */
+    logDetachError(e, targetType) {
+      const ignoredError =
+        e?.message.includes("noSuchActor") ||
+        e?.message.includes("Connection closed");
+
+      // Silence exceptions for already destroyed actors and fronts:
+      // - "noSuchActor" errors from the server
+      // - "Connection closed" errors from the client, when purging requests
+      if (ignoredError) {
+        return;
+      }
+
+      // Properly log any other error.
+      const message = targetType
+        ? `Error while detaching the ${targetType} target:`
+        : "Error while detaching target:";
+      console.warn(message, e);
+    }
+
+    /**
+     * Clean up references to what this target points to.
+     */
+    _cleanup() {
+      this.threadFront = null;
+      this._client = null;
+
+      this._title = null;
+      this._url = null;
+    }
+
+    _onResourceEvent(eventName, resources) {
+      if (!this._resourceCache[eventName]) {
+        this._resourceCache[eventName] = [];
+      }
+      this._resourceCache[eventName].push(resources);
+    }
+
+    toString() {
+      const id = this.targetForm ? this.targetForm.actor : null;
+      return `Target:${id}`;
+    }
+
+    dumpPools() {
+      // NOTE: dumpPools is defined in the Thread actor to avoid
+      // adding it to multiple target specs and actors.
+      return this.threadFront.dumpPools();
+    }
+
+    /**
+     * Log an error of some kind to the tab's console.
+     *
+     * @param {String} text
+     *                 The text to log.
+     * @param {String} category
+     *                 The category of the message.  @see nsIScriptError.
+     * @returns {Promise}
+     */
+    logErrorInPage(text, category) {
+      if (this.getTrait("logInPage")) {
+        const errorFlag = 0;
+        return this.logInPage({ text, category, flags: errorFlag });
+      }
+      return Promise.resolve();
+    }
+
+    /**
+     * Log a warning of some kind to the tab's console.
+     *
+     * @param {String} text
+     *                 The text to log.
+     * @param {String} category
+     *                 The category of the message.  @see nsIScriptError.
+     * @returns {Promise}
+     */
+    logWarningInPage(text, category) {
+      if (this.getTrait("logInPage")) {
+        const warningFlag = 1;
+        return this.logInPage({ text, category, flags: warningFlag });
+      }
+      return Promise.resolve();
+    }
+  }
+  return Target;
+}
+exports.TargetMixin = TargetMixin;
diff --git a/devtools/client/fronts/targets/window-global.js b/devtools/client/fronts/targets/window-global.js
new file mode 100644
index 0000000000..8bf69383e0
--- /dev/null
+++ b/devtools/client/fronts/targets/window-global.js
@@ -0,0 +1,172 @@
+/* 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 {
+  windowGlobalTargetSpec,
+} = require("resource://devtools/shared/specs/targets/window-global.js");
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  TargetMixin,
+} = require("resource://devtools/client/fronts/targets/target-mixin.js");
+
+class WindowGlobalTargetFront extends TargetMixin(
+  FrontClassWithSpec(windowGlobalTargetSpec)
+) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+
+    // For targets which support the Watcher and configuration actor, the status
+    // for the `javascriptEnabled` setting will be available on the configuration
+    // front, and the target will only be used to read the initial value from older
+    // servers.
+    // Note: this property is marked as private but is accessed by the
+    // TargetCommand to provide the "isJavascriptEnabled" wrapper. It should NOT be
+    // used anywhere else.
+    this._javascriptEnabled = null;
+
+    // If this target was retrieved via NodeFront connectToFrame, keep a
+    // reference to the parent NodeFront.
+    this._parentNodeFront = null;
+
+    this._onTabNavigated = this._onTabNavigated.bind(this);
+    this._onFrameUpdate = this._onFrameUpdate.bind(this);
+
+    this.on("tabNavigated", this._onTabNavigated);
+    this.on("frameUpdate", this._onFrameUpdate);
+  }
+
+  form(json) {
+    this.actorID = json.actor;
+    this.browsingContextID = json.browsingContextID;
+    this.innerWindowId = json.innerWindowId;
+    this.processID = json.processID;
+
+    // Save the full form for Target class usage.
+    // Do not use `form` name to avoid colliding with protocol.js's `form` method
+    this.targetForm = json;
+
+    this.outerWindowID = json.outerWindowID;
+    this.favicon = json.favicon;
+
+    // Initial value for the page title and url. Since the WindowGlobalTargetActor can
+    // be created very early, those might not represent the actual value we'd want to
+    // display for the user (e.g. the <title> might not have been parsed yet, and the
+    // url could still be about:blank, which is what the platform uses at the very start
+    // of a navigation to a new location).
+    // Those values are set again  from the targetCommand when receiving DOCUMENT_EVENT
+    // resource, at which point both values should be in their expected form.
+    this.setTitle(json.title);
+    this.setUrl(json.url);
+  }
+
+  /**
+   * Event listener for `frameUpdate` event.
+   */
+  _onFrameUpdate(packet) {
+    this.emit("frame-update", packet);
+  }
+
+  /**
+   * Event listener for `tabNavigated` event.
+   */
+  _onTabNavigated(packet) {
+    const event = Object.create(null);
+    event.url = packet.url;
+    event.title = packet.title;
+    event.isFrameSwitching = packet.isFrameSwitching;
+
+    // Keep the title unmodified when a developer toolbox switches frame
+    // for a tab (Bug 1261687), but always update the title when the target
+    // is a WebExtension (where the addon name is always included in the title
+    // and the url is supposed to be updated every time the selected frame changes).
+    if (!packet.isFrameSwitching || this.isWebExtension) {
+      this.setTitle(packet.title);
+      this.setUrl(packet.url);
+    }
+
+    // Send any stored event payload (DOMWindow or nsIRequest) for backwards
+    // compatibility with non-remotable tools.
+    if (packet.state == "start") {
+      this.emit("will-navigate", event);
+    } else {
+      this.emit("navigate", event);
+    }
+  }
+
+  getParentNodeFront() {
+    return this._parentNodeFront;
+  }
+
+  setParentNodeFront(nodeFront) {
+    this._parentNodeFront = nodeFront;
+  }
+
+  /**
+   * Set the targetFront url.
+   *
+   * @param {string} url
+   */
+  setUrl(url) {
+    this._url = url;
+  }
+
+  /**
+   * Set the targetFront title.
+   *
+   * @param {string} title
+   */
+  setTitle(title) {
+    this._title = title;
+  }
+
+  async detach() {
+    // When calling this.destroy() at the end of this method,
+    // we will end up calling detach again from TargetMixin.destroy.
+    // Avoid invalid loops and do not try to resolve only once the previous call to detach
+    // is done as it would do async infinite loop that never resolves.
+    if (this._isDetaching) {
+      return;
+    }
+    this._isDetaching = true;
+
+    // Remove listeners set in constructor
+    this.off("tabNavigated", this._onTabNavigated);
+    this.off("frameUpdate", this._onFrameUpdate);
+
+    try {
+      await super.detach();
+    } catch (e) {
+      this.logDetachError(e, "browsing context");
+    }
+
+    // Detach will destroy the target actor, but the server won't emit any
+    // target-destroyed-form in such manual, client side destruction.
+    // So that we have to manually destroy the associated front on the client
+    //
+    // If detach was called by TargetFrontMixin.destroy, avoid recalling it from it
+    // as it would do an async infinite loop which would never resolve.
+    if (!this.isDestroyedOrBeingDestroyed()) {
+      this.destroy();
+    }
+  }
+
+  destroy() {
+    const promise = super.destroy();
+    this._parentNodeFront = null;
+
+    // As detach isn't necessarily called on target's destroy
+    // (it isn't for local tabs), ensure removing listeners set in constructor.
+    this.off("tabNavigated", this._onTabNavigated);
+    this.off("frameUpdate", this._onFrameUpdate);
+
+    return promise;
+  }
+}
+
+exports.WindowGlobalTargetFront = WindowGlobalTargetFront;
+registerFront(exports.WindowGlobalTargetFront);
diff --git a/devtools/client/fronts/targets/worker.js b/devtools/client/fronts/targets/worker.js
new file mode 100644
index 0000000000..769706577d
--- /dev/null
+++ b/devtools/client/fronts/targets/worker.js
@@ -0,0 +1,47 @@
+/* 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 {
+  workerTargetSpec,
+} = require("resource://devtools/shared/specs/targets/worker.js");
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  TargetMixin,
+} = require("resource://devtools/client/fronts/targets/target-mixin.js");
+
+class WorkerTargetFront extends TargetMixin(
+  FrontClassWithSpec(workerTargetSpec)
+) {
+  get isDedicatedWorker() {
+    return this._type === Ci.nsIWorkerDebugger.TYPE_DEDICATED;
+  }
+
+  get isSharedWorker() {
+    return this._type === Ci.nsIWorkerDebugger.TYPE_SHARED;
+  }
+
+  get isServiceWorker() {
+    return this._type === Ci.nsIWorkerDebugger.TYPE_SERVICE;
+  }
+  form(json) {
+    this.actorID = json.actor;
+
+    // Save the full form for Target class usage.
+    // Do not use `form` name to avoid colliding with protocol.js's `form` method
+    this.targetForm = json;
+
+    this._title = json.title;
+    this._url = json.url;
+    this._type = json.type;
+    // Expose the WorkerDebugger's `id` so that we can match the target with the descriptor
+    this.id = json.id;
+  }
+}
+
+exports.WorkerTargetFront = WorkerTargetFront;
+registerFront(exports.WorkerTargetFront);
diff --git a/devtools/client/fronts/thread-configuration.js b/devtools/client/fronts/thread-configuration.js
new file mode 100644
index 0000000000..c6b7171c70
--- /dev/null
+++ b/devtools/client/fronts/thread-configuration.js
@@ -0,0 +1,25 @@
+/* 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 {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  threadConfigurationSpec,
+} = require("resource://devtools/shared/specs/thread-configuration.js");
+
+/**
+ * The ThreadConfigurationFront/Actor should be used to maintain thread settings
+ * sent from the client for the thread actor.
+ *
+ * See the ThreadConfigurationActor for a list of supported configuration options.
+ */
+class ThreadConfigurationFront extends FrontClassWithSpec(
+  threadConfigurationSpec
+) {}
+
+registerFront(ThreadConfigurationFront);
diff --git a/devtools/client/fronts/thread.js b/devtools/client/fronts/thread.js
new file mode 100644
index 0000000000..f5d05aa868
--- /dev/null
+++ b/devtools/client/fronts/thread.js
@@ -0,0 +1,285 @@
+/* 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 { ThreadStateTypes } = require("resource://devtools/client/constants.js");
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+
+const { threadSpec } = require("resource://devtools/shared/specs/thread.js");
+
+loader.lazyRequireGetter(
+  this,
+  "ObjectFront",
+  "resource://devtools/client/fronts/object.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "FrameFront",
+  "resource://devtools/client/fronts/frame.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "SourceFront",
+  "resource://devtools/client/fronts/source.js",
+  true
+);
+
+/**
+ * Creates a thread front for the remote debugging protocol server. This client
+ * is a front to the thread actor created in the server side, hiding the
+ * protocol details in a traditional JavaScript API.
+ *
+ * @param client DevToolsClient
+ * @param actor string
+ *        The actor ID for this thread.
+ */
+class ThreadFront extends FrontClassWithSpec(threadSpec) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+    this.client = client;
+    this._pauseGrips = {};
+    this._threadGrips = {};
+    // Note that this isn't matching ThreadActor state field.
+    // ThreadFront is only using two values: paused or attached.
+    this._state = "attached";
+
+    this._beforePaused = this._beforePaused.bind(this);
+    this._beforeResumed = this._beforeResumed.bind(this);
+    this.before("paused", this._beforePaused);
+    this.before("resumed", this._beforeResumed);
+    this.targetFront.on("will-navigate", this._onWillNavigate.bind(this));
+    // Attribute name from which to retrieve the actorID out of the target actor's form
+    this.formAttributeName = "threadActor";
+  }
+
+  get state() {
+    return this._state;
+  }
+
+  get paused() {
+    return this._state === "paused";
+  }
+
+  get actor() {
+    return this.actorID;
+  }
+
+  _assertPaused(command) {
+    if (!this.paused) {
+      throw Error(
+        command + " command sent while not paused. Currently " + this._state
+      );
+    }
+  }
+
+  getFrames(start, count) {
+    return super.frames(start, count);
+  }
+
+  /**
+   * Resume a paused thread. If the optional limit parameter is present, then
+   * the thread will also pause when that limit is reached.
+   *
+   * @param [optional] object limit
+   *        An object with a type property set to the appropriate limit (next,
+   *        step, or finish) per the remote debugging protocol specification.
+   *        Use null to specify no limit.
+   */
+  async _doResume(resumeLimit, frameActorID) {
+    this._assertPaused("resume");
+
+    // Put the client in a tentative "resuming" state so we can prevent
+    // further requests that should only be sent in the paused state.
+    this._previousState = this._state;
+    this._state = "resuming";
+    try {
+      await super.resume(resumeLimit, frameActorID);
+    } catch (e) {
+      if (this._state == "resuming") {
+        // There was an error resuming, update the state to the new one
+        // reported by the server, if given (only on wrongState), otherwise
+        // reset back to the previous state.
+        if (e.state) {
+          this._state = ThreadStateTypes[e.state];
+        } else {
+          this._state = this._previousState;
+        }
+      }
+    }
+
+    delete this._previousState;
+  }
+
+  /**
+   * Resume a paused thread.
+   */
+  resume() {
+    return this._doResume(null);
+  }
+
+  /**
+   * Resume then pause without stepping.
+   *
+   */
+  resumeThenPause() {
+    return this._doResume({ type: "break" });
+  }
+
+  /**
+   * Step over a function call.
+   */
+  stepOver(frameActorID) {
+    return this._doResume({ type: "next" }, frameActorID);
+  }
+
+  /**
+   * Step into a function call.
+   */
+  stepIn(frameActorID) {
+    return this._doResume({ type: "step" }, frameActorID);
+  }
+
+  /**
+   * Step out of a function call.
+   */
+  stepOut(frameActorID) {
+    return this._doResume({ type: "finish" }, frameActorID);
+  }
+
+  /**
+   * Restart selected frame.
+   */
+  restart(frameActorID) {
+    return this._doResume({ type: "restart" }, frameActorID);
+  }
+
+  /**
+   * Immediately interrupt a running thread.
+   */
+  interrupt() {
+    return this._doInterrupt(null);
+  }
+
+  /**
+   * Pause execution right before the next JavaScript bytecode is executed.
+   */
+  breakOnNext() {
+    return this._doInterrupt("onNext");
+  }
+
+  /**
+   * Interrupt a running thread.
+   */
+  _doInterrupt(when) {
+    return super.interrupt(when);
+  }
+
+  /**
+   * Request the loaded sources for the current thread.
+   */
+  async getSources() {
+    let sources = [];
+    try {
+      sources = await super.sources();
+    } catch (e) {
+      // we may have closed the connection
+      console.log(`getSources failed. Connection may have closed: ${e}`);
+    }
+    return { sources };
+  }
+
+  /**
+   * Return a ObjectFront object for the given object grip.
+   *
+   * @param grip object
+   *        A pause-lifetime object grip returned by the protocol.
+   */
+  pauseGrip(grip) {
+    if (grip.actor in this._pauseGrips) {
+      return this._pauseGrips[grip.actor];
+    }
+
+    const objectFront = new ObjectFront(
+      this.conn,
+      this.targetFront,
+      this,
+      grip
+    );
+    this._pauseGrips[grip.actor] = objectFront;
+    return objectFront;
+  }
+
+  /**
+   * Clear and invalidate all the grip fronts from the given cache.
+   *
+   * @param gripCacheName
+   *        The property name of the grip cache we want to clear.
+   */
+  _clearObjectFronts(gripCacheName) {
+    for (const id in this[gripCacheName]) {
+      this[gripCacheName][id].valid = false;
+    }
+    this[gripCacheName] = {};
+  }
+
+  /**
+   * Invalidate pause-lifetime grip clients and clear the list of current grip
+   * clients.
+   */
+  _clearPauseGrips() {
+    this._clearObjectFronts("_pauseGrips");
+  }
+
+  _beforePaused(packet) {
+    this._state = "paused";
+    this._onThreadState(packet);
+  }
+
+  _beforeResumed() {
+    this._state = "attached";
+    this._onThreadState(null);
+    this.unmanageChildren(FrameFront);
+  }
+
+  _onWillNavigate() {
+    this.unmanageChildren(SourceFront);
+  }
+
+  /**
+   * Handle thread state change by doing necessary cleanup
+   */
+  _onThreadState(packet) {
+    // The debugger UI may not be initialized yet so we want to keep
+    // the packet around so it knows what to pause state to display
+    // when it's initialized
+    this._lastPausePacket = packet;
+    this._clearPauseGrips();
+  }
+
+  getLastPausePacket() {
+    return this._lastPausePacket;
+  }
+
+  /**
+   * Return an instance of SourceFront for the given source actor form.
+   */
+  source(form) {
+    if (form.actor in this._threadGrips) {
+      return this._threadGrips[form.actor];
+    }
+
+    const sourceFront = new SourceFront(this.client, form);
+    this.manage(sourceFront);
+    this._threadGrips[form.actor] = sourceFront;
+    return sourceFront;
+  }
+}
+
+exports.ThreadFront = ThreadFront;
+registerFront(ThreadFront);
diff --git a/devtools/client/fronts/tracer.js b/devtools/client/fronts/tracer.js
new file mode 100644
index 0000000000..d5df948be3
--- /dev/null
+++ b/devtools/client/fronts/tracer.js
@@ -0,0 +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";
+
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const { tracerSpec } = require("resource://devtools/shared/specs/tracer.js");
+
+class TracerFront extends FrontClassWithSpec(tracerSpec) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+
+    // Attribute name from which to retrieve the actorID out of the target actor's form
+    this.formAttributeName = "tracerActor";
+  }
+}
+
+registerFront(TracerFront);
diff --git a/devtools/client/fronts/walker.js b/devtools/client/fronts/walker.js
new file mode 100644
index 0000000000..5feae2a343
--- /dev/null
+++ b/devtools/client/fronts/walker.js
@@ -0,0 +1,461 @@
+/* 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 {
+  FrontClassWithSpec,
+  types,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const { walkerSpec } = require("resource://devtools/shared/specs/walker.js");
+const {
+  safeAsyncMethod,
+} = require("resource://devtools/shared/async-utils.js");
+
+/**
+ * Client side of the DOM walker.
+ */
+class WalkerFront extends FrontClassWithSpec(walkerSpec) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+    this._isPicking = false;
+    this._orphaned = new Set();
+    this._retainedOrphans = new Set();
+
+    // Set to true if cleanup should be requested after every mutation list.
+    this.autoCleanup = true;
+
+    this._rootNodePromise = new Promise(
+      r => (this._rootNodePromiseResolve = r)
+    );
+
+    this._onRootNodeAvailable = this._onRootNodeAvailable.bind(this);
+    this._onRootNodeDestroyed = this._onRootNodeDestroyed.bind(this);
+
+    // pick/cancelPick requests can be triggered while the Walker is being destroyed.
+    this.pick = safeAsyncMethod(this.pick.bind(this), () => this.isDestroyed());
+    this.cancelPick = safeAsyncMethod(this.cancelPick.bind(this), () =>
+      this.isDestroyed()
+    );
+
+    this.before("new-mutations", this.onMutations.bind(this));
+
+    // Those events will be emitted if watchRootNode was called on the
+    // corresponding WalkerActor, which should be handled by the ResourceCommand
+    // as long as a consumer is watching for root-node resources.
+    // This should be fixed by using watchResources directly from the walker
+    // front, either with the ROOT_NODE resource, or with the DOCUMENT_EVENT
+    // resource. See Bug 1663973.
+    this.on("root-available", this._onRootNodeAvailable);
+    this.on("root-destroyed", this._onRootNodeDestroyed);
+  }
+
+  // Update the object given a form representation off the wire.
+  form(json) {
+    this.actorID = json.actor;
+
+    // The rootNode property should usually be provided via watchRootNode.
+    // However tests are currently using the walker front without explicitly
+    // calling watchRootNode, so we keep this assignment as a fallback.
+    this.rootNode = types.getType("domnode").read(json.root, this);
+
+    this.traits = json.traits;
+  }
+
+  /**
+   * Clients can use walker.rootNode to get the current root node of the
+   * walker, but during a reload the root node might be null.  This
+   * method returns a promise that will resolve to the root node when it is
+   * set.
+   */
+  async getRootNode() {
+    let rootNode = this.rootNode;
+    if (!rootNode) {
+      rootNode = await this._rootNodePromise;
+    }
+
+    return rootNode;
+  }
+
+  /**
+   * When reading an actor form off the wire, we want to hook it up to its
+   * parent or host front.  The protocol guarantees that the parent will
+   * be seen by the client in either a previous or the current request.
+   * So if we've already seen this parent return it, otherwise create
+   * a bare-bones stand-in node.  The stand-in node will be updated
+   * with a real form by the end of the deserialization.
+   */
+  ensureDOMNodeFront(id) {
+    const front = this.getActorByID(id);
+    if (front) {
+      return front;
+    }
+
+    return types.getType("domnode").read({ actor: id }, this, "standin");
+  }
+
+  /**
+   * See the documentation for WalkerActor.prototype.retainNode for
+   * information on retained nodes.
+   *
+   * From the client's perspective, `retainNode` can fail if the node in
+   * question is removed from the ownership tree before the `retainNode`
+   * request reaches the server.  This can only happen if the client has
+   * asked the server to release nodes but hasn't gotten a response
+   * yet: Either a `releaseNode` request or a `getMutations` with `cleanup`
+   * set is outstanding.
+   *
+   * If either of those requests is outstanding AND releases the retained
+   * node, this request will fail with noSuchActor, but the ownership tree
+   * will stay in a consistent state.
+   *
+   * Because the protocol guarantees that requests will be processed and
+   * responses received in the order they were sent, we get the right
+   * semantics by setting our local retained flag on the node only AFTER
+   * a SUCCESSFUL retainNode call.
+   */
+  async retainNode(node) {
+    await super.retainNode(node);
+    node.retained = true;
+  }
+
+  async unretainNode(node) {
+    await super.unretainNode(node);
+    node.retained = false;
+    if (this._retainedOrphans.has(node)) {
+      this._retainedOrphans.delete(node);
+      this._releaseFront(node);
+    }
+  }
+
+  releaseNode(node, options = {}) {
+    // NodeFront.destroy will destroy children in the ownership tree too,
+    // mimicking what the server will do here.
+    const actorID = node.actorID;
+    this._releaseFront(node, !!options.force);
+    return super.releaseNode({ actorID });
+  }
+
+  async findInspectingNode() {
+    const response = await super.findInspectingNode();
+    return response.node;
+  }
+
+  async querySelector(queryNode, selector) {
+    const response = await super.querySelector(queryNode, selector);
+    return response.node;
+  }
+
+  async getNodeActorFromWindowID(windowID) {
+    const response = await super.getNodeActorFromWindowID(windowID);
+    return response ? response.node : null;
+  }
+
+  async getNodeActorFromContentDomReference(contentDomReference) {
+    const response = await super.getNodeActorFromContentDomReference(
+      contentDomReference
+    );
+    return response ? response.node : null;
+  }
+
+  async getStyleSheetOwnerNode(styleSheetActorID) {
+    const response = await super.getStyleSheetOwnerNode(styleSheetActorID);
+    return response ? response.node : null;
+  }
+
+  async getNodeFromActor(actorID, path) {
+    const response = await super.getNodeFromActor(actorID, path);
+    return response ? response.node : null;
+  }
+
+  _releaseFront(node, force) {
+    if (node.retained && !force) {
+      node.reparent(null);
+      this._retainedOrphans.add(node);
+      return;
+    }
+
+    if (node.retained) {
+      // Forcing a removal.
+      this._retainedOrphans.delete(node);
+    }
+
+    // Release any children
+    for (const child of node.treeChildren()) {
+      this._releaseFront(child, force);
+    }
+
+    // All children will have been removed from the node by this point.
+    node.reparent(null);
+    node.destroy();
+  }
+
+  /**
+   * Get any unprocessed mutation records and process them.
+   */
+  // eslint-disable-next-line complexity
+  async getMutations(options = {}) {
+    const mutations = await super.getMutations(options);
+    const emitMutations = [];
+    for (const change of mutations) {
+      // The target is only an actorID, get the associated front.
+      const targetID = change.target;
+      const targetFront = this.getActorByID(targetID);
+
+      if (!targetFront) {
+        console.warn(
+          "Got a mutation for an unexpected actor: " +
+            targetID +
+            ", please file a bug on bugzilla.mozilla.org!"
+        );
+        console.trace();
+        continue;
+      }
+
+      const emittedMutation = Object.assign(change, { target: targetFront });
+
+      if (change.type === "childList") {
+        // Update the ownership tree according to the mutation record.
+        const addedFronts = [];
+        const removedFronts = [];
+        for (const removed of change.removed) {
+          const removedFront = this.getActorByID(removed);
+          if (!removedFront) {
+            console.error(
+              "Got a removal of an actor we didn't know about: " + removed
+            );
+            continue;
+          }
+          // Remove from the ownership tree
+          removedFront.reparent(null);
+
+          // This node is orphaned unless we get it in the 'added' list
+          // eventually.
+          this._orphaned.add(removedFront);
+          removedFronts.push(removedFront);
+        }
+        for (const added of change.added) {
+          const addedFront = this.getActorByID(added);
+          if (!addedFront) {
+            console.error(
+              "Got an addition of an actor we didn't know " + "about: " + added
+            );
+            continue;
+          }
+          addedFront.reparent(targetFront);
+
+          // The actor is reconnected to the ownership tree, unorphan
+          // it.
+          this._orphaned.delete(addedFront);
+          addedFronts.push(addedFront);
+        }
+
+        // Before passing to users, replace the added and removed actor
+        // ids with front in the mutation record.
+        emittedMutation.added = addedFronts;
+        emittedMutation.removed = removedFronts;
+
+        // If this is coming from a DOM mutation, the actor's numChildren
+        // was passed in. Otherwise, it is simulated from a frame load or
+        // unload, so don't change the front's form.
+        if ("numChildren" in change) {
+          targetFront._form.numChildren = change.numChildren;
+        }
+      } else if (change.type === "shadowRootAttached") {
+        targetFront._form.isShadowHost = true;
+      } else if (change.type === "customElementDefined") {
+        targetFront._form.customElementLocation = change.customElementLocation;
+      } else if (change.type === "unretained") {
+        // Retained orphans were force-released without the intervention of
+        // client (probably a navigated frame).
+        for (const released of change.nodes) {
+          const releasedFront = this.getActorByID(released);
+          this._retainedOrphans.delete(released);
+          this._releaseFront(releasedFront, true);
+        }
+      } else {
+        targetFront.updateMutation(change);
+      }
+
+      // Update the inlineTextChild property of the target for a selected list of
+      // mutation types.
+      if (
+        change.type === "inlineTextChild" ||
+        change.type === "childList" ||
+        change.type === "shadowRootAttached"
+      ) {
+        if (change.inlineTextChild) {
+          targetFront.inlineTextChild = types
+            .getType("domnode")
+            .read(change.inlineTextChild, this);
+        } else {
+          targetFront.inlineTextChild = undefined;
+        }
+      }
+
+      emitMutations.push(emittedMutation);
+    }
+
+    if (options.cleanup) {
+      for (const node of this._orphaned) {
+        // This will move retained nodes to this._retainedOrphans.
+        this._releaseFront(node);
+      }
+      this._orphaned = new Set();
+    }
+
+    this.emit("mutations", emitMutations);
+  }
+
+  /**
+   * Handle the `new-mutations` notification by fetching the
+   * available mutation records.
+   */
+  onMutations() {
+    // Fetch and process the mutations.
+    this.getMutations({ cleanup: this.autoCleanup }).catch(() => {});
+  }
+
+  isLocal() {
+    return !!this.conn._transport._serverConnection;
+  }
+
+  async removeNode(node) {
+    const previousSibling = await this.previousSibling(node);
+    const nextSibling = await super.removeNode(node);
+    return {
+      previousSibling,
+      nextSibling,
+    };
+  }
+
+  async children(node, options) {
+    if (!node.useChildTargetToFetchChildren) {
+      return super.children(node, options);
+    }
+    const target = await node.connectToFrame();
+
+    // We had several issues in the past where `connectToFrame` was returning the same
+    // target as the owner document one, which led to the inspector being broken.
+    // Ultimately, we shouldn't get to this point (fix should happen in connectToFrame or
+    // on the server, e.g. for Bug 1752342), but at least this will serve as a safe guard
+    // so we don't freeze/crash the inspector.
+    if (
+      target == this.targetFront &&
+      Services.prefs.getBoolPref(
+        "devtools.testing.bypass-walker-children-iframe-guard",
+        false
+      ) !== true
+    ) {
+      console.warn("connectToFrame returned an unexpected target");
+      return {
+        nodes: [],
+        hasFirst: true,
+        hasLast: true,
+      };
+    }
+
+    const walker = (await target.getFront("inspector")).walker;
+
+    // Finally retrieve the NodeFront of the remote frame's document
+    const documentNode = await walker.getRootNode();
+
+    // Force reparenting through the remote frame boundary.
+    documentNode.reparent(node);
+
+    // And return the same kind of response `walker.children` returns
+    return {
+      nodes: [documentNode],
+      hasFirst: true,
+      hasLast: true,
+    };
+  }
+
+  /**
+   * Ensure that the RootNode of this Walker has the right parent NodeFront.
+   *
+   * This method does nothing if we are on the top level target's WalkerFront,
+   * as the RootNode won't have any parent.
+   *
+   * Otherwise, if we are in an iframe's WalkerFront, we would expect the parent
+   * of the RootNode (i.e. the NodeFront for the document loaded within the iframe)
+   * to be the <iframe>'s NodeFront. Because of fission, the two NodeFront may refer
+   * to DOM Element running in distinct processes and so the NodeFront comes from
+   * two distinct Targets and two distinct WalkerFront.
+   * This is why we need this manual "reparent" code to do the glue between the
+   * two documents.
+   */
+  async reparentRemoteFrame() {
+    const parentTarget = await this.targetFront.getParentTarget();
+    if (!parentTarget) {
+      return;
+    }
+    // Don't reparent if we are on the top target
+    if (parentTarget == this.targetFront) {
+      return;
+    }
+    // Get the NodeFront for the embedder element
+    // i.e. the <iframe> element which is hosting the document that
+    const parentWalker = (await parentTarget.getFront("inspector")).walker;
+    // As this <iframe> most likely runs in another process, we have to get it through the parent
+    // target's WalkerFront.
+    const parentNode = (
+      await parentWalker.getEmbedderElement(this.targetFront.browsingContextID)
+    ).node;
+
+    // Finally, set this embedder element's node front as the
+    const documentNode = await this.getRootNode();
+    documentNode.reparent(parentNode);
+  }
+
+  _onRootNodeAvailable(rootNode) {
+    if (rootNode.isTopLevelDocument) {
+      this.rootNode = rootNode;
+      this._rootNodePromiseResolve(this.rootNode);
+    }
+  }
+
+  _onRootNodeDestroyed(rootNode) {
+    if (rootNode.isTopLevelDocument) {
+      this._rootNodePromise = new Promise(
+        r => (this._rootNodePromiseResolve = r)
+      );
+      this.rootNode = null;
+    }
+  }
+
+  /**
+   * Start the element picker on the debuggee target.
+   * @param {Boolean} doFocus - Optionally focus the content area once the picker is
+   *                            activated.
+   */
+  pick(doFocus) {
+    if (this._isPicking) {
+      return Promise.resolve();
+    }
+
+    this._isPicking = true;
+
+    return super.pick(
+      doFocus,
+      this.targetFront.commands.descriptorFront.isLocalTab
+    );
+  }
+
+  /**
+   * Stop the element picker.
+   */
+  cancelPick() {
+    if (!this._isPicking) {
+      return Promise.resolve();
+    }
+
+    this._isPicking = false;
+    return super.cancelPick();
+  }
+}
+
+exports.WalkerFront = WalkerFront;
+registerFront(WalkerFront);
diff --git a/devtools/client/fronts/watcher.js b/devtools/client/fronts/watcher.js
new file mode 100644
index 0000000000..1a7499561a
--- /dev/null
+++ b/devtools/client/fronts/watcher.js
@@ -0,0 +1,202 @@
+/* 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 { watcherSpec } = require("resource://devtools/shared/specs/watcher.js");
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+
+loader.lazyRequireGetter(
+  this,
+  "WindowGlobalTargetFront",
+  "resource://devtools/client/fronts/targets/window-global.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "ContentProcessTargetFront",
+  "resource://devtools/client/fronts/targets/content-process.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "WorkerTargetFront",
+  "resource://devtools/client/fronts/targets/worker.js",
+  true
+);
+
+class WatcherFront extends FrontClassWithSpec(watcherSpec) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+
+    this._onTargetAvailable = this._onTargetAvailable.bind(this);
+    this._onTargetDestroyed = this._onTargetDestroyed.bind(this);
+
+    // Convert form, which is just JSON object to Fronts for these two events
+    this.on("target-available-form", this._onTargetAvailable);
+    this.on("target-destroyed-form", this._onTargetDestroyed);
+  }
+
+  form(json) {
+    this.actorID = json.actor;
+    this.traits = json.traits;
+  }
+
+  _onTargetAvailable(form) {
+    let front;
+    if (form.actor.includes("/contentProcessTarget")) {
+      front = new ContentProcessTargetFront(this.conn, null, this);
+    } else if (form.actor.includes("/workerTarget")) {
+      front = new WorkerTargetFront(this.conn, null, this);
+    } else {
+      front = new WindowGlobalTargetFront(this.conn, null, this);
+    }
+    front.actorID = form.actor;
+    front.form(form);
+    this.manage(front);
+    this.emit("target-available", front);
+  }
+
+  _onTargetDestroyed(form, options = {}) {
+    const front = this._getTargetFront(form);
+
+    // When server side target switching is off,
+    // the watcher may notify us about the top level target destruction a bit late.
+    // The descriptor (`this.parentFront`) already switched to the new target.
+    // Missing `target-destroyed` isn't critical when target switching is off
+    // as `TargetCommand.switchToTarget` will end calling `TargetCommandonTargetDestroyed` for all
+    // existing targets.
+    // https://searchfox.org/mozilla-central/rev/af8e5d37fd56be90ccddae2203e7b875d3f3ae87/devtools/shared/commands/target/target-command.js#166-173
+    if (front) {
+      this.emit("target-destroyed", front, options);
+    }
+  }
+
+  _getTargetFront(form) {
+    let front = this.getActorByID(form.actor);
+    // For top level target, the target will be a child of the descriptor front,
+    // which happens to be the parent front of the watcher.
+    if (!front) {
+      front = this.parentFront.getActorByID(form.actor);
+    }
+    return front;
+  }
+
+  /**
+   * Retrieve the already existing WindowGlobalTargetFront for the parent
+   * BrowsingContext of the given BrowsingContext ID.
+   */
+  async getParentWindowGlobalTarget(browsingContextID) {
+    const id = await this.getParentBrowsingContextID(browsingContextID);
+    if (!id) {
+      return null;
+    }
+    return this.getWindowGlobalTarget(id);
+  }
+
+  /**
+   * Memoized getter for the "blackboxing" actor
+   */
+  async getBlackboxingActor() {
+    if (!this._blackboxingActor) {
+      this._blackboxingActor = await super.getBlackboxingActor();
+    }
+    return this._blackboxingActor;
+  }
+  /**
+   * Memoized getter for the "breakpoint-list" actor
+   */
+  async getBreakpointListActor() {
+    if (!this._breakpointListActor) {
+      this._breakpointListActor = await super.getBreakpointListActor();
+    }
+    return this._breakpointListActor;
+  }
+
+  /**
+   * Memoized getter for the "target-configuration" actor
+   */
+  async getTargetConfigurationActor() {
+    if (!this._targetConfigurationActor) {
+      this._targetConfigurationActor =
+        await super.getTargetConfigurationActor();
+    }
+    return this._targetConfigurationActor;
+  }
+
+  /**
+   * Memoized getter for the "thread-configuration" actor
+   */
+  async getThreadConfigurationActor() {
+    if (!this._threadConfigurationActor) {
+      this._threadConfigurationActor =
+        await super.getThreadConfigurationActor();
+    }
+    return this._threadConfigurationActor;
+  }
+
+  /**
+   * For a given BrowsingContext ID, return the already existing WindowGlobalTargetFront
+   */
+  async getWindowGlobalTarget(id) {
+    // First scan the watcher children as the watcher manages all the targets
+    for (const front of this.poolChildren()) {
+      if (front.browsingContextID == id) {
+        return front;
+      }
+    }
+    // But the top level target will be created by the Descriptor.getTarget() method
+    // and so be hosted in the Descriptor's pool.
+    // The parent front of the WatcherActor happens to be the Descriptor Actor.
+    // This code could go away or be simplified if the Descriptor starts fetch all
+    // the targets, including the top level one via the Watcher. i.e. drop Descriptor.getTarget().
+    const topLevelTarget = await this.parentFront.getTarget();
+    if (topLevelTarget?.browsingContextID == id) {
+      return topLevelTarget;
+    }
+
+    // If we could not find a window global target for the provided id, the
+    // window global might not be the topmost one of a given process (isProcessRoot == true).
+    // For now we only create targets for the top window global of each process,
+    // so we recursively check the parent browsing context ids
+    // until we find a valid target.
+    const parentBrowsingContextID = await this.getParentBrowsingContextID(id);
+    if (parentBrowsingContextID && parentBrowsingContextID !== id) {
+      return this.getWindowGlobalTarget(parentBrowsingContextID);
+    }
+
+    return null;
+  }
+
+  getWindowGlobalTargetByInnerWindowId(innerWindowId) {
+    for (const front of this.poolChildren()) {
+      if (front.innerWindowId == innerWindowId) {
+        return front;
+      }
+    }
+    // Use getCachedTarget in order to have a fully synchronous method
+    // as the callsite in ResourceCommand benefit from being synchronous.
+    // Here we care only about already existing resource and do not need to
+    // wait for the next target to come.
+    const topLevelTarget = this.parentFront.getCachedTarget();
+    if (topLevelTarget?.innerWindowId == innerWindowId) {
+      return topLevelTarget;
+    }
+    console.error("Unable to find target with innerWindowId:" + innerWindowId);
+    return null;
+  }
+
+  /**
+   * Memoized getter for the "networkParent" actor
+   */
+  async getNetworkParentActor() {
+    if (!this._networkParentActor) {
+      this._networkParentActor = await super.getNetworkParentActor();
+    }
+    return this._networkParentActor;
+  }
+}
+registerFront(WatcherFront);
diff --git a/devtools/client/fronts/webconsole.js b/devtools/client/fronts/webconsole.js
new file mode 100644
index 0000000000..def2cc6a07
--- /dev/null
+++ b/devtools/client/fronts/webconsole.js
@@ -0,0 +1,111 @@
+/* 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 {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const {
+  webconsoleSpec,
+} = require("resource://devtools/shared/specs/webconsole.js");
+const {
+  getAdHocFrontOrPrimitiveGrip,
+} = require("resource://devtools/client/fronts/object.js");
+
+/**
+ * A WebConsoleFront is used as a front end for the WebConsoleActor that is
+ * created on the server, hiding implementation details.
+ *
+ * @param object client
+ *        The DevToolsClient instance we live for.
+ */
+class WebConsoleFront extends FrontClassWithSpec(webconsoleSpec) {
+  constructor(client, targetFront, parentFront) {
+    super(client, targetFront, parentFront);
+    this._client = client;
+    this.events = [];
+
+    // Attribute name from which to retrieve the actorID out of the target actor's form
+    this.formAttributeName = "consoleActor";
+
+    this.before("consoleAPICall", this.beforeConsoleAPICall);
+    this.before("pageError", this.beforePageError);
+  }
+
+  get actor() {
+    return this.actorID;
+  }
+
+  beforeConsoleAPICall(packet) {
+    if (packet.message && Array.isArray(packet.message.arguments)) {
+      // We might need to create fronts for each of the message arguments.
+      packet.message.arguments = packet.message.arguments.map(arg =>
+        getAdHocFrontOrPrimitiveGrip(arg, this)
+      );
+    }
+    return packet;
+  }
+
+  beforePageError(packet) {
+    if (packet?.pageError?.errorMessage) {
+      packet.pageError.errorMessage = getAdHocFrontOrPrimitiveGrip(
+        packet.pageError.errorMessage,
+        this
+      );
+    }
+
+    if (packet?.pageError?.exception) {
+      packet.pageError.exception = getAdHocFrontOrPrimitiveGrip(
+        packet.pageError.exception,
+        this
+      );
+    }
+    return packet;
+  }
+
+  async getCachedMessages(messageTypes) {
+    const response = await super.getCachedMessages(messageTypes);
+    if (Array.isArray(response.messages)) {
+      response.messages = response.messages.map(packet => {
+        if (Array.isArray(packet?.message?.arguments)) {
+          // We might need to create fronts for each of the message arguments.
+          packet.message.arguments = packet.message.arguments.map(arg =>
+            getAdHocFrontOrPrimitiveGrip(arg, this)
+          );
+        }
+
+        if (packet.pageError?.exception) {
+          packet.pageError.exception = getAdHocFrontOrPrimitiveGrip(
+            packet.pageError.exception,
+            this
+          );
+        }
+
+        return packet;
+      });
+    }
+    return response;
+  }
+
+  /**
+   * Close the WebConsoleFront.
+   *
+   */
+  destroy() {
+    if (!this._client) {
+      return null;
+    }
+
+    // This will make future calls to this function harmless because of the early return
+    // at the top of the function.
+    this._client = null;
+
+    return super.destroy();
+  }
+}
+
+exports.WebConsoleFront = WebConsoleFront;
+registerFront(WebConsoleFront);
diff --git a/devtools/client/fronts/worker/moz.build b/devtools/client/fronts/worker/moz.build
new file mode 100644
index 0000000000..dae0e2d606
--- /dev/null
+++ b/devtools/client/fronts/worker/moz.build
@@ -0,0 +1,11 @@
+# -*- 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(
+    "push-subscription.js",
+    "service-worker-registration.js",
+    "service-worker.js",
+)
diff --git a/devtools/client/fronts/worker/push-subscription.js b/devtools/client/fronts/worker/push-subscription.js
new file mode 100644
index 0000000000..790b32350e
--- /dev/null
+++ b/devtools/client/fronts/worker/push-subscription.js
@@ -0,0 +1,30 @@
+/* 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 {
+  pushSubscriptionSpec,
+} = require("resource://devtools/shared/specs/worker/push-subscription.js");
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+
+class PushSubscriptionFront extends FrontClassWithSpec(pushSubscriptionSpec) {
+  get endpoint() {
+    return this._form.endpoint;
+  }
+
+  get quota() {
+    return this._form.quota;
+  }
+
+  form(form) {
+    this.actorID = form.actor;
+    this._form = form;
+  }
+}
+
+exports.PushSubscriptionFront = PushSubscriptionFront;
+registerFront(PushSubscriptionFront);
diff --git a/devtools/client/fronts/worker/service-worker-registration.js b/devtools/client/fronts/worker/service-worker-registration.js
new file mode 100644
index 0000000000..57e2bc400b
--- /dev/null
+++ b/devtools/client/fronts/worker/service-worker-registration.js
@@ -0,0 +1,79 @@
+/* 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 {
+  serviceWorkerRegistrationSpec,
+} = require("resource://devtools/shared/specs/worker/service-worker-registration.js");
+const {
+  FrontClassWithSpec,
+  registerFront,
+  types,
+} = require("resource://devtools/shared/protocol.js");
+
+class ServiceWorkerRegistrationFront extends FrontClassWithSpec(
+  serviceWorkerRegistrationSpec
+) {
+  get active() {
+    return this._form.active;
+  }
+
+  get fetch() {
+    return this._form.fetch;
+  }
+
+  get id() {
+    return this.url;
+  }
+
+  get lastUpdateTime() {
+    return this._form.lastUpdateTime;
+  }
+
+  get scope() {
+    return this._form.scope;
+  }
+
+  get type() {
+    return this._form.type;
+  }
+
+  get url() {
+    return this._form.url;
+  }
+
+  get evaluatingWorker() {
+    return this._getServiceWorker("evaluatingWorker");
+  }
+
+  get activeWorker() {
+    return this._getServiceWorker("activeWorker");
+  }
+
+  get installingWorker() {
+    return this._getServiceWorker("installingWorker");
+  }
+
+  get waitingWorker() {
+    return this._getServiceWorker("waitingWorker");
+  }
+
+  _getServiceWorker(type) {
+    const workerForm = this._form[type];
+    if (!workerForm) {
+      return null;
+    }
+    return types.getType("serviceWorker").read(workerForm, this);
+  }
+
+  form(form) {
+    this.actorID = form.actor;
+    this._form = form;
+    // @backward-compat { version 70 } ServiceWorkerRegistration actor now exposes traits
+    this.traits = form.traits || {};
+  }
+}
+
+exports.ServiceWorkerRegistrationFront = ServiceWorkerRegistrationFront;
+registerFront(ServiceWorkerRegistrationFront);
diff --git a/devtools/client/fronts/worker/service-worker.js b/devtools/client/fronts/worker/service-worker.js
new file mode 100644
index 0000000000..604eb388e5
--- /dev/null
+++ b/devtools/client/fronts/worker/service-worker.js
@@ -0,0 +1,62 @@
+/* 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 {
+  serviceWorkerSpec,
+} = require("resource://devtools/shared/specs/worker/service-worker.js");
+const {
+  FrontClassWithSpec,
+  registerFront,
+} = require("resource://devtools/shared/protocol.js");
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+
+const L10N = new LocalizationHelper(
+  "devtools/client/locales/debugger.properties"
+);
+
+class ServiceWorkerFront extends FrontClassWithSpec(serviceWorkerSpec) {
+  get fetch() {
+    return this._form.fetch;
+  }
+
+  get url() {
+    return this._form.url;
+  }
+
+  get state() {
+    return this._form.state;
+  }
+
+  get stateText() {
+    switch (this.state) {
+      case Ci.nsIServiceWorkerInfo.STATE_PARSED:
+        return L10N.getStr("serviceWorkerInfo.parsed");
+      case Ci.nsIServiceWorkerInfo.STATE_INSTALLING:
+        return L10N.getStr("serviceWorkerInfo.installing");
+      case Ci.nsIServiceWorkerInfo.STATE_INSTALLED:
+        return L10N.getStr("serviceWorkerInfo.installed");
+      case Ci.nsIServiceWorkerInfo.STATE_ACTIVATING:
+        return L10N.getStr("serviceWorkerInfo.activating");
+      case Ci.nsIServiceWorkerInfo.STATE_ACTIVATED:
+        return L10N.getStr("serviceWorkerInfo.activated");
+      case Ci.nsIServiceWorkerInfo.STATE_REDUNDANT:
+        return L10N.getStr("serviceWorkerInfo.redundant");
+      default:
+        return L10N.getStr("serviceWorkerInfo.unknown");
+    }
+  }
+
+  get id() {
+    return this._form.id;
+  }
+
+  form(form) {
+    this.actorID = form.actor;
+    this._form = form;
+  }
+}
+
+exports.ServiceWorkerFront = ServiceWorkerFront;
+registerFront(ServiceWorkerFront);