Bug 1363346 - Use SVG context-fill instead of clip-path for animation-fast-track.svg now. r=ntim

devtools/client/themes/animationinspector.css

@@ -467,18 +467,12 @@ body {
   z-index: 1;
 }
 
-.animation-timeline .all-properties .name::after {
-  background-color: var(--theme-content-color3);
-  clip-path: url(images/animation-fast-track.svg#thunderbolt);
-  background-repeat: no-repeat;
-  background-position: center;
-}
-
+.animation-timeline .all-properties .name::after,
 .animation-timeline .some-properties .name::after {
-  background-color: var(--theme-content-color3);
-  clip-path: url(images/animation-fast-track.svg#thunderbolt);
+  -moz-context-properties: fill;
+  fill: var(--theme-content-color3);
+  background-image: url("images/animation-fast-track.svg");
   background-repeat: no-repeat;
-  background-position: center;
 }
 
 .animation-timeline .animation .delay,
@@ -601,8 +595,9 @@ body {
   display: inline-block;
   width: 17px;
   height: 17px;
-  background-color: var(--background-color);
-  clip-path: url(images/animation-fast-track.svg#thunderbolt);
+  -moz-context-properties: fill;
+  fill: var(--background-color);
+  background-image: url("images/animation-fast-track.svg");
   vertical-align: middle;
 }
 

devtools/client/themes/images/animation-fast-track.svg

@@ -1,8 +1,6 @@
 <!-- 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/. -->
-<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
-  <clipPath id="thunderbolt" transform="scale(1.4)">
-    <path d="M5.75 0l-1 5.5 2 .5-3.5 6 1-5-2-.5z"/>
-  </clipPath>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 12" width="16" height="16">
+  <path d="M5.75 0l-1 5.5 2 .5-3.5 6 1-5-2-.5z" fill="context-fill"/>
 </svg>