Backed out changeset 64f788053239 (bug 1625720) for mochitest failures in ests/chrome/test_panel.xhtml. CLOSED TREE

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

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

toolkit/content/widgets.css

@@ -14,6 +14,7 @@
 @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,6 +7,10 @@
 // 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();
@@ -58,21 +62,61 @@
       // 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.constructor.fragment);
+        super.shadowRoot.appendChild(this.fragment);
         this.initShadowDOM();
       }
       return super.shadowRoot;
     }
 
-    static get markup() {
+    get fragment() {
+      if (!this.constructor.hasOwnProperty("_fragment")) {
+        this.constructor._fragment = MozXULElement.parseXULToFragment(
+          this.markup
+        );
+      }
+      return document.importNode(this.constructor._fragment, true);
+    }
+
+    get markup() {
       return `
-        <html:link rel="stylesheet" href="chrome://global/skin/popup.css"/>
-        <arrowscrollbox flex="1" orient="vertical" smoothscroll="false">
-          <html:slot/>
+        <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>
         </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,12 +68,7 @@
       }
 
       if (!this.isArrowPanel) {
-        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);
+        this.shadowRoot.appendChild(document.createElement("slot"));
       } else {
         this.shadowRoot.appendChild(this.constructor.fragment);
       }

toolkit/themes/linux/global/popup.css

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

toolkit/themes/osx/global/menu.css

@@ -165,8 +165,32 @@ menuseparator {
   padding: 1px 0;
 }
 
-/* align menupopup submenus */
+/* Scroll buttons */
 
-menupopup > menu > menupopup {
-  margin-top: -4px;
+.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;
 }

toolkit/themes/osx/global/popup.css

@@ -4,73 +4,39 @@
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-:host {
+menupopup,
+panel:not([type="arrow"]) {
   -moz-appearance: menupopup;
   -moz-font-smoothing-background-color: -moz-mac-menupopup;
   background-color: Menu;
   color: MenuText;
 }
 
-:host(panel[titlebar]) {
-  -moz-appearance: none; /* to disable rounded corners */
+menupopup > menu > menupopup {
+  margin-top: -4px;
 }
 
-/* Scroll box */
-
-:host(:not(.in-menulist)) arrowscrollbox {
+.menupopup-arrowscrollbox {
   padding: 4px 0;
 }
 
-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;
+panel[titlebar] {
+  -moz-appearance: none; /* to disable rounded corners */
 }
 
 /* rules for popups associated with menulists */
 
-:host(.in-menulist) {
+menulist > menupopup {
   min-width: 0;
   padding: 4px 0;
 }
 
-:host(.in-menulist:not([position])) {
+menulist > menupopup:not([position]) {
   margin-inline-start: -13px;
   margin-top: -2px;
 }
 
-:host([customoptionstyling="true"]) {
+menupopup[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,10 +262,3 @@ 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,7 +4,10 @@
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-:host {
+/* ::::: menupopup ::::: */
+
+menupopup,
+panel:not([type="arrow"]) {
   border: 1px solid ThreeDShadow;
   padding: 0;
   min-width: 1px;
@@ -12,23 +15,20 @@
   color: MenuText;
 }
 
-:host(menupopup) {
+menupopup {
   -moz-appearance: menupopup;
 }
 
+menupopup > menu > menupopup {
+ /* align submenus */
+  margin-inline-start: -3px;
+  margin-top: -3px;
+}
+
 /* rules for popups associated with menulists */
 
-:host(.in-menulist) {
+menulist > menupopup {
   -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;
-}