Add: Theme - Transparent menu #585

__tests__/native_menu.test.scss

@@ -6,12 +6,80 @@
   @include test("simple") {
     @include assert {
       @include output {
-        @include native_menu.NativeMenu {
+        @include native_menu.NativeToolkitMenu {
           @include example;
         }
         @include native_menu.NativeMenuPopup {
           @include example;
         }
+      }
+      @include expect {
+        @supports -moz-bool-pref("widget.macos.native-context-menus") or -moz-bool-pref("widget.gtk.native-context-menus") {
+          @include example;
+        }
+        menupopup:is(#historyMenuPopup, #bookmarksMenuPopup),
+        menupopup:not([placespopup="true"]) {
+          @include example;
+        }
+      }
+    }
+  }
+  @include test("native menu - with windows media") {
+    @include assert {
+      @include output {
+        @include native_menu.NativeMenu(true) {
+          @include example;
+        }
+        @include native_menu.NonNativeMenu(true) {
+          @include example;
+        }
+        @include native_menu.WinNativeMenu(true) {
+          @include example;
+        }
+        @include native_menu.WinNonNativeMenu(true) {
+          @include example;
+        }
+      }
+      @include expect {
+        @media not (-moz-windows-non-native-menus) {
+          @#{media} (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10) {
+            @include example;
+          }
+        }
+        @supports not -moz-bool-pref("userChrome.theme.non_native_menu") {
+          @media (-moz-gtk-csd-available) {
+            @include example;
+          }
+        }
+        @media (-moz-windows-non-native-menus) {
+          @#{media} (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10) {
+            @include example;
+          }
+        }
+        @supports -moz-bool-pref("userChrome.theme.non_native_menu") {
+          @#{media} (-moz-gtk-csd-available) {
+            @include example;
+          }
+        }
+        @media not (-moz-windows-non-native-menus) {
+          @#{media} (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10) {
+            @include example;
+          }
+        }
+        @media (-moz-windows-non-native-menus) {
+          @#{media} (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10) {
+            @include example;
+          }
+        }
+      }
+    }
+  }
+  @include test("native menu - without windows media") {
+    @include assert {
+      @include output {
+        @include native_menu.NativeMenu {
+          @include example;
+        }
         @include native_menu.NonNativeMenu {
           @include example;
         }
@@ -23,12 +91,13 @@
         }
       }
       @include expect {
-        @supports -moz-bool-pref("widget.macos.native-context-menus") or -moz-bool-pref("widget.gtk.native-context-menus") {
+        @media not (-moz-windows-non-native-menus) {
           @include example;
         }
-        menupopup:is(#historyMenuPopup, #bookmarksMenuPopup),
-        menupopup:not([placespopup="true"]) {
-          @include example;
+        @supports not -moz-bool-pref("userChrome.theme.non_native_menu") {
+          @media (-moz-gtk-csd-available) {
+            @include example;
+          }
         }
         @media (-moz-windows-non-native-menus) {
           @include example;

css/leptonChrome.css

@@ -2336,6 +2336,30 @@
     }
   }
 }
+@supports -moz-bool-pref("userChrome.theme.transparent.menu") {
+  .menupopup-arrowscrollbox[part*="content"] {
+    background: color-mix(in srgb, var(--menu-background-color, Menu) 90%, transparent) !important;
+  }
+  @media not (-moz-windows-non-native-menus) {
+    @media (-moz-os-version: windows-win7),
+      (-moz-platform: windows-win7),
+      (-moz-os-version: windows-win8),
+      (-moz-platform: windows-win8),
+      (-moz-os-version: windows-win10),
+      (-moz-platform: windows-win10) {
+      html#main-window #mainPopupSet menupopup:not(.in-menulist) {
+        --menu-background-color: Menu !important;
+      }
+    }
+  }
+  @supports not -moz-bool-pref("userChrome.theme.non_native_menu") {
+    @media (-moz-gtk-csd-available) {
+      html#main-window #mainPopupSet menupopup:not(.in-menulist) {
+        --menu-background-color: Menu !important;
+      }
+    }
+  }
+}
 /*= Proton Theme Mode ========================================================*/
 @supports -moz-bool-pref("userChrome.theme.proton_chrome") {
   /*= Proton Commons ===========================================================*/

src/hidden/_index.scss

@@ -122,7 +122,7 @@
     }
   }
 
-  @include NativeMenu {
+  @include NativeToolkitMenu {
     #context-back,
     #context-forward {
       &[disabled="true"] {

src/icons/layout/_menu_common.scss

@@ -56,7 +56,7 @@ $_initialMenus: selector.append(
 }
 
 @mixin _layout_icon_native_menus() {
-  @include NativeMenu {
+  @include NativeToolkitMenu {
     list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important;
   }
 }

src/theme/_index.scss

@@ -38,6 +38,9 @@
 @include Option("userChrome.theme.transparent.frame") {
   @import "transparent";
 }
+@include Option("userChrome.theme.transparent.menu") {
+  @import "transparent/menu";
+}
 
 /*= Proton Theme Mode ========================================================*/
 @include Option("userChrome.theme.proton_chrome") {

src/utils/_native_menu.scss

@@ -1,7 +1,7 @@
 @use "option" as *;
 @use "os" as *;
 
-@mixin NativeMenu() {
+@mixin NativeToolkitMenu() {
   @include Option("widget.macos.native-context-menus", "widget.gtk.native-context-menus") {
     @content;
   }
@@ -14,25 +14,56 @@
   }
 }
 
-@mixin NonNativeMenu() {
-  @media (-moz-windows-non-native-menus) {
+@mixin _WinMedia($win-media: false) {
+  @if $win-media {
+    @include OS($win) {
+      @content;
+    }
+  }
+  @else {
     @content;
   }
-  @include Option("userChrome.theme.non_native_menu") {
-    @include OS("linux") {
+}
+
+@mixin NativeMenu($win-media: false) {
+  @media not (-moz-windows-non-native-menus) {
+    @include _WinMedia($win-media) {
+      @content;
+    }
+  }
+  @include NotOption("userChrome.theme.non_native_menu") {
+    @include OS($linux) {
       @content;
     }
   }
 }
 
-@mixin WinNativeMenu() {
-  @media not (-moz-windows-non-native-menus) {
-    @content;
+
+@mixin NonNativeMenu($win-media: false) {
+  @media (-moz-windows-non-native-menus) {
+    @include _WinMedia($win-media) {
+      @content;
+    }
+  }
+  @include Option("userChrome.theme.non_native_menu") {
+    @include OS($linux) {
+      @content;
+    }
   }
 }
 
-@mixin WinNonNativeMenu() {
-  @media (-moz-windows-non-native-menus) {
-    @content;
+@mixin WinNativeMenu($win-media: false) {
+  @media not (-moz-windows-non-native-menus) {
+    @include _WinMedia($win-media) {
+      @content;
+    }
+  }
+}
+
+@mixin WinNonNativeMenu($win-media: false) {
+  @media (-moz-windows-non-native-menus) {
+    @include _WinMedia($win-media) {
+      @content;
+    }
   }
 }

user.js

@@ -72,6 +72,7 @@ user_pref("userChrome.rounding.square_tab",           false);
 // user_pref("userChrome.theme.proton_color.dark_blue_accent", true);
 // user_pref("userChrome.theme.monospace",                     true);
 // user_pref("userChrome.theme.transparent.frame",             true);
+// user_pref("userChrome.theme.transparent.menu",              true);
 // user_pref("userChrome.theme.non_native_menu",               true); // only for linux
 // user_pref("userChrome.compatibility.os.win11",              true);