--- a/devtools/client/shared/components/reps/reps.js
+++ b/devtools/client/shared/components/reps/reps.js
@@ -55,23 +55,25 @@ return /******/ (function(modules) { //
/***/ function(module, exports, __webpack_require__) {
const { MODE } = __webpack_require__(1);
const { REPS } = __webpack_require__(2);
const {
createFactories,
parseURLEncodedText,
parseURLParams,
- getSelectableInInspectorGrips
+ getSelectableInInspectorGrips,
+ maybeEscapePropertyName
} = __webpack_require__(4);
module.exports = {
REPS,
MODE,
createFactories,
+ maybeEscapePropertyName,
parseURLEncodedText,
parseURLParams,
getSelectableInInspectorGrips
};
/***/ },
/* 1 */
/***/ function(module, exports) {
@@ -349,16 +351,39 @@ return /******/ (function(modules) { //
}
// Other surrogate characters are passed through.
return match;
}
return "\\u" + ("0000" + c.toString(16)).substr(-4);
}) + "\"";
}
+ /**
+ * 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));
}
function rawCropString(text, limit, alternativeText) {
if (!alternativeText) {
alternativeText = "\u2026";
}
@@ -582,17 +607,18 @@ return /******/ (function(modules) { //
sanitizeString,
escapeString,
wrapRender,
cropMultipleLines,
parseURLParams,
parseURLEncodedText,
getFileName,
getURLDisplayString,
- getSelectableInInspectorGrips
+ getSelectableInInspectorGrips,
+ maybeEscapePropertyName
};
/***/ },
/* 5 */
/***/ function(module, exports) {
module.exports = {
ELEMENT_NODE: 1,
@@ -973,19 +999,19 @@ return /******/ (function(modules) { //
function isInteger(x) {
let y = parseInt(x, 10);
if (isNaN(y)) {
return false;
}
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)) {
continue;
}
// Ignore standard 'length' property, anything else is custom.
if (p != "length") {
@@ -1263,16 +1289,17 @@ return /******/ (function(modules) { //
/***/ },
/* 14 */
/***/ function(module, exports, __webpack_require__) {
// Dependencies
const React = __webpack_require__(3);
const {
createFactories,
+ maybeEscapePropertyName,
wrapRender
} = __webpack_require__(4);
const { MODE } = __webpack_require__(1);
// Shortcuts
const { span } = React.DOM;
/**
* Property for Obj (local JS objects), Grip (remote JS objects)
@@ -1290,34 +1317,42 @@ return /******/ (function(modules) { //
// Delimiter character used to separate individual properties.
delim: React.PropTypes.string,
// @TODO Change this to Object.values once it's supported in Node's version of V8
mode: React.PropTypes.oneOf(Object.keys(MODE).map(key => MODE[key])),
objectLink: React.PropTypes.func,
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 () {
const Grip = __webpack_require__(15);
let { Rep } = createFactories(__webpack_require__(2));
let {
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,
mode: mode || MODE.TINY,
defaultRep: Grip
}));
}
@@ -1419,64 +1454,72 @@ return /******/ (function(modules) { //
if (indexes.length < max && indexes.length < propertiesLength) {
// There are not enough props yet. Then add uninteresting props to display them.
indexes = indexes.concat(this.getPropIndexes(properties, max - indexes.length, (t, value, name) => {
return !isInterestingProp(t, value, name);
}));
}
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;
},
/**
* Get props ordered by index.
*
* @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) {
return a - b;
});
indexes.forEach(i => {
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,
equal: ": ",
delim: i !== indexes.length - 1 || truncate ? ", " : "",
defaultRep: Grip,
// Do not propagate title to properties reps
- title: undefined
+ title: undefined,
+ suppressQuotes
})));
});
- return props;
+ return propsArray;
},
/**
* Get the indexes of props in the object.
*
* @param {Object} properties Props object.
* @param {Number} max The maximum length of indexes array.
* @param {Function} filter Filter the props you want.
@@ -1525,30 +1568,30 @@ return /******/ (function(modules) { //
value = property.getterValue;
}
}
return value;
},
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) {
return span({ className: "objectBox objectBox-object" }, this.getTitle(object), objectLink({
className: "objectLeftBrace",
object: object
}, ""));
}
return span({ className: "objectBox objectBox-object" }, this.getTitle(object), objectLink({
className: "objectLeftBrace",
object: object
- }, " { "), ...props, objectLink({
+ }, " { "), ...propsArray, objectLink({
className: "objectRightBrace",
object: object
}, " }"));
})
});
// Registration
function supportsObject(object, type) {
@@ -2109,17 +2152,18 @@ return /******/ (function(modules) { //
return keys.map((key, i) => {
let object = promiseState[key];
return PropRep(Object.assign({}, this.props, {
mode: MODE.TINY,
name: `<${key}>`,
object,
equal: ": ",
- delim: i < keys.length - 1 ? ", " : ""
+ delim: i < keys.length - 1 ? ", " : "",
+ suppressQuotes: true
}));
});
},
render: wrapRender(function () {
const object = this.props.object;
const { promiseState } = object;
let objectLink = this.props.objectLink || span;
@@ -2131,21 +2175,21 @@ return /******/ (function(modules) { //
className: "objectLeftBrace",
object: object
}, " { "), Rep({ object: promiseState.state }), objectLink({
className: "objectRightBrace",
object: object
}, " }"));
}
- 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
}, " }"));
})
});
// Registration
function supportsObject(object, type) {
@@ -2451,17 +2495,17 @@ return /******/ (function(modules) { //
}
if (onInspectIconClick) {
inspectIcon = Svg("open-inspector", {
element: "a",
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)
});
}
}
return span(baseConfig, objectLink({ object }, ...elements), inspectIcon);
})
});
@@ -2742,17 +2786,17 @@ return /******/ (function(modules) { //
}
if (onInspectIconClick) {
inspectIcon = Svg("open-inspector", {
element: "a",
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)
});
}
}
if (mode === MODE.TINY) {
return DOM.span(baseConfig, this.getTitle(grip), inspectIcon);
}
@@ -3399,30 +3443,30 @@ return /******/ (function(modules) { //
}
return indexes;
}, []);
},
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) {
return span({ className: "objectBox objectBox-object" }, this.getTitle(object), objectLink({
className: "objectLeftBrace",
object: object
}, ""));
}
return span({ className: "objectBox objectBox-object" }, this.getTitle(object), objectLink({
className: "objectLeftBrace",
object: object
- }, " { "), props, objectLink({
+ }, " { "), propsArray, objectLink({
className: "objectRightBrace",
object: object
}, " }"));
})
});
function supportsObject(grip, type) {
if (!isGrip(grip)) {
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_array.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_array.html
@@ -9,18 +9,18 @@ Test ArrayRep rep
<head>
<meta charset="utf-8">
<title>Rep test - ArrayRep</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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/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
@@ -9,18 +9,18 @@ Test Attribute rep
<head>
<meta charset="utf-8">
<title>Rep test - Attribute</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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");
let { Rep, Attribute } = REPS;
let gripStub = {
"type": "object",
"class": "Attr",
--- 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
@@ -9,18 +9,18 @@ Test comment-node rep
<head>
<meta charset="utf-8">
<title>Rep test - comment-node</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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/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
@@ -9,18 +9,18 @@ Test DateTime rep
<head>
<meta charset="utf-8">
<title>Rep test - DateTime</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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;
try {
testValid();
testInvalid();
} catch(e) {
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_document.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_document.html
@@ -9,18 +9,18 @@ Test Document rep
<head>
<meta charset="utf-8">
<title>Rep test - Document</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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;
try {
let gripStub = {
"type": "object",
"class": "HTMLDocument",
--- 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
@@ -9,18 +9,18 @@ Test Element node rep
<head>
<meta charset="utf-8">
<title>Rep test - Element node</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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,
getSelectableInInspectorGrips,
} = browserRequire("devtools/client/shared/components/reps/reps");
@@ -228,18 +228,21 @@ window.onload = Task.async(function* ()
function testOnInspectIconClick() {
const stub = getGripStub("testNode");
const grips = getSelectableInInspectorGrips(stub);
is(grips.length, 1, "the stub has one node grip");
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, {
object: stub,
onInspectIconClick,
attachedActorIds: ["someOtherId"]
});
is(renderedComponentWithoutInspectIcon.querySelector(".open-inspector"), null,
@@ -260,16 +263,18 @@ window.onload = Task.async(function* ()
});
inspectIconNode = renderedComponent.querySelector(".open-inspector");
ok(inspectIconNode !== null, "There is an inspect icon as expected");
TestUtils.Simulate.click(inspectIconNode);
is(inspectIconClickedValue, grips[0],
"onInspectIconClick is called with expected value when inspect icon is clicked");
+ ok(inspectIconClickedEvent !== null && inspectIconClickedEvent.type === "click",
+ "onInspectIconClick forwarded the original event to the callback");
}
function getGripStub(name) {
switch (name) {
case "testBodyNode":
return {
"type": "object",
"actor": "server1.conn1.child1/obj30",
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_error.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_error.html
@@ -9,18 +9,18 @@ Test Error rep
<head>
<meta charset="utf-8">
<title>Rep test - Error</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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/reps");
let { Rep, ErrorRep } = REPS;
try {
// Test errors with different properties
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_event.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_event.html
@@ -9,18 +9,18 @@ Test Event rep
<head>
<meta charset="utf-8">
<title>Rep test - Event</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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/reps");
let { Rep, Event } = 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
@@ -9,18 +9,18 @@ Test fallback for rep rendering when a r
<head>
<meta charset="utf-8">
<title>Rep test - Failure</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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");
let { Rep, ArrayRep, RegExp } = REPS;
// Force the RegExp rep to crash by creating RegExp grip that throws when accessing
// the displayString property
let gripStub = {
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_function.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_function.html
@@ -9,18 +9,18 @@ Test Func rep
<head>
<meta charset="utf-8">
<title>Rep test - Func</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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;
const componentUnderTest = Func;
try {
// Test that correct rep is chosen
--- 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
@@ -9,18 +9,18 @@ Test GripArray rep
<head>
<meta charset="utf-8">
<title>Rep test - GripArray</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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/reps");
let { Rep, GripArray } = 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
@@ -9,18 +9,18 @@ Test GripMap rep
<head>
<meta charset="utf-8">
<title>Rep test - GripMap</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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,
getSelectableInInspectorGrips,
} = browserRequire("devtools/client/shared/components/reps/reps");
@@ -151,17 +151,17 @@ window.onload = Task.async(function* ()
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
function testMaxEntries() {
// Test object:
// `new Map([["key-a","value-a"], ["key-b","value-b"], ["key-c","value-c"]])`
const testName = "testMaxEntries";
- const defaultOutput = `Map { key-a: "value-a", key-b: "value-b", key-c: "value-c" }`;
+ const defaultOutput = `Map { "key-a": "value-a", "key-b": "value-b", "key-c": "value-c" }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
mode: MODE.TINY,
@@ -181,20 +181,20 @@ window.onload = Task.async(function* ()
}
function testMoreThanMaxEntries() {
// Test object = `new Map(
// [["key-0", "value-0"], ["key-1", "value-1"]], …, ["key-100", "value-100"]]}`
const testName = "testMoreThanMaxEntries";
const defaultOutput =
- `Map { key-0: "value-0", key-1: "value-1", key-2: "value-2", 98 more… }`;
+ `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 = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
@@ -215,19 +215,19 @@ window.onload = Task.async(function* ()
}
function testUninterestingEntries() {
// Test object:
// `new Map([["key-a",null], ["key-b",undefined], ["key-c","value-c"], ["key-d",4]])`
const testName = "testUninterestingEntries";
const defaultOutput =
- `Map { key-a: null, key-c: "value-c", key-d: 4, 1 more… }`;
+ `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 = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
mode: MODE.TINY,
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_grip.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_grip.html
@@ -9,18 +9,18 @@ Test grip rep
<head>
<meta charset="utf-8">
<title>Rep test - grip</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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/reps");
let { Rep, Grip } = 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
@@ -9,18 +9,18 @@ Test Infinity rep
<head>
<meta charset="utf-8">
<title>Rep test - Infinity</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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/reps");
let { Rep, InfinityRep } = REPS;
try {
yield testInfinity();
--- 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
@@ -9,18 +9,18 @@ Test LongString rep
<head>
<meta charset="utf-8">
<title>Rep test - LongString</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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;
try {
// Test that correct rep is chosen
const renderedRep = shallowRenderComponent(Rep, { object: getGripStub("testMultiline") });
is(renderedRep.type, LongStringRep.rep,
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_nan.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_nan.html
@@ -9,18 +9,18 @@ Test NaN rep
<head>
<meta charset="utf-8">
<title>Rep test - NaN</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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/reps");
let { Rep, NaNRep } = REPS;
try {
yield testNaN();
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_null.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_null.html
@@ -9,18 +9,18 @@ Test Null rep
<head>
<meta charset="utf-8">
<title>Rep test - Null</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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");
let { Rep, Null } = REPS;
let gripStub = {
"type": "null"
};
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_number.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_number.html
@@ -9,18 +9,18 @@ Test Number rep
<head>
<meta charset="utf-8">
<title>Rep test - Number</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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;
try {
yield testInt();
yield testBoolean();
yield testNegativeZero();
--- 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
@@ -9,18 +9,18 @@ Test ObjectWithText rep
<head>
<meta charset="utf-8">
<title>Rep test - ObjectWithText</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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");
let { Rep, ObjectWithText } = REPS;
let gripStub = {
"type": "object",
"class": "CSSStyleRule",
--- 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
@@ -9,18 +9,18 @@ Test ObjectWithURL rep
<head>
<meta charset="utf-8">
<title>Rep test - ObjectWithURL</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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/reps");
let { Rep, ObjectWithURL } = REPS;
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_object.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_object.html
@@ -9,32 +9,35 @@ Test Obj rep
<head>
<meta charset="utf-8">
<title>Rep test - Obj</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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;
const componentUnderTest = Obj;
try {
yield testBasic();
// Test property iterator
yield testMaxProps();
yield testMoreThanMaxProps();
yield testUninterestingProps();
+ // Test that unusual property names are escaped.
+ yield testEscapedPropertyNames();
+
// Test that properties are rendered as expected by PropRep
yield testNested();
// Test that 'more' property doesn't clobber the caption.
yield testMoreProp();
// Test that you can pass a custom title to the Rep
yield testCustomTitle();
@@ -154,16 +157,42 @@ window.onload = Task.async(function* ()
mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, "testUninterestingProps", componentUnderTest, stub);
}
+ function testEscapedPropertyNames() {
+ const stub = {"":1, "quote-this":2, noquotes:3};
+ const defaultOutput = `Object { "": 1, "quote-this": 2, noquotes: 3 }`;
+
+ const modeTests = [
+ {
+ mode: undefined,
+ expectedOutput: defaultOutput,
+ },
+ {
+ mode: MODE.TINY,
+ expectedOutput: `Object`,
+ },
+ {
+ mode: MODE.SHORT,
+ expectedOutput: defaultOutput,
+ },
+ {
+ mode: MODE.LONG,
+ expectedOutput: defaultOutput,
+ }
+ ];
+
+ testRepRenderModes(modeTests, "testEscapedPropertyNames", componentUnderTest, stub);
+ }
+
function testNested() {
const stub = {
objProp: {
id: 1,
arr: [2]
},
strProp: "test string",
arrProp: [1]
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_promise.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_promise.html
@@ -9,18 +9,18 @@ Test Promise rep
<head>
<meta charset="utf-8">
<title>Rep test - Promise</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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,
getSelectableInInspectorGrips,
} = browserRequire("devtools/client/shared/components/reps/reps");
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_regexp.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_regexp.html
@@ -9,18 +9,18 @@ Test RegExp rep
<head>
<meta charset="utf-8">
<title>Rep test - RegExp</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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");
let { Rep, RegExp } = REPS;
let gripStub = {
"type": "object",
"class": "RegExp",
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_string.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_string.html
@@ -9,18 +9,18 @@ Test String rep
<head>
<meta charset="utf-8">
<title>Rep test - String</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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;
const test_cases = [{
name: "testMultiline",
props: {
object: "aaaaaaaaaaaaaaaaaaaaa\nbbbbbbbbbbbbbbbbbbb\ncccccccccccccccc\n",
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_stylesheet.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_stylesheet.html
@@ -9,18 +9,18 @@ Test Stylesheet rep
<head>
<meta charset="utf-8">
<title>Rep test - Stylesheet</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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");
let { Rep, StyleSheet } = REPS;
let gripStub = {
"type": "object",
"class": "CSSStyleSheet",
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_symbol.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_symbol.html
@@ -9,18 +9,18 @@ Test Symbol rep
<head>
<meta charset="utf-8">
<title>Rep test - String</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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/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
@@ -9,18 +9,18 @@ Test text-node rep
<head>
<meta charset="utf-8">
<title>Rep test - text-node</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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,
getSelectableInInspectorGrips,
} = browserRequire("devtools/client/shared/components/reps/reps");
@@ -167,18 +167,21 @@ window.onload = Task.async(function* ()
function testOnInspectIconClick() {
const stub = gripStubs.get("testRendering");
const grips = getSelectableInInspectorGrips(stub);
is(grips.length, 1, "the stub has one text node grip");
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, {
object: stub,
onInspectIconClick,
attachedActorIds: ["someOtherId"]
});
is(renderedComponentWithoutInspectIcon.querySelector(".open-inspector"), null,
@@ -191,14 +194,16 @@ window.onload = Task.async(function* ()
});
const inspectIconNode = renderedComponent.querySelector(".open-inspector");
ok(inspectIconNode !== null, "There is an inspect icon as expected");
TestUtils.Simulate.click(inspectIconNode);
is(inspectIconClickedValue, grips[0],
"onInspectIconClick is called with expected value when inspect icon is clicked");
+ ok(inspectIconClickedEvent !== null && inspectIconClickedEvent.type === "click",
+ "onInspectIconClick forwarded the original event to the callback");
}
});
</script>
</pre>
</body>
</html>
--- a/devtools/client/shared/components/reps/test/mochitest/test_reps_undefined.html
+++ b/devtools/client/shared/components/reps/test/mochitest/test_reps_undefined.html
@@ -9,18 +9,18 @@ Test undefined rep
<head>
<meta charset="utf-8">
<title>Rep test - undefined</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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/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
@@ -9,18 +9,18 @@ Test window rep
<head>
<meta charset="utf-8">
<title>Rep tests - window</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
-<script src="head.js" type="application/javascript"></script>
-<script type="application/javascript">
+<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/reps");
let { Rep, Window } = REPS;