Bug 1341635 - reps v0.3.0: update reps bundle from GitHub;r=nchevobbe
authorJulian Descottes <jdescottes@mozilla.com>
Thu, 23 Feb 2017 18:47:03 +0100
changeset 344537 431bba43382d1713dc530cb1795827c9f2819a0c
parent 344536 3901e2bf125afa316c01f90f2fc159ebf5c0b345
child 344538 7fe33920b70c3d341b46949f0ec509b4b501df5f
push id31413
push usercbook@mozilla.com
push dateFri, 24 Feb 2017 10:18:46 +0000
treeherdermozilla-central@c7935d540027 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1341635
milestone54.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1341635 - reps v0.3.0: update reps bundle from GitHub;r=nchevobbe MozReview-Commit-ID: B1HPjgbVyJq
devtools/client/shared/components/reps/load-reps.js
devtools/client/shared/components/reps/moz.build
devtools/client/shared/components/reps/reps.js
devtools/client/shared/components/reps/test/mochitest/test_reps_array.html
devtools/client/shared/components/reps/test/mochitest/test_reps_attribute.html
devtools/client/shared/components/reps/test/mochitest/test_reps_comment-node.html
devtools/client/shared/components/reps/test/mochitest/test_reps_date-time.html
devtools/client/shared/components/reps/test/mochitest/test_reps_document.html
devtools/client/shared/components/reps/test/mochitest/test_reps_element-node.html
devtools/client/shared/components/reps/test/mochitest/test_reps_error.html
devtools/client/shared/components/reps/test/mochitest/test_reps_event.html
devtools/client/shared/components/reps/test/mochitest/test_reps_failure.html
devtools/client/shared/components/reps/test/mochitest/test_reps_function.html
devtools/client/shared/components/reps/test/mochitest/test_reps_grip-array.html
devtools/client/shared/components/reps/test/mochitest/test_reps_grip-map.html
devtools/client/shared/components/reps/test/mochitest/test_reps_grip.html
devtools/client/shared/components/reps/test/mochitest/test_reps_infinity.html
devtools/client/shared/components/reps/test/mochitest/test_reps_long-string.html
devtools/client/shared/components/reps/test/mochitest/test_reps_nan.html
devtools/client/shared/components/reps/test/mochitest/test_reps_null.html
devtools/client/shared/components/reps/test/mochitest/test_reps_number.html
devtools/client/shared/components/reps/test/mochitest/test_reps_object-with-text.html
devtools/client/shared/components/reps/test/mochitest/test_reps_object-with-url.html
devtools/client/shared/components/reps/test/mochitest/test_reps_object.html
devtools/client/shared/components/reps/test/mochitest/test_reps_promise.html
devtools/client/shared/components/reps/test/mochitest/test_reps_regexp.html
devtools/client/shared/components/reps/test/mochitest/test_reps_string.html
devtools/client/shared/components/reps/test/mochitest/test_reps_stylesheet.html
devtools/client/shared/components/reps/test/mochitest/test_reps_symbol.html
devtools/client/shared/components/reps/test/mochitest/test_reps_text-node.html
devtools/client/shared/components/reps/test/mochitest/test_reps_undefined.html
devtools/client/shared/components/reps/test/mochitest/test_reps_window.html
deleted file mode 100644
--- a/devtools/client/shared/components/reps/load-reps.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/* global define */
-/* 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/. */
-
-// Disable eslint strict rule because the eslint env ("es6") is incompatible with eslint
-// validation in MC (https://github.com/devtools-html/devtools-reps/issues/58)
-/* eslint-disable strict */
-
-// Make this available to both AMD and CJS environments
-define(function (require, exports, module) {
-  let REPS;
-  let MODE;
-  let createFactories;
-  let parseURLEncodedText;
-  let parseURLParams;
-  let getSelectableInInspectorGrips;
-
-  // useRepsBundle hardcoded to true to use the bundle from github. Switch back to rely
-  // on individual reps files by flipping it to false.
-  let useRepsBundle = true;
-  if (useRepsBundle) {
-    const bundle = require("devtools/client/shared/components/reps/reps");
-    REPS = bundle.REPS;
-    MODE = bundle.MODE;
-    createFactories = bundle.createFactories;
-    parseURLEncodedText = bundle.parseURLEncodedText;
-    parseURLParams = bundle.parseURLParams;
-    getSelectableInInspectorGrips = bundle.getSelectableInInspectorGrips;
-  } else {
-    // Commenting out all requires, otherwise requirejs will agressively load all
-    // dependencies when loading load-reps.js, which will fail because files have been
-    // removed.
-    // ({ createFactories, parseURLEncodedText, parseURLParams } =
-    //   require("devtools/client/shared/components/reps/rep-utils"));
-    // REPS = require("devtools/client/shared/components/reps/rep").REPS;
-    // MODE = require("devtools/client/shared/components/reps/constants").MODE;
-  }
-
-  exports.REPS = REPS;
-  exports.MODE = MODE;
-  exports.createFactories = createFactories;
-  exports.parseURLEncodedText = parseURLEncodedText;
-  exports.parseURLParams = parseURLParams;
-  exports.getSelectableInInspectorGrips = getSelectableInInspectorGrips;
-});
--- a/devtools/client/shared/components/reps/moz.build
+++ b/devtools/client/shared/components/reps/moz.build
@@ -1,13 +1,12 @@
 # -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
 # vim: set filetype=python:
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DevToolsModules(
-    'load-reps.js',
     'reps.css',
     'reps.js',
 )
 
 MOCHITEST_CHROME_MANIFESTS += ['test/mochitest/chrome.ini']
