Bug 1714357 - Use a nicer media query for proton context menus. r=Gijs

Differential Revision: https://phabricator.services.mozilla.com/D116736

browser/themes/windows/browser.css

@@ -760,8 +760,7 @@ panel[touchmode] .PanelUI-subView #appMenu-zoom-controls > .subviewbutton-iconic
   margin-top: -4px;
 }
 
-@media (-moz-proton-contextmenus) {
-@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
+@media (-moz-windows-non-native-menus) {
   /* :not([hidden]) to avoid the display: flex unhiding the item. */
   #context-navigation:not([hidden]) {
     /* The Windows 10 version of the navigation area needs the scrollbox's
@@ -848,7 +847,6 @@ panel[touchmode] .PanelUI-subView #appMenu-zoom-controls > .subviewbutton-iconic
     margin-inline: 0;
   }
 }
-}
 
 %include browser-aero.css
 

browser/themes/windows/customizableui/panelUI.css

@@ -31,8 +31,7 @@
   padding-inline-start: 3px;
 }
 
-@media (-moz-proton-contextmenus) {
-@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
+@media (-moz-windows-non-native-menus) {
   /* Prevent the global arrowscrollbox rules from replacing our background. */
   #BMB_bookmarksPopup::part(arrowscrollbox),
   #BMB_bookmarksPopup menupopup[placespopup=true]::part(arrowscrollbox) {
@@ -48,7 +47,6 @@
     margin-top: -8px;
   }
 }
-}
 
 #BMB_bookmarksPopup menupopup[placespopup=true]::part(innerbox) {
   /* emulating MozPlacesPopupArrow but without the arrow */

layout/style/test/chrome/chrome-only-media-queries.js

@@ -18,6 +18,7 @@ const CHROME_ONLY_TOGGLES = [
   "-moz-windows-compositor",
   "-moz-windows-classic",
   "-moz-windows-glass",
+  "-moz-windows-non-native-menus",
   "-moz-swipe-animation-enabled",
   "-moz-gtk-csd-available",
   "-moz-gtk-csd-hide-titlebar-by-default",
@@ -27,7 +28,6 @@ const CHROME_ONLY_TOGGLES = [
   "-moz-gtk-csd-close-button",
   "-moz-gtk-csd-reversed-placement",
   "-moz-proton",
-  "-moz-proton-contextmenus",
   "-moz-proton-modals",
   "-moz-proton-doorhangers",
   "-moz-proton-places-tooltip",

modules/libpref/init/StaticPrefList.yaml

@@ -994,6 +994,15 @@
   mirror: always
   rust: true
 
+# 0 = always native
+# 1 = never native
+# other = default
+- name: browser.display.windows.non_native_menus
+  type: RelaxedAtomicUint32
+  value: 2
+  mirror: always
+  rust: true
+
 # This pref dictates whether or not backplates and background images
 # are to be drawn, when in high-contrast mode:
 #   false: do not draw backplates or render background images
@@ -1191,12 +1200,6 @@
   mirror: always
   rust: true
 
-- name: browser.proton.contextmenus.enabled
-  type: RelaxedAtomicBool
-  value: true
-  mirror: always
-  rust: true
-
 - name: browser.proton.modals.enabled
   type: RelaxedAtomicBool
   value: true

servo/components/style/gecko/media_features.rs

@@ -590,6 +590,23 @@ fn eval_moz_os_version(
     query_value.as_ptr() == os_version
 }
 
+fn eval_moz_windows_non_native_menus(
+    device: &Device,
+    query_value: Option<bool>,
+    _: Option<RangeOrOperator>,
+) -> bool {
+    let use_non_native_menus = match static_prefs::pref!("browser.display.windows.non_native_menus") {
+        0 => false,
+        1 => true,
+        _ => {
+            eval_moz_os_version(device, Some(atom!("windows-win10")), None) &&
+                get_lnf_int_as_bool(bindings::LookAndFeel_IntID::WindowsDefaultTheme as i32)
+        },
+    };
+
+    query_value.map_or(use_non_native_menus, |v| v == use_non_native_menus)
+}
+
 fn get_lnf_int(int_id: i32) -> i32 {
     unsafe { bindings::Gecko_GetLookAndFeelInt(int_id) }
 }
@@ -879,6 +896,12 @@ pub static MEDIA_FEATURES: [MediaFeatureDescription; 62] = [
         keyword_evaluator!(eval_toolbar_prefers_color_scheme, ToolbarPrefersColorScheme),
         ParsingRequirements::CHROME_AND_UA_ONLY,
     ),
+    feature!(
+        atom!("-moz-windows-non-native-menus"),
+        AllowsRanges::No,
+        Evaluator::BoolInteger(eval_moz_windows_non_native_menus),
+        ParsingRequirements::CHROME_AND_UA_ONLY,
+    ),
 
     lnf_int_feature!(atom!("-moz-scrollbar-start-backward"), ScrollArrowStyle, get_scrollbar_start_backward),
     lnf_int_feature!(atom!("-moz-scrollbar-start-forward"), ScrollArrowStyle, get_scrollbar_start_forward),
@@ -903,10 +926,8 @@ pub static MEDIA_FEATURES: [MediaFeatureDescription; 62] = [
     lnf_int_feature!(atom!("-moz-gtk-csd-close-button"), GTKCSDCloseButton),
     lnf_int_feature!(atom!("-moz-gtk-csd-reversed-placement"), GTKCSDReversedPlacement),
     lnf_int_feature!(atom!("-moz-system-dark-theme"), SystemUsesDarkTheme),
-
     bool_pref_feature!(atom!("-moz-proton"), "browser.proton.enabled"),
     bool_pref_feature!(atom!("-moz-proton-modals"), "browser.proton.modals.enabled"),
-    bool_pref_feature!(atom!("-moz-proton-contextmenus"), "browser.proton.contextmenus.enabled"),
     bool_pref_feature!(atom!("-moz-proton-doorhangers"), "browser.proton.doorhangers.enabled"),
     bool_pref_feature!(atom!("-moz-proton-places-tooltip"), "browser.proton.places-tooltip.enabled"),
 ];

toolkit/themes/windows/global/global.css

@@ -21,8 +21,7 @@
 }
 } /** END not Proton **/
 
