fix: firefox pip activates when clicked through on settings menu (#1074)

In order to fix to this [issue
](#1069) where in firefox
they have a floating toggle for Pip that interrupt the use of media
chrome menus.

I made a research and we discover that[ Firefox uses their own PiP
system](https://support.mozilla.org/en-US/kb/about-picture-picture-firefox)
adding a toggle overlaying videos and other elements if they dont have
background color to 100% and opacity to 1 this make our menus
unclickeable if they are under this toggle.

For now this can be partially solved adding a css class for background
solid color that only applies into firefox and we created this
[ticket](https://bugzilla.mozilla.org/show_bug.cgi?id=1947825) for get a
better solution from mozilla them since I also discover Youtube had the
same problem but they created an exception that prevent this UX bug for
elements with transparencies from 0.7 or higher for them identifying its
youtube by the domain.

![Screenshot 2025-02-12 at 4 26
29 PM](https://github.com/user-attachments/assets/8d13fb64-dbd2-4f90-a61d-6e6ef1796a6d)

src/js/menu/media-chrome-menu.ts

@@ -80,7 +80,8 @@ template.innerHTML = /*html*/ `
         var(--media-text-content-height, var(--media-control-height, 24px))
         var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif));
       color: var(--media-text-color, var(--media-primary-color, rgb(238 238 238)));
-      background: var(--media-menu-background, var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .8))));
+      --_menu-bg: rgb(20 20 30 / .8);
+      background: var(--media-menu-background, var(--media-control-background, var(--media-secondary-color, var(--_menu-bg))));
       border-radius: var(--media-menu-border-radius);
       border: var(--media-menu-border, none);
       display: var(--media-menu-display, inline-flex);
@@ -103,6 +104,12 @@ template.innerHTML = /*html*/ `
       position: relative;
       bottom: var(--_menu-bottom);
       box-sizing: border-box;
+    } 
+
+    @-moz-document url-prefix() {
+      :host{
+        --_menu-bg: rgb(20 20 30);
+      }
     }
 
     :host([hidden]) {
@@ -463,7 +470,10 @@ class MediaChromeMenu extends globalThis.HTMLElement {
   }
 
   formatMenuItemText(text: string, data?: any) {
-    return (this.constructor as typeof MediaChromeMenu).formatMenuItemText(text, data);
+    return (this.constructor as typeof MediaChromeMenu).formatMenuItemText(
+      text,
+      data
+    );
   }
 
   get anchor() {
@@ -479,7 +489,9 @@ class MediaChromeMenu extends globalThis.HTMLElement {
    */
   get anchorElement() {
     if (this.anchor) {
-      return getDocumentOrShadowRoot(this)?.querySelector<HTMLElement>(`#${this.anchor}`);
+      return getDocumentOrShadowRoot(this)?.querySelector<HTMLElement>(
+        `#${this.anchor}`
+      );
     }
     return null;
   }
@@ -640,9 +652,11 @@ class MediaChromeMenu extends globalThis.HTMLElement {
     // Determine the real bottom value that is used for the max-height calculation.
     // `bottom` could have been overridden externally.
     const computedStyle = getComputedStyle(this);
-    const isBottomCalc = style.getPropertyValue('--_menu-bottom') === computedStyle.bottom;
+    const isBottomCalc =
+      style.getPropertyValue('--_menu-bottom') === computedStyle.bottom;
     const realBottom = isBottomCalc ? bottom : parseFloat(computedStyle.bottom);
-    const maxHeight = boundsRect.height - realBottom - parseFloat(computedStyle.marginBottom);
+    const maxHeight =
+      boundsRect.height - realBottom - parseFloat(computedStyle.marginBottom);
 
     // Safari required directly setting the element style property instead of
     // updating the style node for the styles to be refreshed.
@@ -731,9 +745,7 @@ class MediaChromeMenu extends globalThis.HTMLElement {
     ) as HTMLSlotElement;
     return headerSlot
       .assignedElements({ flatten: true })
-      ?.find(
-        (el) => el.matches('button[part~="back"]')
-      ) as HTMLElement;
+      ?.find((el) => el.matches('button[part~="back"]')) as HTMLElement;
   }
 
   handleSelect(event: MouseEvent | KeyboardEvent): void {

src/js/menu/media-settings-menu.ts

@@ -7,15 +7,22 @@ const template: HTMLTemplateElement = document.createElement('template');
 template.innerHTML = MediaChromeMenu.template.innerHTML + /*html*/`
   <style>
     :host {
+      --_menu-bg: rgb(20 20 30 / .8);
       background: var(--media-settings-menu-background,
-        var(--media-menu-background,
-        var(--media-control-background,
-        var(--media-secondary-color, rgb(20 20 30 / .8)))));
+          var(--media-menu-background,
+            var(--media-control-background,
+              var(--media-secondary-color, var(--_menu-bg)))));
       min-width: var(--media-settings-menu-min-width, 170px);
       border-radius: 2px 2px 0 0;
       overflow: hidden;
     }
 
+    @-moz-document url-prefix() {
+      :host{
+        --_menu-bg: rgb(20 20 30);
+      }
+    }
+
     :host([role="menu"]) {
       ${/* Bottom fix setting menu items for animation when the height expands. */ ''}
       justify-content: end;
@@ -46,7 +53,9 @@ class MediaSettingsMenu extends MediaChromeMenu {
    */
   get anchorElement() {
     if (this.anchor !== 'auto') return super.anchorElement;
-    return getMediaController(this).querySelector<HTMLElement>('media-settings-menu-button');
+    return getMediaController(this).querySelector<HTMLElement>(
+      'media-settings-menu-button'
+    );
   }
 }