tor-browser

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

NegativePath.js (3089B)

      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  PureComponent,
      9 } = require("resource://devtools/client/shared/vendor/react.mjs");
     10 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     11 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     12 
     13 const {
     14  createSummaryGraphPathStringFunction,
     15  SummaryGraphHelper,
     16 } = require("resource://devtools/client/inspector/animation/utils/graph-helper.js");
     17 
     18 class NegativePath extends PureComponent {
     19  static get propTypes() {
     20    return {
     21      animation: PropTypes.object.isRequired,
     22      className: PropTypes.string.isRequired,
     23      durationPerPixel: PropTypes.number.isRequired,
     24      keyframes: PropTypes.object.isRequired,
     25      offset: PropTypes.number.isRequired,
     26      simulateAnimation: PropTypes.func.isRequired,
     27      totalDuration: PropTypes.number.isRequired,
     28    };
     29  }
     30 
     31  render() {
     32    const {
     33      animation,
     34      durationPerPixel,
     35      keyframes,
     36      offset,
     37      simulateAnimation,
     38      totalDuration,
     39    } = this.props;
     40 
     41    const { state } = animation;
     42    const effectTiming = Object.assign({}, state, {
     43      fill: "both",
     44      iterations: state.iterationCount ? state.iterationCount : Infinity,
     45    });
     46 
     47    // Create new keyframes for opacity as computed style.
     48    // The reason why we use computed value instead of computed timing progress is to
     49    // include the easing in keyframes as well. Although the computed timing progress
     50    // is not affected by the easing in keyframes at all, computed value reflects that.
     51    const frames = keyframes.map(keyframe => {
     52      return {
     53        opacity: keyframe.offset,
     54        offset: keyframe.offset,
     55        easing: keyframe.easing,
     56      };
     57    });
     58 
     59    const simulatedAnimation = simulateAnimation(frames, effectTiming, true);
     60 
     61    if (!simulatedAnimation) {
     62      return null;
     63    }
     64 
     65    const simulatedElement = simulatedAnimation.effect.target;
     66    const win = simulatedElement.ownerGlobal;
     67    const endTime = simulatedAnimation.effect.getComputedTiming().endTime;
     68 
     69    // Set the underlying opacity to zero so that if we sample the animation's output
     70    // during the delay phase and it is not filling backwards, we get zero.
     71    simulatedElement.style.opacity = 0;
     72 
     73    const getValueFunc = time => {
     74      simulatedAnimation.currentTime = time;
     75      return win.getComputedStyle(simulatedElement).opacity;
     76    };
     77 
     78    const toPathStringFunc = createSummaryGraphPathStringFunction(
     79      endTime,
     80      state.playbackRate
     81    );
     82    const helper = new SummaryGraphHelper(
     83      state,
     84      keyframes,
     85      totalDuration,
     86      durationPerPixel,
     87      getValueFunc,
     88      toPathStringFunc
     89    );
     90 
     91    return dom.g(
     92      {
     93        className: this.getClassName(),
     94        transform: `translate(${offset})`,
     95      },
     96      this.renderGraph(state, helper)
     97    );
     98  }
     99 }
    100 
    101 module.exports = NegativePath;