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..00beaacc8a62fc0c2a0ae5f11050a4da87936e0b
--- /dev/null
+++ b/ui/file_manager/video_player/css/arrow_box.css
@@ -0,0 +1,62 @@
+/* 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:not([tools]) .arrow-box .arrow {
+  opacity: 0;

[mtomasz, 2014/06/06 03:41:43]

Why not (1) visibility: hidden, or (2) display: none, or (3) hidden (attribute)?
Setting opacity to 0 and pointer events to none may be unfriendly for chromevox?

[yoshiki, 2014/06/06 08:02:22]

I've just found 'tools'-related feature is controlled by media_controller.js, so
I removed here.

I assume the reason why we don't use either is to animate them.

+  pointer-events: none;
+}
+
+#video-player .arrow-box .arrow-spacer {
+  flex-grow: 1;
+  pointer-events: none;
+}
+
+#video-player[tools] .arrow-box .arrow {
+  opacity: 1;
+  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);
+}