Adding overflow menu to media player

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

 /*
  * Copyright (C) 2009 Apple Inc.  All rights reserved.
  * Copyright (C) 2015 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 400 matching lines @@
 }
 
 video::-internal-media-controls-text-track-list-kind-subtitles {
     -webkit-appearance: -internal-media-subtitles-icon;
     height: 20px;
     width: 20px;
     margin-left: 10px;
     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;
     height: inherit;
     overflow: hidden;
 
     font: 22px sans-serif;
     text-align: center;
     color: rgba(255, 255, 255, 1);
 
@@ skipping 54 matching lines @@
     font-weight: bold;
 }
 
 video::cue(u) {
     text-decoration: underline;
 }
 
 video::cue(i) {
     font-style: italic;
 }