Media Controls: Move new controls to SVG icons

Move the new media controls to SVG icons so they are no longer blurry in
some situations.

BUG=788305

Change-Id: I3f97be618152c2d8cc00653ab8ff63de260c7d13
Reviewed-on: https://chromium-review.googlesource.com/814296
Commit-Queue: Becca Hughes <beccahughes@chromium.org>
Reviewed-by: Mounir Lamouri <mlamouri@chromium.org>
Cr-Commit-Position: refs/heads/master@{#523411}

third_party/WebKit/Source/modules/media_controls/resources/ic_arrow_back.svg

+<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
+</svg>
\ No newline at end of file

third_party/WebKit/Source/modules/media_controls/resources/ic_cast_off.svg

+<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none" opacity=".1"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M21 3H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7v2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm0-4v2c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11z"/>
+</svg>
\ No newline at end of file

third_party/WebKit/Source/modules/media_controls/resources/ic_cast_on.svg

+<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none" opacity=".1"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm18-7H5v1.63c3.96 1.28 7.09 4.41 8.37 8.37H19V7zM1 10v2c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11zm20-7H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7v2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
+</svg>
\ No newline at end of file

third_party/WebKit/Source/modules/media_controls/resources/ic_check_blue.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#4285F4;}
+</style>
+<path class="st0" d="M0,0h24v24H0V0z"/>
+<path class="st1" d="M9,16.2L4.8,12l-1.4,1.4L9,19L21,7l-1.4-1.4L9,16.2z"/>
+</svg>

third_party/WebKit/Source/modules/media_controls/resources/ic_closed_caption.svg

+<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1c0 .55-.45 1-1 1h-3c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1z"/>
+</svg>
\ No newline at end of file

third_party/WebKit/Source/modules/media_controls/resources/ic_download.svg

+<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>
\ No newline at end of file

third_party/WebKit/Source/modules/media_controls/resources/ic_fullscreen.svg

+<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
+</svg>
\ No newline at end of file

third_party/WebKit/Source/modules/media_controls/resources/ic_fullscreen_exit.svg

+<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>
+</svg>
\ No newline at end of file

third_party/WebKit/Source/modules/media_controls/resources/ic_menu.svg

+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<g>
+	<circle cx="12" cy="6" r="2"/>
+	<circle cx="12" cy="12" r="2"/>
+	<circle cx="12" cy="18" r="2"/>
+</g>
+</svg>

third_party/WebKit/Source/modules/media_controls/resources/ic_pause.svg

+<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>
\ No newline at end of file

third_party/WebKit/Source/modules/media_controls/resources/ic_play_arrow.svg

+<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 5v14l11-7z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>
\ No newline at end of file

third_party/WebKit/Source/modules/media_controls/resources/ic_volume_off.svg

+<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>
\ No newline at end of file

third_party/WebKit/Source/modules/media_controls/resources/ic_volume_up.svg

+<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>
\ No newline at end of file

third_party/WebKit/Source/modules/media_controls/resources/modernMediaControls.css

@@ -129,23 +129,17 @@ video::-internal-media-controls-download-button {
 
 audio::-webkit-media-controls-play-button,
 video::-webkit-media-controls-play-button {
-  background-image: -webkit-image-set(
-    url(default_100_percent/modern/ic_play_arrow.png) 1x,
-    url(default_200_percent/modern/ic_play_arrow.png) 2x);
+  background-image: -webkit-image-set(url(ic_play_arrow.svg) 1x);
 }
 
 audio::-webkit-media-controls-mute-button,
 video::-webkit-media-controls-mute-button {
-  background-image: -webkit-image-set(
-    url(default_100_percent/modern/ic_volume_up.png) 1x,
-    url(default_200_percent/modern/ic_volume_up.png) 2x);
+  background-image: -webkit-image-set(url(ic_volume_up.svg) 1x);
 }
 
 audio::-webkit-media-controls-mute-button.muted,
 video::-webkit-media-controls-mute-button.muted {
-  background-image: -webkit-image-set(
-    url(default_100_percent/modern/ic_volume_off.png) 1x,
-    url(default_200_percent/modern/ic_volume_off.png) 2x);
+  background-image: -webkit-image-set(url(ic_volume_off.svg) 1x);
 }
 
 video::-internal-media-remoting-cast-icon {
@@ -156,55 +150,40 @@ video::-internal-media-remoting-cast-icon {
 
 audio::-webkit-media-controls-fullscreen-button,
 video::-webkit-media-controls-fullscreen-button {
-  background-image: -webkit-image-set(
-    url(default_100_percent/modern/ic_fullscreen.png) 1x,
-    url(default_200_percent/modern/ic_fullscreen.png) 2x);
+  background-image: -webkit-image-set(url(ic_fullscreen.svg) 1x);
 }
 
 audio::-webkit-media-controls-fullscreen-button.fullscreen,
 video::-webkit-media-controls-fullscreen-button.fullscreen {
-  background-image: -webkit-image-set(
-    url(default_100_percent/modern/ic_fullscreen_exit.png) 1x,
-    url(default_200_percent/modern/ic_fullscreen_exit.png) 2x);
+  background-image: -webkit-image-set(url(ic_fullscreen_exit.svg) 1x);
 }
 
 audio::-internal-media-controls-cast-button,
 video::-internal-media-controls-cast-button {
-  background-image: -webkit-image-set(
-    url(default_100_percent/legacy/mediaplayer_cast_off.png) 1x);
+  background-image: -webkit-image-set(url(ic_cast_off.svg) 1x);
 }
 
 audio::-internal-media-controls-cast-button.on,
 video::-internal-media-controls-cast-button.on {
-  background-image: -webkit-image-set(
-    url(default_100_percent/legacy/mediaplayer_cast_on.png) 1x);
+  background-image: -webkit-image-set(url(ic_cast_on.svg) 1x);
 }
 
 audio::-webkit-media-controls-toggle-closed-captions-button {
-    display: none;
+  display: none;
 }
 
 video::-webkit-media-controls-toggle-closed-captions-button {
-  background-image: -webkit-image-set(
-    url(default_100_percent/legacy/mediaplayer_closedcaption_disabled.png) 1x);
-}
-
-video::-webkit-media-controls-toggle-closed-captions-button.visible {
-  background-image: -webkit-image-set(
-    url(default_100_percent/legacy/mediaplayer_closedcaption.png) 1x);
+  background-image: -webkit-image-set(url(ic_closed_caption.svg) 1x);
 }
 
 video::-internal-media-controls-download-button,
 audio::-internal-media-controls-download-button {
-  background-image: -webkit-image-set(
-    url(default_100_percent/legacy/mediaplayer_download.png) 1x);
+  background-image: -webkit-image-set(url(ic_download.svg) 1x);
 }
 
 video::-internal-media-controls-overflow-button,
 audio::-internal-media-controls-overflow-button {
-  background-image: -webkit-image-set(
-    url(default_100_percent/modern/ic_menu.png) 1x,
-    url(default_200_percent/modern/ic_menu.png) 2x);
+  background-image: -webkit-image-set(url(ic_menu.svg) 1x);
 }
 
 video::-webkit-media-controls-overlay-play-button {
@@ -230,9 +209,7 @@ input[pseudo="-webkit-media-controls-overlay-play-button" i]::-internal-media-co
   background-size: 24px;
   background-repeat: no-repeat;
   background-position: center center;
-  background-image: -webkit-image-set(
-    url(default_100_percent/modern/ic_play_arrow.png) 1x,
-    url(default_200_percent/modern/ic_play_arrow.png) 2x);
+  background-image: -webkit-image-set(url(ic_play_arrow.svg) 1x);
   background-color: rgba(255, 255, 255, .9);
 
   transition: opacity cubic-bezier(0.4, 0.0, 0.6, 1) 600ms;
@@ -244,9 +221,7 @@ input[pseudo="-webkit-media-controls-overlay-play-button" i]::-internal-media-co
 
 .state-playing input[pseudo="-webkit-media-controls-play-button" i],
 .state-playing input[pseudo="-webkit-media-controls-overlay-play-button" i]::-internal-media-controls-overlay-play-button-internal {
-  background-image: -webkit-image-set(
-    url(default_100_percent/modern/ic_pause.png) 1x,
-    url(default_200_percent/modern/ic_pause.png) 2x);
+  background-image: -webkit-image-set(url(ic_pause.svg) 1x);
 }
 
 /**
@@ -425,9 +400,7 @@ video::-internal-media-controls-text-track-list-header {
   background-size: 18px;
   background-position: 20px center;
   background-repeat: no-repeat;
-  background-image: -webkit-image-set(
-    url(default_100_percent/modern/ic_arrow_back.png) 1x,
-    url(default_200_percent/modern/ic_arrow_back.png) 2x);
+  background-image: -webkit-image-set(url(ic_arrow_back.svg) 1x);
 }
 
 label[pseudo="-internal-media-controls-text-track-list-item"] input {
@@ -439,9 +412,7 @@ label[pseudo="-internal-media-controls-text-track-list-item"] input {
 }
 
 label[pseudo="-internal-media-controls-text-track-list-item"] input:checked {
-  background-image: -webkit-image-set(
-    url(default_100_percent/modern/ic_check_blue.png) 1x,
-    url(default_200_percent/modern/ic_check_blue.png) 2x);
+  background-image: -webkit-image-set(url(ic_check_blue.svg) 1x);
 }
 
 /**