-@media (-moz-proton-contextmenus) {
-@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
+@media (-moz-proton-non-native-menus) {
   :host,
   :root {
     /* Override some menu color variables for light browser themes. */
@@ -73,7 +72,6 @@
     }
   }
 }
-}
 
 @media (prefers-contrast) {
   :root {

toolkit/themes/windows/global/in-content/common.css

@@ -33,7 +33,7 @@ xul|button > xul|*.button-box {
 }
 }
 
-@media (-moz-proton-contextmenus) and (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
+@media (-moz-proton-non-native-menus) {
   xul|menulist > xul|menupopup {
     background-color: transparent;
     border-color: transparent;

toolkit/themes/windows/global/menu.css

@@ -25,8 +25,7 @@ menucaption {
   -moz-image-region: auto;
 }
 
-@media (-moz-proton-contextmenus) {
-@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
+@media (-moz-windows-non-native-menus) {
   /* For Windows 10, prevent using native OS drawing of certain menu elements,
      especially background colors and shadows. */
   menu, menuitem, menucaption {
@@ -42,7 +41,6 @@ menucaption {
     margin-inline-start: 0 !important; /* need !important to override the other !important below... */
   }
 }
-}
 
 menu[disabled="true"],
 menuitem[disabled="true"],
@@ -52,8 +50,7 @@ menuitem[_moz-menuactive="true"][disabled="true"] {
   text-shadow: none;
 }
 
-@media (-moz-proton-contextmenus) {
-@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
+@media (-moz-windows-non-native-menus) {
   menu[disabled="true"],
   menuitem[disabled="true"],
   menu[_moz-menuactive="true"][disabled="true"],
@@ -68,7 +65,6 @@ menuitem[_moz-menuactive="true"][disabled="true"] {
     background-color: var(--menuitem-disabled-hover-background-color);
   }
 }
-}
 
 @media (-moz-windows-classic) {
   menu[disabled="true"],
@@ -129,13 +125,11 @@ menucaption {
 }
 
 /* Don't leave space for icons on Win10. */
-@media (-moz-proton-contextmenus) {
-@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
+@media (-moz-windows-non-native-menus) {
   .menu-text {
     padding-inline-start: 0 !important;
   }
 }
-}
 
 /* ..... menu arrow box ..... */
 
@@ -149,8 +143,7 @@ menucaption {
 }
 
 /* Override the native menu arrow with a custom one for Win10. */
-@media (-moz-proton-contextmenus) {
-@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
+@media (-moz-windows-non-native-menus) {
   .menu-right {
     appearance: none;
     list-style-image: url("chrome://global/skin/icons/menu-arrow.svg");
@@ -171,7 +164,6 @@ menucaption {
     transform: scaleX(-1);
   }
 }
-}
 
 /* ::::: menu/menuitems in menubar ::::: */
 
@@ -242,15 +234,13 @@ menuitem[_moz-menuactive="true"] {
   color: -moz-menuhovertext;
 }
 
-@media (-moz-proton-contextmenus) {
-@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
+@media (-moz-windows-non-native-menus) {
   menu[_moz-menuactive="true"]:not([disabled="true"]),
   menuitem[_moz-menuactive="true"]:not([disabled="true"]) {
     background-color: var(--menuitem-hover-background-color);
     color: var(--menu-color);
   }
 }
-}
 
 /* ::::: menu/menuitems in menulist popups ::::: */
 
@@ -306,13 +296,11 @@ menulist > menupopup > :is(menuitem, menucaption):not(.menuitem-iconic) > .menu-
   margin: 0 !important;
 }
 
-@media (-moz-proton-contextmenus) {
-@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
+@media (-moz-windows-non-native-menus) {
   menulist > menupopup {
     color: var(--menu-color);
   }
 }
-}
 
 /* ::::: checkbox and radio menuitems ::::: */
 
@@ -346,8 +334,7 @@ menuitem[type="radio"] > .menu-iconic-left > .menu-iconic-icon {
   display: none;
 }
 
-@media (-moz-proton-contextmenus) {
-@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
+@media (-moz-windows-non-native-menus) {
   menupopup[needsgutter] menu:not([icon], .menu-iconic),
   menupopup[needsgutter] menuitem:not([checked="true"], [icon], .menuitem-iconic) {
     padding-inline-start: 36px;
@@ -387,7 +374,6 @@ menuitem[type="radio"] > .menu-iconic-left > .menu-iconic-icon {
     display: initial;
   }
 }
-}
 
 /* ::::: menuseparator ::::: */
 
@@ -406,8 +392,7 @@ menulist > menupopup > menuseparator {
 }
 
 /* On Windows 10, separators get entirely custom rendering. */
-@media (-moz-proton-contextmenus) {
-@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
+@media (-moz-windows-non-native-menus) {
   menuseparator {
     appearance: none;
 
@@ -419,6 +404,5 @@ menulist > menupopup > menuseparator {
     margin: 2px 1em;
   }
 }
-}
 
 %include ../../shared/menu-scrolling.inc.css

toolkit/themes/windows/global/popup.css

@@ -29,8 +29,7 @@ menupopup {
   --nested-margin: -3px;
 }
 
-@media (-moz-proton-contextmenus) {
-@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
+@media (-moz-windows-non-native-menus) {
   menupopup {
     /* Disable the default appearance so we can override the native styling. */
     appearance: none;
@@ -61,7 +60,6 @@ menupopup {
     overflow: clip;
   }
 }
-}
 
 menupopup > menu > menupopup {
  /* align submenus */
@@ -171,7 +169,7 @@ menulist > menupopup {
   min-width: 0;
 }
 
-@media (not (-moz-proton-contextmenus)) or (not ((-moz-windows-default-theme) and (-moz-os-version: windows-win10))) {
+@media not (-moz-windows-non-native-menus) {
   /* For Win10, the popup itself needs to have a transparent background because
      otherwise the background color would appear behind the drop shadow. */
   menulist > menupopup {

widget/nsXPLookAndFeel.cpp

@@ -418,8 +418,8 @@ void nsXPLookAndFeel::OnPrefChanged(const char* aPref, void* aClosure) {
 }
 
 static constexpr nsLiteralCString kMediaQueryPrefs[] = {
+    "browser.display.windows.native_menus"_ns,
     "browser.proton.enabled"_ns,
-    "browser.proton.contextmenus.enabled"_ns,
     "browser.proton.modals.enabled"_ns,
     "browser.proton.doorhangers.enabled"_ns,
     "browser.proton.places-tooltip.enabled"_ns,

xpcom/ds/StaticAtoms.py

@@ -2206,6 +2206,7 @@ STATIC_ATOMS = [
     Atom("_moz_windows_compositor", "-moz-windows-compositor"),
     Atom("_moz_windows_classic", "-moz-windows-classic"),
     Atom("_moz_windows_glass", "-moz-windows-glass"),
+    Atom("_moz_windows_non_native_menus", "-moz-windows-non-native-menus"),
     Atom("_moz_os_version", "-moz-os-version"),
     Atom("_moz_menubar_drag", "-moz-menubar-drag"),
     Atom("_moz_device_pixel_ratio", "-moz-device-pixel-ratio"),
@@ -2220,7 +2221,6 @@ STATIC_ATOMS = [
     Atom("_moz_gtk_csd_close_button", "-moz-gtk-csd-close-button"),
     Atom("_moz_gtk_csd_reversed_placement", "-moz-gtk-csd-reversed-placement"),
     Atom("_moz_proton", "-moz-proton"),
-    Atom("_moz_proton_contextmenus", "-moz-proton-contextmenus"),
     Atom("_moz_proton_doorhangers", "-moz-proton-doorhangers"),
     Atom("_moz_proton_modals", "-moz-proton-modals"),
     Atom("_moz_proton_places_tooltip", "-moz-proton-places-tooltip"),