Video Player: Supports multiple files

ui/file_manager/video_player/css/arrow_box.css

+/* Copyright 2014 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+#video-player .arrow-box {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  pointer-events: none;
+  position: absolute;
+  width: 100%;
+  z-index: 100;
+}
+
+#video-player .arrow-box .arrow-spacer {
+  flex-grow: 1;
+}
+
+#video-player[tools] .arrow-box .arrow {
+  pointer-events: auto;
+}
+
+/* The arrow icons are in nested divs so that their opacity can be manipulated
+ * independently from their parent (which can be dimmed when the crop frame
+ * overlaps it) */
+#video-player .arrow div {
+  background-position: center center;
+  background-repeat: no-repeat;
+  height: 193px;
+  opacity: 0;
+  width: 105px;
+}
+
+#video-player[multiple][tools] .arrow-box .arrow div {
+  opacity: 0.25;
+}
+
+#video-player[multiple][tools] .arrow-box .arrow div:hover {
+  opacity: 1;
+}
+
+#video-player:not([first-video]) .arrow.left div {
+  cursor: pointer;
+  background-image: -webkit-image-set(
+      url(../images/100/arrow_left.png) 1x,
+      url(../images/200/arrow_left.png) 2x);
+}
+
+#video-player:not([last-video]) .arrow.right div {
+  cursor: pointer;
+  background-image: -webkit-image-set(
+      url(../images/100/arrow_right.png) 1x,
+      url(../images/200/arrow_right.png) 2x);
+}