Clean up FIXMEs in LESS code

- Drop unused classes
 - Drop shaka-displayed in favor of shaka-hidden
 - Move shaka-hidden to general.less and fix specificity issue

Change-Id: I9c91da637023607cccd6e7602d9b9ef30994dd82

ui/controls.js

@@ -573,7 +573,7 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
    */
   anySettingsMenusAreOpen() {
     return this.settingsMenus_.some(
-        (menu) => menu.classList.contains('shaka-displayed'));
+        (menu) => !menu.classList.contains('shaka-hidden'));
   }
 
   /** @export */
@@ -1309,7 +1309,7 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
    */
   keepFocusInMenu_(event) {
     const openSettingsMenus = this.settingsMenus_.filter(
-        (menu) => menu.classList.contains('shaka-displayed'));
+        (menu) => !menu.classList.contains('shaka-hidden'));
     const settingsMenu = openSettingsMenus[0];
     if (settingsMenu.childNodes.length) {
       // Get the first and the last displaying child element from the overflow

ui/controls.less

@@ -26,39 +26,3 @@
 @import (css, inline) "https://fonts.googleapis.com/css?family=Roboto";
 // NOTE: Working around google/material-design-icons#958
 @import (css, inline) "https://fonts.googleapis.com/icon?family=Material+Icons+Round";
-
-/* FIXME: These appear to be unused: */
-
-.shaka-cast-receiver-name {
-  display: none;
-  background-color: rgba(0, 0, 0, 0.5);
-  color: white;
-  font-size: 150%;
-  padding: 5px;
-
-  /* dimensions */
-  bottom: 50px;
-  left: 0;
-  right: 0;
-  margin: auto;
-  width: max-content;
-}
-
-.shaka-cast-connected-button {
-  .hidden();
-}
-
-/* FIXME: Why are these here?  Why must they appear at the end? */
-
-/* Add 'button' to hidden and displayed classes
-to make them override display setting previously set in
-.overflowMenu button.
-See https://goo.gl/egXAJY for explanation of
-how CSS cascade rules work. */
-button.shaka-hidden, .shaka-hidden {
-  .hidden();
-}
-
-button.shaka-displayed, .shaka-displayed {
-  display: flex;
-}

ui/less/ad_controls.less

@@ -31,9 +31,9 @@
   }
 
   /* IMA SDK adds their own ad UI into an iframe element.
-  Hide it when shaka controls are enabled, so we can show
-  our own UI. Show it when shaka controls are disabled
-  (and native controls are enabled). */
+   * Hide it when shaka controls are enabled, so we can show
+   * our own UI. Show it when shaka controls are disabled
+   * (and native controls are enabled). */
   iframe {
     .shaka-video-container[shaka-controls="true"] & {
       .hidden();

ui/less/general.less

@@ -30,6 +30,12 @@
   display: none;
 }
 
+.shaka-hidden {
+  // Make this override equally specific classes.
+  // If it's hidden, always hide it!
+  display: none !important;
+}
+
 .fill-container() {
   width: 100%;
   height: 100%;

ui/less/overflow_menu.less

@@ -34,14 +34,12 @@
   max-height: 250px;
   min-width: 180px;
 
-  /* The menu is hidden by default. */
-  .hidden();
-
   /* The menus fade out with the other controls. */
   .show-when-controls-shown();
 
   /* When displayed as a flex container, elements inside will flow in a
    * vertical column. */
+  display: flex;
   flex-direction: column;
 
   /* Where the menu appears. */

ui/overflow_menu.js

@@ -101,7 +101,7 @@ shaka.ui.OverflowMenu = class extends shaka.ui.Element {
     this.eventManager.listen(
         this.controlsContainer_, 'touchstart', (event) => {
         // If the overflow menu is showing, hide it on a touch event
-          if (this.overflowMenu_.classList.contains('shaka-displayed')) {
+          if (!this.overflowMenu_.classList.contains('shaka-hidden')) {
             shaka.ui.Utils.setDisplay(this.overflowMenu_, false);
             // Stop this event from becoming a click event.
             event.preventDefault();
@@ -143,6 +143,7 @@ shaka.ui.OverflowMenu = class extends shaka.ui.Element {
     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_);
   }
 

ui/settings_menu.js

@@ -72,6 +72,7 @@ shaka.ui.SettingsMenu = class extends shaka.ui.Element {
     this.menu.classList.add('shaka-no-propagation');
     this.menu.classList.add('shaka-show-controls-on-mouse-over');
     this.menu.classList.add('shaka-settings-menu');
+    this.menu.classList.add('shaka-hidden');
 
     /** @protected {!HTMLElement}*/
     this.backButton = shaka.util.Dom.createHTMLElement('button');

ui/ui_utils.js

@@ -90,14 +90,11 @@ shaka.ui.Utils = class {
         'Do not use setDisplay with SVG elements!');
 
     if (display) {
-      element.classList.add('shaka-displayed');
       // Removing a non-existent class doesn't throw, so, even if
-      // the element is not hidden, this should be fine. Same for displayed
-      // below.
+      // the element is not hidden, this should be fine.
       element.classList.remove('shaka-hidden');
     } else {
       element.classList.add('shaka-hidden');
-      element.classList.remove('shaka-displayed');
     }
   }