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::-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;
     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;
 }