Improve paint/composite time for sound editor while sound is playing.

Forcing the playhead onto its own painting layer removes an expensive composite with the waveform. Animate using transforms instead of left prevents layouts of the rest of the page while playing a sound.

src/components/audio-trimmer/audio-trimmer.css

@@ -12,6 +12,9 @@ $hover-scale: 2;
     left: 0;
     width: 100%;
     height: 100%;
+
+    /* Force the browser to paint separately to avoid composite cost with waveform */
+    transform: translateZ(0);
 }
 
 .trim-background {
@@ -51,7 +54,15 @@ $hover-scale: 2;
 }
 
 .playhead {
-    border: 1px solid $motion-primary;
+    /*
+        Even though playhead is just a line, it is 100% width (the width of the waveform)
+        so that we can use transform: translateX() using percentages.
+    */
+    width: 100%;
+    border-left: 1px solid $motion-primary;
+    border-top: none;
+    border-bottom: none;
+    border-right: none;
 }
 
 .start-trim-line {

src/components/audio-trimmer/audio-trimmer.jsx

@@ -35,7 +35,7 @@ const AudioTrimmer = props => (
             <Box
                 className={classNames(styles.trimLine, styles.playhead)}
                 style={{
-                    left: `${100 * props.playhead}%`
+                    transform: `translateX(${100 * props.playhead}%)`
                 }}
             />
         ) : null}

test/unit/components/__snapshots__/sound-editor.test.jsx.snap

@@ -224,7 +224,7 @@ exports[`Sound Editor Component matches snapshot 1`] = `
               "flexWrap": undefined,
               "height": undefined,
               "justifyContent": undefined,
-              "left": "50%",
+              "transform": "translateX(50%)",
               "width": undefined,
             }
           }