Bug 1341635 - reps v0.3.0: update reps bundle from GitHub;r=nchevobbe

MozReview-Commit-ID: B1HPjgbVyJq --HG-- extra : rebase_source : f48ebd47e03fbe3f990387d66440781b9d5b06f1
2024-10-20 00:35:44 +00:00 · 2017-02-23 18:47:03 +01:00 · 2017-02-23 18:47:03 +01:00 · 71381bb50e
commit 71381bb50e
parent 4754b193c3
32 changed files with 211 additions and 141 deletions
--- a/devtools/client/shared/components/reps/load-reps.js
+++ b/devtools/client/shared/components/reps/load-reps.js
@ -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
@ -5,7 +5,6 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.

 DevToolsModules(
-    'load-reps.js',
    'reps.css',
    'reps.js',
 )
--- a/devtools/client/shared/components/reps/reps.js
+++ b/devtools/client/shared/components/reps/reps.js
@ -269,18 +269,100 @@ return /******/ (function(modules) { // webpackBootstrap
 	  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;
@ -301,12 +383,16 @@ return /******/ (function(modules) { // webpackBootstrap
 	  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");
 	}
 	
@ -492,7 +578,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	  createFactories,
 	  isGrip,
 	  cropString,
+	  rawCropString,
 	  sanitizeString,
+	  escapeString,
 	  wrapRender,
 	  cropMultipleLines,
 	  parseURLParams,
@ -613,7 +701,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	const React = __webpack_require__(3);
 	
 	const {
-	  cropString,
+	  escapeString,
+	  rawCropString,
+	  sanitizeString,
 	  wrapRender
 	} = __webpack_require__(4);
 	
@ -650,15 +740,17 @@ return /******/ (function(modules) { // webpackBootstrap
 	      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);
+	    if ((!member || !member.open) && this.props.cropLimit) {
+	      text = rawCropString(text, this.props.cropLimit);
+	    }
 	
-	    let formattedString = this.props.useQuotes ? "\"" + croppedString + "\"" : croppedString;
-	
-	    return span(config, formattedString);
+	    return span(config, text);
 	  })
 	});
 	
@ -680,6 +772,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	// Dependencies
 	const React = __webpack_require__(3);
 	const {
+	  escapeString,
 	  sanitizeString,
 	  isGrip,
 	  wrapRender
@ -727,8 +820,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	    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);
 	  })
 	});
 	
@ -2569,7 +2662,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 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 */
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_array.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_array.html
@ -20,7 +20,7 @@ Test ArrayRep rep
 /* 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;
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_attribute.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_attribute.html
@ -18,7 +18,7 @@ Test Attribute rep
 <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 = {
--- 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
@ -20,7 +20,7 @@ Test comment-node rep

 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 = {
--- 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
@ -17,7 +17,7 @@ Test DateTime rep
 <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 {
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_document.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_document.html
@ -17,7 +17,7 @@ Test Document rep
 <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 {
--- 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
@ -23,7 +23,7 @@ window.onload = Task.async(function* () {
    REPS,
    MODE,
    getSelectableInInspectorGrips,
-  } = browserRequire("devtools/client/shared/components/reps/load-reps");
+  } = browserRequire("devtools/client/shared/components/reps/reps");
  let { Rep, ElementNode } = REPS;

  try {
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_error.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_error.html
@ -19,7 +19,7 @@ Test Error rep
 "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 {
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_event.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_event.html
@ -21,7 +21,7 @@ window.onload = Task.async(function* () {
    REPS,
    MODE,
    getSelectableInInspectorGrips,
-  } = browserRequire("devtools/client/shared/components/reps/load-reps");
+  } = browserRequire("devtools/client/shared/components/reps/reps");
  let { Rep, Event } = REPS;

  try {
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_failure.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_failure.html
@ -18,7 +18,7 @@ Test fallback for rep rendering when a rep fails to render.
 <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
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_function.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_function.html
@ -17,7 +17,7 @@ Test Func rep
 <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;
--- 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
@ -21,7 +21,7 @@ window.onload = Task.async(function* () {
    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;
--- 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
@ -23,7 +23,7 @@ window.onload = Task.async(function* () {
    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;
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_grip.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_grip.html
@ -21,7 +21,7 @@ window.onload = Task.async(function* () {
    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;
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_infinity.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_infinity.html
@ -19,7 +19,7 @@ Test Infinity rep
 "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 {
--- 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
@ -17,7 +17,7 @@ Test LongString rep
 <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 {
@ -38,12 +38,16 @@ window.onload = Task.async(function* () {
    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");
  }

@ -53,7 +57,7 @@ window.onload = Task.async(function* () {

    is(
      renderedComponent.textContent,
-      `"a\naaaaaaaaaaaaaaaaaa…"`,
+      `"a\\naaaaaaaaaaaaaaaaaa…"`,
      "LongString rep has expected text content for multiline string " +
      "with specified number of characters");
  }
@ -63,7 +67,7 @@ window.onload = Task.async(function* () {
    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");
  }

@ -72,7 +76,7 @@ window.onload = Task.async(function* () {
    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");

@ -80,7 +84,7 @@ window.onload = Task.async(function* () {
      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");
  }
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_nan.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_nan.html
@ -19,7 +19,7 @@ Test NaN rep
 "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 {
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_null.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_null.html
@ -18,7 +18,7 @@ Test Null rep
 <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 = {
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_number.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_number.html
@ -17,7 +17,7 @@ Test Number rep
 <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 {
--- 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
@ -18,7 +18,7 @@ Test ObjectWithText rep
 <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 = {
--- 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
@ -21,7 +21,7 @@ window.onload = Task.async(function* () {
    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 = {
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_object.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_object.html
@ -17,7 +17,7 @@ Test Obj rep
 <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;
@ -248,9 +248,9 @@ window.onload = Task.async(function* () {
    ];

    testRepRenderModes(
-      modeTests, 
-      "testCustomTitle", 
-      componentUnderTest, 
+      modeTests,
+      "testCustomTitle",
+      componentUnderTest,
      stub, {
        title: customTitle
      }
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_promise.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_promise.html
@ -23,7 +23,7 @@ window.onload = Task.async(function* () {
    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;
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_regexp.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_regexp.html
@ -18,7 +18,7 @@ Test RegExp rep
 <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 = {
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_string.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_string.html
@ -17,61 +17,81 @@ Test String rep
 <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>
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_stylesheet.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_stylesheet.html
@ -18,7 +18,7 @@ Test Stylesheet rep
 <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 = {
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_symbol.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_symbol.html
@ -20,7 +20,7 @@ Test Symbol rep
 /* 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();
--- 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
@ -23,7 +23,7 @@ window.onload = Task.async(function* () {
    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();
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_undefined.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_undefined.html
@ -20,7 +20,7 @@ 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 = {
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_window.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_window.html
@ -21,7 +21,7 @@ window.onload = Task.async(function* () {
    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 = {