tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

AnimatedPropertyListContainer.js (2979B)

      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  createFactory,
      9  PureComponent,
     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 
     14 const AnimatedPropertyList = createFactory(
     15  require("resource://devtools/client/inspector/animation/components/AnimatedPropertyList.js")
     16 );
     17 const KeyframesProgressBar = createFactory(
     18  require("resource://devtools/client/inspector/animation/components/KeyframesProgressBar.js")
     19 );
     20 const ProgressInspectionPanel = createFactory(
     21  require("resource://devtools/client/inspector/animation/components/ProgressInspectionPanel.js")
     22 );
     23 
     24 const {
     25  getFormatStr,
     26 } = require("resource://devtools/client/inspector/animation/utils/l10n.js");
     27 
     28 class AnimatedPropertyListContainer extends PureComponent {
     29  static get propTypes() {
     30    return {
     31      addAnimationsCurrentTimeListener: PropTypes.func.isRequired,
     32      animation: PropTypes.object.isRequired,
     33      emitEventForTest: PropTypes.func.isRequired,
     34      getAnimatedPropertyMap: PropTypes.func.isRequired,
     35      getAnimationsCurrentTime: PropTypes.func.isRequired,
     36      getComputedStyle: PropTypes.func.isRequired,
     37      removeAnimationsCurrentTimeListener: PropTypes.func.isRequired,
     38      simulateAnimation: PropTypes.func.isRequired,
     39      simulateAnimationForKeyframesProgressBar: PropTypes.func.isRequired,
     40      timeScale: PropTypes.object.isRequired,
     41    };
     42  }
     43 
     44  render() {
     45    const {
     46      addAnimationsCurrentTimeListener,
     47      animation,
     48      emitEventForTest,
     49      getAnimatedPropertyMap,
     50      getAnimationsCurrentTime,
     51      getComputedStyle,
     52      removeAnimationsCurrentTimeListener,
     53      simulateAnimation,
     54      simulateAnimationForKeyframesProgressBar,
     55      timeScale,
     56    } = this.props;
     57 
     58    return dom.div(
     59      {
     60        className: `animated-property-list-container ${animation.state.type}`,
     61      },
     62      ProgressInspectionPanel({
     63        indicator: KeyframesProgressBar({
     64          addAnimationsCurrentTimeListener,
     65          animation,
     66          getAnimationsCurrentTime,
     67          removeAnimationsCurrentTimeListener,
     68          simulateAnimationForKeyframesProgressBar,
     69          timeScale,
     70        }),
     71        list: AnimatedPropertyList({
     72          animation,
     73          emitEventForTest,
     74          getAnimatedPropertyMap,
     75          getComputedStyle,
     76          simulateAnimation,
     77        }),
     78        ticks: [0, 50, 100].map(position => {
     79          const label = getFormatStr(
     80            "detail.propertiesHeader.percentage",
     81            position
     82          );
     83          return { position, label };
     84        }),
     85      })
     86    );
     87  }
     88 }
     89 
     90 module.exports = AnimatedPropertyListContainer;