fix(UI): Fix position of menus and tooltips when the seekbar is missing (#8639)

Author: avelad

ui/controls.js

@@ -1213,6 +1213,11 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
       for (const menu of this.menus_) {
         menu.classList.add('shaka-low-position');
       }
+      // Tooltips need to be positioned lower if the seekbar is absent.
+      const controlsButtonPanel = this.controlsButtonPanel_;
+      if (controlsButtonPanel.classList.contains('shaka-tooltips-on')) {
+        controlsButtonPanel.classList.add('shaka-tooltips-low-position');
+      }
     }
   }
 
@@ -1941,10 +1946,18 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
         for (const menu of this.menus_) {
           menu.classList.remove('shaka-low-position');
         }
+        const controlsButtonPanel = this.controlsButtonPanel_;
+        if (controlsButtonPanel.classList.contains('shaka-tooltips-on')) {
+          controlsButtonPanel.classList.remove('shaka-tooltips-low-position');
+        }
       } else {
         for (const menu of this.menus_) {
           menu.classList.add('shaka-low-position');
         }
+        const controlsButtonPanel = this.controlsButtonPanel_;
+        if (controlsButtonPanel.classList.contains('shaka-tooltips-on')) {
+          controlsButtonPanel.classList.add('shaka-tooltips-low-position');
+        }
       }
     }
 

ui/less/overflow_menu.less

@@ -86,11 +86,9 @@
     }
   }
 
-  /* If the seekbar is missing, this is positioned lower.
-   * TODO: Solve with flex layout instead? */
+  // If the seekbar is missing, this is positioned lower.
   &.shaka-low-position {
-    /* TODO(b/116651454): eliminate hard-coded offsets */
-    bottom: 15px;
+    bottom: @material-icons-width;
   }
 }
 

ui/less/tooltip.less

@@ -39,11 +39,13 @@
 .shaka-tooltips-on {
   overflow: visible;
 
-  & > [class*="shaka-tooltip"] {
+  & > .shaka-tooltip {
     position: relative;
 
     /* The :after pseudo-element contains the tooltip */
-    &:hover:after, &:focus-visible:after, &:active:after {
+    &:hover:after,
+    &:focus-visible:after,
+    &:active:after {
       content: attr(aria-label);
 
       /* Override .material-icons-round text styling */
@@ -70,6 +72,17 @@
     }
   }
 
+  // If the seekbar is missing, this is positioned lower.
+  &.shaka-tooltips-low-position {
+    & > .shaka-tooltip {
+      &:hover:after,
+      &:focus-visible:after,
+      &:active:after {
+        bottom: @material-icons-width;
+      }
+    }
+  }
+
   /* Adds an additional attribute for the status in .shaka-tooltip-status */
   & > .shaka-tooltip-status {
     &:hover:after, &:focus-visible:after, &:active:after {