From 2211712d274673bfa7451f8ff0d14d190d5f68bd Mon Sep 17 00:00:00 2001
From: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date: Fri, 7 Jul 2017 13:51:24 +0200
Subject: [PATCH] Bug 1308566 - Remove reps mochitests. r=bgrins

Remove tests since they were all migrated to jest in Github and will only
lives there now.

MozReview-Commit-ID: 7N8Wuq6sD2I

--HG--
extra : rebase_source : 3f3dba033ed48302094c62ec5f092f7bbf89fa26
---
 .../client/shared/components/reps/moz.build   |    2 -
 .../reps/test/mochitest/.eslintrc.js          |    6 -
 .../components/reps/test/mochitest/chrome.ini |   33 -
 .../components/reps/test/mochitest/head.js    |   71 -
 .../reps/test/mochitest/test_reps_array.html  |  294 ----
 .../test/mochitest/test_reps_attribute.html   |   75 -
 .../mochitest/test_reps_comment-node.html     |   82 -
 .../test/mochitest/test_reps_date-time.html   |  106 --
 .../test/mochitest/test_reps_document.html    |   77 -
 .../mochitest/test_reps_element-node.html     |  467 ------
 .../reps/test/mochitest/test_reps_error.html  |  454 ------
 .../reps/test/mochitest/test_reps_event.html  |  490 ------
 .../test/mochitest/test_reps_failure.html     |   61 -
 .../test/mochitest/test_reps_function.html    |  417 ------
 .../test/mochitest/test_reps_grip-array.html  | 1324 -----------------
 .../test/mochitest/test_reps_grip-map.html    |  859 -----------
 .../reps/test/mochitest/test_reps_grip.html   | 1288 ----------------
 .../test/mochitest/test_reps_infinity.html    |   72 -
 .../test/mochitest/test_reps_long-string.html |  131 --
 .../reps/test/mochitest/test_reps_nan.html    |   49 -
 .../reps/test/mochitest/test_reps_null.html   |   46 -
 .../reps/test/mochitest/test_reps_number.html |   97 --
 .../mochitest/test_reps_object-with-text.html |   67 -
 .../mochitest/test_reps_object-with-url.html  |   74 -
 .../reps/test/mochitest/test_reps_object.html |  338 -----
 .../test/mochitest/test_reps_promise.html     |  527 -------
 .../reps/test/mochitest/test_reps_regexp.html |   65 -
 .../reps/test/mochitest/test_reps_string.html |  110 --
 .../test/mochitest/test_reps_stylesheet.html  |   68 -
 .../reps/test/mochitest/test_reps_symbol.html |   75 -
 .../test/mochitest/test_reps_text-node.html   |  248 ---
 .../test/mochitest/test_reps_undefined.html   |   49 -
 .../reps/test/mochitest/test_reps_window.html |  116 --
 33 files changed, 8238 deletions(-)
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/.eslintrc.js
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/chrome.ini
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/head.js
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_array.html
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_attribute.html
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_comment-node.html
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_date-time.html
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_document.html
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_element-node.html
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_error.html
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_event.html
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_failure.html
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_function.html
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_grip-array.html
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_grip-map.html
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_grip.html
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_infinity.html
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_long-string.html
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_nan.html
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_null.html
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_number.html
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_object-with-text.html
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_object-with-url.html
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_object.html
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_promise.html
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_regexp.html
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_string.html
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_stylesheet.html
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_symbol.html
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_text-node.html
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_undefined.html
 delete mode 100644 devtools/client/shared/components/reps/test/mochitest/test_reps_window.html

diff --git a/devtools/client/shared/components/reps/moz.build b/devtools/client/shared/components/reps/moz.build
index 69fb6af4d319..08b7950f5691 100644
--- a/devtools/client/shared/components/reps/moz.build
+++ b/devtools/client/shared/components/reps/moz.build
@@ -8,5 +8,3 @@ DevToolsModules(
     'reps.css',
     'reps.js',
 )
