Support text track selection in video controls

Source/core/css/mediaControls.css

 /*
  * Copyright (C) 2009 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Google Inc.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  * 1. Redistributions of source code must retain the above copyright
  *    notice, this list of conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
@@ skipping 312 matching lines @@
     width: 30px;
     height: 30px;
     line-height: 30px;
     margin-left: -5px;
     margin-right: 9px;
     padding: 0;
     background-color: initial;
     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;
 }
 
 audio::-webkit-media-controls-fullscreen-volume-min-button, video::-webkit-media-controls-fullscreen-volume-min-button {
     display: none;
 }
 
 audio::-webkit-media-controls-fullscreen-volume-max-button, video::-webkit-media-controls-fullscreen-volume-max-button {
     display: none;
@@ skipping 66 matching lines @@
     font-weight: bold;
 }
 
 video::-webkit-media-text-track-container u {
     text-decoration: underline;
 }
 
 video::-webkit-media-text-track-container i {
     font-style: italic;
 }