Bug 1344156 - reps v0.4.0: update reps bundle from GitHub;r=tromey

MozReview-Commit-ID: 4vQozULRsrP --HG-- extra : rebase_source : be7a35bd3a0adcd802c5a9d6873676070ca15a65
2017-03-03 10:28:32 +01:00 · 2017-03-03 10:28:32 +01:00 · 855c64b0d5
--- a/devtools/client/shared/components/reps/reps.js
+++ b/devtools/client/shared/components/reps/reps.js
@ -60,13 +60,15 @@ return /******/ (function(modules) { // webpackBootstrap
 	  createFactories,
 	  parseURLEncodedText,
 	  parseURLParams,
-	  getSelectableInInspectorGrips
+	  getSelectableInInspectorGrips,
+	  maybeEscapePropertyName
 	} = __webpack_require__(4);
 	
 	module.exports = {
 	  REPS,
 	  MODE,
 	  createFactories,
+	  maybeEscapePropertyName,
 	  parseURLEncodedText,
 	  parseURLParams,
 	  getSelectableInInspectorGrips
@ -354,6 +356,29 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }) + "\"";
 	}
 	
+	/**
+	 * Escape a property name, if needed.  "Escaping" in this context
+	 * means surrounding the property name with quotes.
+	 *
+	 * @param {String}
+	 *        name the property name
+	 * @return {String} either the input, or the input surrounded by
+	 *                  quotes, properly quoted in JS syntax.
+	 */
+	function maybeEscapePropertyName(name) {
+	  // Quote the property name if it needs quoting.  This particular
+	  // test is an approximation; see
+	  // https://mathiasbynens.be/notes/javascript-properties.  However,
+	  // the full solution requires a fair amount of Unicode data, and so
+	  // let's defer that until either it's important, or the \p regexp
+	  // syntax lands, see
+	  // https://github.com/tc39/proposal-regexp-unicode-property-escapes.
+	  if (!/^\w+$/.test(name)) {
+	    name = escapeString(name);
+	  }
+	  return name;
+	}
+	
 	function cropMultipleLines(text, limit) {
 	  return escapeNewLines(cropString(text, limit));
 	}
@ -587,7 +612,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	  parseURLEncodedText,
 	  getFileName,
 	  getURLDisplayString,
-	  getSelectableInInspectorGrips
+	  getSelectableInInspectorGrips,
+	  maybeEscapePropertyName
 	};

 /***/ },
@ -978,9 +1004,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	      return x === y.toString();
 	    }
 	
