--- a/devtools/client/dom/content/components/dom-tree.js
+++ b/devtools/client/dom/content/components/dom-tree.js
@@ -9,16 +9,17 @@
const React = require("devtools/client/shared/vendor/react");
const { connect } = require("devtools/client/shared/vendor/react-redux");
// Reps
const { createFactories } = require("devtools/client/shared/components/reps/rep-utils");
const TreeView = React.createFactory(require("devtools/client/shared/components/tree/tree-view"));
const { Rep } = createFactories(require("devtools/client/shared/components/reps/rep"));
const { Grip } = require("devtools/client/shared/components/reps/grip");
+const { MODE } = require("devtools/client/shared/components/reps/constants");
// DOM Panel
const { GripProvider } = require("../grip-provider");
const { DomDecorator } = require("../dom-decorator");
// Shortcuts
const PropTypes = React.PropTypes;
@@ -65,17 +66,17 @@ var DomTree = React.createClass({
}));
};
return (
TreeView({
object: this.props.object,
provider: new GripProvider(this.props.grips, this.props.dispatch),
decorator: new DomDecorator(),
- mode: "short",
+ mode: MODE.SHORT,
columns: columns,
renderValue: renderValue,
onFilter: this.onFilter
})
);
}
});
--- a/devtools/client/jsonview/components/json-panel.js
+++ b/devtools/client/jsonview/components/json-panel.js
@@ -6,16 +6,17 @@
"use strict";
define(function (require, exports, module) {
const { DOM: dom, createFactory, createClass, PropTypes } = require("devtools/client/shared/vendor/react");
const { createFactories } = require("devtools/client/shared/components/reps/rep-utils");
const TreeView = createFactory(require("devtools/client/shared/components/tree/tree-view"));
const { Rep } = createFactories(require("devtools/client/shared/components/reps/rep"));
+ const { MODE } = require("devtools/client/shared/components/reps/constants");
const { SearchBox } = createFactories(require("./search-box"));
const { Toolbar, ToolbarButton } = createFactories(require("./reps/toolbar"));
const { div } = dom;
const AUTO_EXPAND_MAX_SIZE = 100 * 1024;
const AUTO_EXPAND_MAX_LEVEL = 7;
/**
@@ -110,17 +111,17 @@ define(function (require, exports, modul
let expandedNodes = new Set();
if (this.props.jsonTextLength <= AUTO_EXPAND_MAX_SIZE) {
expandedNodes = this.getExpandedNodes(this.props.data);
}
// Render tree component.
return TreeView({
object: this.props.data,
- mode: "tiny",
+ mode: MODE.TINY,
onFilter: this.onFilter,
columns: columns,
renderValue: this.renderValue,
expandedNodes: expandedNodes,
});
},
render: function () {
--- a/devtools/client/shared/components/reps/array.js
+++ b/devtools/client/shared/components/reps/array.js
@@ -7,27 +7,33 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function (require, exports, module) {
// Dependencies
const React = require("devtools/client/shared/vendor/react");
const { createFactories } = require("./rep-utils");
const { Caption } = createFactories(require("./caption"));
+ const { MODE } = require("./constants");
// Shortcuts
const DOM = React.DOM;
/**
* Renders an array. The array is enclosed by left and right bracket
* and the max number of rendered items depends on the current mode.
*/
let ArrayRep = React.createClass({
displayName: "ArrayRep",
+ propTypes: {
+ // @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])),
+ },
+
getTitle: function (object, context) {
return "[" + object.length + "]";
},
arrayIterator: function (array, max) {
let items = [];
let delim;
@@ -35,23 +41,23 @@ define(function (require, exports, modul
try {
let value = array[i];
delim = (i == array.length - 1 ? "" : ", ");
items.push(ItemRep({
object: value,
// Hardcode tiny mode to avoid recursive handling.
- mode: "tiny",
+ mode: MODE.TINY,
delim: delim
}));
} catch (exc) {
items.push(ItemRep({
object: exc,
- mode: "tiny",
+ mode: MODE.TINY,
delim: delim
}));
}
}
if (array.length > max) {
let objectLink = this.props.objectLink || DOM.span;
items.push(Caption({
@@ -106,30 +112,33 @@ define(function (require, exports, modul
onToggleProperties: function (event) {
},
onClickBracket: function (event) {
},
render: function () {
- let mode = this.props.mode || "short";
- let object = this.props.object;
+ let {
+ object,
+ mode = MODE.SHORT,
+ } = this.props;
+
let items;
let brackets;
let needSpace = function (space) {
return space ? { left: "[ ", right: " ]"} : { left: "[", right: "]"};
};
- if (mode == "tiny") {
+ if (mode === MODE.TINY) {
let isEmpty = object.length === 0;
items = [DOM.span({className: "length"}, isEmpty ? "" : object.length)];
brackets = needSpace(false);
} else {
- let max = (mode == "short") ? 3 : 10;
+ let max = (mode === MODE.SHORT) ? 3 : 10;
items = this.arrayIterator(object, max);
brackets = needSpace(items.length > 0);
}
let objectLink = this.props.objectLink || DOM.span;
return (
DOM.span({
--- a/devtools/client/shared/components/reps/comment-node.js
+++ b/devtools/client/shared/components/reps/comment-node.js
@@ -2,46 +2,47 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* 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/. */
"use strict";
// Make this available to both AMD and CJS environments
define(function (require, exports, module) {
- // ReactJS
+ // Dependencies
const React = require("devtools/client/shared/vendor/react");
const { isGrip, cropString, cropMultipleLines } = require("./rep-utils");
-
- // Utils
+ const { MODE } = require("./constants");
const nodeConstants = require("devtools/shared/dom-node-constants");
// Shortcuts
const { span } = React.DOM;
/**
* Renders DOM comment node.
*/
const CommentNode = React.createClass({
displayName: "CommentNode",
propTypes: {
object: React.PropTypes.object.isRequired,
- mode: 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])),
},
render: function () {
- let {object} = this.props;
-
- let mode = this.props.mode || "short";
+ let {
+ object,
+ mode = MODE.SHORT
+ } = this.props;
let {textContent} = object.preview;
- if (mode === "tiny") {
+ if (mode === MODE.TINY) {
textContent = cropMultipleLines(textContent, 30);
- } else if (mode === "short") {
+ } else if (mode === MODE.SHORT) {
textContent = cropString(textContent, 50);
}
return span({className: "objectBox theme-comment"}, `<!-- ${textContent} -->`);
},
});
// Registration
new file mode 100644
--- /dev/null
+++ b/devtools/client/shared/components/reps/constants.js
@@ -0,0 +1,15 @@
+/* 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/. */
+"use strict";
+
+// Make this available to both AMD and CJS environments
+define(function (require, exports, module) {
+ module.exports = {
+ MODE: {
+ TINY: Symbol("TINY"),
+ SHORT: Symbol("SHORT"),
+ LONG: Symbol("LONG"),
+ }
+ };
+});
--- a/devtools/client/shared/components/reps/element-node.js
+++ b/devtools/client/shared/components/reps/element-node.js
@@ -4,42 +4,44 @@
* 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/. */
"use strict";
// Make this available to both AMD and CJS environments
define(function (require, exports, module) {
// ReactJS
const React = require("devtools/client/shared/vendor/react");
- const { isGrip } = require("./rep-utils");
// Utils
+ const { isGrip } = require("./rep-utils");
+ const { MODE } = require("./constants");
const nodeConstants = require("devtools/shared/dom-node-constants");
// Shortcuts
const { span } = React.DOM;
/**
* Renders DOM element node.
*/
const ElementNode = React.createClass({
displayName: "ElementNode",
propTypes: {
object: React.PropTypes.object.isRequired,
- mode: 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])),
},
getElements: function (grip, mode) {
let {attributes, nodeName} = grip.preview;
const nodeNameElement = span({
className: "tag-name theme-fg-color3"
}, nodeName);
- if (mode === "tiny") {
+ if (mode === MODE.TINY) {
let elements = [nodeNameElement];
if (attributes.id) {
elements.push(
span({className: "attr-name theme-fg-color2"}, `#${attributes.id}`));
}
if (attributes.class) {
elements.push(
span({className: "attr-name theme-fg-color2"},
--- a/devtools/client/shared/components/reps/error.js
+++ b/devtools/client/shared/components/reps/error.js
@@ -2,44 +2,46 @@
* 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/. */
"use strict";
// Make this available to both AMD and CJS environments
define(function (require, exports, module) {
// ReactJS
const React = require("devtools/client/shared/vendor/react");
- // Dependencies
+ // Utils
const { isGrip } = require("./rep-utils");
+ const { MODE } = require("./constants");
// Shortcuts
const { span } = React.DOM;
/**
* Renders Error objects.
*/
const ErrorRep = React.createClass({
displayName: "Error",
propTypes: {
object: React.PropTypes.object.isRequired,
- mode: 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])),
},
render: function () {
let object = this.props.object;
let preview = object.preview;
let name = preview && preview.name
? preview.name
: "Error";
- let content = this.props.mode === "tiny"
+ let content = this.props.mode === MODE.TINY
? name
: `${name}: ${preview.message}`;
- if (preview.stack && this.props.mode !== "tiny") {
+ if (preview.stack && this.props.mode !== MODE.TINY) {
/*
* Since Reps are used in the JSON Viewer, we can't localize
* the "Stack trace" label (defined in debugger.properties as
* "variablesViewErrorStacktrace" property), until Bug 1317038 lands.
*/
content = `${content}\nStack trace:\n${preview.stack}`;
}
--- a/devtools/client/shared/components/reps/grip-array.js
+++ b/devtools/client/shared/components/reps/grip-array.js
@@ -7,44 +7,46 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function (require, exports, module) {
// Dependencies
const React = require("devtools/client/shared/vendor/react");
const { createFactories, isGrip } = require("./rep-utils");
const { Caption } = createFactories(require("./caption"));
+ const { MODE } = require("./constants");
// Shortcuts
const { span } = React.DOM;
/**
* Renders an array. The array is enclosed by left and right bracket
* and the max number of rendered items depends on the current mode.
*/
let GripArray = React.createClass({
displayName: "GripArray",
propTypes: {
object: React.PropTypes.object.isRequired,
- mode: 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])),
provider: React.PropTypes.object,
},
getLength: function (grip) {
if (!grip.preview) {
return 0;
}
return grip.preview.length || grip.preview.childNodesLength || 0;
},
getTitle: function (object, context) {
let objectLink = this.props.objectLink || span;
- if (this.props.mode != "tiny") {
+ if (this.props.mode !== MODE.TINY) {
return objectLink({
object: object
}, object.class + " ");
}
return "";
},
getPreviewItems: function (grip) {
@@ -103,32 +105,34 @@ define(function (require, exports, modul
}, leftItemNum + " more…")
}));
}
return items;
},
render: function () {
- let mode = this.props.mode || "short";
- let object = this.props.object;
+ let {
+ object,
+ mode = MODE.SHORT
+ } = this.props;
let items;
let brackets;
let needSpace = function (space) {
return space ? { left: "[ ", right: " ]"} : { left: "[", right: "]"};
};
- if (mode == "tiny") {
+ if (mode === MODE.TINY) {
let objectLength = this.getLength(object);
let isEmpty = objectLength === 0;
items = [span({className: "length"}, isEmpty ? "" : objectLength)];
brackets = needSpace(false);
} else {
- let max = (mode == "short") ? 3 : 10;
+ let max = (mode === MODE.SHORT) ? 3 : 10;
items = this.arrayIterator(object, max);
brackets = needSpace(items.length > 0);
}
let objectLink = this.props.objectLink || span;
let title = this.getTitle(object);
return (
@@ -165,17 +169,17 @@ define(function (require, exports, modul
},
render: function () {
let { Rep } = createFactories(require("./rep"));
return (
span({},
Rep(Object.assign({}, this.props, {
- mode: "tiny"
+ mode: MODE.TINY
})),
this.props.delim
)
);
}
}));
function supportsObject(grip, type) {
--- a/devtools/client/shared/components/reps/grip-map.js
+++ b/devtools/client/shared/components/reps/grip-map.js
@@ -7,29 +7,30 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function (require, exports, module) {
// Dependencies
const React = require("devtools/client/shared/vendor/react");
const { createFactories, isGrip } = require("./rep-utils");
const { Caption } = createFactories(require("./caption"));
const { PropRep } = createFactories(require("./prop-rep"));
-
+ const { MODE } = require("./constants");
// Shortcuts
const { span } = React.DOM;
/**
* Renders an map. A map is represented by a list of its
* entries enclosed in curly brackets.
*/
const GripMap = React.createClass({
displayName: "GripMap",
propTypes: {
object: React.PropTypes.object,
- mode: 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])),
},
getTitle: function (object) {
let title = object && object.class ? object.class : "Map";
if (this.props.objectLink) {
return this.props.objectLink({
object: object
}, title);
@@ -106,17 +107,17 @@ define(function (require, exports, modul
return PropRep({
// key,
name: key,
equal: ": ",
object: value,
// Do not add a trailing comma on the last entry
// if there won't be a "more..." item.
delim: (i < indexes.length - 1 || indexes.length < entries.length) ? ", " : "",
- mode: "tiny",
+ mode: MODE.TINY,
objectLink: this.props.objectLink,
});
});
},
/**
* Get the indexes of entries in the map.
*
@@ -141,20 +142,20 @@ define(function (require, exports, modul
return indexes;
}, []);
},
render: function () {
let object = this.props.object;
let props = this.safeEntriesIterator(object,
- (this.props.mode == "long") ? 10 : 3);
+ (this.props.mode === MODE.LONG) ? 10 : 3);
let objectLink = this.props.objectLink || span;
- if (this.props.mode == "tiny") {
+ if (this.props.mode === MODE.TINY) {
return (
span({className: "objectBox objectBox-object"},
this.getTitle(object),
objectLink({
className: "objectLeftBrace",
object: object
}, "")
)
--- a/devtools/client/shared/components/reps/grip.js
+++ b/devtools/client/shared/components/reps/grip.js
@@ -8,30 +8,32 @@
// Make this available to both AMD and CJS environments
define(function (require, exports, module) {
// ReactJS
const React = require("devtools/client/shared/vendor/react");
// Dependencies
const { createFactories, isGrip } = require("./rep-utils");
const { Caption } = createFactories(require("./caption"));
const { PropRep } = createFactories(require("./prop-rep"));
+ const { MODE } = require("./constants");
// Shortcuts
const { span } = React.DOM;
/**
* Renders generic grip. Grip is client representation
* of remote JS object and is used as an input object
* for this rep component.
*/
const GripRep = React.createClass({
displayName: "Grip",
propTypes: {
object: React.PropTypes.object.isRequired,
- mode: 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])),
isInterestingProp: React.PropTypes.func
},
getTitle: function (object) {
if (this.props.objectLink) {
return this.props.objectLink({
object: object
}, object.class);
@@ -50,17 +52,17 @@ define(function (require, exports, modul
},
propIterator: function (object, max) {
if (Object.keys(object.preview).includes("wrappedValue")) {
const { Rep } = createFactories(require("./rep"));
return [Rep({
object: object.preview.wrappedValue,
- mode: this.props.mode || "tiny",
+ mode: this.props.mode || MODE.TINY,
defaultRep: Grip,
})];
}
// Property filter. Show only interesting properties to the user.
let isInterestingProp = this.props.isInterestingProp || ((type, value) => {
return (
type == "boolean" ||
@@ -123,17 +125,17 @@ define(function (require, exports, modul
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, {
- mode: "tiny",
+ mode: MODE.TINY,
name: name,
object: value,
equal: ": ",
delim: i !== indexes.length - 1 || truncate ? ", " : "",
defaultRep: Grip
})));
});
@@ -192,20 +194,20 @@ define(function (require, exports, modul
}
}
return value;
},
render: function () {
let object = this.props.object;
let props = this.safePropIterator(object,
- (this.props.mode == "long") ? 10 : 3);
+ (this.props.mode === MODE.LONG) ? 10 : 3);
let objectLink = this.props.objectLink || span;
- if (this.props.mode == "tiny") {
+ if (this.props.mode === MODE.TINY) {
return (
span({className: "objectBox objectBox-object"},
this.getTitle(object),
objectLink({
className: "objectLeftBrace",
object: object
}, "")
)
--- a/devtools/client/shared/components/reps/moz.build
+++ b/devtools/client/shared/components/reps/moz.build
@@ -4,16 +4,17 @@
# License, v. 2.0. If a copy of the MPL was not distributed with this
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
DevToolsModules(
'array.js',
'attribute.js',
'caption.js',
'comment-node.js',
+ 'constants.js',
'date-time.js',
'document.js',
'element-node.js',
'error.js',
'event.js',
'function.js',
'grip-array.js',
'grip-map.js',
--- a/devtools/client/shared/components/reps/object.js
+++ b/devtools/client/shared/components/reps/object.js
@@ -7,28 +7,30 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function (require, exports, module) {
// Dependencies
const React = require("devtools/client/shared/vendor/react");
const { createFactories } = require("./rep-utils");
const { Caption } = createFactories(require("./caption"));
const { PropRep } = createFactories(require("./prop-rep"));
+ const { MODE } = require("./constants");
// Shortcuts
const { span } = React.DOM;
/**
* Renders an object. An object is represented by a list of its
* properties enclosed in curly brackets.
*/
const Obj = React.createClass({
displayName: "Obj",
propTypes: {
object: React.PropTypes.object,
- mode: 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])),
},
getTitle: function (object) {
let className = object && object.class ? object.class : "Object";
if (this.props.objectLink) {
return this.props.objectLink({
object: object
}, className);
@@ -92,17 +94,17 @@ define(function (require, exports, modul
let props = [];
max = max || 3;
if (!object) {
return props;
}
// Hardcode tiny mode to avoid recursive handling.
- let mode = "tiny";
+ let mode = MODE.TINY;
try {
for (let name in object) {
if (props.length > max) {
return props;
}
let value;
@@ -130,17 +132,17 @@ define(function (require, exports, modul
return props;
},
render: function () {
let object = this.props.object;
let props = this.safePropIterator(object);
let objectLink = this.props.objectLink || span;
- if (this.props.mode == "tiny" || !props.length) {
+ if (this.props.mode === MODE.TINY || !props.length) {
return (
span({className: "objectBox objectBox-object"},
objectLink({className: "objectTitle"}, this.getTitle(object))
)
);
}
return (
--- a/devtools/client/shared/components/reps/promise.js
+++ b/devtools/client/shared/components/reps/promise.js
@@ -7,28 +7,30 @@
// Make this available to both AMD and CJS environments
define(function (require, exports, module) {
// ReactJS
const React = require("devtools/client/shared/vendor/react");
// Dependencies
const { createFactories, isGrip } = require("./rep-utils");
const { PropRep } = createFactories(require("./prop-rep"));
+ const { MODE } = require("./constants");
// Shortcuts
const { span } = React.DOM;
/**
* Renders a DOM Promise object.
*/
const PromiseRep = React.createClass({
displayName: "Promise",
propTypes: {
object: React.PropTypes.object.isRequired,
- mode: 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])),
},
getTitle: function (object) {
const title = object.class;
if (this.props.objectLink) {
return this.props.objectLink({
object: object
}, title);
@@ -39,31 +41,31 @@ define(function (require, exports, modul
getProps: function (promiseState) {
const keys = ["state"];
if (Object.keys(promiseState).includes("value")) {
keys.push("value");
}
return keys.map((key, i) => {
return PropRep(Object.assign({}, this.props, {
- mode: "tiny",
+ mode: MODE.TINY,
name: `<${key}>`,
object: promiseState[key],
equal: ": ",
delim: i < keys.length - 1 ? ", " : ""
}));
});
},
render: function () {
const object = this.props.object;
const {promiseState} = object;
let objectLink = this.props.objectLink || span;
- if (this.props.mode == "tiny") {
+ if (this.props.mode === MODE.TINY) {
let { Rep } = createFactories(require("./rep"));
return (
span({className: "objectBox objectBox-object"},
this.getTitle(object),
objectLink({
className: "objectLeftBrace",
object: object
--- a/devtools/client/shared/components/reps/prop-rep.js
+++ b/devtools/client/shared/components/reps/prop-rep.js
@@ -2,18 +2,21 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* 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/. */
"use strict";
// Make this available to both AMD and CJS environments
define(function (require, exports, module) {
+ // Dependencies
const React = require("devtools/client/shared/vendor/react");
const { createFactories } = require("./rep-utils");
+ const { MODE } = require("./constants");
+ // Shortcuts
const { span } = React.DOM;
/**
* Property for Obj (local JS objects), Grip (remote JS objects)
* and GripMap (remote JS maps and weakmaps) reps.
* It's used to render object properties.
*/
let PropRep = React.createFactory(React.createClass({
@@ -24,32 +27,33 @@ define(function (require, exports, modul
name: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.object,
]).isRequired,
// Equal character rendered between property name and value.
equal: React.PropTypes.string,
// Delimiter character used to separate individual properties.
delim: React.PropTypes.string,
- mode: 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])),
},
render: function () {
const { Grip } = require("./grip");
let { Rep } = createFactories(require("./rep"));
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);
} else {
key = Rep({
object: this.props.name,
- mode: this.props.mode || "tiny",
+ mode: this.props.mode || MODE.TINY,
defaultRep: Grip,
objectLink: this.props.objectLink,
});
}
return (
span({},
key,
--- a/devtools/client/shared/components/reps/rep.js
+++ b/devtools/client/shared/components/reps/rep.js
@@ -7,16 +7,17 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function (require, exports, module) {
// Dependencies
const React = require("devtools/client/shared/vendor/react");
const { isGrip } = require("./rep-utils");
+ const { MODE } = require("./constants");
// Load all existing rep templates
const { Undefined } = require("./undefined");
const { Null } = require("./null");
const { StringRep } = require("./string");
const { LongStringRep } = require("./long-string");
const { Number } = require("./number");
const { ArrayRep } = require("./array");
@@ -85,17 +86,18 @@ define(function (require, exports, modul
* property.
*/
const Rep = React.createClass({
displayName: "Rep",
propTypes: {
object: React.PropTypes.any,
defaultRep: React.PropTypes.object,
- mode: 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])),
},
render: function () {
let rep = getRep(this.props.object, this.props.defaultRep);
return rep(this.props);
},
});
--- a/devtools/client/shared/components/reps/text-node.js
+++ b/devtools/client/shared/components/reps/text-node.js
@@ -7,29 +7,31 @@
// Make this available to both AMD and CJS environments
define(function (require, exports, module) {
// ReactJS
const React = require("devtools/client/shared/vendor/react");
// Reps
const { isGrip, cropString } = require("./rep-utils");
+ const { MODE } = require("./constants");
// Shortcuts
const DOM = React.DOM;
/**
* Renders DOM #text node.
*/
let TextNode = React.createClass({
displayName: "TextNode",
propTypes: {
object: React.PropTypes.object.isRequired,
- mode: 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])),
},
getTextContent: function (grip) {
return cropString(grip.preview.textContent);
},
getTitle: function (grip) {
const title = "#text";
@@ -37,33 +39,35 @@ define(function (require, exports, modul
return this.props.objectLink({
object: grip
}, title);
}
return title;
},
render: function () {
- let grip = this.props.object;
- let mode = this.props.mode || "short";
+ let {
+ object: grip,
+ mode = MODE.SHORT,
+ } = this.props;
let baseConfig = {className: "objectBox objectBox-textNode"};
if (this.props.onDOMNodeMouseOver) {
Object.assign(baseConfig, {
onMouseOver: _ => this.props.onDOMNodeMouseOver(grip)
});
}
if (this.props.onDOMNodeMouseOut) {
Object.assign(baseConfig, {
onMouseOut: this.props.onDOMNodeMouseOut
});
}
- if (mode == "tiny") {
+ if (mode === MODE.TINY) {
return DOM.span(baseConfig, this.getTitle(grip));
}
return (
DOM.span(baseConfig,
this.getTitle(grip),
DOM.span({className: "nodeValue"},
" ",
--- a/devtools/client/shared/components/test/mochitest/head.js
+++ b/devtools/client/shared/components/test/mochitest/head.js
@@ -201,17 +201,17 @@ function shallowRenderComponent(componen
return renderer.getRenderOutput();
}
/**
* Test that a rep renders correctly across different modes.
*/
function testRepRenderModes(modeTests, testName, componentUnderTest, gripStub) {
modeTests.forEach(({mode, expectedOutput, message}) => {
- const modeString = typeof mode === "undefined" ? "no mode" : mode;
+ const modeString = typeof mode === "undefined" ? "no mode" : mode.toString();
if (!message) {
message = `${testName}: ${modeString} renders correctly.`;
}
const rendered = renderComponent(componentUnderTest.rep, { object: gripStub, mode });
is(rendered.textContent, expectedOutput, message);
});
}
--- a/devtools/client/shared/components/test/mochitest/test_reps_array.html
+++ b/devtools/client/shared/components/test/mochitest/test_reps_array.html
@@ -17,16 +17,17 @@ Test ArrayRep rep
<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* () {
let { Rep } = browserRequire("devtools/client/shared/components/reps/rep");
let { ArrayRep } = browserRequire("devtools/client/shared/components/reps/array");
+ const { MODE } = browserRequire("devtools/client/shared/components/reps/constants");
let componentUnderTest = ArrayRep;
const maxLength = {
short: 3,
long: 10
};
try {
@@ -60,25 +61,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `[]`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `[]`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, "testBasic", componentUnderTest, stub);
}
function testMaxProps() {
@@ -86,25 +87,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `[ 1, "foo", Object ]`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `[3]`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, "testMaxProps", componentUnderTest, stub);
}
function testMoreThanShortMaxProps() {
@@ -112,25 +113,25 @@ window.onload = Task.async(function* ()
const defaultShortOutput = `[ ${Array(maxLength.short).fill("\"foo\"").join(", ")}, 1 more… ]`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultShortOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `[${maxLength.short + 1}]`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultShortOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: `[ ${Array(maxLength.short + 1).fill("\"foo\"").join(", ")} ]`,
}
];
testRepRenderModes(modeTests, "testMoreThanMaxProps", componentUnderTest, stub);
}
function testMoreThanLongMaxProps() {
@@ -139,25 +140,25 @@ window.onload = Task.async(function* ()
const defaultLongOutput = `[ ${Array(maxLength.long).fill("\"foo\"").join(", ")}, 1 more… ]`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultShortOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `[${maxLength.long + 1}]`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultShortOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultLongOutput,
}
];
testRepRenderModes(modeTests, "testMoreThanMaxProps", componentUnderTest, stub);
}
function testRecursiveArray() {
@@ -166,25 +167,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `[ 1, [2] ]`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `[2]`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, "testRecursiveArray", componentUnderTest, stub);
}
function testNested() {
@@ -199,25 +200,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `[ Object ]`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `[1]`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, "testNested", componentUnderTest, stub);
}
function testArray() {
@@ -228,25 +229,25 @@ window.onload = Task.async(function* ()
const shortOutput = `[ "a", "b", "c", 7 more… ]`;
const modeTests = [
{
mode: undefined,
expectedOutput: shortOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `[10]`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: shortOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, "testNested", componentUnderTest, stub);
}
});
</script>
--- a/devtools/client/shared/components/test/mochitest/test_reps_comment-node.html
+++ b/devtools/client/shared/components/test/mochitest/test_reps_comment-node.html
@@ -17,16 +17,17 @@ Test comment-node rep
<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 {
let { Rep } = browserRequire("devtools/client/shared/components/reps/rep");
let { CommentNode } = browserRequire("devtools/client/shared/components/reps/comment-node");
+ const { MODE } = browserRequire("devtools/client/shared/components/reps/constants");
let gripStub = {
"type": "object",
"actor": "server1.conn1.child1/obj47",
"class": "Comment",
"extensible": true,
"frozen": false,
"sealed": false,
@@ -50,26 +51,26 @@ window.onload = Task.async(function* ()
"CommentNode rep has expected class names");
is(renderedComponent.textContent,
`<!-- test\nand test\nand test\nan…d test\nand test\nand test -->`,
"CommentNode rep has expected text content");
// Test tiny rendering.
const tinyRenderedComponent = renderComponent(CommentNode.rep, {
object: gripStub,
- mode: "tiny"
+ mode: MODE.TINY,
});
is(tinyRenderedComponent.textContent,
`<!-- test\\nand test\\na… test\\nand test -->`,
"CommentNode rep has expected text content in tiny mode");
// Test long rendering.
const longRenderedComponent = renderComponent(CommentNode.rep, {
object: gripStub,
- mode: "long"
+ mode: MODE.LONG,
});
is(longRenderedComponent.textContent, `<!-- ${gripStub.preview.textContent} -->`,
"CommentNode rep has expected text content in long mode");
} catch (e) {
ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
} finally {
SimpleTest.finish();
}
--- a/devtools/client/shared/components/test/mochitest/test_reps_element-node.html
+++ b/devtools/client/shared/components/test/mochitest/test_reps_element-node.html
@@ -16,16 +16,17 @@ Test Element node rep
<pre id="test">
<script src="head.js" type="application/javascript;version=1.8"></script>
<script type="application/javascript;version=1.8">
"use strict";
window.onload = Task.async(function* () {
let { Rep } = browserRequire("devtools/client/shared/components/reps/rep");
let { ElementNode } = browserRequire("devtools/client/shared/components/reps/element-node");
+ const { MODE } = browserRequire("devtools/client/shared/components/reps/constants");
try {
yield testBodyNode();
yield testDocumentElement();
yield testNode();
yield testNodeWithLeadingAndTrailingSpacesClassName();
yield testNodeWithoutAttributes();
yield testLotsOfAttributes();
@@ -46,33 +47,33 @@ window.onload = Task.async(function* ()
is(renderedRep.type, ElementNode.rep,
`Rep correctly selects ${ElementNode.rep.displayName} for body node`);
const renderedComponent = renderComponent(ElementNode.rep, { object: stub });
is(renderedComponent.textContent, `<body id="body-id" class="body-class">`,
"Element node rep has expected text content for body node");
const tinyRenderedComponent = renderComponent(
- ElementNode.rep, { object: stub, mode: "tiny" });
+ ElementNode.rep, { object: stub, mode: MODE.TINY });
is(tinyRenderedComponent.textContent, `body#body-id.body-class`,
"Element node rep has expected text content for body node in tiny mode");
}
function testDocumentElement() {
const stub = getGripStub("testDocumentElement");
const renderedRep = shallowRenderComponent(Rep, { object: stub });
is(renderedRep.type, ElementNode.rep,
`Rep correctly selects ${ElementNode.rep.displayName} for document element node`);
const renderedComponent = renderComponent(ElementNode.rep, { object: stub });
is(renderedComponent.textContent, `<html dir="ltr" lang="en-US">`,
"Element node rep has expected text content for document element node");
const tinyRenderedComponent = renderComponent(
- ElementNode.rep, { object: stub, mode: "tiny" });
+ ElementNode.rep, { object: stub, mode: MODE.TINY });
is(tinyRenderedComponent.textContent, `html`,
"Element node rep has expected text content for document element in tiny mode");
}
function testNode() {
const stub = getGripStub("testNode");
const renderedRep = shallowRenderComponent(Rep, { object: stub });
is(renderedRep.type, ElementNode.rep,
@@ -80,17 +81,17 @@ window.onload = Task.async(function* ()
const renderedComponent = renderComponent(ElementNode.rep, { object: stub });
is(renderedComponent.textContent,
`<input id="newtab-customize-button" class="bar baz" dir="ltr" ` +
`title="Customize your New Tab page" value="foo" type="button">`,
"Element node rep has expected text content for element node");
const tinyRenderedComponent = renderComponent(
- ElementNode.rep, { object: stub, mode: "tiny" });
+ ElementNode.rep, { object: stub, mode: MODE.TINY });
is(tinyRenderedComponent.textContent,
`input#newtab-customize-button.bar.baz`,
"Element node rep has expected text content for element node in tiny mode");
}
function testNodeWithLeadingAndTrailingSpacesClassName() {
const stub = getGripStub("testNodeWithLeadingAndTrailingSpacesClassName");
const renderedRep = shallowRenderComponent(Rep, { object: stub });
@@ -98,47 +99,47 @@ window.onload = Task.async(function* ()
`Rep correctly selects ${ElementNode.rep.displayName} for element node`);
const renderedComponent = renderComponent(ElementNode.rep, { object: stub });
is(renderedComponent.textContent,
`<body id="nightly-whatsnew" class=" html-ltr ">`,
"Element node rep output element node with the class trailing spaces");
const tinyRenderedComponent = renderComponent(
- ElementNode.rep, { object: stub, mode: "tiny" });
+ ElementNode.rep, { object: stub, mode: MODE.TINY });
is(tinyRenderedComponent.textContent,
`body#nightly-whatsnew.html-ltr`,
"Element node rep does not show leading nor trailing spaces " +
"on class attribute in tiny mode");
}
function testNodeWithoutAttributes() {
const stub = getGripStub("testNodeWithoutAttributes");
const renderedComponent = renderComponent(ElementNode.rep, { object: stub });
is(renderedComponent.textContent, "<p>",
"Element node rep has expected text content for element node without attributes");
const tinyRenderedComponent = renderComponent(
- ElementNode.rep, { object: stub, mode: "tiny" });
+ ElementNode.rep, { object: stub, mode: MODE.TINY });
is(tinyRenderedComponent.textContent, `p`,
"Element node rep has expected text content for element node without attributes");
}
function testLotsOfAttributes() {
const stub = getGripStub("testLotsOfAttributes");
const renderedComponent = renderComponent(ElementNode.rep, { object: stub });
is(renderedComponent.textContent,
'<p id="lots-of-attributes" a="" b="" c="" d="" e="" f="" g="" ' +
'h="" i="" j="" k="" l="" m="" n="">',
"Element node rep has expected text content for node with lots of attributes");
const tinyRenderedComponent = renderComponent(
- ElementNode.rep, { object: stub, mode: "tiny" });
+ ElementNode.rep, { object: stub, mode: MODE.TINY });
is(tinyRenderedComponent.textContent, `p#lots-of-attributes`,
"Element node rep has expected text content for node in tiny mode");
}
function testSvgNode() {
const stub = getGripStub("testSvgNode");
const renderedRep = shallowRenderComponent(Rep, { object: stub });
@@ -146,17 +147,17 @@ window.onload = Task.async(function* ()
`Rep correctly selects ${ElementNode.rep.displayName} for SVG element node`);
const renderedComponent = renderComponent(ElementNode.rep, { object: stub });
is(renderedComponent.textContent,
'<clipPath id="clip" class="svg-element">',
"Element node rep has expected text content for SVG element node");
const tinyRenderedComponent = renderComponent(
- ElementNode.rep, { object: stub, mode: "tiny" });
+ ElementNode.rep, { object: stub, mode: MODE.TINY });
is(tinyRenderedComponent.textContent, `clipPath#clip.svg-element`,
"Element node rep has expected text content for SVG element node in tiny mode");
}
function testSvgNodeInXHTML() {
const stub = getGripStub("testSvgNodeInXHTML");
const renderedRep = shallowRenderComponent(Rep, { object: stub });
@@ -164,17 +165,17 @@ window.onload = Task.async(function* ()
`Rep correctly selects ${ElementNode.rep.displayName} for XHTML SVG element node`);
const renderedComponent = renderComponent(ElementNode.rep, { object: stub });
is(renderedComponent.textContent,
'<svg:circle class="svg-element" cx="0" cy="0" r="5">',
"Element node rep has expected text content for XHTML SVG element node");
const tinyRenderedComponent = renderComponent(
- ElementNode.rep, { object: stub, mode: "tiny" });
+ ElementNode.rep, { object: stub, mode: MODE.TINY });
is(tinyRenderedComponent.textContent, `svg:circle.svg-element`,
"Element node rep has expected text content for XHTML SVG element in tiny mode");
}
function testOnMouseOver() {
const stub = getGripStub("testNode");
let mouseOverValue;
--- a/devtools/client/shared/components/test/mochitest/test_reps_error.html
+++ b/devtools/client/shared/components/test/mochitest/test_reps_error.html
@@ -16,16 +16,17 @@ Test Error rep
<pre id="test">
<script src="head.js" type="application/javascript;version=1.8"></script>
<script type="application/javascript;version=1.8">
"use strict";
window.onload = Task.async(function* () {
let { Rep } = browserRequire("devtools/client/shared/components/reps/rep");
let { ErrorRep } = browserRequire("devtools/client/shared/components/reps/error");
+ const { MODE } = browserRequire("devtools/client/shared/components/reps/constants");
try {
// Test errors with different properties
yield testSimpleError();
yield testMultilineStackError();
yield testErrorWithoutStacktrace();
// Test different kind of errors
@@ -51,17 +52,18 @@ window.onload = Task.async(function* ()
const renderedComponent = renderComponent(ErrorRep.rep, {object: stub});
is(renderedComponent.textContent,
"Error: Error message\n" +
"Stack trace:\n" +
"@debugger eval code:1:13\n",
"Error Rep has expected text content for a simple error");
- const tinyRenderedComponent = renderComponent(ErrorRep.rep, {object: stub, mode: "tiny"});
+ const tinyRenderedComponent = renderComponent(
+ ErrorRep.rep, {object: stub, mode: MODE.TINY});
is(tinyRenderedComponent.textContent,
"Error",
"Error Rep has expected text content for a simple error in tiny mode");
}
function testMultilineStackError() {
/*
* Test object = `
@@ -82,34 +84,36 @@ window.onload = Task.async(function* ()
is(renderedComponent.textContent,
"Error: bar\n" +
"Stack trace:\n" +
"errorBar@debugger eval code:6:15\n" +
"errorFoo@debugger eval code:3:3\n" +
"@debugger eval code:8:1\n",
"Error Rep has expected text content for an error with a multiple line");
- const tinyRenderedComponent = renderComponent(ErrorRep.rep, {object: stub, mode: "tiny"});
+ const tinyRenderedComponent = renderComponent(
+ ErrorRep.rep, {object: stub, mode: MODE.TINY});
is(tinyRenderedComponent.textContent,
"Error",
"Error Rep has expected text content for an error with a multiple line in tiny mode");
}
function testErrorWithoutStacktrace() {
const stub = getGripStub("testErrorWithoutStacktrace");
const renderedRep = shallowRenderComponent(Rep, {object: stub});
is(renderedRep.type, ErrorRep.rep,
`Rep correctly selects ${ErrorRep.rep.displayName} for Error object`);
const renderedComponent = renderComponent(ErrorRep.rep, {object: stub});
is(renderedComponent.textContent,
"Error: Error message",
"Error Rep has expected text content for an error without stacktrace");
- const tinyRenderedComponent = renderComponent(ErrorRep.rep, {object: stub, mode: "tiny"});
+ const tinyRenderedComponent = renderComponent(
+ ErrorRep.rep, {object: stub, mode: MODE.TINY});
is(tinyRenderedComponent.textContent,
"Error",
"Error Rep has expected text content for an error without stacktrace in tiny mode");
}
function testEvalError() {
// Test object = `new EvalError("EvalError message")`
const stub = getGripStub("testEvalError");
@@ -119,17 +123,18 @@ window.onload = Task.async(function* ()
const renderedComponent = renderComponent(ErrorRep.rep, {object: stub});
is(renderedComponent.textContent,
"EvalError: EvalError message\n" +
"Stack trace:\n" +
"@debugger eval code:10:13\n",
"Error Rep has expected text content for an EvalError");
- const tinyRenderedComponent = renderComponent(ErrorRep.rep, {object: stub, mode: "tiny"});
+ const tinyRenderedComponent = renderComponent(
+ ErrorRep.rep, {object: stub, mode: MODE.TINY});
is(tinyRenderedComponent.textContent,
"EvalError",
"Error Rep has expected text content for an EvalError in tiny mode");
}
function testInternalError() {
// Test object = `new InternalError("InternalError message")`
const stub = getGripStub("testInternalError");
@@ -139,17 +144,18 @@ window.onload = Task.async(function* ()
const renderedComponent = renderComponent(ErrorRep.rep, {object: stub});
is(renderedComponent.textContent,
"InternalError: InternalError message\n" +
"Stack trace:\n" +
"@debugger eval code:11:13\n",
"Error Rep has expected text content for an InternalError");
- const tinyRenderedComponent = renderComponent(ErrorRep.rep, {object: stub, mode: "tiny"});
+ const tinyRenderedComponent = renderComponent(
+ ErrorRep.rep, {object: stub, mode: MODE.TINY});
is(tinyRenderedComponent.textContent,
"InternalError",
"Error Rep has expected text content for an InternalError in tiny mode");
}
function testRangeError() {
// Test object = `new RangeError("RangeError message")`
const stub = getGripStub("testRangeError");
@@ -159,17 +165,18 @@ window.onload = Task.async(function* ()
const renderedComponent = renderComponent(ErrorRep.rep, {object: stub});
is(renderedComponent.textContent,
"RangeError: RangeError message\n" +
"Stack trace:\n" +
"@debugger eval code:12:13\n",
"Error Rep has expected text content for RangeError");
- const tinyRenderedComponent = renderComponent(ErrorRep.rep, {object: stub, mode: "tiny"});
+ const tinyRenderedComponent = renderComponent(
+ ErrorRep.rep, {object: stub, mode: MODE.TINY});
is(tinyRenderedComponent.textContent,
"RangeError",
"Error Rep has expected text content for RangeError in tiny mode");
}
function testReferenceError() {
// Test object = `new ReferenceError("ReferenceError message"`
const stub = getGripStub("testReferenceError");
@@ -179,17 +186,18 @@ window.onload = Task.async(function* ()
const renderedComponent = renderComponent(ErrorRep.rep, {object: stub});
is(renderedComponent.textContent,
"ReferenceError: ReferenceError message\n" +
"Stack trace:\n" +
"@debugger eval code:13:13\n",
"Error Rep has expected text content for ReferenceError");
- const tinyRenderedComponent = renderComponent(ErrorRep.rep, {object: stub, mode: "tiny"});
+ const tinyRenderedComponent = renderComponent(
+ ErrorRep.rep, {object: stub, mode: MODE.TINY});
is(tinyRenderedComponent.textContent,
"ReferenceError",
"Error Rep has expected text content for ReferenceError in tiny mode");
}
function testSyntaxError() {
// Test object = `new SyntaxError("SyntaxError message"`
const stub = getGripStub("testSyntaxError");
@@ -199,17 +207,18 @@ window.onload = Task.async(function* ()
const renderedComponent = renderComponent(ErrorRep.rep, {object: stub});
is(renderedComponent.textContent,
"SyntaxError: SyntaxError message\n" +
"Stack trace:\n" +
"@debugger eval code:14:13\n",
"Error Rep has expected text content for SyntaxError");
- const tinyRenderedComponent = renderComponent(ErrorRep.rep, {object: stub, mode: "tiny"});
+ const tinyRenderedComponent = renderComponent(
+ ErrorRep.rep, {object: stub, mode: MODE.TINY});
is(tinyRenderedComponent.textContent,
"SyntaxError",
"SyntaxError Rep has expected text content for SyntaxError in tiny mode");
}
function testTypeError() {
// Test object = `new TypeError("TypeError message"`
const stub = getGripStub("testTypeError");
@@ -219,17 +228,18 @@ window.onload = Task.async(function* ()
const renderedComponent = renderComponent(ErrorRep.rep, {object: stub});
is(renderedComponent.textContent,
"TypeError: TypeError message\n" +
"Stack trace:\n" +
"@debugger eval code:15:13\n",
"Error Rep has expected text content for TypeError");
- const tinyRenderedComponent = renderComponent(ErrorRep.rep, {object: stub, mode: "tiny"});
+ const tinyRenderedComponent = renderComponent(
+ ErrorRep.rep, {object: stub, mode: MODE.TINY});
is(tinyRenderedComponent.textContent,
"TypeError",
"Error Rep has expected text content for a TypeError in tiny mode");
}
function testURIError() {
// Test object = `new URIError("URIError message")`
const stub = getGripStub("testURIError");
@@ -239,17 +249,18 @@ window.onload = Task.async(function* ()
const renderedComponent = renderComponent(ErrorRep.rep, {object: stub});
is(renderedComponent.textContent,
"URIError: URIError message\n" +
"Stack trace:\n" +
"@debugger eval code:16:13\n",
"Error Rep has expected text content for URIError");
- const tinyRenderedComponent = renderComponent(ErrorRep.rep, {object: stub, mode: "tiny"});
+ const tinyRenderedComponent = renderComponent(
+ ErrorRep.rep, {object: stub, mode: MODE.TINY});
is(tinyRenderedComponent.textContent,
"URIError",
"Error Rep has expected text content for URIError in tiny mode");
}
function getGripStub(name) {
switch (name) {
case "testSimpleError":
--- a/devtools/client/shared/components/test/mochitest/test_reps_grip-array.html
+++ b/devtools/client/shared/components/test/mochitest/test_reps_grip-array.html
@@ -14,16 +14,17 @@ Test GripArray rep
</head>
<body>
<pre id="test">
<script src="head.js" type="application/javascript;version=1.8"></script>
<script type="application/javascript;version=1.8">
window.onload = Task.async(function* () {
let { Rep } = browserRequire("devtools/client/shared/components/reps/rep");
let { GripArray } = browserRequire("devtools/client/shared/components/reps/grip-array");
+ const { MODE } = browserRequire("devtools/client/shared/components/reps/constants");
let componentUnderTest = GripArray;
const maxLength = {
short: 3,
long: 10
};
try {
@@ -36,19 +37,17 @@ window.onload = Task.async(function* ()
yield testRecursiveArray();
yield testPreviewLimit();
yield testNamedNodeMap();
yield testNodeList();
yield testDocumentFragment();
yield testOnMouseOver();
yield testOnMouseOut();
-
-
- } catch(e) {
+ } catch (e) {
ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
} finally {
SimpleTest.finish();
}
function testBasic() {
// Test array: `[]`
const testName = "testBasic";
@@ -62,25 +61,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `Array []`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `[]`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
function testMaxProps() {
@@ -90,25 +89,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `Array [ 1, "foo", Object ]`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `[3]`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
function testMoreThanShortMaxProps() {
@@ -118,25 +117,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `Array [ ${Array(maxLength.short).fill("\"test string\"").join(", ")}, 1 more… ]`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `[${maxLength.short + 1}]`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: `Array [ ${Array(maxLength.short + 1).fill("\"test string\"").join(", ")} ]`,
}
];
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
function testMoreThanLongMaxProps() {
@@ -147,25 +146,25 @@ window.onload = Task.async(function* ()
const defaultLongOutput = `Array [ ${Array(maxLength.long).fill("\"test string\"").join(", ")}, 1 more… ]`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultShortOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `[${maxLength.long + 1}]`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultShortOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultLongOutput
}
];
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
function testRecursiveArray() {
@@ -175,25 +174,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `Array [ [1] ]`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `[1]`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
function testPreviewLimit() {
@@ -203,25 +202,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `Array [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1 more… ]`;
const modeTests = [
{
mode: undefined,
expectedOutput: shortOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `[11]`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: shortOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
function testNamedNodeMap() {
@@ -230,25 +229,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `NamedNodeMap [ class="myclass", cellpadding="7", border="3" ]`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `[3]`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
function testNodeList() {
@@ -257,25 +256,25 @@ window.onload = Task.async(function* ()
"button#btn-2.btn.btn-err, button#btn-3.btn.btn-count ]";
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `[3]`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
function testDocumentFragment() {
@@ -289,25 +288,25 @@ window.onload = Task.async(function* ()
"li#li-3.list-element, li#li-4.list-element ]";
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `[5]`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: longOutput,
}
];
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
--- a/devtools/client/shared/components/test/mochitest/test_reps_grip-map.html
+++ b/devtools/client/shared/components/test/mochitest/test_reps_grip-map.html
@@ -16,16 +16,17 @@ Test GripMap rep
<pre id="test">
<script src="head.js" type="application/javascript;version=1.8"></script>
<script type="application/javascript;version=1.8">
"use strict";
window.onload = Task.async(function* () {
let { Rep } = browserRequire("devtools/client/shared/components/reps/rep");
let { GripMap } = browserRequire("devtools/client/shared/components/reps/grip-map");
+ const { MODE } = browserRequire("devtools/client/shared/components/reps/constants");
const componentUnderTest = GripMap;
try {
yield testEmptyMap();
yield testSymbolKeyedMap();
yield testWeakMap();
@@ -52,25 +53,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `Map { }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: "Map",
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
function testSymbolKeyedMap() {
@@ -81,25 +82,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `Map { Symbol(a): "value-a", Symbol(b): "value-b" }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: "Map",
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
function testWeakMap() {
@@ -115,25 +116,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `WeakMap { Object: "value-a" }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: "WeakMap",
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
function testMaxEntries() {
@@ -144,25 +145,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `Map { key-a: "value-a", key-b: "value-b", key-c: "value-c" }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: "Map",
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
function testMoreThanMaxEntries() {
@@ -178,25 +179,25 @@ window.onload = Task.async(function* ()
const longOutput = `Map { ${longString.join(", ")}, 91 more… }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `Map`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: longOutput,
}
];
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
function testUninterestingEntries() {
@@ -210,25 +211,25 @@ window.onload = Task.async(function* ()
`Map { key-a: null, key-b: undefined, key-c: "value-c", key-d: 4 }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `Map`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: longOutput,
}
];
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
function getGripStub(functionName) {
--- a/devtools/client/shared/components/test/mochitest/test_reps_grip.html
+++ b/devtools/client/shared/components/test/mochitest/test_reps_grip.html
@@ -14,16 +14,17 @@ Test grip rep
</head>
<body>
<pre id="test">
<script src="head.js" type="application/javascript;version=1.8"></script>
<script type="application/javascript;version=1.8">
window.onload = Task.async(function* () {
let { Rep } = browserRequire("devtools/client/shared/components/reps/rep");
let { Grip } = browserRequire("devtools/client/shared/components/reps/grip");
+ const { MODE } = browserRequire("devtools/client/shared/components/reps/constants");
const componentUnderTest = Grip;
try {
yield testBasic();
yield testBooleanObject();
yield testNumberObject();
yield testStringObject();
@@ -62,25 +63,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `Object { }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `Object`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
function testBooleanObject() {
@@ -96,25 +97,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `Boolean { true }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `Boolean`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
function testNumberObject() {
@@ -130,25 +131,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `Number { 42 }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `Number`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
function testStringObject() {
@@ -164,25 +165,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `String { "foo" }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `String`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
function testProxy() {
@@ -198,25 +199,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `Proxy { <target>: Object, <handler>: [3] }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `Proxy`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
function testArrayBuffer() {
@@ -232,25 +233,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `ArrayBuffer { byteLength: 10 }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `ArrayBuffer`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
function testSharedArrayBuffer() {
@@ -266,25 +267,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `SharedArrayBuffer { byteLength: 5 }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `SharedArrayBuffer`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
function testMaxProps() {
@@ -294,25 +295,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `Object { a: "a", b: "b", c: "c" }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `Object`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
function testMoreThanMaxProps() {
@@ -330,25 +331,25 @@ window.onload = Task.async(function* ()
const longOutput = `Object { ${props.join(", ")}, 91 more… }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `Object`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: longOutput,
}
];
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
function testUninterestingProps() {
@@ -371,25 +372,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `Object { }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `Object`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
function testNestedObject() {
@@ -399,25 +400,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `Object { objProp: Object, strProp: "test string" }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `Object`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
function testNestedArray() {
@@ -427,25 +428,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `Object { arrProp: [3] }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `Object`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
function testMoreProp() {
@@ -456,25 +457,25 @@ window.onload = Task.async(function* ()
const longOutput = `Object { a: undefined, b: 1, more: 2, d: 3 }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `Object`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: longOutput,
}
];
testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
}
function getGripStub(functionName) {
--- a/devtools/client/shared/components/test/mochitest/test_reps_object.html
+++ b/devtools/client/shared/components/test/mochitest/test_reps_object.html
@@ -14,16 +14,17 @@ Test Obj rep
</head>
<body>
<pre id="test">
<script src="head.js" type="application/javascript;version=1.8"></script>
<script type="application/javascript;version=1.8">
window.onload = Task.async(function* () {
let { Rep } = browserRequire("devtools/client/shared/components/reps/rep");
let { Obj } = browserRequire("devtools/client/shared/components/reps/object");
+ const { MODE } = browserRequire("devtools/client/shared/components/reps/constants");
const componentUnderTest = Obj;
try {
yield testBasic();
// Test property iterator
yield testMaxProps();
@@ -52,25 +53,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `Object`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: defaultOutput,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, "testBasic", componentUnderTest, stub);
}
function testMaxProps() {
@@ -80,25 +81,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `Object { a: "a", b: "b", c: "c" }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `Object`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, "testMaxProps", componentUnderTest, stub);
}
function testMoreThanMaxProps() {
@@ -109,25 +110,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `Object { p0: 0, p1: 1, p2: 2, 97 more… }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `Object`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, "testMoreThanMaxProps", componentUnderTest, stub);
}
function testUninterestingProps() {
@@ -135,25 +136,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `Object { c: "c", d: 0, a: undefined, 1 more… }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `Object`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, "testUninterestingProps", componentUnderTest, stub);
}
function testNested() {
@@ -168,25 +169,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `Object { strProp: "test string", objProp: Object, arrProp: [1] }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `Object`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, "testNestedObject", componentUnderTest, stub);
}
function testMoreProp() {
@@ -199,25 +200,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `Object { b: 1, more: 2, d: 3, 1 more… }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `Object`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, "testMoreProp", componentUnderTest, stub);
}});
</script>
</pre>
--- a/devtools/client/shared/components/test/mochitest/test_reps_promise.html
+++ b/devtools/client/shared/components/test/mochitest/test_reps_promise.html
@@ -16,16 +16,17 @@ Test Promise rep
<pre id="test">
<script src="head.js" type="application/javascript;version=1.8"></script>
<script type="application/javascript;version=1.8">
"use strict";
window.onload = Task.async(function* () {
let { Rep } = browserRequire("devtools/client/shared/components/reps/rep");
let { PromiseRep } = browserRequire("devtools/client/shared/components/reps/promise");
+ const { MODE } = browserRequire("devtools/client/shared/components/reps/constants");
const componentUnderTest = PromiseRep;
try {
yield testPending();
yield testFulfilledWithNumber();
yield testFulfilledWithString();
yield testFulfilledWithObject();
@@ -49,25 +50,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `Promise { <state>: "pending" }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `Promise { "pending" }`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, "testPending", componentUnderTest, stub);
}
function testFulfilledWithNumber() {
// Test object = `Promise.resolve(42)`
@@ -83,25 +84,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `Promise { <state>: "fulfilled", <value>: 42 }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `Promise { "fulfilled" }`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, "testFulfilledWithNumber", componentUnderTest, stub);
}
function testFulfilledWithString() {
// Test object = `Promise.resolve("foo")`
@@ -117,25 +118,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `Promise { <state>: "fulfilled", <value>: "foo" }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `Promise { "fulfilled" }`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, "testFulfilledWithString", componentUnderTest, stub);
}
function testFulfilledWithObject() {
@@ -152,25 +153,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `Promise { <state>: "fulfilled", <value>: Object }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `Promise { "fulfilled" }`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, "testFulfilledWithObject", componentUnderTest, stub);
}
function testFulfilledWithArray() {
@@ -187,25 +188,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `Promise { <state>: "fulfilled", <value>: [3] }`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: `Promise { "fulfilled" }`,
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, "testFulfilledWithArray", componentUnderTest, stub);
}
function getGripStub(name) {
--- a/devtools/client/shared/components/test/mochitest/test_reps_text-node.html
+++ b/devtools/client/shared/components/test/mochitest/test_reps_text-node.html
@@ -16,16 +16,17 @@ Test text-node rep
<pre id="test">
<script src="head.js" type="application/javascript;version=1.8"></script>
<script type="application/javascript;version=1.8">
"use strict";
window.onload = Task.async(function* () {
let { Rep } = browserRequire("devtools/client/shared/components/reps/rep");
let { TextNode } = browserRequire("devtools/client/shared/components/reps/text-node");
+ const { MODE } = browserRequire("devtools/client/shared/components/reps/constants");
let gripStubs = new Map();
gripStubs.set("testRendering", {
"class": "Text",
"actor": "server1.conn1.child1/obj50",
"preview": {
"textContent": "hello world"
}
@@ -63,25 +64,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `#text "hello world"`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: "#text",
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, "testRendering", TextNode, stub);
}
function testRenderingWithEOL() {
@@ -89,25 +90,25 @@ window.onload = Task.async(function* ()
const defaultOutput = `#text "hello\nworld"`;
const modeTests = [
{
mode: undefined,
expectedOutput: defaultOutput,
},
{
- mode: "tiny",
+ mode: MODE.TINY,
expectedOutput: "#text",
},
{
- mode: "short",
+ mode: MODE.SHORT,
expectedOutput: defaultOutput,
},
{
- mode: "long",
+ mode: MODE.LONG,
expectedOutput: defaultOutput,
}
];
testRepRenderModes(modeTests, "testRenderingWithEOL", TextNode, stub);
}
function testOnMouseOver() {
--- a/devtools/client/webconsole/net/components/post-tab.js
+++ b/devtools/client/webconsole/net/components/post-tab.js
@@ -4,16 +4,17 @@
"use strict";
const React = require("devtools/client/shared/vendor/react");
// Reps
const { createFactories, parseURLEncodedText } = require("devtools/client/shared/components/reps/rep-utils");
const TreeView = React.createFactory(require("devtools/client/shared/components/tree/tree-view"));
const { Rep } = createFactories(require("devtools/client/shared/components/reps/rep"));
+const { MODE } = require("devtools/client/shared/components/reps/constants");
// Network
const NetInfoParams = React.createFactory(require("./net-info-params"));
const NetInfoGroupList = React.createFactory(require("./net-info-group-list"));
const Spinner = React.createFactory(require("./spinner"));
const SizeLimit = React.createFactory(require("./size-limit"));
const NetUtils = require("../utils/net");
const Json = require("../utils/json");
@@ -71,17 +72,17 @@ var PostTab = React.createClass({
return null;
}
return {
key: "json",
content: TreeView({
columns: [{id: "value"}],
object: json,
- mode: "tiny",
+ mode: MODE.TINY,
renderValue: props => Rep(Object.assign({}, props, {
cropLimit: 50,
})),
}),
name: Locale.$STR("jsonScopeName")
};
},
--- a/devtools/client/webconsole/net/components/response-tab.js
+++ b/devtools/client/webconsole/net/components/response-tab.js
@@ -4,16 +4,17 @@
"use strict";
const React = require("devtools/client/shared/vendor/react");
// Reps
const { createFactories } = require("devtools/client/shared/components/reps/rep-utils");
const TreeView = React.createFactory(require("devtools/client/shared/components/tree/tree-view"));
const { Rep } = createFactories(require("devtools/client/shared/components/reps/rep"));
+const { MODE } = require("devtools/client/shared/components/reps/constants");
// Network
const SizeLimit = React.createFactory(require("./size-limit"));
const NetInfoGroupList = React.createFactory(require("./net-info-group-list"));
const Spinner = React.createFactory(require("./spinner"));
const Json = require("../utils/json");
const NetUtils = require("../utils/net");
@@ -99,17 +100,17 @@ var ResponseTab = React.createClass({
return null;
}
return {
key: "json",
content: TreeView({
columns: [{id: "value"}],
object: json,
- mode: "tiny",
+ mode: MODE.TINY,
renderValue: props => Rep(Object.assign({}, props, {
cropLimit: 50,
})),
}),
name: Locale.$STR("jsonScopeName")
};
},
--- a/devtools/client/webconsole/new-console-output/components/console-table.js
+++ b/devtools/client/webconsole/new-console-output/components/console-table.js
@@ -7,16 +7,17 @@ const {
createClass,
createFactory,
DOM: dom,
PropTypes
} = require("devtools/client/shared/vendor/react");
const { ObjectClient } = require("devtools/shared/client/main");
const actions = require("devtools/client/webconsole/new-console-output/actions/messages");
const {l10n} = require("devtools/client/webconsole/new-console-output/utils/messages");
+const { MODE } = require("devtools/client/shared/components/reps/constants");
const GripMessageBody = createFactory(require("devtools/client/webconsole/new-console-output/components/grip-message-body"));
const TABLE_ROW_MAX_ITEMS = 1000;
const TABLE_COLUMN_MAX_ITEMS = 10;
const ConsoleTable = createClass({
displayName: "ConsoleTable",
@@ -54,17 +55,17 @@ const ConsoleTable = createClass({
return items.map(item => {
let cells = [];
columns.forEach((value, key) => {
cells.push(
dom.td(
{},
GripMessageBody({
grip: item[key],
- mode: "short",
+ mode: MODE.SHORT,
})
)
);
});
return dom.tr({}, cells);
});
},
--- a/devtools/client/webconsole/new-console-output/components/grip-message-body.js
+++ b/devtools/client/webconsole/new-console-output/components/grip-message-body.js
@@ -17,33 +17,34 @@ const {
createFactory,
PropTypes
} = require("devtools/client/shared/vendor/react");
const { createFactories } = require("devtools/client/shared/components/reps/rep-utils");
const { Rep } = createFactories(require("devtools/client/shared/components/reps/rep"));
const StringRep = createFactories(require("devtools/client/shared/components/reps/string").StringRep).rep;
const VariablesViewLink = createFactory(require("devtools/client/webconsole/new-console-output/components/variables-view-link"));
const { Grip } = require("devtools/client/shared/components/reps/grip");
+const { MODE } = require("devtools/client/shared/components/reps/constants");
GripMessageBody.displayName = "GripMessageBody";
GripMessageBody.propTypes = {
grip: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.object,
]).isRequired,
serviceContainer: PropTypes.shape({
createElement: PropTypes.func.isRequired,
}),
userProvidedStyle: PropTypes.string,
};
GripMessageBody.defaultProps = {
- mode: "long",
+ mode: MODE.LONG,
};
function GripMessageBody(props) {
const { grip, userProvidedStyle, serviceContainer } = props;
let styleObject;
if (userProvidedStyle && userProvidedStyle !== "") {
styleObject = cleanupStyle(userProvidedStyle, serviceContainer.createElement);