Adding overflow menu to media player

third_party/WebKit/Source/core/css/mediaControlsNew.css

Index: third_party/WebKit/Source/core/css/mediaControlsNew.css
diff --git a/third_party/WebKit/Source/core/css/mediaControlsNew.css b/third_party/WebKit/Source/core/css/mediaControlsNew.css
index 1011a2ab91fee8afcf2d1a59f4d39daf3ceb4b9e..c6c0d1fbeafd002fcd28f641813072d5e2710ef5 100644
--- a/third_party/WebKit/Source/core/css/mediaControlsNew.css
+++ b/third_party/WebKit/Source/core/css/mediaControlsNew.css
@@ -418,6 +418,56 @@ video::-internal-media-controls-text-track-list-kind-subtitles {
     vertical-align: middle;
 }
 
+video::-webkit-overflow-menu-button {

[whywhat, 2016/08/19 23:56:55]

ditto wrt internal
we should not add webkit prefixes to anything new AFAIK

[kdsilva, 2016/08/24 05:33:25]

Would you recommend changing the name to Blink? Part of me feels like it should
be webkit for consistency, but if there's new guidelines to avoid using the word
"webkit", I'm happy to change it!

[Timothy Loh, 2016/08/24 06:19:38]

We are not adding new -webkit features (or -blink). See
http://www.chromium.org/blink#vendor-prefixes for out position on vendor
prefixes. This sort of thing is *web-exposed* which means that a web dev can
come along and style your menu button however they like. We don't want to be
adding such non-standard web-exposed features because they are an
interoperability issue between browsers and make it harder for us to make
changes to these features.

This should be -internal and not -webkit. I don't think we actually disallow
usage of -internal selectors right now, but at least compared to -webkit there
shouldn't be any sort of expectation of support.

[kdsilva, 2016/08/26 18:11:02]

Got it, that makes sense. Thanks for the details!

+    -webkit-appearance: media-overflow-menu-button;
+    display: flex;
+    flex: none;
+    box-sizing: border-box;
+    width: 32px;
+    height: 32px;
+    padding: 0px;
+    border-width: 0px;
+    margin-left: 0px;
+    margin-right: 0px;
+    background-color: initial;
+    color: inherit;
+}
+
+video::-internal-media-controls-overflow-menu-list {
+    position: absolute;
+    bottom: 48px;
+    right: 0px;
+    background-color: #fafafa;
+    max-width: 50%;
+    max-height: 250px;
+    min-width: 150px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    white-space: nowrap;
+    font-size: 14px;
+    padding: 8px 0px;
+}
+
+video::-internal-media-controls-overflow-menu-list-item {
+    display: block;
+    color: #424242;
+    line-height: 40px;
+    padding-left: 28px;
+}
+
+video::-internal-media-controls-overflow-menu-list-item-element {
+    display: block;
+    color: #424242;
+    text-align: start;
+    line-height: 40px;
+    padding-right: 16px;
+    text-overflow: ellipsis;
+    display: none;
+}
+video::-internal-media-controls-overflow-menu-list-item:hover {
+    background-color: #e0e0e0;
+}
+
 video::-webkit-media-text-track-container {
     position: relative;
     width: inherit;