Bug 1336621 - Add keys in Frame and StackTrace components. r=Honza
MozReview-Commit-ID: 8GUYouvklxA
--- a/devtools/client/shared/components/frame.js
+++ b/devtools/client/shared/components/frame.js
@@ -164,53 +164,60 @@ module.exports = createClass({
if (showFunctionName) {
let functionDisplayName = frame.functionDisplayName;
if (!functionDisplayName && showAnonymousFunctionName) {
functionDisplayName = webl10n.getStr("stacktrace.anonymousFunction");
}
if (functionDisplayName) {
elements.push(
- dom.span({ className: "frame-link-function-display-name" },
- functionDisplayName),
+ dom.span({
+ key: "function-display-name",
+ className: "frame-link-function-display-name",
+ }, functionDisplayName),
" "
);
}
}
let displaySource = showFullSourceUrl ? long : short;
if (isSourceMapped) {
displaySource = getSourceMappedFile(displaySource);
} else if (showEmptyPathAsHost && (displaySource === "" || displaySource === "/")) {
displaySource = host;
}
sourceElements.push(dom.span({
+ key: "filename",
className: "frame-link-filename",
}, displaySource));
// If we have a line number > 0.
if (line) {
let lineInfo = `:${line}`;
// Add `data-line` attribute for testing
attributes["data-line"] = line;
// Intentionally exclude 0
if (column) {
lineInfo += `:${column}`;
// Add `data-column` attribute for testing
attributes["data-column"] = column;
}
- sourceElements.push(dom.span({ className: "frame-link-line" }, lineInfo));
+ sourceElements.push(dom.span({
+ key: "line",
+ className: "frame-link-line"
+ }, lineInfo));
}
// Inner el is useful for achieving ellipsis on the left and correct LTR/RTL
// ordering. See CSS styles for frame-link-source-[inner] and bug 1290056.
let sourceInnerEl = dom.span({
+ key: "source-inner",
className: "frame-link-source-inner",
title: isLinkable ?
l10n.getFormatStr("frame.viewsourceindebugger", tooltip) : tooltip,
}, sourceElements);
// If source is not a URL (self-hosted, eval, etc.), don't make
// it an anchor link, as we can't link to it.
if (isLinkable) {
@@ -220,20 +227,25 @@ module.exports = createClass({
onClick(this.getSource(frame));
},
href: source,
className: "frame-link-source",
draggable: false,
}, sourceInnerEl);
} else {
sourceEl = dom.span({
+ key: "source",
className: "frame-link-source",
}, sourceInnerEl);
}
elements.push(sourceEl);
if (showHost && host) {
- elements.push(" ", dom.span({ className: "frame-link-host" }, host));
+ elements.push(" ");
+ elements.push(dom.span({
+ key: "host",
+ className: "frame-link-host",
+ }, host));
}
return dom.span(attributes, ...elements);
}
});
--- a/devtools/client/shared/components/stack-trace.js
+++ b/devtools/client/shared/components/stack-trace.js
@@ -40,25 +40,27 @@ const StackTrace = createClass({
render() {
let {
stacktrace,
onViewSourceInDebugger,
onViewSourceInScratchpad
} = this.props;
let frames = [];
- stacktrace.forEach(s => {
+ stacktrace.forEach((s, i) => {
if (s.asyncCause) {
frames.push("\t", AsyncFrame({
+ key: `${i}-asyncframe`,
asyncCause: s.asyncCause
}), "\n");
}
let source = s.filename.split(" -> ").pop();
frames.push("\t", Frame({
+ key: `${i}-frame`,
frame: {
functionDisplayName: s.functionName,
source,
line: s.lineNumber,
column: s.columnNumber,
},
showFunctionName: true,
showAnonymousFunctionName: true,