diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /devtools/client/inspector/animation/components/AnimatedPropertyList.js | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'devtools/client/inspector/animation/components/AnimatedPropertyList.js')
-rw-r--r-- | devtools/client/inspector/animation/components/AnimatedPropertyList.js | 140 |
1 files changed, 140 insertions, 0 deletions
diff --git a/devtools/client/inspector/animation/components/AnimatedPropertyList.js b/devtools/client/inspector/animation/components/AnimatedPropertyList.js new file mode 100644 index 0000000000..54dff15187 --- /dev/null +++ b/devtools/client/inspector/animation/components/AnimatedPropertyList.js @@ -0,0 +1,140 @@ +/* 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/. */ + +"use strict"; + +const { + Component, + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); + +const AnimatedPropertyItem = createFactory( + require("resource://devtools/client/inspector/animation/components/AnimatedPropertyItem.js") +); + +class AnimatedPropertyList extends Component { + static get propTypes() { + return { + animation: PropTypes.object.isRequired, + emitEventForTest: PropTypes.func.isRequired, + getAnimatedPropertyMap: PropTypes.func.isRequired, + getComputedStyle: PropTypes.func.isRequired, + simulateAnimation: PropTypes.func.isRequired, + }; + } + + constructor(props) { + super(props); + + this.state = { + // Array of object which has the property name, the keyframes, its aniamtion type + // and unchanged flag. + animatedProperties: null, + // To avoid rendering while the state is updating + // since we call an async function in updateState. + isStateUpdating: false, + }; + } + + componentDidMount() { + // No need to set isStateUpdating state since paint sequence is finish here. + this.updateState(this.props.animation); + } + + // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507 + UNSAFE_componentWillReceiveProps(nextProps) { + this.setState({ isStateUpdating: true }); + this.updateState(nextProps.animation); + } + + shouldComponentUpdate(nextProps, nextState) { + return !nextState.isStateUpdating; + } + + getPropertyState(property) { + const { animation } = this.props; + + for (const propState of animation.state.propertyState) { + if (propState.property === property) { + return propState; + } + } + + return null; + } + + async updateState(animation) { + const { getAnimatedPropertyMap, emitEventForTest } = this.props; + + let propertyMap = null; + let propertyNames = null; + let types = null; + + try { + propertyMap = getAnimatedPropertyMap(animation); + propertyNames = [...propertyMap.keys()]; + types = await animation.getAnimationTypes(propertyNames); + } catch (e) { + // Expected if we've already been destroyed or other node have been selected + // in the meantime. + console.error(e); + return; + } + + const animatedProperties = propertyNames.map(name => { + const keyframes = propertyMap.get(name); + const type = types[name]; + const isUnchanged = keyframes.every( + keyframe => keyframe.value === keyframes[0].value + ); + return { isUnchanged, keyframes, name, type }; + }); + + animatedProperties.sort((a, b) => { + if (a.isUnchanged === b.isUnchanged) { + return a.name > b.name ? 1 : -1; + } + + return a.isUnchanged ? 1 : -1; + }); + + this.setState({ + animatedProperties, + isStateUpdating: false, + }); + + emitEventForTest("animation-keyframes-rendered"); + } + + render() { + const { getComputedStyle, simulateAnimation } = this.props; + const { animatedProperties } = this.state; + + if (!animatedProperties) { + return null; + } + + return dom.ul( + { + className: "animated-property-list", + }, + animatedProperties.map(({ isUnchanged, keyframes, name, type }) => { + const state = this.getPropertyState(name); + return AnimatedPropertyItem({ + getComputedStyle, + isUnchanged, + keyframes, + name, + simulateAnimation, + state, + type, + }); + }) + ); + } +} + +module.exports = AnimatedPropertyList; |