firefox/devtools/client/inspector/animation/components/graph/SummaryGraph.js

/* 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 {
  createFactory,
  PureComponent,
} = require("resource://devtools/client/shared/vendor/react.mjs");
const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");

const AnimationName = createFactory(
  require("resource://devtools/client/inspector/animation/components/graph/AnimationName.js")
);
const DelaySign = createFactory(
  require("resource://devtools/client/inspector/animation/components/graph/DelaySign.js")
);
const EndDelaySign = createFactory(
  require("resource://devtools/client/inspector/animation/components/graph/EndDelaySign.js")
);
const SummaryGraphPath = createFactory(
  require("resource://devtools/client/inspector/animation/components/graph/SummaryGraphPath.js")
);

const {
  getFormattedTitle,
  getFormatStr,
  getStr,
  numberWithDecimals,
} = require("resource://devtools/client/inspector/animation/utils/l10n.js");

class SummaryGraph extends PureComponent {
  static get propTypes() {
    return {
      animation: PropTypes.object.isRequired,
      getAnimatedPropertyMap: PropTypes.func.isRequired,
      selectAnimation: PropTypes.func.isRequired,
      simulateAnimation: PropTypes.func.isRequired,
      timeScale: PropTypes.object.isRequired,
    };
  }

  constructor(props) {
    super(props);

    this.onClick = this.onClick.bind(this);
  }

  onClick(event) {
    event.stopPropagation();
    this.props.selectAnimation(this.props.animation);
  }

  getTitleText(state) {
    const getTime = time =>
      getFormatStr("player.timeLabel", numberWithDecimals(time / 1000, 2));
    const getTimeOrInfinity = time =>
      time === Infinity ? getStr("player.infiniteDurationText") : getTime(time);

    let text = "";

    // Adding the name.
    text += getFormattedTitle(state);
    text += "\n";

    // Adding the delay.
    if (state.delay) {
      text += getStr("player.animationDelayLabel") + " ";
      text += getTime(state.delay);
      text += "\n";
    }

    // Adding the duration.
    text += getStr("player.animationDurationLabel") + " ";
    text += getTimeOrInfinity(state.duration);
    text += "\n";

    // Adding the endDelay.
    if (state.endDelay) {
      text += getStr("player.animationEndDelayLabel") + " ";
      text += getTime(state.endDelay);
      text += "\n";
    }

    // Adding the iteration count (the infinite symbol, or an integer).
    if (state.iterationCount !== 1) {
      text += getStr("player.animationIterationCountLabel") + " ";
      text +=
        state.iterationCount || getStr("player.infiniteIterationCountText");
      text += "\n";
    }

    // Adding the iteration start.
    if (state.iterationStart !== 0) {
      text += getFormatStr(
        "player.animationIterationStartLabel2",
        state.iterationStart,
        getTimeOrInfinity(state.iterationStart * state.duration)
      );
      text += "\n";
    }

    // Adding the easing if it is not "linear".
    if (state.easing && state.easing !== "linear") {
      text += getStr("player.animationOverallEasingLabel") + " ";
      text += state.easing;
      text += "\n";
    }

    // Adding the fill mode.
    if (state.fill && state.fill !== "none") {
      text += getStr("player.animationFillLabel") + " ";
      text += state.fill;
      text += "\n";
    }

    // Adding the direction mode if it is not "normal".
    if (state.direction && state.direction !== "normal") {
      text += getStr("player.animationDirectionLabel") + " ";
      text += state.direction;
      text += "\n";
    }

    // Adding the playback rate if it's different than 1.
    if (state.playbackRate !== 1) {
      text += getStr("player.animationRateLabel") + " ";
      text += state.playbackRate;
      text += "\n";
    }

    // Adding the animation-timing-function
    // if it is not "ease" which is default value for CSS Animations.
    if (
      state.animationTimingFunction &&
      state.animationTimingFunction !== "ease"
    ) {
      text += getStr("player.animationTimingFunctionLabel") + " ";
      text += state.animationTimingFunction;
      text += "\n";
    }

    // Adding a note that the animation is running on the compositor thread if
    // needed.
    if (state.propertyState) {
      if (
        state.propertyState.every(propState => propState.runningOnCompositor)
      ) {
        text += getStr("player.allPropertiesOnCompositorTooltip");
      } else if (
        state.propertyState.some(propState => propState.runningOnCompositor)
      ) {
        text += getStr("player.somePropertiesOnCompositorTooltip");
      }
    } else if (state.isRunningOnCompositor) {
      text += getStr("player.runningOnCompositorTooltip");
    }

    return text;
  }

  render() {
    const { animation, getAnimatedPropertyMap, simulateAnimation, timeScale } =
      this.props;

    const { iterationCount } = animation.state;
    const { delay, endDelay } = animation.state.absoluteValues;

    return dom.div(
      {
        className:
          "animation-summary-graph" +
          (animation.state.isRunningOnCompositor ? " compositor" : ""),
        onClick: this.onClick,
        title: this.getTitleText(animation.state),
      },
      SummaryGraphPath({
        animation,
        getAnimatedPropertyMap,
        simulateAnimation,
        timeScale,
      }),
      delay
        ? DelaySign({
            animation,
            timeScale,
          })
        : null,
      iterationCount && endDelay
        ? EndDelaySign({
            animation,
            timeScale,
          })
        : null,
      animation.state.name
        ? AnimationName({
            animation,
          })
        : null
    );
  }
}

module.exports = SummaryGraph;