App.js (5663B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 "use strict"; 6 7 const { 8 Component, 9 createFactory, 10 } = require("resource://devtools/client/shared/vendor/react.mjs"); 11 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); 12 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs"); 13 const { 14 connect, 15 } = require("resource://devtools/client/shared/vendor/react-redux.js"); 16 17 const AnimationDetailContainer = createFactory( 18 require("resource://devtools/client/inspector/animation/components/AnimationDetailContainer.js") 19 ); 20 const AnimationListContainer = createFactory( 21 require("resource://devtools/client/inspector/animation/components/AnimationListContainer.js") 22 ); 23 const AnimationToolbar = createFactory( 24 require("resource://devtools/client/inspector/animation/components/AnimationToolbar.js") 25 ); 26 const NoAnimationPanel = createFactory( 27 require("resource://devtools/client/inspector/animation/components/NoAnimationPanel.js") 28 ); 29 const SplitBox = createFactory( 30 require("resource://devtools/client/shared/components/splitter/SplitBox.js") 31 ); 32 33 class App extends Component { 34 static get propTypes() { 35 return { 36 addAnimationsCurrentTimeListener: PropTypes.func.isRequired, 37 animations: PropTypes.arrayOf(PropTypes.object).isRequired, 38 detailVisibility: PropTypes.bool.isRequired, 39 direction: PropTypes.string.isRequired, 40 dispatch: PropTypes.func.isRequired, 41 emitEventForTest: PropTypes.func.isRequired, 42 getAnimatedPropertyMap: PropTypes.func.isRequired, 43 getAnimationsCurrentTime: PropTypes.func.isRequired, 44 getComputedStyle: PropTypes.func.isRequired, 45 getNodeFromActor: PropTypes.func.isRequired, 46 removeAnimationsCurrentTimeListener: PropTypes.func.isRequired, 47 rewindAnimationsCurrentTime: PropTypes.func.isRequired, 48 selectAnimation: PropTypes.func.isRequired, 49 setAnimationsCurrentTime: PropTypes.func.isRequired, 50 setAnimationsPlaybackRate: PropTypes.func.isRequired, 51 setAnimationsPlayState: PropTypes.func.isRequired, 52 setDetailVisibility: PropTypes.func.isRequired, 53 setHighlightedNode: PropTypes.func.isRequired, 54 setSelectedNode: PropTypes.func.isRequired, 55 simulateAnimation: PropTypes.func.isRequired, 56 simulateAnimationForKeyframesProgressBar: PropTypes.func.isRequired, 57 timeScale: PropTypes.object.isRequired, 58 toggleElementPicker: PropTypes.func.isRequired, 59 toggleLockingHighlight: PropTypes.func.isRequired, 60 }; 61 } 62 63 shouldComponentUpdate(nextProps) { 64 return ( 65 this.props.animations.length !== 0 || nextProps.animations.length !== 0 66 ); 67 } 68 69 render() { 70 const { 71 addAnimationsCurrentTimeListener, 72 animations, 73 detailVisibility, 74 direction, 75 dispatch, 76 emitEventForTest, 77 getAnimatedPropertyMap, 78 getAnimationsCurrentTime, 79 getComputedStyle, 80 getNodeFromActor, 81 removeAnimationsCurrentTimeListener, 82 rewindAnimationsCurrentTime, 83 selectAnimation, 84 setAnimationsCurrentTime, 85 setAnimationsPlaybackRate, 86 setAnimationsPlayState, 87 setDetailVisibility, 88 setHighlightedNode, 89 setSelectedNode, 90 simulateAnimation, 91 simulateAnimationForKeyframesProgressBar, 92 timeScale, 93 toggleElementPicker, 94 } = this.props; 95 96 return dom.div( 97 { 98 id: "animation-container", 99 className: detailVisibility ? "animation-detail-visible" : "", 100 tabIndex: -1, 101 }, 102 animations.length 103 ? [ 104 AnimationToolbar({ 105 addAnimationsCurrentTimeListener, 106 animations, 107 removeAnimationsCurrentTimeListener, 108 rewindAnimationsCurrentTime, 109 setAnimationsPlaybackRate, 110 setAnimationsPlayState, 111 timeScale, 112 }), 113 SplitBox({ 114 className: "animation-container-splitter", 115 endPanel: AnimationDetailContainer({ 116 addAnimationsCurrentTimeListener, 117 emitEventForTest, 118 getAnimatedPropertyMap, 119 getAnimationsCurrentTime, 120 getComputedStyle, 121 removeAnimationsCurrentTimeListener, 122 setDetailVisibility, 123 simulateAnimation, 124 simulateAnimationForKeyframesProgressBar, 125 timeScale, 126 }), 127 endPanelControl: true, 128 initialHeight: "50%", 129 splitterSize: 1, 130 minSize: "30px", 131 startPanel: AnimationListContainer({ 132 addAnimationsCurrentTimeListener, 133 animations, 134 direction, 135 dispatch, 136 getAnimatedPropertyMap, 137 getNodeFromActor, 138 removeAnimationsCurrentTimeListener, 139 selectAnimation, 140 setAnimationsCurrentTime, 141 setHighlightedNode, 142 setSelectedNode, 143 simulateAnimation, 144 timeScale, 145 }), 146 vert: false, 147 }), 148 ] 149 : NoAnimationPanel({ 150 toggleElementPicker, 151 }) 152 ); 153 } 154 } 155 156 const mapStateToProps = state => { 157 return { 158 animations: state.animations.animations, 159 detailVisibility: state.animations.detailVisibility, 160 timeScale: state.animations.timeScale, 161 }; 162 }; 163 164 module.exports = connect(mapStateToProps)(App);