mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-22 01:35:35 +00:00
Bug 1217946 - Fix all validation failures and deprecated components. r=fitzgen
This commit is contained in:
parent
5d1cd2deeb
commit
a5c5dae2ae
@ -4,6 +4,7 @@
|
||||
|
||||
const { DOM: dom, createClass, createFactory, PropTypes } = require("devtools/client/shared/vendor/react");
|
||||
const { connect } = require("devtools/client/shared/vendor/react-redux");
|
||||
const { breakdowns } = require("./constants");
|
||||
const { toggleRecordingAllocationStacks } = require("./actions/allocations");
|
||||
const { setBreakdownAndRefresh } = require("./actions/breakdown");
|
||||
const { toggleInvertedAndRefresh } = require("./actions/inverted");
|
||||
@ -20,6 +21,13 @@ const App = createClass({
|
||||
|
||||
propTypes: appModel,
|
||||
|
||||
getDefaultProps() {
|
||||
return {
|
||||
breakdown: breakdowns.coarseType.breakdown,
|
||||
inverted: false,
|
||||
};
|
||||
},
|
||||
|
||||
childContextTypes: {
|
||||
front: PropTypes.any,
|
||||
heapWorker: PropTypes.any,
|
||||
@ -46,7 +54,7 @@ const App = createClass({
|
||||
let selectedSnapshot = snapshots.find(s => s.selected);
|
||||
|
||||
return (
|
||||
dom.div({ id: "memory-tool" }, [
|
||||
dom.div({ id: "memory-tool" },
|
||||
|
||||
Toolbar({
|
||||
breakdowns: getBreakdownDisplayData(),
|
||||
@ -61,7 +69,7 @@ const App = createClass({
|
||||
dispatch(toggleInvertedAndRefresh(heapWorker))
|
||||
}),
|
||||
|
||||
dom.div({ id: "memory-tool-container" }, [
|
||||
dom.div({ id: "memory-tool-container" },
|
||||
List({
|
||||
itemComponent: SnapshotListItem,
|
||||
items: snapshots,
|
||||
@ -71,9 +79,9 @@ const App = createClass({
|
||||
HeapView({
|
||||
snapshot: selectedSnapshot,
|
||||
onSnapshotClick: () => dispatch(takeSnapshotAndCensus(front, heapWorker)),
|
||||
}),
|
||||
])
|
||||
])
|
||||
})
|
||||
)
|
||||
)
|
||||
);
|
||||
},
|
||||
});
|
||||
|
@ -76,14 +76,14 @@ const Heap = module.exports = createClass({
|
||||
|
||||
switch (state) {
|
||||
case "initial":
|
||||
content = dom.button({
|
||||
content = [dom.button({
|
||||
className: "devtools-toolbarbutton take-snapshot",
|
||||
onClick: onSnapshotClick,
|
||||
// Want to use the [standalone] tag to leverage our styles,
|
||||
// but React hates that evidently
|
||||
"data-standalone": true,
|
||||
"data-text-only": true,
|
||||
}, TAKE_SNAPSHOT_TEXT)
|
||||
}, TAKE_SNAPSHOT_TEXT)];
|
||||
break;
|
||||
case states.ERROR:
|
||||
content = [
|
||||
@ -96,7 +96,7 @@ const Heap = module.exports = createClass({
|
||||
case states.READING:
|
||||
case states.READ:
|
||||
case states.SAVING_CENSUS:
|
||||
content = dom.span({ className: "snapshot-status devtools-throbber" }, statusText)
|
||||
content = [dom.span({ className: "snapshot-status devtools-throbber" }, statusText)];
|
||||
break;
|
||||
case states.SAVED_CENSUS:
|
||||
content = [
|
||||
@ -111,7 +111,7 @@ const Heap = module.exports = createClass({
|
||||
];
|
||||
break;
|
||||
}
|
||||
let pane = dom.div({ className: "heap-view-panel", "data-state": state }, content);
|
||||
let pane = dom.div({ className: "heap-view-panel", "data-state": state }, ...content);
|
||||
|
||||
return (
|
||||
dom.div({ id: "heap-view", "data-state": state }, pane)
|
||||
|
@ -22,9 +22,9 @@ const List = module.exports = createClass({
|
||||
let { items, onClick, itemComponent: Item } = this.props;
|
||||
|
||||
return (
|
||||
dom.ul({ className: "list" }, items.map((item, index) => {
|
||||
dom.ul({ className: "list" }, ...items.map((item, index) => {
|
||||
return Item({
|
||||
item, index, onClick: () => onClick(item),
|
||||
key: index, item, index, onClick: () => onClick(item),
|
||||
});
|
||||
}))
|
||||
);
|
||||
|
@ -2,7 +2,7 @@
|
||||
* 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, createClass, PropTypes } = require("devtools/client/shared/vendor/react");
|
||||
const { DOM: dom, createClass, PropTypes } = require("devtools/client/shared/vendor/react");
|
||||
|
||||
const models = require("../models");
|
||||
|
||||
@ -33,29 +33,29 @@ const Toolbar = module.exports = createClass({
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
DOM.div({ className: "devtools-toolbar" }, [
|
||||
DOM.button({ className: `take-snapshot devtools-button`, onClick: onTakeSnapshotClick }),
|
||||
dom.div({ className: "devtools-toolbar" },
|
||||
dom.button({ className: `take-snapshot devtools-button`, onClick: onTakeSnapshotClick }),
|
||||
|
||||
DOM.label({},
|
||||
"Breakdown by ",
|
||||
DOM.select({
|
||||
className: `select-breakdown`,
|
||||
onChange: e => onBreakdownChange(e.target.value),
|
||||
}, breakdowns.map(({ name, displayName }) => DOM.option({ value: name }, displayName)))
|
||||
}, ...breakdowns.map(({ name, displayName }) => DOM.option({ key: name, value: name }, displayName)))
|
||||
),
|
||||
|
||||
DOM.label({}, [
|
||||
DOM.input({
|
||||
dom.label({},
|
||||
dom.input({
|
||||
type: "checkbox",
|
||||
checked: inverted,
|
||||
onChange: onToggleInverted,
|
||||
}),
|
||||
// TODO bug 1214799
|
||||
"Invert tree"
|
||||
]),
|
||||
),
|
||||
|
||||
DOM.label({}, [
|
||||
DOM.input({
|
||||
dom.label({},
|
||||
dom.input({
|
||||
type: "checkbox",
|
||||
checked: allocations.recording,
|
||||
disabled: allocations.togglingInProgress,
|
||||
@ -63,8 +63,8 @@ const Toolbar = module.exports = createClass({
|
||||
}),
|
||||
// TODO bug 1214799
|
||||
"Record allocation stacks"
|
||||
])
|
||||
])
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
});
|
||||
|
@ -45,7 +45,7 @@ const ArrowExpander = createFactory(createClass({
|
||||
const TreeNode = createFactory(createClass({
|
||||
componentDidUpdate() {
|
||||
if (this.props.focused) {
|
||||
this.refs.button.getDOMNode().focus();
|
||||
this.refs.button.focus();
|
||||
}
|
||||
},
|
||||
|
||||
@ -244,7 +244,7 @@ const Tree = module.exports = createClass({
|
||||
*/
|
||||
_updateHeight() {
|
||||
this.setState({
|
||||
height: this.refs.tree.getDOMNode().clientHeight
|
||||
height: this.refs.tree.clientHeight
|
||||
});
|
||||
},
|
||||
|
||||
@ -361,8 +361,8 @@ const Tree = module.exports = createClass({
|
||||
*/
|
||||
_onScroll(e) {
|
||||
this.setState({
|
||||
scroll: Math.max(this.refs.tree.getDOMNode().scrollTop, 0),
|
||||
height: this.refs.tree.getDOMNode().clientHeight
|
||||
scroll: Math.max(this.refs.tree.scrollTop, 0),
|
||||
height: this.refs.tree.clientHeight
|
||||
});
|
||||
},
|
||||
|
||||
|
@ -19,6 +19,7 @@ let breakdownModel = exports.breakdown = PropTypes.shape({
|
||||
/**
|
||||
* Snapshot model.
|
||||
*/
|
||||
let stateKeys = Object.keys(states).map(state => states[state]);
|
||||
let snapshotModel = exports.snapshot = PropTypes.shape({
|
||||
// Unique ID for a snapshot
|
||||
id: PropTypes.number.isRequired,
|
||||
@ -37,19 +38,18 @@ let snapshotModel = exports.snapshot = PropTypes.shape({
|
||||
error: PropTypes.object,
|
||||
// State the snapshot is in
|
||||
// @see ./constants.js
|
||||
state: function (props, propName) {
|
||||
let stateNames = Object.keys(states);
|
||||
let current = props.state;
|
||||
state: function (snapshot, propName) {
|
||||
let current = snapshot.state;
|
||||
let shouldHavePath = [states.SAVED, states.READ, states.SAVING_CENSUS, states.SAVED_CENSUS];
|
||||
let shouldHaveCensus = [states.SAVED_CENSUS];
|
||||
|
||||
if (!stateNames.includes(current)) {
|
||||
throw new Error(`Snapshot state must be one of ${stateNames}.`);
|
||||
if (!stateKeys.includes(current)) {
|
||||
throw new Error(`Snapshot state must be one of ${stateKeys}.`);
|
||||
}
|
||||
if (shouldHavePath.includes(current) && !path) {
|
||||
if (shouldHavePath.includes(current) && !snapshot.path) {
|
||||
throw new Error(`Snapshots in state ${current} must have a snapshot path.`);
|
||||
}
|
||||
if (shouldHaveCensus.includes(current) && (!props.census || !props.breakdown)) {
|
||||
if (shouldHaveCensus.includes(current) && (!snapshot.census || !snapshot.breakdown)) {
|
||||
throw new Error(`Snapshots in state ${current} must have a census and breakdown.`);
|
||||
}
|
||||
},
|
||||
|
@ -122,7 +122,6 @@ html, .theme-body, #app, #memory-tool, #memory-tool-container {
|
||||
border-bottom: 1px solid rgba(128,128,128,0.15);
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
.list > li.selected {
|
||||
|
Loading…
Reference in New Issue
Block a user