mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-01 22:55:23 +00:00
46ec4d3cc4
This patch overhauls the memory tool's frontend from being in a state of viewing a snapshot's census (the implicit default) or viewing a census diff (a special cased kind of thing) to one of three recognized view states: (1) census, (2) diffing, or (3) dominator tree. The logic surrounding our current view is more explicit now. View option (3) is the new one, whose introduction required those clean ups. Dominator trees are too large to render in full, all at once. Instead, we eagerly load and render a few levels deep and then incrementally fetch further subtrees as their parents are expanded in the UI. This means that we get new Tree component instances across incremental fetches. Before this commit, the Tree component stored a bunch of state internally (in this.state rather than this.props) and we would lose focus and expansion state across incremental fetches. This internal state has been pulled out and made as explicit props, which are now managed by actions and reducers just like the rest of the state. --HG-- rename : devtools/client/memory/components/tree-item.js => devtools/client/memory/components/census-tree-item.js
51 lines
1.9 KiB
JavaScript
51 lines
1.9 KiB
JavaScript
/* 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/. */
|
|
|
|
const { DOM: dom, createClass, PropTypes } = require("devtools/client/shared/vendor/react");
|
|
const { getSourceNames } = require("devtools/client/shared/source-utils");
|
|
|
|
const Frame = module.exports = createClass({
|
|
displayName: "Frame",
|
|
|
|
propTypes: {
|
|
// SavedFrame
|
|
frame: PropTypes.object.isRequired,
|
|
// Clicking on the frame link -- probably should link to the debugger.
|
|
onClick: PropTypes.func.isRequired,
|
|
// Tooltip to display when hovering over the link to the frame;
|
|
// Something like "View source in debugger -> http://foo.com/file.js:100:2".
|
|
onClickTooltipString: PropTypes.string.isRequired,
|
|
// Source to display when cannot determine a good display name.
|
|
// Something like "(unknown)".
|
|
unknownSourceString: PropTypes.string.isRequired,
|
|
},
|
|
|
|
render() {
|
|
let { onClick, frame, onClickTooltipString, unknownSourceString } = this.props;
|
|
const { short, long, host } = getSourceNames(frame.source, unknownSourceString);
|
|
|
|
let func = frame.functionDisplayName || "";
|
|
let tooltip = `${func} (${long}:${frame.line}:${frame.column})`;
|
|
|
|
let fields = [
|
|
dom.span({ className: "frame-link-function-display-name" }, func),
|
|
dom.a({
|
|
className: "frame-link-filename",
|
|
onClick,
|
|
title: onClickTooltipString
|
|
}, short),
|
|
dom.span({ className: "frame-link-colon" }, ":"),
|
|
dom.span({ className: "frame-link-line" }, frame.line),
|
|
dom.span({ className: "frame-link-colon" }, ":"),
|
|
dom.span({ className: "frame-link-column" }, frame.column)
|
|
];
|
|
|
|
if (host) {
|
|
fields.push(dom.span({ className: "frame-link-host" }, host));
|
|
}
|
|
|
|
return dom.span({ className: "frame-link", title: tooltip }, ...fields);
|
|
}
|
|
});
|