Bug 969592 - Restyle Australis' Bookmarks Menu Popups, r=mak

browser/base/content/browser-places.js

@@ -1094,6 +1094,7 @@ let BookmarkingUI = {
     let viewToolbarMenuitem = getPlacesAnonymousElement("view-toolbar");
     if (viewToolbarMenuitem) {
       // Update View bookmarks toolbar checkbox menuitem.
+      viewToolbarMenuitem.classList.add("subviewbutton");
       let personalToolbar = document.getElementById("PersonalToolbar");
       viewToolbarMenuitem.setAttribute("checked", !personalToolbar.collapsed);
     }
@@ -1106,7 +1107,8 @@ let BookmarkingUI = {
 
     new PlacesMenu(event, "place:folder=BOOKMARKS_MENU", {
       extraClasses: {
-        mainLevel: "subviewbutton"
+        entry: "subviewbutton",
+        footer: "panel-subview-footer"
       },
       insertionPoint: ".panel-subview-footer"
     });
@@ -1449,7 +1451,8 @@ let BookmarkingUI = {
                                                   "panelMenu_bookmarksMenu",
                                                   "panelMenu_bookmarksMenu", {
                                                     extraClasses: {
-                                                      mainLevel: "subviewbutton"
+                                                      entry: "subviewbutton",
+                                                      footer: "panel-subview-footer"
                                                     }
                                                   });
     aEvent.target.removeEventListener("ViewShowing", this);

browser/base/content/browser.xul

@@ -826,7 +826,8 @@
                          placespopup="true"
                          context="placesContext"
                          onpopupshowing="if (!this.parentNode._placesView)
-                                           new PlacesMenu(event, 'place:folder=TOOLBAR');">
+                                           new PlacesMenu(event, 'place:folder=TOOLBAR',
+                                                          PlacesUIUtils.getViewForNode(this.parentNode.parentNode).options);">
                 <menuitem id="BMB_viewBookmarksToolbar"
                           placesanonid="view-toolbar"
                           toolbarId="PersonalToolbar"
@@ -845,7 +846,8 @@
                          placespopup="true"
                          context="placesContext"
                          onpopupshowing="if (!this.parentNode._placesView)
-                                           new PlacesMenu(event, 'place:folder=UNFILED_BOOKMARKS');"/>
+                                           new PlacesMenu(event, 'place:folder=UNFILED_BOOKMARKS',
+                                                          PlacesUIUtils.getViewForNode(this.parentNode.parentNode).options);"/>
             </menu>
             <menuseparator/>
             <!-- Bookmarks menu items will go here -->

browser/components/places/content/browserPlacesViews.js

@@ -268,6 +268,9 @@ PlacesViewBase.prototype = {
       aPopup._emptyMenuitem = document.createElement("menuitem");
       aPopup._emptyMenuitem.setAttribute("label", label);
       aPopup._emptyMenuitem.setAttribute("disabled", true);
+      aPopup._emptyMenuitem.className = "bookmark-item";
+      if (typeof this.options.extraClasses.entry == "string")
+        aPopup._emptyMenuitem.classList.add(this.options.extraClasses.entry);
     }
 
     if (aEmpty) {
@@ -339,6 +342,9 @@ PlacesViewBase.prototype = {
 
         element.appendChild(popup);
         element.className = "menu-iconic bookmark-item";
+        if (typeof this.options.extraClasses.entry == "string") {
+          element.classList.add(this.options.extraClasses.entry);
+        }
 
         this._domNodes.set(aPlacesNode, popup);
       }
@@ -365,11 +371,8 @@ PlacesViewBase.prototype = {
     let before = aBefore || aPopup._endMarker;
 
     if (element.localName == "menuitem" || element.localName == "menu") {
-      let extraClasses = this.options.extraClasses;
-      if (aPopup == this._rootElt && typeof extraClasses.mainLevel == "string") {
-        element.classList.add(extraClasses.mainLevel);
-      } else if (typeof extraClasses.secondaryLevel == "string")
-        element.classList.add(extraClasses.secondaryLevel);
+      if (typeof this.options.extraClasses.entry == "string")
+        element.classList.add(this.options.extraClasses.entry);
     }
 
     aPopup.insertBefore(element, before);
@@ -782,6 +785,12 @@ PlacesViewBase.prototype = {
       // Add the "Open All in Tabs" menuitem.
       aPopup._endOptOpenAllInTabs = document.createElement("menuitem");
       aPopup._endOptOpenAllInTabs.className = "openintabs-menuitem";
+
+      if (typeof this.options.extraClasses.entry == "string")
+        aPopup._endOptOpenAllInTabs.classList.add(this.options.extraClasses.entry);
+      if (typeof this.options.extraClasses.footer == "string")
+        aPopup._endOptOpenAllInTabs.classList.add(this.options.extraClasses.footer);
+
       aPopup._endOptOpenAllInTabs.setAttribute("oncommand",
         "PlacesUIUtils.openContainerNodeInTabs(this.parentNode._placesNode, event, " +
                                                "PlacesUIUtils.getViewForNode(this));");
@@ -1802,10 +1811,9 @@ PlacesPanelMenuView.prototype = {
     }
     else {
       button = document.createElement("toolbarbutton");
-      let className = "bookmark-item";
-      if (typeof this.options.extraClasses.mainLevel == "string")
-        className += " " + this.options.extraClasses.mainLevel;
-      button.className = className;
+      button.className = "bookmark-item";
+      if (typeof this.options.extraClasses.entry == "string")
+        button.classList.add(this.options.extraClasses.entry);
       button.setAttribute("label", aChild.title);
       let icon = aChild.icon;
       if (icon)

browser/themes/linux/customizableui/panelUIOverlay.css

@@ -41,10 +41,16 @@ toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
   visibility: hidden;
 }
 
+menuitem.subviewbutton {
+  -moz-appearance: none !important;
+}
+
 menu.subviewbutton > .menu-right {
   -moz-appearance: none;
   list-style-image: url(chrome://browser/skin/places/bookmarks-menu-arrow.png);
   -moz-image-region: rect(0, 16px, 16px, 0);
+  width: 16px;
+  height: 16px;
 }
 
 menu[disabled="true"].subviewbutton > .menu-right {

browser/themes/osx/customizableui/panelUIOverlay.css

@@ -96,22 +96,22 @@
   display: none;
 }
 
-#BMB_bookmarksPopup > menu,
-#BMB_bookmarksPopup > menuitem:not(.panel-subview-footer) {
+menu.subviewbutton,
+menuitem.subviewbutton:not(.panel-subview-footer) {
   padding-top: 5px;
   padding-bottom: 5px;
 }
 
 /* Override OSX-specific toolkit styles for the bookmarks panel */
-#BMB_bookmarksPopup > menu > .menu-right {
+menu.subviewbutton > .menu-right {
   -moz-margin-end: 0;
 }
-#BMB_bookmarksPopup > menu > .menu-right > image {
+menu.subviewbutton > .menu-right > image {
   -moz-image-region: rect(0, 9px, 10px, 0);
 }
 
 @media (min-resolution: 2dppx) {
-  #BMB_bookmarksPopup > menu > .menu-right > image {
+  menu.subviewbutton > .menu-right > image {
     -moz-image-region: rect(0, 18px, 20px, 0);
   }
 }

browser/themes/shared/customizableui/panelUIOverlay.inc.css

@@ -640,22 +640,36 @@ menuitem.subviewbutton@menuStateActive@,
   box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
 }
 
-#BMB_bookmarksPopup > .subviewbutton {
+#BMB_bookmarksPopup .subviewbutton {
   font: inherit;
   font-weight: normal;
 }
 
-#BMB_bookmarksPopup > .subviewbutton:not([disabled="true"]) {
+#BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
   color: inherit;
 }
 
-#BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
-#BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
+#BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
+#BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
   -moz-appearance: none;
   margin-top: 0;
   margin-bottom: 0;
 }
 
+/* Remove padding on xul:arrowscrollbox to avoid extra padding on footer */
+#BMB_bookmarksPopup arrowscrollbox {
+  padding-bottom: 0px;
+}
+
+#BMB_bookmarksPopup menupopup {
+  padding-top: 2px;
+}
+
+#BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
+  /* Hide bottom separator as the styled footer includes a top border serving the same purpose */
+  display: none;
+}
+
 .PanelUI-subView menuseparator,
 .PanelUI-subView toolbarseparator,
 .cui-widget-panelview menuseparator {
@@ -899,12 +913,11 @@ toolbaritem[overflowedItem=true],
   background: url("chrome://global/skin/menu/shared-menu-check.png") top 7px left 7px / 11px 11px no-repeat transparent;
 }
 