-
-MOCHITEST_CHROME_MANIFESTS += ['test/mochitest/chrome.ini']
diff --git a/devtools/client/shared/components/reps/test/mochitest/.eslintrc.js b/devtools/client/shared/components/reps/test/mochitest/.eslintrc.js
deleted file mode 100644
index decd31bfa6bb..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/.eslintrc.js
+++ /dev/null
@@ -1,6 +0,0 @@
-"use strict";
-
-module.exports = {
-  // Extend from the shared list of defined globals for mochitests.
-  "extends": "../../../../../../.eslintrc.mochitests.js"
-};
diff --git a/devtools/client/shared/components/reps/test/mochitest/chrome.ini b/devtools/client/shared/components/reps/test/mochitest/chrome.ini
deleted file mode 100644
index 0d48f3e34402..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/chrome.ini
+++ /dev/null
@@ -1,33 +0,0 @@
-[DEFAULT]
-support-files =
-  head.js
-
-[test_reps_array.html]
-[test_reps_attribute.html]
-[test_reps_comment-node.html]
-[test_reps_date-time.html]
-[test_reps_document.html]
-[test_reps_element-node.html]
-[test_reps_error.html]
-[test_reps_event.html]
-[test_reps_failure.html]
-[test_reps_function.html]
-[test_reps_grip.html]
-[test_reps_grip-array.html]
-[test_reps_grip-map.html]
-[test_reps_infinity.html]
-[test_reps_long-string.html]
-[test_reps_nan.html]
-[test_reps_null.html]
-[test_reps_number.html]
-[test_reps_object.html]
-[test_reps_object-with-text.html]
-[test_reps_object-with-url.html]
-[test_reps_promise.html]
-[test_reps_regexp.html]
-[test_reps_string.html]
-[test_reps_stylesheet.html]
-[test_reps_symbol.html]
-[test_reps_text-node.html]
-[test_reps_undefined.html]
-[test_reps_window.html]
diff --git a/devtools/client/shared/components/reps/test/mochitest/head.js b/devtools/client/shared/components/reps/test/mochitest/head.js
deleted file mode 100644
index e2e567260430..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/head.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-/* Entirely disable no-unused-vars, because the second line here
-   doesn't seem to work with eslint 3.15.0 -- it doesn't suppress
-   other no-unused-vars errors.  */
-/* eslint-disable no-unused-vars */
-/* eslint no-unused-vars: ["error", {"vars": "local"}] */
-
-/* globals is */
-
-/* Not really a module.  */
-/* eslint-disable strict */
-"use strict";
-
-var { classes: Cc, interfaces: Ci, utils: Cu, results: Cr } = Components;
-
-var { require } = Cu.import("resource://devtools/shared/Loader.jsm", {});
-var { Assert } = require("resource://testing-common/Assert.jsm");
-var { gDevTools } = require("devtools/client/framework/devtools");
-var { BrowserLoader } = Cu.import("resource://devtools/client/shared/browser-loader.js", {});
-var flags = require("devtools/shared/flags");
-var { Task } = require("devtools/shared/task");
-var DevToolsUtils = require("devtools/shared/DevToolsUtils");
-
-flags.testing = true;
-var { require: browserRequire } = BrowserLoader({
-  baseURI: "resource://devtools/client/shared/",
-  window
-});
-
-let ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
-let React = browserRequire("devtools/client/shared/vendor/react");
-var TestUtils = React.addons.TestUtils;
-
-function renderComponent(component, props) {
-  const el = React.createElement(component, props, {});
-  // By default, renderIntoDocument() won't work for stateless components, but
-  // it will work if the stateless component is wrapped in a stateful one.
-  // See https://github.com/facebook/react/issues/4839
-  const wrappedEl = React.DOM.span({}, [el]);
-  const renderedComponent = TestUtils.renderIntoDocument(wrappedEl);
-  return ReactDOM.findDOMNode(renderedComponent).children[0];
-}
-
-function shallowRenderComponent(component, props) {
-  const el = React.createElement(component, props);
-  const renderer = TestUtils.createRenderer();
-  renderer.render(el, {});
-  return renderer.getRenderOutput();
-}
-
-/**
- * Test that a rep renders correctly across different modes.
- */
-function testRepRenderModes(modeTests, testName, componentUnderTest, gripStub,
-  props = {}) {
-  modeTests.forEach(({mode, expectedOutput, message, title}) => {
-    const modeString = typeof mode === "undefined" ? "no mode" : mode.toString();
-    if (!message) {
-      message = `${testName}: ${modeString} renders correctly.`;
-    }
-
-    const rendered = renderComponent(
-      componentUnderTest.rep,
-      Object.assign({}, { object: gripStub, mode, title }, props)
-    );
-    is(rendered.textContent, expectedOutput, message);
-  });
-}
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_array.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_array.html
deleted file mode 100644
index 48bd69969b1c..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_array.html
+++ /dev/null
@@ -1,294 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test ArrayRep rep
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep test - ArrayRep</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-"use strict";
-/* import-globals-from head.js */
-
-window.onload = Task.async(function* () {
-  const {
-    REPS,
-    MODE,
-    getRep,
-  } = browserRequire("devtools/client/shared/components/reps/reps");
-  let { ArrayRep } = REPS;
-
-  let componentUnderTest = ArrayRep;
-  const maxLength = {
-    short: 3,
-    long: 10
-  };
-
-  try {
-    yield testBasic();
-
-    // Test property iterator
-    yield testMaxProps();
-    yield testMoreThanShortMaxProps();
-    yield testMoreThanLongMaxProps();
-    yield testRecursiveArray();
-
-    // Test that properties are rendered as expected by ItemRep
-    yield testNested();
-
-    yield testArray();
-    yield testObjectLink();
-  } catch (e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-
-  function testBasic() {
-    // Test that correct rep is chosen
-    const stub = [];
-    is(getRep(stub), ArrayRep.rep, "Rep correctly selects Array Rep");
-
-
-    // Test rendering
-    const defaultOutput = `[]`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `[]`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, "testBasic", componentUnderTest, stub);
-  }
-
-  function testMaxProps() {
-    const stub = [1, "foo", {}];
-    const defaultOutput = `[ 1, "foo", Object ]`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `[3]`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, "testMaxProps", componentUnderTest, stub);
-  }
-
-  function testMoreThanShortMaxProps() {
-    const stub = Array(maxLength.short + 1).fill("foo");
-    const defaultShortOutput = `[ ${Array(maxLength.short).fill("\"foo\"").join(", ")}, 1 more… ]`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultShortOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `[${maxLength.short + 1}]`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultShortOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: `[ ${Array(maxLength.short + 1).fill("\"foo\"").join(", ")} ]`,
-      }
-    ];
-
-    testRepRenderModes(modeTests, "testMoreThanMaxProps", componentUnderTest, stub);
-  }
-
-  function testMoreThanLongMaxProps() {
-    const stub = Array(maxLength.long + 1).fill("foo");
-    const defaultShortOutput = `[ ${Array(maxLength.short).fill("\"foo\"").join(", ")}, ${maxLength.long + 1 - maxLength.short} more… ]`;
-    const defaultLongOutput = `[ ${Array(maxLength.long).fill("\"foo\"").join(", ")}, 1 more… ]`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultShortOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `[${maxLength.long + 1}]`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultShortOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultLongOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, "testMoreThanMaxProps", componentUnderTest, stub);
-  }
-
-  function testRecursiveArray() {
-    let stub = [1];
-    stub.push(stub);
-    const defaultOutput = `[ 1, [2] ]`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `[2]`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, "testRecursiveArray", componentUnderTest, stub);
-  }
-
-  function testNested() {
-    let stub = [
-      {
-        p1: "s1",
-        p2: ["a1", "a2", "a3"],
-        p3: "s3",
-        p4: "s4"
-      }
-    ];
-    const defaultOutput = `[ Object ]`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `[1]`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, "testNested", componentUnderTest, stub);
-  }
-
-  function testArray() {
-    let stub = [
-      "a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];
-
-    const defaultOutput = `[ "a", "b", "c", "d", "e", "f", "g", "h", "i", "j" ]`;
-    const shortOutput = `[ "a", "b", "c", 7 more… ]`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: shortOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `[10]`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: shortOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, "testNested", componentUnderTest, stub);
-  }
-
-  function testObjectLink() {
-    let stub = ["a", "b", "c"];
-
-    const defaultOutput = `*[ *"a", "b", "c"* ]*`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `*[*3*]*`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(
-      modeTests,
-      "testObjectLink",
-      componentUnderTest,
-      stub,
-      {
-        objectLink: (props, ...children) => React.DOM.span({},
-          "*", ...children, "*"),
-      }
-    );
-  }
-});
-</script>
-</pre>
-</body>
-</html>
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_attribute.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_attribute.html
deleted file mode 100644
index e85d7fabc219..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_attribute.html
+++ /dev/null
@@ -1,75 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test Attribute rep
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep test - Attribute</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-window.onload = Task.async(function* () {
-  const {
-    REPS,
-    getRep,
-  } = browserRequire("devtools/client/shared/components/reps/reps");
-  let { Attribute } = REPS;
-
-  try {
-    testBasic();
-    testObjectLink();
-  } catch (e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-
-  function testBasic() {
-    // Test that correct rep is chosen
-    is(getRep(getStub()), Attribute.rep, "Rep correctly selects Attribute Rep");
-
-    // Test rendering
-    const renderedComponent = renderComponent(Attribute.rep, { object: getStub() });
-    is(renderedComponent.textContent, "class=\"autocomplete-suggestions\"", "Attribute rep has expected text content");
-  }
-
-  function testObjectLink() {
-    const renderedComponent = renderComponent(Attribute.rep, {
-      object: getStub(),
-      objectLink: (props, ...children) => React.DOM.span({},
-        "*", ...children, "*"),
-    });
-    is(renderedComponent.textContent, "*class=\"autocomplete-suggestions\"*",
-      "Attribute rep has expected text content when an objectLink is passed as a prop");
-  }
-
-  function getStub() {
-    return {
-      "type": "object",
-      "class": "Attr",
-      "actor": "server1.conn19.obj65",
-      "extensible": true,
-      "frozen": false,
-      "sealed": false,
-      "ownPropertyLength": 0,
-      "preview": {
-        "kind": "DOMNode",
-        "nodeType": 2,
-        "nodeName": "class",
-        "value": "autocomplete-suggestions"
-      }
-    };
-  }
-});
-</script>
-</pre>
-</body>
-</html>
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_comment-node.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_comment-node.html
deleted file mode 100644
index 2cf1b22b7fbf..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_comment-node.html
+++ /dev/null
@@ -1,82 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test comment-node rep
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep test - comment-node</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-"use strict";
-
-window.onload = Task.async(function* () {
-  try {
-    const {
-      REPS,
-      MODE,
-      getRep,
-    } = browserRequire("devtools/client/shared/components/reps/reps");
-    let { CommentNode } = REPS;
-
-    let gripStub = {
-      "type": "object",
-      "actor": "server1.conn1.child1/obj47",
-      "class": "Comment",
-      "extensible": true,
-      "frozen": false,
-      "sealed": false,
-      "ownPropertyLength": 0,
-      "preview": {
-        "kind": "DOMNode",
-        "nodeType": 8,
-        "nodeName": "#comment",
-        "textContent": "test\nand test\nand test\nand test\nand test\nand test\nand test"
-      }
-    };
-
-    // Test that correct rep is chosen.
-    is(getRep(gripStub), CommentNode.rep, "Rep correctly selects CommentNode Rep");
-
-    // Test rendering.
-    const renderedComponent = renderComponent(CommentNode.rep, { object: gripStub });
-    is(renderedComponent.className, "objectBox theme-comment",
-      "CommentNode rep has expected class names");
-    is(renderedComponent.textContent,
-      `<!-- test\nand test\nand test\nan…d test\nand test\nand test -->`,
-      "CommentNode rep has expected text content");
-
-    // Test tiny rendering.
-    const tinyRenderedComponent = renderComponent(CommentNode.rep, {
-      object: gripStub,
-      mode: MODE.TINY,
-    });
-    is(tinyRenderedComponent.textContent,
-      `<!-- test\\nand test\\na… test\\nand test -->`,
-      "CommentNode rep has expected text content in tiny mode");
-
-    // Test long rendering.
-    const longRenderedComponent = renderComponent(CommentNode.rep, {
-      object: gripStub,
-      mode: MODE.LONG,
-    });
-    is(longRenderedComponent.textContent, `<!-- ${gripStub.preview.textContent} -->`,
-      "CommentNode rep has expected text content in long mode");
-  } catch (e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-});
-</script>
-</pre>
-</body>
-</html>
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_date-time.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_date-time.html
deleted file mode 100644
index ccec5f83185a..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_date-time.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test DateTime rep
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep test - DateTime</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-window.onload = Task.async(function* () {
-  const {
-    REPS,
-    getRep,
-  } = browserRequire("devtools/client/shared/components/reps/reps");
-  let { DateTime } = REPS;
-
-  try {
-    testValid();
-    testInvalid();
-    testObjectLink();
-  } catch(e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-
-  function testValid() {
-    let gripStub = {
-      "type": "object",
-      "class": "Date",
-      "actor": "server1.conn0.child1/obj32",
-      "extensible": true,
-      "frozen": false,
-      "sealed": false,
-      "ownPropertyLength": 0,
-      "preview": {
-        "timestamp": 1459372644859
-      }
-    };
-
-    // Test that correct rep is chosen
-    is(getRep(gripStub), DateTime.rep, "Rep correctly selects DateTime Rep");
-
-    // Test rendering
-    const renderedComponent = renderComponent(DateTime.rep, { object: gripStub });
-    is(renderedComponent.textContent, "Date 2016-03-30T21:17:24.859Z", "DateTime rep has expected text content for valid date");
-  }
-
-  function testInvalid() {
-    let gripStub = {
-      "type": "object",
-      "actor": "server1.conn0.child1/obj32",
-      "class": "Date",
-      "extensible": true,
-      "frozen": false,
-      "sealed": false,
-      "ownPropertyLength": 0,
-      "preview": {
-        "timestamp": {
-          "type": "NaN"
-        }
-      }
-    };
-
-    // Test rendering
-    const renderedComponent = renderComponent(DateTime.rep, { object: gripStub });
-    is(renderedComponent.textContent, "Invalid Date", "DateTime rep has expected text content for invalid date");
-  }
-
-  function testObjectLink() {
-    let gripStub = {
-      "type": "object",
-      "class": "Date",
-      "actor": "server1.conn0.child1/obj32",
-      "extensible": true,
-      "frozen": false,
-      "sealed": false,
-      "ownPropertyLength": 0,
-      "preview": {
-        "timestamp": 1459372644859
-      }
-    };
-
-    // Test rendering
-    const renderedComponent = renderComponent(DateTime.rep, {
-      object: gripStub,
-      objectLink: (props, ...children) => React.DOM.span({},
-        "*", ...children, "*"),
-    });
-    is(renderedComponent.textContent, "*Date *2016-03-30T21:17:24.859Z",
-      "DateTime rep has expected text content when an objectLink is passed as a prop");
-  }
-});
-</script>
-</pre>
-</body>
-</html>
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_document.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_document.html
deleted file mode 100644
index 619ca79ecda0..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_document.html
+++ /dev/null
@@ -1,77 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test Document rep
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep test - Document</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-window.onload = Task.async(function* () {
-  const {
-    REPS,
-    getRep,
-  } = browserRequire("devtools/client/shared/components/reps/reps");
-  let { Document } = REPS;
-
-  try {
-    testBasic();
-    testObjectLink();
-  } catch (e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-
-  function testBasic() {
-    // Test that correct rep is chosen
-    is(getRep(getStub()), Document.rep, "Rep correctly selects Document Rep");
-
-    // Test rendering
-    const renderedComponent = renderComponent(Document.rep, { object: getStub() });
-    is(renderedComponent.textContent, "HTMLDocument https://www.mozilla.org/en-US/firefox/new/",
-      "Document rep has expected text content");
-  }
-
-  function testObjectLink() {
-    // Test rendering
-    const renderedComponent = renderComponent(Document.rep, {
-      object: getStub(),
-      objectLink: (props, ...children) => React.DOM.span({},
-        "*", ...children, "*"),
-    });
-    is(renderedComponent.textContent, "*HTMLDocument *https://www.mozilla.org/en-US/firefox/new/",
-      "Document rep has expected text content when an objectLink is passed as a prop");
-  }
-
-  function getStub() {
-    return {
-      "type": "object",
-      "class": "HTMLDocument",
-      "actor": "server1.conn17.obj115",
-      "extensible": true,
-      "frozen": false,
-      "sealed": false,
-      "ownPropertyLength": 1,
-      "preview": {
-        "kind": "DOMNode",
-        "nodeType": 9,
-        "nodeName": "#document",
-        "location": "https://www.mozilla.org/en-US/firefox/new/"
-      }
-    };
-  }
-});
-</script>
-</pre>
-</body>
-</html>
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_element-node.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_element-node.html
deleted file mode 100644
index 872718fbad58..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_element-node.html
+++ /dev/null
@@ -1,467 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test Element node rep
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep test - Element node</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-"use strict";
-
-window.onload = Task.async(function* () {
-  const {
-    REPS,
-    MODE,
-    getRep,
-    getSelectableInInspectorGrips,
-  } = browserRequire("devtools/client/shared/components/reps/reps");
-  let { ElementNode } = REPS;
-
-  try {
-    yield testBodyNode();
-    yield testDocumentElement();
-    yield testNode();
-    yield testNodeWithLeadingAndTrailingSpacesClassName();
-    yield testNodeWithoutAttributes();
-    yield testLotsOfAttributes();
-    yield testSvgNode();
-    yield testSvgNodeInXHTML();
-
-    yield testOnMouseOver();
-    yield testOnMouseOut();
-    yield testOnInspectIconClick();
-    yield testObjectLink();
-  } catch (e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-
-  function testBodyNode() {
-    const stub = getGripStub("testBodyNode");
-    is(getRep(stub), ElementNode.rep,
-      "Rep correctly selects ElementNode Rep for body node");
-
-    const renderedComponent = renderComponent(ElementNode.rep, { object: stub });
-    is(renderedComponent.textContent, `<body id="body-id" class="body-class">`,
-      "Element node rep has expected text content for body node");
-
-    const tinyRenderedComponent = renderComponent(
-      ElementNode.rep, { object: stub, mode: MODE.TINY });
-    is(tinyRenderedComponent.textContent, `body#body-id.body-class`,
-      "Element node rep has expected text content for body node in tiny mode");
-  }
-
-  function testDocumentElement() {
-    const stub = getGripStub("testDocumentElement");
-    is(getRep(stub), ElementNode.rep,
-      "Rep correctly selects ElementNode Rep for document element node");
-
-    const renderedComponent = renderComponent(ElementNode.rep, { object: stub });
-    is(renderedComponent.textContent, `<html dir="ltr" lang="en-US">`,
-      "Element node rep has expected text content for document element node");
-
-    const tinyRenderedComponent = renderComponent(
-      ElementNode.rep, { object: stub, mode: MODE.TINY });
-    is(tinyRenderedComponent.textContent, `html`,
-      "Element node rep has expected text content for document element in tiny mode");
-  }
-
-  function testNode() {
-    const stub = getGripStub("testNode");
-    is(getRep(stub), ElementNode.rep,
-      "Rep correctly selects ElementNode Rep for element node");
-
-    const renderedComponent = renderComponent(ElementNode.rep, { object: stub });
-    is(renderedComponent.textContent,
-      `<input id="newtab-customize-button" class="bar baz" dir="ltr" ` +
-      `title="Customize your New Tab page" value="foo" type="button">`,
-      "Element node rep has expected text content for element node");
-
-    const tinyRenderedComponent = renderComponent(
-      ElementNode.rep, { object: stub, mode: MODE.TINY });
-    is(tinyRenderedComponent.textContent,
-      `input#newtab-customize-button.bar.baz`,
-      "Element node rep has expected text content for element node in tiny mode");
-  }
-
-  function testNodeWithLeadingAndTrailingSpacesClassName() {
-    const stub = getGripStub("testNodeWithLeadingAndTrailingSpacesClassName");
-    is(getRep(stub), ElementNode.rep,
-      "Rep correctly selects ElementNode Rep for element node");
-
-    const renderedComponent = renderComponent(ElementNode.rep, { object: stub });
-    is(renderedComponent.textContent,
-      `<body id="nightly-whatsnew" class="  html-ltr    ">`,
-      "Element node rep output element node with the class trailing spaces");
-
-    const tinyRenderedComponent = renderComponent(
-      ElementNode.rep, { object: stub, mode: MODE.TINY });
-    is(tinyRenderedComponent.textContent,
-      `body#nightly-whatsnew.html-ltr`,
-      "Element node rep does not show leading nor trailing spaces " +
-      "on class attribute in tiny mode");
-  }
-
-  function testNodeWithoutAttributes() {
-    const stub = getGripStub("testNodeWithoutAttributes");
-
-    is(getRep(stub), ElementNode.rep,
-      "Element node rep has expected text content for element node without attributes");
-
-    const tinyRenderedComponent = renderComponent(
-      ElementNode.rep, { object: stub, mode: MODE.TINY });
-    is(tinyRenderedComponent.textContent, `p`,
-      "Element node rep has expected text content for element node without attributes");
-  }
-
-  function testLotsOfAttributes() {
-    const stub = getGripStub("testLotsOfAttributes");
-
-    const renderedComponent = renderComponent(ElementNode.rep, { object: stub });
-    is(renderedComponent.textContent,
-      '<p id="lots-of-attributes" a="" b="" c="" d="" e="" f="" g="" ' +
-      'h="" i="" j="" k="" l="" m="" n="">',
-      "Element node rep has expected text content for node with lots of attributes");
-
-    const tinyRenderedComponent = renderComponent(
-      ElementNode.rep, { object: stub, mode: MODE.TINY });
-    is(tinyRenderedComponent.textContent, `p#lots-of-attributes`,
-      "Element node rep has expected text content for node in tiny mode");
-  }
-
-  function testSvgNode() {
-    const stub = getGripStub("testSvgNode");
-
-    is(getRep(stub), ElementNode.rep,
-      `Rep correctly selects ${ElementNode.rep.displayName} for SVG element node`);
-
-    const renderedComponent = renderComponent(ElementNode.rep, { object: stub });
-    is(renderedComponent.textContent,
-      '<clipPath id="clip" class="svg-element">',
-      "Element node rep has expected text content for SVG element node");
-
-    const tinyRenderedComponent = renderComponent(
-      ElementNode.rep, { object: stub, mode: MODE.TINY });
-    is(tinyRenderedComponent.textContent, `clipPath#clip.svg-element`,
-      "Element node rep has expected text content for SVG element node in tiny mode");
-  }
-
-  function testSvgNodeInXHTML() {
-    const stub = getGripStub("testSvgNodeInXHTML");
-
-    is(getRep(stub), ElementNode.rep,
-      `Rep correctly selects ${ElementNode.rep.displayName} for XHTML SVG element node`);
-
-    const renderedComponent = renderComponent(ElementNode.rep, { object: stub });
-    is(renderedComponent.textContent,
-      '<svg:circle class="svg-element" cx="0" cy="0" r="5">',
-      "Element node rep has expected text content for XHTML SVG element node");
-
-    const tinyRenderedComponent = renderComponent(
-      ElementNode.rep, { object: stub, mode: MODE.TINY });
-    is(tinyRenderedComponent.textContent, `svg:circle.svg-element`,
-      "Element node rep has expected text content for XHTML SVG element in tiny mode");
-  }
-
-  function testOnMouseOver() {
-    const stub = getGripStub("testNode");
-    const grips = getSelectableInInspectorGrips(stub);
-    is(grips.length, 1, "the stub has one node grip");
-
-    let mouseOverValue;
-    let onDOMNodeMouseOver = (object) => {
-      mouseOverValue = object;
-    };
-    const renderedComponent = renderComponent(ElementNode.rep, {
-      object: stub,
-      onDOMNodeMouseOver,
-    });
-
-    TestUtils.Simulate.mouseOver(renderedComponent);
-
-    is(mouseOverValue, grips[0], "onDOMNodeMouseOver is called " +
-      "with the expected argument when mouseover is fired on the Rep");
-  }
-
-  function testOnMouseOut() {
-    const stub = getGripStub("testNode");
-    const grips = getSelectableInInspectorGrips(stub);
-    is(grips.length, 1, "the stub has one node grip");
-
-    let called = false;
-    let onDOMNodeMouseOut = (object) => {
-      called = true;
-    };
-    const renderedComponent = renderComponent(ElementNode.rep, {
-      object: stub,
-      onDOMNodeMouseOut,
-    });
-
-    TestUtils.Simulate.mouseOut(renderedComponent);
-
-    is(called, true, "onDOMNodeMouseOut is called when mouseout is fired on the Rep");
-  }
-
-  function testOnInspectIconClick() {
-    const stub = getGripStub("testNode");
-    const grips = getSelectableInInspectorGrips(stub);
-    is(grips.length, 1, "the stub has one node grip");
-
-    let inspectIconClickedValue = null;
-    let inspectIconClickedEvent = null;
-
-    let onInspectIconClick = (object, event) => {
-      inspectIconClickedValue = object;
-      inspectIconClickedEvent = event;
-    };
-
-    const renderedComponentWithoutInspectIcon = renderComponent(ElementNode.rep, {
-      object: getGripStub("testDisconnectedNode"),
-      onInspectIconClick,
-    });
-    is(renderedComponentWithoutInspectIcon.querySelector(".open-inspector"), null,
-      "There isn't an inspect icon when the node is not in the DOM tree");
-
-    const renderedComponent = renderComponent(ElementNode.rep, {
-      object: stub,
-      onInspectIconClick,
-    });
-
-    const inspectIconNode = renderedComponent.querySelector(".open-inspector");
-    ok(inspectIconNode !== null, "There is an inspect icon as expected");
-    TestUtils.Simulate.click(inspectIconNode);
-
-    is(inspectIconClickedValue, grips[0],
-      "onInspectIconClick is called with expected value when inspect icon is clicked");
-    ok(inspectIconClickedEvent !== null && inspectIconClickedEvent.type === "click",
-      "onInspectIconClick forwarded the original event to the callback");
-  }
-
-  function testObjectLink() {
-    const stub = getGripStub("testBodyNode");
-
-    const renderedComponent = renderComponent(ElementNode.rep, {
-      object: stub,
-      objectLink: (props, ...children) => React.DOM.span({},
-        "*", ...children, "*"),
-    });
-    is(renderedComponent.textContent, `*<body id="body-id" class="body-class">*`,
-      "Element node rep has expected text content for body node when an objectLink is " +
-      "passed as a prop");
-
-    const tinyRenderedComponent = renderComponent(ElementNode.rep, {
-      object: stub, mode: MODE.TINY,
-      objectLink: (props, ...children) => React.DOM.span({
-        className: "object-link"
-      }, "*", ...children, "*"),
-    });
-    is(tinyRenderedComponent.textContent, `*body#body-id.body-class*`,
-      "Element node rep has expected text content for body node in tiny mode when an " +
-      "objectLink is passed as a prop");
-  }
-
-  function getGripStub(name) {
-    switch (name) {
-      case "testBodyNode":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj30",
-          "class": "HTMLBodyElement",
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "DOMNode",
-            "nodeType": 1,
-            "nodeName": "body",
-            "attributes": {
-              "class": "body-class",
-              "id": "body-id"
-            },
-            "attributesLength": 2
-          }
-        };
-      case "testDocumentElement":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj40",
-          "class": "HTMLHtmlElement",
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "DOMNode",
-            "nodeType": 1,
-            "nodeName": "html",
-            "attributes": {
-              "dir": "ltr",
-              "lang": "en-US"
-            },
-            "attributesLength": 2
-          }
-        };
-      case "testNode":
-        return {
-          "type": "object",
-          "actor": "server1.conn2.child1/obj116",
-          "class": "HTMLInputElement",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "DOMNode",
-            "nodeType": 1,
-            "nodeName": "input",
-            "isConnected": true,
-            "attributes": {
-              "id": "newtab-customize-button",
-              "dir": "ltr",
-              "title": "Customize your New Tab page",
-              "class": "bar baz",
-              "value": "foo",
-              "type": "button"
-            },
-            "attributesLength": 6
-          }
-        };
-      case "testDisconnectedNode":
-        return {
-          "type": "object",
-          "actor": "server1.conn2.child1/obj116",
-          "class": "HTMLInputElement",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "DOMNode",
-            "nodeType": 1,
-            "nodeName": "input",
-            "isConnected": false,
-            "attributes": {
-              "id": "newtab-customize-button",
-              "dir": "ltr",
-              "title": "Customize your New Tab page",
-              "class": "bar baz",
-              "value": "foo",
-              "type": "button"
-            },
-            "attributesLength": 6
-          }
-        };
-      case "testNodeWithLeadingAndTrailingSpacesClassName":
-        return {
-          "type": "object",
-          "actor": "server1.conn3.child1/obj59",
-          "class": "HTMLBodyElement",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "DOMNode",
-            "nodeType": 1,
-            "nodeName": "body",
-            "attributes": {
-              "id": "nightly-whatsnew",
-              "class": "  html-ltr    "
-            },
-            "attributesLength": 2
-          }
-        };
-      case "testNodeWithoutAttributes":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj32",
-          "class": "HTMLParagraphElement",
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "DOMNode",
-            "nodeType": 1,
-            "nodeName": "p",
-            "attributes": {},
-            "attributesLength": 1
-          }
-        };
-      case "testLotsOfAttributes":
-        return {
-          "type": "object",
-          "actor": "server1.conn2.child1/obj30",
-          "class": "HTMLParagraphElement",
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "DOMNode",
-            "nodeType": 1,
-            "nodeName": "p",
-            "attributes": {
-              "id": "lots-of-attributes",
-              "a": "",
-              "b": "",
-              "c": "",
-              "d": "",
-              "e": "",
-              "f": "",
-              "g": "",
-              "h": "",
-              "i": "",
-              "j": "",
-              "k": "",
-              "l": "",
-              "m": "",
-              "n": ""
-            },
-            "attributesLength": 15
-          }
-        };
-      case "testSvgNode":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj42",
-          "class": "SVGClipPathElement",
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "DOMNode",
-            "nodeType": 1,
-            "nodeName": "clipPath",
-            "attributes": {
-              "id": "clip",
-              "class": "svg-element"
-            },
-            "attributesLength": 0
-          }
-        };
-      case "testSvgNodeInXHTML":
-        return {
-          "type": "object",
-          "actor": "server1.conn3.child1/obj34",
-          "class": "SVGCircleElement",
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "DOMNode",
-            "nodeType": 1,
-            "nodeName": "svg:circle",
-            "attributes": {
-              "class": "svg-element",
-              "cx": "0",
-              "cy": "0",
-              "r": "5"
-            },
-            "attributesLength": 3
-          }
-        };
-    }
-    return null;
-  }
-});
-</script>
-</pre>
-</body>
-</html>
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_error.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_error.html
deleted file mode 100644
index daabcc719d67..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_error.html
+++ /dev/null
@@ -1,454 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test Error rep
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep test - Error</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-"use strict";
-
-window.onload = Task.async(function* () {
-  const {
-    REPS,
-    MODE,
-    getRep,
-  } = browserRequire("devtools/client/shared/components/reps/reps");
-  let { ErrorRep } = REPS;
-
-  try {
-    // Test errors with different properties
-    yield testSimpleError();
-    yield testMultilineStackError();
-    yield testErrorWithoutStacktrace();
-
-    // Test different kind of errors
-    yield testEvalError();
-    yield testInternalError();
-    yield testRangeError();
-    yield testReferenceError();
-    yield testSyntaxError();
-    yield testTypeError();
-    yield testURIError();
-
-    yield testObjectLink();
-  } catch (e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-
-  function testSimpleError() {
-    // Test object = `new Error("Error message")`
-    const stub = getGripStub("testSimpleError");
-    is(getRep(stub), ErrorRep.rep, "Rep correctly selects Error Rep for Error object");
-
-    const renderedComponent = renderComponent(ErrorRep.rep, {object: stub});
-    is(renderedComponent.textContent,
-      "Error: Error message\n" +
-      "Stack trace:\n" +
-      "@debugger eval code:1:13\n",
-      "Error Rep has expected text content for a simple error");
-
-    const tinyRenderedComponent = renderComponent(
-      ErrorRep.rep, {object: stub, mode: MODE.TINY});
-    is(tinyRenderedComponent.textContent,
-      "Error",
-      "Error Rep has expected text content for a simple error in tiny mode");
-  }
-
-  function testMultilineStackError() {
-    /*
-     * Test object = `
-     *   function errorFoo() {
-     *     errorBar();
-     *   }
-     *   function errorBar() {
-     *     console.log(new Error("bar"));
-     *   }
-     *   errorFoo();`
-     */
-    const stub = getGripStub("testMultilineStackError");
-    is(getRep(stub), ErrorRep.rep,
-      `Rep correctly selects Error Rep for Error object`);
-
-    const renderedComponent = renderComponent(ErrorRep.rep, {object: stub});
-    is(renderedComponent.textContent,
-      "Error: bar\n" +
-      "Stack trace:\n" +
-      "errorBar@debugger eval code:6:15\n" +
-      "errorFoo@debugger eval code:3:3\n" +
-      "@debugger eval code:8:1\n",
-      "Error Rep has expected text content for an error with a multiple line");
-
-    const tinyRenderedComponent = renderComponent(
-      ErrorRep.rep, {object: stub, mode: MODE.TINY});
-    is(tinyRenderedComponent.textContent,
-      "Error",
-      "Error Rep has expected text content for an error with a multiple line in tiny mode");
-  }
-
-  function testErrorWithoutStacktrace() {
-    const stub = getGripStub("testErrorWithoutStacktrace");
-    is(getRep(stub), ErrorRep.rep,
-      `Rep correctly selects Error Rep for Error object`);
-
-    const renderedComponent = renderComponent(ErrorRep.rep, {object: stub});
-    is(renderedComponent.textContent,
-      "Error: Error message",
-      "Error Rep has expected text content for an error without stacktrace");
-
-    const tinyRenderedComponent = renderComponent(
-      ErrorRep.rep, {object: stub, mode: MODE.TINY});
-    is(tinyRenderedComponent.textContent,
-      "Error",
-      "Error Rep has expected text content for an error without stacktrace in tiny mode");
-  }
-
-  function testEvalError() {
-    // Test object = `new EvalError("EvalError message")`
-    const stub = getGripStub("testEvalError");
-    is(getRep(stub), ErrorRep.rep,
-      `Rep correctly selects Error Rep for EvalError object`);
-
-    const renderedComponent = renderComponent(ErrorRep.rep, {object: stub});
-    is(renderedComponent.textContent,
-      "EvalError: EvalError message\n" +
-      "Stack trace:\n" +
-      "@debugger eval code:10:13\n",
-      "Error Rep has expected text content for an EvalError");
-
-    const tinyRenderedComponent = renderComponent(
-      ErrorRep.rep, {object: stub, mode: MODE.TINY});
-    is(tinyRenderedComponent.textContent,
-      "EvalError",
-      "Error Rep has expected text content for an EvalError in tiny mode");
-  }
-
-  function testInternalError() {
-    // Test object = `new InternalError("InternalError message")`
-    const stub = getGripStub("testInternalError");
-    is(getRep(stub), ErrorRep.rep,
-      `Rep correctly selects Error Rep for InternalError object`);
-
-    const renderedComponent = renderComponent(ErrorRep.rep, {object: stub});
-    is(renderedComponent.textContent,
-      "InternalError: InternalError message\n" +
-      "Stack trace:\n" +
-      "@debugger eval code:11:13\n",
-      "Error Rep has expected text content for an InternalError");
-
-    const tinyRenderedComponent = renderComponent(
-      ErrorRep.rep, {object: stub, mode: MODE.TINY});
-    is(tinyRenderedComponent.textContent,
-      "InternalError",
-      "Error Rep has expected text content for an InternalError in tiny mode");
-  }
-
-  function testRangeError() {
-    // Test object = `new RangeError("RangeError message")`
-    const stub = getGripStub("testRangeError");
-    is(getRep(stub), ErrorRep.rep,
-      `Rep correctly selects Error Rep for RangeError object`);
-
-    const renderedComponent = renderComponent(ErrorRep.rep, {object: stub});
-    is(renderedComponent.textContent,
-      "RangeError: RangeError message\n" +
-      "Stack trace:\n" +
-      "@debugger eval code:12:13\n",
-      "Error Rep has expected text content for RangeError");
-
-    const tinyRenderedComponent = renderComponent(
-      ErrorRep.rep, {object: stub, mode: MODE.TINY});
-    is(tinyRenderedComponent.textContent,
-      "RangeError",
-      "Error Rep has expected text content for RangeError in tiny mode");
-  }
-
-  function testReferenceError() {
-    // Test object = `new ReferenceError("ReferenceError message"`
-    const stub = getGripStub("testReferenceError");
-    is(getRep(stub), ErrorRep.rep,
-      `Rep correctly selects Error Rep for ReferenceError object`);
-
-    const renderedComponent = renderComponent(ErrorRep.rep, {object: stub});
-    is(renderedComponent.textContent,
-      "ReferenceError: ReferenceError message\n" +
-      "Stack trace:\n" +
-      "@debugger eval code:13:13\n",
-      "Error Rep has expected text content for ReferenceError");
-
-    const tinyRenderedComponent = renderComponent(
-      ErrorRep.rep, {object: stub, mode: MODE.TINY});
-    is(tinyRenderedComponent.textContent,
-      "ReferenceError",
-      "Error Rep has expected text content for ReferenceError in tiny mode");
-  }
-
-  function testSyntaxError() {
-    // Test object = `new SyntaxError("SyntaxError message"`
-    const stub = getGripStub("testSyntaxError");
-    is(getRep(stub), ErrorRep.rep,
-      `Rep correctly selects Error Rep for SyntaxError object`);
-
-    const renderedComponent = renderComponent(ErrorRep.rep, {object: stub});
-    is(renderedComponent.textContent,
-      "SyntaxError: SyntaxError message\n" +
-      "Stack trace:\n" +
-      "@debugger eval code:14:13\n",
-      "Error Rep has expected text content for SyntaxError");
-
-    const tinyRenderedComponent = renderComponent(
-      ErrorRep.rep, {object: stub, mode: MODE.TINY});
-    is(tinyRenderedComponent.textContent,
-      "SyntaxError",
-      "SyntaxError Rep has expected text content for SyntaxError in tiny mode");
-  }
-
-  function testTypeError() {
-    // Test object = `new TypeError("TypeError message"`
-    const stub = getGripStub("testTypeError");
-    is(getRep(stub), ErrorRep.rep,
-      `Rep correctly selects Error Rep for TypeError`);
-
-    const renderedComponent = renderComponent(ErrorRep.rep, {object: stub});
-    is(renderedComponent.textContent,
-      "TypeError: TypeError message\n" +
-      "Stack trace:\n" +
-      "@debugger eval code:15:13\n",
-      "Error Rep has expected text content for TypeError");
-
-    const tinyRenderedComponent = renderComponent(
-      ErrorRep.rep, {object: stub, mode: MODE.TINY});
-    is(tinyRenderedComponent.textContent,
-      "TypeError",
-      "Error Rep has expected text content for a TypeError in tiny mode");
-  }
-
-  function testURIError() {
-    // Test object = `new URIError("URIError message")`
-    const stub = getGripStub("testURIError");
-    is(getRep(stub), ErrorRep.rep,
-      `Rep correctly selects Error Rep for URIError object`);
-
-    const renderedComponent = renderComponent(ErrorRep.rep, {object: stub});
-    is(renderedComponent.textContent,
-      "URIError: URIError message\n" +
-      "Stack trace:\n" +
-      "@debugger eval code:16:13\n",
-      "Error Rep has expected text content for URIError");
-
-    const tinyRenderedComponent = renderComponent(
-      ErrorRep.rep, {object: stub, mode: MODE.TINY});
-    is(tinyRenderedComponent.textContent,
-      "URIError",
-      "Error Rep has expected text content for URIError in tiny mode");
-  }
-
-  function testObjectLink() {
-    // Test object = `new Error("Error message")`
-    const stub = getGripStub("testSimpleError");
-
-    const renderedComponent = renderComponent(ErrorRep.rep, {
-      object: stub,
-      objectLink: (props, ...children) => React.DOM.span({},
-        "*", ...children, "*"),
-    });
-    is(renderedComponent.textContent,
-      "*Error: Error message\n" +
-      "Stack trace:\n" +
-      "@debugger eval code:1:13\n*",
-      "Error Rep has expected text content when an objectLink is passed as a prop");
-
-    const tinyRenderedComponent = renderComponent(
-      ErrorRep.rep, {
-        object: stub,
-        mode: MODE.TINY,
-        objectLink: (props, ...children) => React.DOM.span({},
-          "*", ...children, "*"),
-      });
-    is(tinyRenderedComponent.textContent,
-      "*Error*",
-      "Error Rep has expected text content in tiny mode when an objectLink is passed " +
-      "as a prop");
-  }
-
-  function getGripStub(name) {
-    switch (name) {
-      case "testSimpleError":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj1020",
-          "class": "Error",
-          "ownPropertyLength": 4,
-          "preview": {
-            "kind": "Error",
-            "name": "Error",
-            "message": "Error message",
-            "stack": "@debugger eval code:1:13\n",
-            "fileName": "debugger eval code",
-            "lineNumber": 1,
-            "columnNumber": 13
-          }
-        };
-      case "testMultilineStackError":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj1021",
-          "class": "Error",
-          "ownPropertyLength": 4,
-          "preview": {
-            "kind": "Error",
-            "name": "Error",
-            "message": "bar",
-            "stack": "errorBar@debugger eval code:6:15\n" +
-                     "errorFoo@debugger eval code:3:3\n" +
-                     "@debugger eval code:8:1\n",
-            "fileName": "debugger eval code",
-            "lineNumber": 6,
-            "columnNumber": 15
-          }
-        };
-      case "testErrorWithoutStacktrace":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj1020",
-          "class": "Error",
-          "ownPropertyLength": 4,
-          "preview": {
-            "kind": "Error",
-            "name": "Error",
-            "message": "Error message",
-          }
-        };
-      case "testEvalError":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj1022",
-          "class": "Error",
-          "ownPropertyLength": 4,
-          "preview": {
-            "kind": "Error",
-            "name": "EvalError",
-            "message": "EvalError message",
-            "stack": "@debugger eval code:10:13\n",
-            "fileName": "debugger eval code",
-            "lineNumber": 10,
-            "columnNumber": 13
-          }
-        };
-      case "testInternalError":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj1023",
-          "class": "Error",
-          "ownPropertyLength": 4,
-          "preview": {
-            "kind": "Error",
-            "name": "InternalError",
-            "message": "InternalError message",
-            "stack": "@debugger eval code:11:13\n",
-            "fileName": "debugger eval code",
-            "lineNumber": 11,
-            "columnNumber": 13
-          }
-        };
-      case "testRangeError":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj1024",
-          "class": "Error",
-          "ownPropertyLength": 4,
-          "preview": {
-            "kind": "Error",
-            "name": "RangeError",
-            "message": "RangeError message",
-            "stack": "@debugger eval code:12:13\n",
-            "fileName": "debugger eval code",
-            "lineNumber": 12,
-            "columnNumber": 13
-          }
-        };
-      case "testReferenceError":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj1025",
-          "class": "Error",
-          "ownPropertyLength": 4,
-          "preview": {
-            "kind": "Error",
-            "name": "ReferenceError",
-            "message": "ReferenceError message",
-            "stack": "@debugger eval code:13:13\n",
-            "fileName": "debugger eval code",
-            "lineNumber": 13,
-            "columnNumber": 13
-          }
-        };
-      case "testSyntaxError":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj1026",
-          "class": "Error",
-          "ownPropertyLength": 4,
-          "preview": {
-            "kind": "Error",
-            "name": "SyntaxError",
-            "message": "SyntaxError message",
-            "stack": "@debugger eval code:14:13\n",
-            "fileName": "debugger eval code",
-            "lineNumber": 14,
-            "columnNumber": 13
-          }
-        };
-      case "testTypeError":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj1027",
-          "class": "Error",
-          "ownPropertyLength": 4,
-          "preview": {
-            "kind": "Error",
-            "name": "TypeError",
-            "message": "TypeError message",
-            "stack": "@debugger eval code:15:13\n",
-            "fileName": "debugger eval code",
-            "lineNumber": 15,
-            "columnNumber": 13
-          }
-        };
-      case "testURIError":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj1028",
-          "class": "Error",
-          "ownPropertyLength": 4,
-          "preview": {
-            "kind": "Error",
-            "name": "URIError",
-            "message": "URIError message",
-            "stack": "@debugger eval code:16:13\n",
-            "fileName": "debugger eval code",
-            "lineNumber": 16,
-            "columnNumber": 13
-          }
-        };
-    }
-
-    return null;
-  }
-});
-</script>
-</pre>
-</body>
-</html>
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_event.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_event.html
deleted file mode 100644
index c79515e37985..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_event.html
+++ /dev/null
@@ -1,490 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test Event rep
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep test - Event</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-window.onload = Task.async(function* () {
-  const {
-    REPS,
-    MODE,
-    getRep,
-    getSelectableInInspectorGrips,
-  } = browserRequire("devtools/client/shared/components/reps/reps");
-  let { Event } = REPS;
-
-  try {
-    // Test that correct rep is chosen
-    is(getRep(getGripStub("testEvent")), Event.rep, "Rep correctly selects Event Rep");
-
-    yield testEvent();
-    yield testMouseEvent();
-    yield testKeyboardEvent();
-    yield testKeyboardEventWithModifiers();
-    yield testMessageEvent();
-
-    yield testOnDomNodeMouseOver();
-    yield testOnDomNodeMouseOut();
-    yield testOnDomNodeInspectIconClick();
-
-    yield testObjectLink();
-  } catch (e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-
-  function testEvent() {
-    const renderedComponent = renderComponent(Event.rep, {
-      object: getGripStub("testEvent"),
-    });
-    is(renderedComponent.textContent,
-      "beforeprint { target: Window, isTrusted: true, " +
-      "currentTarget: Window, 8 more… }",
-      "Event rep has expected text content for an event");
-  }
-
-  function testMouseEvent() {
-    const renderedComponent = renderComponent(Event.rep, {
-      object: getGripStub("testMouseEvent")
-    });
-    is(renderedComponent.textContent,
-      "click { target: div#test, clientX: 62, clientY: 18, 3 more… }",
-      "Event rep has expected text content for a mouse event");
-
-    const longRenderedComponent = renderComponent(Event.rep, {
-      object: getGripStub("testMouseEvent"),
-      mode: MODE.LONG,
-    });
-    is(longRenderedComponent.textContent,
-      "click { target: div#test, buttons: 0, clientX: 62, clientY: 18, layerX: 0, " +
-      "layerY: 0 }",
-      "Event rep has expected text content for a mouse event in long mode");
-  }
-
-  function testKeyboardEvent() {
-    const renderedComponent = renderComponent(Event.rep, {
-      object: getGripStub("testKeyboardEvent")
-    });
-    is(renderedComponent.textContent,
-       "keyup { target: body, key: \"Control\", charCode: 0, 1 more… }",
-       "Event rep has expected text content for a keyboard event");
-
-    const longRenderedComponent = renderComponent(Event.rep, {
-      object: getGripStub("testKeyboardEvent"),
-      mode: MODE.LONG,
-    });
-    is(longRenderedComponent.textContent,
-       `keyup { target: body, key: "Control", charCode: 0, keyCode: 17 }`,
-       "Event rep has expected text content for a keyboard event in long mode");
-  }
-
-  function testKeyboardEventWithModifiers() {
-    const renderedComponent = renderComponent(Event.rep, {
-      object: getGripStub("testKeyboardEventWithModifiers"),
-      mode: MODE.LONG,
-    });
-
-    is(renderedComponent.textContent,
-       `keyup Meta-Shift { target: body, key: "M", charCode: 0, keyCode: 77 }`,
-       "Event rep has expected text content for a keyboard event with modifiers " +
-       "in long mode");
-  }
-
-  function testMessageEvent() {
-    const renderedComponent = renderComponent(Event.rep, {
-      object: getGripStub("testMessageEvent")
-    });
-    is(renderedComponent.textContent,
-       `message { target: Window, isTrusted: false, data: "test data", ` +
-       "8 more… }",
-       "Event rep has expected text content for a message event");
-
-    const longRenderedComponent = renderComponent(Event.rep, {
-      object: getGripStub("testMessageEvent"),
-      mode: MODE.LONG,
-    });
-    is(longRenderedComponent.textContent,
-       `message { target: Window, isTrusted: false, data: "test data", ` +
-       `origin: "null", lastEventId: "", source: Window, ports: Array, ` +
-       `currentTarget: Window, eventPhase: 2, bubbles: false, 1 more… }`,
-       "Event rep has expected text content for a message event in long mode");
-  }
-
-  function testOnDomNodeMouseOver() {
-    const stub = getGripStub("testMouseEvent");
-    const grips = getSelectableInInspectorGrips(stub);
-
-    is(grips.length, 1, "the stub has one node grip");
-
-    let mouseOverValue;
-    let onDOMNodeMouseOver = (object) => {
-      mouseOverValue = object;
-    };
-    const renderedComponent = renderComponent(Event.rep, {
-      object: stub,
-      onDOMNodeMouseOver,
-    });
-
-    const node = renderedComponent.querySelector(".objectBox-node");
-    TestUtils.Simulate.mouseOver(node);
-
-    is(mouseOverValue, grips[0], "onDOMNodeMouseOver is called with " +
-      "the expected argument when mouseover is fired on the Rep");
-  }
-
-  function testOnDomNodeMouseOut() {
-    const stub = getGripStub("testMouseEvent");
-    const grips = getSelectableInInspectorGrips(stub);
-    is(grips.length, 1, "the stub has one node grip");
-
-    let called = false;
-    let onDOMNodeMouseOut = (object) => {
-      called = true;
-    };
-    const renderedComponent = renderComponent(Event.rep, {
-      object: stub,
-      onDOMNodeMouseOut,
-    });
-
-    const node = renderedComponent.querySelector(".objectBox-node");
-    TestUtils.Simulate.mouseOut(node);
-
-    is(called, true, "onDOMNodeMouseOut is called when mouseout is fired on the Rep");
-  }
-
-  function testOnDomNodeInspectIconClick() {
-    const stub = getGripStub("testMouseEvent");
-    const grips = getSelectableInInspectorGrips(stub);
-    is(grips.length, 1, "the stub has one node grip");
-
-    let inspectIconClickedValue = null;
-    let onInspectIconClick = (object) => {
-      inspectIconClickedValue = object;
-    };
-
-    const renderedComponent = renderComponent(Event.rep, {
-      object: stub,
-      onInspectIconClick,
-    });
-
-    const icon = renderedComponent.querySelector(".open-inspector");
-    ok(icon !== null,
-      "There is an inspect icon when the node is connected to the DOM tree");
-
-    TestUtils.Simulate.click(icon);
-
-    is(inspectIconClickedValue, grips[0],
-      "onInspectIconClick is called with the expected argument " +
-      "when the inspect icon is clicked");
-  }
-
-  function testObjectLink() {
-    const renderedComponent = renderComponent(Event.rep, {
-      object: getGripStub("testMouseEvent"),
-      objectLink: (props, ...children) => React.DOM.span({},
-        "*", ...children, "*"),
-    });
-    is(renderedComponent.textContent,
-      "*click** { *target: div#test, clientX: 62, clientY: 18, *3 more…** }*",
-      "Event rep has expected text content when an objectLink is passed as a prop");
-
-    const longRenderedComponent = renderComponent(Event.rep, {
-      object: getGripStub("testMouseEvent"),
-      mode: MODE.LONG,
-      objectLink: (props, ...children) => React.DOM.span({},
-        "*", ...children, "*"),
-    });
-    is(longRenderedComponent.textContent,
-      "*click** { *target: div#test, buttons: 0, clientX: 62, clientY: 18, layerX: 0, " +
-      "layerY: 0* }*",
-      "Event rep has expected text content in long mode when an objectLink is passed " +
-      "as a prop");
-  }
-
-  function getGripStub(name) {
-    switch (name) {
-      case "testEvent":
-        return {
-          "type": "object",
-          "class": "Event",
-          "actor": "server1.conn23.obj35",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 1,
-          "preview": {
-            "kind": "DOMEvent",
-            "type": "beforeprint",
-            "properties": {
-              "isTrusted": true,
-              "currentTarget": {
-                "type": "object",
-                "class": "Window",
-                "actor": "server1.conn23.obj37",
-                "extensible": true,
-                "frozen": false,
-                "sealed": false,
-                "ownPropertyLength": 760,
-                "preview": {
-                  "kind": "ObjectWithURL",
-                  "url": "http://example.com"
-                }
-              },
-              "eventPhase": 2,
-              "bubbles": false,
-              "cancelable": false,
-              "defaultPrevented": false,
-              "timeStamp": 1466780008434005,
-              "originalTarget": {
-                "type": "object",
-                "class": "Window",
-                "actor": "server1.conn23.obj38",
-                "extensible": true,
-                "frozen": false,
-                "sealed": false,
-                "ownPropertyLength": 760,
-                "preview": {
-                  "kind": "ObjectWithURL",
-                  "url": "http://example.com"
-                }
-              },
-              "explicitOriginalTarget": {
-                "type": "object",
-                "class": "Window",
-                "actor": "server1.conn23.obj39",
-                "extensible": true,
-                "frozen": false,
-                "sealed": false,
-                "ownPropertyLength": 760,
-                "preview": {
-                  "kind": "ObjectWithURL",
-                  "url": "http://example.com"
-                }
-              },
-              "NONE": 0
-            },
-            "target": {
-              "type": "object",
-              "class": "Window",
-              "actor": "server1.conn23.obj36",
-              "extensible": true,
-              "frozen": false,
-              "sealed": false,
-              "ownPropertyLength": 760,
-              "preview": {
-                "kind": "ObjectWithURL",
-                "url": "http://example.com"
-              }
-            }
-          }
-        };
-
-      case "testMouseEvent":
-        return {
-          "type": "object",
-          "class": "MouseEvent",
-          "actor": "server1.conn20.obj39",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 1,
-          "preview": {
-            "kind": "DOMEvent",
-            "type": "click",
-            "properties": {
-              "buttons": 0,
-              "clientX": 62,
-              "clientY": 18,
-              "layerX": 0,
-              "layerY": 0
-            },
-            "target": {
-              "type": "object",
-              "class": "HTMLDivElement",
-              "actor": "server1.conn20.obj40",
-              "extensible": true,
-              "frozen": false,
-              "sealed": false,
-              "ownPropertyLength": 0,
-              "preview": {
-                "kind": "DOMNode",
-                "nodeType": 1,
-                "nodeName": "div",
-                "isConnected": true,
-                "attributes": {
-                  "id": "test"
-                },
-                "attributesLength": 1
-              }
-            }
-          }
-        };
-
-      case "testKeyboardEvent":
-        return {
-          "type": "object",
-          "class": "KeyboardEvent",
-          "actor": "server1.conn21.obj49",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 1,
-          "preview": {
-            "kind": "DOMEvent",
-            "type": "keyup",
-            "properties": {
-              "key": "Control",
-              "charCode": 0,
-              "keyCode": 17
-            },
-            "target": {
-              "type": "object",
-              "class": "HTMLBodyElement",
-              "actor": "server1.conn21.obj50",
-              "extensible": true,
-              "frozen": false,
-              "sealed": false,
-              "ownPropertyLength": 0,
-              "preview": {
-                "kind": "DOMNode",
-                "nodeType": 1,
-                "nodeName": "body",
-                "attributes": {},
-                "attributesLength": 0
-              }
-            },
-            "eventKind": "key",
-            "modifiers": []
-          }
-        };
-
-      case "testKeyboardEventWithModifiers":
-        return {
-          "type": "object",
-          "class": "KeyboardEvent",
-          "actor": "server1.conn21.obj49",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 1,
-          "preview": {
-            "kind": "DOMEvent",
-            "type": "keyup",
-            "properties": {
-              "key": "M",
-              "charCode": 0,
-              "keyCode": 77
-            },
-            "target": {
-              "type": "object",
-              "class": "HTMLBodyElement",
-              "actor": "server1.conn21.obj50",
-              "extensible": true,
-              "frozen": false,
-              "sealed": false,
-              "ownPropertyLength": 0,
-              "preview": {
-                "kind": "DOMNode",
-                "nodeType": 1,
-                "nodeName": "body",
-                "attributes": {},
-                "attributesLength": 0
-              }
-            },
-            "eventKind": "key",
-            "modifiers": ["Meta", "Shift"]
-          }
-        };
-
-      case "testMessageEvent":
-        return {
-          "type": "object",
-          "class": "MessageEvent",
-          "actor": "server1.conn3.obj34",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 1,
-          "preview": {
-            "kind": "DOMEvent",
-            "type": "message",
-            "properties": {
-              "isTrusted": false,
-              "data": "test data",
-              "origin": "null",
-              "lastEventId": "",
-              "source": {
-                "type": "object",
-                "class": "Window",
-                "actor": "server1.conn3.obj36",
-                "extensible": true,
-                "frozen": false,
-                "sealed": false,
-                "ownPropertyLength": 760,
-                "preview": {
-                  "kind": "ObjectWithURL",
-                  "url": ""
-                }
-              },
-              "ports": {
-                "type": "object",
-                "class": "Array",
-                "actor": "server1.conn3.obj37",
-                "extensible": true,
-                "frozen": false,
-                "sealed": false,
-                "ownPropertyLength": 0
-              },
-              "currentTarget": {
-                "type": "object",
-                "class": "Window",
-                "actor": "server1.conn3.obj38",
-                "extensible": true,
-                "frozen": false,
-                "sealed": false,
-                "ownPropertyLength": 760,
-                "preview": {
-                  "kind": "ObjectWithURL",
-                  "url": ""
-                }
-              },
-              "eventPhase": 2,
-              "bubbles": false,
-              "cancelable": false
-            },
-            "target": {
-              "type": "object",
-              "class": "Window",
-              "actor": "server1.conn3.obj35",
-              "extensible": true,
-              "frozen": false,
-              "sealed": false,
-              "ownPropertyLength": 760,
-              "preview": {
-                "kind": "ObjectWithURL",
-                "url": "http://example.com"
-              }
-            }
-          }
-        };
-
-    }
-  }
-});
-</script>
-</pre>
-</body>
-</html>
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_failure.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_failure.html
deleted file mode 100644
index 0a730ae2a18b..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_failure.html
+++ /dev/null
@@ -1,61 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test fallback for rep rendering when a rep fails to render.
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep test - Failure</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-window.onload = Task.async(function* () {
-  try {
-    const {
-      REPS,
-      getRep,
-    } = browserRequire("devtools/client/shared/components/reps/reps");
-    let { ArrayRep, RegExp } = REPS;
-
-    // Force the RegExp rep to crash by creating RegExp grip that throws when accessing
-    // the displayString property
-    let gripStub = {
-      "type": "object",
-      "class": "RegExp",
-      "actor": "server1.conn22.obj39",
-      "extensible": true,
-      "frozen": false,
-      "sealed": false,
-      "ownPropertyLength": 1,
-      get displayString() {
-        throw new Error("failure");
-      }
-    };
-
-    // Test that correct rep is chosen.
-    is(getRep(gripStub), RegExp.rep, "Rep correctly selects RegExp Rep");
-
-    // Test fallback message is displayed when rendering bad rep directly.
-    let renderedComponent = renderComponent(RegExp.rep, { object: gripStub });
-    is(renderedComponent.textContent, "Invalid object", "Fallback rendering has expected text content");
-
-    // Test fallback message is displayed when bad rep is nested in another rep.
-    renderedComponent = renderComponent(ArrayRep.rep, { object: [1, gripStub, 2] });
-    is(renderedComponent.textContent, "[ 1, Invalid object, 2 ]", "Fallback rendering has expected text content");
-  } catch(e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-});
-</script>
-</pre>
-</body>
-</html>
\ No newline at end of file
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_function.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_function.html
deleted file mode 100644
index 1f85be6fba2f..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_function.html
+++ /dev/null
@@ -1,417 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test Func rep
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep test - Func</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-window.onload = Task.async(function* () {
-  const {
-    REPS,
-    MODE,
-    getRep,
-   } = browserRequire("devtools/client/shared/components/reps/reps");
-  let { Func } = REPS;
-
-  const componentUnderTest = Func;
-
-  try {
-    // Test that correct rep is chosen
-    const gripStub = getGripStub("testNamed");
-    is(getRep(gripStub), Func.rep, "Rep correctly selects Func Rep");
-
-    yield testNamed();
-    yield testVarNamed();
-    yield testAnon();
-    yield testLongName();
-    yield testAsyncFunction();
-    yield testAnonAsyncFunction();
-    yield testGeneratorFunction();
-    yield testAnonGeneratorFunction();
-    yield testObjectLink();
-  } catch(e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-
-  function testNamed() {
-    // Test declaration: `function testName() { let innerVar = "foo" }`
-    const testName = "testNamed";
-
-    const defaultOutput = "function testName()";
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testUserNamed() {
-    // Test declaration: `function testName() { let innerVar = "foo" }`
-    const testName = "testUserNamed";
-
-    const defaultOutput = "function testUserName()";
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testVarNamed() {
-    // Test declaration: `let testVarName = function() { }`
-    const testName = "testVarNamed";
-
-    const defaultOutput = "function testVarName()";
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testAnon() {
-    // Test declaration: `() => {}`
-    const testName = "testAnon";
-
-    const defaultOutput = "function ()";
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testLongName() {
-    // Test declaration: `let f = function loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong() { }`
-    const testName = "testLongName";
-
-    const defaultOutput = "function looooooooooooooooooooooooooooooooooooooooooooooooo\u2026ooooooooooooooooooooooooooooooooooooooooooooong()";
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testAsyncFunction() {
-    const testName = "testAsyncFunction";
-
-    const defaultOutput = "async function waitUntil2017()";
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testAnonAsyncFunction() {
-    const testName = "testAnonAsyncFunction";
-
-    const defaultOutput = "async function ()";
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testGeneratorFunction() {
-    const testName = "testGeneratorFunction";
-
-    const defaultOutput = "function* fib()";
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testAnonGeneratorFunction() {
-    const testName = "testAnonGeneratorFunction";
-
-    const defaultOutput = "function* ()";
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testObjectLink() {
-    // Test declaration: `function testName() { let innerVar = "foo" }`
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: "*function *testName()",
-      }
-    ];
-
-    testRepRenderModes(
-      modeTests,
-      "testObjectLink",
-      componentUnderTest,
-      getGripStub("testNamed"),
-      {
-        objectLink: (props, ...children) => React.DOM.span({},
-          "*", ...children, "*"),
-      }
-    );
-  }
-
-  function getGripStub(functionName) {
-    switch (functionName) {
-      case "testNamed":
-        return {
-          "type": "object",
-          "class": "Function",
-          "actor": "server1.conn6.obj35",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "isAsync": false,
-          "isGenerator": false,
-          "name": "testName",
-          "displayName": "testName",
-          "location": {
-            "url": "debugger eval code",
-            "line": 1
-          }
-        };
-
-      case "testUserNamed":
-        return {
-          "type": "object",
-          "class": "Function",
-          "actor": "server1.conn6.obj35",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "isAsync": false,
-          "isGenerator": false,
-          "name": "testName",
-          "userDisplayName": "testUserName",
-          "displayName": "testName",
-          "location": {
-            "url": "debugger eval code",
-            "line": 1
-          }
-        };
-
-      case "testVarNamed":
-        return {
-          "type": "object",
-          "class": "Function",
-          "actor": "server1.conn7.obj41",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "isAsync": false,
-          "isGenerator": false,
-          "displayName": "testVarName",
-          "location": {
-            "url": "debugger eval code",
-            "line": 1
-          }
-        };
-
-      case "testAnon":
-        return {
-          "type": "object",
-          "class": "Function",
-          "actor": "server1.conn7.obj45",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "isAsync": false,
-          "isGenerator": false,
-          "location": {
-            "url": "debugger eval code",
-            "line": 1
-          }
-        };
-
-      case "testLongName":
-        return {
-          "type": "object",
-          "class": "Function",
-          "actor": "server1.conn7.obj67",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "isAsync": false,
-          "isGenerator": false,
-          "name": "loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong",
-          "displayName": "loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong",
-          "location": {
-            "url": "debugger eval code",
-            "line": 1
-          }
-        };
-
-      case "testAsyncFunction":
-        return {
-          "type": "object",
-          "class": "Function",
-          "actor": "server1.conn7.obj45",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "isAsync": true,
-          "isGenerator": false,
-          "name": "waitUntil2017",
-          "displayName": "waitUntil2017",
-          "location": {
-            "url": "debugger eval code",
-            "line": 1
-          }
-        };
-
-      case "testAnonAsyncFunction":
-        return {
-          "type": "object",
-          "class": "Function",
-          "actor": "server1.conn7.obj45",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "isAsync": true,
-          "isGenerator": false,
-          "location": {
-            "url": "debugger eval code",
-            "line": 1
-          }
-        };
-
-      case "testGeneratorFunction":
-        return {
-          "type": "object",
-          "class": "Function",
-          "actor": "server1.conn7.obj45",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "isAsync": false,
-          "isGenerator": true,
-          "name": "fib",
-          "displayName": "fib",
-          "location": {
-            "url": "debugger eval code",
-            "line": 1
-          }
-        };
-
-      case "testAnonGeneratorFunction":
-        return {
-          "type": "object",
-          "class": "Function",
-          "actor": "server1.conn7.obj45",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "isAsync": false,
-          "isGenerator": true,
-          "location": {
-            "url": "debugger eval code",
-            "line": 1
-          }
-        };
-    }
-  }
-});
-</script>
-</pre>
-</body>
-</html>
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_grip-array.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_grip-array.html
deleted file mode 100644
index d4458ab75bc6..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_grip-array.html
+++ /dev/null
@@ -1,1324 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test GripArray rep
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep test - GripArray</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-window.onload = Task.async(function* () {
-  const {
-    REPS,
-    MODE,
-    getRep,
-    getSelectableInInspectorGrips,
-  } = browserRequire("devtools/client/shared/components/reps/reps");
-  let { GripArray } = REPS;
-
-  let componentUnderTest = GripArray;
-  const maxLength = {
-    short: 3,
-    long: 10
-  };
-
-  try {
-    yield testBasic();
-
-    // Test property iterator
-    yield testMaxProps();
-    yield testMoreThanShortMaxProps();
-    yield testMoreThanLongMaxProps();
-    yield testRecursiveArray();
-    yield testPreviewLimit();
-    yield testEmptySlots();
-    yield testNamedNodeMap();
-    yield testNodeList();
-    yield testDocumentFragment();
-
-    yield testOnDomNodeMouseOver();
-    yield testOnDomNodeMouseOut();
-    yield testOnDomNodeInspectIconClick();
-
-    yield testObjectLink();
-  } catch (e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-
-  function testBasic() {
-    // Test array: `[]`
-    const testName = "testBasic";
-
-    // Test that correct rep is chosen
-    const gripStub = getGripStub("testBasic");
-    is(getRep(gripStub), GripArray.rep, "Rep correctly selects GripArray Rep");
-
-    // Test rendering
-    const defaultOutput = `Array []`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `[]`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testMaxProps() {
-    // Test array: `[1, "foo", {}]`;
-    const testName = "testMaxProps";
-
-    const defaultOutput = `Array [ 1, "foo", Object ]`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `[3]`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      },
-      {
-        // Check the custom title with nested objects to make sure nested objects are not
-        // displayed with their parent's title.
-        mode: MODE.LONG,
-        title: "CustomTitle",
-        expectedOutput: `CustomTitle [ 1, "foo", Object ]`,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testMoreThanShortMaxProps() {
-    // Test array = `["test string"…] //4 items`
-    const testName = "testMoreThanShortMaxProps";
-
-    const defaultOutput = `Array [ ${Array(maxLength.short).fill("\"test string\"").join(", ")}, 1 more… ]`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `[${maxLength.short + 1}]`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: `Array [ ${Array(maxLength.short + 1).fill("\"test string\"").join(", ")} ]`,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testMoreThanLongMaxProps() {
-    // Test array = `["test string"…] //301 items`
-    const testName = "testMoreThanLongMaxProps";
-
-    const defaultShortOutput = `Array [ ${Array(maxLength.short).fill("\"test string\"").join(", ")}, ${maxLength.long + 1 - maxLength.short} more… ]`;
-    const defaultLongOutput = `Array [ ${Array(maxLength.long).fill("\"test string\"").join(", ")}, 1 more… ]`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultShortOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `[${maxLength.long + 1}]`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultShortOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultLongOutput
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testRecursiveArray() {
-    // Test array = `let a = []; a = [a]`
-    const testName = "testRecursiveArray";
-
-    const defaultOutput = `Array [ [1] ]`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `[1]`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testPreviewLimit() {
-    const testName = "testPreviewLimit";
-
-    const shortOutput = `Array [ 0, 1, 2, 8 more… ]`;
-    const defaultOutput = `Array [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1 more… ]`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: shortOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `[11]`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: shortOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testEmptySlots() {
-    testRepRenderModes(
-      [{
-        mode: undefined,
-        expectedOutput: "Array [ <5 empty slots> ]",
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `[5]`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: "Array [ <5 empty slots> ]",
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: "Array [ <5 empty slots> ]",
-      }],
-      "Array with empty slots only",
-      componentUnderTest,
-      getGripStub("Array(5)")
-    );
-
-    testRepRenderModes(
-      [{
-        mode: undefined,
-        expectedOutput: "Array [ <1 empty slot>, 1, 2, 1 more… ]",
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `[4]`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: "Array [ <1 empty slot>, 1, 2, 1 more… ]",
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: "Array [ <1 empty slot>, 1, 2, 3 ]",
-      }],
-      "Array with one empty slot at the beginning",
-      componentUnderTest,
-      getGripStub("[,1,2,3]")
-    );
-
-    testRepRenderModes(
-      [{
-        mode: undefined,
-        expectedOutput: "Array [ <3 empty slots>, 3, 4, 1 more… ]",
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `[6]`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: "Array [ <3 empty slots>, 3, 4, 1 more… ]",
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: "Array [ <3 empty slots>, 3, 4, 5 ]",
-      }],
-      "Array with multiple consecutive empty slots at the beginning",
-      componentUnderTest,
-      getGripStub("[,,,3,4,5]")
-    );
-
-    testRepRenderModes(
-      [{
-        mode: undefined,
-        expectedOutput: "Array [ 0, 1, <1 empty slot>, 3 more… ]",
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `[6]`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: "Array [ 0, 1, <1 empty slot>, 3 more… ]",
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: "Array [ 0, 1, <1 empty slot>, 3, 4, 5 ]",
-      }],
-      "Array with one empty slot in the middle",
-      componentUnderTest,
-      getGripStub("[0,1,,3,4,5]")
-    );
-
-    testRepRenderModes(
-      [{
-        mode: undefined,
-        expectedOutput: "Array [ 0, 1, <3 empty slots>, 1 more… ]",
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `[6]`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: "Array [ 0, 1, <3 empty slots>, 1 more… ]",
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: "Array [ 0, 1, <3 empty slots>, 5 ]",
-      }],
-      "Array with multiple successive empty slots in the middle",
-      componentUnderTest,
-      getGripStub("[0,1,,,,5]")
-    );
-
-    testRepRenderModes(
-      [{
-        mode: undefined,
-        expectedOutput: "Array [ 0, <1 empty slot>, 2, 3 more… ]",
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `[6]`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: "Array [ 0, <1 empty slot>, 2, 3 more… ]",
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: "Array [ 0, <1 empty slot>, 2, <1 empty slot>, 4, 5 ]",
-      }],
-      "Array with multiple non successive single empty slots",
-      componentUnderTest,
-      getGripStub("[0,,2,,4,5]")
-    );
-
-    testRepRenderModes(
-      [{
-        mode: undefined,
-        expectedOutput: "Array [ 0, <2 empty slots>, 3, 5 more… ]",
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `[9]`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: "Array [ 0, <2 empty slots>, 3, 5 more… ]",
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: "Array [ 0, <2 empty slots>, 3, <3 empty slots>, 7, 8 ]",
-      }],
-      "Array with multiple multi-slot holes",
-      componentUnderTest,
-      getGripStub("[0,,,3,,,,7,8]")
-    );
-
-    testRepRenderModes(
-      [{
-        mode: undefined,
-        expectedOutput: "Array [ 0, 1, 2, 3 more… ]",
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `[6]`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: "Array [ 0, 1, 2, 3 more… ]",
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: "Array [ 0, 1, 2, 3, 4, <1 empty slot> ]",
-      }],
-      "Array with a single slot hole at the end",
-      componentUnderTest,
-      getGripStub("[0,1,2,3,4,,]")
-    );
-
-    testRepRenderModes(
-      [{
-        mode: undefined,
-        expectedOutput: "Array [ 0, 1, 2, 3 more… ]",
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `[6]`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: "Array [ 0, 1, 2, 3 more… ]",
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: "Array [ 0, 1, 2, <3 empty slots> ]",
-      }],
-      "Array with multiple consecutive empty slots at the end",
-      componentUnderTest,
-      getGripStub("[0,1,2,,,,]")
-    );
-  }
-
-  function testNamedNodeMap() {
-    const testName = "testNamedNodeMap";
-
-    const defaultOutput = `NamedNodeMap [ class="myclass", cellpadding="7", border="3" ]`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `[3]`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testNodeList() {
-    const testName = "testNodeList";
-    const defaultOutput = "NodeList [ button#btn-1.btn.btn-log, " +
-      "button#btn-2.btn.btn-err, button#btn-3.btn.btn-count ]";
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `[3]`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testDocumentFragment() {
-    const testName = "testDocumentFragment";
-
-    const defaultOutput = "DocumentFragment [ li#li-0.list-element, " +
-      "li#li-1.list-element, li#li-2.list-element, 2 more… ]";
-
-    const longOutput = "DocumentFragment [ " +
-      "li#li-0.list-element, li#li-1.list-element, li#li-2.list-element, " +
-      "li#li-3.list-element, li#li-4.list-element ]";
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `[5]`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: longOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testOnDomNodeMouseOver() {
-    const stub = getGripStub("testNodeList");
-    const grips = getSelectableInInspectorGrips(stub);
-
-    is(grips.length, 3, "the stub has three node grips");
-
-    let mouseOverValue;
-    let onDOMNodeMouseOver = (object) => {
-      mouseOverValue = object;
-    };
-    const renderedComponent = renderComponent(GripArray.rep, {
-      object: stub,
-      onDOMNodeMouseOver,
-    });
-
-    const nodes = renderedComponent.querySelectorAll(".objectBox-node");
-    is(nodes.length, 3, "There are three node elements");
-    nodes.forEach((node, index) => {
-      TestUtils.Simulate.mouseOver(node);
-
-      is(mouseOverValue, grips[index],
-        "onDOMNodeMouseOver is called with the expected argument " +
-        "when mouseover is fired on the Rep");
-    });
-  }
-
-  function testOnDomNodeMouseOut() {
-    const stub = getGripStub("testNodeList");
-    const grips = getSelectableInInspectorGrips(stub);
-
-    is(grips.length, 3, "the stub has three node grips");
-
-    let called = 0;
-    let onDOMNodeMouseOut = (object) => {
-      called++;
-    };
-    const renderedComponent = renderComponent(GripArray.rep, {
-      object: stub,
-      onDOMNodeMouseOut,
-    });
-
-    const nodes = renderedComponent.querySelectorAll(".objectBox-node");
-    info("Simulating mouseout on each node");
-    Array.from(nodes).forEach(node => TestUtils.Simulate.mouseOut(node));
-
-    is(called, 3, "onDOMNodeMouseOut is called when mouseout is fired on each NodeRep");
-  }
-
-  function testOnDomNodeInspectIconClick() {
-    let inspectIconClickedValue = null;
-    let onInspectIconClick = (object) => {
-      inspectIconClickedValue = object;
-    };
-
-    let renderedComponentWithoutInspectIcon = renderComponent(GripArray.rep, {
-      object: getGripStub("testDisconnectedNodeList"),
-      onInspectIconClick,
-    });
-    is(renderedComponentWithoutInspectIcon.querySelector(".open-inspector"), null,
-      "There isn't an inspect icon when the nodes are not connected to the DOM tree");
-
-    const stub = getGripStub("testNodeList");
-    const grips = getSelectableInInspectorGrips(stub);
-
-    is(grips.length, 3, "the stub has three node grips");
-    const renderedComponent = renderComponent(GripArray.rep, {
-      object: stub,
-      onInspectIconClick,
-    });
-
-    const icons = renderedComponent.querySelectorAll(".open-inspector");
-    is(icons.length, grips.length,
-      "There is an icon for each node connected to the DOM tree");
-
-    icons.forEach((icon, index) => {
-      TestUtils.Simulate.click(icon);
-
-      is(inspectIconClickedValue, grips[index],
-        "onInspectIconClick is called with the expected argument " +
-        "when the inspect icon is clicked");
-    });
-  }
-
-  function testObjectLink() {
-    // Test array = `["test string"…] //4 items`
-    const defaultOutput = `*Array **[ *${Array(maxLength.short).fill("\"test string\"").join(", ")}, *1 more…** ]*`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `*[*${maxLength.short + 1}*]*`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: `*Array **[ *${Array(maxLength.short + 1).fill("\"test string\"").join(", ")}* ]*`,
-      }
-    ];
-
-    testRepRenderModes(
-      modeTests,
-      "testObjectLink",
-      componentUnderTest,
-      getGripStub("testMoreThanShortMaxProps"),
-      {
-        objectLink: (props, ...children) => React.DOM.span({},
-          "*", ...children, "*"),
-      }
-    );
-  }
-
-  function getGripStub(functionName) {
-    switch (functionName) {
-      case "testBasic":
-        return {
-          "type": "object",
-          "class": "Array",
-          "actor": "server1.conn0.obj35",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 1,
-          "preview": {
-            "kind": "ArrayLike",
-            "length": 0,
-            "items": []
-          }
-        };
-
-      case "testMaxProps":
-        return {
-          "type": "object",
-          "class": "Array",
-          "actor": "server1.conn1.obj35",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 4,
-          "preview": {
-            "kind": "ArrayLike",
-            "length": 3,
-            "items": [
-              1,
-              "foo",
-              {
-                "type": "object",
-                "class": "Object",
-                "actor": "server1.conn1.obj36",
-                "extensible": true,
-                "frozen": false,
-                "sealed": false,
-                "ownPropertyLength": 0
-              }
-            ]
-          }
-        };
-
-      case "testMoreThanShortMaxProps":
-        let shortArrayGrip = {
-          "type": "object",
-          "class": "Array",
-          "actor": "server1.conn1.obj35",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 4,
-          "preview": {
-            "kind": "ArrayLike",
-            "length": maxLength.short + 1,
-            "items": []
-          }
-        };
-
-        // Generate array grip with length 4, which is more that the maximum
-        // limit in case of the 'short' mode.
-        for (let i = 0; i < maxLength.short + 1; i++) {
-          shortArrayGrip.preview.items.push("test string");
-        }
-
-        return shortArrayGrip;
-
-      case "testMoreThanLongMaxProps":
-        let longArrayGrip = {
-          "type": "object",
-          "class": "Array",
-          "actor": "server1.conn1.obj35",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 4,
-          "preview": {
-            "kind": "ArrayLike",
-            "length": maxLength.long + 1,
-            "items": []
-          }
-        };
-
-        // Generate array grip with length 301, which is more that the maximum
-        // limit in case of the 'long' mode.
-        for (let i = 0; i < maxLength.long + 1; i++) {
-          longArrayGrip.preview.items.push("test string");
-        }
-
-        return longArrayGrip;
-
-      case "testPreviewLimit":
-        return {
-          "type": "object",
-          "class": "Array",
-          "actor": "server1.conn1.obj31",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 12,
-          "preview": {
-            "kind": "ArrayLike",
-            "length": 11,
-            "items": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
-          }
-        };
-
-      case "testRecursiveArray":
-        return {
-          "type": "object",
-          "class": "Array",
-          "actor": "server1.conn3.obj42",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 2,
-          "preview": {
-            "kind": "ArrayLike",
-            "length": 1,
-            "items": [
-              {
-                "type": "object",
-                "class": "Array",
-                "actor": "server1.conn3.obj43",
-                "extensible": true,
-                "frozen": false,
-                "sealed": false,
-                "ownPropertyLength": 2,
-                "preview": {
-                  "kind": "ArrayLike",
-                  "length": 1
-                }
-              }
-            ]
-          }
-        };
-
-      case "testNamedNodeMap":
-        return {
-          "type": "object",
-          "class": "NamedNodeMap",
-          "actor": "server1.conn3.obj42",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 6,
-          "preview": {
-            "kind": "ArrayLike",
-            "length": 3,
-            "items": [
-              {
-                "type": "object",
-                "class": "Attr",
-                "actor": "server1.conn3.obj43",
-                "extensible": true,
-                "frozen": false,
-                "sealed": false,
-                "ownPropertyLength": 0,
-                "preview": {
-                  "kind": "DOMNode",
-                  "nodeType": 2,
-                  "nodeName": "class",
-                  "value": "myclass"
-                }
-              },
-              {
-                "type": "object",
-                "class": "Attr",
-                "actor": "server1.conn3.obj44",
-                "extensible": true,
-                "frozen": false,
-                "sealed": false,
-                "ownPropertyLength": 0,
-                "preview": {
-                  "kind": "DOMNode",
-                  "nodeType": 2,
-                  "nodeName": "cellpadding",
-                  "value": "7"
-                }
-              },
-              {
-                "type": "object",
-                "class": "Attr",
-                "actor": "server1.conn3.obj44",
-                "extensible": true,
-                "frozen": false,
-                "sealed": false,
-                "ownPropertyLength": 0,
-                "preview": {
-                  "kind": "DOMNode",
-                  "nodeType": 2,
-                  "nodeName": "border",
-                  "value": "3"
-                }
-              }
-            ]
-          }
-        };
-
-      case "testNodeList":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj51",
-          "class": "NodeList",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 3,
-          "preview": {
-            "kind": "ArrayLike",
-            "length": 3,
-            "items": [
-              {
-                "type": "object",
-                "actor": "server1.conn1.child1/obj52",
-                "class": "HTMLButtonElement",
-                "extensible": true,
-                "frozen": false,
-                "sealed": false,
-                "ownPropertyLength": 0,
-                "preview": {
-                  "kind": "DOMNode",
-                  "nodeType": 1,
-                  "nodeName": "button",
-                  "isConnected": true,
-                  "attributes": {
-                    "id": "btn-1",
-                    "class": "btn btn-log",
-                    "type": "button"
-                  },
-                  "attributesLength": 3
-                }
-              },
-              {
-                "type": "object",
-                "actor": "server1.conn1.child1/obj53",
-                "class": "HTMLButtonElement",
-                "extensible": true,
-                "frozen": false,
-                "sealed": false,
-                "ownPropertyLength": 0,
-                "preview": {
-                  "kind": "DOMNode",
-                  "nodeType": 1,
-                  "nodeName": "button",
-                  "isConnected": true,
-                  "attributes": {
-                    "id": "btn-2",
-                    "class": "btn btn-err",
-                    "type": "button"
-                  },
-                  "attributesLength": 3
-                }
-              },
-              {
-                "type": "object",
-                "actor": "server1.conn1.child1/obj54",
-                "class": "HTMLButtonElement",
-                "extensible": true,
-                "frozen": false,
-                "sealed": false,
-                "ownPropertyLength": 0,
-                "preview": {
-                  "kind": "DOMNode",
-                  "nodeType": 1,
-                  "nodeName": "button",
-                  "isConnected": true,
-                  "attributes": {
-                    "id": "btn-3",
-                    "class": "btn btn-count",
-                    "type": "button"
-                  },
-                  "attributesLength": 3
-                }
-              }
-            ]
-          }
-        };
-
-      case "testDisconnectedNodeList":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj51",
-          "class": "NodeList",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 3,
-          "preview": {
-            "kind": "ArrayLike",
-            "length": 3,
-            "items": [
-              {
-                "type": "object",
-                "actor": "server1.conn1.child1/obj52",
-                "class": "HTMLButtonElement",
-                "extensible": true,
-                "frozen": false,
-                "sealed": false,
-                "ownPropertyLength": 0,
-                "preview": {
-                  "kind": "DOMNode",
-                  "nodeType": 1,
-                  "nodeName": "button",
-                  "isConnected": false,
-                  "attributes": {
-                    "id": "btn-1",
-                    "class": "btn btn-log",
-                    "type": "button"
-                  },
-                  "attributesLength": 3
-                }
-              },
-              {
-                "type": "object",
-                "actor": "server1.conn1.child1/obj53",
-                "class": "HTMLButtonElement",
-                "extensible": true,
-                "frozen": false,
-                "sealed": false,
-                "ownPropertyLength": 0,
-                "preview": {
-                  "kind": "DOMNode",
-                  "nodeType": 1,
-                  "nodeName": "button",
-                  "isConnected": false,
-                  "attributes": {
-                    "id": "btn-2",
-                    "class": "btn btn-err",
-                    "type": "button"
-                  },
-                  "attributesLength": 3
-                }
-              },
-              {
-                "type": "object",
-                "actor": "server1.conn1.child1/obj54",
-                "class": "HTMLButtonElement",
-                "extensible": true,
-                "frozen": false,
-                "sealed": false,
-                "ownPropertyLength": 0,
-                "preview": {
-                  "kind": "DOMNode",
-                  "nodeType": 1,
-                  "nodeName": "button",
-                  "isConnected": false,
-                  "attributes": {
-                    "id": "btn-3",
-                    "class": "btn btn-count",
-                    "type": "button"
-                  },
-                  "attributesLength": 3
-                }
-              }
-            ]
-          }
-        };
-
-      case "testDocumentFragment":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj45",
-          "class": "DocumentFragment",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "DOMNode",
-            "nodeType": 11,
-            "nodeName": "#document-fragment",
-            "childNodesLength": 5,
-            "childNodes": [
-              {
-                "type": "object",
-                "actor": "server1.conn1.child1/obj46",
-                "class": "HTMLLIElement",
-                "extensible": true,
-                "frozen": false,
-                "sealed": false,
-                "ownPropertyLength": 0,
-                "preview": {
-                  "kind": "DOMNode",
-                  "nodeType": 1,
-                  "nodeName": "li",
-                  "attributes": {
-                    "id": "li-0",
-                    "class": "list-element"
-                  },
-                  "attributesLength": 2
-                }
-              },
-              {
-                "type": "object",
-                "actor": "server1.conn1.child1/obj47",
-                "class": "HTMLLIElement",
-                "extensible": true,
-                "frozen": false,
-                "sealed": false,
-                "ownPropertyLength": 0,
-                "preview": {
-                  "kind": "DOMNode",
-                  "nodeType": 1,
-                  "nodeName": "li",
-                  "attributes": {
-                    "id": "li-1",
-                    "class": "list-element"
-                  },
-                  "attributesLength": 2
-                }
-              },
-              {
-                "type": "object",
-                "actor": "server1.conn1.child1/obj48",
-                "class": "HTMLLIElement",
-                "extensible": true,
-                "frozen": false,
-                "sealed": false,
-                "ownPropertyLength": 0,
-                "preview": {
-                  "kind": "DOMNode",
-                  "nodeType": 1,
-                  "nodeName": "li",
-                  "attributes": {
-                    "id": "li-2",
-                    "class": "list-element"
-                  },
-                  "attributesLength": 2
-                }
-              },
-              {
-                "type": "object",
-                "actor": "server1.conn1.child1/obj49",
-                "class": "HTMLLIElement",
-                "extensible": true,
-                "frozen": false,
-                "sealed": false,
-                "ownPropertyLength": 0,
-                "preview": {
-                  "kind": "DOMNode",
-                  "nodeType": 1,
-                  "nodeName": "li",
-                  "attributes": {
-                    "id": "li-3",
-                    "class": "list-element"
-                  },
-                  "attributesLength": 2
-                }
-              },
-              {
-                "type": "object",
-                "actor": "server1.conn1.child1/obj50",
-                "class": "HTMLLIElement",
-                "extensible": true,
-                "frozen": false,
-                "sealed": false,
-                "ownPropertyLength": 0,
-                "preview": {
-                  "kind": "DOMNode",
-                  "nodeType": 1,
-                  "nodeName": "li",
-                  "attributes": {
-                    "id": "li-4",
-                    "class": "list-element"
-                  },
-                  "attributesLength": 2
-                }
-              }
-            ]
-          }
-        };
-      case "Array(5)" :
-        return {
-          "type": "object",
-          "actor": "server1.conn4.child1/obj33",
-          "class": "Array",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 1,
-          "preview": {
-            "kind": "ArrayLike",
-            "length": 5,
-            "items": [
-              null,
-              null,
-              null,
-              null,
-              null
-            ]
-          }
-        };
-      case "[,1,2,3]" :
-        return {
-          "type": "object",
-          "actor": "server1.conn4.child1/obj35",
-          "class": "Array",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 4,
-          "preview": {
-            "kind": "ArrayLike",
-            "length": 4,
-            "items": [
-              null,
-              1,
-              2,
-              3
-            ]
-          }
-        };
-      case "[,,,3,4,5]" :
-        return {
-          "type": "object",
-          "actor": "server1.conn4.child1/obj37",
-          "class": "Array",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 4,
-          "preview": {
-            "kind": "ArrayLike",
-            "length": 6,
-            "items": [
-              null,
-              null,
-              null,
-              3,
-              4,
-              5
-            ]
-          }
-        };
-      case "[0,1,,3,4,5]" :
-        return {
-          "type": "object",
-          "actor": "server1.conn4.child1/obj65",
-          "class": "Array",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 6,
-          "preview": {
-            "kind": "ArrayLike",
-            "length": 6,
-            "items": [
-              0,
-              1,
-              null,
-              3,
-              4,
-              5
-            ]
-          }
-        };
-      case "[0,1,,,,5]" :
-        return {
-          "type": "object",
-          "actor": "server1.conn4.child1/obj83",
-          "class": "Array",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 4,
-          "preview": {
-            "kind": "ArrayLike",
-            "length": 6,
-            "items": [
-              0,
-              1,
-              null,
-              null,
-              null,
-              5
-            ]
-          }
-        };
-      case "[0,,2,,4,5]" :
-        return {
-          "type": "object",
-          "actor": "server1.conn4.child1/obj85",
-          "class": "Array",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 5,
-          "preview": {
-            "kind": "ArrayLike",
-            "length": 6,
-            "items": [
-              0,
-              null,
-              2,
-              null,
-              4,
-              5
-            ]
-          }
-        };
-      case "[0,,,3,,,,7,8]" :
-        return {
-          "type": "object",
-          "actor": "server1.conn4.child1/obj87",
-          "class": "Array",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 5,
-          "preview": {
-            "kind": "ArrayLike",
-            "length": 9,
-            "items": [
-              0,
-              null,
-              null,
-              3,
-              null,
-              null,
-              null,
-              7,
-              8
-            ]
-          }
-        };
-      case "[0,1,2,3,4,,]" :
-        return {
-          "type": "object",
-          "actor": "server1.conn4.child1/obj89",
-          "class": "Array",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 6,
-          "preview": {
-            "kind": "ArrayLike",
-            "length": 6,
-            "items": [
-              0,
-              1,
-              2,
-              3,
-              4,
-              null
-            ]
-          }
-        };
-      case "[0,1,2,,,,]" :
-        return {
-          "type": "object",
-          "actor": "server1.conn13.child1/obj88",
-          "class": "Array",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 4,
-          "preview": {
-            "kind": "ArrayLike",
-            "length": 6,
-            "items": [
-              0,
-              1,
-              2,
-              null,
-              null,
-              null
-            ]
-          }
-        };
-    }
-    return null;
-  }
-});
-</script>
-</pre>
-</body>
-</html>
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_grip-map.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_grip-map.html
deleted file mode 100644
index f9c11d3130ba..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_grip-map.html
+++ /dev/null
@@ -1,859 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test GripMap rep
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep test - GripMap</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-"use strict";
-
-window.onload = Task.async(function* () {
-  const {
-    REPS,
-    MODE,
-    getRep,
-    getSelectableInInspectorGrips,
-  } = browserRequire("devtools/client/shared/components/reps/reps");
-  let { GripMap } = REPS;
-
-  const componentUnderTest = GripMap;
-
-  try {
-    yield testEmptyMap();
-    yield testSymbolKeyedMap();
-    yield testWeakMap();
-
-    // // Test entries iterator
-    yield testMaxEntries();
-    yield testMoreThanMaxEntries();
-    yield testUninterestingEntries();
-
-    yield testOnDomNodeMouseOver();
-    yield testOnDomNodeMouseOut();
-    yield testOnDomNodeInspectIconClick();
-
-    yield testObjectLink();
-  } catch (e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-
-  function testEmptyMap() {
-    // Test object: `new Map()`
-    const testName = "testEmptyMap";
-
-    // Test that correct rep is chosen
-    const gripStub = getGripStub("testEmptyMap");
-    is(getRep(gripStub), GripMap.rep, "Rep correctly selects GripMap Rep");
-
-    // Test rendering
-    const defaultOutput = `Map {  }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: "Map",
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testSymbolKeyedMap() {
-    // Test object:
-    // `new Map([[Symbol("a"), "value-a"], [Symbol("b"), "value-b"]])`
-    const testName = "testSymbolKeyedMap";
-
-    const defaultOutput = `Map { Symbol(a): "value-a", Symbol(b): "value-b" }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: "Map",
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testWeakMap() {
-    // Test object: `new WeakMap([[{a: "key-a"}, "value-a"]])`
-    const testName = "testWeakMap";
-
-    // Test that correct rep is chosen
-    const gripStub = getGripStub("testWeakMap");
-    is(getRep(gripStub), GripMap.rep, "Rep correctly selects GripMap Rep");
-
-    // Test rendering
-    const defaultOutput = `WeakMap { Object: "value-a" }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: "WeakMap",
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      },
-      {
-        // Check the custom title with nested objects to make sure nested objects are not
-        // displayed with their parent's title.
-        mode: MODE.LONG,
-        title: "CustomTitle",
-        expectedOutput: `CustomTitle { Object: "value-a" }`,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testMaxEntries() {
-    // Test object:
-    // `new Map([["key-a","value-a"], ["key-b","value-b"], ["key-c","value-c"]])`
-    const testName = "testMaxEntries";
-
-    const defaultOutput = `Map { "key-a": "value-a", "key-b": "value-b", "key-c": "value-c" }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: "Map",
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testMoreThanMaxEntries() {
-    // Test object = `new Map(
-    //   [["key-0", "value-0"], ["key-1", "value-1"]], …, ["key-100", "value-100"]]}`
-    const testName = "testMoreThanMaxEntries";
-
-    const defaultOutput =
-      `Map { "key-0": "value-0", "key-1": "value-1", "key-2": "value-2", 98 more… }`;
-
-    // Generate string with 101 entries, which is the max limit for 'long' mode.
-    let longString = Array.from({length: 10}).map((_, i) => `"key-${i}": "value-${i}"`);
-    const longOutput = `Map { ${longString.join(", ")}, 91 more… }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `Map`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: longOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testUninterestingEntries() {
-    // Test object:
-    // `new Map([["key-a",null], ["key-b",undefined], ["key-c","value-c"], ["key-d",4]])`
-    const testName = "testUninterestingEntries";
-
-    const defaultOutput =
-      `Map { "key-a": null, "key-c": "value-c", "key-d": 4, 1 more… }`;
-    const longOutput =
-      `Map { "key-a": null, "key-b": undefined, "key-c": "value-c", "key-d": 4 }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `Map`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: longOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testOnDomNodeMouseOver() {
-    const nodeValuedStub = getGripStub("testNodeValuedMap");
-    const nodeKeyedStub = getGripStub("testNodeKeyedMap");
-
-    const valuesGrips = getSelectableInInspectorGrips(nodeValuedStub);
-    is(valuesGrips.length, 3, "the stub has three node grips");
-
-    const keysGrips = getSelectableInInspectorGrips(nodeKeyedStub);
-    is(keysGrips.length, 3, "the stub has three node grips");
-
-    let mouseOverValue;
-    let onDOMNodeMouseOver = (object) => {
-      mouseOverValue = object;
-    };
-
-    info("Testing onDOMNodeMouseOver on node valued Map");
-    const nodeValuedRenderedComponent = renderComponent(GripMap.rep, {
-      object: nodeValuedStub,
-      onDOMNodeMouseOver,
-    });
-
-    let nodes = nodeValuedRenderedComponent.querySelectorAll(".objectBox-node");
-    nodes.forEach((node, index) => {
-      TestUtils.Simulate.mouseOver(node);
-      is(mouseOverValue, valuesGrips[index],
-        "onDOMNodeMouseOver is called with the expected argument " +
-        "when mouseover is fired on the Rep");
-    });
-
-    info("Testing onDOMNodeMouseOver on node keyed Map");
-    const nodeKeyedRenderedComponent = renderComponent(GripMap.rep, {
-      object: nodeKeyedStub,
-      onDOMNodeMouseOver,
-    });
-
-    nodes = nodeKeyedRenderedComponent.querySelectorAll(".objectBox-node");
-    nodes.forEach((node, index) => {
-      TestUtils.Simulate.mouseOver(node);
-      is(mouseOverValue, keysGrips[index],
-        "onDOMNodeMouseOver is called with the expected argument " +
-        "when mouseover is fired on the Rep");
-    });
-  }
-
-  function testOnDomNodeMouseOut() {
-    const nodeValuedStub = getGripStub("testNodeValuedMap");
-    const nodeKeyedStub = getGripStub("testNodeKeyedMap");
-
-    const valuesGrips = getSelectableInInspectorGrips(nodeValuedStub);
-    is(valuesGrips.length, 3, "the stub has three node grips");
-
-    const keysGrips = getSelectableInInspectorGrips(nodeKeyedStub);
-    is(keysGrips.length, 3, "the stub has three node grips");
-
-    let called = 0;
-    let onDOMNodeMouseOut = (object) => {
-      called++;
-    };
-
-    info("Testing onDOMNodeMouseOut on node valued Map");
-    const nodeValuedRenderedComponent = renderComponent(GripMap.rep, {
-      object: nodeValuedStub,
-      onDOMNodeMouseOut,
-    });
-
-    let nodes = nodeValuedRenderedComponent.querySelectorAll(".objectBox-node");
-    info("Simulating mouseout on each value node");
-    nodes.forEach((node, index) => TestUtils.Simulate.mouseOut(node));
-    is(called, 3,
-      "onDOMNodeMouseOut is called when mouseout is fired on each value NodeRep");
-
-    info("Testing onDOMNodeMouseOut on node keyed Map");
-    const nodeKeyedRenderedComponent = renderComponent(GripMap.rep, {
-      object: nodeKeyedStub,
-      onDOMNodeMouseOut,
-    });
-
-    nodes = nodeKeyedRenderedComponent.querySelectorAll(".objectBox-node");
-    // Resets counter
-    called = 0;
-    info("Simulating mouseout on each key node");
-    nodes.forEach((node, index) => TestUtils.Simulate.mouseOut(node));
-    is(called, 3,
-      "onDOMNodeMouseOut is called when mouseout is fired on each key NodeRep");
-  }
-
-  function testOnDomNodeInspectIconClick() {
-    const nodeValuedStub = getGripStub("testNodeValuedMap");
-    const nodeKeyedStub = getGripStub("testNodeKeyedMap");
-
-    const valuesGrips = getSelectableInInspectorGrips(nodeValuedStub);
-    is(valuesGrips.length, 3, "the stub has three node grips");
-
-    const keysGrips = getSelectableInInspectorGrips(nodeKeyedStub);
-    is(keysGrips.length, 3, "the stub has three node grips");
-
-    let inspectIconClickedValue = null;
-    let onInspectIconClick = (object) => {
-      inspectIconClickedValue = object;
-    };
-
-    const renderedComponentWithoutInspectIcon = renderComponent(GripMap.rep, {
-      object: getGripStub("testDisconnectedNodeValuedMap"),
-      onInspectIconClick,
-    });
-    is(renderedComponentWithoutInspectIcon.querySelector(".open-inspector"), null,
-      "There isn't an inspect icon when nodes are not connected to the DOM tree");
-
-    info("Testing onInspectIconClick on node valued Map");
-    const nodeValuedRenderedComponent = renderComponent(GripMap.rep, {
-      object: nodeValuedStub,
-      onInspectIconClick,
-    });
-
-    let icons = nodeValuedRenderedComponent.querySelectorAll(".open-inspector");
-    is(icons.length, valuesGrips.length,
-      "There is an icon for each node connected to the DOM tree");
-
-    icons.forEach((icon, index) => {
-      TestUtils.Simulate.click(icon);
-      is(inspectIconClickedValue, valuesGrips[index], "onInspectIconClick is called " +
-        "with the expected argument when the inspect icon is clicked");
-    });
-
-    info("Testing onInspectIconClick on node keyed Map");
-    const nodeKeyedRenderedComponent = renderComponent(GripMap.rep, {
-      object: nodeKeyedStub,
-      onInspectIconClick,
-    });
-
-    icons = nodeKeyedRenderedComponent.querySelectorAll(".open-inspector");
-    is(icons.length, keysGrips.length,
-      "There is an icon for each node connected to the DOM tree");
-
-    icons.forEach((icon, index) => {
-      TestUtils.Simulate.click(icon);
-      is(inspectIconClickedValue, keysGrips[index], "onInspectIconClick is called " +
-        "with the expected argument when the inspect icon is clicked");
-    });
-  }
-
-  function testObjectLink() {
-    // Test object:
-    // `new Map([["key-a",null], ["key-b",undefined], ["key-c","value-c"], ["key-d",4]])`
-    const defaultOutput =
-      `*Map** { *"key-a": null, "key-c": "value-c", "key-d": 4, *1 more…** }*`;
-    const longOutput =
-      `*Map** { *"key-a": null, "key-b": undefined, "key-c": "value-c", "key-d": 4* }*`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `*Map*`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: longOutput,
-      }
-    ];
-
-    testRepRenderModes(
-      modeTests,
-      "testObjectLink",
-      componentUnderTest,
-      getGripStub("testUninterestingEntries"),
-      {
-        objectLink: (props, ...children) => React.DOM.span({},
-          "*", ...children, "*"),
-      }
-    );
-  }
-
-  function getGripStub(functionName) {
-    switch (functionName) {
-      case "testEmptyMap":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj97",
-          "class": "Map",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "MapLike",
-            "size": 0,
-            "entries": []
-          }
-        };
-
-      case "testSymbolKeyedMap":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj118",
-          "class": "Map",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "MapLike",
-            "size": 2,
-            "entries": [
-              [
-                {
-                  "type": "symbol",
-                  "name": "a"
-                },
-                "value-a"
-              ],
-              [
-                {
-                  "type": "symbol",
-                  "name": "b"
-                },
-                "value-b"
-              ]
-            ]
-          }
-        };
-
-      case "testWeakMap":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj115",
-          "class": "WeakMap",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "MapLike",
-            "size": 1,
-            "entries": [
-              [
-                {
-                  "type": "object",
-                  "actor": "server1.conn1.child1/obj116",
-                  "class": "Object",
-                  "extensible": true,
-                  "frozen": false,
-                  "sealed": false,
-                  "ownPropertyLength": 1
-                },
-                "value-a"
-              ]
-            ]
-          }
-        };
-
-      case "testMaxEntries":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj109",
-          "class": "Map",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "MapLike",
-            "size": 3,
-            "entries": [
-              [
-                "key-a",
-                "value-a"
-              ],
-              [
-                "key-b",
-                "value-b"
-              ],
-              [
-                "key-c",
-                "value-c"
-              ]
-            ]
-          }
-        };
-
-      case "testMoreThanMaxEntries": {
-        let entryNb = 101;
-        return {
-          "type": "object",
-          "class": "Map",
-          "actor": "server1.conn0.obj332",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "MapLike",
-            "size": entryNb,
-            // Generate 101 entries, which is more that the maximum
-            // limit in case of the 'long' mode.
-            "entries": Array.from({length: entryNb}).map((_, i) => {
-              return [`key-${i}`, `value-${i}`];
-            })
-          }
-        };
-      }
-
-      case "testUninterestingEntries":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj111",
-          "class": "Map",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "MapLike",
-            "size": 4,
-            "entries": [
-              [
-                "key-a",
-                {
-                  "type": "null"
-                }
-              ],
-              [
-                "key-b",
-                {
-                  "type": "undefined"
-                }
-              ],
-              [
-                "key-c",
-                "value-c"
-              ],
-              [
-                "key-d",
-                4
-              ]
-            ]
-          }
-        };
-
-      case "testDisconnectedNodeValuedMap":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj213",
-          "class": "Map",
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "MapLike",
-            "size": 3,
-            "entries": [
-              [
-                "item-0",
-                {
-                  "type": "object",
-                  "actor": "server1.conn1.child1/obj214",
-                  "class": "HTMLButtonElement",
-                  "extensible": true,
-                  "frozen": false,
-                  "sealed": false,
-                  "ownPropertyLength": 0,
-                  "preview": {
-                    "kind": "DOMNode",
-                    "nodeType": 1,
-                    "nodeName": "button",
-                    "isConnected": false,
-                    "attributes": {
-                      "id": "btn-1",
-                      "class": "btn btn-log",
-                      "type": "button"
-                    },
-                    "attributesLength": 3
-                  }
-                }
-              ],
-              [
-                "item-1",
-                {
-                  "type": "object",
-                  "actor": "server1.conn1.child1/obj215",
-                  "class": "HTMLButtonElement",
-                  "extensible": true,
-                  "frozen": false,
-                  "sealed": false,
-                  "ownPropertyLength": 0,
-                  "preview": {
-                    "kind": "DOMNode",
-                    "nodeType": 1,
-                    "nodeName": "button",
-                    "isConnected": false,
-                    "attributes": {
-                      "id": "btn-2",
-                      "class": "btn btn-err",
-                      "type": "button"
-                    },
-                    "attributesLength": 3
-                  }
-                }
-              ],
-              [
-                "item-2",
-                {
-                  "type": "object",
-                  "actor": "server1.conn1.child1/obj216",
-                  "class": "HTMLButtonElement",
-                  "extensible": true,
-                  "frozen": false,
-                  "sealed": false,
-                  "ownPropertyLength": 0,
-                  "preview": {
-                    "kind": "DOMNode",
-                    "nodeType": 1,
-                    "nodeName": "button",
-                    "isConnected": false,
-                    "attributes": {
-                      "id": "btn-3",
-                      "class": "btn btn-count",
-                      "type": "button"
-                    },
-                    "attributesLength": 3
-                  }
-                }
-              ]
-            ]
-          }
-        };
-
-      case "testNodeValuedMap":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj213",
-          "class": "Map",
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "MapLike",
-            "size": 3,
-            "entries": [
-              [
-                "item-0",
-                {
-                  "type": "object",
-                  "actor": "server1.conn1.child1/obj214",
-                  "class": "HTMLButtonElement",
-                  "extensible": true,
-                  "frozen": false,
-                  "sealed": false,
-                  "ownPropertyLength": 0,
-                  "preview": {
-                    "kind": "DOMNode",
-                    "nodeType": 1,
-                    "nodeName": "button",
-                    "isConnected": true,
-                    "attributes": {
-                      "id": "btn-1",
-                      "class": "btn btn-log",
-                      "type": "button"
-                    },
-                    "attributesLength": 3
-                  }
-                }
-              ],
-              [
-                "item-1",
-                {
-                  "type": "object",
-                  "actor": "server1.conn1.child1/obj215",
-                  "class": "HTMLButtonElement",
-                  "extensible": true,
-                  "frozen": false,
-                  "sealed": false,
-                  "ownPropertyLength": 0,
-                  "preview": {
-                    "kind": "DOMNode",
-                    "nodeType": 1,
-                    "nodeName": "button",
-                    "isConnected": true,
-                    "attributes": {
-                      "id": "btn-2",
-                      "class": "btn btn-err",
-                      "type": "button"
-                    },
-                    "attributesLength": 3
-                  }
-                }
-              ],
-              [
-                "item-2",
-                {
-                  "type": "object",
-                  "actor": "server1.conn1.child1/obj216",
-                  "class": "HTMLButtonElement",
-                  "extensible": true,
-                  "frozen": false,
-                  "sealed": false,
-                  "ownPropertyLength": 0,
-                  "preview": {
-                    "kind": "DOMNode",
-                    "nodeType": 1,
-                    "nodeName": "button",
-                    "isConnected": true,
-                    "attributes": {
-                      "id": "btn-3",
-                      "class": "btn btn-count",
-                      "type": "button"
-                    },
-                    "attributesLength": 3
-                  }
-                }
-              ]
-            ]
-          }
-        };
-
-      case "testNodeKeyedMap":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj223",
-          "class": "WeakMap",
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "MapLike",
-            "size": 3,
-            "entries": [
-              [
-                {
-                  "type": "object",
-                  "actor": "server1.conn1.child1/obj224",
-                  "class": "HTMLButtonElement",
-                  "extensible": true,
-                  "frozen": false,
-                  "sealed": false,
-                  "ownPropertyLength": 0,
-                  "preview": {
-                    "kind": "DOMNode",
-                    "nodeType": 1,
-                    "nodeName": "button",
-                    "isConnected": true,
-                    "attributes": {
-                      "id": "btn-1",
-                      "class": "btn btn-log",
-                      "type": "button"
-                    },
-                    "attributesLength": 3
-                  }
-                },
-                "item-0"
-              ],
-              [
-                {
-                  "type": "object",
-                  "actor": "server1.conn1.child1/obj225",
-                  "class": "HTMLButtonElement",
-                  "extensible": true,
-                  "frozen": false,
-                  "sealed": false,
-                  "ownPropertyLength": 0,
-                  "preview": {
-                    "kind": "DOMNode",
-                    "nodeType": 1,
-                    "nodeName": "button",
-                    "isConnected": true,
-                    "attributes": {
-                      "id": "btn-3",
-                      "class": "btn btn-count",
-                      "type": "button"
-                    },
-                    "attributesLength": 3
-                  }
-                },
-                "item-2"
-              ],
-              [
-                {
-                  "type": "object",
-                  "actor": "server1.conn1.child1/obj226",
-                  "class": "HTMLButtonElement",
-                  "extensible": true,
-                  "frozen": false,
-                  "sealed": false,
-                  "ownPropertyLength": 0,
-                  "preview": {
-                    "kind": "DOMNode",
-                    "nodeType": 1,
-                    "nodeName": "button",
-                    "isConnected": true,
-                    "attributes": {
-                      "id": "btn-2",
-                      "class": "btn btn-err",
-                      "type": "button"
-                    },
-                    "attributesLength": 3
-                  }
-                },
-                "item-1"
-              ]
-            ]
-          }
-        };
-    }
-  }
-});
-</script>
-</pre>
-</body>
-</html>
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_grip.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_grip.html
deleted file mode 100644
index d01e01adf0bd..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_grip.html
+++ /dev/null
@@ -1,1288 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test grip rep
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep test - grip</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-window.onload = Task.async(function* () {
-  const {
-    REPS,
-    MODE,
-    getRep,
-    getSelectableInInspectorGrips,
-  } = browserRequire("devtools/client/shared/components/reps/reps");
-  let { Grip } = REPS;
-
-  const componentUnderTest = Grip;
-
-  try {
-    yield testBasic();
-    yield testBooleanObject();
-    yield testNumberObject();
-    yield testStringObject();
-    yield testProxy();
-    yield testArrayBuffer();
-    yield testSharedArrayBuffer();
-    yield testApplicationCache();
-
-    // Test property iterator
-    yield testMaxProps();
-    yield testMoreThanMaxProps();
-    yield testUninterestingProps();
-    yield testNonEnumerableProps();
-
-    // Test that properties are rendered as expected by PropRep
-    yield testNestedObject();
-    yield testNestedArray();
-
-    // Test that 'more' property doesn't clobber the caption.
-    yield testMoreProp();
-
-    yield testOnDomNodeMouseOver();
-    yield testOnDomNodeMouseOut();
-    yield testOnDomNodeInspectIconClick();
-
-    yield testObjectLink();
-  } catch(e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-
-  function testBasic() {
-    // Test object: `{}`
-    const testName = "testBasic";
-
-    // Test that correct rep is chosen
-    const gripStub = getGripStub("testBasic");
-    is(getRep(gripStub), Grip.rep, "Rep correctly selects Grip Rep");
-
-    // Test rendering
-    const defaultOutput = `Object {  }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `Object`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testBooleanObject() {
-    // Test object: `new Boolean(true)`
-    const testName = "testBooleanObject";
-
-    // Test that correct rep is chosen
-    const gripStub = getGripStub(testName);
-    is(getRep(gripStub), Grip.rep, "Rep correctly selects Grip Rep");
-
-    // Test rendering
-    const defaultOutput = `Boolean { true }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `Boolean`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testNumberObject() {
-    // Test object: `new Number(42)`
-    const testName = "testNumberObject";
-
-    // Test that correct rep is chosen
-    const gripStub = getGripStub(testName);
-    is(getRep(gripStub), Grip.rep, "Rep correctly selects Grip Rep");
-
-    // Test rendering
-    const defaultOutput = `Number { 42 }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `Number`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testStringObject() {
-    // Test object: `new String("foo")`
-    const testName = "testStringObject";
-
-    // Test that correct rep is chosen
-    const gripStub = getGripStub(testName);
-    is(getRep(gripStub), Grip.rep, "Rep correctly selects Grip Rep");
-
-    // Test rendering
-    const defaultOutput = `String { "foo" }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `String`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testProxy() {
-    // Test object: `new Proxy({a:1},[1,2,3])`
-    const testName = "testProxy";
-
-    // Test that correct rep is chosen
-    const gripStub = getGripStub(testName);
-    is(getRep(gripStub), Grip.rep, "Rep correctly selects Grip Rep");
-
-    // Test rendering
-    const defaultOutput = `Proxy { <target>: Object, <handler>: [3] }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `Proxy`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testArrayBuffer() {
-    // Test object: `new ArrayBuffer(10)`
-    const testName = "testArrayBuffer";
-
-    // Test that correct rep is chosen
-    const gripStub = getGripStub(testName);
-    is(getRep(gripStub), Grip.rep, "Rep correctly selects Grip Rep");
-
-    // Test rendering
-    const defaultOutput = `ArrayBuffer { byteLength: 10 }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `ArrayBuffer`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testSharedArrayBuffer() {
-    // Test object: `new SharedArrayBuffer(5)`
-    const testName = "testSharedArrayBuffer";
-
-    // Test that correct rep is chosen
-    const gripStub = getGripStub(testName);
-    is(getRep(gripStub), Grip.rep, "Rep correctly selects Grip Rep");
-
-    // Test rendering
-    const defaultOutput = `SharedArrayBuffer { byteLength: 5 }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `SharedArrayBuffer`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testApplicationCache() {
-    // Test object: `window.applicationCache`
-    const testName = "testApplicationCache";
-
-    // Test that correct rep is chosen
-    const gripStub = getGripStub(testName);
-    is(getRep(gripStub), Grip.rep, "Rep correctly selects Grip Rep");
-
-    // Test rendering
-    const defaultOutput =
-      "OfflineResourceList { status: 0, onchecking: null, onerror: null, 7 more… }";
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: "OfflineResourceList",
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: "OfflineResourceList { status: 0, onchecking: null, " +
-          "onerror: null, onnoupdate: null, ondownloading: null, onprogress: null, " +
-          "onupdateready: null, oncached: null, onobsolete: null, mozItems: [] }",
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testMaxProps() {
-    // Test object: `{a: "a", b: "b", c: "c"}`;
-    const testName = "testMaxProps";
-
-    const defaultOutput = `Object { a: "a", b: "b", c: "c" }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `Object`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testMoreThanMaxProps() {
-    // Test object = `{p0: "0", p1: "1", p2: "2", …, p100: "100"}`
-    const testName = "testMoreThanMaxProps";
-
-    const defaultOutput = `Object { p0: "0", p1: "1", p2: "2", 98 more… }`;
-
-    // Generate string with 10 properties, which is the max limit for 'long' mode.
-    let props = [];
-    for (let i = 0; i < 10; i++) {
-      props.push(`p${i}: "${i}"`);
-    }
-
-    const longOutput = `Object { ${props.join(", ")}, 91 more… }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `Object`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: longOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testUninterestingProps() {
-    // Test object: `{a: undefined, b: undefined, c: "c", d: 1}`
-    // @TODO This is not how we actually want the preview to be output.
-    // See https://bugzilla.mozilla.org/show_bug.cgi?id=1276376
-    const expectedOutput = `Object { a: undefined, b: undefined, c: "c", 1 more… }`;
-  }
-
-  function testNonEnumerableProps() {
-    // Test object: `Object.defineProperty({}, "foo", {enumerable : false});`
-    const testName = "testNonEnumerableProps";
-
-    // Test that correct rep is chosen
-    const gripStub = getGripStub("testNonEnumerableProps");
-    is(getRep(gripStub), Grip.rep, "Rep correctly selects Grip Rep");
-
-    // Test rendering
-    const defaultOutput = `Object {  }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `Object`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testNestedObject() {
-    // Test object: `{objProp: {id: 1}, strProp: "test string"}`
-    const testName = "testNestedObject";
-
-    const defaultOutput = `Object { objProp: Object, strProp: "test string" }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `Object`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      },
-      {
-        // Check the custom title with nested objects to make sure nested objects are not
-        // displayed with their parent's title.
-        mode: MODE.LONG,
-        title: "CustomTitle",
-        expectedOutput: `CustomTitle { objProp: Object, strProp: "test string" }`,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testNestedArray() {
-    // Test object: `{arrProp: ["foo", "bar", "baz"]}`
-    const testName = "testNestedArray";
-
-    const defaultOutput = `Object { arrProp: [3] }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `Object`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testMoreProp() {
-    // Test object: `{a: undefined, b: 1, more: 2, d: 3}`;
-    const testName = "testMoreProp";
-
-    const defaultOutput = `Object { b: 1, more: 2, d: 3, 1 more… }`;
-    const longOutput = `Object { a: undefined, b: 1, more: 2, d: 3 }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `Object`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: longOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
-  }
-
-  function testOnDomNodeMouseOver() {
-    const stub = getGripStub("testObjectWithNodes");
-
-    const grips = getSelectableInInspectorGrips(stub);
-    is(grips.length, 2, "the stub has two node grips");
-
-    let mouseOverValue;
-    let called = 0;
-    let onDOMNodeMouseOver = (object) => {
-      mouseOverValue = object;
-      called++;
-    };
-
-    const renderedComponent = renderComponent(Grip.rep, {
-      object: stub,
-      onDOMNodeMouseOver,
-    });
-
-    const nodes = renderedComponent.querySelectorAll(".objectBox-node");
-    nodes.forEach((node, index) => {
-      TestUtils.Simulate.mouseOver(node);
-      is(mouseOverValue, grips[index],
-        "onDOMNodeMouseOver is called with the expected argument " +
-        "when mouseover is fired on the Rep");
-    });
-    is(called, 2,
-      "onDOMNodeMouseOver is called when mouseOverValue is fired on each NodeRep");
-  }
-
-  function testOnDomNodeMouseOut() {
-    const stub = getGripStub("testObjectWithNodes");
-
-    const grips = getSelectableInInspectorGrips(stub);
-    is(grips.length, 2, "the stub has two node grips");
-
-    let called = 0;
-    let onDOMNodeMouseOut = (object) => {
-      called++;
-    };
-
-    const renderedComponent = renderComponent(Grip.rep, {
-      object: stub,
-      onDOMNodeMouseOut,
-    });
-
-    const nodes = renderedComponent.querySelectorAll(".objectBox-node");
-    info("Simulating mouseout on each node");
-    Array.from(nodes).forEach(node => TestUtils.Simulate.mouseOut(node));
-
-    is(called, 2, "onDOMNodeMouseOut is called when mouseout is fired on each NodeRep");
-  }
-
-  function testOnDomNodeInspectIconClick() {
-    const stub = getGripStub("testObjectWithNodes");
-
-    const grips = getSelectableInInspectorGrips(stub);
-    is(grips.length, 2, "the stub has two node grips");
-
-    let inspectIconClickedValue = null;
-    let onInspectIconClick = (object) => {
-      inspectIconClickedValue = object;
-    };
-
-    let renderedComponentWithoutInspectIcon = renderComponent(Grip.rep, {
-      object: getGripStub("testObjectWithDisconnectedNodes"),
-      onInspectIconClick,
-    });
-    is(renderedComponentWithoutInspectIcon.querySelector(".open-inspector"), null,
-      "There isn't an inspect icon when the node is not connected to the DOM tree");
-
-    const renderedComponent = renderComponent(Grip.rep, {
-      object: stub,
-      onInspectIconClick,
-    });
-
-    const icons = renderedComponent.querySelectorAll(".open-inspector");
-    is(icons.length, 2,
-      "There is an icon for each node connected to the DOM tree");
-
-    icons.forEach((icon, index) => {
-      TestUtils.Simulate.click(icon);
-      is(inspectIconClickedValue, grips[index],
-        "onInspectIconClick is called with the expected argument " +
-        "when the inspect icon is clicked");
-    });
-  }
-
-  function testObjectLink() {
-    // Test object: `{a: undefined, b: 1, more: 2, d: 3}`;
-    const defaultOutput = `*Object** { *b: 1, more: 2, d: 3, *1 more…** }*`;
-    const longOutput = `*Object** { *a: undefined, b: 1, more: 2, d: 3* }*`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `*Object*`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: longOutput,
-      }
-    ];
-
-    testRepRenderModes(
-      modeTests,
-      "testObjectLink",
-      componentUnderTest,
-      getGripStub("testMoreProp"),
-      {
-        objectLink: (props, ...children) => React.DOM.span({},
-          "*", ...children, "*"),
-      }
-    );
-  }
-
-  function getGripStub(functionName) {
-    switch (functionName) {
-      case "testBasic":
-        return {
-          "type": "object",
-          "class": "Object",
-          "actor": "server1.conn0.obj304",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "Object",
-            "ownProperties": {},
-            "ownPropertiesLength": 0,
-            "safeGetterValues": {}
-          }
-        };
-
-      case "testMaxProps":
-        return {
-          "type": "object",
-          "class": "Object",
-          "actor": "server1.conn0.obj337",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 3,
-          "preview": {
-            "kind": "Object",
-            "ownProperties": {
-              "a": {
-                "configurable": true,
-                "enumerable": true,
-                "writable": true,
-                "value": "a"
-              },
-              "b": {
-                "configurable": true,
-                "enumerable": true,
-                "writable": true,
-                "value": "b"
-              },
-              "c": {
-                "configurable": true,
-                "enumerable": true,
-                "writable": true,
-                "value": "c"
-              }
-            },
-            "ownPropertiesLength": 3,
-            "safeGetterValues": {}
-          }
-        };
-
-      case "testMoreThanMaxProps": {
-        let grip = {
-          "type": "object",
-          "class": "Object",
-          "actor": "server1.conn0.obj332",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 101,
-          "preview": {
-            "kind": "Object",
-            "ownProperties": {},
-            "ownPropertiesLength": 101,
-            "safeGetterValues": {}
-          }
-        };
-
-        // Generate 101 properties, which is more that the maximum
-        // limit in case of the 'long' mode.
-        for (let i = 0; i < 101; i++) {
-          grip.preview.ownProperties["p" + i] = {
-            "configurable": true,
-            "enumerable": true,
-            "writable": true,
-            "value": i + ""
-          };
-        }
-
-        return grip;
-      }
-
-      case "testUninterestingProps":
-        return {
-          "type": "object",
-          "class": "Object",
-          "actor": "server1.conn0.obj342",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 4,
-          "preview": {
-            "kind": "Object",
-            "ownProperties": {
-              "a": {
-                "configurable": true,
-                "enumerable": true,
-                "writable": true,
-                "value": {
-                  "type": "undefined"
-                }
-              },
-              "b": {
-                "configurable": true,
-                "enumerable": true,
-                "writable": true,
-                "value": {
-                  "type": "undefined"
-                }
-              },
-              "c": {
-                "configurable": true,
-                "enumerable": true,
-                "writable": true,
-                "value": "c"
-              },
-              "d": {
-                "configurable": true,
-                "enumerable": true,
-                "writable": true,
-                "value": 1
-              }
-            },
-            "ownPropertiesLength": 4,
-            "safeGetterValues": {}
-          }
-        };
-      case "testNonEnumerableProps":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj30",
-          "class": "Object",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 1,
-          "preview": {
-            "kind": "Object",
-            "ownProperties": {},
-            "ownPropertiesLength": 1,
-            "safeGetterValues": {}
-          }
-        };
-      case "testNestedObject":
-        return {
-          "type": "object",
-          "class": "Object",
-          "actor": "server1.conn0.obj145",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 2,
-          "preview": {
-            "kind": "Object",
-            "ownProperties": {
-              "objProp": {
-                "configurable": true,
-                "enumerable": true,
-                "writable": true,
-                "value": {
-                  "type": "object",
-                  "class": "Object",
-                  "actor": "server1.conn0.obj146",
-                  "extensible": true,
-                  "frozen": false,
-                  "sealed": false,
-                  "ownPropertyLength": 1
-                }
-              },
-              "strProp": {
-                "configurable": true,
-                "enumerable": true,
-                "writable": true,
-                "value": "test string"
-              }
-            },
-            "ownPropertiesLength": 2,
-            "safeGetterValues": {}
-          }
-        };
-
-      case "testNestedArray":
-        return {
-          "type": "object",
-          "class": "Object",
-          "actor": "server1.conn0.obj326",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 1,
-          "preview": {
-            "kind": "Object",
-            "ownProperties": {
-              "arrProp": {
-                "configurable": true,
-                "enumerable": true,
-                "writable": true,
-                "value": {
-                  "type": "object",
-                  "class": "Array",
-                  "actor": "server1.conn0.obj327",
-                  "extensible": true,
-                  "frozen": false,
-                  "sealed": false,
-                  "ownPropertyLength": 4,
-                  "preview": {
-                    "kind": "ArrayLike",
-                    "length": 3
-                  }
-                }
-              }
-            },
-            "ownPropertiesLength": 1,
-            "safeGetterValues": {}
-          },
-        };
-
-      case "testMoreProp":
-        return {
-          "type": "object",
-          "class": "Object",
-          "actor": "server1.conn0.obj342",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 4,
-          "preview": {
-            "kind": "Object",
-            "ownProperties": {
-              "a": {
-                "configurable": true,
-                "enumerable": true,
-                "writable": true,
-                "value": {
-                  "type": "undefined"
-                }
-              },
-              "b": {
-                "configurable": true,
-                "enumerable": true,
-                "writable": true,
-                "value": 1
-              },
-              "more": {
-                "configurable": true,
-                "enumerable": true,
-                "writable": true,
-                "value": 2
-              },
-              "d": {
-                "configurable": true,
-                "enumerable": true,
-                "writable": true,
-                "value": 3
-              }
-            },
-            "ownPropertiesLength": 4,
-            "safeGetterValues": {}
-          }
-        };
-      case "testBooleanObject":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj57",
-          "class": "Boolean",
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "Object",
-            "ownProperties": {},
-            "ownPropertiesLength": 0,
-            "safeGetterValues": {},
-            "wrappedValue": true
-          }
-        };
-      case "testNumberObject":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj59",
-          "class": "Number",
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "Object",
-            "ownProperties": {},
-            "ownPropertiesLength": 0,
-            "safeGetterValues": {},
-            "wrappedValue": 42
-          }
-        };
-      case "testStringObject":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj61",
-          "class": "String",
-          "ownPropertyLength": 4,
-          "preview": {
-            "kind": "Object",
-            "ownProperties": {},
-            "ownPropertiesLength": 4,
-            "safeGetterValues": {},
-            "wrappedValue": "foo"
-          }
-        };
-      case "testProxy":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj47",
-          "class": "Proxy",
-          "proxyTarget": {
-            "type": "object",
-            "actor": "server1.conn1.child1/obj48",
-            "class": "Object",
-            "ownPropertyLength": 1
-          },
-          "proxyHandler": {
-            "type": "object",
-            "actor": "server1.conn1.child1/obj49",
-            "class": "Array",
-            "ownPropertyLength": 4,
-            "preview": {
-              "kind": "ArrayLike",
-              "length": 3
-            }
-          },
-          "preview": {
-            "kind": "Object",
-            "ownProperties": {
-              "<target>": {
-                "value": {
-                  "type": "object",
-                  "actor": "server1.conn1.child1/obj48",
-                  "class": "Object",
-                  "ownPropertyLength": 1
-                }
-              },
-              "<handler>": {
-                "value": {
-                  "type": "object",
-                  "actor": "server1.conn1.child1/obj49",
-                  "class": "Array",
-                  "ownPropertyLength": 4,
-                  "preview": {
-                    "kind": "ArrayLike",
-                    "length": 3
-                  }
-                }
-              }
-            },
-            "ownPropertiesLength": 2
-          }
-        };
-      case "testArrayBuffer":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj170",
-          "class": "ArrayBuffer",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "Object",
-            "ownProperties": {},
-            "ownPropertiesLength": 0,
-            "safeGetterValues": {
-              "byteLength": {
-                "getterValue": 10,
-                "getterPrototypeLevel": 1,
-                "enumerable": false,
-                "writable": true
-              }
-            }
-          }
-        };
-      case "testSharedArrayBuffer":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj171",
-          "class": "SharedArrayBuffer",
-          "extensible": true,
-          "frozen": false,
-          "sealed": false,
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "Object",
-            "ownProperties": {},
-            "ownPropertiesLength": 0,
-            "safeGetterValues": {
-              "byteLength": {
-                "getterValue": 5,
-                "getterPrototypeLevel": 1,
-                "enumerable": false,
-                "writable": true
-              }
-            }
-          }
-        };
-      case "testApplicationCache":
-        return {
-          "type": "object",
-          "actor": "server2.conn1.child2/obj45",
-          "class": "OfflineResourceList",
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "Object",
-            "ownProperties": {},
-            "ownPropertiesLength": 0,
-            "safeGetterValues": {
-              "status": {
-                "getterValue": 0,
-                "getterPrototypeLevel": 1,
-                "enumerable": true,
-                "writable": true
-              },
-              "onchecking": {
-                "getterValue": {
-                  "type": "null"
-                },
-                "getterPrototypeLevel": 1,
-                "enumerable": true,
-                "writable": true
-              },
-              "onerror": {
-                "getterValue": {
-                  "type": "null"
-                },
-                "getterPrototypeLevel": 1,
-                "enumerable": true,
-                "writable": true
-              },
-              "onnoupdate": {
-                "getterValue": {
-                  "type": "null"
-                },
-                "getterPrototypeLevel": 1,
-                "enumerable": true,
-                "writable": true
-              },
-              "ondownloading": {
-                "getterValue": {
-                  "type": "null"
-                },
-                "getterPrototypeLevel": 1,
-                "enumerable": true,
-                "writable": true
-              },
-              "onprogress": {
-                "getterValue": {
-                  "type": "null"
-                },
-                "getterPrototypeLevel": 1,
-                "enumerable": true,
-                "writable": true
-              },
-              "onupdateready": {
-                "getterValue": {
-                  "type": "null"
-                },
-                "getterPrototypeLevel": 1,
-                "enumerable": true,
-                "writable": true
-              },
-              "oncached": {
-                "getterValue": {
-                  "type": "null"
-                },
-                "getterPrototypeLevel": 1,
-                "enumerable": true,
-                "writable": true
-              },
-              "onobsolete": {
-                "getterValue": {
-                  "type": "null"
-                },
-                "getterPrototypeLevel": 1,
-                "enumerable": true,
-                "writable": true
-              },
-              "mozItems": {
-                "getterValue": {
-                  "type": "object",
-                  "actor": "server2.conn1.child2/obj46",
-                  "class": "DOMStringList",
-                  "extensible": true,
-                  "frozen": false,
-                  "sealed": false,
-                  "ownPropertyLength": 0,
-                  "preview": {
-                    "kind": "ArrayLike",
-                    "length": 0
-                  }
-                },
-                "getterPrototypeLevel": 1,
-                "enumerable": true,
-                "writable": true
-              }
-            }
-          }
-        };
-      case "testObjectWithNodes":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj214",
-          "class": "Object",
-          "ownPropertyLength": 2,
-          "preview": {
-            "kind": "Object",
-            "ownProperties": {
-              "foo": {
-                "configurable": true,
-                "enumerable": true,
-                "writable": true,
-                "value": {
-                  "type": "object",
-                  "actor": "server1.conn1.child1/obj215",
-                  "class": "HTMLButtonElement",
-                  "extensible": true,
-                  "frozen": false,
-                  "sealed": false,
-                  "ownPropertyLength": 0,
-                  "preview": {
-                    "kind": "DOMNode",
-                    "nodeType": 1,
-                    "nodeName": "button",
-                    "isConnected": true,
-                    "attributes": {
-                      "id": "btn-1",
-                      "class": "btn btn-log",
-                      "type": "button"
-                    },
-                    "attributesLength": 3
-                  }
-                }
-              },
-              "bar": {
-                "configurable": true,
-                "enumerable": true,
-                "writable": true,
-                "value": {
-                  "type": "object",
-                  "actor": "server1.conn1.child1/obj216",
-                  "class": "HTMLButtonElement",
-                  "extensible": true,
-                  "frozen": false,
-                  "sealed": false,
-                  "ownPropertyLength": 0,
-                  "preview": {
-                    "kind": "DOMNode",
-                    "nodeType": 1,
-                    "nodeName": "button",
-                    "isConnected": true,
-                    "attributes": {
-                      "id": "btn-2",
-                      "class": "btn btn-err",
-                      "type": "button"
-                    },
-                    "attributesLength": 3
-                  }
-                }
-              }
-            },
-            "ownPropertiesLength": 2,
-            "safeGetterValues": {}
-          }
-        };
-      case "testObjectWithDisconnectedNodes":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj214",
-          "class": "Object",
-          "ownPropertyLength": 2,
-          "preview": {
-            "kind": "Object",
-            "ownProperties": {
-              "foo": {
-                "configurable": true,
-                "enumerable": true,
-                "writable": true,
-                "value": {
-                  "type": "object",
-                  "actor": "server1.conn1.child1/obj215",
-                  "class": "HTMLButtonElement",
-                  "extensible": true,
-                  "frozen": false,
-                  "sealed": false,
-                  "ownPropertyLength": 0,
-                  "preview": {
-                    "kind": "DOMNode",
-                    "nodeType": 1,
-                    "nodeName": "button",
-                    "attributes": {
-                      "id": "btn-1",
-                      "class": "btn btn-log",
-                      "type": "button"
-                    },
-                    "attributesLength": 3
-                  }
-                }
-              },
-              "bar": {
-                "configurable": true,
-                "enumerable": true,
-                "writable": true,
-                "value": {
-                  "type": "object",
-                  "actor": "server1.conn1.child1/obj216",
-                  "class": "HTMLButtonElement",
-                  "extensible": true,
-                  "frozen": false,
-                  "sealed": false,
-                  "ownPropertyLength": 0,
-                  "preview": {
-                    "kind": "DOMNode",
-                    "nodeType": 1,
-                    "nodeName": "button",
-                    "attributes": {
-                      "id": "btn-2",
-                      "class": "btn btn-err",
-                      "type": "button"
-                    },
-                    "attributesLength": 3
-                  }
-                }
-              }
-            },
-            "ownPropertiesLength": 2,
-            "safeGetterValues": {}
-          }
-        };
-    }
-  }
-});
-</script>
-</pre>
-</body>
-</html>
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_infinity.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_infinity.html
deleted file mode 100644
index 4612b3136707..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_infinity.html
+++ /dev/null
@@ -1,72 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test Infinity rep
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep test - Infinity</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-"use strict";
-
-window.onload = Task.async(function* () {
-  const {
-    REPS,
-    getRep,
-  } = browserRequire("devtools/client/shared/components/reps/reps");
-  let { InfinityRep } = REPS;
-
-  try {
-    yield testInfinity();
-    yield testNegativeInfinity();
-  } catch (e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-
-  function testInfinity() {
-    const stub = getGripStub("testInfinity");
-    is(getRep(stub), InfinityRep.rep, "Rep correctly selects Infinity Rep");
-
-    const renderedComponent = renderComponent(InfinityRep.rep, { object: stub });
-    is(renderedComponent.textContent, "Infinity",
-      "Infinity rep has expected text content for Infinity");
-  }
-
-  function testNegativeInfinity() {
-    const stub = getGripStub("testNegativeInfinity");
-    is(getRep(stub), InfinityRep.rep, "Rep correctly selects Infinity Rep");
-
-    const renderedComponent = renderComponent(InfinityRep.rep, { object: stub });
-    is(renderedComponent.textContent, "-Infinity",
-      "Infinity rep has expected text content for negative Infinity");
-  }
-
-  function getGripStub(name) {
-    switch (name) {
-      case "testInfinity":
-        return {
-          type: "Infinity"
-        };
-      case "testNegativeInfinity":
-        return {
-          type: "-Infinity"
-        };
-    }
-    return null;
-  }
-});
-</script>
-</pre>
-</body>
-</html>
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_long-string.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_long-string.html
deleted file mode 100644
index f1acc61e4993..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_long-string.html
+++ /dev/null
@@ -1,131 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test LongString rep
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep test - LongString</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-window.onload = Task.async(function* () {
-  const {
-    REPS,
-    getRep,
-  } = browserRequire("devtools/client/shared/components/reps/reps");
-  let { LongStringRep } = REPS;
-
-  try {
-    // Test that correct rep is chosen
-    is(getRep(getGripStub("testMultiline")), LongStringRep.rep,
-      "Rep correctly selects LongString Rep");
-
-    // Test rendering
-    yield testMultiline();
-    yield testMultilineOpen();
-    yield testFullText();
-    yield testMultilineLimit();
-    yield testUseQuotes();
-  } catch (e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-
-  function quoteNewlines(text) {
-    return text.split("\n").join("\\n");
-  }
-
-  function testMultiline() {
-    const stub = getGripStub("testMultiline");
-    const renderedComponent = renderComponent(
-      LongStringRep.rep, { object: stub });
-
-    is(renderedComponent.textContent, quoteNewlines(`"${stub.initial}…"`),
-      "LongString rep has expected text content for multiline string");
-  }
-
-  function testMultilineLimit() {
-    const renderedComponent = renderComponent(
-      LongStringRep.rep, { object: getGripStub("testMultiline"), cropLimit: 20 });
-
-    is(
-      renderedComponent.textContent,
-      `"a\\naaaaaaaaaaaaaaaaaa…"`,
-      "LongString rep has expected text content for multiline string " +
-      "with specified number of characters");
-  }
-
-  function testMultilineOpen() {
-    const stub = getGripStub("testMultiline");
-    const renderedComponent = renderComponent(
-      LongStringRep.rep, { object: stub, member: {open: true}, cropLimit: 20 });
-
-    is(renderedComponent.textContent, quoteNewlines(`"${stub.initial}…"`),
-      "LongString rep has expected text content for multiline string when open");
-  }
-
-  function testFullText() {
-    const stub = getGripStub("testFullText");
-    const renderedComponentOpen = renderComponent(
-      LongStringRep.rep, { object: stub, member: {open: true}, cropLimit: 20 });
-
-    is(renderedComponentOpen.textContent, quoteNewlines(`"${stub.fullText}"`),
-      "LongString rep has expected text content when grip has a fullText " +
-      "property and is open");
-
-    const renderedComponentNotOpen = renderComponent(
-      LongStringRep.rep, { object: stub, cropLimit: 20 });
-
-    is(renderedComponentNotOpen.textContent,
-      `"a\\naaaaaaaaaaaaaaaaaa…"`,
-      "LongString rep has expected text content when grip has a fullText " +
-      "property and is not open");
-  }
-
-  function testUseQuotes() {
-    const renderedComponent = renderComponent(LongStringRep.rep,
-      { object: getGripStub("testMultiline"), cropLimit: 20, useQuotes: false });
-
-    is(renderedComponent.textContent,
-      "a\naaaaaaaaaaaaaaaaaa…",
-      "LongString rep was expected to omit quotes");
-  }
-
-  function getGripStub(name) {
-    const multilineFullText = "a\n" + Array(20000).fill("a").join("");
-    const fullTextLength = multilineFullText.length;
-    const initialText = multilineFullText.substring(0, 10000);
-
-    switch (name) {
-      case "testMultiline":
-        return {
-          "type": "longString",
-          "initial": initialText,
-          "length": fullTextLength,
-          "actor": "server1.conn1.child1/longString58"
-        };
-      case "testFullText":
-        return {
-          "type": "longString",
-          "fullText": multilineFullText,
-          "initial": initialText,
-          "length": fullTextLength,
-          "actor": "server1.conn1.child1/longString58"
-        };
-    }
-    return null;
-  }
-});
-</script>
-</pre>
-</body>
-</html>
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_nan.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_nan.html
deleted file mode 100644
index e961647d7a27..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_nan.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test NaN rep
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep test - NaN</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-"use strict";
-
-window.onload = Task.async(function* () {
-  const {
-    REPS,
-    getRep,
-  } = browserRequire("devtools/client/shared/components/reps/reps");
-  let { NaNRep } = REPS;
-
-  try {
-    yield testNaN();
-  } catch (e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-
-  function testNaN() {
-    const stub = {
-      type: "NaN"
-    };
-    is(getRep(stub), NaNRep.rep, "Rep correctly selects NaN Rep");
-
-    const renderedComponent = renderComponent(NaNRep.rep, {object: stub});
-    is(renderedComponent.textContent, "NaN", "NaN rep has expected text content");
-  }
-});
-</script>
-</pre>
-</body>
-</html>
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_null.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_null.html
deleted file mode 100644
index ad447fe5e19d..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_null.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test Null rep
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep test - Null</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-window.onload = Task.async(function* () {
-  try {
-    const {
-      REPS,
-      getRep,
-    } = browserRequire("devtools/client/shared/components/reps/reps");
-    let { Null } = REPS;
-
-    let gripStub = {
-      "type": "null"
-    };
-
-    // Test that correct rep is chosen
-    is(getRep(gripStub), Null.rep, "Rep correctly selects Null Rep");
-
-    // Test rendering
-    const renderedComponent = renderComponent(Null.rep, { object: gripStub });
-    is(renderedComponent.textContent, "null", "Null rep has expected text content");
-  } catch(e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-});
-</script>
-</pre>
-</body>
-</html>
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_number.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_number.html
deleted file mode 100644
index 5e03c095a7e3..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_number.html
+++ /dev/null
@@ -1,97 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test Number rep
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep test - Number</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-window.onload = Task.async(function* () {
-  const {
-    REPS,
-    getRep,
-  } = browserRequire("devtools/client/shared/components/reps/reps");
-  let { Number } = REPS;
-
-  try {
-    yield testInt();
-    yield testBoolean();
-    yield testNegativeZero();
-    yield testUnsafeInt();
-  } catch(e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-
-
-  function testInt() {
-    is(getRep(getGripStub("testInt")), Number.rep, "Rep correctly selects Number Rep");
-
-    const renderedComponent = renderComponent(Number.rep, { object: getGripStub("testInt") });
-    is(renderedComponent.textContent, "5", "Number rep has expected text content for integer");
-  }
-
-  function testBoolean() {
-    is(getRep(getGripStub("testTrue")), Number.rep, "Rep correctly selects Number Rep for boolean value");
-
-    let renderedComponent = renderComponent(Number.rep, { object: getGripStub("testTrue") });
-    is(renderedComponent.textContent, "true", "Number rep has expected text content for boolean true");
-
-    renderedComponent = renderComponent(Number.rep, { object: getGripStub("testFalse") });
-    is(renderedComponent.textContent, "false", "Number rep has expected text content for boolean false");
-  }
-
-  function testNegativeZero() {
-    is(getRep(getGripStub("testNegZeroGrip")), Number.rep, "Rep correctly selects Number Rep for negative zero value");
-
-    let renderedComponent = renderComponent(Number.rep, { object: getGripStub("testNegZeroGrip") });
-    is(renderedComponent.textContent, "-0", "Number rep has expected text content for negative zero grip");
-
-    renderedComponent = renderComponent(Number.rep, { object: getGripStub("testNegZeroValue") });
-    is(renderedComponent.textContent, "-0", "Number rep has expected text content for negative zero value");
-  }
-
-  function testUnsafeInt() {
-    const renderedComponent = renderComponent(Number.rep, { object: getGripStub("testUnsafeInt") });
-    is(renderedComponent.textContent, "900719925474099100", "Number rep has expected text content for a long number");
-  }
-
-  function getGripStub(name) {
-    switch (name) {
-      case "testInt":
-        return 5;
-
-      case "testTrue":
-        return true;
-
-      case "testFalse":
-        return false;
-
-      case "testNegZeroValue":
-        return -0;
-
-      case "testNegZeroGrip":
-        return {
-          "type": "-0"
-        };
-
-      case "testUnsafeInt":
-        return 900719925474099122;
-    }
-  }
-});
-</script>
-</pre>
-</body>
-</html>
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_object-with-text.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_object-with-text.html
deleted file mode 100644
index 0901011b6134..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_object-with-text.html
+++ /dev/null
@@ -1,67 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test ObjectWithText rep
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep test - ObjectWithText</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-window.onload = Task.async(function* () {
-  try {
-    const {
-      REPS,
-      getRep,
-    } = browserRequire("devtools/client/shared/components/reps/reps");
-    let { ObjectWithText } = REPS;
-
-    let gripStub = {
-      "type": "object",
-      "class": "CSSStyleRule",
-      "actor": "server1.conn3.obj273",
-      "extensible": true,
-      "frozen": false,
-      "sealed": false,
-      "ownPropertyLength": 0,
-      "preview": {
-        "kind": "ObjectWithText",
-        "text": ".Shadow"
-      }
-    };
-
-    // Test that correct rep is chosen
-    is(getRep(gripStub), ObjectWithText.rep, "Rep correctly selects ObjectWithText Rep");
-
-    // Test rendering
-    const renderedComponent = renderComponent(ObjectWithText.rep, { object: gripStub });
-    is(renderedComponent.textContent, "\".Shadow\"", "ObjectWithText rep has expected text content");
-
-    // Test rendering with objectLink
-    const objectLinkRenderedComponent = renderComponent(ObjectWithText.rep, {
-      object: gripStub,
-      objectLink: (props, ...children) => React.DOM.span({},
-        "*", ...children, "*"),
-    });
-    is(objectLinkRenderedComponent.textContent,
-      "*CSSStyleRule *\".Shadow\"",
-      "ObjectWithText rep has expected text content when an objectLink is passed as a prop"
-    );
-  } catch(e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-});
-</script>
-</pre>
-</body>
-</html>
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_object-with-url.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_object-with-url.html
deleted file mode 100644
index 7febc2fadd10..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_object-with-url.html
+++ /dev/null
@@ -1,74 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test ObjectWithURL rep
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep test - ObjectWithURL</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-window.onload = Task.async(function* () {
-  try {
-    let ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
-    let React = browserRequire("devtools/client/shared/vendor/react");
-
-    const {
-      REPS,
-      getRep,
-    } = browserRequire("devtools/client/shared/components/reps/reps");
-    let { ObjectWithURL } = REPS;
-
-    let gripStub = {
-      "type": "object",
-      "class": "Location",
-      "actor": "server1.conn2.obj272",
-      "extensible": true,
-      "frozen": false,
-      "sealed": false,
-      "ownPropertyLength": 15,
-      "preview": {
-        "kind": "ObjectWithURL",
-        "url": "https://www.mozilla.org/en-US/"
-      }
-    };
-
-    // Test that correct rep is chosen
-    is(getRep(gripStub), ObjectWithURL.rep, "Rep correctly selects ObjectWithURL Rep");
-
-    // Test rendering
-    const renderedComponent = renderComponent(ObjectWithURL.rep, { object: gripStub });
-    ok(renderedComponent.className.includes("objectBox-Location"), "ObjectWithURL rep has expected class name");
-    const innerNode = renderedComponent.querySelector(".objectPropValue");
-    is(innerNode.textContent, "https://www.mozilla.org/en-US/", "ObjectWithURL rep has expected inner HTML structure and text content");
-
-    // Test rendering with objectLink
-    const objectLinkRenderedComponent = renderComponent(ObjectWithURL.rep, {
-      object: gripStub,
-      objectLink: (props, ...children) => React.DOM.span({},
-        "*", ...children, "*"),
-    });
-    is(objectLinkRenderedComponent.textContent,
-      "*Location *https://www.mozilla.org/en-US/",
-      "ObjectWithURL rep has expected text content when an objectLink is passed as a prop"
-    );
-
-    // @TODO test link once Bug 1245303 has been implemented.
-  } catch(e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-});
-</script>
-</pre>
-</body>
-</html>
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_object.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_object.html
deleted file mode 100644
index f6bae35132ff..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_object.html
+++ /dev/null
@@ -1,338 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test Obj rep
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep test - Obj</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-window.onload = Task.async(function* () {
-  const {
-    REPS,
-    MODE,
-    getRep,
-  } = browserRequire("devtools/client/shared/components/reps/reps");
-  let { Obj } = REPS;
-
-  const componentUnderTest = Obj;
-
-  try {
-    yield testBasic();
-
-    // Test property iterator
-    yield testMaxProps();
-    yield testMoreThanMaxProps();
-    yield testUninterestingProps();
-
-    // Test that unusual property names are escaped.
-    yield testEscapedPropertyNames();
-
-    // Test that properties are rendered as expected by PropRep
-    yield testNested();
-
-    // Test that 'more' property doesn't clobber the caption.
-    yield testMoreProp();
-
-    // Test that you can pass a custom title to the Rep
-    yield testCustomTitle();
-
-    // Test that you can pass an objectLink to the Rep
-    yield testCustomTitle();
-  } catch(e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-
-  function testBasic() {
-    const stub = {};
-
-    // Test that correct rep is chosen
-    is(getRep(stub), Obj.rep, "Rep correctly selects Obj Rep");
-
-    // Test rendering
-    const defaultOutput = `Object`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, "testBasic", componentUnderTest, stub);
-  }
-
-  function testMaxProps() {
-    const testName = "testMaxProps";
-
-    const stub = {a: "a", b: "b", c: "c"};
-    const defaultOutput = `Object { a: "a", b: "b", c: "c" }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `Object`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, "testMaxProps", componentUnderTest, stub);
-  }
-
-  function testMoreThanMaxProps() {
-    let stub = {};
-    for (let i = 0; i<100; i++) {
-      stub[`p${i}`] = i
-    }
-    const defaultOutput = `Object { p0: 0, p1: 1, p2: 2, 97 more… }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `Object`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, "testMoreThanMaxProps", componentUnderTest, stub);
-  }
-
-  function testUninterestingProps() {
-    const stub = {a:undefined, b:undefined, c:"c", d:0};
-    const defaultOutput = `Object { c: "c", d: 0, a: undefined, 1 more… }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `Object`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, "testUninterestingProps", componentUnderTest, stub);
-  }
-
-  function testEscapedPropertyNames() {
-    const stub = {"":1, "quote-this":2, noquotes:3};
-    const defaultOutput = `Object { "": 1, "quote-this": 2, noquotes: 3 }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `Object`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, "testEscapedPropertyNames", componentUnderTest, stub);
-  }
-
-  function testNested() {
-    const stub = {
-      objProp: {
-        id: 1,
-        arr: [2]
-      },
-      strProp: "test string",
-      arrProp: [1]
-    };
-    const defaultOutput = `Object { strProp: "test string", objProp: Object, arrProp: [1] }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `Object`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, "testNestedObject", componentUnderTest, stub);
-  }
-
-  function testMoreProp() {
-    const stub = {
-      a: undefined,
-      b: 1,
-      'more': 2,
-      d: 3
-    };
-    const defaultOutput = `Object { b: 1, more: 2, d: 3, 1 more… }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `Object`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, "testMoreProp", componentUnderTest, stub);
-  }
-
-  function testCustomTitle() {
-    const customTitle = "MyCustomObject";
-    const stub = {a: "a", b: "b", c: "c"};
-    const defaultOutput = `${customTitle} { a: "a", b: "b", c: "c" }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: customTitle,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(
-      modeTests,
-      "testCustomTitle",
-      componentUnderTest,
-      stub, {
-        title: customTitle
-      }
-    );
-  }
-
-  function testObjectLink() {
-    const stub = {
-      a: undefined,
-      b: 1,
-      "more": 2,
-      d: 3
-    };
-    const defaultOutput = `*Object **{ *b: 1, more: 2, d: 3, *1 more…** }*`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `*Object*`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(
-      modeTests,
-      "testObjectLink",
-      componentUnderTest,
-      stub,
-      {
-        objectLink: (props, ...children) => React.DOM.span({},
-          "*", ...children, "*"),
-      }
-    );
-  }
-});
-</script>
-</pre>
-</body>
-</html>
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_promise.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_promise.html
deleted file mode 100644
index 9f12a29c1a1c..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_promise.html
+++ /dev/null
@@ -1,527 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test Promise rep
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep test - Promise</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-"use strict";
-
-window.onload = Task.async(function* () {
-  const {
-    REPS,
-    MODE,
-    getRep,
-    getSelectableInInspectorGrips,
-  } = browserRequire("devtools/client/shared/components/reps/reps");
-  let { PromiseRep } = REPS;
-
-  const componentUnderTest = PromiseRep;
-
-  try {
-    yield testPending();
-    yield testFulfilledWithNumber();
-    yield testFulfilledWithString();
-    yield testFulfilledWithObject();
-    yield testFulfilledWithArray();
-
-    yield testOnDomNodeMouseOver();
-    yield testOnDomNodeMouseOut();
-    yield testOnDomNodeInspectIconClick();
-
-    yield testObjectLink();
-  } catch (e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-
-  function testPending() {
-    // Test object = `new Promise((resolve, reject) => true)`
-    const stub = getGripStub("testPending");
-
-    // Test that correct rep is chosen.
-    is(getRep(stub), PromiseRep.rep,
-      "Rep correctly selects PromiseRep Rep for pending Promise");
-
-    // Test rendering
-    const defaultOutput = `Promise { <state>: "pending" }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `Promise { "pending" }`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, "testPending", componentUnderTest, stub);
-  }
-  function testFulfilledWithNumber() {
-    // Test object = `Promise.resolve(42)`
-    const stub = getGripStub("testFulfilledWithNumber");
-
-    // Test that correct rep is chosen.
-    is(getRep(stub), PromiseRep.rep,
-      "Rep correctly selects PromiseRep Rep for Promise fulfilled with a number");
-
-    // Test rendering
-    const defaultOutput = `Promise { <state>: "fulfilled", <value>: 42 }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `Promise { "fulfilled" }`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, "testFulfilledWithNumber", componentUnderTest, stub);
-  }
-  function testFulfilledWithString() {
-    // Test object = `Promise.resolve("foo")`
-    const stub = getGripStub("testFulfilledWithString");
-
-    // Test that correct rep is chosen.
-    is(getRep(stub), PromiseRep.rep,
-      "Rep correctly selects PromiseRep Rep for Promise fulfilled with a string");
-
-    // Test rendering
-    const defaultOutput = `Promise { <state>: "fulfilled", <value>: "foo" }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `Promise { "fulfilled" }`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, "testFulfilledWithString", componentUnderTest, stub);
-  }
-
-  function testFulfilledWithObject() {
-    // Test object = `Promise.resolve({foo: "bar", baz: "boo"})`
-    const stub = getGripStub("testFulfilledWithObject");
-
-    // Test that correct rep is chosen.
-    is(getRep(stub), PromiseRep.rep,
-      "Rep correctly selects PromiseRep Rep for Promise fulfilled with an object");
-
-    // Test rendering
-    const defaultOutput = `Promise { <state>: "fulfilled", <value>: Object }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `Promise { "fulfilled" }`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, "testFulfilledWithObject", componentUnderTest, stub);
-  }
-
-  function testFulfilledWithArray() {
-    // Test object = `Promise.resolve([1,2,3])`
-    const stub = getGripStub("testFulfilledWithArray");
-
-    // Test that correct rep is chosen.
-    is(getRep(stub), PromiseRep.rep,
-      "Rep correctly selects PromiseRep Rep for Promise fulfilled with an array");
-
-    // Test rendering
-    const defaultOutput = `Promise { <state>: "fulfilled", <value>: [3] }`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `Promise { "fulfilled" }`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, "testFulfilledWithArray", componentUnderTest, stub);
-  }
-
-  function testOnDomNodeMouseOver() {
-    const stub = getGripStub("testFulfilledWithNode");
-
-    const grips = getSelectableInInspectorGrips(stub);
-    is(grips.length, 1, "the stub has one node grip");
-
-    let mouseOverValue;
-    let onDOMNodeMouseOver = (object) => {
-      mouseOverValue = object;
-    };
-
-    const renderedComponent = renderComponent(PromiseRep.rep, {
-      object: stub,
-      onDOMNodeMouseOver,
-    });
-
-    const node = renderedComponent.querySelector(".objectBox-node");
-    TestUtils.Simulate.mouseOver(node);
-
-    is(mouseOverValue, grips[0], "onDOMNodeMouseOver is called with " +
-      "the expected argument when mouseover is fired on the node element");
-  }
-
-  function testOnDomNodeMouseOut() {
-    const stub = getGripStub("testFulfilledWithNode");
-
-    const grips = getSelectableInInspectorGrips(stub);
-    is(grips.length, 1, "the stub has one node grip");
-
-    let called = false;
-    let onDOMNodeMouseOut = (object) => {
-      called = true;
-    };
-    const renderedComponent = renderComponent(PromiseRep.rep, {
-      object: stub,
-      onDOMNodeMouseOut,
-    });
-
-    const node = renderedComponent.querySelector(".objectBox-node");
-    TestUtils.Simulate.mouseOut(node);
-
-    is(called, true,
-      "onDOMNodeMouseOut is called when mouseout is fired on the node element");
-  }
-
-  function testOnDomNodeInspectIconClick() {
-    const stub = getGripStub("testFulfilledWithNode");
-    const grips = getSelectableInInspectorGrips(stub);
-    is(grips.length, 1, "the stub has one node grip");
-
-    let inspectIconClickedValues = null;
-    let onInspectIconClick = (object) => {
-      inspectIconClickedValues = object;
-    };
-
-    let renderedComponentWithoutInspectIcon = renderComponent(PromiseRep.rep, {
-      object: getGripStub("testFulfilledWithDisconnectedNode"),
-      onInspectIconClick,
-    });
-    is(renderedComponentWithoutInspectIcon.querySelector(".open-inspector"), null,
-      "There isn't an inspect icon when the node is not connected to the DOM tree");
-
-    const renderedComponent = renderComponent(PromiseRep.rep, {
-      object: stub,
-      onInspectIconClick,
-    });
-
-    const icon = renderedComponent.querySelector(".open-inspector");
-    ok(icon !== null, "There is an inspect icon as expected");
-
-    TestUtils.Simulate.click(icon);
-    is(inspectIconClickedValues, grips[0],
-      "onInspectIconClick is called with the expected argument " +
-      "when the inspect icon is clicked");
-  }
-
-  function testObjectLink() {
-    // Test object = `new Promise((resolve, reject) => true)`
-    const stub = getGripStub("testPending");
-
-    // Test rendering
-    const defaultOutput = `*Promise** { *<state>: "pending"* }*`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: `*Promise** { *"pending"* }*`,
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(
-      modeTests,
-      "testObjectLink",
-      componentUnderTest,
-      stub,
-      {
-        objectLink: (props, ...children) => React.DOM.span({},
-          "*", ...children, "*"),
-      }
-    );
-  }
-
-  function getGripStub(name) {
-    switch (name) {
-      case "testPending":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj54",
-          "class": "Promise",
-          "promiseState": {
-            "state": "pending",
-            "creationTimestamp": 1477327760242.5752
-          },
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "Object",
-            "ownProperties": {},
-            "ownPropertiesLength": 0,
-            "safeGetterValues": {}
-          }
-        };
-      case "testFulfilledWithNumber":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj55",
-          "class": "Promise",
-          "promiseState": {
-            "state": "fulfilled",
-            "value": 42,
-            "creationTimestamp": 1477327760242.721,
-            "timeToSettle": 0.018497000000479602
-          },
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "Object",
-            "ownProperties": {},
-            "ownPropertiesLength": 0,
-            "safeGetterValues": {}
-          }
-        };
-      case "testFulfilledWithString":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj56",
-          "class": "Promise",
-          "promiseState": {
-            "state": "fulfilled",
-            "value": "foo",
-            "creationTimestamp": 1477327760243.2483,
-            "timeToSettle": 0.0019969999998465937
-          },
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "Object",
-            "ownProperties": {},
-            "ownPropertiesLength": 0,
-            "safeGetterValues": {}
-          }
-        };
-      case "testFulfilledWithObject":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj59",
-          "class": "Promise",
-          "promiseState": {
-            "state": "fulfilled",
-            "value": {
-              "type": "object",
-              "actor": "server1.conn1.child1/obj60",
-              "class": "Object",
-              "extensible": true,
-              "frozen": false,
-              "sealed": false,
-              "ownPropertyLength": 2
-            },
-            "creationTimestamp": 1477327760243.2214,
-            "timeToSettle": 0.002035999999861815
-          },
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "Object",
-            "ownProperties": {},
-            "ownPropertiesLength": 0,
-            "safeGetterValues": {}
-          }
-        };
-      case "testFulfilledWithArray":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj57",
-          "class": "Promise",
-          "promiseState": {
-            "state": "fulfilled",
-            "value": {
-              "type": "object",
-              "actor": "server1.conn1.child1/obj58",
-              "class": "Array",
-              "extensible": true,
-              "frozen": false,
-              "sealed": false,
-              "ownPropertyLength": 4,
-              "preview": {
-                "kind": "ArrayLike",
-                "length": 3
-              }
-            },
-            "creationTimestamp": 1477327760242.9597,
-            "timeToSettle": 0.006158000000141328
-          },
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "Object",
-            "ownProperties": {},
-            "ownPropertiesLength": 0,
-            "safeGetterValues": {}
-          }
-        };
-      case "testFulfilledWithNode":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj217",
-          "class": "Promise",
-          "promiseState": {
-            "state": "fulfilled",
-            "value": {
-              "type": "object",
-              "actor": "server1.conn1.child1/obj218",
-              "class": "HTMLButtonElement",
-              "extensible": true,
-              "frozen": false,
-              "sealed": false,
-              "ownPropertyLength": 0,
-              "preview": {
-                "kind": "DOMNode",
-                "nodeType": 1,
-                "nodeName": "button",
-                "isConnected": true,
-                "attributes": {
-                  "id": "btn-1",
-                  "class": "btn btn-log",
-                  "type": "button"
-                },
-                "attributesLength": 3
-              }
-            },
-            "creationTimestamp": 1480423091620.3716,
-            "timeToSettle": 0.02842400000372436
-          },
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "Object",
-            "ownProperties": {},
-            "ownPropertiesLength": 0,
-            "safeGetterValues": {}
-          }
-        };
-      case "testFulfilledWithDisconnectedNode":
-        return {
-          "type": "object",
-          "actor": "server1.conn1.child1/obj217",
-          "class": "Promise",
-          "promiseState": {
-            "state": "fulfilled",
-            "value": {
-              "type": "object",
-              "actor": "server1.conn1.child1/obj218",
-              "class": "HTMLButtonElement",
-              "extensible": true,
-              "frozen": false,
-              "sealed": false,
-              "ownPropertyLength": 0,
-              "preview": {
-                "kind": "DOMNode",
-                "nodeType": 1,
-                "nodeName": "button",
-                "isConnected": false,
-                "attributes": {
-                  "id": "btn-1",
-                  "class": "btn btn-log",
-                  "type": "button"
-                },
-                "attributesLength": 3
-              }
-            },
-            "creationTimestamp": 1480423091620.3716,
-            "timeToSettle": 0.02842400000372436
-          },
-          "ownPropertyLength": 0,
-          "preview": {
-            "kind": "Object",
-            "ownProperties": {},
-            "ownPropertiesLength": 0,
-            "safeGetterValues": {}
-          }
-        };
-    }
-    return null;
-  }
-});
-</script>
-</pre>
-</body>
-</html>
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_regexp.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_regexp.html
deleted file mode 100644
index be76c4a76866..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_regexp.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test RegExp rep
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep test - RegExp</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-window.onload = Task.async(function* () {
-  try {
-    const {
-      REPS,
-      getRep,
-    } = browserRequire("devtools/client/shared/components/reps/reps");
-    let { RegExp } = REPS;
-
-    let gripStub = {
-      "type": "object",
-      "class": "RegExp",
-      "actor": "server1.conn22.obj39",
-      "extensible": true,
-      "frozen": false,
-      "sealed": false,
-      "ownPropertyLength": 1,
-      "displayString": "/ab+c/i"
-    };
-
-    // Test that correct rep is chosen
-    is(getRep(gripStub), RegExp.rep, "Rep correctly selects RegExp Rep");
-
-    // Test rendering
-    const renderedComponent = renderComponent(RegExp.rep, { object: gripStub });
-    is(renderedComponent.textContent, "/ab+c/i", "RegExp rep has expected text content");
-
-    // Test rendering with objectLink
-    const objectLinkRenderedComponent = renderComponent(RegExp.rep, {
-      object: gripStub,
-      objectLink: (props, ...children) => React.DOM.span({},
-        "*", ...children, "*"),
-    });
-    is(
-      objectLinkRenderedComponent.textContent,
-      "*/ab+c/i*",
-      "RegExp rep has expected text content when an objectLink is passed as a prop"
-    );
-  } catch(e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-});
-</script>
-</pre>
-</body>
-</html>
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_string.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_string.html
deleted file mode 100644
index 49a9cb9b85f6..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_string.html
+++ /dev/null
@@ -1,110 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test String rep
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep test - String</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-window.onload = Task.async(function* () {
-  const {
-    REPS,
-    getRep,
-   } = browserRequire("devtools/client/shared/components/reps/reps");
-  let { StringRep } = REPS;
-
-  const test_cases = [{
-    name: "testMultiline",
-    props: {
-      object: "aaaaaaaaaaaaaaaaaaaaa\nbbbbbbbbbbbbbbbbbbb\ncccccccccccccccc\n",
-    },
-    result: "\"aaaaaaaaaaaaaaaaaaaaa\\nbbbbbbbbbbbbbbbbbbb\\ncccccccccccccccc\\n\""
-  }, {
-    name: "testMultilineLimit",
-    props: {
-      object: "aaaaaaaaaaaaaaaaaaaaa\nbbbbbbbbbbbbbbbbbbb\ncccccccccccccccc\n",
-      cropLimit: 20
-    },
-    result: "\"aaaaaaaaa…cccccc\\n\""
-  }, {
-    name: "testMultilineOpen",
-    props: {
-      object: "aaaaaaaaaaaaaaaaaaaaa\nbbbbbbbbbbbbbbbbbbb\ncccccccccccccccc\n",
-      member: { open: true }
-    },
-    result: "\"aaaaaaaaaaaaaaaaaaaaa\\nbbbbbbbbbbbbbbbbbbb\\ncccccccccccccccc\\n\""
-  }, {
-    name: "testUseQuotes",
-    props: {
-      object: "abc",
-      useQuotes: false
-    },
-    result: "abc"
-  }, {
-    name: "testNonPrintableCharacters",
-    props: {
-      object: "a\x01b",
-      useQuotes: false
-    },
-    result: "a\ufffdb"
-  }, {
-    name: "testQuoting",
-    props: {
-      object: "\t\n\r\"'\\\x1f\x9f\ufeff\ufffe\ud8000\u2063\ufffc\u2028\ueeee",
-      useQuotes: true
-    },
-    result: "\"\\t\\n\\r\\\"'\\\\\\u001f\\u009f\\ufeff\\ufffe\\ud8000\\u2063\\ufffc\\u2028\\ueeee\""
-  }, {
-    name: "testUnpairedSurrogate",
-    props: {
-      object: "\uDC23",
-      useQuotes: true
-    },
-    result: "\"\\udc23\""
-  }, {
-    name: "testValidSurrogate",
-    props: {
-      object: "\ud83d\udeec",
-      useQuotes: true
-    },
-    result: "\"\ud83d\udeec\""
-  }, {
-    name: "testNoEscapeWhitespace",
-    props: {
-      object: "line 1\r\nline 2\n\tline 3",
-      useQuotes: true,
-      escapeWhitespace: false,
-    },
-    result: "\"line 1\r\nline 2\n\tline 3\""
-  }];
-
-  try {
-    // Test that correct rep is chosen
-    is(getRep(test_cases[0].props.object), StringRep.rep,
-      "Rep correctly selects String Rep");
-
-    // Test rendering
-    for (let test of test_cases) {
-      const renderedComponent = renderComponent(StringRep.rep, test.props);
-      is(renderedComponent.textContent, test.result, "String rep " + test.name);
-    }
-  } catch(e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-});
-</script>
-</pre>
-</body>
-</html>
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_stylesheet.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_stylesheet.html
deleted file mode 100644
index 4f4557617f13..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_stylesheet.html
+++ /dev/null
@@ -1,68 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test Stylesheet rep
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep test - Stylesheet</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-window.onload = Task.async(function* () {
-  try {
-    const {
-      REPS,
-      getRep,
-    } = browserRequire("devtools/client/shared/components/reps/reps");
-    let { StyleSheet } = REPS;
-
-    let gripStub = {
-      "type": "object",
-      "class": "CSSStyleSheet",
-      "actor": "server1.conn2.obj1067",
-      "extensible": true,
-      "frozen": false,
-      "sealed": false,
-      "ownPropertyLength": 0,
-      "preview": {
-        "kind": "ObjectWithURL",
-        "url": "https://example.com/styles.css"
-      }
-    };
-
-    // Test that correct rep is chosen
-    is(getRep(gripStub), StyleSheet.rep, "Rep correctly selects StyleSheet Rep");
-
-    // Test rendering
-    const renderedComponent = renderComponent(StyleSheet.rep, { object: gripStub });
-    is(renderedComponent.textContent, "StyleSheet https://example.com/styles.css", "StyleSheet rep has expected text content");
-
-    // Test rendering with objectLink
-    const objectLinkRenderedComponent = renderComponent(StyleSheet.rep, {
-      object: gripStub,
-      objectLink: (props, ...children) => React.DOM.span({},
-        "*", ...children, "*"),
-    });
-    is(
-      objectLinkRenderedComponent.textContent,
-      "*StyleSheet *https://example.com/styles.css",
-      "StyleSheet rep has expected text content when an objectLink is passed as a prop"
-    );
-  } catch(e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-});
-</script>
-</pre>
-</body>
-</html>
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_symbol.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_symbol.html
deleted file mode 100644
index 27b757834ce0..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_symbol.html
+++ /dev/null
@@ -1,75 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test Symbol rep
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep test - String</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-"use strict";
-/* import-globals-from head.js */
-
-window.onload = Task.async(function* () {
-  const {
-    REPS,
-    getRep,
-  } = browserRequire("devtools/client/shared/components/reps/reps");
-  let { SymbolRep } = REPS;
-
-  let gripStubs = new Map();
-  gripStubs.set("testSymbolFoo", {
-    type: "symbol",
-    name: "foo"
-  });
-  gripStubs.set("testSymbolWithoutIdentifier", {
-    type: "symbol"
-  });
-
-  try {
-    // Test that correct rep is chosen
-    is(getRep(gripStubs.get("testSymbolFoo")), SymbolRep.rep,
-      "Rep correctly selects SymbolRep Rep");
-
-    // Test rendering
-    yield testSymbol();
-    yield testSymbolWithoutIdentifier();
-  } catch (e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-
-  function testSymbol() {
-    const renderedComponent = renderComponent(
-      SymbolRep.rep,
-      { object: gripStubs.get("testSymbolFoo") }
-    );
-
-    is(renderedComponent.textContent, "Symbol(foo)",
-      "Symbol rep has expected text content");
-  }
-
-  function testSymbolWithoutIdentifier() {
-    const renderedComponent = renderComponent(
-      SymbolRep.rep,
-      { object: gripStubs.get("testSymbolWithoutIdentifier") }
-    );
-
-    is(renderedComponent.textContent, "Symbol()",
-      "Symbol rep without identifier has expected text content");
-  }
-});
-</script>
-</pre>
-</body>
-</html>
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_text-node.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_text-node.html
deleted file mode 100644
index 03ea44c0a524..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_text-node.html
+++ /dev/null
@@ -1,248 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test text-node rep
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep test - text-node</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-"use strict";
-
-window.onload = Task.async(function* () {
-  const {
-    REPS,
-    MODE,
-    getRep,
-    getSelectableInInspectorGrips,
-  } = browserRequire("devtools/client/shared/components/reps/reps");
-  let { TextNode } = REPS;
-
-  let gripStubs = new Map();
-  gripStubs.set("testRendering", {
-    "class": "Text",
-    "actor": "server1.conn1.child1/obj50",
-    "preview": {
-      "kind": "DOMNode",
-      "nodeType": 3,
-      "nodeName": "#text",
-      "textContent": "hello world",
-      "isConnected": true,
-    }
-  });
-  gripStubs.set("testRenderingDisconnected", {
-    "class": "Text",
-    "actor": "server1.conn1.child1/obj50",
-    "preview": {
-      "kind": "DOMNode",
-      "nodeType": 3,
-      "nodeName": "#text",
-      "textContent": "hello world",
-      "isConnected": false,
-    }
-  });
-  gripStubs.set("testRenderingWithEOL", {
-    "class": "Text",
-    "actor": "server1.conn1.child1/obj50",
-    "preview": {
-      "kind": "DOMNode",
-      "nodeType": 3,
-      "nodeName": "#text",
-      "textContent": "hello\nworld"
-    }
-  });
-
-  try {
-    // Test that correct rep is chosen
-    is(getRep(gripStubs.get("testRendering")), TextNode.rep,
-      "Rep correctly selects TextNode Rep");
-
-    yield testRendering();
-    yield testRenderingWithEOL();
-
-    yield testOnMouseOver();
-    yield testOnMouseOut();
-    yield testOnInspectIconClick();
-
-    yield testObjectLink();
-  } catch (e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-
-  function testRendering() {
-    const stub = gripStubs.get("testRendering");
-    const defaultOutput = `#text "hello world"`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: "#text",
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, "testRendering", TextNode, stub);
-  }
-
-  function testRenderingWithEOL() {
-    const stub = gripStubs.get("testRenderingWithEOL");
-    const defaultOutput = `#text "hello\nworld"`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: "#text",
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(modeTests, "testRenderingWithEOL", TextNode, stub);
-  }
-
-  function testOnMouseOver() {
-    const stub = gripStubs.get("testRendering");
-
-    const grips = getSelectableInInspectorGrips(stub);
-    is(grips.length, 1, "the stub has one text node grip");
-
-    let mouseOverValue;
-    let onDOMNodeMouseOver = (object) => {
-      mouseOverValue = object;
-    };
-    const renderedComponent = renderComponent(TextNode.rep, {
-      object: stub,
-      onDOMNodeMouseOver,
-    });
-
-    TestUtils.Simulate.mouseOver(renderedComponent);
-    is(mouseOverValue, grips[0], "onDOMNodeMouseOver is called " +
-      "with the expected argument when mouseover is fired on the Rep");
-  }
-
-  function testOnMouseOut() {
-    const stub = gripStubs.get("testRendering");
-
-    const grips = getSelectableInInspectorGrips(stub);
-    is(grips.length, 1, "the stub has one text node grip");
-
-    let called = false;
-    let onDOMNodeMouseOut = (object) => {
-      called = true;
-    };
-    const renderedComponent = renderComponent(TextNode.rep, {
-      object: stub,
-      onDOMNodeMouseOut,
-    });
-
-    TestUtils.Simulate.mouseOut(renderedComponent);
-    is(called, true, "onDOMNodeMouseOut is called when mouseout is fired on the Rep");
-  }
-
-  function testOnInspectIconClick() {
-    const stub = gripStubs.get("testRendering");
-
-    const grips = getSelectableInInspectorGrips(stub);
-    is(grips.length, 1, "the stub has one text node grip");
-
-    let inspectIconClickedValue = null;
-    let inspectIconClickedEvent = null;
-
-    let onInspectIconClick = (object, event) => {
-      inspectIconClickedValue = object;
-      inspectIconClickedEvent = event;
-    };
-
-    const renderedComponentWithoutInspectIcon = renderComponent(TextNode.rep, {
-      object: gripStubs.get("testRenderingDisconnected"),
-      onInspectIconClick,
-    });
-    is(renderedComponentWithoutInspectIcon.querySelector(".open-inspector"), null,
-      "There isn't an inspect icon when the node is not connected to the DOM tree");
-
-    const renderedComponent = renderComponent(TextNode.rep, {
-      object: stub,
-      onInspectIconClick,
-    });
-
-    const inspectIconNode = renderedComponent.querySelector(".open-inspector");
-    ok(inspectIconNode !== null, "There is an inspect icon as expected");
-    TestUtils.Simulate.click(inspectIconNode);
-
-    is(inspectIconClickedValue, grips[0],
-      "onInspectIconClick is called with expected value when inspect icon is clicked");
-    ok(inspectIconClickedEvent !== null && inspectIconClickedEvent.type === "click",
-      "onInspectIconClick forwarded the original event to the callback");
-  }
-
-  function testObjectLink() {
-    const stub = gripStubs.get("testRendering");
-    const defaultOutput = `*#text* "hello world"`;
-
-    const modeTests = [
-      {
-        mode: undefined,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.TINY,
-        expectedOutput: "*#text*",
-      },
-      {
-        mode: MODE.SHORT,
-        expectedOutput: defaultOutput,
-      },
-      {
-        mode: MODE.LONG,
-        expectedOutput: defaultOutput,
-      }
-    ];
-
-    testRepRenderModes(
-      modeTests,
-      "testObjectLink",
-      TextNode,
-      stub,
-      {
-        objectLink: (props, ...children) => React.DOM.span({},
-          "*", ...children, "*"),
-      }
-    );
-  }
-});
-</script>
-</pre>
-</body>
-</html>
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_undefined.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_undefined.html
deleted file mode 100644
index 350c31a6557d..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_undefined.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test undefined rep
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep test - undefined</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-window.onload = Task.async(function* () {
-  try {
-    let ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
-    let React = browserRequire("devtools/client/shared/vendor/react");
-    const {
-      REPS,
-      getRep,
-    } = browserRequire("devtools/client/shared/components/reps/reps");
-    let { Undefined } = REPS;
-
-    let gripStub = {
-      "type": "undefined"
-    };
-
-    // Test that correct rep is chosen
-    is(getRep(gripStub), Undefined.rep, "Rep correctly selects Undefined Rep");
-
-    // Test rendering
-    const renderedComponent = renderComponent(Undefined.rep, {});
-    is(renderedComponent.className, "objectBox objectBox-undefined", "Undefined rep has expected class names");
-    is(renderedComponent.textContent, "undefined", "Undefined rep has expected text content");
-  } catch(e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-});
-</script>
-</pre>
-</body>
-</html>
diff --git a/devtools/client/shared/components/reps/test/mochitest/test_reps_window.html b/devtools/client/shared/components/reps/test/mochitest/test_reps_window.html
deleted file mode 100644
index 3c7ba5e68cf4..000000000000
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_window.html
+++ /dev/null
@@ -1,116 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE HTML>
-<html>
-<!--
-Test window rep
--->
-<head>
-  <meta charset="utf-8">
-  <title>Rep tests - window</title>
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-</head>
-<body>
-<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
-window.onload = Task.async(function* () {
-  try {
-    let ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
-    let React = browserRequire("devtools/client/shared/vendor/react");
-
-    const {
-      REPS,
-      MODE,
-      getRep,
-    } = browserRequire("devtools/client/shared/components/reps/reps");
-    let { Rep, Window } = REPS;
-
-    let gripStub = {
-      "type": "object",
-      "class": "Window",
-      "actor": "server1.conn3.obj198",
-      "extensible": true,
-      "frozen": false,
-      "sealed": false,
-      "ownPropertyLength": 887,
-      "preview": {
-        "kind": "ObjectWithURL",
-        "url": "about:newtab"
-      }
-    };
-
-    // Test that correct rep is chosen
-    is(getRep(gripStub), Window.rep, "Rep correctly selects Window Rep");
-
-    // Test rendering
-    const renderedComponent = renderComponent(Rep, { object: gripStub });
-    ok(renderedComponent.className.includes("objectBox-Window"), "Window rep has expected class name");
-    is(renderedComponent.textContent, "Window about:newtab", "Window rep has expected text content");
-    const innerNode = renderedComponent.querySelector(".objectPropValue");
-    is(innerNode.textContent, "about:newtab", "Window rep has expected inner HTML structure and text content");
-
-    const tinyRenderedComponent = renderComponent(Window.rep, {
-      object: gripStub,
-      mode: MODE.TINY,
-    });
-    is(tinyRenderedComponent.textContent, "Window",
-       "Window rep has expected text content in TINY mode");
-
-    const longRenderedComponent = renderComponent(Window.rep, {
-      object: gripStub,
-      mode: MODE.LONG,
-    });
-    is(longRenderedComponent.textContent, "Window about:newtab",
-       "Window rep has expected text content in LONG mode");
-
-    const displayClassRenderedComponent = renderComponent(Window.rep, {
-      object: Object.assign({}, gripStub, {displayClass : "Custom"}),
-      mode: MODE.TINY,
-    });
-    is(displayClassRenderedComponent.textContent, "Custom",
-       "Window rep has expected text content in TINY mode with Custom display class");
-
-    const displayClassLongRenderedComponent = renderComponent(Window.rep, {
-      object: Object.assign({}, gripStub, {displayClass : "Custom"}),
-      mode: MODE.LONG,
-      title: "Custom"
-    });
-    is(displayClassLongRenderedComponent.textContent, "Custom about:newtab",
-       "Window rep has expected text content in LONG mode with Custom display class");
-
-    const objectLinkTinyRenderedComponent = renderComponent(Window.rep, {
-      object: gripStub,
-      mode: MODE.TINY,
-      objectLink: (props, ...children) => React.DOM.span({},
-        "*", ...children, "*"),
-    });
-    is(
-      objectLinkTinyRenderedComponent.textContent,
-      "*Window*",
-      "Window rep has expected text content in TINY mode when an objectLink is passed as a prop"
-    );
-
-    const objectLinkLongRenderedComponent = renderComponent(Window.rep, {
-      object: gripStub,
-      mode: MODE.LONG,
-      objectLink: (props, ...children) => React.DOM.span({},
-        "*", ...children, "*"),
-    });
-    is(
-      objectLinkLongRenderedComponent.textContent,
-      "*Window* about:newtab",
-      "Window rep has expected text content in LONG mode when an objectLink is passed as a prop"
-   );
-  } catch (e) {
-    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
-  } finally {
-    SimpleTest.finish();
-  }
-});
-</script>
-</pre>
-</body>
-</html>