-	    let props = Object.getOwnPropertyNames(array);
-	    for (let i = 0; i < props.length; i++) {
-	      let p = props[i];
+	    let propsArray = Object.getOwnPropertyNames(array);
+	    for (let i = 0; i < propsArray.length; i++) {
+	      let p = propsArray[i];
 	
 	      // Valid indexes are skipped
 	      if (isInteger(p)) {
@ -1268,6 +1294,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	const React = __webpack_require__(3);
 	const {
 	  createFactories,
+	  maybeEscapePropertyName,
 	  wrapRender
 	} = __webpack_require__(4);
 	const { MODE } = __webpack_require__(1);
@ -1295,7 +1322,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	    attachedActorIds: React.PropTypes.array,
 	    onDOMNodeMouseOver: React.PropTypes.func,
 	    onDOMNodeMouseOut: React.PropTypes.func,
-	    onInspectIconClick: React.PropTypes.func
+	    onInspectIconClick: React.PropTypes.func,
+	    // Normally a PropRep will quote a property name that isn't valid
+	    // when unquoted; but this flag can be used to suppress the
+	    // quoting.
+	    suppressQuotes: React.PropTypes.bool
 	  },
 	
 	  render: wrapRender(function () {
@ -1305,14 +1336,18 @@ return /******/ (function(modules) { // webpackBootstrap
 	      name,
 	      mode,
 	      equal,
-	      delim
+	      delim,
+	      suppressQuotes
 	    } = this.props;
 	
 	    let key;
 	    // The key can be a simple string, for plain objects,
 	    // or another object for maps and weakmaps.
-	    if (typeof this.props.name === "string") {
-	      key = span({ "className": "nodeName" }, this.props.name);
+	    if (typeof name === "string") {
+	      if (!suppressQuotes) {
+	        name = maybeEscapePropertyName(name);
+	      }
+	      key = span({ "className": "nodeName" }, name);
 	    } else {
 	      key = Rep(Object.assign({}, this.props, {
 	        object: name,
@ -1424,19 +1459,24 @@ return /******/ (function(modules) { // webpackBootstrap
 	    }
 	
 	    const truncate = Object.keys(properties).length > max;
-	    let props = this.getProps(properties, indexes, truncate);
+	    // The server synthesizes some property names for a Proxy, like
+	    // <target> and <handler>; we don't want to quote these because,
+	    // as synthetic properties, they appear more natural when
+	    // unquoted.
+	    const suppressQuotes = object.class === "Proxy";
+	    let propsArray = this.getProps(properties, indexes, truncate, suppressQuotes);
 	    if (truncate) {
 	      // There are some undisplayed props. Then display "more...".
 	      let objectLink = this.props.objectLink || span;
 	
-	      props.push(Caption({
+	      propsArray.push(Caption({
 	        object: objectLink({
 	          object: object
 	        }, `${propertiesLength - max} more…`)
 	      }));
 	    }
 	
-	    return props;
+	    return propsArray;
 	  },
 	
 	  /**
@ -1445,10 +1485,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	   * @param {Object} properties Props object.
 	   * @param {Array} indexes Indexes of props.
 	   * @param {Boolean} truncate true if the grip will be truncated.
+	   * @param {Boolean} suppressQuotes true if we should suppress quotes
+	   *                  on property names.
 	   * @return {Array} Props.
 	   */
-	  getProps: function (properties, indexes, truncate) {
-	    let props = [];
+	  getProps: function (properties, indexes, truncate, suppressQuotes) {
+	    let propsArray = [];
 	
 	    // Make indexes ordered by ascending.
 	    indexes.sort(function (a, b) {
@ -1459,7 +1501,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	      let name = Object.keys(properties)[i];
 	      let value = this.getPropValue(properties[name]);
 	
-	      props.push(PropRep(Object.assign({}, this.props, {
+	      propsArray.push(PropRep(Object.assign({}, this.props, {
 	        mode: MODE.TINY,
 	        name: name,
 	        object: value,
@ -1467,11 +1509,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	        delim: i !== indexes.length - 1 || truncate ? ", " : "",
 	        defaultRep: Grip,
 	        // Do not propagate title to properties reps
-	        title: undefined
+	        title: undefined,
+	        suppressQuotes
 	      })));
 	    });
 	
-	    return props;
+	    return propsArray;
 	  },
 	
 	  /**
@ -1530,7 +1573,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	  render: wrapRender(function () {
 	    let object = this.props.object;
-	    let props = this.safePropIterator(object, this.props.mode === MODE.LONG ? 10 : 3);
+	    let propsArray = this.safePropIterator(object, this.props.mode === MODE.LONG ? 10 : 3);
 	
 	    let objectLink = this.props.objectLink || span;
 	    if (this.props.mode === MODE.TINY) {
@ -1543,7 +1586,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    return span({ className: "objectBox objectBox-object" }, this.getTitle(object), objectLink({
 	      className: "objectLeftBrace",
 	      object: object
-	    }, " { "), ...props, objectLink({
+	    }, " { "), ...propsArray, objectLink({
 	      className: "objectRightBrace",
 	      object: object
 	    }, " }"));
@ -2114,7 +2157,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	        name: `<${key}>`,
 	        object,
 	        equal: ": ",
-	        delim: i < keys.length - 1 ? ", " : ""
+	        delim: i < keys.length - 1 ? ", " : "",
+	        suppressQuotes: true
 	      }));
 	    });
 	  },
@ -2136,11 +2180,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	      }, " }"));
 	    }
 	
-	    const props = this.getProps(promiseState);
+	    const propsArray = this.getProps(promiseState);
 	    return span({ className: "objectBox objectBox-object" }, this.getTitle(object), objectLink({
 	      className: "objectLeftBrace",
 	      object: object
-	    }, " { "), ...props, objectLink({
+	    }, " { "), ...propsArray, objectLink({
 	      className: "objectRightBrace",
 	      object: object
 	    }, " }"));
@ -2456,7 +2500,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	          draggable: false,
 	          // TODO: Localize this with "openNodeInInspector" when Bug 1317038 lands
 	          title: "Click to select the node in the inspector",
-	          onClick: () => onInspectIconClick(object)
+	          onClick: e => onInspectIconClick(object, e)
 	        });
 	      }
 	    }
@ -2747,7 +2791,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	          draggable: false,
 	          // TODO: Localize this with "openNodeInInspector" when Bug 1317038 lands
 	          title: "Click to select the node in the inspector",
-	          onClick: () => onInspectIconClick(grip)
+	          onClick: e => onInspectIconClick(grip, e)
 	        });
 	      }
 	    }
@ -3404,7 +3448,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	  render: wrapRender(function () {
 	    let object = this.props.object;
-	    let props = this.safeEntriesIterator(object, this.props.mode === MODE.LONG ? 10 : 3);
+	    let propsArray = this.safeEntriesIterator(object, this.props.mode === MODE.LONG ? 10 : 3);
 	
 	    let objectLink = this.props.objectLink || span;
 	    if (this.props.mode === MODE.TINY) {
@ -3417,7 +3461,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    return span({ className: "objectBox objectBox-object" }, this.getTitle(object), objectLink({
 	      className: "objectLeftBrace",
 	      object: object
-	    }, " { "), props, objectLink({
+	    }, " { "), propsArray, objectLink({
 	      className: "objectRightBrace",
 	      object: object
 	    }, " }"));
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_array.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_array.html
@ -14,8 +14,8 @@ Test ArrayRep rep
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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 */

--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_attribute.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_attribute.html
@ -14,8 +14,8 @@ Test Attribute rep
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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/reps");
--- 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
@ -14,8 +14,8 @@ Test comment-node rep
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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* () {
--- 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
@ -14,8 +14,8 @@ Test DateTime rep
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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/reps");
  let { Rep, DateTime } = REPS;
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_document.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_document.html
@ -14,8 +14,8 @@ Test Document rep
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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/reps");
  let { Rep, Document } = REPS;
--- 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
@ -14,8 +14,8 @@ Test Element node rep
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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* () {
@ -233,8 +233,11 @@ window.onload = Task.async(function* () {
    const attachedActorIds = getStubAttachedActorIds(grips);

    let inspectIconClickedValue = null;
-    let onInspectIconClick = (object) => {
+    let inspectIconClickedEvent = null;
+
+    let onInspectIconClick = (object, event) => {
      inspectIconClickedValue = object;
+      inspectIconClickedEvent = event;
    };

    const renderedComponentWithoutInspectIcon = renderComponent(ElementNode.rep, {
@ -265,6 +268,8 @@ window.onload = Task.async(function* () {

    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 getGripStub(name) {
--- 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,8 +14,8 @@ Test Error rep
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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* () {
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_event.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_event.html
@ -14,8 +14,8 @@ Test Event rep
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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,
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_failure.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_failure.html
@ -14,8 +14,8 @@ Test fallback for rep rendering when a rep fails to render.
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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/reps");
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_function.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_function.html
@ -14,8 +14,8 @@ Test Func rep
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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/reps");
  let { Rep, Func } = REPS;
--- 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
@ -14,8 +14,8 @@ Test GripArray rep
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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,
--- 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
@ -14,8 +14,8 @@ Test GripMap rep
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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* () {
@ -156,7 +156,7 @@ window.onload = Task.async(function* () {
    // `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 defaultOutput = `Map { "key-a": "value-a", "key-b": "value-b", "key-c": "value-c" }`;

    const modeTests = [
      {
@ -186,10 +186,10 @@ window.onload = Task.async(function* () {
    const testName = "testMoreThanMaxEntries";

    const defaultOutput =
-      `Map { key-0: "value-0", key-1: "value-1", key-2: "value-2", 98 more… }`;
+      `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}"`);
+    let longString = Array.from({length: 10}).map((_, i) => `"key-${i}": "value-${i}"`);
    const longOutput = `Map { ${longString.join(", ")}, 91 more… }`;

    const modeTests = [
@ -220,9 +220,9 @@ window.onload = Task.async(function* () {
    const testName = "testUninterestingEntries";

    const defaultOutput =
-      `Map { key-a: null, key-c: "value-c", key-d: 4, 1 more… }`;
+      `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 }`;
+      `Map { "key-a": null, "key-b": undefined, "key-c": "value-c", "key-d": 4 }`;

    const modeTests = [
      {
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_grip.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_grip.html
@ -14,8 +14,8 @@ Test grip rep
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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,
--- 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,8 +14,8 @@ Test Infinity rep
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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* () {
--- 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
@ -14,8 +14,8 @@ Test LongString rep
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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/reps");
  let { Rep, LongStringRep } = REPS;
--- 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,8 +14,8 @@ Test NaN rep
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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* () {
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_null.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_null.html
@ -14,8 +14,8 @@ Test Null rep
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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/reps");
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_number.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_number.html
@ -14,8 +14,8 @@ Test Number rep
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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/reps");
  let { Rep, Number } = REPS;
--- 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
@ -14,8 +14,8 @@ Test ObjectWithText rep
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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/reps");
--- 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
@ -14,8 +14,8 @@ Test ObjectWithURL rep
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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");
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_object.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_object.html
@ -14,8 +14,8 @@ Test Obj rep
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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/reps");
  let { Rep, Obj } = REPS;
@ -30,6 +30,9 @@ window.onload = Task.async(function* () {
    yield testMoreThanMaxProps();
    yield testUninterestingProps();

+    // Test that unusual property names are escaped.
+    yield testEscapedPropertyNames();
+
    // Test that properties are rendered as expected by PropRep
    yield testNested();

@ -159,6 +162,32 @@ window.onload = Task.async(function* () {
    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: {
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_promise.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_promise.html
@ -14,8 +14,8 @@ Test Promise rep
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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* () {
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_regexp.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_regexp.html
@ -14,8 +14,8 @@ Test RegExp rep
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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/reps");
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_string.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_string.html
@ -14,8 +14,8 @@ Test String rep
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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/reps");
  let { Rep, StringRep } = REPS;
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_stylesheet.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_stylesheet.html
@ -14,8 +14,8 @@ Test Stylesheet rep
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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/reps");
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_symbol.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_symbol.html
@ -14,8 +14,8 @@ Test Symbol rep
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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 */

--- 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
@ -14,8 +14,8 @@ Test text-node rep
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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* () {
@ -172,8 +172,11 @@ window.onload = Task.async(function* () {
    const attachedActorIds = getStubAttachedActorIds(grips);

    let inspectIconClickedValue = null;
-    let onInspectIconClick = (object) => {
+    let inspectIconClickedEvent = null;
+
+    let onInspectIconClick = (object, event) => {
      inspectIconClickedValue = object;
+      inspectIconClickedEvent = event;
    };

    const renderedComponentWithoutInspectIcon = renderComponent(TextNode.rep, {
@ -196,6 +199,8 @@ window.onload = Task.async(function* () {

    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");
  }
 });
 </script>
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_undefined.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_undefined.html
@ -14,8 +14,8 @@ Test undefined rep
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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");
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_window.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_window.html
@ -14,8 +14,8 @@ Test window rep
 </head>
 <body>
 <pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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");