Bug 1625720 - Scope popup.css to menupopup and panel custom elements. r=dao

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

browser/components/places/content/places-menupopup.js

@@ -32,14 +32,14 @@
       }
     }
 
-    get markup() {
+    static get markup() {
       return `
-      <html:link rel="stylesheet" href="chrome://global/content/widgets.css" />
+      <html:link rel="stylesheet" href="chrome://global/skin/popup.css"/>
       <hbox flex="1" part="innerbox">
         <vbox part="drop-indicator-bar" hidden="true">
           <image part="drop-indicator"/>
         </vbox>
-        <arrowscrollbox class="menupopup-arrowscrollbox" flex="1" orient="vertical"
+        <arrowscrollbox flex="1" orient="vertical"
                         exportparts="scrollbox: arrowscrollbox-scrollbox"
                         smoothscroll="false" part="arrowscrollbox">
           <html:slot/>
@@ -589,9 +589,9 @@
       };
     }
 
-    get markup() {
+    static get markup() {
       return `
-      <html:link rel="stylesheet" href="chrome://global/content/widgets.css"/>
+      <html:link rel="stylesheet" href="chrome://global/skin/popup.css"/>
       <html:link rel="stylesheet" href="chrome://global/skin/arrowpanel.css"/>
       <vbox class="panel-arrowcontainer" flex="1">
         <box class="panel-arrowbox" part="arrowbox">
@@ -601,9 +601,8 @@
           <vbox part="drop-indicator-bar" hidden="true">
             <image part="drop-indicator"/>
           </vbox>
-          <arrowscrollbox class="menupopup-arrowscrollbox" flex="1"
-                          orient="vertical" smoothscroll="false"
-                          part="arrowscrollbox">
+          <arrowscrollbox flex="1" orient="vertical"
+                          smoothscroll="false" part="arrowscrollbox">
             <html:slot/>
           </arrowscrollbox>
         </box>

toolkit/content/widgets.css

@@ -14,7 +14,6 @@
 @import url("chrome://global/skin/menu.css");
 @import url("chrome://global/skin/notification.css");
 @import url("chrome://global/skin/numberinput.css");
-@import url("chrome://global/skin/popup.css");
 @import url("chrome://global/skin/popupnotification.css");
 @import url("chrome://global/skin/radio.css");
 @import url("chrome://global/skin/richlistbox.css");

toolkit/content/widgets/menupopup.js

@@ -7,10 +7,6 @@
 // This is loaded into all XUL windows. Wrap in a block to prevent
 // leaking to window scope.
 {
-  const { AppConstants } = ChromeUtils.import(
-    "resource://gre/modules/AppConstants.jsm"
-  );
-
   class MozMenuPopup extends MozElements.MozElementMixin(XULPopupElement) {
     constructor() {
       super();
@@ -62,61 +58,21 @@
       // We generate shadow DOM lazily on popupshowing event to avoid extra load
       // on the system during browser startup.
       if (!super.shadowRoot.firstElementChild) {
-        super.shadowRoot.appendChild(this.fragment);
+        super.shadowRoot.appendChild(this.constructor.fragment);
         this.initShadowDOM();
       }
       return super.shadowRoot;
     }
 
-    get fragment() {
-      if (!this.constructor.hasOwnProperty("_fragment")) {
-        this.constructor._fragment = MozXULElement.parseXULToFragment(
-          this.markup
-        );
-      }
-      return document.importNode(this.constructor._fragment, true);
-    }
-
-    get markup() {
+    static get markup() {
       return `
-        <html:link rel="stylesheet" href="chrome://global/skin/global.css"/>
-        <html:style>${this.styles}</html:style>
-        <arrowscrollbox class="menupopup-arrowscrollbox"
-                        flex="1"
-                        orient="vertical"
-                        smoothscroll="false">
-          <html:slot></html:slot>
+        <html:link rel="stylesheet" href="chrome://global/skin/popup.css"/>
+        <arrowscrollbox flex="1" orient="vertical" smoothscroll="false">
+          <html:slot/>
         </arrowscrollbox>
       `;
     }
 
-    get styles() {
-      let s = `
-        :host(.in-menulist) arrowscrollbox::part(scrollbutton-up),
-        :host(.in-menulist) arrowscrollbox::part(scrollbutton-down) {
-          display: none;
-        }
-        :host(.in-menulist) arrowscrollbox::part(scrollbox) {
-          overflow: auto;
-        }
-      `;
-
-      switch (AppConstants.platform) {
-        case "macosx":
-          s += `
-            :host(.in-menulist) arrowscrollbox {
-              padding: 0;
-            }
-          `;
-          break;
-
-        default:
-          break;
-      }
-
-      return s;
-    }
-
     get scrollBox() {
       if (!this._scrollBox) {
         this._scrollBox = this.shadowRoot.querySelector("arrowscrollbox");

toolkit/content/widgets/panel.js

@@ -68,7 +68,12 @@
       }
 
       if (!this.isArrowPanel) {
-        this.shadowRoot.appendChild(document.createElement("slot"));
+        const stylesheet = document.createElement("link");
+        stylesheet.rel = "stylesheet";
+        stylesheet.href = "chrome://global/skin/popup.css";
+
+        const slot = document.createElement("slot");
+        this.shadowRoot.append(stylesheet, slot);
       } else {
         this.shadowRoot.appendChild(this.constructor.fragment);
       }

toolkit/content/xul.css

@@ -225,6 +225,16 @@ panel {
   -moz-box-orient: vertical;
 }
 
+menupopup,
+panel:not([type="arrow"]) {
+  /* This should be in popup.css, but the stylesheet loads after the custom
+     element initializes which is too late for widget code. */
+%ifdef XP_WIN
+  background: Menu;
+  border: 1px solid ThreeDShadow;
+%endif
+}
+
 menupopup,
 panel,
 tooltip {

toolkit/themes/linux/global/popup.css

@@ -4,10 +4,7 @@
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-/* ::::: menupopup ::::: */
-
-menupopup,
-panel:not([type="arrow"]) {
+:host {
   -moz-appearance: menupopup;
   min-width: 1px;
   color: MenuText;
@@ -15,11 +12,20 @@ panel:not([type="arrow"]) {
 
 /* rules for popups associated with menulists */
 
-menulist > menupopup {
+:host(.in-menulist) {
   padding: 0;
   min-width: 0;
 }
 
-menupopup[customoptionstyling="true"] {
+:host(.in-menulist) arrowscrollbox::part(scrollbutton-up),
+:host(.in-menulist) arrowscrollbox::part(scrollbutton-down) {
+  display: none;
+}
+
+:host(.in-menulist) arrowscrollbox::part(scrollbox) {
+  overflow: auto;
+}
+
+:host([customoptionstyling="true"]) {
   -moz-appearance: none;
 }

toolkit/themes/osx/global/menu.css

@@ -165,32 +165,8 @@ menuseparator {
   padding: 1px 0;
 }
 
-/* Scroll buttons */
+/* align menupopup submenus */
 
-.menupopup-arrowscrollbox:not(:-moz-lwtheme)::part(scrollbutton-up),
-.menupopup-arrowscrollbox:not(:-moz-lwtheme)::part(scrollbutton-down) {
-  position: relative;
-  /* Here we're using a little magic.
-   * The arrow button is supposed to overlay the scrollbox, blocking
-   * everything under it from reaching the screen. However, the menu background
-   * is slightly transparent, so how can we block something completely without
-   * messing up the transparency? It's easy: The native theming of the
-   * "menuitem" appearance uses CGContextClearRect before drawing, which
-   * clears everything under it.
-   * Without help from native theming this effect wouldn't be achievable.
-   */
-  -moz-appearance: menuitem;
-}
-
-.menupopup-arrowscrollbox:not(:-moz-lwtheme)::part(scrollbutton-up) {
-  margin-bottom: -16px;
-}
-
-.menupopup-arrowscrollbox:not(:-moz-lwtheme)::part(scrollbutton-down) {
-  margin-top: -16px;
-}
-
-.menupopup-arrowscrollbox:not(:-moz-lwtheme)[scrolledtostart="true"]::part(scrollbutton-up),
-.menupopup-arrowscrollbox:not(:-moz-lwtheme)[scrolledtoend="true"]::part(scrollbutton-down) {
-  visibility: collapse;
+menupopup > menu > menupopup {
+  margin-top: -4px;
 }

toolkit/themes/osx/global/popup.css

@@ -4,39 +4,73 @@
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-menupopup,
-panel:not([type="arrow"]) {
+:host {
   -moz-appearance: menupopup;
   -moz-font-smoothing-background-color: -moz-mac-menupopup;
   background-color: Menu;
   color: MenuText;
 }
 
-menupopup > menu > menupopup {
-  margin-top: -4px;
+:host(panel[titlebar]) {
+  -moz-appearance: none; /* to disable rounded corners */
 }
 
-.menupopup-arrowscrollbox {
+/* Scroll box */
+
+:host(:not(.in-menulist)) arrowscrollbox {
   padding: 4px 0;
 }
 
-panel[titlebar] {
-  -moz-appearance: none; /* to disable rounded corners */
+arrowscrollbox:not(:-moz-lwtheme)::part(scrollbutton-up),
+arrowscrollbox:not(:-moz-lwtheme)::part(scrollbutton-down) {
+  position: relative;
+  /* Here we're using a little magic.
+   * The arrow button is supposed to overlay the scrollbox, blocking
+   * everything under it from reaching the screen. However, the menu background
+   * is slightly transparent, so how can we block something completely without
+   * messing up the transparency? It's easy: The native theming of the
+   * "menuitem" appearance uses CGContextClearRect before drawing, which
+   * clears everything under it.
+   * Without help from native theming this effect wouldn't be achievable.
+   */
+  -moz-appearance: menuitem;
+}
+
+arrowscrollbox:not(:-moz-lwtheme)::part(scrollbutton-up) {
+  margin-bottom: -16px;
+}
+
+arrowscrollbox:not(:-moz-lwtheme)::part(scrollbutton-down) {
+  margin-top: -16px;
+}
+
+arrowscrollbox:not(:-moz-lwtheme)[scrolledtostart="true"]::part(scrollbutton-up),
+arrowscrollbox:not(:-moz-lwtheme)[scrolledtoend="true"]::part(scrollbutton-down) {
+  visibility: collapse;
 }
 
 /* rules for popups associated with menulists */
 
-menulist > menupopup {
+:host(.in-menulist) {
   min-width: 0;
   padding: 4px 0;
 }
 
-menulist > menupopup:not([position]) {
+:host(.in-menulist:not([position])) {
   margin-inline-start: -13px;
   margin-top: -2px;
 }
 
-menupopup[customoptionstyling="true"] {
+:host([customoptionstyling="true"]) {
   -moz-appearance: none;
   padding-block: 0;
 }
+
+:host(.in-menulist) arrowscrollbox::part(scrollbutton-up),
+:host(.in-menulist) arrowscrollbox::part(scrollbutton-down) {
+  display: none;
+}
+
+:host(.in-menulist) arrowscrollbox::part(scrollbox) {
+  overflow: auto;
+}

toolkit/themes/windows/global/menu.css

@@ -262,3 +262,10 @@ menulist > menupopup > menuseparator {
   border-top: 1px solid #000000;
   border-bottom: none;
 }
+
+/* align menupopup submenus */
+
+menupopup > menu > menupopup {
+  margin-inline-start: -3px;
+  margin-top: -3px;
+}

toolkit/themes/windows/global/popup.css

@@ -4,10 +4,7 @@
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-/* ::::: menupopup ::::: */
-
-menupopup,
-panel:not([type="arrow"]) {
+:host {
   border: 1px solid ThreeDShadow;
   padding: 0;
   min-width: 1px;
@@ -15,20 +12,23 @@ panel:not([type="arrow"]) {
   color: MenuText;
 }
 
-menupopup {
+:host(menupopup) {
   -moz-appearance: menupopup;
 }
 
-menupopup > menu > menupopup {
- /* align submenus */
-  margin-inline-start: -3px;
-  margin-top: -3px;
-}
-
 /* rules for popups associated with menulists */
 
-menulist > menupopup {
+:host(.in-menulist) {
   -moz-appearance: none;
   min-width: 0;
   background-color: -moz-Field;
 }
+
+:host(.in-menulist) arrowscrollbox::part(scrollbutton-up),
+:host(.in-menulist) arrowscrollbox::part(scrollbutton-down) {
+  display: none;
+}
+
+:host(.in-menulist) arrowscrollbox::part(scrollbox) {
+  overflow: auto;
+}