-.PanelUI-subView > menu > .menu-iconic-left,
-.PanelUI-subView > menuitem > .menu-iconic-left {
+.PanelUI-subView .menu-iconic-left {
   -moz-appearance: none;
   -moz-margin-end: 3px;
 }
 
-.PanelUI-subView > menuitem[checked="true"] > .menu-iconic-left {
+.PanelUI-subView menuitem[checked="true"] > .menu-iconic-left {
   visibility: hidden;
 }

browser/themes/windows/customizableui/panelUIOverlay.css

@@ -14,7 +14,30 @@
   padding-right: 12px;
 }
 
-#BMB_bookmarksPopup > menuseparator {
+/* bookmark panel submenus */
+
+#BMB_bookmarksPopup menupopup {
+  -moz-appearance: none;
+  background: transparent;
+  border: none;
+  padding: 6px;
+}
+
+#BMB_bookmarksPopup menupopup > hbox {
+  /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
+  box-shadow: 0 0 4px rgba(0,0,0,0.2);
+  background: #FFF;
+  border: 1px solid rgba(0,0,0,0.25);
+  border-radius: 3.5px;
+  margin-top: -4px;
+}
+
+#BMB_bookmarksPopup .menu-text {
+  color: #000;
+}
+
+/* bookmark panel separator */
+#BMB_bookmarksPopup menuseparator {
   padding-top: 0;
   padding-bottom: 0;
 }