Video Player: Supports multiple files

ui/file_manager/video_player/css/arrow_box.css

Index: ui/file_manager/video_player/css/arrow_box.css
diff --git a/ui/file_manager/video_player/css/arrow_box.css b/ui/file_manager/video_player/css/arrow_box.css
new file mode 100644
index 0000000000000000000000000000000000000000..b60131a25657abc7b590efa335c0cc9b6d9a3a11
--- /dev/null
+++ b/ui/file_manager/video_player/css/arrow_box.css
@@ -0,0 +1,55 @@
+/* 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);
+}