--- a/devtools/client/inspector/animation/components/AnimatedPropertyListContainer.js
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyListContainer.js
@@ -4,17 +4,20 @@
 
 "use strict";
 
 const { createFactory, 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");
 
 const AnimatedPropertyList = createFactory(require("./AnimatedPropertyList"));
-const AnimatedPropertyListHeader = createFactory(require("./AnimatedPropertyListHeader"));
+const KeyframesProgressBar = createFactory(require("./KeyframesProgressBar"));
+const ProgressInspectionPanel = createFactory(require("./ProgressInspectionPanel"));
+
+const { getFormatStr } = require("../utils/l10n");
 
 class AnimatedPropertyListContainer extends PureComponent {
   static get propTypes() {
     return {
       addAnimationsCurrentTimeListener: PropTypes.func.isRequired,
       animation: PropTypes.object.isRequired,
       emitEventForTest: PropTypes.func.isRequired,
       getAnimatedPropertyMap: PropTypes.func.isRequired,
@@ -40,38 +43,40 @@ class AnimatedPropertyListContainer exte
       simulateAnimationForKeyframesProgressBar,
       timeScale,
     } = this.props;
 
     return dom.div(
       {
         className: `animated-property-list-container ${ animation.state.type }`
       },
-      AnimatedPropertyListHeader(
-        {
-          addAnimationsCurrentTimeListener,
-          animation,
-          getAnimationsCurrentTime,
-          removeAnimationsCurrentTimeListener,
-          simulateAnimationForKeyframesProgressBar,
-          timeScale,
-        }
-      ),
-      dom.div(
+      ProgressInspectionPanel(
         {
-          className: "animated-property-list-background",
-        },
-        dom.span()
-      ),
-      AnimatedPropertyList(
-        {
-          animation,
-          emitEventForTest,
-          getAnimatedPropertyMap,
-          getComputedStyle,
-          simulateAnimation,
+          indicator: KeyframesProgressBar(
+            {
+              addAnimationsCurrentTimeListener,
+              animation,
+              getAnimationsCurrentTime,
+              removeAnimationsCurrentTimeListener,
+              simulateAnimationForKeyframesProgressBar,
+              timeScale,
+            }
+          ),
+          list: AnimatedPropertyList(
+            {
+              animation,
+              emitEventForTest,
+              getAnimatedPropertyMap,
+              getComputedStyle,
+              simulateAnimation,
+            }
+          ),
+          ticks: [0, 50, 100].map(position => {
+            const label = getFormatStr("detail.propertiesHeader.percentage", position);
+            return { position, label };
+          })
         }
       )
     );
   }
 }
 
 module.exports = AnimatedPropertyListContainer;

deleted file mode 100644
--- a/devtools/client/inspector/animation/components/AnimatedPropertyListHeader.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/* 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("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");
-
-const KeyframesProgressBar = createFactory(require("./KeyframesProgressBar"));
-const KeyframesProgressTickList = createFactory(require("./KeyframesProgressTickList"));
-
-class AnimatedPropertyListHeader extends PureComponent {
-  static get propTypes() {
-    return {
-      addAnimationsCurrentTimeListener: PropTypes.func.isRequired,
-      animation: PropTypes.object.isRequired,
-      getAnimationsCurrentTime: PropTypes.func.isRequired,
-      removeAnimationsCurrentTimeListener: PropTypes.func.isRequired,
-      simulateAnimationForKeyframesProgressBar: PropTypes.func.isRequired,
-      timeScale: PropTypes.object.isRequired,
-    };
-  }
-
-  render() {
-    const {
-      addAnimationsCurrentTimeListener,
-      animation,
-      getAnimationsCurrentTime,
-      removeAnimationsCurrentTimeListener,
-      simulateAnimationForKeyframesProgressBar,
-      timeScale,
-    } = this.props;
-
-    return dom.div(
-      {
-        className: "animated-property-list-header"
-      },
-      dom.div(
-        {
-          className: "devtools-toolbar"
-        }
-      ),
-      KeyframesProgressTickList(),
-      KeyframesProgressBar(
-        {
-          addAnimationsCurrentTimeListener,
-          animation,
-          getAnimationsCurrentTime,
-          removeAnimationsCurrentTimeListener,
-          simulateAnimationForKeyframesProgressBar,
-          timeScale,
-        }
-      )
-    );
-  }
-}
-
-module.exports = AnimatedPropertyListHeader;

--- a/devtools/client/inspector/animation/components/KeyframesProgressBar.js
+++ b/devtools/client/inspector/animation/components/KeyframesProgressBar.js
@@ -103,17 +103,17 @@ class KeyframesProgressBar extends PureC
     this.simulatedAnimation = simulateAnimationForKeyframesProgressBar(timing);
   }
 
   render() {
     const { offset } = this.state;
 
     return dom.div(
       {
-        className: "keyframes-progress-bar-area devtools-toolbar",
+        className: "keyframes-progress-bar-area",
       },
       dom.div(
         {
           className: "keyframes-progress-bar",
           style: {
             transform: `translateX(${ offset }px)`,
           },
         }

deleted file mode 100644
--- a/devtools/client/inspector/animation/components/KeyframesProgressTickItem.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/* 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 { PureComponent } = require("devtools/client/shared/vendor/react");
-const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
-const dom = require("devtools/client/shared/vendor/react-dom-factories");
-
-class KeyframesProgressTickItem extends PureComponent {
-  static get propTypes() {
-    return {
-      direction: PropTypes.string.isRequired,
-      position: PropTypes.number.isRequired,
-      progressTickLabel: PropTypes.string.isRequired,
-    };
-  }
-
-  render() {
-    const {
-      direction,
-      position,
-      progressTickLabel,
-    } = this.props;
-
-    return dom.div(
-      {
-        className: `keyframes-progress-tick-item ${ direction }`,
-        style: { [direction]: `${ position }%` }
-      },
-      progressTickLabel
-    );
-  }
-}
-
-module.exports = KeyframesProgressTickItem;

deleted file mode 100644
--- a/devtools/client/inspector/animation/components/KeyframesProgressTickList.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/* 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("devtools/client/shared/vendor/react");
-const dom = require("devtools/client/shared/vendor/react-dom-factories");
-
-const KeyframesProgressTickItem = createFactory(require("./KeyframesProgressTickItem"));
-const { getFormatStr } = require("../utils/l10n");
-
-class KeyframesProgressTickList extends PureComponent {
-  render() {
-    return dom.div(
-      {
-        className: "keyframes-progress-tick-list"
-      },
-      [0, 50, 100].map(progress => {
-        const direction = progress === 100 ? "right" : "left";
-        const position = progress === 100 ? 0 : progress;
-        const progressTickLabel =
-          getFormatStr("detail.propertiesHeader.percentage", progress);
-
-        return KeyframesProgressTickItem(
-          {
-            direction,
-            position,
-            progressTickLabel,
-          }
-        );
-      })
-    );
-  }
-}
-
-module.exports = KeyframesProgressTickList;

--- a/devtools/client/inspector/animation/components/moz.build
+++ b/devtools/client/inspector/animation/components/moz.build
@@ -6,32 +6,29 @@ DIRS += [
     'graph',
     'keyframes-graph'
 ]
 
 DevToolsModules(
     'AnimatedPropertyItem.js',
     'AnimatedPropertyList.js',
     'AnimatedPropertyListContainer.js',
-    'AnimatedPropertyListHeader.js',
     'AnimatedPropertyName.js',
     'AnimationDetailContainer.js',
     'AnimationDetailHeader.js',
     'AnimationItem.js',
     'AnimationList.js',
     'AnimationListContainer.js',
     'AnimationTarget.js',
     'AnimationToolbar.js',
     'App.js',
     'CurrentTimeLabel.js',
     'CurrentTimeScrubber.js',
     'CurrentTimeScrubberController.js',
     'KeyframesProgressBar.js',
-    'KeyframesProgressTickItem.js',
-    'KeyframesProgressTickList.js',
     'NoAnimationPanel.js',
     'PauseResumeButton.js',
     'PlaybackRateSelector.js',
     'ProgressInspectionPanel.js',
     'RewindButton.js',
     'TickLabels.js',
     'TickLines.js',
 )

--- a/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js
@@ -4,17 +4,17 @@ http://creativecommons.org/publicdomain/
 "use strict";
 
 // Test for following KeyframesProgressBar:
 // * element existence
 // * progress bar position in multi effect timings
 // * progress bar position after changing playback rate
 // * progress bar position when select another animation
 
-requestLongerTimeout(2);
+requestLongerTimeout(3);
 
 const TEST_DATA = [
   {
     targetClass: "cssanimation-linear",
     scrubberPositions: [0, 0.25, 0.5, 0.75, 1],
     expectedPositions: [0, 0.25, 0.5, 0.75, 0],
   },
   {

--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -350,75 +350,32 @@ select.playback-rate-selector.devtools-b
 
 .animation-detail-close-button::before {
   fill: var(--theme-toolbar-photon-icon-color);
   background-image: url(chrome://devtools/skin/images/close.svg);
 }
 
 /* Animated Property List Container */
 .animated-property-list-container {
-  display: flex;
   flex: 1;
-  flex-direction: column;
-  overflow-y: auto;
-  position: relative;
-}
-
-/* Animated Property List Header */
-.animated-property-list-header {
-  display: grid;
-  grid-template-columns: var(--sidebar-width) calc(100% - var(--sidebar-width) - var(--graph-right-offset)) var(--graph-right-offset);
-  line-height: var(--devtools-toolbar-height);
-  min-height: 100%;
-  padding: 0;
-  pointer-events: none;
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
-
-.animated-property-list-header .devtools-toolbar {
-  position: absolute;
-  width: 100%;
-}
-
-/* Keyframes Progress Tick List */
-.keyframes-progress-tick-list {
-  grid-column: 2 / 3;
-  height: 100%;
-  position: absolute;
-  width: 100%;
-}
-
-.keyframes-progress-tick-item {
-  position: absolute;
-}
-
-.keyframes-progress-tick-item.left {
-  border-left: var(--tick-line-style);
-}
-
-.keyframes-progress-tick-item.right {
-  border-right: var(--tick-line-style);
+  overflow: hidden;
+  -moz-user-select: none;
 }
 
 /* Keyframes Progress Bar */
 .keyframes-progress-bar-area {
   background: none;
   grid-column: 2 / 3;
-  padding: 0;
-  height: 100%;
-  position: absolute;
-  width: 100%;
+  pointer-events: none;
+  z-index: 2;
 }
 
 .keyframes-progress-bar {
   height: 100%;
   position: absolute;
-  z-index: 1;
 }
 
 .keyframes-progress-bar::before {
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-top: 5px solid var(--progress-bar-color);
   content: "";
   left: -5px;
@@ -431,67 +388,32 @@ select.playback-rate-selector.devtools-b
   border-left: 1px solid var(--progress-bar-color);
   content: "";
   height: 100%;
   position: absolute;
   top: 0;
   width: 0;
 }
 
-/* Animated Property List */
-.animated-property-list-background {
-  border-left: var(--tick-line-style);
-  border-right: var(--tick-line-style);
-  bottom: 0;
-  left: var(--sidebar-width);
-  min-height: 100%;
-  position: sticky;
-  top: 0;
-  width: calc(100% - var(--sidebar-width) - var(--graph-right-offset));
-}
-
-.animated-property-list-background span {
-  border-left: var(--tick-line-style);
-  height: 100%;
-  left: 50%;
-  position: absolute;
-}
-
-.animated-property-list {
-  flex: 1;
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  position: absolute;
-  top: var(--devtools-toolbar-height);
-  width: 100%;
-}
-
 /* Animated Property Item */
-.animated-property-item {
-  display: flex;
-  height: var(--graph-height);
-}
-
 .animated-property-item:nth-child(2n+1) {
   background-color: var(--animation-even-background-color);
 }
 
 .animated-property-item.unchanged {
   opacity: 0.6;
 }
 
 /* Animated Property Name */
 .animated-property-name {
   align-items: center;
   display: flex;
-  height: 100%;
+  height: var(--graph-height);
   justify-content: flex-end;
   padding-right: 10px;
-  width: var(--sidebar-width);
 }
 
 .animated-property-name.compositor span {
   padding-left: 15px;
   position: relative;
 }
 
 .animated-property-list-container.cssanimation .animated-property-name.compositor {
@@ -520,20 +442,20 @@ select.playback-rate-selector.devtools-b
 }
 
 .animated-property-name.warning span {
   text-decoration: underline dotted;
 }
 
 /* Keyframes Graph */
 .keyframes-graph {
-  padding-top: 3px;
-  height: 100%;
+  grid-column: 2 / 3;
+  height: var(--graph-height);
+  padding-top: 5px;
   position: relative;
-  width: calc(100% - var(--sidebar-width) - var(--graph-right-offset));
 }
 
 .keyframes-graph-path {
   height: 100%;
   width: 100%;
 }
 
 .keyframes-graph-path path {
@@ -667,16 +589,22 @@ select.playback-rate-selector.devtools-b
 }
 
 .tick-label {
   border-left: var(--tick-line-style);
   height: 100%;
   position: absolute;
 }
 
+.animated-property-list-container .tick-label:last-child {
+  border-left: none;
+  border-right: var(--tick-line-style);
+  transform: translateX(calc(-100% + 0.5px));
+}
+
 /* No Animation Panel */
 .animation-error-message {
   overflow: auto;
 }
 
 .animation-error-message > p {
   white-space: pre;
 }