fix(ui): Make submenu CSS apply to all submenus

Without listing them individually, the controls CSS now applies the
correct styles to all submenus.  This makes it easier for apps to
subclass SettingsMenu without needing to add explicit CSS to achieve
the same styling as the built-in menus.

Closes shaka-project#2925

Change-Id: Ie1e1536dc4806576d7ed22dfc8feb17abaa72152

ui/controls.js

@@ -85,7 +85,7 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     this.isSeeking_ = false;
 
     /** @private {!Array.<!HTMLElement>} */
-    this.settingsMenus_ = [];
+    this.menus_ = [];
 
     /**
      * Individual controls which, when hovered or tab-focused, will force the
@@ -132,7 +132,7 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
      * @private {shaka.util.Timer}
      */
     this.hideSettingsMenusTimer_ = new shaka.util.Timer(() => {
-      for (const menu of this.settingsMenus_) {
+      for (const menu of this.menus_) {
         shaka.ui.Utils.setDisplay(menu, /* visible= */ false);
       }
     });
@@ -590,7 +590,7 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
    * @export
    */
   anySettingsMenusAreOpen() {
-    return this.settingsMenus_.some(
+    return this.menus_.some(
         (menu) => !menu.classList.contains('shaka-hidden'));
   }
 
@@ -706,15 +706,17 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
 
     this.addControlsButtonPanel_();
 
-    this.settingsMenus_ = Array.from(
+    this.menus_ = Array.from(
         this.videoContainer_.getElementsByClassName('shaka-settings-menu'));
+    this.menus_.push(...Array.from(
+        this.videoContainer_.getElementsByClassName('shaka-overflow-menu')));
 
     if (this.config_.addSeekBar) {
       this.seekBar_ = new shaka.ui.SeekBar(this.bottomControls_, this);
       this.elements_.push(this.seekBar_);
     } else {
       // Settings menus need to be positioned lower if the seekbar is absent.
-      for (const menu of this.settingsMenus_) {
+      for (const menu of this.menus_) {
         menu.classList.add('shaka-low-position');
       }
     }
@@ -1311,11 +1313,11 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
       this.seekBar_.update();
 
       if (this.seekBar_.isShowing()) {
-        for (const menu of this.settingsMenus_) {
+        for (const menu of this.menus_) {
           menu.classList.remove('shaka-low-position');
         }
       } else {
-        for (const menu of this.settingsMenus_) {
+        for (const menu of this.menus_) {
           menu.classList.add('shaka-low-position');
         }
       }
@@ -1372,7 +1374,7 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
    * @private
    */
   keepFocusInMenu_(event) {
-    const openSettingsMenus = this.settingsMenus_.filter(
+    const openSettingsMenus = this.menus_.filter(
         (menu) => !menu.classList.contains('shaka-hidden'));
     const settingsMenu = openSettingsMenus[0];
     if (settingsMenu.childNodes.length) {

ui/less/overflow_menu.less

@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-/* A settings menu, which encompasses the top-level overflow menu and all
- * submenus.  These appear on top of all other controls (Z axis) when the
- * overflow button is clicked. */
+/* The overflow menu and all settings submenus.  These appear on top of all
+ * other controls (Z axis) when the overflow button is clicked. */
+.shaka-overflow-menu,
 .shaka-settings-menu {
   /* It's okay to add a vertical scroll if there are too many items, but
    * horizontal scrolling is not allowed. */
@@ -104,13 +104,8 @@
   color: rgba(0, 0, 0, 0.54);
 }
 
-/* These three submenus have somewhat different margins inside them.
- * TODO: This is all submenus, but not the top-level menu.  Is there a better
- * way to express this? */
-.shaka-resolutions,
-.shaka-audio-languages,
-.shaka-text-languages,
-.shaka-playback-rates {
+/* The submenus have somewhat different margins inside them. */
+.shaka-settings-menu {
   span {
     /* TODO(b/116651454): eliminate hard-coded offsets */
     margin-left: 54px;

ui/overflow_menu.js

@@ -145,7 +145,6 @@ shaka.ui.OverflowMenu = class extends shaka.ui.Element {
     this.overflowMenu_.classList.add('shaka-overflow-menu');
     this.overflowMenu_.classList.add('shaka-no-propagation');
     this.overflowMenu_.classList.add('shaka-show-controls-on-mouse-over');
-    this.overflowMenu_.classList.add('shaka-settings-menu');
     this.overflowMenu_.classList.add('shaka-hidden');
     this.controlsContainer_.appendChild(this.overflowMenu_);
   }