Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream

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

7 files changed, 2622 insertions, 0 deletions

diff --git a/devtools/server/actors/object/moz.build b/devtools/server/actors/object/moz.build
new file mode 100644
index 0000000000..28fc2307da
--- /dev/null
+++ b/devtools/server/actors/object/moz.build
@@ -0,0 +1,12 @@
+# 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(
+    "previewers.js",
+    "private-properties-iterator.js",
+    "property-iterator.js",
+    "symbol-iterator.js",
+    "symbol.js",
+    "utils.js",
+)
diff --git a/devtools/server/actors/object/previewers.js b/devtools/server/actors/object/previewers.js
new file mode 100644
index 0000000000..de6453c089
--- /dev/null
+++ b/devtools/server/actors/object/previewers.js
@@ -0,0 +1,1100 @@
+/* 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 DevToolsUtils = require("resource://devtools/shared/DevToolsUtils.js");
+loader.lazyRequireGetter(
+  this,
+  "ObjectUtils",
+  "resource://devtools/server/actors/object/utils.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "PropertyIterators",
+  "resource://devtools/server/actors/object/property-iterator.js"
+);
+
+// Number of items to preview in objects, arrays, maps, sets, lists,
+// collections, etc.
+const OBJECT_PREVIEW_MAX_ITEMS = 10;
+
+const ERROR_CLASSNAMES = new Set([
+  "Error",
+  "EvalError",
+  "RangeError",
+  "ReferenceError",
+  "SyntaxError",
+  "TypeError",
+  "URIError",
+  "InternalError",
+  "AggregateError",
+  "CompileError",
+  "DebuggeeWouldRun",
+  "LinkError",
+  "RuntimeError",
+  "Exception", // This related to Components.Exception()
+]);
+const ARRAY_LIKE_CLASSNAMES = new Set([
+  "DOMStringList",
+  "DOMTokenList",
+  "CSSRuleList",
+  "MediaList",
+  "StyleSheetList",
+  "NamedNodeMap",
+  "FileList",
+  "NodeList",
+]);
+const OBJECT_WITH_URL_CLASSNAMES = new Set([
+  "CSSImportRule",
+  "CSSStyleSheet",
+  "Location",
+]);
+
+/**
+ * Functions for adding information to ObjectActor grips for the purpose of
+ * having customized output. This object holds arrays mapped by
+ * Debugger.Object.prototype.class.
+ *
+ * In each array you can add functions that take three
+ * arguments:
+ *   - the ObjectActor instance and its hooks to make a preview for,
+ *   - the grip object being prepared for the client,
+ *   - the raw JS object after calling Debugger.Object.unsafeDereference(). This
+ *   argument is only provided if the object is safe for reading properties and
+ *   executing methods. See DevToolsUtils.isSafeJSObject().
+ *   - the object class (result of objectActor.obj.class). This is passed so we don't have
+ *   to access it on each previewer, which can add some overhead.
+ *
+ * Functions must return false if they cannot provide preview
+ * information for the debugger object, or true otherwise.
+ */
+const previewers = {
+  String: [
+    function(objectActor, grip, rawObj) {
+      return wrappedPrimitivePreviewer(
+        "String",
+        String,
+        objectActor,
+        grip,
+        rawObj
+      );
+    },
+  ],
+
+  Boolean: [
+    function(objectActor, grip, rawObj) {
+      return wrappedPrimitivePreviewer(
+        "Boolean",
+        Boolean,
+        objectActor,
+        grip,
+        rawObj
+      );
+    },
+  ],
+
+  Number: [
+    function(objectActor, grip, rawObj) {
+      return wrappedPrimitivePreviewer(
+        "Number",
+        Number,
+        objectActor,
+        grip,
+        rawObj
+      );
+    },
+  ],
+
+  Symbol: [
+    function(objectActor, grip, rawObj) {
+      return wrappedPrimitivePreviewer(
+        "Symbol",
+        Symbol,
+        objectActor,
+        grip,
+        rawObj
+      );
+    },
+  ],
+
+  Function: [
+    function({ obj, hooks }, grip) {
+      if (obj.name) {
+        grip.name = obj.name;
+      }
+
+      if (obj.displayName) {
+        grip.displayName = obj.displayName.substr(0, 500);
+      }
+
+      if (obj.parameterNames) {
+        grip.parameterNames = obj.parameterNames;
+      }
+
+      // Check if the developer has added a de-facto standard displayName
+      // property for us to use.
+      let userDisplayName;
+      try {
+        userDisplayName = obj.getOwnPropertyDescriptor("displayName");
+      } catch (e) {
+        // The above can throw "permission denied" errors when the debuggee
+        // does not subsume the function's compartment.
+      }
+
+      if (
+        userDisplayName &&
+        typeof userDisplayName.value == "string" &&
+        userDisplayName.value
+      ) {
+        grip.userDisplayName = hooks.createValueGrip(userDisplayName.value);
+      }
+
+      grip.isAsync = obj.isAsyncFunction;
+      grip.isGenerator = obj.isGeneratorFunction;
+
+      if (obj.script) {
+        grip.location = {
+          url: obj.script.url,
+          line: obj.script.startLine,
+          column: obj.script.startColumn,
+        };
+      }
+
+      return true;
+    },
+  ],
+
+  RegExp: [
+    function({ obj, hooks }, grip) {
+      const str = DevToolsUtils.callPropertyOnObject(obj, "toString");
+      if (typeof str != "string") {
+        return false;
+      }
+
+      grip.displayString = hooks.createValueGrip(str);
+      return true;
+    },
+  ],
+
+  Date: [
+    function({ obj, hooks }, grip) {
+      const time = DevToolsUtils.callPropertyOnObject(obj, "getTime");
+      if (typeof time != "number") {
+        return false;
+      }
+
+      grip.preview = {
+        timestamp: hooks.createValueGrip(time),
+      };
+      return true;
+    },
+  ],
+
+  Array: [
+    function({ obj, hooks }, grip) {
+      const length = ObjectUtils.getArrayLength(obj);
+
+      grip.preview = {
+        kind: "ArrayLike",
+        length: length,
+      };
+
+      if (hooks.getGripDepth() > 1) {
+        return true;
+      }
+
+      const raw = obj.unsafeDereference();
+      const items = (grip.preview.items = []);
+
+      for (let i = 0; i < length; ++i) {
+        if (raw && !isWorker) {
+          // Array Xrays filter out various possibly-unsafe properties (like
+          // functions, and claim that the value is undefined instead. This
+          // is generally the right thing for privileged code accessing untrusted
+          // objects, but quite confusing for Object previews. So we manually
+          // override this protection by waiving Xrays on the array, and re-applying
+          // Xrays on any indexed value props that we pull off of it.
+          const desc = Object.getOwnPropertyDescriptor(Cu.waiveXrays(raw), i);
+          if (desc && !desc.get && !desc.set) {
+            let value = Cu.unwaiveXrays(desc.value);
+            value = ObjectUtils.makeDebuggeeValueIfNeeded(obj, value);
+            items.push(hooks.createValueGrip(value));
+          } else if (!desc) {
+            items.push(null);
+          } else {
+            const item = {};
+            if (desc.get) {
+              let getter = Cu.unwaiveXrays(desc.get);
+              getter = ObjectUtils.makeDebuggeeValueIfNeeded(obj, getter);
+              item.get = hooks.createValueGrip(getter);
+            }
+            if (desc.set) {
+              let setter = Cu.unwaiveXrays(desc.set);
+              setter = ObjectUtils.makeDebuggeeValueIfNeeded(obj, setter);
+              item.set = hooks.createValueGrip(setter);
+            }
+            items.push(item);
+          }
+        } else if (raw && !Object.getOwnPropertyDescriptor(raw, i)) {
+          items.push(null);
+        } else {
+          // Workers do not have access to Cu.
+          const value = DevToolsUtils.getProperty(obj, i);
+          items.push(hooks.createValueGrip(value));
+        }
+
+        if (items.length == OBJECT_PREVIEW_MAX_ITEMS) {
+          break;
+        }
+      }
+
+      return true;
+    },
+  ],
+
+  Set: [
+    function(objectActor, grip) {
+      const size = DevToolsUtils.getProperty(objectActor.obj, "size");
+      if (typeof size != "number") {
+        return false;
+      }
+
+      grip.preview = {
+        kind: "ArrayLike",
+        length: size,
+      };
+
+      // Avoid recursive object grips.
+      if (objectActor.hooks.getGripDepth() > 1) {
+        return true;
+      }
+
+      const items = (grip.preview.items = []);
+      for (const item of PropertyIterators.enumSetEntries(objectActor)) {
+        items.push(item);
+        if (items.length == OBJECT_PREVIEW_MAX_ITEMS) {
+          break;
+        }
+      }
+
+      return true;
+    },
+  ],
+
+  WeakSet: [
+    function(objectActor, grip) {
+      const enumEntries = PropertyIterators.enumWeakSetEntries(objectActor);
+
+      grip.preview = {
+        kind: "ArrayLike",
+        length: enumEntries.size,
+      };
+
+      // Avoid recursive object grips.
+      if (objectActor.hooks.getGripDepth() > 1) {
+        return true;
+      }
+
+      const items = (grip.preview.items = []);
+      for (const item of enumEntries) {
+        items.push(item);
+        if (items.length == OBJECT_PREVIEW_MAX_ITEMS) {
+          break;
+        }
+      }
+
+      return true;
+    },
+  ],
+
+  Map: [
+    function(objectActor, grip) {
+      const size = DevToolsUtils.getProperty(objectActor.obj, "size");
+      if (typeof size != "number") {
+        return false;
+      }
+
+      grip.preview = {
+        kind: "MapLike",
+        size: size,
+      };
+
+      if (objectActor.hooks.getGripDepth() > 1) {
+        return true;
+      }
+
+      const entries = (grip.preview.entries = []);
+      for (const entry of PropertyIterators.enumMapEntries(objectActor)) {
+        entries.push(entry);
+        if (entries.length == OBJECT_PREVIEW_MAX_ITEMS) {
+          break;
+        }
+      }
+
+      return true;
+    },
+  ],
+
+  WeakMap: [
+    function(objectActor, grip) {
+      const enumEntries = PropertyIterators.enumWeakMapEntries(objectActor);
+
+      grip.preview = {
+        kind: "MapLike",
+        size: enumEntries.size,
+      };
+
+      if (objectActor.hooks.getGripDepth() > 1) {
+        return true;
+      }
+
+      const entries = (grip.preview.entries = []);
+      for (const entry of enumEntries) {
+        entries.push(entry);
+        if (entries.length == OBJECT_PREVIEW_MAX_ITEMS) {
+          break;
+        }
+      }
+
+      return true;
+    },
+  ],
+
+  URLSearchParams: [
+    function(objectActor, grip) {
+      const enumEntries = PropertyIterators.enumURLSearchParamsEntries(objectActor);
+
+      grip.preview = {
+        kind: "MapLike",
+        size: enumEntries.size,
+      };
+
+      if (objectActor.hooks.getGripDepth() > 1) {
+        return true;
+      }
+
+      const entries = (grip.preview.entries = []);
+      for (const entry of enumEntries) {
+        entries.push(entry);
+        if (entries.length == OBJECT_PREVIEW_MAX_ITEMS) {
+          break;
+        }
+      }
+
+      return true;
+    },
+  ],
+
+  FormData: [
+    function(objectActor, grip) {
+      const enumEntries = PropertyIterators.enumFormDataEntries(objectActor);
+
+      grip.preview = {
+        kind: "MapLike",
+        size: enumEntries.size,
+      };
+
+      if (objectActor.hooks.getGripDepth() > 1) {
+        return true;
+      }
+
+      const entries = (grip.preview.entries = []);
+      for (const entry of enumEntries) {
+        entries.push(entry);
+        if (entries.length == OBJECT_PREVIEW_MAX_ITEMS) {
+          break;
+        }
+      }
+
+      return true;
+    },
+  ],
+
+  Headers: [
+    function(objectActor, grip) {
+      const enumEntries = PropertyIterators.enumHeadersEntries(objectActor);
+
+      grip.preview = {
+        kind: "MapLike",
+        size: enumEntries.size,
+      };
+
+      if (objectActor.hooks.getGripDepth() > 1) {
+        return true;
+      }
+
+      const entries = (grip.preview.entries = []);
+      for (const entry of enumEntries) {
+        entries.push(entry);
+        if (entries.length == OBJECT_PREVIEW_MAX_ITEMS) {
+          break;
+        }
+      }
+
+      return true;
+    },
+  ],
+
+  MIDIInputMap: [
+    function(objectActor, grip) {
+      const enumEntries = PropertyIterators.enumMidiInputMapEntries(
+        objectActor
+      );
+
+      grip.preview = {
+        kind: "MapLike",
+        size: enumEntries.size,
+      };
+
+      if (objectActor.hooks.getGripDepth() > 1) {
+        return true;
+      }
+
+      const entries = (grip.preview.entries = []);
+      for (const entry of enumEntries) {
+        entries.push(entry);
+        if (entries.length == OBJECT_PREVIEW_MAX_ITEMS) {
+          break;
+        }
+      }
+
+      return true;
+    },
+  ],
+
+  MIDIOutputMap: [
+    function(objectActor, grip) {
+      const enumEntries = PropertyIterators.enumMidiOutputMapEntries(
+        objectActor
+      );
+
+      grip.preview = {
+        kind: "MapLike",
+        size: enumEntries.size,
+      };
+
+      if (objectActor.hooks.getGripDepth() > 1) {
+        return true;
+      }
+
+      const entries = (grip.preview.entries = []);
+      for (const entry of enumEntries) {
+        entries.push(entry);
+        if (entries.length == OBJECT_PREVIEW_MAX_ITEMS) {
+          break;
+        }
+      }
+
+      return true;
+    },
+  ],
+
+  DOMStringMap: [
+    function({ obj, hooks }, grip, rawObj) {
+      if (!rawObj) {
+        return false;
+      }
+
+      const keys = obj.getOwnPropertyNames();
+      grip.preview = {
+        kind: "MapLike",
+        size: keys.length,
+      };
+
+      if (hooks.getGripDepth() > 1) {
+        return true;
+      }
+
+      const entries = (grip.preview.entries = []);
+      for (const key of keys) {
+        const value = ObjectUtils.makeDebuggeeValueIfNeeded(obj, rawObj[key]);
+        entries.push([key, hooks.createValueGrip(value)]);
+        if (entries.length == OBJECT_PREVIEW_MAX_ITEMS) {
+          break;
+        }
+      }
+
+      return true;
+    },
+  ],
+
+  Promise: [
+    function({ obj, hooks }, grip, rawObj) {
+      const { state, value, reason } = ObjectUtils.getPromiseState(obj);
+      const ownProperties = Object.create(null);
+      ownProperties["<state>"] = { value: state };
+      let ownPropertiesLength = 1;
+
+      // Only expose <value> or <reason> in top-level promises, to avoid recursion.
+      // <state> is not problematic because it's a string.
+      if (hooks.getGripDepth() === 1) {
+        if (state == "fulfilled") {
+          ownProperties["<value>"] = { value: hooks.createValueGrip(value) };
+          ++ownPropertiesLength;
+        } else if (state == "rejected") {
+          ownProperties["<reason>"] = { value: hooks.createValueGrip(reason) };
+          ++ownPropertiesLength;
+        }
+      }
+
+      grip.preview = {
+        kind: "Object",
+        ownProperties,
+        ownPropertiesLength,
+      };
+
+      return true;
+    },
+  ],
+
+  Proxy: [
+    function({ obj, hooks }, grip, rawObj) {
+      // Only preview top-level proxies, avoiding recursion. Otherwise, since both the
+      // target and handler can also be proxies, we could get an exponential behavior.
+      if (hooks.getGripDepth() > 1) {
+        return true;
+      }
+
+      // The `isProxy` getter of the debuggee object only detects proxies without
+      // security wrappers. If false, the target and handler are not available.
+      const hasTargetAndHandler = obj.isProxy;
+
+      grip.preview = {
+        kind: "Object",
+        ownProperties: Object.create(null),
+        ownPropertiesLength: 2 * hasTargetAndHandler,
+      };
+
+      if (hasTargetAndHandler) {
+        Object.assign(grip.preview.ownProperties, {
+          "<target>": { value: hooks.createValueGrip(obj.proxyTarget) },
+          "<handler>": { value: hooks.createValueGrip(obj.proxyHandler) },
+        });
+      }
+
+      return true;
+    },
+  ],
+};
+
+/**
+ * Generic previewer for classes wrapping primitives, like String,
+ * Number and Boolean.
+ *
+ * @param string className
+ *        Class name to expect.
+ * @param object classObj
+ *        The class to expect, eg. String. The valueOf() method of the class is
+ *        invoked on the given object.
+ * @param ObjectActor objectActor
+ *        The object actor
+ * @param Object grip
+ *        The result grip to fill in
+ * @return Booolean true if the object was handled, false otherwise
+ */
+function wrappedPrimitivePreviewer(
+  className,
+  classObj,
+  objectActor,
+  grip,
+  rawObj
+) {
+  let v = null;
+  try {
+    v = classObj.prototype.valueOf.call(rawObj);
+  } catch (ex) {
+    // valueOf() can throw if the raw JS object is "misbehaved".
+    return false;
+  }
+
+  if (v === null) {
+    return false;
+  }
+
+  const { obj, hooks } = objectActor;
+
+  const canHandle = GenericObject(objectActor, grip, rawObj, className);
+  if (!canHandle) {
+    return false;
+  }
+
+  grip.preview.wrappedValue = hooks.createValueGrip(
+    ObjectUtils.makeDebuggeeValueIfNeeded(obj, v)
+  );
+  return true;
+}
+
+/**
+ * @param {ObjectActor} objectActor
+ * @param {Object} grip: The grip built by the objectActor, for which we need to populate
+ *                       the `preview` property.
+ * @param {*} rawObj: The native js object
+ * @param {String} className: objectActor.obj.class
+ * @returns
+ */
+function GenericObject(objectActor, grip, rawObj, className) {
+  const { obj, hooks } = objectActor;
+  if (grip.preview || grip.displayString || hooks.getGripDepth() > 1) {
+    return false;
+  }
+
+  const preview = (grip.preview = {
+    kind: "Object",
+    ownProperties: Object.create(null),
+  });
+
+  const names = ObjectUtils.getPropNamesFromObject(obj, rawObj);
+  preview.ownPropertiesLength = names.length;
+
+  let length,
+    i = 0;
+  let specialStringBehavior = className === "String";
+  if (specialStringBehavior) {
+    length = DevToolsUtils.getProperty(obj, "length");
+    if (typeof length != "number") {
+      specialStringBehavior = false;
+    }
+  }
+
+  for (const name of names) {
+    if (specialStringBehavior && /^[0-9]+$/.test(name)) {
+      const num = parseInt(name, 10);
+      if (num.toString() === name && num >= 0 && num < length) {
+        continue;
+      }
+    }
+
+    const desc = objectActor._propertyDescriptor(name, true);
+    if (!desc) {
+      continue;
+    }
+
+    preview.ownProperties[name] = desc;
+    if (++i == OBJECT_PREVIEW_MAX_ITEMS) {
+      break;
+    }
+  }
+
+  if (i === OBJECT_PREVIEW_MAX_ITEMS) {
+    return true;
+  }
+
+  const privatePropertiesSymbols = ObjectUtils.getSafePrivatePropertiesSymbols(
+    obj
+  );
+  if (privatePropertiesSymbols.length > 0) {
+    preview.privatePropertiesLength = privatePropertiesSymbols.length;
+    preview.privateProperties = [];
+
+    // Retrieve private properties, which are represented as non-enumerable Symbols
+    for (const privateProperty of privatePropertiesSymbols) {
+      if (
+        !privateProperty.description ||
+        !privateProperty.description.startsWith("#")
+      ) {
+        continue;
+      }
+      const descriptor = objectActor._propertyDescriptor(privateProperty);
+      if (!descriptor) {
+        continue;
+      }
+
+      preview.privateProperties.push(
+        Object.assign(
+          {
+            descriptor,
+          },
+          hooks.createValueGrip(privateProperty)
+        )
+      );
+
+      if (++i == OBJECT_PREVIEW_MAX_ITEMS) {
+        break;
+      }
+    }
+  }
+
+  if (i === OBJECT_PREVIEW_MAX_ITEMS) {
+    return true;
+  }
+
+  const symbols = ObjectUtils.getSafeOwnPropertySymbols(obj);
+  if (symbols.length > 0) {
+    preview.ownSymbolsLength = symbols.length;
+    preview.ownSymbols = [];
+
+    for (const symbol of symbols) {
+      const descriptor = objectActor._propertyDescriptor(symbol, true);
+      if (!descriptor) {
+        continue;
+      }
+
+      preview.ownSymbols.push(
+        Object.assign(
+          {
+            descriptor,
+          },
+          hooks.createValueGrip(symbol)
+        )
+      );
+
+      if (++i == OBJECT_PREVIEW_MAX_ITEMS) {
+        break;
+      }
+    }
+  }
+
+  if (i === OBJECT_PREVIEW_MAX_ITEMS) {
+    return true;
+  }
+
+  const safeGetterValues = objectActor._findSafeGetterValues(
+    Object.keys(preview.ownProperties),
+    OBJECT_PREVIEW_MAX_ITEMS - i
+  );
+  if (Object.keys(safeGetterValues).length) {
+    preview.safeGetterValues = safeGetterValues;
+  }
+
+  return true;
+}
+
+// Preview functions that do not rely on the object class.
+previewers.Object = [
+  function TypedArray({ obj, hooks }, grip) {
+    if (!ObjectUtils.isTypedArray(obj)) {
+      return false;
+    }
+
+    grip.preview = {
+      kind: "ArrayLike",
+      length: ObjectUtils.getArrayLength(obj),
+    };
+
+    if (hooks.getGripDepth() > 1) {
+      return true;
+    }
+
+    const previewLength = Math.min(
+      OBJECT_PREVIEW_MAX_ITEMS,
+      grip.preview.length
+    );
+    grip.preview.items = [];
+    for (let i = 0; i < previewLength; i++) {
+      const desc = obj.getOwnPropertyDescriptor(i);
+      if (!desc) {
+        break;
+      }
+      grip.preview.items.push(desc.value);
+    }
+
+    return true;
+  },
+
+  function Error(objectActor, grip, rawObj, className) {
+    if (!ERROR_CLASSNAMES.has(className)) {
+      return false;
+    }
+
+    const { hooks, obj } = objectActor;
+
+    // The name and/or message could be getters, and even if it's unsafe, we do want
+    // to show it to the user (See Bug 1710694).
+    const name = DevToolsUtils.getProperty(obj, "name", true);
+    const msg = DevToolsUtils.getProperty(obj, "message", true);
+    const stack = DevToolsUtils.getProperty(obj, "stack");
+    const fileName = DevToolsUtils.getProperty(obj, "fileName");
+    const lineNumber = DevToolsUtils.getProperty(obj, "lineNumber");
+    const columnNumber = DevToolsUtils.getProperty(obj, "columnNumber");
+
+    grip.preview = {
+      kind: "Error",
+      name: hooks.createValueGrip(name),
+      message: hooks.createValueGrip(msg),
+      stack: hooks.createValueGrip(stack),
+      fileName: hooks.createValueGrip(fileName),
+      lineNumber: hooks.createValueGrip(lineNumber),
+      columnNumber: hooks.createValueGrip(columnNumber),
+    };
+
+    const errorHasCause = obj.getOwnPropertyNames().includes("cause");
+    if (errorHasCause) {
+      grip.preview.cause = hooks.createValueGrip(
+        DevToolsUtils.getProperty(obj, "cause", true)
+      );
+    }
+
+    return true;
+  },
+
+  function CSSMediaRule(objectActor, grip, rawObj, className) {
+    if (!rawObj || className != "CSSMediaRule" || isWorker) {
+      return false;
+    }
+    const { hooks } = objectActor;
+    grip.preview = {
+      kind: "ObjectWithText",
+      text: hooks.createValueGrip(rawObj.conditionText),
+    };
+    return true;
+  },
+
+  function CSSStyleRule(objectActor, grip, rawObj, className) {
+    if (!rawObj || className != "CSSStyleRule" || isWorker) {
+      return false;
+    }
+    const { hooks } = objectActor;
+    grip.preview = {
+      kind: "ObjectWithText",
+      text: hooks.createValueGrip(rawObj.selectorText),
+    };
+    return true;
+  },
+
+  function ObjectWithURL(objectActor, grip, rawObj, className) {
+    if (isWorker || !rawObj) {
+      return false;
+    }
+
+    const isWindow = Window.isInstance(rawObj);
+    if (!OBJECT_WITH_URL_CLASSNAMES.has(className) && !isWindow) {
+      return false;
+    }
+
+    const { hooks } = objectActor;
+
+    let url;
+    if (isWindow && rawObj.location) {
+      url = rawObj.location.href;
+    } else if (rawObj.href) {
+      url = rawObj.href;
+    } else {
+      return false;
+    }
+
+    grip.preview = {
+      kind: "ObjectWithURL",
+      url: hooks.createValueGrip(url),
+    };
+
+    return true;
+  },
+
+  function ArrayLike(objectActor, grip, rawObj, className) {
+    if (
+      !rawObj ||
+      !ARRAY_LIKE_CLASSNAMES.has(className) ||
+      typeof rawObj.length != "number" ||
+      isWorker
+    ) {
+      return false;
+    }
+
+    const { obj, hooks } = objectActor;
+    grip.preview = {
+      kind: "ArrayLike",
+      length: rawObj.length,
+    };
+
+    if (hooks.getGripDepth() > 1) {
+      return true;
+    }
+
+    const items = (grip.preview.items = []);
+
+    for (
+      let i = 0;
+      i < rawObj.length && items.length < OBJECT_PREVIEW_MAX_ITEMS;
+      i++
+    ) {
+      const value = ObjectUtils.makeDebuggeeValueIfNeeded(obj, rawObj[i]);
+      items.push(hooks.createValueGrip(value));
+    }
+
+    return true;
+  },
+
+  function CSSStyleDeclaration(objectActor, grip, rawObj, className) {
+    if (
+      !rawObj ||
+      (className != "CSSStyleDeclaration" && className != "CSS2Properties") ||
+      isWorker
+    ) {
+      return false;
+    }
+
+    const { hooks } = objectActor;
+    grip.preview = {
+      kind: "MapLike",
+      size: rawObj.length,
+    };
+
+    const entries = (grip.preview.entries = []);
+
+    for (let i = 0; i < OBJECT_PREVIEW_MAX_ITEMS && i < rawObj.length; i++) {
+      const prop = rawObj[i];
+      const value = rawObj.getPropertyValue(prop);
+      entries.push([prop, hooks.createValueGrip(value)]);
+    }
+
+    return true;
+  },
+
+  function DOMNode(objectActor, grip, rawObj, className) {
+    if (
+      className == "Object" ||
+      !rawObj ||
+      !Node.isInstance(rawObj) ||
+      isWorker
+    ) {
+      return false;
+    }
+
+    const { obj, hooks } = objectActor;
+
+    const preview = (grip.preview = {
+      kind: "DOMNode",
+      nodeType: rawObj.nodeType,
+      nodeName: rawObj.nodeName,
+      isConnected: rawObj.isConnected === true,
+    });
+
+    if (rawObj.nodeType == rawObj.DOCUMENT_NODE && rawObj.location) {
+      preview.location = hooks.createValueGrip(rawObj.location.href);
+    } else if (obj.class == "DocumentFragment") {
+      preview.childNodesLength = rawObj.childNodes.length;
+
+      if (hooks.getGripDepth() < 2) {
+        preview.childNodes = [];
+        for (const node of rawObj.childNodes) {
+          const actor = hooks.createValueGrip(obj.makeDebuggeeValue(node));
+          preview.childNodes.push(actor);
+          if (preview.childNodes.length == OBJECT_PREVIEW_MAX_ITEMS) {
+            break;
+          }
+        }
+      }
+    } else if (Element.isInstance(rawObj)) {
+      // For HTML elements (in an HTML document, at least), the nodeName is an
+      // uppercased version of the actual element name.  Check for HTML
+      // elements, that is elements in the HTML namespace, and lowercase the
+      // nodeName in that case.
+      if (rawObj.namespaceURI == "http://www.w3.org/1999/xhtml") {
+        preview.nodeName = preview.nodeName.toLowerCase();
+      }
+
+      // Add preview for DOM element attributes.
+      preview.attributes = {};
+      preview.attributesLength = rawObj.attributes.length;
+      for (const attr of rawObj.attributes) {
+        preview.attributes[attr.nodeName] = hooks.createValueGrip(attr.value);
+      }
+    } else if (obj.class == "Attr") {
+      preview.value = hooks.createValueGrip(rawObj.value);
+    } else if (
+      obj.class == "Text" ||
+      obj.class == "CDATASection" ||
+      obj.class == "Comment"
+    ) {
+      preview.textContent = hooks.createValueGrip(rawObj.textContent);
+    }
+
+    return true;
+  },
+
+  function DOMEvent(objectActor, grip, rawObj) {
+    if (!rawObj || !Event.isInstance(rawObj) || isWorker) {
+      return false;
+    }
+
+    const { obj, hooks } = objectActor;
+    const preview = (grip.preview = {
+      kind: "DOMEvent",
+      type: rawObj.type,
+      properties: Object.create(null),
+    });
+
+    if (hooks.getGripDepth() < 2) {
+      const target = obj.makeDebuggeeValue(rawObj.target);
+      preview.target = hooks.createValueGrip(target);
+    }
+
+    if (obj.class == "KeyboardEvent") {
+      preview.eventKind = "key";
+      preview.modifiers = ObjectUtils.getModifiersForEvent(rawObj);
+    }
+
+    const props = ObjectUtils.getPropsForEvent(obj.class);
+
+    // Add event-specific properties.
+    for (const prop of props) {
+      let value = rawObj[prop];
+      if (ObjectUtils.isObjectOrFunction(value)) {
+        // Skip properties pointing to objects.
+        if (hooks.getGripDepth() > 1) {
+          continue;
+        }
+        value = obj.makeDebuggeeValue(value);
+      }
+      preview.properties[prop] = hooks.createValueGrip(value);
+    }
+
+    // Add any properties we find on the event object.
+    if (!props.length) {
+      let i = 0;
+      for (const prop in rawObj) {
+        let value = rawObj[prop];
+        if (
+          prop == "target" ||
+          prop == "type" ||
+          value === null ||
+          typeof value == "function"
+        ) {
+          continue;
+        }
+        if (value && typeof value == "object") {
+          if (hooks.getGripDepth() > 1) {
+            continue;
+          }
+          value = obj.makeDebuggeeValue(value);
+        }
+        preview.properties[prop] = hooks.createValueGrip(value);
+        if (++i == OBJECT_PREVIEW_MAX_ITEMS) {
+          break;
+        }
+      }
+    }
+
+    return true;
+  },
+
+  function DOMException(objectActor, grip, rawObj, className) {
+    if (!rawObj || className !== "DOMException" || isWorker) {
+      return false;
+    }
+
+    const { hooks } = objectActor;
+    grip.preview = {
+      kind: "DOMException",
+      name: hooks.createValueGrip(rawObj.name),
+      message: hooks.createValueGrip(rawObj.message),
+      code: hooks.createValueGrip(rawObj.code),
+      result: hooks.createValueGrip(rawObj.result),
+      filename: hooks.createValueGrip(rawObj.filename),
+      lineNumber: hooks.createValueGrip(rawObj.lineNumber),
+      columnNumber: hooks.createValueGrip(rawObj.columnNumber),
+      stack: hooks.createValueGrip(rawObj.stack),
+    };
+
+    return true;
+  },
+
+  function Object(objectActor, grip, rawObj, className) {
+    return GenericObject(objectActor, grip, rawObj, className);
+  },
+];
+
+module.exports = previewers;
diff --git a/devtools/server/actors/object/private-properties-iterator.js b/devtools/server/actors/object/private-properties-iterator.js
new file mode 100644
index 0000000000..12dc7c98e8
--- /dev/null
+++ b/devtools/server/actors/object/private-properties-iterator.js
@@ -0,0 +1,70 @@
+/* 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 { Actor } = require("resource://devtools/shared/protocol.js");
+const {
+  privatePropertiesIteratorSpec,
+} = require("resource://devtools/shared/specs/private-properties-iterator.js");
+
+const DevToolsUtils = require("resource://devtools/shared/DevToolsUtils.js");
+
+/**
+ * Creates an actor to iterate over an object's private properties.
+ *
+ * @param objectActor ObjectActor
+ *        The object actor.
+ */
+class PrivatePropertiesIteratorActor extends Actor {
+    constructor(objectActor, conn) {
+      super(conn, privatePropertiesIteratorSpec);
+
+      let privateProperties = [];
+      if (DevToolsUtils.isSafeDebuggerObject(objectActor.obj)) {
+        try {
+          privateProperties = objectActor.obj.getOwnPrivateProperties();
+        } catch (err) {
+          // The above can throw when the debuggee does not subsume the object's
+          // compartment, or for some WrappedNatives like Cu.Sandbox.
+        }
+      }
+
+      this.iterator = {
+        size: privateProperties.length,
+        propertyDescription(index) {
+          // private properties are represented as Symbols on platform
+          const symbol = privateProperties[index];
+          return {
+            name: symbol.description,
+            descriptor: objectActor._propertyDescriptor(symbol),
+          };
+        },
+      };
+    }
+
+    form() {
+      return {
+        type: this.typeName,
+        actor: this.actorID,
+        count: this.iterator.size,
+      };
+    }
+
+    slice({ start, count }) {
+      const privateProperties = [];
+      for (let i = start, m = start + count; i < m; i++) {
+        privateProperties.push(this.iterator.propertyDescription(i));
+      }
+      return {
+        privateProperties,
+      };
+    }
+
+    all() {
+      return this.slice({ start: 0, count: this.iterator.size });
+    }
+  }
+
+exports.PrivatePropertiesIteratorActor = PrivatePropertiesIteratorActor;
diff --git a/devtools/server/actors/object/property-iterator.js b/devtools/server/actors/object/property-iterator.js
new file mode 100644
index 0000000000..3a646e61a8
--- /dev/null
+++ b/devtools/server/actors/object/property-iterator.js
@@ -0,0 +1,649 @@
+/* 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 { Actor } = require("resource://devtools/shared/protocol.js");
+const {
+  propertyIteratorSpec,
+} = require("resource://devtools/shared/specs/property-iterator.js");
+
+const DevToolsUtils = require("resource://devtools/shared/DevToolsUtils.js");
+loader.lazyRequireGetter(
+  this,
+  "ObjectUtils",
+  "resource://devtools/server/actors/object/utils.js"
+);
+
+/**
+ * Creates an actor to iterate over an object's property names and values.
+ *
+ * @param objectActor ObjectActor
+ *        The object actor.
+ * @param options Object
+ *        A dictionary object with various boolean attributes:
+ *        - enumEntries Boolean
+ *          If true, enumerates the entries of a Map or Set object
+ *          instead of enumerating properties.
+ *        - 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.
+ *        - query String
+ *          If non-empty, will filter the properties by names and values
+ *          containing this query string. The match is not case-sensitive.
+ *          Regarding value filtering it just compare to the stringification
+ *          of the property value.
+ */
+class PropertyIteratorActor extends Actor {
+    constructor(objectActor, options, conn) {
+      super(conn, propertyIteratorSpec);
+      if (!DevToolsUtils.isSafeDebuggerObject(objectActor.obj)) {
+        this.iterator = {
+          size: 0,
+          propertyName: index => undefined,
+          propertyDescription: index => undefined,
+        };
+      } else if (options.enumEntries) {
+        const cls = objectActor.obj.class;
+        if (cls == "Map") {
+          this.iterator = enumMapEntries(objectActor);
+        } else if (cls == "WeakMap") {
+          this.iterator = enumWeakMapEntries(objectActor);
+        } else if (cls == "Set") {
+          this.iterator = enumSetEntries(objectActor);
+        } else if (cls == "WeakSet") {
+          this.iterator = enumWeakSetEntries(objectActor);
+        } else if (cls == "Storage") {
+          this.iterator = enumStorageEntries(objectActor);
+        } else if (cls == "URLSearchParams") {
+          this.iterator = enumURLSearchParamsEntries(objectActor);
+        } else if (cls == "Headers") {
+          this.iterator = enumHeadersEntries(objectActor);
+        } else if (cls == "FormData") {
+          this.iterator = enumFormDataEntries(objectActor);
+        } else if (cls == "MIDIInputMap") {
+          this.iterator = enumMidiInputMapEntries(objectActor);
+        } else if (cls == "MIDIOutputMap") {
+          this.iterator = enumMidiOutputMapEntries(objectActor);
+        } else {
+          throw new Error(
+            "Unsupported class to enumerate entries from: " + cls
+          );
+        }
+      } else if (
+        ObjectUtils.isArray(objectActor.obj) &&
+        options.ignoreNonIndexedProperties &&
+        !options.query
+      ) {
+        this.iterator = enumArrayProperties(objectActor, options);
+      } else {
+        this.iterator = enumObjectProperties(objectActor, options);
+      }
+    }
+
+    form() {
+      return {
+        type: this.typeName,
+        actor: this.actorID,
+        count: this.iterator.size,
+      };
+    }
+
+    names({ indexes }) {
+      const list = [];
+      for (const idx of indexes) {
+        list.push(this.iterator.propertyName(idx));
+      }
+      return indexes;
+    }
+
+    slice({ start, count }) {
+      const ownProperties = Object.create(null);
+      for (let i = start, m = start + count; i < m; i++) {
+        const name = this.iterator.propertyName(i);
+        ownProperties[name] = this.iterator.propertyDescription(i);
+      }
+
+      return {
+        ownProperties,
+      };
+    }
+
+    all() {
+      return this.slice({ start: 0, count: this.iterator.size });
+    }
+  }
+
+function waiveXrays(obj) {
+  return isWorker ? obj : Cu.waiveXrays(obj);
+}
+
+function unwaiveXrays(obj) {
+  return isWorker ? obj : Cu.unwaiveXrays(obj);
+}
+
+/**
+ * Helper function to create a grip from a Map/Set entry
+ */
+function gripFromEntry({ obj, hooks }, entry) {
+  entry = unwaiveXrays(entry);
+  return hooks.createValueGrip(
+    ObjectUtils.makeDebuggeeValueIfNeeded(obj, entry)
+  );
+}
+
+function enumArrayProperties(objectActor, options) {
+  return {
+    size: ObjectUtils.getArrayLength(objectActor.obj),
+    propertyName(index) {
+      return index;
+    },
+    propertyDescription(index) {
+      return objectActor._propertyDescriptor(index);
+    },
+  };
+}
+
+function enumObjectProperties(objectActor, options) {
+  let names = [];
+  try {
+    names = objectActor.obj.getOwnPropertyNames();
+  } catch (ex) {
+    // Calling getOwnPropertyNames() on some wrapped native prototypes is not
+    // allowed: "cannot modify properties of a WrappedNative". See bug 952093.
+  }
+
+  if (options.ignoreNonIndexedProperties || options.ignoreIndexedProperties) {
+    const length = DevToolsUtils.getProperty(objectActor.obj, "length");
+    let sliceIndex;
+
+    const isLengthTrustworthy =
+      isUint32(length) &&
+      (!length || ObjectUtils.isArrayIndex(names[length - 1])) &&
+      !ObjectUtils.isArrayIndex(names[length]);
+
+    if (!isLengthTrustworthy) {
+      // The length property may not reflect what the object looks like, let's find
+      // where indexed properties end.
+
+      if (!ObjectUtils.isArrayIndex(names[0])) {
+        // If the first item is not a number, this means there is no indexed properties
+        // in this object.
+        sliceIndex = 0;
+      } else {
+        sliceIndex = names.length;
+        while (sliceIndex > 0) {
+          if (ObjectUtils.isArrayIndex(names[sliceIndex - 1])) {
+            break;
+          }
+          sliceIndex--;
+        }
+      }
+    } else {
+      sliceIndex = length;
+    }
+
+    // It appears that getOwnPropertyNames always returns indexed properties
+    // first, so we can safely slice `names` for/against indexed properties.
+    // We do such clever operation to optimize very large array inspection.
+    if (options.ignoreIndexedProperties) {
+      // Keep items after `sliceIndex` index
+      names = names.slice(sliceIndex);
+    } else if (options.ignoreNonIndexedProperties) {
+      // Keep `sliceIndex` first items
+      names.length = sliceIndex;
+    }
+  }
+
+  const safeGetterValues = objectActor._findSafeGetterValues(names);
+  const safeGetterNames = Object.keys(safeGetterValues);
+  // Merge the safe getter values into the existing properties list.
+  for (const name of safeGetterNames) {
+    if (!names.includes(name)) {
+      names.push(name);
+    }
+  }
+
+  if (options.query) {
+    let { query } = options;
+    query = query.toLowerCase();
+    names = names.filter(name => {
+      // Filter on attribute names
+      if (name.toLowerCase().includes(query)) {
+        return true;
+      }
+      // and then on attribute values
+      let desc;
+      try {
+        desc = objectActor.obj.getOwnPropertyDescriptor(name);
+      } catch (e) {
+        // Calling getOwnPropertyDescriptor on wrapped native prototypes is not
+        // allowed (bug 560072).
+      }
+      if (desc?.value && String(desc.value).includes(query)) {
+        return true;
+      }
+      return false;
+    });
+  }
+
+  if (options.sort) {
+    names.sort();
+  }
+
+  return {
+    size: names.length,
+    propertyName(index) {
+      return names[index];
+    },
+    propertyDescription(index) {
+      const name = names[index];
+      let desc = objectActor._propertyDescriptor(name);
+      if (!desc) {
+        desc = safeGetterValues[name];
+      } else if (name in safeGetterValues) {
+        // Merge the safe getter values into the existing properties list.
+        const { getterValue, getterPrototypeLevel } = safeGetterValues[name];
+        desc.getterValue = getterValue;
+        desc.getterPrototypeLevel = getterPrototypeLevel;
+      }
+      return desc;
+    },
+  };
+}
+
+function getMapEntries(obj) {
+  // Iterating over a Map via .entries goes through various intermediate
+  // objects - an Iterator object, then a 2-element Array object, then the
+  // actual values we care about. We don't have Xrays to Iterator objects,
+  // so we get Opaque wrappers for them. And even though we have Xrays to
+  // Arrays, the semantics often deny access to the entires based on the
+  // nature of the values. So we need waive Xrays for the iterator object
+  // and the tupes, and then re-apply them on the underlying values until
+  // we fix bug 1023984.
+  //
+  // Even then though, we might want to continue waiving Xrays here for the
+  // same reason we do so for Arrays above - this filtering behavior is likely
+  // to be more confusing than beneficial in the case of Object previews.
+  const raw = obj.unsafeDereference();
+  const iterator = obj.makeDebuggeeValue(
+    waiveXrays(Map.prototype.keys.call(raw))
+  );
+  return [...DevToolsUtils.makeDebuggeeIterator(iterator)].map(k => {
+    const key = waiveXrays(ObjectUtils.unwrapDebuggeeValue(k));
+    const value = Map.prototype.get.call(raw, key);
+    return [key, value];
+  });
+}
+
+function enumMapEntries(objectActor) {
+  const entries = getMapEntries(objectActor.obj);
+
+  return {
+    [Symbol.iterator]: function*() {
+      for (const [key, value] of entries) {
+        yield [key, value].map(val => gripFromEntry(objectActor, val));
+      }
+    },
+    size: entries.length,
+    propertyName(index) {
+      return index;
+    },
+    propertyDescription(index) {
+      const [key, val] = entries[index];
+      return {
+        enumerable: true,
+        value: {
+          type: "mapEntry",
+          preview: {
+            key: gripFromEntry(objectActor, key),
+            value: gripFromEntry(objectActor, val),
+          },
+        },
+      };
+    },
+  };
+}
+
+function enumStorageEntries(objectActor) {
+  // Iterating over local / sessionStorage entries goes through various
+  // intermediate objects - an Iterator object, then a 2-element Array object,
+  // then the actual values we care about. We don't have Xrays to Iterator
+  // objects, so we get Opaque wrappers for them.
+  const raw = objectActor.obj.unsafeDereference();
+  const keys = [];
+  for (let i = 0; i < raw.length; i++) {
+    keys.push(raw.key(i));
+  }
+  return {
+    [Symbol.iterator]: function*() {
+      for (const key of keys) {
+        const value = raw.getItem(key);
+        yield [key, value].map(val => gripFromEntry(objectActor, val));
+      }
+    },
+    size: keys.length,
+    propertyName(index) {
+      return index;
+    },
+    propertyDescription(index) {
+      const key = keys[index];
+      const val = raw.getItem(key);
+      return {
+        enumerable: true,
+        value: {
+          type: "storageEntry",
+          preview: {
+            key: gripFromEntry(objectActor, key),
+            value: gripFromEntry(objectActor, val),
+          },
+        },
+      };
+    },
+  };
+}
+
+function enumURLSearchParamsEntries(objectActor) {
+  let obj = objectActor.obj;
+  let raw = obj.unsafeDereference();
+  const entries = [...waiveXrays(URLSearchParams.prototype.entries.call(raw))];
+
+  return {
+    [Symbol.iterator]: function*() {
+      for (const [key, value] of entries) {
+        yield [key, value];
+      }
+    },
+    size: entries.length,
+    propertyName(index) {
+      // UrlSearchParams entries can have the same key multiple times (e.g. `?a=1&a=2`),
+      // so let's return the index as a name to be able to display them properly in the client.
+      return index;
+    },
+    propertyDescription(index) {
+      const [key, value] = entries[index];
+
+      return {
+        enumerable: true,
+        value: {
+          type: "urlSearchParamsEntry",
+          preview: {
+            key: gripFromEntry(objectActor, key),
+            value: gripFromEntry(objectActor, value),
+          },
+        },
+      };
+    },
+  };
+}
+
+function enumFormDataEntries(objectActor) {
+  let obj = objectActor.obj;
+  let raw = obj.unsafeDereference();
+  const entries = [...waiveXrays(FormData.prototype.entries.call(raw))];
+
+  return {
+    [Symbol.iterator]: function*() {
+      for (const [key, value] of entries) {
+        yield [key, value];
+      }
+    },
+    size: entries.length,
+    propertyName(index) {
+      return index;
+    },
+    propertyDescription(index) {
+      const [key, value] = entries[index];
+
+      return {
+        enumerable: true,
+        value: {
+          type: "formDataEntry",
+          preview: {
+            key: gripFromEntry(objectActor, key),
+            value: gripFromEntry(objectActor, value),
+          },
+        },
+      };
+    },
+  };
+}
+
+function enumHeadersEntries(objectActor) {
+  let raw = objectActor.obj.unsafeDereference();
+  const entries = [...waiveXrays(Headers.prototype.entries.call(raw))];
+
+  return {
+    [Symbol.iterator]: function*() {
+      for (const [key, value] of entries) {
+        yield [key, value];
+      }
+    },
+    size: entries.length,
+    propertyName(index) {
+      return entries[index][0];
+    },
+    propertyDescription(index) {
+      return {
+        enumerable: true,
+        value: gripFromEntry(objectActor, entries[index][1]),
+      };
+    },
+  };
+}
+
+function enumMidiInputMapEntries(objectActor) {
+  let raw = objectActor.obj.unsafeDereference();
+  // We need to waive `raw` as we can't get the iterator from the Xray for MapLike (See Bug 1173651).
+  // We also need to waive Xrays on the result of the call to `entries` as we don't have
+  // Xrays to Iterator objects (see Bug 1023984)
+  const entries = Array.from(
+    waiveXrays(MIDIInputMap.prototype.entries.call(waiveXrays(raw)))
+  );
+
+  return {
+    [Symbol.iterator]: function*() {
+      for (const [key, value] of entries) {
+        yield [key, gripFromEntry(objectActor, value)];
+      }
+    },
+    size: entries.length,
+    propertyName(index) {
+      return entries[index][0];
+    },
+    propertyDescription(index) {
+      return {
+        enumerable: true,
+        value: gripFromEntry(objectActor, entries[index][1]),
+      };
+    },
+  };
+}
+
+function enumMidiOutputMapEntries(objectActor) {
+  let raw = objectActor.obj.unsafeDereference();
+  // We need to waive `raw` as we can't get the iterator from the Xray for MapLike (See Bug 1173651).
+  // We also need to waive Xrays on the result of the call to `entries` as we don't have
+  // Xrays to Iterator objects (see Bug 1023984)
+  const entries = Array.from(
+    waiveXrays(MIDIOutputMap.prototype.entries.call(waiveXrays(raw)))
+  );
+
+  return {
+    [Symbol.iterator]: function*() {
+      for (const [key, value] of entries) {
+        yield [key, gripFromEntry(objectActor, value)];
+      }
+    },
+    size: entries.length,
+    propertyName(index) {
+      return entries[index][0];
+    },
+    propertyDescription(index) {
+      return {
+        enumerable: true,
+        value: gripFromEntry(objectActor, entries[index][1]),
+      };
+    },
+  };
+}
+
+function getWeakMapEntries(obj) {
+  // We currently lack XrayWrappers for WeakMap, so when we iterate over
+  // the values, the temporary iterator objects get created in the target
+  // compartment. However, we _do_ have Xrays to Object now, so we end up
+  // Xraying those temporary objects, and filtering access to |it.value|
+  // based on whether or not it's Xrayable and/or callable, which breaks
+  // the for/of iteration.
+  //
+  // This code is designed to handle untrusted objects, so we can safely
+  // waive Xrays on the iterable, and relying on the Debugger machinery to
+  // make sure we handle the resulting objects carefully.
+  const raw = obj.unsafeDereference();
+  const keys = waiveXrays(ChromeUtils.nondeterministicGetWeakMapKeys(raw));
+
+  return keys.map(k => [k, WeakMap.prototype.get.call(raw, k)]);
+}
+
+function enumWeakMapEntries(objectActor) {
+  const entries = getWeakMapEntries(objectActor.obj);
+
+  return {
+    [Symbol.iterator]: function*() {
+      for (let i = 0; i < entries.length; i++) {
+        yield entries[i].map(val => gripFromEntry(objectActor, val));
+      }
+    },
+    size: entries.length,
+    propertyName(index) {
+      return index;
+    },
+    propertyDescription(index) {
+      const [key, val] = entries[index];
+      return {
+        enumerable: true,
+        value: {
+          type: "mapEntry",
+          preview: {
+            key: gripFromEntry(objectActor, key),
+            value: gripFromEntry(objectActor, val),
+          },
+        },
+      };
+    },
+  };
+}
+
+function getSetValues(obj) {
+  // We currently lack XrayWrappers for Set, so when we iterate over
+  // the values, the temporary iterator objects get created in the target
+  // compartment. However, we _do_ have Xrays to Object now, so we end up
+  // Xraying those temporary objects, and filtering access to |it.value|
+  // based on whether or not it's Xrayable and/or callable, which breaks
+  // the for/of iteration.
+  //
+  // This code is designed to handle untrusted objects, so we can safely
+  // waive Xrays on the iterable, and relying on the Debugger machinery to
+  // make sure we handle the resulting objects carefully.
+  const raw = obj.unsafeDereference();
+  const iterator = obj.makeDebuggeeValue(
+    waiveXrays(Set.prototype.values.call(raw))
+  );
+  return [...DevToolsUtils.makeDebuggeeIterator(iterator)];
+}
+
+function enumSetEntries(objectActor) {
+  const values = getSetValues(objectActor.obj).map(v =>
+    waiveXrays(ObjectUtils.unwrapDebuggeeValue(v))
+  );
+
+  return {
+    [Symbol.iterator]: function*() {
+      for (const item of values) {
+        yield gripFromEntry(objectActor, item);
+      }
+    },
+    size: values.length,
+    propertyName(index) {
+      return index;
+    },
+    propertyDescription(index) {
+      const val = values[index];
+      return {
+        enumerable: true,
+        value: gripFromEntry(objectActor, val),
+      };
+    },
+  };
+}
+
+function getWeakSetEntries(obj) {
+  // We currently lack XrayWrappers for WeakSet, so when we iterate over
+  // the values, the temporary iterator objects get created in the target
+  // compartment. However, we _do_ have Xrays to Object now, so we end up
+  // Xraying those temporary objects, and filtering access to |it.value|
+  // based on whether or not it's Xrayable and/or callable, which breaks
+  // the for/of iteration.
+  //
+  // This code is designed to handle untrusted objects, so we can safely
+  // waive Xrays on the iterable, and relying on the Debugger machinery to
+  // make sure we handle the resulting objects carefully.
+  const raw = obj.unsafeDereference();
+  return waiveXrays(ChromeUtils.nondeterministicGetWeakSetKeys(raw));
+}
+
+function enumWeakSetEntries(objectActor) {
+  const keys = getWeakSetEntries(objectActor.obj);
+
+  return {
+    [Symbol.iterator]: function*() {
+      for (const item of keys) {
+        yield gripFromEntry(objectActor, item);
+      }
+    },
+    size: keys.length,
+    propertyName(index) {
+      return index;
+    },
+    propertyDescription(index) {
+      const val = keys[index];
+      return {
+        enumerable: true,
+        value: gripFromEntry(objectActor, val),
+      };
+    },
+  };
+}
+
+/**
+ * Returns true if the parameter can be stored as a 32-bit unsigned integer.
+ * If so, it will be suitable for use as the length of an array object.
+ *
+ * @param num Number
+ *        The number to test.
+ * @return Boolean
+ */
+function isUint32(num) {
+  return num >>> 0 === num;
+}
+
+module.exports = {
+  PropertyIteratorActor,
+  enumMapEntries,
+  enumMidiInputMapEntries,
+  enumMidiOutputMapEntries,
+  enumSetEntries,
+  enumURLSearchParamsEntries,
+  enumFormDataEntries,
+  enumHeadersEntries,
+  enumWeakMapEntries,
+  enumWeakSetEntries,
+};
diff --git a/devtools/server/actors/object/symbol-iterator.js b/devtools/server/actors/object/symbol-iterator.js
new file mode 100644
index 0000000000..e0b05f9cd1
--- /dev/null
+++ b/devtools/server/actors/object/symbol-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 { Actor } = require("resource://devtools/shared/protocol.js");
+const { symbolIteratorSpec } = require("resource://devtools/shared/specs/symbol-iterator.js");
+
+const DevToolsUtils = require("resource://devtools/shared/DevToolsUtils.js");
+
+/**
+ * Creates an actor to iterate over an object's symbols.
+ *
+ * @param objectActor ObjectActor
+ *        The object actor.
+ */
+class SymbolIteratorActor extends Actor {
+  constructor(objectActor, conn) {
+    super(conn, symbolIteratorSpec);
+
+    let symbols = [];
+    if (DevToolsUtils.isSafeDebuggerObject(objectActor.obj)) {
+      try {
+        symbols = objectActor.obj.getOwnPropertySymbols();
+      } catch (err) {
+        // The above can throw when the debuggee does not subsume the object's
+        // compartment, or for some WrappedNatives like Cu.Sandbox.
+      }
+    }
+
+    this.iterator = {
+      size: symbols.length,
+      symbolDescription(index) {
+        const symbol = symbols[index];
+        return {
+          name: symbol.toString(),
+          descriptor: objectActor._propertyDescriptor(symbol),
+        };
+      },
+    };
+  }
+
+  form() {
+    return {
+      type: this.typeName,
+      actor: this.actorID,
+      count: this.iterator.size,
+    };
+  }
+
+  slice({ start, count }) {
+    const ownSymbols = [];
+    for (let i = start, m = start + count; i < m; i++) {
+      ownSymbols.push(this.iterator.symbolDescription(i));
+    }
+    return {
+      ownSymbols,
+    };
+  }
+
+  all() {
+    return this.slice({ start: 0, count: this.iterator.size });
+  }
+}
+
+exports.SymbolIteratorActor = SymbolIteratorActor;
diff --git a/devtools/server/actors/object/symbol.js b/devtools/server/actors/object/symbol.js
new file mode 100644
index 0000000000..bd8bb97005
--- /dev/null
+++ b/devtools/server/actors/object/symbol.js
@@ -0,0 +1,109 @@
+/* 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 { Actor } = require("resource://devtools/shared/protocol.js");
+const { symbolSpec } = require("resource://devtools/shared/specs/symbol.js");
+loader.lazyRequireGetter(
+  this,
+  "createValueGrip",
+  "resource://devtools/server/actors/object/utils.js",
+  true
+);
+
+/**
+ * Creates an actor for the specified symbol.
+ *
+ * @param {DevToolsServerConnection} conn: The connection to the client.
+ * @param {Symbol} symbol: The symbol we want to create an actor for.
+ */
+class SymbolActor extends Actor {
+  constructor(conn, symbol) {
+    super(conn, symbolSpec);
+    this.symbol = symbol;
+  }
+
+  rawValue() {
+    return this.symbol;
+  }
+
+  destroy() {
+    // Because symbolActors is not a weak map, we won't automatically leave
+    // it so we need to manually leave on destroy so that we don't leak
+    // memory.
+    this._releaseActor();
+    super.destroy();
+  }
+
+  /**
+   * Returns a grip for this actor for returning in a protocol message.
+   */
+  form() {
+    const form = {
+      type: this.typeName,
+      actor: this.actorID,
+    };
+    const name = getSymbolName(this.symbol);
+    if (name !== undefined) {
+      // Create a grip for the name because it might be a longString.
+      form.name = createValueGrip(name, this.getParent());
+    }
+    return form;
+  }
+
+  /**
+   * Handle a request to release this SymbolActor instance.
+   */
+  release() {
+    // TODO: also check if this.getParent() === threadActor.threadLifetimePool
+    // when the web console moves away from manually releasing pause-scoped
+    // actors.
+    this._releaseActor();
+    this.destroy();
+    return {};
+  }
+
+  _releaseActor() {
+    const parent = this.getParent();
+    if (parent && parent.symbolActors) {
+      delete parent.symbolActors[this.symbol];
+    }
+  }
+}
+
+const symbolProtoToString = Symbol.prototype.toString;
+
+function getSymbolName(symbol) {
+  const name = symbolProtoToString.call(symbol).slice("Symbol(".length, -1);
+  return name || undefined;
+}
+
+/**
+ * Create a grip for the given symbol.
+ *
+ * @param sym Symbol
+ *        The symbol we are creating a grip for.
+ * @param pool Pool
+ *        The actor pool where the new actor will be added.
+ */
+function symbolGrip(sym, pool) {
+  if (!pool.symbolActors) {
+    pool.symbolActors = Object.create(null);
+  }
+
+  if (sym in pool.symbolActors) {
+    return pool.symbolActors[sym].form();
+  }
+
+  const actor = new SymbolActor(pool.conn, sym);
+  pool.manage(actor);
+  pool.symbolActors[sym] = actor;
+  return actor.form();
+}
+
+module.exports = {
+  SymbolActor,
+  symbolGrip,
+};
diff --git a/devtools/server/actors/object/utils.js b/devtools/server/actors/object/utils.js
new file mode 100644
index 0000000000..d397b4badf
--- /dev/null
+++ b/devtools/server/actors/object/utils.js
@@ -0,0 +1,615 @@
+/* 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 DevToolsUtils = require("resource://devtools/shared/DevToolsUtils.js");
+const { assert } = DevToolsUtils;
+
+loader.lazyRequireGetter(
+  this,
+  "LongStringActor",
+  "resource://devtools/server/actors/string.js",
+  true
+);
+
+loader.lazyRequireGetter(
+  this,
+  "symbolGrip",
+  "resource://devtools/server/actors/object/symbol.js",
+  true
+);
+
+loader.lazyRequireGetter(
+  this,
+  "ObjectActor",
+  "resource://devtools/server/actors/object.js",
+  true
+);
+
+loader.lazyRequireGetter(
+  this,
+  "EnvironmentActor",
+  "resource://devtools/server/actors/environment.js",
+  true
+);
+
+/**
+ * Get thisDebugger.Object referent's `promiseState`.
+ *
+ * @returns Object
+ *          An object of one of the following forms:
+ *          - { state: "pending" }
+ *          - { state: "fulfilled", value }
+ *          - { state: "rejected", reason }
+ */
+function getPromiseState(obj) {
+  if (obj.class != "Promise") {
+    throw new Error(
+      "Can't call `getPromiseState` on `Debugger.Object`s that don't " +
+        "refer to Promise objects."
+    );
+  }
+
+  const state = { state: obj.promiseState };
+  if (state.state === "fulfilled") {
+    state.value = obj.promiseValue;
+  } else if (state.state === "rejected") {
+    state.reason = obj.promiseReason;
+  }
+  return state;
+}
+
+/**
+ * Returns true if value is an object or function.
+ *
+ * @param value
+ * @returns {boolean}
+ */
+
+function isObjectOrFunction(value) {
+  // Handle null, whose typeof is object
+  if (!value) {
+    return false;
+  }
+
+  const type = typeof value;
+  return type == "object" || type == "function";
+}
+
+/**
+ * Make a debuggee value for the given object, if needed. Primitive values
+ * are left the same.
+ *
+ * Use case: you have a raw JS object (after unsafe dereference) and you want to
+ * send it to the client. In that case you need to use an ObjectActor which
+ * requires a debuggee value. The Debugger.Object.prototype.makeDebuggeeValue()
+ * method works only for JS objects and functions.
+ *
+ * @param Debugger.Object obj
+ * @param any value
+ * @return object
+ */
+function makeDebuggeeValueIfNeeded(obj, value) {
+  if (isObjectOrFunction(value)) {
+    return obj.makeDebuggeeValue(value);
+  }
+  return value;
+}
+
+/**
+ * Convert a debuggee value into the underlying raw object, if needed.
+ */
+function unwrapDebuggeeValue(value) {
+  if (value && typeof value == "object") {
+    return value.unsafeDereference();
+  }
+  return value;
+}
+
+/**
+ * Create a grip for the given debuggee value. If the value is an object or a long string,
+ * it will create an actor and add it to the pool
+ * @param {any} value: The debuggee value.
+ * @param {Pool} pool: The pool where the created actor will be added.
+ * @param {Function} makeObjectGrip: Function that will be called to create the grip for
+ *                                   non-primitive values.
+ */
+function createValueGrip(value, pool, makeObjectGrip) {
+  switch (typeof value) {
+    case "boolean":
+      return value;
+
+    case "string":
+      return createStringGrip(pool, value);
+
+    case "number":
+      if (value === Infinity) {
+        return { type: "Infinity" };
+      } else if (value === -Infinity) {
+        return { type: "-Infinity" };
+      } else if (Number.isNaN(value)) {
+        return { type: "NaN" };
+      } else if (!value && 1 / value === -Infinity) {
+        return { type: "-0" };
+      }
+      return value;
+
+    case "bigint":
+      return {
+        type: "BigInt",
+        text: value.toString(),
+      };
+
+    // TODO(bug 1772157)
+    // Record/tuple grips aren't fully implemented yet.
+    case "record":
+      return {
+        class: "Record",
+      };
+    case "tuple":
+      return {
+        class: "Tuple",
+      };
+    case "undefined":
+      return { type: "undefined" };
+
+    case "object":
+      if (value === null) {
+        return { type: "null" };
+      } else if (
+        value.optimizedOut ||
+        value.uninitialized ||
+        value.missingArguments
+      ) {
+        // The slot is optimized out, an uninitialized binding, or
+        // arguments on a dead scope
+        return {
+          type: "null",
+          optimizedOut: value.optimizedOut,
+          uninitialized: value.uninitialized,
+          missingArguments: value.missingArguments,
+        };
+      }
+      return makeObjectGrip(value, pool);
+
+    case "symbol":
+      return symbolGrip(value, pool);
+
+    default:
+      assert(false, "Failed to provide a grip for: " + value);
+      return null;
+  }
+}
+
+/**
+ * of passing the value directly over the protocol.
+ *
+ * @param str String
+ *        The string we are checking the length of.
+ */
+function stringIsLong(str) {
+  return str.length >= DevToolsServer.LONG_STRING_LENGTH;
+}
+
+const TYPED_ARRAY_CLASSES = [
+  "Uint8Array",
+  "Uint8ClampedArray",
+  "Uint16Array",
+  "Uint32Array",
+  "Int8Array",
+  "Int16Array",
+  "Int32Array",
+  "Float32Array",
+  "Float64Array",
+  "BigInt64Array",
+  "BigUint64Array",
+];
+
+/**
+ * Returns true if a debuggee object is a typed array.
+ *
+ * @param obj Debugger.Object
+ *        The debuggee object to test.
+ * @return Boolean
+ */
+function isTypedArray(object) {
+  return TYPED_ARRAY_CLASSES.includes(object.class);
+}
+
+/**
+ * Returns true if a debuggee object is an array, including a typed array.
+ *
+ * @param obj Debugger.Object
+ *        The debuggee object to test.
+ * @return Boolean
+ */
+function isArray(object) {
+  return isTypedArray(object) || object.class === "Array";
+}
+
+/**
+ * Returns the length of an array (or typed array).
+ *
+ * @param object Debugger.Object
+ *        The debuggee object of the array.
+ * @return Number
+ * @throws if the object is not an array.
+ */
+function getArrayLength(object) {
+  if (!isArray(object)) {
+    throw new Error("Expected an array, got a " + object.class);
+  }
+
+  // Real arrays have a reliable `length` own property.
+  if (object.class === "Array") {
+    return DevToolsUtils.getProperty(object, "length");
+  }
+
+  // For typed arrays, `DevToolsUtils.getProperty` is not reliable because the `length`
+  // getter could be shadowed by an own property, and `getOwnPropertyNames` is
+  // unnecessarily slow. Obtain the `length` getter safely and call it manually.
+  const typedProto = Object.getPrototypeOf(Uint8Array.prototype);
+  const getter = Object.getOwnPropertyDescriptor(typedProto, "length").get;
+  return getter.call(object.unsafeDereference());
+}
+
+/**
+ * Returns true if the parameter is suitable to be an array index.
+ *
+ * @param str String
+ * @return Boolean
+ */
+function isArrayIndex(str) {
+  // Transform the parameter to a 32-bit unsigned integer.
+  const num = str >>> 0;
+  // Check that the parameter is a canonical Uint32 index.
+  return (
+    num + "" === str &&
+    // Array indices cannot attain the maximum Uint32 value.
+    num != -1 >>> 0
+  );
+}
+
+/**
+ * Returns true if a debuggee object is a local or sessionStorage object.
+ *
+ * @param object Debugger.Object
+ *        The debuggee object to test.
+ * @return Boolean
+ */
+function isStorage(object) {
+  return object.class === "Storage";
+}
+
+/**
+ * Returns the length of a local or sessionStorage object.
+ *
+ * @param object Debugger.Object
+ *        The debuggee object of the array.
+ * @return Number
+ * @throws if the object is not a local or sessionStorage object.
+ */
+function getStorageLength(object) {
+  if (!isStorage(object)) {
+    throw new Error("Expected a storage object, got a " + object.class);
+  }
+  return DevToolsUtils.getProperty(object, "length");
+}
+
+/**
+ * Returns an array of properties based on event class name.
+ *
+ * @param className
+ * @returns {Array}
+ */
+function getPropsForEvent(className) {
+  const positionProps = ["buttons", "clientX", "clientY", "layerX", "layerY"];
+  const eventToPropsMap = {
+    MouseEvent: positionProps,
+    DragEvent: positionProps,
+    PointerEvent: positionProps,
+    SimpleGestureEvent: positionProps,
+    WheelEvent: positionProps,
+    KeyboardEvent: ["key", "charCode", "keyCode"],
+    TransitionEvent: ["propertyName", "pseudoElement"],
+    AnimationEvent: ["animationName", "pseudoElement"],
+    ClipboardEvent: ["clipboardData"],
+  };
+
+  if (className in eventToPropsMap) {
+    return eventToPropsMap[className];
+  }
+
+  return [];
+}
+
+/**
+ * Returns an array of of all properties of an object
+ *
+ * @param obj
+ * @param rawObj
+ * @returns {Array|Iterable} If rawObj is localStorage/sessionStorage, we don't return an
+ *          array but an iterable object (with the proper `length` property) to avoid
+ *          performance issues.
+ */
+function getPropNamesFromObject(obj, rawObj) {
+  try {
+    if (isStorage(obj)) {
+      // local and session storage cannot be iterated over using
+      // Object.getOwnPropertyNames() because it skips keys that are duplicated
+      // on the prototype e.g. "key", "getKeys" so we need to gather the real
+      // keys using the storage.key() function.
+      // As the method is pretty slow, we return an iterator here, so we don't consume
+      // more than we need, especially since we're calling this from previewers in which
+      // we only need the first 10 entries for the preview (See Bug 1741804).
+
+      // Still return the proper number of entries.
+      const length = rawObj.length;
+      const iterable = { length };
+      iterable[Symbol.iterator] = function*() {
+        for (let j = 0; j < length; j++) {
+          yield rawObj.key(j);
+        }
+      };
+      return iterable;
+    }
+
+    return obj.getOwnPropertyNames();
+  } catch (ex) {
+    // Calling getOwnPropertyNames() on some wrapped native prototypes is not
+    // allowed: "cannot modify properties of a WrappedNative". See bug 952093.
+  }
+
+  return [];
+}
+
+/**
+ * Returns an array of private properties of an object
+ *
+ * @param obj
+ * @returns {Array}
+ */
+function getSafePrivatePropertiesSymbols(obj) {
+  try {
+    return obj.getOwnPrivateProperties();
+  } catch (ex) {
+    return [];
+  }
+}
+
+/**
+ * Returns an array of all symbol properties of an object
+ *
+ * @param obj
+ * @returns {Array}
+ */
+function getSafeOwnPropertySymbols(obj) {
+  try {
+    return obj.getOwnPropertySymbols();
+  } catch (ex) {
+    return [];
+  }
+}
+
+/**
+ * Returns an array modifiers based on keys
+ *
+ * @param rawObj
+ * @returns {Array}
+ */
+function getModifiersForEvent(rawObj) {
+  const modifiers = [];
+  const keysToModifiersMap = {
+    altKey: "Alt",
+    ctrlKey: "Control",
+    metaKey: "Meta",
+    shiftKey: "Shift",
+  };
+
+  for (const key in keysToModifiersMap) {
+    if (keysToModifiersMap.hasOwnProperty(key) && rawObj[key]) {
+      modifiers.push(keysToModifiersMap[key]);
+    }
+  }
+
+  return modifiers;
+}
+
+/**
+ * Make a debuggee value for the given value.
+ *
+ * @param TargetActor targetActor
+ *        The Target Actor from which this object originates.
+ * @param mixed value
+ *        The value you want to get a debuggee value for.
+ * @return object
+ *         Debuggee value for |value|.
+ */
+function makeDebuggeeValue(targetActor, value) {
+  // Primitive types are debuggee values and Debugger.Object.makeDebuggeeValue
+  // would return them unchanged. So avoid the expense of:
+  // getGlobalForObject+makeGlobalObjectReference+makeDebugeeValue for them.
+  //
+  // It is actually easier to identify non primitive which can only be object or function.
+  if (!isObjectOrFunction(value)) {
+    return value;
+  }
+
+  // `value` may come from various globals.
+  // And Debugger.Object.makeDebuggeeValue only works for objects
+  // related to the same global. So fetch the global first,
+  // in order to instantiate a Debugger.Object for it.
+  //
+  // In the worker thread, we don't have access to Cu,
+  // but at the same time, there is only one global, the worker one.
+  const valueGlobal = isWorker ? targetActor.workerGlobal : Cu.getGlobalForObject(value);
+  let dbgGlobal;
+  try {
+    dbgGlobal = targetActor.dbg.makeGlobalObjectReference(
+      valueGlobal
+    );
+  } catch(e) {
+    // makeGlobalObjectReference will throw if the global is invisible to Debugger,
+    // in this case instantiate a Debugger.Object for the top level global
+    // of the target. Even if value will come from another global, it will "work",
+    // but the Debugger.Object created via dbgGlobal.makeDebuggeeValue will throw
+    // on most methods as the object will also be invisible to Debuggee...
+    if (e.message.includes("object in compartment marked as invisible to Debugger")) {
+      dbgGlobal = targetActor.dbg.makeGlobalObjectReference(
+        targetActor.window 
+      );
+
+    } else {
+      throw e;
+    }
+  }
+
+  return dbgGlobal.makeDebuggeeValue(value);
+}
+
+/**
+ * Create a grip for the given string.
+ *
+ * @param TargetActor targetActor
+ *        The Target Actor from which this object originates.
+ */
+function createStringGrip(targetActor, string) {
+  if (string && stringIsLong(string)) {
+    const actor = new LongStringActor(targetActor.conn, string);
+    targetActor.manage(actor);
+    return actor.form();
+  }
+  return string;
+}
+
+/**
+ * Create a grip for the given value.
+ *
+ * @param TargetActor targetActor
+ *        The Target Actor from which this object originates.
+ * @param mixed value
+ *        The value you want to get a debuggee value for.
+ * @param Number depth
+ *        Depth of the object compared to the top level object,
+ *        when we are inspecting nested attributes.
+ * @param Object [objectActorAttributes]
+ *        An optional object whose properties will be assigned to the ObjectActor if one
+ *        is created.
+ * @return object
+ */
+function createValueGripForTarget(
+  targetActor,
+  value,
+  depth = 0,
+  objectActorAttributes = {}
+) {
+  const makeObjectGrip = (objectActorValue, pool) =>
+    createObjectGrip(
+      targetActor,
+      depth,
+      objectActorValue,
+      pool,
+      objectActorAttributes
+    );
+  return createValueGrip(value, targetActor, makeObjectGrip);
+}
+
+/**
+ * Create and return an environment actor that corresponds to the provided
+ * Debugger.Environment. This is a straightforward clone of the ThreadActor's
+ * method except that it stores the environment actor in the web console
+ * actor's pool.
+ *
+ * @param Debugger.Environment environment
+ *        The lexical environment we want to extract.
+ * @param TargetActor targetActor
+ *        The Target Actor to use as parent actor.
+ * @return The EnvironmentActor for |environment| or |undefined| for host
+ *         functions or functions scoped to a non-debuggee global.
+ */
+function createEnvironmentActor(environment, targetActor) {
+  if (!environment) {
+    return undefined;
+  }
+
+  if (environment.actor) {
+    return environment.actor;
+  }
+
+  const actor = new EnvironmentActor(environment, targetActor);
+  targetActor.manage(actor);
+  environment.actor = actor;
+
+  return actor;
+}
+
+/**
+ * Create a grip for the given object.
+ *
+ * @param TargetActor targetActor
+ *        The Target Actor from which this object originates.
+ * @param Number depth
+ *        Depth of the object compared to the top level object,
+ *        when we are inspecting nested attributes.
+ * @param object object
+ *        The object you want.
+ * @param object pool
+ *        A Pool where the new actor instance is added.
+ * @param object [objectActorAttributes]
+ *        An optional object whose properties will be assigned to the ObjectActor being created.
+ * @param object
+ *        The object grip.
+ */
+function createObjectGrip(
+  targetActor,
+  depth,
+  object,
+  pool,
+  objectActorAttributes = {}
+) {
+  let gripDepth = depth;
+  const actor = new ObjectActor(
+    object,
+    {
+      ...objectActorAttributes,
+      thread: targetActor.threadActor,
+      getGripDepth: () => gripDepth,
+      incrementGripDepth: () => gripDepth++,
+      decrementGripDepth: () => gripDepth--,
+      createValueGrip: v => createValueGripForTarget(targetActor, v, gripDepth),
+      createEnvironmentActor: env => createEnvironmentActor(env, targetActor),
+    },
+    targetActor.conn
+  );
+  pool.manage(actor);
+
+  return actor.form();
+}
+
+module.exports = {
+  getPromiseState,
+  makeDebuggeeValueIfNeeded,
+  unwrapDebuggeeValue,
+  createValueGrip,
+  stringIsLong,
+  isTypedArray,
+  isArray,
+  isStorage,
+  getArrayLength,
+  getStorageLength,
+  isArrayIndex,
+  getPropsForEvent,
+  getPropNamesFromObject,
+  getSafeOwnPropertySymbols,
+  getSafePrivatePropertiesSymbols,
+  getModifiersForEvent,
+  isObjectOrFunction,
+  createStringGrip,
+  makeDebuggeeValue,
+  createValueGripForTarget,
+};