Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-26 19:55:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1283123 - Reps: make it possible to pass in a component to handle object links. r=linclark,honza

Browse Source 
MozReview-Commit-ID: 20xvwUua4WA

--HG--
extra : transplant_source : %B7TG%F1g%D8%1E%16P%22%87E%D8%BD%B4%07ww%7C%E6
This commit is contained in:
Nicolas Chevobbe 2016-06-21 22:56:10 +02:00
parent 997396e949
commit 4e07f37d98
17 changed files with 261 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
devtools/client/shared/components/reps/array.js
View File

@ -62,9 +62,13 @@ define(function (require, exports, module) {
if (array.length > max + 1) {
items.pop();
let objectLink = this.props.objectLink || DOM.span;
items.push(Caption({
key: "more",
object: "more...",
object: objectLink({
object: this.props.object
}, "more...")
}));
}
@ -129,29 +133,22 @@ define(function (require, exports, module) {
items = this.arrayIterator(object, max);
}
let objectLink = this.props.objectLink || DOM.span;
return (
ObjectBox({
className: "array",
onClick: this.onToggleProperties},
DOM.a({
className: "objectLink",
onclick: this.onClickBracket},
DOM.span({
className: "arrayLeftBracket",
role: "presentation"},
"["
)
),
className: "array"},
objectLink({
className: "arrayLeftBracket",
role: "presentation",
object: object
}, "["),
items,
DOM.a({
className: "objectLink",
onclick: this.onClickBracket},
DOM.span({
className: "arrayRightBracket",
role: "presentation"},
"]"
)
),
objectLink({
className: "arrayRightBracket",
role: "presentation",
object: object
}, "]"),
DOM.span({
className: "arrayProperties",
role: "group"}

16
devtools/client/shared/components/reps/date-time.js
View File

@ -12,7 +12,7 @@ define(function (require, exports, module) {
// Reps
const { createFactories, isGrip } = require("./rep-utils");
const { ObjectLink } = createFactories(require("./object-link"));
const { ObjectBox } = createFactories(require("./object-box"));
// Shortcuts
const { span } = React.DOM;
@ -28,15 +28,21 @@ define(function (require, exports, module) {
},
getTitle: function (grip) {
return new Date(grip.preview.timestamp).toISOString();
if (this.props.objectLink) {
return this.props.objectLink({
object: grip
}, grip.class);
}
return "";
},
render: function () {
let grip = this.props.object;
return (
ObjectLink({className: "Date"},
span({className: "objectTitle"},
this.getTitle(grip)
ObjectBox({},
this.getTitle(grip),
span({className: "Date"},
new Date(grip.preview.timestamp).toString()
)
)
);

12
devtools/client/shared/components/reps/document.js
View File

@ -33,8 +33,15 @@ define(function (require, exports, module) {
return location ? getFileName(location) : "";
},
getTitle: function (win, context) {
return "document";
getTitle: function (grip) {
if (this.props.objectLink) {
return ObjectBox({},
this.props.objectLink({
object: grip
}, grip.class)
);
}
return "";
},
getTooltip: function (doc) {
@ -46,6 +53,7 @@ define(function (require, exports, module) {
return (
ObjectBox({className: "object"},
this.getTitle(grip),
span({className: "objectPropValue"},
this.getLocation(grip)
)

16
devtools/client/shared/components/reps/event.js
View File

@ -12,7 +12,7 @@ define(function (require, exports, module) {
// Reps
const { createFactories, isGrip } = require("./rep-utils");
const { ObjectLink } = createFactories(require("./object-link"));
const { ObjectBox } = createFactories(require("./object-box"));
/**
* Renders DOM event objects.
@ -24,8 +24,17 @@ define(function (require, exports, module) {
object: React.PropTypes.object.isRequired
},
getTitle: function (grip) {
if (this.props.objectLink) {
return this.props.objectLink({
object: grip
}, grip.preview.type);
}
return grip.preview.type;
},
summarizeEvent: function (grip) {
let info = [grip.preview.type, " "];
let info = [];
let eventFamily = grip.class;
let props = grip.preview.properties;
@ -44,7 +53,8 @@ define(function (require, exports, module) {
render: function () {
let grip = this.props.object;
return (
ObjectLink({className: "event"},
ObjectBox({className: "event"},
this.getTitle(grip),
this.summarizeEvent(grip)
)
);

14
devtools/client/shared/components/reps/function.js
View File

@ -12,7 +12,7 @@ define(function (require, exports, module) {
// Reps
const { createFactories, isGrip } = require("./rep-utils");
const { ObjectLink } = createFactories(require("./object-link"));
const { ObjectBox } = createFactories(require("./object-box"));
const { cropString } = require("./string");
/**
@ -25,6 +25,15 @@ define(function (require, exports, module) {
object: React.PropTypes.object.isRequired
},
getTitle: function (grip) {
if (this.props.objectLink) {
return this.props.objectLink({
object: grip
}, "function");
}
return "";
},
summarizeFunction: function (grip) {
let name = grip.displayName || grip.name || "function";
return cropString(name + "()", 100);
@ -34,7 +43,8 @@ define(function (require, exports, module) {
let grip = this.props.object;
return (
ObjectLink({className: "function"},
ObjectBox({className: "function"},
this.getTitle(grip),
this.summarizeFunction(grip)
)
);

50
devtools/client/shared/components/reps/grip-array.js
View File

@ -15,7 +15,7 @@ define(function (require, exports, module) {
const { Caption } = createFactories(require("./caption"));
// Shortcuts
const { a, span } = React.DOM;
const { span } = React.DOM;
/**
* Renders an array. The array is enclosed by left and right bracket
@ -35,7 +35,12 @@ define(function (require, exports, module) {
},
getTitle: function (object, context) {
return "[" + object.length + "]";
if (this.props.objectLink) {
return this.props.objectLink({
object: object
}, object.class);
}
return "";
},
arrayIterator: function (grip, max) {
@ -84,10 +89,13 @@ define(function (require, exports, module) {
if (array.length > max + 1) {
items.pop();
let objectLink = this.props.objectLink || span;
items.push(Caption({
key: "more",
object: "more..."}
));
object: objectLink({
object: this.props.object
}, "more...")
}));
}
return items;
@ -118,29 +126,23 @@ define(function (require, exports, module) {
items = this.arrayIterator(object, max);
}
let objectLink = this.props.objectLink || span;
return (
ObjectBox({
className: "array",
onClick: this.onToggleProperties},
a({
className: "objectLink",
onclick: this.onClickBracket},
span({
className: "arrayLeftBracket",
role: "presentation"},
"["
)
),
className: "array"},
this.getTitle(object),
objectLink({
className: "arrayLeftBracket",
role: "presentation",
object: object
}, "["),
items,
a({
className: "objectLink",
onclick: this.onClickBracket},
span({
className: "arrayRightBracket",
role: "presentation"},
"]"
)
),
objectLink({
className: "arrayRightBracket",
role: "presentation",
object: object
}, "]"),
span({
className: "arrayProperties",
role: "group"}

38
devtools/client/shared/components/reps/grip.js
View File

@ -30,8 +30,13 @@ define(function (require, exports, module) {
mode: React.PropTypes.string,
},
getTitle: function () {
return this.props.object.class || "Object";
getTitle: function (object) {
if (this.props.objectLink) {
return this.props.objectLink({
object: object
}, object.class);
}
return "";
},
longPropIterator: function (object) {
@ -81,9 +86,14 @@ define(function (require, exports, module) {
// one and append 'more...' postfix in such case.
if (props.length > max) {
props.pop();
let objectLink = this.props.objectLink || span;
props.push(Caption({
key: "more",
object: "more...",
object: objectLink({
object: object
}, "more...")
}));
} else if (props.length > 0) {
// Remove the last comma.
@ -146,20 +156,34 @@ define(function (require, exports, module) {
this.longPropIterator(object) :
this.shortPropIterator(object);
let objectLink = this.props.objectLink || span;
if (this.props.mode == "tiny" || !props.length) {
return (
ObjectBox({className: "object"},
span({className: "objectTitle"}, this.getTitle(object))
this.getTitle(object),
objectLink({
className: "objectLeftBrace",
role: "presentation",
object: object
}, "{}")
)
);
}
return (
ObjectBox({className: "object"},
span({className: "objectTitle"}, this.getTitle(object)),
span({className: "objectLeftBrace", role: "presentation"}, " {"),
this.getTitle(object),
objectLink({
className: "objectLeftBrace",
role: "presentation",
object: object
}, "{"),
props,
span({className: "objectRightBrace"}, "}")
objectLink({
className: "objectRightBrace",
role: "presentation",
object: object
}, "}")
)
);
},

39
devtools/client/shared/components/reps/named-node-map.js
View File

@ -12,7 +12,7 @@ define(function (require, exports, module) {
// Reps
const { createFactories, isGrip } = require("./rep-utils");
const { ObjectLink } = createFactories(require("./object-link"));
const { ObjectBox } = createFactories(require("./object-box"));
const { Caption } = createFactories(require("./caption"));
// Shortcuts
@ -22,6 +22,7 @@ define(function (require, exports, module) {
* Used to render a map of values provided as a grip.
*/
let NamedNodeMap = React.createClass({
displayName: "NamedNodeMap",
propTypes: {
object: React.PropTypes.object.isRequired,
@ -29,13 +30,16 @@ define(function (require, exports, module) {
provider: React.PropTypes.object,
},
className: "NamedNodeMap",
getLength: function (object) {
return object.preview.length;
},
getTitle: function (object) {
if (this.props.objectLink && object.class) {
return this.props.objectLink({
object: object
}, object.class);
}
return object.class ? object.class : "";
},
@ -46,9 +50,12 @@ define(function (require, exports, module) {
if (items.length > max + 1) {
items.pop();
let objectLink = this.props.objectLink || span;
items.push(Caption({
key: "more",
object: "more...",
object: objectLink({
object: this.props.object
}, "more...")
}));
}
@ -98,22 +105,22 @@ define(function (require, exports, module) {
items = this.getItems(grip, max);
}
let objectLink = this.props.objectLink || span;
return (
ObjectLink({className: "NamedNodeMap"},
span({className: "objectTitle"},
this.getTitle(grip)
),
span({
ObjectBox({className: "NamedNodeMap"},
this.getTitle(grip),
objectLink({
className: "arrayLeftBracket",
role: "presentation"},
"["
),
role: "presentation",
object: grip
}, "["),
items,
span({
objectLink({
className: "arrayRightBracket",
role: "presentation"},
"]"
)
role: "presentation",
object: grip
}, "]")
)
);
},

16
devtools/client/shared/components/reps/object-with-text.js
View File

@ -12,7 +12,7 @@ define(function (require, exports, module) {
// Reps
const { createFactories, isGrip } = require("./rep-utils");
const { ObjectLink } = createFactories(require("./object-link"));
const { ObjectBox } = createFactories(require("./object-box"));
// Shortcuts
const { span } = React.DOM;
@ -27,6 +27,17 @@ define(function (require, exports, module) {
object: React.PropTypes.object.isRequired,
},
getTitle: function (grip) {
if (this.props.objectLink) {
return ObjectBox({},
this.props.objectLink({
object: grip
}, this.getType(grip))
);
}
return "";
},
getType: function (grip) {
return grip.class;
},
@ -38,7 +49,8 @@ define(function (require, exports, module) {
render: function () {
let grip = this.props.object;
return (
ObjectLink({className: this.getType(grip)},
ObjectBox({className: this.getType(grip)},
this.getTitle(grip),
span({className: "objectPropValue"},
this.getDescription(grip)
)

16
devtools/client/shared/components/reps/object-with-url.js
View File

@ -12,7 +12,7 @@ define(function (require, exports, module) {
// Reps
const { createFactories, isGrip } = require("./rep-utils");
const { ObjectLink } = createFactories(require("./object-link"));
const { ObjectBox } = createFactories(require("./object-box"));
// Shortcuts
const { span } = React.DOM;
@ -27,6 +27,17 @@ define(function (require, exports, module) {
object: React.PropTypes.object.isRequired,
},
getTitle: function (grip) {
if (this.props.objectLink) {
return ObjectBox({},
this.props.objectLink({
object: grip
}, this.getType(grip))
);
}
return "";
},
getType: function (grip) {
return grip.class;
},
@ -38,7 +49,8 @@ define(function (require, exports, module) {
render: function () {
let grip = this.props.object;
return (
ObjectLink({className: this.getType(grip)},
ObjectBox({className: this.getType(grip)},
this.getTitle(grip),
span({className: "objectPropValue"},
this.getDescription(grip)
)

39
devtools/client/shared/components/reps/object.js
View File

@ -27,8 +27,13 @@ define(function (require, exports, module) {
mode: React.PropTypes.string,
},
getTitle: function () {
return "Object";
getTitle: function (object) {
if (this.props.objectLink) {
return this.props.objectLink({
object: object
}, object.class);
}
return "";
},
longPropIterator: function (object) {
@ -75,9 +80,13 @@ define(function (require, exports, module) {
if (props.length > max) {
props.pop();
let objectLink = this.props.objectLink || span;
props.push(Caption({
key: "more",
object: "more...",
object: objectLink({
object: object
}, "more...")
}));
} else if (props.length > 0) {
// Remove the last comma.
@ -133,21 +142,22 @@ define(function (require, exports, module) {
render: function () {
let object = this.props.object;
let props = this.shortPropIterator(object);
if (this.props.mode == "tiny" || !props.length) {
return (
ObjectBox({className: "object"},
span({className: "objectTitle"}, this.getTitle())
)
);
}
let objectLink = this.props.objectLink || span;
return (
ObjectBox({className: "object"},
span({className: "objectTitle"}, this.getTitle()),
span({className: "objectLeftBrace", role: "presentation"}, "{"),
this.getTitle(object),
objectLink({
className: "objectLeftBrace",
role: "presentation",
object: object
}, "{"),
props,
span({className: "objectRightBrace"}, "}")
objectLink({
className: "objectRightBrace",
role: "presentation",
object: object
}, "}")
)
);
},
@ -155,6 +165,7 @@ define(function (require, exports, module) {
function supportsObject(object, type) {
return true;
}
// Exports from this module
exports.Obj = {
rep: Obj,

21
devtools/client/shared/components/reps/regexp.js
View File

@ -12,7 +12,7 @@ define(function (require, exports, module) {
// Reps
const { createFactories, isGrip } = require("./rep-utils");
const { ObjectLink } = createFactories(require("./object-link"));
const { ObjectBox } = createFactories(require("./object-box"));
// Shortcuts
const { span } = React.DOM;
@ -27,25 +27,20 @@ define(function (require, exports, module) {
object: React.PropTypes.object.isRequired,
},
getTitle: function (grip) {
return grip.class;
},
getSource: function (grip) {
return grip.displayString;
},
render: function () {
let grip = this.props.object;
let objectLink = this.props.objectLink || span;
return (
ObjectLink({className: "regexp"},
span({className: "objectTitle"},
this.getTitle(grip)
),
span(" "),
span({className: "regexpSource"},
this.getSource(grip)
)
ObjectBox({className: "regexp"},
objectLink({
object: grip,
className: "regexpSource"
}, this.getSource(grip))
)
);
},

14
devtools/client/shared/components/reps/stylesheet.js
View File

@ -28,6 +28,18 @@ define(function (require, exports, module) {
object: React.PropTypes.object.isRequired,
},
getTitle: function (grip) {
let title = "StyleSheet";
if (this.props.objectLink) {
return ObjectBox({},
this.props.objectLink({
object: grip
}, title)
);
}
return title;
},
getLocation: function (grip) {
// Embedded stylesheets don't have URL and so, no preview.
let url = grip.preview ? grip.preview.url : "";
@ -39,7 +51,7 @@ define(function (require, exports, module) {
return (
ObjectBox({className: "object"},
"StyleSheet ",
this.getTitle(grip),
DOM.span({className: "objectPropValue"},
this.getLocation(grip)
)

26
devtools/client/shared/components/reps/text-node.js
View File

@ -12,7 +12,7 @@ define(function (require, exports, module) {
// Reps
const { createFactories, isGrip } = require("./rep-utils");
const { ObjectLink } = createFactories(require("./object-link"));
const { ObjectBox } = createFactories(require("./object-box"));
const { cropMultipleLines } = require("./string");
// Shortcuts
@ -33,8 +33,13 @@ define(function (require, exports, module) {
return cropMultipleLines(grip.preview.textContent);
},
getTitle: function (win, context) {
return "textNode";
getTitle: function (grip) {
if (this.props.objectLink) {
return this.props.objectLink({
object: grip
}, "#text");
}
return "";
},
render: function () {
@ -43,22 +48,29 @@ define(function (require, exports, module) {
if (mode == "short" || mode == "tiny") {
return (
ObjectLink({className: "textNode"},
ObjectBox({className: "textNode"},
this.getTitle(grip),
"\"" + this.getTextContent(grip) + "\""
)
);
}
let objectLink = this.props.objectLink || DOM.span;
return (
ObjectLink({className: "textNode"},
"<",
ObjectBox({className: "textNode"},
this.getTitle(grip),
objectLink({
object: grip
}, "<"),
DOM.span({className: "nodeTag"}, "TextNode"),
" textContent=\"",
DOM.span({className: "nodeValue"},
this.getTextContent(grip)
),
"\"",
">;"
objectLink({
object: grip
}, ">;")
)
);
},

12
devtools/client/shared/components/reps/window.js
View File

@ -28,6 +28,17 @@ define(function (require, exports, module) {
object: React.PropTypes.object.isRequired,
},
getTitle: function (grip) {
if (this.props.objectLink) {
return ObjectBox({},
this.props.objectLink({
object: grip
}, grip.class)
);
}
return "";
},
getLocation: function (grip) {
return cropString(grip.preview.url);
},
@ -37,6 +48,7 @@ define(function (require, exports, module) {
return (
ObjectBox({className: "Window"},
this.getTitle(grip),
DOM.span({className: "objectPropValue"},
this.getLocation(grip)
)

19
devtools/client/webconsole/new-console-output/components/variables-view-link.js
View File

@ -16,19 +16,20 @@ const {openVariablesView} = require("devtools/client/webconsole/new-console-outp
VariablesViewLink.displayName = "VariablesViewLink";
VariablesViewLink.propTypes = {
objectActor: PropTypes.object.required,
label: PropTypes.string.label,
object: PropTypes.object.required
};
function VariablesViewLink(props) {
const { objectActor, label } = props;
const { object, children } = props;
return dom.a({
onClick: openVariablesView.bind(null, objectActor),
className: "cm-variable",
draggable: false,
href: "#"
}, label);
return (
dom.a({
onClick: openVariablesView.bind(null, object),
className: "cm-variable",
draggable: false,
href: "#"
}, children)
);
}
module.exports.VariablesViewLink = VariablesViewLink;

4
devtools/client/webconsole/new-console-output/utils/variables-view.js
View File

@ -12,6 +12,6 @@
*
* Once JSTerm is also written in React/Redux, these will be actions.
*/
exports.openVariablesView = (objectActor) => {
window.jsterm.openVariablesView({objectActor});
exports.openVariablesView = (object) => {
window.jsterm.openVariablesView({objectActor: object});
};