Bug 1828413 - Use more non-native rendering of menus. r=stransky

This makes our menus closer to GTK4, and depends less on the native menu
rendering etc. Thunderbird already does this to some extent.

Leave the old code behind a pref for now (just in case). Also fix some
code in nsNativeTheme::GetContentState (fixes rendering of radio menu
items).

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

layout/xul/test/test_bug1197913.xhtml

@@ -37,7 +37,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=1197913
   function onDOMMenuItemActive(e) {
     menuitem.removeEventListener("DOMMenuItemActive", onDOMMenuItemActive);
 
-    synthesizeMouse(menuitem, 0, 0, { type: "mousemove" });
+    synthesizeMouse(menuitem, 5, 0, { type: "mousemove" });
     synthesizeMouse(menuitem, -1, 0, { type: "mousemove" });
 
     setTimeout(() => {
@@ -49,8 +49,8 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=1197913
   function onPopupShown(e) {
     menulist.removeEventListener("popupshown", onPopupShown);
     menuitem.addEventListener("DOMMenuItemActive", onDOMMenuItemActive);
-    synthesizeMouse(menuitem, 0, 0, { type: "mousemove" });
-    synthesizeMouse(menuitem, 1, 0, { type: "mousemove" });
+    synthesizeMouse(menuitem, 5, 0, { type: "mousemove" });
+    synthesizeMouse(menuitem, 6, 0, { type: "mousemove" });
   }
 
   function nextTest(e) {

modules/libpref/init/StaticPrefList.yaml

@@ -15111,6 +15111,13 @@
   value: false
   mirror: always
 
+# Whether GTK should use non-native menu styling.
+- name: widget.gtk.non-native-menu-styling
+  type: RelaxedAtomicBool
+  value: true
+  mirror: always
+  rust: true
+
 # The amount of space that the thumb should fill the scrollbar, from zero to
 # one.
 - name: widget.non-native-theme.gtk.scrollbar.thumb-size

servo/components/style/gecko/media_features.rs

@@ -698,7 +698,7 @@ macro_rules! bool_pref_feature {
 /// to support new types in these entries and (2) ensuring that either
 /// nsPresContext::MediaFeatureValuesChanged is called when the value that
 /// would be returned by the evaluator function could change.
-pub static MEDIA_FEATURES: [QueryFeatureDescription; 67] = [
+pub static MEDIA_FEATURES: [QueryFeatureDescription; 68] = [
     feature!(
         atom!("width"),
         AllowsRanges::Yes,
@@ -1014,6 +1014,7 @@ pub static MEDIA_FEATURES: [QueryFeatureDescription; 67] = [
     ),
     lnf_int_feature!(atom!("-moz-system-dark-theme"), SystemUsesDarkTheme),
     lnf_int_feature!(atom!("-moz-panel-animations"), PanelAnimations),
+    bool_pref_feature!(atom!("-moz-gtk-non-native-menus"), "widget.gtk.non-native-menu-styling"),
     // media query for MathML Core's implementation of maction/semantics
     bool_pref_feature!(
         atom!("-moz-mathml-core-maction-and-semantics"),
@@ -1025,8 +1026,5 @@ pub static MEDIA_FEATURES: [QueryFeatureDescription; 67] = [
         "mathml.ms_lquote_rquote_attributes.disabled"
     ),
     // media query for popover attribute
-    bool_pref_feature!(
-        atom!("-moz-popover-enabled"),
-        "dom.element.popover.enabled"
-    ),
+    bool_pref_feature!(atom!("-moz-popover-enabled"), "dom.element.popover.enabled"),
 ];

toolkit/content/tests/chrome/window_panel.xhtml

@@ -15,6 +15,7 @@
   panel, panel::part(content) {
     border: 0;
     margin: 0;
+    padding: 0;
   }
 ]]>
 </html:style>

toolkit/content/tests/chrome/window_popup_attribute.xhtml

@@ -10,8 +10,9 @@
   <script src="popup_trigger.js"></script>
 
 <html:style>
-  menupopup{
+  menupopup {
     margin: 0;
+    --panel-padding: 0;
     -moz-window-input-region-margin: 0;
   }
 </html:style>

toolkit/content/tests/chrome/window_popup_button.xhtml

@@ -10,8 +10,9 @@
 <script src="popup_trigger.js"></script>
 
 <html:style>
-  menupopup{
+  menupopup {
     margin: 0;
+    --panel-padding: 0;
     -moz-window-input-region-margin: 0;
   }
 </html:style>

toolkit/themes/linux/global/menu.css

@@ -27,24 +27,27 @@ menucaption {
   padding: 4px 6px;
   max-width: 42em;
   list-style-image: none;
-
   /* Specify our background to avoid triggering reflows on hover. This is an
    * optimization, as backgrounds don't disable theming on XUL elements, but
    * also papers over bug 1653832. */
   background-color: initial;
 }
 
+@media (-moz-gtk-non-native-menus) {
+  menu,
+  menuitem,
+  menucaption {
+    appearance: none;
+    border-radius: 4px;
+  }
+}
+
 menu:where([_moz-menuactive="true"]),
 menuitem:where([_moz-menuactive="true"]) {
   color: -moz-menuhovertext;
   background-color: -moz-menuhover;
 }
 
-menuitem[customoptionstyling="true"],
-menucaption[customoptionstyling="true"] {
-  appearance: none;
-}
-
 menu:where([disabled="true"]),
 menuitem:where([disabled="true"]),
 menucaption:where([disabled="true"]) {
@@ -73,6 +76,20 @@ menubar > menu[open] {
   background-color: -moz-menuhover;
 }
 
+@media (-moz-gtk-non-native-menus) {
+  menubar > menu {
+    background-color: transparent;
+    border-bottom: .2em solid transparent;
+    padding-bottom: .1em;
+    border-radius: 0;
+  }
+  menubar > menu[open] {
+    background-color: transparent;
+    color: inherit;
+    border-bottom-color: AccentColor;
+  }
+}
+
 menuitem[default="true"],
 menuitem.spell-suggestion,
 menucaption {
@@ -155,7 +172,26 @@ menulist > menupopup > :is(menuitem, menucaption, menu) > .menu-iconic-left {
   display: none;
 }
 
-@media (-moz-non-native-content-theme) {
+menuitem:is([type="checkbox"], [checked="true"]) {
+  appearance: auto;
+  -moz-default-appearance: checkmenuitem;
+}
+
+menuitem[type="radio"] {
+  appearance: auto;
+  -moz-default-appearance: radiomenuitem;
+}
+
+menuseparator {
+  appearance: auto;
+  -moz-default-appearance: menuseparator;
+}
+
+@media (-moz-gtk-non-native-menus) or (-moz-non-native-content-theme) {
+  menuitem:is([type="checkbox"], [checked="true"], [type="radio"]) {
+    appearance: none;
+  }
+
   menuitem:is([type="checkbox"], [checked="true"]) .menu-iconic-icon {
     appearance: auto;
     -moz-default-appearance: checkbox;
@@ -165,21 +201,10 @@ menulist > menupopup > :is(menuitem, menucaption, menu) > .menu-iconic-left {
     appearance: auto;
     -moz-default-appearance: radio;
   }
-}
-
-@media not (-moz-non-native-content-theme) {
-  menuitem:is([type="checkbox"], [checked="true"]) {
-    appearance: auto;
-    -moz-default-appearance: checkmenuitem;
-  }
-
-  menuitem[type="radio"] {
-    appearance: auto;
-    -moz-default-appearance: radiomenuitem;
-  }
 
   menuseparator {
-    appearance: auto;
-    -moz-default-appearance: menuseparator;
+    appearance: none;
+    margin-block: 2px;
+    border-top: 1px solid color-mix(in srgb, ThreeDShadow 50%, transparent 50%);
   }
 }

toolkit/themes/linux/global/popup.css

@@ -24,6 +24,18 @@ panel {
   -moz-window-input-region-margin: var(--panel-shadow-margin);
 }
 
+@media (-moz-gtk-non-native-menus) {
+  menupopup,
+  panel {
+    --panel-padding-block: 3px;
+    --panel-border-radius: 8px;
+  }
+  menupopup {
+    /* Also apply the padding in the inline axis for menus */
+    --panel-padding: var(--panel-padding-block);
+  }
+}
+
 menupopup > menu > menupopup {
   /* Vertically align nested menupopups: the shadow plus the top padding */
   margin-top: calc(-1 * (var(--panel-shadow-margin) + var(--panel-padding-block)));
@@ -71,7 +83,3 @@ menulist > menupopup {
   padding: 0;
   min-width: 0;
 }
-
-menupopup[customoptionstyling="true"] {
-  appearance: none;
-}

widget/gtk/nsNativeThemeGTK.cpp

@@ -197,12 +197,11 @@ bool nsNativeThemeGTK::GetGtkWidgetAndState(StyleAppearance aAppearance,
       aState->active &= aState->inHover;
     } else if (aAppearance == StyleAppearance::Treetwisty ||
                aAppearance == StyleAppearance::Treetwistyopen) {
-      nsTreeBodyFrame* treeBodyFrame = do_QueryFrame(aFrame);
-      if (treeBodyFrame) {
+      if (nsTreeBodyFrame* treeBodyFrame = do_QueryFrame(aFrame)) {
         const mozilla::AtomArray& atoms =
             treeBodyFrame->GetPropertyArrayForCurrentDrawingItem();
-        aState->selected = atoms.Contains((nsStaticAtom*)nsGkAtoms::selected);
-        aState->inHover = atoms.Contains((nsStaticAtom*)nsGkAtoms::hover);
+        aState->selected = atoms.Contains(nsGkAtoms::selected);
+        aState->inHover = atoms.Contains(nsGkAtoms::hover);
       }
     }
 

widget/nsNativeTheme.cpp

@@ -97,7 +97,8 @@ NS_IMPL_ISUPPORTS(nsNativeTheme, nsITimerCallback, nsINamed)
           flags |= ElementState::FOCUSRING;
         }
       }
-      if (CheckBooleanAttr(aFrame, nsGkAtoms::selected)) {
+      if (CheckBooleanAttr(aFrame, nsGkAtoms::selected) ||
+          CheckBooleanAttr(aFrame, nsGkAtoms::checked)) {
         flags |= ElementState::CHECKED;
       }
       break;

xpcom/ds/StaticAtoms.py

@@ -2269,6 +2269,7 @@ STATIC_ATOMS = [
     Atom("_moz_gtk_csd_close_button_position", "-moz-gtk-csd-close-button-position"),
     Atom("_moz_gtk_csd_reversed_placement", "-moz-gtk-csd-reversed-placement"),
     Atom("_moz_gtk_csd_menu_radius", "-moz-gtk-csd-menu-radius"),
+    Atom("_moz_gtk_non_native_menus", "-moz-gtk-non-native-menus"),
     Atom("_moz_content_prefers_color_scheme", "-moz-content-prefers-color-scheme"),
     Atom("_moz_content_preferred_color_scheme", "-moz-content-preferred-color-scheme"),
     Atom("_moz_system_dark_theme", "-moz-system-dark-theme"),