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..0299abd4d99acbb69e0ff9c4ea365b008cab98fa 100644
--- a/third_party/WebKit/Source/core/css/mediaControlsNew.css
+++ b/third_party/WebKit/Source/core/css/mediaControlsNew.css
@@ -418,6 +418,60 @@ video::-internal-media-controls-text-track-list-kind-subtitles {
     vertical-align: middle;
 }
 
+video::-internal-overflow-menu-button {

[kdsilva, 2016/08/29 20:44:13]

I followed the way the closed captions button was styled but looking at this
again, I also need to think about audio only. Is there a smarter way of having
this styling used for audio too other than creating all of these again for
audio::?

[liberato (no reviews please), 2016/08/30 16:42:06]

i think that most of the entries are of the form

video::-internal-something, audio::-internal-something {
...
}

so, one doesn't need to duplicate the entire rule, just add a selector.

+    -webkit-appearance: -internal-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-hidden {
+  display:none;
+}
+
+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;