|
/* |
|
Usage: `require('debug/RecordPerfButton').attachToDOM()` |
|
|
|
Add to any file to attach a record button to the DOM, toggleable via click and <alt> keypress. |
|
Useful for quickly testing performance as it will: |
|
- start/stop a perf measurement, |
|
- make Perf accessible on window, |
|
- and log the wasted time. |
|
*/ |
|
|
|
const React = require('react') |
|
const Perf = require('react-addons-perf') |
|
const ReactDOM = require('react-dom') |
|
const rd = React.DOM |
|
|
|
let hasRendered = false |
|
|
|
const RecordPerfButton = React.createClass({ |
|
displayName: 'RecordPerfButton', |
|
statics: { |
|
attachToDOM: function () { |
|
if (hasRendered) { |
|
return |
|
} |
|
hasRendered = true |
|
document.addEventListener('DOMContentLoaded', function () { |
|
var container, node |
|
container = document.createElement('div') |
|
container.style.position = 'fixed' |
|
container.style.top = 0 |
|
container.style.zIndex = 9999 |
|
node = document.body.appendChild(container) |
|
ReactDOM.render(React.createElement(RecordPerfButton), container) |
|
}) |
|
} |
|
}, |
|
getInitialState: function () { |
|
return { |
|
recording: false |
|
} |
|
}, |
|
toggleRecord: function () { |
|
if (!this.state.recording) { |
|
Perf.start() |
|
window.Perf = Perf |
|
this.setState({ |
|
recording: true |
|
}) |
|
} else { |
|
Perf.stop() |
|
Perf.printWasted() |
|
this.setState({ |
|
recording: false |
|
}) |
|
} |
|
}, |
|
mouseDownHandler: function (e) { |
|
e.preventDefault() |
|
}, |
|
handleKeyDown: function (e) { |
|
if (e.altKey) { |
|
this.toggleRecord() |
|
} |
|
}, |
|
componentDidMount: function () { |
|
window.addEventListener('keydown', this.handleKeyDown) |
|
}, |
|
componentWillUnmount: function () { |
|
window.removeEventListener('keydown', this.handleKeyDown) |
|
}, |
|
render: function () { |
|
return rd.div({ |
|
onMouseDown: this.mouseDownHandler, |
|
onClick: this.toggleRecord, |
|
style: { |
|
display: 'inline-block', |
|
marginTop: 13, |
|
marginLeft: 13, |
|
width: 30, |
|
height: 30, |
|
borderRadius: 15, |
|
backgroundColor: this.state.recording ? 'red' : 'grey' |
|
} |
|
}) |
|
} |
|
}) |
|
|
|
module.exports = RecordPerfButton |
