From 714da55bbcff7755e075db25b992d216544fe72f Mon Sep 17 00:00:00 2001 From: Joey Parrish Date: Mon, 10 Feb 2020 14:48:50 -0800 Subject: [PATCH] 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 | 4 ++-- ui/controls.less | 36 ------------------------------------ ui/less/ad_controls.less | 6 +++--- ui/less/general.less | 6 ++++++ ui/less/overflow_menu.less | 4 +--- ui/overflow_menu.js | 3 ++- ui/settings_menu.js | 1 + ui/ui_utils.js | 5 +---- 8 files changed, 16 insertions(+), 49 deletions(-) diff --git a/ui/controls.js b/ui/controls.js index 003b64b33..b6f6f853d 100644 --- a/ui/controls.js +++ b/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 diff --git a/ui/controls.less b/ui/controls.less index 6cd318637..20211703f 100644 --- a/ui/controls.less +++ b/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; -} diff --git a/ui/less/ad_controls.less b/ui/less/ad_controls.less index 8e16e5f19..6e3261ea3 100644 --- a/ui/less/ad_controls.less +++ b/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(); diff --git a/ui/less/general.less b/ui/less/general.less index f329bd446..e1b89b05a 100644 --- a/ui/less/general.less +++ b/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%; diff --git a/ui/less/overflow_menu.less b/ui/less/overflow_menu.less index a5c50a59b..73aa18a26 100644 --- a/ui/less/overflow_menu.less +++ b/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. */ diff --git a/ui/overflow_menu.js b/ui/overflow_menu.js index 321eaabaf..9dd526d97 100644 --- a/ui/overflow_menu.js +++ b/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_); } diff --git a/ui/settings_menu.js b/ui/settings_menu.js index 885006043..4a734d466 100644 --- a/ui/settings_menu.js +++ b/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'); diff --git a/ui/ui_utils.js b/ui/ui_utils.js index 1b24f37aa..0fd0740d4 100644 --- a/ui/ui_utils.js +++ b/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'); } }