Support text track selection in video controls

Source/core/css/mediaControls.css

Index: Source/core/css/mediaControls.css
diff --git a/Source/core/css/mediaControls.css b/Source/core/css/mediaControls.css
index af63bdeb438449e226219451f6bce73362d03926..ef56bbd8a495f8c3cdefe2b99771b1816b88fb36 100644
--- a/Source/core/css/mediaControls.css
+++ b/Source/core/css/mediaControls.css
@@ -330,6 +330,74 @@ video::-webkit-media-controls-toggle-closed-captions-button {
     color: inherit;
 }
 
+video::-webkit-media-controls-closed-captions-track-list-container {
+    -webkit-appearance: media-closed-captions-track-list-container;

[fs, 2015/04/14 12:34:55]

I didn't see an appearance implemented for this - remove?

[srivats, 2015/04/16 23:37:19]

Done.

+    position: absolute;
+    display: block;
+    bottom: 30px;
+    background: rgba(20, 20, 20, 0.8);
+    max-width: 50%;
+    max-height: 250px;
+    right: 0;
+    border-radius: 5px;
+    z-index: 1;

[fs, 2015/04/14 12:34:55]

Is this really needed?

[srivats, 2015/04/16 23:37:19]

This wasn't required. I removed it.

+    overflow-x: hidden;
+    overflow-y: auto;

[fs, 2015/04/14 12:34:56]

Have you tested that this works out as expected (and looks ok - I imagine a
normal scrollbar would look a bit odd in this context...)

[srivats, 2015/04/16 23:37:19]

I had tested it earlier but didn't really know how to customize the scrollbar.
Figured it out now

+    text-overflow: ellipsis;
+    bottom: 100%;
+    margin-bottom: 5px;
+    font-family: Arial, Helvetica, sans-serif;
+    white-space: nowrap;
+}
+
+video::-webkit-media-controls-closed-captions-track-list {
+    -webkit-appearance: media-closed-captions-track-list;
+    display: block;
+    max-height: 250px;

[fs, 2015/04/14 12:34:55]

I take it this is supposed to be "10 items", but how does this interact with the
container (and do we really need both of them?)

[srivats, 2015/04/16 23:37:18]

Removed this one.

+    text-align: center;

[fs, 2015/04/14 12:34:55]

Is this supposed to affect the header items?

[srivats, 2015/04/16 23:37:19]

Yes it's only for the header. I moved it below.

+    padding: 10px;
+    font-weight: bold;
+}
+
+video::-webkit-media-controls-closed-captions-track-list-header {
+    margin: 0;
+    text-shadow: 0 1px 0 black;
+    color: gray;
+    padding: 4px 0 4px 4px;
+    border-bottom: 1px solid #555;
+    font-size: 16px;
+}
+
+video::-webkit-media-controls-closed-captions-track-list-item {
+    display: block;
+    color: white;
+    padding: 4px 0 4px 30px;
+    border-bottom: 1px solid #555;
+    font-size: 16px;

[fs, 2015/04/14 12:34:55]

Looks like font-size could be set higher up and inherited here instead?

[srivats, 2015/04/16 23:37:19]

Done.

+    text-align: left;

[fs, 2015/04/14 12:34:56]

Why not just use the default (which will be 'left' if LTR.)

[srivats, 2015/04/16 23:37:19]

Leaving this unspecified actually right aligned the text because the panel has
text-align set to right.
Even if the text-align:right on panel goes away, we should keep the
text-align:left on the track-list item. This is because we might come across
webpages that have text-align set to center for a video and the track-list-item
will end up inheriting that.

[fs, 2015/04/17 11:54:46]

Ok, suggest to make this "text-align: start" then which would be left or right
depending on direction.

[srivats, 2015/04/21 01:48:55]

Done.

+    position: relative;
+    line-height: 25px;
+}
+
+video::-webkit-media-controls-closed-captions-track-list-item:hover {
+    background-color: rgba(105, 105, 105, 0.8);
+}
+
+video::-webkit-media-controls-closed-captions-track-list-item-input {
+    -webkit-appearance: media-track-selection-checkmark;
+    position: absolute;

[fs, 2015/04/14 12:34:55]

Do we really need to abspos this?

[srivats, 2015/04/16 23:37:18]

I positioned this absolutely so that the track labels aligned correctly. An
alternate approach could be to give all elements a fixed margin-left and style
the selected item to not use a margin-left. Thoughts?

[fs, 2015/04/17 11:54:46]

I'd prefer a non-abspos version.

[srivats, 2015/04/21 01:48:55]

Done.

+    visibility: none;

[fs, 2015/04/14 12:34:55]

s/none/hidden/

[srivats, 2015/04/16 23:37:18]

Changed visibility to hidden and moved the dimensions to here.

+    top: 4px;
+    left: 0;
+    margin: 0;
+}
+
+video::-webkit-media-controls-closed-captions-track-list-item-input:checked {
+    visibility: visible;

[fs, 2015/04/14 12:34:55]

Why not have just the visibility toggle? Do we want the dimensions to change
when hovering?

[srivats, 2015/04/16 23:37:18]

Moved it up.

+    width: 25px;
+    height: 25px;
+}
+
 audio::-webkit-media-controls-fullscreen-volume-slider, video::-webkit-media-controls-fullscreen-volume-slider {
     display: none;
 }