Use outline: none for <video> elements in CrOS Media Apps.

r614513 causes the outer <video> element to take focus when a button
inside the element is clicked. This causes an unwanted focus ring to be
drawn inside the video border, which looks like a graphical glitch.

Workaround the regression in CrOS media apps by adding outline:none for
the <video> elements. Note that upon pressing Tab, focus moves to a
media controls button, which still renders a focus ring.

Bug: 917503
Change-Id: I92c7b1df61e34e8091c8435e950f6b106b2d7516
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1587677Reviewed-by: dstockwell <dstockwell@chromium.org>
Commit-Queue: Trent Apted <tapted@chromium.org>
Cr-Commit-Position: refs/heads/master@{#654797}

ui/file_manager/gallery/css/gallery.css

@@ -173,6 +173,12 @@ paper-ripple {
 .gallery .video-container > .video {
   max-height: 100%;
   max-width: 100%;
+
+  /*
+   * Since r614513, <video> elements take focus on click which causes yellow
+   * lines to appear unless the outline is disabled. See crbug/917503.
+   */
+  outline: none;
 }
 
 /*

ui/file_manager/video_player/css/video_player.css

@@ -67,6 +67,13 @@ body {
 video {
   height: 100%;
   left: 0;
+
+  /*
+   * Since r614513, <video> elements take focus on click which causes yellow
+   * lines to appear unless the outline is disabled. See crbug/917503.
+   */
+  outline: none;
+
   pointer-events: none;
   position: absolute;
   top: 0;