💄 Add support for the XUL menucaption element in menupopups

dothq · Jan 25, 2024 · 32e2865 · 32e2865
1 parent 71e7210
commit 32e2865
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/components/menus/content/xul-menu-base.js b/components/menus/content/xul-menu-base.js
@@ -51,7 +51,7 @@ var MozMenuItemBaseMixin = (Base) => {
 				label: /** @type {HTMLSpanElement} */ (
 					this.querySelector(".browser-menuitem-label") ||
 						html("span", {
-							class: "browser-menuitem-label",
+							class: "browser-menuitem-label menu-iconic-text",
 							slot: "label"
 						})
 				),

diff --git a/components/menus/content/xul-menuitem.css b/components/menus/content/xul-menuitem.css
@@ -5,6 +5,7 @@
 @import url("chrome://dot/skin/input-base.css");
 
 menuitem,
+menucaption,
 menu {
     --menuitem-default-padding-x: 12px;
     --menuitem-default-padding-y: 8px;
@@ -20,16 +21,19 @@ menu {
 }
 
 menupopup>menuitem:not(:first-of-type),
+menupopup>menucaption:not(:first-of-type),
 menupopup>menu:not(:first-of-type) {
     margin-block-start: 1px;
 }
 
 menupopup>menuitem:not(:last-of-type),
+menupopup>menucaption:not(:last-of-type),
 menupopup>menu:not(:last-of-type) {
     margin-block-end: 1px;
 }
 
 :host(menuitem) .browser-menuitem-container,
+:host(menucaption) .browser-menuitem-container,
 :host(menu) .browser-menuitem-container {
     display: flex;
     align-items: center;
@@ -41,6 +45,7 @@ menupopup>menu:not(:last-of-type) {
 }
 
 :host(menuitem) .browser-menuitem-labels,
+:host(menucaption) .browser-menuitem-labels,
 :host(menu) .browser-menuitem-labels {
     display: flex;
     justify-content: space-between;
@@ -65,6 +70,10 @@ menupopup>menu:not(:last-of-type) {
     font: message-box;
 }
 
+:host(menucaption) ::slotted(.browser-menuitem-label) {
+    font-weight: bold;
+}
+
 ::slotted(.browser-menuitem-accelerator) {
     opacity: 0.5;
 }

diff --git a/components/menus/content/xul-menuitem.js b/components/menus/content/xul-menuitem.js
@@ -8,6 +8,8 @@
 	);
 
 	class MozMenuItem extends MozMenuItemBaseMixin(MozXULElement) {}
-
 	customElements.define("menuitem", MozMenuItem);
+
+	class MozMenuCaption extends MozMenuItemBaseMixin(MozXULElement) {}
+	customElements.define("menucaption", MozMenuCaption);
 }