--- a/devtools/client/shared/components/reps/reps.js
+++ b/devtools/client/shared/components/reps/reps.js
@@ -264,28 +264,110 @@ return /******/ (function(modules) { // 
 	function isGrip(object) {
 	  return object && object.actor;
 	}
 	
 	function escapeNewLines(value) {
 	  return value.replace(/\r/gm, "\\r").replace(/\n/gm, "\\n");
 	}
 	
+	// Map from character code to the corresponding escape sequence.  \0
+	// isn't here because it would require special treatment in some
+	// situations.  \b, \f, and \v aren't here because they aren't very
+	// common.  \' isn't here because there's no need, we only
+	// double-quote strings.
+	const escapeMap = {
+	  // Tab.
+	  9: "\\t",
+	  // Newline.
+	  0xa: "\\n",
+	  // Carriage return.
+	  0xd: "\\r",
+	  // Quote.
+	  0x22: "\\\"",
+	  // Backslash.
+	  0x5c: "\\\\"
+	};
+	
+	// Regexp that matches any character we might possibly want to escape.
+	// Note that we over-match here, because it's difficult to, say, match
+	// an unpaired surrogate with a regexp.  The details are worked out by
+	// the replacement function; see |escapeString|.
+	const escapeRegexp = new RegExp("[" +
+	// Quote and backslash.
+	"\"\\\\" +
+	// Controls.
+	"\x00-\x1f" +
+	// More controls.
+	"\x7f-\x9f" +
+	// BOM
+	"\ufeff" +
+	// Replacement characters and non-characters.
+	"\ufffc-\uffff" +
+	// Surrogates.
+	"\ud800-\udfff" +
+	// Mathematical invisibles.
+	"\u2061-\u2064" +
+	// Line and paragraph separators.
+	"\u2028-\u2029" +
+	// Private use area.
+	"\ue000-\uf8ff" + "]", "g");
+	
+	/**
+	 * Escape a string so that the result is viewable and valid JS.
+	 * Control characters, other invisibles, invalid characters,
+	 * backslash, and double quotes are escaped.  The resulting string is
+	 * surrounded by double quotes.
+	 *
+	 * @param {String} str
+	 *        the input
+	 * @return {String} the escaped string
+	 */
+	function escapeString(str) {
+	  return "\"" + str.replace(escapeRegexp, (match, offset) => {
+	    let c = match.charCodeAt(0);
+	    if (c in escapeMap) {
+	      return escapeMap[c];
+	    }
+	    if (c >= 0xd800 && c <= 0xdfff) {
+	      // Find the full code point containing the surrogate, with a
+	      // special case for a trailing surrogate at the start of the
+	      // string.
+	      if (c >= 0xdc00 && offset > 0) {
+	        --offset;
+	      }
+	      let codePoint = str.codePointAt(offset);
+	      if (codePoint >= 0xd800 && codePoint <= 0xdfff) {
+	        // Unpaired surrogate.
+	        return "\\u" + codePoint.toString(16);
+	      } else if (codePoint >= 0xf0000 && codePoint <= 0x10fffd) {
+	        // Private use area.  Because we visit each pair of a such a
+	        // character, return the empty string for one half and the
+	        // real result for the other, to avoid duplication.
+	        if (c <= 0xdbff) {
+	          return "\\u{" + codePoint.toString(16) + "}";
+	        }
+	        return "";
+	      }
+	      // Other surrogate characters are passed through.
+	      return match;
+	    }
+	    return "\\u" + ("0000" + c.toString(16)).substr(-4);
+	  }) + "\"";
+	}
+	
 	function cropMultipleLines(text, limit) {
 	  return escapeNewLines(cropString(text, limit));
 	}
 	
-	function cropString(text, limit, alternativeText) {
+	function rawCropString(text, limit, alternativeText) {
 	  if (!alternativeText) {
 	    alternativeText = "\u2026";
 	  }
 	
-	  // Make sure it's a string and sanitize it.
-	  text = sanitizeString(text + "");
-	
 	  // Crop the string only if a limit is actually specified.
 	  if (!limit || limit <= 0) {
 	    return text;
 	  }
 	
 	  // Set the limit at least to the length of the alternative text
 	  // plus one character of the original text.
 	  if (limit <= alternativeText.length) {
@@ -296,22 +378,26 @@ return /******/ (function(modules) { // 
 	
 	  if (text.length > limit) {
 	    return text.substr(0, Math.ceil(halfLimit)) + alternativeText + text.substr(text.length - Math.floor(halfLimit));
 	  }
 	
 	  return text;
 	}
 	
+	function cropString(text, limit, alternativeText) {
+	  return rawCropString(sanitizeString(text + ""), limit, alternativeText);
+	}
+	
 	function sanitizeString(text) {
 	  // Replace all non-printable characters, except of
 	  // (horizontal) tab (HT: \x09) and newline (LF: \x0A, CR: \x0D),
 	  // with unicode replacement character (u+fffd).
 	  // eslint-disable-next-line no-control-regex
-	  let re = new RegExp("[\x00-\x08\x0B\x0C\x0E-\x1F\x80-\x9F]", "g");
+	  let re = new RegExp("[\x00-\x08\x0B\x0C\x0E-\x1F\x7F-\x9F]", "g");
 	  return text.replace(re, "\ufffd");
 	}
 	
 	function parseURLParams(url) {
 	  url = new URL(url);
 	  return parseURLEncodedText(url.searchParams);
 	}
 	
@@ -487,17 +573,19 @@ return /******/ (function(modules) { // 
 	
 	  return [];
 	}
 	
 	module.exports = {
 	  createFactories,
 	  isGrip,
 	  cropString,
+	  rawCropString,
 	  sanitizeString,
+	  escapeString,
 	  wrapRender,
 	  cropMultipleLines,
 	  parseURLParams,
 	  parseURLEncodedText,
 	  getFileName,
 	  getURLDisplayString,
 	  getSelectableInInspectorGrips
 	};
@@ -608,17 +696,19 @@ return /******/ (function(modules) { // 
 /***/ },
 /* 8 */
 /***/ function(module, exports, __webpack_require__) {
 
 	// Dependencies
 	const React = __webpack_require__(3);
 	
 	const {
-	  cropString,
+	  escapeString,
+	  rawCropString,
+	  sanitizeString,
 	  wrapRender
 	} = __webpack_require__(4);
 	
 	// Shortcuts
 	const { span } = React.DOM;
 	
 	/**
 	 * Renders a string. String value is enclosed within quotes.
@@ -645,25 +735,27 @@ return /******/ (function(modules) { // 
 	    let member = this.props.member;
 	    let style = this.props.style;
 	
 	    let config = { className: "objectBox objectBox-string" };
 	    if (style) {
 	      config.style = style;
 	    }
 	
-	    if (member && member.open) {
-	      return span(config, "\"" + text + "\"");
+	    if (this.props.useQuotes) {
+	      text = escapeString(text);
+	    } else {
+	      text = sanitizeString(text);
 	    }
 	
-	    let croppedString = this.props.cropLimit ? cropString(text, this.props.cropLimit) : cropString(text);
-	
-	    let formattedString = this.props.useQuotes ? "\"" + croppedString + "\"" : croppedString;
-	
-	    return span(config, formattedString);
+	    if ((!member || !member.open) && this.props.cropLimit) {
+	      text = rawCropString(text, this.props.cropLimit);
+	    }
+	
+	    return span(config, text);
 	  })
 	});
 	
 	function supportsObject(object, type) {
 	  return type == "string";
 	}
 	
 	// Exports from this module
@@ -675,16 +767,17 @@ return /******/ (function(modules) { // 
 
 /***/ },
 /* 9 */
 /***/ function(module, exports, __webpack_require__) {
 
 	// Dependencies
 	const React = __webpack_require__(3);
 	const {
+	  escapeString,
 	  sanitizeString,
 	  isGrip,
 	  wrapRender
 	} = __webpack_require__(4);
 	// Shortcuts
 	const { span } = React.DOM;
 	
 	/**
@@ -722,18 +815,18 @@ return /******/ (function(modules) { // 
 	      config.style = style;
 	    }
 	
 	    let string = member && member.open ? fullText || initial : initial.substring(0, cropLimit);
 	
 	    if (string.length < length) {
 	      string += "\u2026";
 	    }
-	    let formattedString = useQuotes ? `"${string}"` : string;
-	    return span(config, sanitizeString(formattedString));
+	    let formattedString = useQuotes ? escapeString(string) : sanitizeString(string);
+	    return span(config, formattedString);
 	  })
 	});
 	
 	function supportsObject(object, type) {
 	  if (!isGrip(object)) {
 	    return false;
 	  }
 	  return object.type === "longString";
@@ -2564,17 +2657,17 @@ return /******/ (function(modules) { // 
 	
 	exports['default'] = InlineSVG;
 	module.exports = exports['default'];
 
 /***/ },
 /* 31 */
 /***/ function(module, exports) {
 
-	module.exports = "<!-- 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/. --><svg , viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8,3L12,3L12,7L14,7L14,8L12,8L12,12L8,12L8,14L7,14L7,12L3,12L3,8L1,8L1,7L3,7L3,3L7,3L7,1L8,1L8,3ZM10,10L10,5L5,5L5,10L10,10Z\"></path></svg>"
+	module.exports = "<!-- 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/. --><svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8,3L12,3L12,7L14,7L14,8L12,8L12,12L8,12L8,14L7,14L7,12L3,12L3,8L1,8L1,7L3,7L3,3L7,3L7,1L8,1L8,3ZM10,10L10,5L5,5L5,10L10,10Z\"></path></svg>"
 
 /***/ },
 /* 32 */
 /***/ function(module, exports, __webpack_require__) {
 
 	// ReactJS
 	const React = __webpack_require__(3);
 	
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_array.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_array.html
@@ -15,17 +15,17 @@ Test ArrayRep rep
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 "use strict";
 /* import-globals-from head.js */
 
 window.onload = Task.async(function* () {
-  const { REPS, MODE } = browserRequire("devtools/client/shared/components/reps/load-reps");
+  const { REPS, MODE } = browserRequire("devtools/client/shared/components/reps/reps");
   let { Rep, ArrayRep } = REPS;
 
   let componentUnderTest = ArrayRep;
   const maxLength = {
     short: 3,
     long: 10
   };
 
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_attribute.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_attribute.html
@@ -13,17 +13,17 @@ Test Attribute rep
   <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;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
-    const { REPS } = browserRequire("devtools/client/shared/components/reps/load-reps");
+    const { REPS } = browserRequire("devtools/client/shared/components/reps/reps");
     let { Rep, Attribute } = REPS;
 
     let gripStub = {
       "type": "object",
       "class": "Attr",
       "actor": "server1.conn19.obj65",
       "extensible": true,
       "frozen": false,
--- 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
@@ -15,17 +15,17 @@ Test comment-node rep
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 "use strict";
 
 window.onload = Task.async(function* () {
   try {
-    const { REPS, MODE } = browserRequire("devtools/client/shared/components/reps/load-reps");
+    const { REPS, MODE } = browserRequire("devtools/client/shared/components/reps/reps");
     let { Rep, CommentNode } = REPS;
 
     let gripStub = {
       "type": "object",
       "actor": "server1.conn1.child1/obj47",
       "class": "Comment",
       "extensible": true,
       "frozen": false,
--- 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
@@ -12,17 +12,17 @@ Test DateTime rep
   <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;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
-  const { REPS } = browserRequire("devtools/client/shared/components/reps/load-reps");
+  const { REPS } = browserRequire("devtools/client/shared/components/reps/reps");
   let { Rep, DateTime } = REPS;
 
   try {
     testValid();
     testInvalid();
   } catch(e) {
     ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
   } finally {
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_document.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_document.html
@@ -12,17 +12,17 @@ Test Document rep
   <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;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
-  const { REPS } = browserRequire("devtools/client/shared/components/reps/load-reps");
+  const { REPS } = browserRequire("devtools/client/shared/components/reps/reps");
   let { Rep, Document } = REPS;
 
   try {
     let gripStub = {
       "type": "object",
       "class": "HTMLDocument",
       "actor": "server1.conn17.obj115",
       "extensible": true,
--- 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
@@ -18,17 +18,17 @@ Test Element node rep
 <script type="application/javascript;version=1.8">
 "use strict";
 
 window.onload = Task.async(function* () {
   const {
     REPS,
     MODE,
     getSelectableInInspectorGrips,
-  } = browserRequire("devtools/client/shared/components/reps/load-reps");
+  } = browserRequire("devtools/client/shared/components/reps/reps");
   let { Rep, ElementNode } = REPS;
 
   try {
     yield testBodyNode();
     yield testDocumentElement();
     yield testNode();
     yield testNodeWithLeadingAndTrailingSpacesClassName();
     yield testNodeWithoutAttributes();
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_error.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_error.html
@@ -14,17 +14,17 @@ Test Error rep
 </head>
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 "use strict";
 
 window.onload = Task.async(function* () {
-  const { REPS, MODE } = browserRequire("devtools/client/shared/components/reps/load-reps");
+  const { REPS, MODE } = browserRequire("devtools/client/shared/components/reps/reps");
   let { Rep, ErrorRep } = REPS;
 
   try {
     // Test errors with different properties
     yield testSimpleError();
     yield testMultilineStackError();
     yield testErrorWithoutStacktrace();
 
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_event.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_event.html
@@ -16,17 +16,17 @@ Test Event rep
 <pre id="test">
 <script src="head.js" type="application/javascript;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   const {
     REPS,
     MODE,
     getSelectableInInspectorGrips,
-  } = browserRequire("devtools/client/shared/components/reps/load-reps");
+  } = browserRequire("devtools/client/shared/components/reps/reps");
   let { Rep, Event } = REPS;
 
   try {
     // Test that correct rep is chosen
     const renderedRep = shallowRenderComponent(Rep, { object: getGripStub("testEvent") });
     is(renderedRep.type, Event.rep, `Rep correctly selects ${Event.rep.displayName}`);
 
     yield testEvent();
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_failure.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_failure.html
@@ -13,17 +13,17 @@ Test fallback for rep rendering when a r
   <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;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
-    const { REPS } = browserRequire("devtools/client/shared/components/reps/load-reps");
+    const { REPS } = browserRequire("devtools/client/shared/components/reps/reps");
     let { Rep, 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",
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_function.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_function.html
@@ -12,17 +12,17 @@ Test Func rep
   <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;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
-  const { REPS, MODE } = browserRequire("devtools/client/shared/components/reps/load-reps");
+  const { REPS, MODE } = browserRequire("devtools/client/shared/components/reps/reps");
   let { Rep, Func } = REPS;
 
   const componentUnderTest = Func;
 
   try {
     // Test that correct rep is chosen
     const gripStub = getGripStub("testNamed");
     const renderedRep = shallowRenderComponent(Rep, { object: gripStub });
--- 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
@@ -16,17 +16,17 @@ Test GripArray rep
 <pre id="test">
 <script src="head.js" type="application/javascript;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   const {
     REPS,
     MODE,
     getSelectableInInspectorGrips,
-  } = browserRequire("devtools/client/shared/components/reps/load-reps");
+  } = browserRequire("devtools/client/shared/components/reps/reps");
   let { Rep, GripArray } = REPS;
 
   let componentUnderTest = GripArray;
   const maxLength = {
     short: 3,
     long: 10
   };
 
--- 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
@@ -18,17 +18,17 @@ Test GripMap rep
 <script type="application/javascript;version=1.8">
 "use strict";
 
 window.onload = Task.async(function* () {
   const {
     REPS,
     MODE,
     getSelectableInInspectorGrips,
-  } = browserRequire("devtools/client/shared/components/reps/load-reps");
+  } = browserRequire("devtools/client/shared/components/reps/reps");
   let { Rep, GripMap } = REPS;
 
   const componentUnderTest = GripMap;
 
   try {
     yield testEmptyMap();
     yield testSymbolKeyedMap();
     yield testWeakMap();
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_grip.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_grip.html
@@ -16,17 +16,17 @@ Test grip rep
 <pre id="test">
 <script src="head.js" type="application/javascript;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   const {
     REPS,
     MODE,
     getSelectableInInspectorGrips,
-  } = browserRequire("devtools/client/shared/components/reps/load-reps");
+  } = browserRequire("devtools/client/shared/components/reps/reps");
   let { Rep, Grip } = REPS;
 
   const componentUnderTest = Grip;
 
   try {
     yield testBasic();
     yield testBooleanObject();
     yield testNumberObject();
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_infinity.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_infinity.html
@@ -14,17 +14,17 @@ Test Infinity rep
 </head>
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 "use strict";
 
 window.onload = Task.async(function* () {
-  const { REPS } = browserRequire("devtools/client/shared/components/reps/load-reps");
+  const { REPS } = browserRequire("devtools/client/shared/components/reps/reps");
   let { Rep, InfinityRep } = REPS;
 
   try {
     yield testInfinity();
     yield testNegativeInfinity();
   } catch (e) {
     ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
   } finally {
--- 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
@@ -12,17 +12,17 @@ Test LongString rep
   <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;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
-  const { REPS } = browserRequire("devtools/client/shared/components/reps/load-reps");
+  const { REPS } = browserRequire("devtools/client/shared/components/reps/reps");
   let { Rep, LongStringRep } = REPS;
 
   try {
     // Test that correct rep is chosen
     const renderedRep = shallowRenderComponent(Rep, { object: getGripStub("testMultiline") });
     is(renderedRep.type, LongStringRep.rep,
       `Rep correctly selects ${LongStringRep.rep.displayName}`);
 
@@ -33,59 +33,63 @@ window.onload = Task.async(function* () 
     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, `"${stub.initial}…"`,
+    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…"`,
+      `"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, `"${stub.initial}…"`,
+    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, `"${stub.fullText}"`,
+    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…"`,
+      `"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 });
 
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_nan.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_nan.html
@@ -14,17 +14,17 @@ Test NaN rep
 </head>
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 "use strict";
 
 window.onload = Task.async(function* () {
-  const { REPS } = browserRequire("devtools/client/shared/components/reps/load-reps");
+  const { REPS } = browserRequire("devtools/client/shared/components/reps/reps");
   let { Rep, NaNRep } = REPS;
 
   try {
     yield testNaN();
   } catch (e) {
     ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
   } finally {
     SimpleTest.finish();
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_null.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_null.html
@@ -13,17 +13,17 @@ Test Null rep
   <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;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
-    const { REPS } = browserRequire("devtools/client/shared/components/reps/load-reps");
+    const { REPS } = browserRequire("devtools/client/shared/components/reps/reps");
     let { Rep, Null } = REPS;
 
     let gripStub = {
       "type": "null"
     };
 
     // Test that correct rep is chosen
     const renderedRep = shallowRenderComponent(Rep, { object: gripStub });
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_number.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_number.html
@@ -12,17 +12,17 @@ Test Number rep
   <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;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
-  const { REPS } = browserRequire("devtools/client/shared/components/reps/load-reps");
+  const { REPS } = browserRequire("devtools/client/shared/components/reps/reps");
   let { Rep, Number } = REPS;
 
   try {
     yield testInt();
     yield testBoolean();
     yield testNegativeZero();
     yield testUnsafeInt();
   } catch(e) {
--- 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
@@ -13,17 +13,17 @@ Test ObjectWithText rep
   <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;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
-    const { REPS } = browserRequire("devtools/client/shared/components/reps/load-reps");
+    const { REPS } = browserRequire("devtools/client/shared/components/reps/reps");
     let { Rep, ObjectWithText } = REPS;
 
     let gripStub = {
       "type": "object",
       "class": "CSSStyleRule",
       "actor": "server1.conn3.obj273",
       "extensible": true,
       "frozen": false,
--- 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
@@ -16,17 +16,17 @@ Test ObjectWithURL rep
 <pre id="test">
 <script src="head.js" type="application/javascript;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 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 } = browserRequire("devtools/client/shared/components/reps/load-reps");
+    const { REPS } = browserRequire("devtools/client/shared/components/reps/reps");
     let { Rep, ObjectWithURL } = REPS;
 
     let gripStub = {
       "type": "object",
       "class": "Location",
       "actor": "server1.conn2.obj272",
       "extensible": true,
       "frozen": false,
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_object.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_object.html
@@ -12,17 +12,17 @@ Test Obj rep
   <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;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
-  const { REPS, MODE } = browserRequire("devtools/client/shared/components/reps/load-reps");
+  const { REPS, MODE } = browserRequire("devtools/client/shared/components/reps/reps");
   let { Rep, Obj } = REPS;
 
   const componentUnderTest = Obj;
 
   try {
     yield testBasic();
 
     // Test property iterator
@@ -243,19 +243,19 @@ window.onload = Task.async(function* () 
       },
       {
         mode: MODE.LONG,
         expectedOutput: defaultOutput,
       }
     ];
 
     testRepRenderModes(
-      modeTests, 
-      "testCustomTitle", 
-      componentUnderTest, 
+      modeTests,
+      "testCustomTitle",
+      componentUnderTest,
       stub, {
         title: customTitle
       }
     );
   }
 });
 </script>
 </pre>
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_promise.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_promise.html
@@ -18,17 +18,17 @@ Test Promise rep
 <script type="application/javascript;version=1.8">
 "use strict";
 
 window.onload = Task.async(function* () {
   const {
     REPS,
     MODE,
     getSelectableInInspectorGrips,
-  } = browserRequire("devtools/client/shared/components/reps/load-reps");
+  } = browserRequire("devtools/client/shared/components/reps/reps");
   let { Rep, PromiseRep } = REPS;
 
   const componentUnderTest = PromiseRep;
 
   try {
     yield testPending();
     yield testFulfilledWithNumber();
     yield testFulfilledWithString();
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_regexp.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_regexp.html
@@ -13,17 +13,17 @@ Test RegExp rep
   <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;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
-    const { REPS } = browserRequire("devtools/client/shared/components/reps/load-reps");
+    const { REPS } = browserRequire("devtools/client/shared/components/reps/reps");
     let { Rep, RegExp } = REPS;
 
     let gripStub = {
       "type": "object",
       "class": "RegExp",
       "actor": "server1.conn22.obj39",
       "extensible": true,
       "frozen": false,
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_string.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_string.html
@@ -12,68 +12,88 @@ Test String rep
   <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;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
-  const { REPS } = browserRequire("devtools/client/shared/components/reps/load-reps");
+  const { REPS } = browserRequire("devtools/client/shared/components/reps/reps");
   let { Rep, 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\""
+  }];
+
   try {
     // Test that correct rep is chosen
-    const renderedRep = shallowRenderComponent(Rep, { object: getGripStub("testMultiline") });
+    const renderedRep = shallowRenderComponent(Rep, test_cases[0].props);
     is(renderedRep.type, StringRep.rep, `Rep correctly selects ${StringRep.rep.displayName}`);
 
     // Test rendering
-    yield testMultiline();
-    yield testMultilineOpen();
-    yield testMultilineLimit();
-    yield testUseQuotes();
-    yield testNonPritableCharacters();
+    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();
   }
-
-  function testMultiline() {
-    const renderedComponent = renderComponent(StringRep.rep, { object: getGripStub("testMultiline") });
-    is(renderedComponent.textContent, "\"aaaaaaaaaaaaaaaaaaaaa\nbbbbbbbbbbbbbbbbbbb\ncccccccccccccccc\n\"", "String rep has expected text content for multiline string");
-  }
-
-  function testMultilineLimit() {
-    const renderedComponent = renderComponent(StringRep.rep, { object: getGripStub("testMultiline"), cropLimit: 20 });
-    is(renderedComponent.textContent, "\"aaaaaaaaaa…cccccccc\n\"", "String rep has expected text content for multiline string with specified number of characters");
-  }
-
-  function testMultilineOpen() {
-    const renderedComponent = renderComponent(StringRep.rep, { object: getGripStub("testMultiline"), member: {open: true} });
-    is(renderedComponent.textContent, "\"aaaaaaaaaaaaaaaaaaaaa\nbbbbbbbbbbbbbbbbbbb\ncccccccccccccccc\n\"", "String rep has expected text content for multiline string when open");
-  }
-
-  function testUseQuotes(){
-     const renderedComponent = renderComponent(StringRep.rep, { object: getGripStub("testUseQuotes"), useQuotes: false });
-     is(renderedComponent.textContent, "abc", "String rep was expected to omit quotes");
-  }
-
-  function testNonPritableCharacters(){
-     const renderedComponent = renderComponent(StringRep.rep, { object: getGripStub("testNonPritableCharacters"), useQuotes: false });
-     is(renderedComponent.textContent, "a\ufffdb", "String rep was expected to omit non printable characters");
-  }
-
-  function getGripStub(name) {
-    switch (name) {
-      case "testMultiline":
-        return "aaaaaaaaaaaaaaaaaaaaa\nbbbbbbbbbbbbbbbbbbb\ncccccccccccccccc\n";
-      case "testUseQuotes":
-        return "abc";
-      case "testNonPritableCharacters":
-        return "a\x01b";
-    }
-  }
 });
 </script>
 </pre>
 </body>
 </html>
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_stylesheet.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_stylesheet.html
@@ -13,17 +13,17 @@ Test Stylesheet rep
   <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;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
-    const { REPS } = browserRequire("devtools/client/shared/components/reps/load-reps");
+    const { REPS } = browserRequire("devtools/client/shared/components/reps/reps");
     let { Rep, StyleSheet } = REPS;
 
     let gripStub = {
       "type": "object",
       "class": "CSSStyleSheet",
       "actor": "server1.conn2.obj1067",
       "extensible": true,
       "frozen": false,
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_symbol.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_symbol.html
@@ -15,17 +15,17 @@ Test Symbol rep
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 "use strict";
 /* import-globals-from head.js */
 
 window.onload = Task.async(function* () {
-  const { REPS } = browserRequire("devtools/client/shared/components/reps/load-reps");
+  const { REPS } = browserRequire("devtools/client/shared/components/reps/reps");
   let { Rep, SymbolRep } = REPS;
 
   let gripStubs = new Map();
   gripStubs.set("testSymbolFoo", {
     type: "symbol",
     name: "foo"
   });
   gripStubs.set("testSymbolWithoutIdentifier", {
--- 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
@@ -18,17 +18,17 @@ Test text-node rep
 <script type="application/javascript;version=1.8">
 "use strict";
 
 window.onload = Task.async(function* () {
   const {
     REPS,
     MODE,
     getSelectableInInspectorGrips,
-  } = browserRequire("devtools/client/shared/components/reps/load-reps");
+  } = browserRequire("devtools/client/shared/components/reps/reps");
   let { Rep, TextNode } = REPS;
 
   let gripStubs = new Map();
   gripStubs.set("testRendering", {
     "class": "Text",
     "actor": "server1.conn1.child1/obj50",
     "preview": {
       "kind": "DOMNode",
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_undefined.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_undefined.html
@@ -15,17 +15,17 @@ Test undefined rep
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 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 } = browserRequire("devtools/client/shared/components/reps/load-reps");
+    const { REPS } = browserRequire("devtools/client/shared/components/reps/reps");
     let { Rep, Undefined } = REPS;
 
     let gripStub = {
       "type": "undefined"
     };
 
     // Test that correct rep is chosen
     const renderedRep = shallowRenderComponent(Rep, { object: gripStub });
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_window.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_window.html
@@ -16,17 +16,17 @@ Test window rep
 <pre id="test">
 <script src="head.js" type="application/javascript;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 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 } = browserRequire("devtools/client/shared/components/reps/load-reps");
+    const { REPS, MODE } = 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,