From 55916c9184233b98576be9e591b84f77ffd29934 Mon Sep 17 00:00:00 2001 From: Julian Descottes Date: Thu, 19 Jan 2017 13:26:09 +0100 Subject: [PATCH] synchronize reps from mc --- src/reps/array.js | 27 +++++++++++++++++++++------ src/reps/attribute.js | 21 ++++++++++++++------- src/reps/caption.js | 12 ++++++++++-- src/reps/comment-node.js | 13 ++++++++++--- src/reps/date-time.js | 15 +++++++++++---- src/reps/document.js | 15 +++++++++++---- src/reps/element-node.js | 14 +++++++++++--- src/reps/error.js | 12 +++++++++--- src/reps/event.js | 15 +++++++++++---- src/reps/function.js | 16 ++++++++++++---- src/reps/grip-array.js | 17 ++++++++++++----- src/reps/grip-map.js | 18 +++++++++++++----- src/reps/grip.js | 21 ++++++++++++++------- src/reps/infinity.js | 12 ++++++++++-- src/reps/load-reps.js | 2 +- src/reps/long-string.js | 17 +++++++++++++---- src/reps/nan.js | 8 ++++++-- src/reps/null.js | 9 +++++++-- src/reps/number.js | 16 ++++++++++++++-- src/reps/object-with-text.js | 12 +++++++++--- src/reps/object-with-url.js | 13 ++++++++++--- src/reps/object.js | 17 ++++++++++++----- src/reps/promise.js | 18 +++++++++++++----- src/reps/prop-rep.js | 21 ++++++++++++++------- src/reps/regexp.js | 12 +++++++++--- src/reps/rep-utils.js | 23 +++++++++++++++++++++++ src/reps/string.js | 16 +++++++++++++--- src/reps/stylesheet.js | 14 +++++++++++--- src/reps/symbol.js | 8 ++++++-- src/reps/text-node.js | 15 ++++++++++++--- src/reps/undefined.js | 9 +++++++-- src/reps/window.js | 25 +++++++++++-------------- 32 files changed, 360 insertions(+), 123 deletions(-) diff --git a/src/reps/array.js b/src/reps/array.js index 0ac2af3..80e4f85 100644 --- a/src/reps/array.js +++ b/src/reps/array.js @@ -1,6 +1,12 @@ +"use strict"; +// Dependencies const React = require("react"); -const Caption = React.createFactory(require("./caption")); +const { + createFactories, + wrapRender, +} = require("./rep-utils"); +const { Caption } = createFactories(require("./caption")); const { MODE } = require("./constants"); // Shortcuts @@ -16,6 +22,8 @@ let ArrayRep = React.createClass({ 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])), + objectLink: React.PropTypes.func, + object: React.PropTypes.array.isRequired, }, getTitle: function (object, context) { @@ -105,7 +113,7 @@ let ArrayRep = React.createClass({ onClickBracket: function (event) { }, - render: function () { + render: wrapRender(function () { let { object, mode = MODE.SHORT, @@ -147,7 +155,7 @@ let ArrayRep = React.createClass({ ) ) ); - }, + }), }); /** @@ -156,8 +164,14 @@ let ArrayRep = React.createClass({ let ItemRep = React.createFactory(React.createClass({ displayName: "ItemRep", - render: function () { - const Rep = React.createFactory(require("./rep")); + propTypes: { + object: React.PropTypes.any.isRequired, + delim: React.PropTypes.string.isRequired, + mode: React.PropTypes.symbol, + }, + + render: wrapRender(function () { + const { Rep } = createFactories(require("./rep")); let object = this.props.object; let delim = this.props.delim; @@ -168,7 +182,7 @@ let ItemRep = React.createFactory(React.createClass({ delim ) ); - } + }) })); function supportsObject(object, type) { @@ -176,6 +190,7 @@ function supportsObject(object, type) { Object.prototype.toString.call(object) === "[object Arguments]"; } +// Exports from this module module.exports = { rep: ArrayRep, supportsObject: supportsObject diff --git a/src/reps/attribute.js b/src/reps/attribute.js index 9f5212a..85f9b71 100644 --- a/src/reps/attribute.js +++ b/src/reps/attribute.js @@ -1,11 +1,17 @@ +// ReactJS const React = require("react"); // Reps -const { isGrip } = require("./rep-utils"); -const StringRep = React.createFactory(require("./string").rep); +const { + createFactories, + isGrip, + wrapRender, +} = require("./rep-utils"); +const { StringRep } = require("./string"); // Shortcuts const { span } = React.DOM; +const { rep: StringRepFactory } = createFactories(StringRep); /** * Renders DOM attribute @@ -14,14 +20,15 @@ let Attribute = React.createClass({ displayName: "Attr", propTypes: { - object: React.PropTypes.object.isRequired + object: React.PropTypes.object.isRequired, + objectLink: React.PropTypes.func, }, getTitle: function (grip) { return grip.preview.nodeName; }, - render: function () { + render: wrapRender(function () { let object = this.props.object; let value = object.preview.value; let objectLink = this.props.objectLink || span; @@ -35,11 +42,11 @@ let Attribute = React.createClass({ span({className: "attrEqual"}, "=" ), - StringRep({object: value}) + StringRepFactory({object: value}) ) ) ); - }, + }), }); // Registration @@ -55,4 +62,4 @@ function supportsObject(grip, type) { module.exports = { rep: Attribute, supportsObject: supportsObject -}; +}; \ No newline at end of file diff --git a/src/reps/caption.js b/src/reps/caption.js index 12e9cef..b01d668 100644 --- a/src/reps/caption.js +++ b/src/reps/caption.js @@ -1,6 +1,9 @@ +// Dependencies const React = require("react"); const DOM = React.DOM; +const { wrapRender } = require("./rep-utils"); + /** * Renders a caption. This template is used by other components * that needs to distinguish between a simple text/value and a label. @@ -8,11 +11,16 @@ const DOM = React.DOM; const Caption = React.createClass({ displayName: "Caption", - render: function () { + propTypes: { + object: React.PropTypes.object, + }, + + render: wrapRender(function () { return ( DOM.span({"className": "caption"}, this.props.object) ); - }, + }), }); +// Exports from this module module.exports = Caption; diff --git a/src/reps/comment-node.js b/src/reps/comment-node.js index cb224ea..f6f0197 100644 --- a/src/reps/comment-node.js +++ b/src/reps/comment-node.js @@ -1,5 +1,11 @@ +// Dependencies const React = require("react"); -const { isGrip, cropString, cropMultipleLines } = require("./rep-utils"); +const { + isGrip, + cropString, + cropMultipleLines, + wrapRender, +} = require("./rep-utils"); const { MODE } = require("./constants"); const nodeConstants = require("../shared/dom-node-constants"); @@ -18,7 +24,7 @@ const CommentNode = React.createClass({ mode: React.PropTypes.oneOf(Object.keys(MODE).map(key => MODE[key])), }, - render: function () { + render: wrapRender(function () { let { object, mode = MODE.SHORT @@ -32,7 +38,7 @@ const CommentNode = React.createClass({ } return span({className: "objectBox theme-comment"}, ``); - }, + }), }); // Registration @@ -43,6 +49,7 @@ function supportsObject(object, type) { return object.preview && object.preview.nodeType === nodeConstants.COMMENT_NODE; } +// Exports from this module module.exports = { rep: CommentNode, supportsObject: supportsObject diff --git a/src/reps/date-time.js b/src/reps/date-time.js index 3258759..49b3132 100644 --- a/src/reps/date-time.js +++ b/src/reps/date-time.js @@ -1,7 +1,11 @@ +// ReactJS const React = require("react"); // Reps -const { isGrip } = require("./rep-utils"); +const { + isGrip, + wrapRender, +} = require("./rep-utils"); // Shortcuts const { span } = React.DOM; @@ -13,7 +17,8 @@ let DateTime = React.createClass({ displayName: "Date", propTypes: { - object: React.PropTypes.object.isRequired + object: React.PropTypes.object.isRequired, + objectLink: React.PropTypes.func, }, getTitle: function (grip) { @@ -25,7 +30,7 @@ let DateTime = React.createClass({ return ""; }, - render: function () { + render: wrapRender(function () { let grip = this.props.object; let date; try { @@ -38,8 +43,9 @@ let DateTime = React.createClass({ } catch (e) { date = span({className: "objectBox"}, "Invalid Date"); } + return date; - }, + }), }); // Registration @@ -52,6 +58,7 @@ function supportsObject(grip, type) { return (type == "Date" && grip.preview); } +// Exports from this module module.exports = { rep: DateTime, supportsObject: supportsObject diff --git a/src/reps/document.js b/src/reps/document.js index e429207..3bda1ae 100644 --- a/src/reps/document.js +++ b/src/reps/document.js @@ -1,7 +1,12 @@ +// ReactJS const React = require("react"); // Reps -const { isGrip, getURLDisplayString } = require("./rep-utils"); +const { + isGrip, + getURLDisplayString, + wrapRender, +} = require("./rep-utils"); // Shortcuts const { span } = React.DOM; @@ -13,7 +18,8 @@ let Document = React.createClass({ displayName: "Document", propTypes: { - object: React.PropTypes.object.isRequired + object: React.PropTypes.object.isRequired, + objectLink: React.PropTypes.func, }, getLocation: function (grip) { @@ -36,7 +42,7 @@ let Document = React.createClass({ return doc.location.href; }, - render: function () { + render: wrapRender(function () { let grip = this.props.object; return ( @@ -47,7 +53,7 @@ let Document = React.createClass({ ) ) ); - }, + }), }); // Registration @@ -60,6 +66,7 @@ function supportsObject(object, type) { return (object.preview && type == "HTMLDocument"); } +// Exports from this module module.exports = { rep: Document, supportsObject: supportsObject diff --git a/src/reps/element-node.js b/src/reps/element-node.js index 24de9e2..04577c3 100644 --- a/src/reps/element-node.js +++ b/src/reps/element-node.js @@ -1,7 +1,11 @@ +// ReactJS const React = require("react"); // Utils -const { isGrip } = require("./rep-utils"); +const { + isGrip, + wrapRender, +} = require("./rep-utils"); const { MODE } = require("./constants"); const nodeConstants = require("../shared/dom-node-constants"); @@ -18,6 +22,9 @@ const ElementNode = React.createClass({ object: React.PropTypes.object.isRequired, // @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])), + onDOMNodeMouseOver: React.PropTypes.func, + onDOMNodeMouseOut: React.PropTypes.func, + objectLink: React.PropTypes.func, }, getElements: function (grip, mode) { @@ -78,7 +85,7 @@ const ElementNode = React.createClass({ ]; }, - render: function () { + render: wrapRender(function () { let { object, mode, @@ -104,7 +111,7 @@ const ElementNode = React.createClass({ return objectLink({object}, span(baseConfig, ...elements) ); - }, + }), }); // Registration @@ -115,6 +122,7 @@ function supportsObject(object, type) { return object.preview && object.preview.nodeType === nodeConstants.ELEMENT_NODE; } +// Exports from this module module.exports = { rep: ElementNode, supportsObject: supportsObject diff --git a/src/reps/error.js b/src/reps/error.js index b290687..229a6cc 100644 --- a/src/reps/error.js +++ b/src/reps/error.js @@ -1,6 +1,10 @@ +// ReactJS const React = require("react"); // Utils -const { isGrip } = require("./rep-utils"); +const { + isGrip, + wrapRender, +} = require("./rep-utils"); const { MODE } = require("./constants"); // Shortcuts const { span } = React.DOM; @@ -15,9 +19,10 @@ const ErrorRep = React.createClass({ object: React.PropTypes.object.isRequired, // @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, }, - render: function () { + render: wrapRender(function () { let object = this.props.object; let preview = object.preview; let name = preview && preview.name @@ -43,7 +48,7 @@ const ErrorRep = React.createClass({ span({}, content) ) ); - }, + }), }); // Registration @@ -54,6 +59,7 @@ function supportsObject(object, type) { return (object.preview && type === "Error"); } +// Exports from this module module.exports = { rep: ErrorRep, supportsObject: supportsObject diff --git a/src/reps/event.js b/src/reps/event.js index 0767561..0489530 100644 --- a/src/reps/event.js +++ b/src/reps/event.js @@ -1,8 +1,13 @@ +// ReactJS const React = require("react"); // Reps -const { isGrip } = require("./rep-utils"); -const rep = React.createFactory(require("./grip").rep); +const { + createFactories, + isGrip, + wrapRender, +} = require("./rep-utils"); +const { rep } = createFactories(require("./grip").Grip); /** * Renders DOM event objects. @@ -24,7 +29,7 @@ let Event = React.createClass({ return title; }, - render: function () { + render: wrapRender(function () { // Use `Object.assign` to keep `this.props` without changes because: // 1. JSON.stringify/JSON.parse is slow. // 2. Immutable.js is planned for the future. @@ -70,10 +75,11 @@ let Event = React.createClass({ } return rep(props); - } + }) }); // Registration + function supportsObject(grip, type) { if (!isGrip(grip)) { return false; @@ -82,6 +88,7 @@ function supportsObject(grip, type) { return (grip.preview && grip.preview.kind == "DOMEvent"); } +// Exports from this module module.exports = { rep: Event, supportsObject: supportsObject diff --git a/src/reps/function.js b/src/reps/function.js index c24952d..421d669 100644 --- a/src/reps/function.js +++ b/src/reps/function.js @@ -1,7 +1,12 @@ +// ReactJS const React = require("react"); // Reps -const { isGrip, cropString } = require("./rep-utils"); +const { + isGrip, + cropString, + wrapRender, +} = require("./rep-utils"); // Shortcuts const { span } = React.DOM; @@ -13,7 +18,8 @@ let Func = React.createClass({ displayName: "Func", propTypes: { - object: React.PropTypes.object.isRequired + object: React.PropTypes.object.isRequired, + objectLink: React.PropTypes.func, }, getTitle: function (grip) { @@ -30,7 +36,7 @@ let Func = React.createClass({ return cropString(name + "()", 100); }, - render: function () { + render: wrapRender(function () { let grip = this.props.object; return ( @@ -41,7 +47,7 @@ let Func = React.createClass({ this.summarizeFunction(grip) ) ); - }, + }), }); // Registration @@ -54,6 +60,8 @@ function supportsObject(grip, type) { return (type == "Function"); } +// Exports from this module + module.exports = { rep: Func, supportsObject: supportsObject diff --git a/src/reps/grip-array.js b/src/reps/grip-array.js index 7d30be4..e842bcb 100644 --- a/src/reps/grip-array.js +++ b/src/reps/grip-array.js @@ -1,6 +1,11 @@ +// Dependencies const React = require("react"); -const { isGrip } = require("./rep-utils"); -const Caption = React.createFactory(require("./caption")); +const { + createFactories, + isGrip, + wrapRender, +} = require("./rep-utils"); +const { Caption } = createFactories(require("./caption")); const { MODE } = require("./constants"); // Shortcuts @@ -18,6 +23,7 @@ let GripArray = React.createClass({ // @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, + objectLink: React.PropTypes.func, }, getLength: function (grip) { @@ -98,7 +104,7 @@ let GripArray = React.createClass({ return items; }, - render: function () { + render: wrapRender(function () { let { object, mode = MODE.SHORT @@ -143,7 +149,7 @@ let GripArray = React.createClass({ ) ) ); - }, + }), }); /** @@ -158,7 +164,7 @@ let GripArrayItem = React.createFactory(React.createClass({ }, render: function () { - let Rep = React.createFactory(require("./rep")); + let { Rep } = createFactories(require("./rep")); return ( span({}, @@ -183,6 +189,7 @@ function supportsObject(grip, type) { ); } +// Exports from this module module.exports = { rep: GripArray, supportsObject: supportsObject diff --git a/src/reps/grip-map.js b/src/reps/grip-map.js index 1417cbc..608393f 100644 --- a/src/reps/grip-map.js +++ b/src/reps/grip-map.js @@ -1,7 +1,12 @@ +// Dependencies const React = require("react"); -const { isGrip } = require("./rep-utils"); -const Caption = React.createFactory(require("./caption")); -const PropRep = React.createFactory(require("./prop-rep")); +const { + createFactories, + isGrip, + wrapRender, +} = require("./rep-utils"); +const { Caption } = createFactories(require("./caption")); +const { PropRep } = createFactories(require("./prop-rep")); const { MODE } = require("./constants"); // Shortcuts const { span } = React.DOM; @@ -16,6 +21,8 @@ const GripMap = React.createClass({ object: React.PropTypes.object, // @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, + isInterestingEntry: React.PropTypes.func, }, getTitle: function (object) { @@ -134,7 +141,7 @@ const GripMap = React.createClass({ }, []); }, - render: function () { + render: wrapRender(function () { let object = this.props.object; let props = this.safeEntriesIterator(object, (this.props.mode === MODE.LONG) ? 10 : 3); @@ -166,7 +173,7 @@ const GripMap = React.createClass({ }, " }") ) ); - }, + }), }); function supportsObject(grip, type) { @@ -176,6 +183,7 @@ function supportsObject(grip, type) { return (grip.preview && grip.preview.kind == "MapLike"); } +// Exports from this module module.exports = { rep: GripMap, supportsObject: supportsObject diff --git a/src/reps/grip.js b/src/reps/grip.js index 4848ccc..7c6cc46 100644 --- a/src/reps/grip.js +++ b/src/reps/grip.js @@ -1,8 +1,13 @@ +// ReactJS const React = require("react"); // Dependencies -const { isGrip } = require("./rep-utils"); -const Caption = React.createFactory(require("./caption")); -const PropRep = React.createFactory(require("./prop-rep")); +const { + createFactories, + isGrip, + wrapRender, +} = require("./rep-utils"); +const { Caption } = createFactories(require("./caption")); +const { PropRep } = createFactories(require("./prop-rep")); const { MODE } = require("./constants"); // Shortcuts const { span } = React.DOM; @@ -21,6 +26,7 @@ const GripRep = React.createClass({ mode: React.PropTypes.oneOf(Object.keys(MODE).map(key => MODE[key])), isInterestingProp: React.PropTypes.func, title: React.PropTypes.string, + objectLink: React.PropTypes.func, }, getTitle: function (object) { @@ -45,7 +51,7 @@ const GripRep = React.createClass({ propIterator: function (object, max) { if (object.preview && Object.keys(object.preview).includes("wrappedValue")) { - const Rep = React.createFactory(require("./rep")); + const { Rep } = createFactories(require("./rep")); return [Rep({ object: object.preview.wrappedValue, @@ -94,7 +100,7 @@ const GripRep = React.createClass({ props.push(Caption({ object: objectLink({ object: object - }, `${object.ownPropertyLength - max} more…`) + }, `${propertiesLength - max} more…`) })); } @@ -188,7 +194,7 @@ const GripRep = React.createClass({ return value; }, - render: function () { + render: wrapRender(function () { let object = this.props.object; let props = this.safePropIterator(object, (this.props.mode === MODE.LONG) ? 10 : 3); @@ -220,7 +226,7 @@ const GripRep = React.createClass({ }, " }") ) ); - }, + }), }); // Registration @@ -236,4 +242,5 @@ let Grip = { supportsObject: supportsObject }; +// Exports from this module module.exports = Grip; diff --git a/src/reps/infinity.js b/src/reps/infinity.js index 05814ce..aad1c5f 100644 --- a/src/reps/infinity.js +++ b/src/reps/infinity.js @@ -1,5 +1,8 @@ +// Dependencies const React = require("react"); +const { wrapRender } = require("./rep-utils"); + // Shortcuts const { span } = React.DOM; @@ -9,19 +12,24 @@ const { span } = React.DOM; const InfinityRep = React.createClass({ displayName: "Infinity", - render: function () { + propTypes: { + object: React.PropTypes.object.isRequired, + }, + + render: wrapRender(function () { return ( span({className: "objectBox objectBox-number"}, this.props.object.type ) ); - } + }) }); function supportsObject(object, type) { return type == "Infinity" || type == "-Infinity"; } +// Exports from this module module.exports = { rep: InfinityRep, supportsObject: supportsObject diff --git a/src/reps/load-reps.js b/src/reps/load-reps.js index 5af6ea6..0043ae0 100644 --- a/src/reps/load-reps.js +++ b/src/reps/load-reps.js @@ -19,7 +19,7 @@ define(function (require, exports, module) { let useRepsBundle = false; if (useRepsBundle) { const bundle = require("devtools/client/shared/components/reps/reps"); - const { createFactory } = require("devtools/client/shared/vendor/react"); + const { createFactory } = require("react"); Rep = createFactory(bundle.Rep); StringRep = createFactory(bundle.StringRep); Grip = createFactory(bundle.Grip); diff --git a/src/reps/long-string.js b/src/reps/long-string.js index 8041eeb..77aee9c 100644 --- a/src/reps/long-string.js +++ b/src/reps/long-string.js @@ -1,5 +1,10 @@ +// Dependencies const React = require("react"); -const { sanitizeString, isGrip } = require("./rep-utils"); +const { + sanitizeString, + isGrip, + wrapRender, +} = require("./rep-utils"); // Shortcuts const { span } = React.DOM; @@ -12,6 +17,9 @@ const LongStringRep = React.createClass({ propTypes: { useQuotes: React.PropTypes.bool, style: React.PropTypes.object, + cropLimit: React.PropTypes.number.isRequired, + member: React.PropTypes.string, + object: React.PropTypes.object.isRequired, }, getDefaultProps: function () { @@ -20,7 +28,7 @@ const LongStringRep = React.createClass({ }; }, - render: function () { + render: wrapRender(function () { let { cropLimit, member, @@ -44,7 +52,7 @@ const LongStringRep = React.createClass({ } let formattedString = useQuotes ? `"${string}"` : string; return span(config, sanitizeString(formattedString)); - }, + }), }); function supportsObject(object, type) { @@ -54,7 +62,8 @@ function supportsObject(object, type) { return object.type === "longString"; } +// Exports from this module module.exports = { rep: LongStringRep, supportsObject: supportsObject, -}; +}; \ No newline at end of file diff --git a/src/reps/nan.js b/src/reps/nan.js index 72b0352..7abf535 100644 --- a/src/reps/nan.js +++ b/src/reps/nan.js @@ -1,5 +1,8 @@ +// Dependencies const React = require("react"); +const { wrapRender } = require("./rep-utils"); + // Shortcuts const { span } = React.DOM; @@ -9,19 +12,20 @@ const { span } = React.DOM; const NaNRep = React.createClass({ displayName: "NaN", - render: function () { + render: wrapRender(function () { return ( span({className: "objectBox objectBox-nan"}, "NaN" ) ); - } + }) }); function supportsObject(object, type) { return type == "NaN"; } +// Exports from this module module.exports = { rep: NaNRep, supportsObject: supportsObject diff --git a/src/reps/null.js b/src/reps/null.js index 80a9eab..6e6b978 100644 --- a/src/reps/null.js +++ b/src/reps/null.js @@ -1,5 +1,8 @@ +// Dependencies const React = require("react"); +const { wrapRender } = require("./rep-utils"); + // Shortcuts const { span } = React.DOM; @@ -9,13 +12,13 @@ const { span } = React.DOM; const Null = React.createClass({ displayName: "NullRep", - render: function () { + render: wrapRender(function () { return ( span({className: "objectBox objectBox-null"}, "null" ) ); - }, + }), }); function supportsObject(object, type) { @@ -26,6 +29,8 @@ function supportsObject(object, type) { return (object == null); } +// Exports from this module + module.exports = { rep: Null, supportsObject: supportsObject diff --git a/src/reps/number.js b/src/reps/number.js index 14d495c..8def82b 100644 --- a/src/reps/number.js +++ b/src/reps/number.js @@ -1,5 +1,8 @@ +// Dependencies const React = require("react"); +const { wrapRender } = require("./rep-utils"); + // Shortcuts const { span } = React.DOM; @@ -9,6 +12,13 @@ const { span } = React.DOM; const Number = React.createClass({ displayName: "Number", + propTypes: { + object: React.PropTypes.oneOfType([ + React.PropTypes.object, + React.PropTypes.number, + ]).isRequired + }, + stringify: function (object) { let isNegativeZero = Object.is(object, -0) || (object.type && object.type == "-0"); @@ -16,7 +26,7 @@ const Number = React.createClass({ return (isNegativeZero ? "-0" : String(object)); }, - render: function () { + render: wrapRender(function () { let value = this.props.object; return ( @@ -24,13 +34,15 @@ const Number = React.createClass({ this.stringify(value) ) ); - } + }) }); function supportsObject(object, type) { return ["boolean", "number", "-0"].includes(type); } +// Exports from this module + module.exports = { rep: Number, supportsObject: supportsObject diff --git a/src/reps/object-with-text.js b/src/reps/object-with-text.js index 9bc67ad..74e83ad 100644 --- a/src/reps/object-with-text.js +++ b/src/reps/object-with-text.js @@ -1,7 +1,11 @@ +// ReactJS const React = require("react"); // Reps -const { isGrip } = require("./rep-utils"); +const { + isGrip, + wrapRender, +} = require("./rep-utils"); // Shortcuts const { span } = React.DOM; @@ -14,6 +18,7 @@ let ObjectWithText = React.createClass({ propTypes: { object: React.PropTypes.object.isRequired, + objectLink: React.PropTypes.func, }, getTitle: function (grip) { @@ -35,7 +40,7 @@ let ObjectWithText = React.createClass({ return "\"" + grip.preview.text + "\""; }, - render: function () { + render: wrapRender(function () { let grip = this.props.object; return ( span({className: "objectBox objectBox-" + this.getType(grip)}, @@ -45,7 +50,7 @@ let ObjectWithText = React.createClass({ ) ) ); - }, + }), }); // Registration @@ -58,6 +63,7 @@ function supportsObject(grip, type) { return (grip.preview && grip.preview.kind == "ObjectWithText"); } +// Exports from this module module.exports = { rep: ObjectWithText, supportsObject: supportsObject diff --git a/src/reps/object-with-url.js b/src/reps/object-with-url.js index 361bae3..b4c0461 100644 --- a/src/reps/object-with-url.js +++ b/src/reps/object-with-url.js @@ -1,7 +1,12 @@ +// ReactJS const React = require("react"); // Reps -const { isGrip, getURLDisplayString } = require("./rep-utils"); +const { + isGrip, + getURLDisplayString, + wrapRender, +} = require("./rep-utils"); // Shortcuts const { span } = React.DOM; @@ -14,6 +19,7 @@ let ObjectWithURL = React.createClass({ propTypes: { object: React.PropTypes.object.isRequired, + objectLink: React.PropTypes.func, }, getTitle: function (grip) { @@ -35,7 +41,7 @@ let ObjectWithURL = React.createClass({ return getURLDisplayString(grip.preview.url); }, - render: function () { + render: wrapRender(function () { let grip = this.props.object; return ( span({className: "objectBox objectBox-" + this.getType(grip)}, @@ -45,7 +51,7 @@ let ObjectWithURL = React.createClass({ ) ) ); - }, + }), }); // Registration @@ -58,6 +64,7 @@ function supportsObject(grip, type) { return (grip.preview && grip.preview.kind == "ObjectWithURL"); } +// Exports from this module module.exports = { rep: ObjectWithURL, supportsObject: supportsObject diff --git a/src/reps/object.js b/src/reps/object.js index f6e1d78..e0840e8 100644 --- a/src/reps/object.js +++ b/src/reps/object.js @@ -1,6 +1,11 @@ +// Dependencies const React = require("react"); -const Caption = React.createFactory(require("./caption")); -const PropRep = React.createFactory(require("./prop-rep")); +const { + createFactories, + wrapRender, +} = require("./rep-utils"); +const { Caption } = createFactories(require("./caption")); +const { PropRep } = createFactories(require("./prop-rep")); const { MODE } = require("./constants"); // Shortcuts const { span } = React.DOM; @@ -15,6 +20,7 @@ const Obj = React.createClass({ object: React.PropTypes.object, // @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, }, getTitle: function (object) { @@ -121,7 +127,7 @@ const Obj = React.createClass({ return props; }, - render: function () { + render: wrapRender(function () { let object = this.props.object; let props = this.safePropIterator(object); let objectLink = this.props.objectLink || span; @@ -148,13 +154,14 @@ const Obj = React.createClass({ }, " }") ) ); - }, + }), }); function supportsObject(object, type) { return true; } +// Exports from this module module.exports = { rep: Obj, supportsObject: supportsObject -}; +}; \ No newline at end of file diff --git a/src/reps/promise.js b/src/reps/promise.js index f560626..4f86c54 100644 --- a/src/reps/promise.js +++ b/src/reps/promise.js @@ -1,7 +1,13 @@ +// ReactJS const React = require("react"); // Dependencies -const { isGrip } = require("./rep-utils"); -const PropRep = React.createFactory(require("./prop-rep")); +const { + createFactories, + isGrip, + wrapRender, +} = require("./rep-utils"); + +const { PropRep } = createFactories(require("./prop-rep")); const { MODE } = require("./constants"); // Shortcuts const { span } = React.DOM; @@ -16,6 +22,7 @@ const PromiseRep = React.createClass({ object: React.PropTypes.object.isRequired, // @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, }, getTitle: function (object) { @@ -45,13 +52,13 @@ const PromiseRep = React.createClass({ }); }, - render: function () { + render: wrapRender(function () { const object = this.props.object; const {promiseState} = object; let objectLink = this.props.objectLink || span; if (this.props.mode === MODE.TINY) { - let Rep = React.createFactory(require("./rep")); + let { Rep } = createFactories(require("./rep")); return ( span({className: "objectBox objectBox-object"}, @@ -84,7 +91,7 @@ const PromiseRep = React.createClass({ }, " }") ) ); - }, + }), }); // Registration @@ -95,6 +102,7 @@ function supportsObject(object, type) { return type === "Promise"; } +// Exports from this module module.exports = { rep: PromiseRep, supportsObject: supportsObject diff --git a/src/reps/prop-rep.js b/src/reps/prop-rep.js index 3d6a7da..a792cb4 100644 --- a/src/reps/prop-rep.js +++ b/src/reps/prop-rep.js @@ -1,4 +1,9 @@ +// Dependencies const React = require("react"); +const { + createFactories, + wrapRender, +} = require("./rep-utils"); const { MODE } = require("./constants"); // Shortcuts const { span } = React.DOM; @@ -8,7 +13,7 @@ const { span } = React.DOM; * and GripMap (remote JS maps and weakmaps) reps. * It's used to render object properties. */ -let PropRep = React.createFactory(React.createClass({ +let PropRep = React.createClass({ displayName: "PropRep", propTypes: { @@ -23,11 +28,12 @@ let PropRep = React.createFactory(React.createClass({ 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, }, - render: function () { - const Grip = require("./grip"); - let Rep = React.createFactory(require("./rep")); + render: wrapRender(function () { + const { Grip } = require("./grip"); + let { Rep } = createFactories(require("./rep")); let key; // The key can be a simple string, for plain objects, @@ -55,7 +61,8 @@ let PropRep = React.createFactory(React.createClass({ }, this.props.delim) ) ); - } -})); + }) +}); -module.exports = PropRep; +// Exports from this module +module.exports = PropRep; \ No newline at end of file diff --git a/src/reps/regexp.js b/src/reps/regexp.js index 1200fcf..8bec89b 100644 --- a/src/reps/regexp.js +++ b/src/reps/regexp.js @@ -1,7 +1,11 @@ +// ReactJS const React = require("react"); // Reps -const { isGrip } = require("./rep-utils"); +const { + isGrip, + wrapRender, +} = require("./rep-utils"); // Shortcuts const { span } = React.DOM; @@ -14,13 +18,14 @@ let RegExp = React.createClass({ propTypes: { object: React.PropTypes.object.isRequired, + objectLink: React.PropTypes.func, }, getSource: function (grip) { return grip.displayString; }, - render: function () { + render: wrapRender(function () { let grip = this.props.object; let objectLink = this.props.objectLink || span; @@ -32,7 +37,7 @@ let RegExp = React.createClass({ }, this.getSource(grip)) ) ); - }, + }), }); // Registration @@ -45,6 +50,7 @@ function supportsObject(object, type) { return (type == "RegExp"); } +// Exports from this module module.exports = { rep: RegExp, supportsObject: supportsObject diff --git a/src/reps/rep-utils.js b/src/reps/rep-utils.js index 1facc3d..ae3ed93 100644 --- a/src/reps/rep-utils.js +++ b/src/reps/rep-utils.js @@ -1,3 +1,4 @@ +// Dependencies const React = require("react"); /** @@ -135,11 +136,33 @@ function splitURLTrue(url) { }; } +/** + * Wrap the provided render() method of a rep in a try/catch block that will render a + * fallback rep if the render fails. + */ +function wrapRender(renderMethod) { + return function () { + try { + return renderMethod.call(this); + } catch (e) { + return React.DOM.span( + { + className: "objectBox objectBox-failure", + title: "This object could not be rendered, " + + "please file a bug on bugzilla.mozilla.org" + }, + /* Labels have to be hardcoded for reps, see Bug 1317038. */ + "Invalid object"); + } + }; +} + module.exports = { createFactories, isGrip, cropString, sanitizeString, + wrapRender, cropMultipleLines, parseURLParams, parseURLEncodedText, diff --git a/src/reps/string.js b/src/reps/string.js index 1561b41..88ec0bf 100644 --- a/src/reps/string.js +++ b/src/reps/string.js @@ -1,5 +1,10 @@ +// Dependencies const React = require("react"); -const { cropString } = require("./rep-utils"); + +const { + cropString, + wrapRender, +} = require("./rep-utils"); // Shortcuts const { span } = React.DOM; @@ -13,6 +18,9 @@ const StringRep = React.createClass({ propTypes: { useQuotes: React.PropTypes.bool, style: React.PropTypes.object, + object: React.PropTypes.string.isRequired, + member: React.PropTypes.any, + cropLimit: React.PropTypes.number, }, getDefaultProps: function () { @@ -21,7 +29,7 @@ const StringRep = React.createClass({ }; }, - render: function () { + render: wrapRender(function () { let text = this.props.object; let member = this.props.member; let style = this.props.style; @@ -42,13 +50,15 @@ const StringRep = React.createClass({ "\"" + croppedString + "\"" : croppedString; return span(config, formattedString); - }, + }), }); function supportsObject(object, type) { return (type == "string"); } +// Exports from this module + module.exports = { rep: StringRep, supportsObject: supportsObject, diff --git a/src/reps/stylesheet.js b/src/reps/stylesheet.js index 2b9a646..68fe4ee 100644 --- a/src/reps/stylesheet.js +++ b/src/reps/stylesheet.js @@ -1,7 +1,12 @@ +// ReactJS const React = require("react"); // Reps -const { isGrip, getURLDisplayString } = require("./rep-utils"); +const { + isGrip, + getURLDisplayString, + wrapRender +} = require("./rep-utils"); // Shortcuts const DOM = React.DOM; @@ -14,6 +19,7 @@ let StyleSheet = React.createClass({ propTypes: { object: React.PropTypes.object.isRequired, + objectLink: React.PropTypes.func, }, getTitle: function (grip) { @@ -34,7 +40,7 @@ let StyleSheet = React.createClass({ return url ? getURLDisplayString(url) : ""; }, - render: function () { + render: wrapRender(function () { let grip = this.props.object; return ( @@ -45,7 +51,7 @@ let StyleSheet = React.createClass({ ) ) ); - }, + }), }); // Registration @@ -58,6 +64,8 @@ function supportsObject(object, type) { return (type == "CSSStyleSheet"); } +// Exports from this module + module.exports = { rep: StyleSheet, supportsObject: supportsObject diff --git a/src/reps/symbol.js b/src/reps/symbol.js index a5eb0e5..7c803d6 100644 --- a/src/reps/symbol.js +++ b/src/reps/symbol.js @@ -1,5 +1,8 @@ +// Dependencies const React = require("react"); +const { wrapRender } = require("./rep-utils"); + // Shortcuts const { span } = React.DOM; @@ -13,7 +16,7 @@ const SymbolRep = React.createClass({ object: React.PropTypes.object.isRequired }, - render: function () { + render: wrapRender(function () { let {object} = this.props; let {name} = object; @@ -22,13 +25,14 @@ const SymbolRep = React.createClass({ `Symbol(${name || ""})` ) ); - }, + }), }); function supportsObject(object, type) { return (type == "symbol"); } +// Exports from this module module.exports = { rep: SymbolRep, supportsObject: supportsObject, diff --git a/src/reps/text-node.js b/src/reps/text-node.js index b984da4..f51c14a 100644 --- a/src/reps/text-node.js +++ b/src/reps/text-node.js @@ -1,7 +1,12 @@ +// ReactJS const React = require("react"); // Reps -const { isGrip, cropString } = require("./rep-utils"); +const { + isGrip, + cropString, + wrapRender, +} = require("./rep-utils"); const { MODE } = require("./constants"); // Shortcuts @@ -17,6 +22,9 @@ let TextNode = React.createClass({ object: React.PropTypes.object.isRequired, // @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, + onDOMNodeMouseOver: React.PropTypes.func, + onDOMNodeMouseOut: React.PropTypes.func, }, getTextContent: function (grip) { @@ -33,7 +41,7 @@ let TextNode = React.createClass({ return title; }, - render: function () { + render: wrapRender(function () { let { object: grip, mode = MODE.SHORT, @@ -65,7 +73,7 @@ let TextNode = React.createClass({ ) ) ); - }, + }), }); // Registration @@ -78,6 +86,7 @@ function supportsObject(grip, type) { return (grip.preview && grip.class == "Text"); } +// Exports from this module module.exports = { rep: TextNode, supportsObject: supportsObject diff --git a/src/reps/undefined.js b/src/reps/undefined.js index c5b9e83..27eacde 100644 --- a/src/reps/undefined.js +++ b/src/reps/undefined.js @@ -1,5 +1,8 @@ +// Dependencies const React = require("react"); +const { wrapRender } = require("./rep-utils"); + // Shortcuts const { span } = React.DOM; @@ -9,13 +12,13 @@ const { span } = React.DOM; const Undefined = React.createClass({ displayName: "UndefinedRep", - render: function () { + render: wrapRender(function () { return ( span({className: "objectBox objectBox-undefined"}, "undefined" ) ); - }, + }), }); function supportsObject(object, type) { @@ -26,6 +29,8 @@ function supportsObject(object, type) { return (type == "undefined"); } +// Exports from this module + module.exports = { rep: Undefined, supportsObject: supportsObject diff --git a/src/reps/window.js b/src/reps/window.js index 128753b..c787683 100644 --- a/src/reps/window.js +++ b/src/reps/window.js @@ -1,8 +1,12 @@ +// ReactJS const React = require("react"); -const { MODE } = require("./constants"); // Reps -const { isGrip, getURLDisplayString } = require("./rep-utils"); +const { + isGrip, + getURLDisplayString, + wrapRender +} = require("./rep-utils"); // Shortcuts const DOM = React.DOM; @@ -15,7 +19,7 @@ let Window = React.createClass({ propTypes: { object: React.PropTypes.object.isRequired, - mode: React.PropTypes.oneOf(Object.keys(MODE).map(key => MODE[key])), + objectLink: React.PropTypes.func, }, getTitle: function (grip) { @@ -33,26 +37,18 @@ let Window = React.createClass({ return getURLDisplayString(grip.preview.url); }, - getDisplayValue: function (grip) { - if (this.props.mode === MODE.TINY) { - return grip.isGlobal ? "Global" : "Window"; - } - - return this.getLocation(grip); - }, - - render: function () { + render: wrapRender(function () { let grip = this.props.object; return ( DOM.span({className: "objectBox objectBox-Window"}, this.getTitle(grip), DOM.span({className: "objectPropValue"}, - this.getDisplayValue(grip) + this.getLocation(grip) ) ) ); - }, + }), }); // Registration @@ -65,6 +61,7 @@ function supportsObject(object, type) { return (object.preview && type == "Window"); } +// Exports from this module module.exports = { rep: Window, supportsObject: supportsObject