Bug 1450046 - Make popup_* properties apply to the file and context menus. draft
authorTim Nguyen <ntim.bugs@gmail.com>
Sun, 01 Apr 2018 15:01:34 +0200
changeset 775894 25b98128c6cc18628c8078d5fd33b2ef8abbd4c9
parent 775892 2ad47d44c723f02d4e9d9973de61df98856751b2
push id104741
push userbmo:ntim.bugs@gmail.com
push dateSun, 01 Apr 2018 13:02:04 +0000
bugs1450046
milestone61.0a1
Bug 1450046 - Make popup_* properties apply to the file and context menus. MozReview-Commit-ID: 8nef05f78YX
browser/modules/ThemeVariableMap.jsm
browser/themes/shared/browser.inc.css
--- a/browser/modules/ThemeVariableMap.jsm
+++ b/browser/modules/ThemeVariableMap.jsm
@@ -110,9 +110,33 @@ const ThemeVariableMap = [
     lwtProperty: "popup_border"
   }],
   ["--autocomplete-popup-highlight-background", {
     lwtProperty: "popup_highlight"
   }],
   ["--autocomplete-popup-highlight-color", {
     lwtProperty: "popup_highlight_text"
   }],
+  ["--lwt-menu-background", {
+    lwtProperty: "popup",
+    processColor(rgbaChannels, element) {
+      if (!rgbaChannels) {
+        element.removeAttribute("lwt-popup");
+      } else {
+        element.setAttribute("lwt-popup", "true");
+      }
+      let {r, g, b, a} = rgbaChannels;
+      return `rgba(${r}, ${g}, ${b}, ${a})`;
+    }
+  }],
+  ["--lwt-menu-text", {
+    lwtProperty: "popup_text",
+  }],
+  ["--lwt-menu-border", {
+    lwtProperty: "popup_border",
+  }],
+  ["--lwt-menu-highlight-background", {
+    lwtProperty: "popup_highlight",
+  }],
+  ["--lwt-menu-highlight-text", {
+    lwtProperty: "popup_highlight_text",
+  }],
 ];
--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@@ -16,16 +16,86 @@
 :root[extradragspace][tabsintitlebar]:not([inFullscreen]) {
   --space-above-tabbar: 8px;
 }
 
 :root:-moz-lwtheme {
   transition: @themeTransition@;
 }
 
+/* Menu theming */
+
+:root[lwt-popup] {
+  --lwt-menu-background: Menu;
+  --lwt-menu-text: MenuText;
+  --lwt-menu-border: ThreeDShadow;
+  --lwt-menu-highlight-background: Highlight;
+  --lwt-menu-highlight-text: HighlightText;
+}
+
+:root[lwt-popup] menupopup:not(#BMB_bookmarksPopup) {
+  -moz-appearance: none;
+  -moz-font-smoothing-background-color: var(--lwt-menu-background);
+  background-color: var(--lwt-menu-background);
+  color: var(--lwt-menu-text);
+  border: 1px solid var(--lwt-menu-border);
+  border-radius: 2px;
+}
+
+:root[lwt-popup] menupopup:not(#BMB_bookmarksPopup) menu,
+:root[lwt-popup] menupopup:not(#BMB_bookmarksPopup) menuitem,
+:root[lwt-popup] menupopup:not(#BMB_bookmarksPopup) menucaption {
+  color: inherit;
+  -moz-appearance: none;
+}
+
+:root[lwt-popup] menupopup:not(#BMB_bookmarksPopup) menuseparator {
+  -moz-appearance: none;
+  border-bottom: 1px solid var(--panel-separator-color);
+}
+
+:root[lwt-popup] menupopup:not(#BMB_bookmarksPopup) menu[_moz-menuactive="true"]:not([disabled="true"]),
+:root[lwt-popup] menupopup:not(#BMB_bookmarksPopup) menuitem[_moz-menuactive="true"]:not([disabled="true"]) {
+  background-color: var(--lwt-menu-highlight-background);
+  color: var(--lwt-menu-highlight-text);
+}
+
+:root[lwt-popup] menupopup:not(#BMB_bookmarksPopup) menu[disabled="true"],
+:root[lwt-popup] menupopup:not(#BMB_bookmarksPopup) menuitem[disabled="true"] {
+  background: none;
+  opacity: 0.4;
+  -moz-appearance: none;
+  -moz-font-smoothing-background-color: transparent;
+}
+
+/* menu,
+menuitem,
+menucaption{}
+
+menulist > menupopup > menuseparator,
+.menulist-menupopup > menuseparator,
+menuseparator{}
+
+menu[_moz-menuactive="true"],
+menuitem[_moz-menuactive="true"]{}
+
+menu[disabled="true"],
+menuitem[disabled="true"],
+menu[_moz-menuactive="true"][disabled="true"],
+menuitem[_moz-menuactive="true"][disabled="true"]{}
+
+:not(menulist) > menupopup > menuitem[checked="true"],
+:not(menulist) > menupopup > menuitem[selected="true"]{}
+
+menulist > menupopup > menuitem,
+menulist > menupopup > menucaption,
+menulist > menupopup > menu{}
+
+.menu-right{} */
+
 /* Toolbar / content area border */
 
 #navigator-toolbox::after {
   content: "";
   display: -moz-box;
   border-bottom: 1px solid var(--toolbox-border-bottom-color);
 }