зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1311266 - Add a rep for comment node. r=Honza;
MozReview-Commit-ID: B5ofNavxQIX --HG-- extra : rebase_source : a7fdd920d20ecd6eb9183545fde1b055e4f876f9
This commit is contained in:
Nicolas Chevobbe
Родитель
f0f4a8d236
Коммит
d4e90e8a28
|
|
@ -0,0 +1,64 @@
|
|||
/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
|
||||
/* 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
|
||||
const React = require("devtools/client/shared/vendor/react");
|
||||
const { isGrip, cropMultipleLines } = require("./rep-utils");
|
||||
|
||||
// Utils
|
||||
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,
|
||||
},
|
||||
|
||||
getCroppedTextContent: function (textContent, limit) {
|
||||
return cropMultipleLines(textContent, limit);
|
||||
},
|
||||
|
||||
render: function () {
|
||||
let {object} = this.props;
|
||||
|
||||
let mode = this.props.mode || "short";
|
||||
|
||||
let {textContent} = object.preview;
|
||||
if (mode === "tiny") {
|
||||
textContent = this.getCroppedTextContent(textContent, 30);
|
||||
} else if (mode === "short") {
|
||||
textContent = this.getCroppedTextContent(textContent);
|
||||
}
|
||||
|
||||
return span({className: "objectBox theme-comment"}, `<!-- ${textContent} -->`);
|
||||
},
|
||||
});
|
||||
|
||||
// Registration
|
||||
function supportsObject(object, type) {
|
||||
if (!isGrip(object)) {
|
||||
return false;
|
||||
}
|
||||
return object.preview && object.preview.nodeType === nodeConstants.COMMENT_NODE;
|
||||
}
|
||||
|
||||
// Exports from this module
|
||||
exports.CommentNode = {
|
||||
rep: CommentNode,
|
||||
supportsObject: supportsObject
|
||||
};
|
||||
});
|
||||
|
|
@ -8,6 +8,7 @@ DevToolsModules(
|
|||
'array.js',
|
||||
'attribute.js',
|
||||
'caption.js',
|
||||
'comment-node.js',
|
||||
'date-time.js',
|
||||
'document.js',
|
||||
'event.js',
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ define(function (require, exports, module) {
|
|||
const { Func } = require("./function");
|
||||
const { RegExp } = require("./regexp");
|
||||
const { StyleSheet } = require("./stylesheet");
|
||||
const { CommentNode } = require("./comment-node");
|
||||
const { TextNode } = require("./text-node");
|
||||
const { Window } = require("./window");
|
||||
const { ObjectWithText } = require("./object-with-text");
|
||||
|
|
@ -48,6 +49,7 @@ define(function (require, exports, module) {
|
|||
StyleSheet,
|
||||
Event,
|
||||
DateTime,
|
||||
CommentNode,
|
||||
TextNode,
|
||||
Attribute,
|
||||
Func,
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ support-files =
|
|||
[test_notification_box_03.html]
|
||||
[test_reps_array.html]
|
||||
[test_reps_attribute.html]
|
||||
[test_reps_comment-node.html]
|
||||
[test_reps_date-time.html]
|
||||
[test_reps_document.html]
|
||||
[test_reps_event.html]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,77 @@
|
|||
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<!--
|
||||
Test comment-node rep
|
||||
-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Rep test - comment-node</title>
|
||||
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
|
||||
</head>
|
||||
<body>
|
||||
<pre id="test">
|
||||
<script src="head.js" type="application/javascript;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");
|
||||
|
||||
let gripStub = {
|
||||
"type": "object",
|
||||
"actor": "server1.conn1.child1/obj47",
|
||||
"class": "Comment",
|
||||
"extensible": true,
|
||||
"frozen": false,
|
||||
"sealed": false,
|
||||
"ownPropertyLength": 0,
|
||||
"preview": {
|
||||
"kind": "DOMNode",
|
||||
"nodeType": 8,
|
||||
"nodeName": "#comment",
|
||||
"textContent": "test\nand test\nand test\nand test\nand test"
|
||||
}
|
||||
};
|
||||
|
||||
// Test that correct rep is chosen.
|
||||
const renderedRep = shallowRenderComponent(Rep, { object: gripStub });
|
||||
is(renderedRep.type, CommentNode.rep,
|
||||
`Rep correctly selects ${CommentNode.rep.displayName}`);
|
||||
|
||||
// Test rendering.
|
||||
const renderedComponent = renderComponent(CommentNode.rep, { object: gripStub });
|
||||
is(renderedComponent.className, "objectBox theme-comment",
|
||||
"CommentNode rep has expected class names");
|
||||
is(renderedComponent.textContent,
|
||||
`<!-- test\\nand test\\nand test\\nand test\\nand test -->`,
|
||||
"CommentNode rep has expected text content");
|
||||
|
||||
// Test tiny rendering.
|
||||
const tinyRenderedComponent = renderComponent(CommentNode.rep, {
|
||||
object: gripStub,
|
||||
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"
|
||||
});
|
||||
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();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
</body>
|
||||
</html>
|
||||
Загрузка…
Ссылка в новой задаче