--- a/devtools/client/inspector/animation/components/AnimatedPropertyItem.js
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyItem.js
@@ -10,50 +10,50 @@ const PropTypes = require("devtools/clie
 
 const AnimatedPropertyName = createFactory(require("./AnimatedPropertyName"));
 const KeyframesGraph = createFactory(require("./keyframes-graph/KeyframesGraph"));
 
 class AnimatedPropertyItem extends PureComponent {
   static get propTypes() {
     return {
       getComputedStyle: PropTypes.func.isRequired,
-      property: PropTypes.string.isRequired,
+      keyframes: PropTypes.array.isRequired,
+      name: PropTypes.string.isRequired,
       simulateAnimation: PropTypes.func.isRequired,
       state: PropTypes.object.isRequired,
       type: PropTypes.string.isRequired,
-      values: PropTypes.array.isRequired,
     };
   }
 
   render() {
     const {
       getComputedStyle,
-      property,
+      keyframes,
+      name,
       simulateAnimation,
       state,
       type,
-      values,
     } = this.props;
 
     return dom.li(
       {
         className: "animated-property-item"
       },
       AnimatedPropertyName(
         {
-          property,
+          name,
           state,
         }
       ),
       KeyframesGraph(
         {
           getComputedStyle,
-          property,
+          keyframes,
+          name,
           simulateAnimation,
           type,
-          values,
         }
       )
     );
   }
 }
 
 module.exports = AnimatedPropertyItem;

--- a/devtools/client/inspector/animation/components/AnimatedPropertyList.js
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyList.js
@@ -105,27 +105,27 @@ class AnimatedPropertyList extends PureC
     if (!animatedPropertyMap) {
       return null;
     }
 
     return dom.ul(
       {
         className: "animated-property-list"
       },
-      [...animatedPropertyMap.entries()].map(([property, values]) => {
-        const state = this.getPropertyState(property);
-        const type = animationTypes[property];
+      [...animatedPropertyMap.entries()].map(([name, keyframes]) => {
+        const state = this.getPropertyState(name);
+        const type = animationTypes[name];
         return AnimatedPropertyItem(
           {
             getComputedStyle,
-            property,
+            keyframes,
+            name,
             simulateAnimation,
             state,
             type,
-            values,
           }
         );
       })
     );
   }
 }
 
 module.exports = AnimatedPropertyList;

--- a/devtools/client/inspector/animation/components/AnimatedPropertyName.js
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyName.js
@@ -6,35 +6,35 @@
 
 const { PureComponent } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 class AnimatedPropertyName extends PureComponent {
   static get propTypes() {
     return {
-      property: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
       state: PropTypes.oneOfType([null, PropTypes.object]).isRequired,
     };
   }
 
   render() {
     const {
-      property,
+      name,
       state,
     } = this.props;
 
     return dom.div(
       {
         className: "animated-property-name" +
                    (state && state.runningOnCompositor ? " compositor" : "") +
                    (state && state.warning ? " warning" : ""),
         title: state ? state.warning : "",
       },
       dom.span(
         {},
-        property
+        name
       )
     );
   }
 }
 
 module.exports = AnimatedPropertyName;

--- a/devtools/client/inspector/animation/components/keyframes-graph/ColorPath.js
+++ b/devtools/client/inspector/animation/components/keyframes-graph/ColorPath.js
@@ -27,23 +27,23 @@ class ColorPath extends ComputedStylePat
   getPropertyName() {
     return "color";
   }
 
   getPropertyValue(keyframe) {
     return keyframe.value;
   }
 
-  propToState({ values }) {
+  propToState({ keyframes }) {
     const maxObject = { distance: 0 };
 
-    for (let i = 0; i < values.length - 1; i++) {
-      const value1 = getRGBA(values[i].value);
-      for (let j = i + 1; j < values.length; j++) {
-        const value2 = getRGBA(values[j].value);
+    for (let i = 0; i < keyframes.length - 1; i++) {
+      const value1 = getRGBA(keyframes[i].value);
+      for (let j = i + 1; j < keyframes.length; j++) {
+        const value2 = getRGBA(keyframes[j].value);
         const distance = getRGBADistance(value1, value2);
 
         if (maxObject.distance >= distance) {
           continue;
         }
 
         maxObject.distance = distance;
         maxObject.value1 = value1;
@@ -66,25 +66,25 @@ class ColorPath extends ComputedStylePat
 
   /**
    * Overide parent's method.
    */
   renderEasingHint() {
     const {
       easingHintStrokeWidth,
       graphHeight,
+      keyframes,
       totalDuration,
-      values,
     } = this.props;
 
     const hints = [];
 
-    for (let i = 0; i < values.length - 1; i++) {
-      const startKeyframe = values[i];
-      const endKeyframe = values[i + 1];
+    for (let i = 0; i < keyframes.length - 1; i++) {
+      const startKeyframe = keyframes[i];
+      const endKeyframe = keyframes[i + 1];
       const startTime = startKeyframe.offset * totalDuration;
       const endTime = endKeyframe.offset * totalDuration;
 
       const g = dom.g(
         {
           className: "hint"
         },
         dom.title({}, startKeyframe.easing),

--- a/devtools/client/inspector/animation/components/keyframes-graph/ComputedStylePath.js
+++ b/devtools/client/inspector/animation/components/keyframes-graph/ComputedStylePath.js
@@ -38,46 +38,46 @@ const {
  *          e.g. 0 (should be 0 - 1.0)
  */
 class ComputedStylePath extends PureComponent {
   static get propTypes() {
     return {
       componentWidth: PropTypes.number.isRequired,
       easingHintStrokeWidth: PropTypes.number.isRequired,
       graphHeight: PropTypes.number.isRequired,
+      keyframes: PropTypes.array.isRequired,
       simulateAnimation: PropTypes.func.isRequired,
       totalDuration: PropTypes.number.isRequired,
-      values: PropTypes.array.isRequired,
     };
   }
 
   /**
    * Return an array containing the path segments between the given start and
    * end keyframe values.
    *
-   * @param {Object} startValue
+   * @param {Object} startKeyframe
    *        Starting keyframe.
-   * @param {Object} startValue
+   * @param {Object} endKeyframe
    *        Ending keyframe.
    * @return {Array}
    *         Array of path segment.
    *         [{x: {Number} time, y: {Number} segment value}, ...]
    */
-  getPathSegments(startValue, endValue) {
+  getPathSegments(startKeyframe, endKeyframe) {
     const {
       componentWidth,
       simulateAnimation,
       totalDuration,
     } = this.props;
 
     const propertyName = this.getPropertyName();
-    const offsetDistance = endValue.offset - startValue.offset;
+    const offsetDistance = endKeyframe.offset - startKeyframe.offset;
     const duration = offsetDistance * totalDuration;
 
-    const keyframes = [startValue, endValue].map((keyframe, index) => {
+    const keyframes = [startKeyframe, endKeyframe].map((keyframe, index) => {
       return {
         offset: index,
         easing: keyframe.easing,
         [getJsPropertyName(propertyName)]: this.getPropertyValue(keyframe),
       };
     });
     const effect = {
       duration,
@@ -97,17 +97,17 @@ class ComputedStylePath extends PureComp
         computedStyle,
         x: time,
         y: this.toSegmentValue(computedStyle),
       };
     };
 
     const segments = createPathSegments(0, duration, duration / componentWidth, threshold,
                                         DEFAULT_DURATION_RESOLUTION, getSegment);
-    const offset = startValue.offset * totalDuration;
+    const offset = startKeyframe.offset * totalDuration;
 
     for (const segment of segments) {
       segment.x += offset;
     }
 
     return segments;
   }
 
@@ -117,25 +117,25 @@ class ComputedStylePath extends PureComp
    * @param {Array} segments
    *        Path segments.
    * @return {Element}
    *         Element which represents easing hint.
    */
   renderEasingHint(segments) {
     const {
       easingHintStrokeWidth,
+      keyframes,
       totalDuration,
-      values,
     } = this.props;
 
     const hints = [];
 
-    for (let i = 0, indexOfSegments = 0; i < values.length - 1; i++) {
-      const startKeyframe = values[i];
-      const endKeyframe = values[i + 1];
+    for (let i = 0, indexOfSegments = 0; i < keyframes.length - 1; i++) {
+      const startKeyframe = keyframes[i];
+      const endKeyframe = keyframes[i + 1];
       const endTime = endKeyframe.offset * totalDuration;
       const hintSegments = [];
 
       for (; indexOfSegments < segments.length; indexOfSegments++) {
         const segment = segments[indexOfSegments];
         hintSegments.push(segment);
 
         if (startKeyframe.offset === endKeyframe.offset) {
@@ -169,24 +169,24 @@ class ComputedStylePath extends PureComp
   }
 
   /**
    * Render graph. This method returns React dom.
    *
    * @return {Element}
    */
   renderGraph() {
-    const { values } = this.props;
+    const { keyframes } = this.props;
 
     const segments = [];
 
-    for (let i = 0; i < values.length - 1; i++) {
-      const startValue = values[i];
-      const endValue = values[i + 1];
-      segments.push(...this.getPathSegments(startValue, endValue));
+    for (let i = 0; i < keyframes.length - 1; i++) {
+      const startKeyframe = keyframes[i];
+      const endKeyframe = keyframes[i + 1];
+      segments.push(...this.getPathSegments(startKeyframe, endKeyframe));
     }
 
     return [
       this.renderPathSegments(segments),
       this.renderEasingHint(segments)
     ];
   }
 

--- a/devtools/client/inspector/animation/components/keyframes-graph/DiscretePath.js
+++ b/devtools/client/inspector/animation/components/keyframes-graph/DiscretePath.js
@@ -7,43 +7,43 @@
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 const ComputedStylePath = require("./ComputedStylePath");
 
 class DiscretePath extends ComputedStylePath {
   static get propTypes() {
     return {
-      property: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
 
     this.state = this.propToState(props);
   }
 
   componentWillReceiveProps(nextProps) {
     this.setState(this.propToState(nextProps));
   }
 
   getPropertyName() {
-    return this.props.property;
+    return this.props.name;
   }
 
   getPropertyValue(keyframe) {
     return keyframe.value;
   }
 
-  propToState({ property, getComputedStyle, values }) {
+  propToState({ getComputedStyle, keyframes, name }) {
     const discreteValues = [];
 
-    for (const keyframe of values) {
-      const style = getComputedStyle(property, { [property]: keyframe.value });
+    for (const keyframe of keyframes) {
+      const style = getComputedStyle(name, { [name]: keyframe.value });
 
       if (!discreteValues.includes(style)) {
         discreteValues.push(style);
       }
     }
 
     return { discreteValues };
   }

--- a/devtools/client/inspector/animation/components/keyframes-graph/KeyframeMarkerList.js
+++ b/devtools/client/inspector/animation/components/keyframes-graph/KeyframeMarkerList.js
@@ -8,25 +8,25 @@ const { createFactory, PureComponent } =
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 const KeyframeMarkerItem = createFactory(require("./KeyframeMarkerItem"));
 
 class KeyframeMarkerList extends PureComponent {
   static get propTypes() {
     return {
-      values: PropTypes.array.isRequired,
+      keyframes: PropTypes.array.isRequired,
     };
   }
 
   render() {
-    const { values } = this.props;
+    const { keyframes } = this.props;
 
     return dom.ul(
       {
         className: "keyframe-marker-list"
       },
-      values.map(value => KeyframeMarkerItem({ keyframe: value }))
+      keyframes.map(keyframe => KeyframeMarkerItem({ keyframe }))
     );
   }
 }
 
 module.exports = KeyframeMarkerList;

--- a/devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraph.js
+++ b/devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraph.js
@@ -10,43 +10,43 @@ const PropTypes = require("devtools/clie
 
 const KeyframeMarkerList = createFactory(require("./KeyframeMarkerList"));
 const KeyframesGraphPath = createFactory(require("./KeyframesGraphPath"));
 
 class KeyframesGraph extends PureComponent {
   static get propTypes() {
     return {
       getComputedStyle: PropTypes.func.isRequired,
-      property: PropTypes.string.isRequired,
+      keyframes: PropTypes.array.isRequired,
+      name: PropTypes.string.isRequired,
       simulateAnimation: PropTypes.func.isRequired,
       type: PropTypes.string.isRequired,
-      values: PropTypes.array.isRequired,
     };
   }
 
   render() {
     const {
       getComputedStyle,
-      property,
+      keyframes,
+      name,
       simulateAnimation,
       type,
-      values,
     } = this.props;
 
     return dom.div(
       {
-        className: `keyframes-graph ${ property }`
+        className: `keyframes-graph ${ name }`
       },
       KeyframesGraphPath(
         {
           getComputedStyle,
-          property,
+          keyframes,
+          name,
           simulateAnimation,
           type,
-          values,
         }
       ),
-      KeyframeMarkerList({ values })
+      KeyframeMarkerList({ keyframes })
     );
   }
 }
 
 module.exports = KeyframesGraph;

--- a/devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraphPath.js
+++ b/devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraphPath.js
@@ -18,20 +18,20 @@ const {
   DEFAULT_GRAPH_HEIGHT,
   DEFAULT_KEYFRAMES_GRAPH_DURATION,
 } = require("../../utils/graph-helper");
 
 class KeyframesGraphPath extends PureComponent {
   static get propTypes() {
     return {
       getComputedStyle: PropTypes.func.isRequired,
-      property: PropTypes.string.isRequired,
+      keyframes: PropTypes.array.isRequired,
+      name: PropTypes.string.isRequired,
       simulateAnimation: PropTypes.func.isRequired,
       type: PropTypes.string.isRequired,
-      values: PropTypes.array.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
 
     this.state = {
       componentHeight: 0,
@@ -60,20 +60,20 @@ class KeyframesGraphPath extends PureCom
       componentHeight: thisEl.parentNode.clientHeight,
       componentWidth: thisEl.parentNode.clientWidth,
     });
   }
 
   render() {
     const {
       getComputedStyle,
-      property,
+      keyframes,
+      name,
       simulateAnimation,
       type,
-      values,
     } = this.props;
     const {
       componentHeight,
       componentWidth,
     } = this.state;
 
     if (!componentWidth) {
       return dom.svg();
@@ -92,19 +92,19 @@ class KeyframesGraphPath extends PureCom
                  `${ DEFAULT_GRAPH_HEIGHT + strokeWidthInViewBox * 2 }`,
       },
       pathComponent(
         {
           componentWidth,
           easingHintStrokeWidth: DEFAULT_EASING_HINT_STROKE_WIDTH,
           getComputedStyle,
           graphHeight: DEFAULT_GRAPH_HEIGHT,
-          property,
+          keyframes,
+          name,
           simulateAnimation,
           totalDuration: DEFAULT_KEYFRAMES_GRAPH_DURATION,
-          values,
         }
       )
     );
   }
 }
 
 module.exports = KeyframesGraphPath;