[Australis] Bug 963095: adjust toolbar widget panel styling. r=Gijs
authorMike de Boer <mdeboer@mozilla.com>
Wed, 29 Jan 2014 12:20:40 +0100
changeset 181794 c175d9ca4939fa464e8ed42a28740dad44c7abcd
parent 181793 c15e29ead09233aad3cbacc50412deef3371ae48
child 181795 dc13e23057af9b16adb921b73d847a72d46dd141
push id3343
push userffxbld
push dateMon, 17 Mar 2014 21:55:32 +0000
treeherdermozilla-beta@2f7d3415f79f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs963095
milestone29.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
[Australis] Bug 963095: adjust toolbar widget panel styling. r=Gijs
browser/base/content/browser-places.js
browser/base/content/browser.xul
browser/components/customizableui/content/panelUI.inc.xul
browser/components/customizableui/content/panelUI.js
browser/components/places/content/browserPlacesViews.js
browser/themes/osx/customizableui/panelUIOverlay.css
browser/themes/shared/customizableui/panelUIOverlay.inc.css
browser/themes/windows/customizableui/panelUIOverlay.css
--- a/browser/base/content/browser-places.js
+++ b/browser/base/content/browser-places.js
@@ -1047,16 +1047,29 @@ let BookmarkingUI = {
     let viewToolbarMenuitem = getPlacesAnonymousElement("view-toolbar");
     if (viewToolbarMenuitem) {
       // Update View bookmarks toolbar checkbox menuitem.
       let personalToolbar = document.getElementById("PersonalToolbar");
       viewToolbarMenuitem.setAttribute("checked", !personalToolbar.collapsed);
     }
   },
 
+  attachPlacesView: function(event, node) {
+    // If the view is already there, bail out early.
+    if (node.parentNode._placesView)
+      return;
+
+    new PlacesMenu(event, "place:folder=BOOKMARKS_MENU", {
+      extraClasses: {
+        mainLevel: "subviewbutton"
+      },
+      insertionPoint: ".panel-subview-footer"
+    });
+  },
+
   /**
    * Handles star styling based on page proxy state changes.
    */
   onPageProxyStateChanged: function BUI_onPageProxyStateChanged(aState) {
     if (!this.star) {
       return;
     }
 
@@ -1234,17 +1247,21 @@ let BookmarkingUI = {
     let personalToolbar = document.getElementById("PersonalToolbar");
     if (personalToolbar.collapsed)
       viewToolbar.removeAttribute("checked");
     else
       viewToolbar.setAttribute("checked", "true");
     // Setup the Places view.
     this._panelMenuView = new PlacesPanelMenuView("place:folder=BOOKMARKS_MENU",
                                                   "panelMenu_bookmarksMenu",
-                                                  "panelMenu_bookmarksMenu");
+                                                  "panelMenu_bookmarksMenu", {
+                                                    extraClasses: {
+                                                      mainLevel: "subviewbutton"
+                                                    }
+                                                  });
   },
 
   onPanelMenuViewHiding: function BUI_onViewHiding(aEvent) {
     this._panelMenuView.uninit();
     delete this._panelMenuView;
   },
 
   onPanelMenuViewCommand: function BUI_onPanelMenuViewCommand(aEvent, aView) {
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -748,58 +748,59 @@
                        anchor="dropmarker"
                        ondragenter="PlacesMenuDNDHandler.onDragEnter(event);"
                        ondragover="PlacesMenuDNDHandler.onDragOver(event);"
                        ondragleave="PlacesMenuDNDHandler.onDragLeave(event);"
                        ondrop="PlacesMenuDNDHandler.onDrop(event);"
                        cui-areatype="toolbar"
                        oncommand="BookmarkingUI.onCommand(event);">
           <menupopup id="BMB_bookmarksPopup"
+                     class="cui-widget-panel cui-widget-panelview cui-widget-panelWithFooter"
                      placespopup="true"
                      context="placesContext"
                      openInTabs="children"
                      oncommand="BookmarksEventHandler.onCommand(event, this.parentNode._placesView);"
                      onclick="BookmarksEventHandler.onClick(event, this.parentNode._placesView);"
                      onpopupshowing="BookmarkingUI.onPopupShowing(event);
-                                     if (!this.parentNode._placesView)
-                                       new PlacesMenu(event, 'place:folder=BOOKMARKS_MENU');"
+                                     BookmarkingUI.attachPlacesView(event, this);"
                      tooltip="bhTooltip" popupsinherittooltip="true">
-            <menuitem id="BMB_bookmarksShowAll"
-                      label="&showAllBookmarks2.label;"
-                      command="Browser:ShowAllBookmarks"
-                      key="manBookmarkKb"/>
             <menuitem id="BMB_viewBookmarksSidebar"
+                      class="subviewbutton"
                       label="&viewBookmarksSidebar2.label;"
                       type="checkbox"
                       oncommand="toggleSidebar('viewBookmarksSidebar');">
               <observes element="viewBookmarksSidebar" attribute="checked"/>
             </menuitem>
             <menuseparator/>
             <menuitem id="BMB_subscribeToPageMenuitem"
 #ifndef XP_MACOSX
-                      class="menuitem-iconic"
+                      class="menuitem-iconic subviewbutton"
+#else
+                      class="subviewbutton"
 #endif
                       label="&subscribeToPageMenuitem.label;"
                       oncommand="return FeedHandler.subscribeToFeed(null, event);"
                       onclick="checkForMiddleClick(this, event);"
                       observes="singleFeedMenuitemState"/>
             <menu id="BMB_subscribeToPageMenupopup"
 #ifndef XP_MACOSX
-                  class="menu-iconic"
+                  class="menu-iconic subviewbutton"
+#else
+                  class="subviewbutton"
 #endif
                   label="&subscribeToPageMenupopup.label;"
                   observes="multipleFeedsMenuState">
               <menupopup id="BMB_subscribeToPageSubmenuMenupopup"
                          onpopupshowing="return FeedHandler.buildFeedList(event.target);"
                          oncommand="return FeedHandler.subscribeToFeed(null, event);"
                          onclick="checkForMiddleClick(this, event);"/>
             </menu>
             <menuseparator/>
             <menu id="BMB_bookmarksToolbar"
-                  class="menu-iconic bookmark-item"
+                  class="menu-iconic bookmark-item subviewbutton"
                   label="&personalbarCmd.label;"
                   container="true">
               <menupopup id="BMB_bookmarksToolbarPopup"
                          placespopup="true"
                          context="placesContext"
                          onpopupshowing="if (!this.parentNode._placesView)
                                            new PlacesMenu(event, 'place:folder=TOOLBAR');">
                 <menuitem id="BMB_viewBookmarksToolbar"
@@ -808,27 +809,32 @@
                           type="checkbox"
                           oncommand="onViewToolbarCommand(event)"
                           label="&viewBookmarksToolbar.label;"/>
                 <menuseparator/>
                 <!-- Bookmarks toolbar items -->
               </menupopup>
             </menu>
             <menu id="BMB_unsortedBookmarks"
-                  class="menu-iconic bookmark-item"
+                  class="menu-iconic bookmark-item subviewbutton"
                   label="&bookmarksMenuButton.unsorted.label;"
                   container="true">
               <menupopup id="BMB_unsortedBookmarksPopup"
                          placespopup="true"
                          context="placesContext"
                          onpopupshowing="if (!this.parentNode._placesView)
                                            new PlacesMenu(event, 'place:folder=UNFILED_BOOKMARKS');"/>
             </menu>
             <menuseparator/>
-            <!-- Bookmarks menu items -->
+            <!-- Bookmarks menu items will go here -->
+            <menuitem id="BMB_bookmarksShowAll"
+                      class="subviewbutton panel-subview-footer"
+                      label="&showAllBookmarks2.label;"
+                      command="Browser:ShowAllBookmarks"
+                      key="manBookmarkKb"/>
           </menupopup>
         </toolbarbutton>
 
         <!-- This is a placeholder for the Downloads Indicator.  It is visible
              during the customization of the toolbar, in the palette, and before
              the Downloads Indicator overlay is loaded. -->
         <toolbarbutton id="downloads-button" class="toolbarbutton-1 chromeclass-toolbar-additional"
                        oncommand="DownloadsIndicatorView.onCommand(event);"
--- a/browser/components/customizableui/content/panelUI.inc.xul
+++ b/browser/components/customizableui/content/panelUI.inc.xul
@@ -80,21 +80,16 @@
     <panelview id="PanelUI-bookmarks" flex="1" class="PanelUI-subView">
       <label value="&bookmarksMenu.label;" class="panel-subview-header"/>
       <toolbarbutton id="panelMenuBookmarkThisPage"
                      label="&bookmarkThisPageCmd.label;"
                      class="subviewbutton"
                      command="Browser:AddBookmarkAs"
                      onclick="PanelUI.hide();"/>
       <toolbarseparator/>
-      <toolbarbutton id="panelMenu_showAllBookmarks"
-                     label="&showAllBookmarks2.label;"
-                     class="subviewbutton"
-                     command="Browser:ShowAllBookmarks"
-                     onclick="PanelUI.hide();"/>
       <toolbarbutton id="panelMenu_viewBookmarksSidebar"
                      label="&viewBookmarksSidebar2.label;"
                      class="subviewbutton"
                      oncommand="toggleSidebar('viewBookmarksSidebar'); PanelUI.hide();">
         <observes element="viewBookmarksSidebar" attribute="checked"/>
       </toolbarbutton>
       <toolbarbutton id="panelMenu_viewBookmarksToolbar"
                      label="&viewBookmarksToolbar.label;"
@@ -115,19 +110,23 @@
       <toolbaritem id="panelMenu_bookmarksMenu"
                    flex="1"
                    orient="vertical"
                    smoothscroll="false"
                    onclick="if (event.button == 1) BookmarkingUI.onPanelMenuViewCommand(event, this._placesView);"
                    oncommand="BookmarkingUI.onPanelMenuViewCommand(event, this._placesView);"
                    flatList="true"
                    tooltip="bhTooltip">
-        <!-- bookmarks menu items -->
+        <!-- bookmarks menu items will go here -->
       </toolbaritem>
-
+      <toolbarbutton id="panelMenu_showAllBookmarks"
+                     label="&showAllBookmarks2.label;"
+                     class="subviewbutton panel-subview-footer"
+                     command="Browser:ShowAllBookmarks"
+                     onclick="PanelUI.hide();"/>
     </panelview>
 
     <panelview id="PanelUI-socialapi" flex="1"/>
 
     <panelview id="PanelUI-feeds" flex="1" oncommand="FeedHandler.subscribeToFeed(null, event);">
       <label value="&feedsMenu.label;" class="panel-subview-header"/>
     </panelview>
 
--- a/browser/components/customizableui/content/panelUI.js
+++ b/browser/components/customizableui/content/panelUI.js
@@ -291,26 +291,32 @@ const PanelUI = {
       viewNode.dispatchEvent(evt);
       if (evt.defaultPrevented) {
         return;
       }
 
       let tempPanel = document.createElement("panel");
       tempPanel.setAttribute("type", "arrow");
       tempPanel.setAttribute("id", "customizationui-widget-panel");
+      tempPanel.setAttribute("class", "cui-widget-panel");
       tempPanel.setAttribute("level", "top");
       document.getElementById(CustomizableUI.AREA_NAVBAR).appendChild(tempPanel);
+      // If the view has a footer, set a convenience class on the panel.
+      tempPanel.classList.toggle("cui-widget-panelWithFooter",
+                                 viewNode.querySelector(".panel-subview-footer"));
 
       let multiView = document.createElement("panelmultiview");
       tempPanel.appendChild(multiView);
       multiView.setMainView(viewNode);
+      viewNode.classList.add("cui-widget-panelview");
       CustomizableUI.addPanelCloseListeners(tempPanel);
 
       let panelRemover = function() {
         tempPanel.removeEventListener("popuphidden", panelRemover);
+        viewNode.classList.remove("cui-widget-panelview");
         CustomizableUI.removePanelCloseListeners(tempPanel);
         let evt = new CustomEvent("ViewHiding", {detail: viewNode});
         viewNode.dispatchEvent(evt);
         aAnchor.open = false;
 
         this.multiView.appendChild(viewNode);
         tempPanel.parentElement.removeChild(tempPanel);
       }.bind(this);
--- a/browser/components/places/content/browserPlacesViews.js
+++ b/browser/components/places/content/browserPlacesViews.js
@@ -4,18 +4,19 @@
 
 Components.utils.import("resource://gre/modules/XPCOMUtils.jsm");
 Components.utils.import("resource://gre/modules/Services.jsm");
 
 /**
  * The base view implements everything that's common to the toolbar and
  * menu views.
  */
-function PlacesViewBase(aPlace) {
+function PlacesViewBase(aPlace, aOptions) {
   this.place = aPlace;
+  this.options = aOptions;
   this._controller = new PlacesController(this);
   this._viewElt.controllers.appendController(this._controller);
 }
 
 PlacesViewBase.prototype = {
   // The xul element that holds the entire view.
   _viewElt: null,
   get viewElt() this._viewElt,
@@ -79,16 +80,29 @@ PlacesViewBase.prototype = {
     else {
       this._resultNode = null;
       delete this._domNodes;
     }
 
     return val;
   },
 
+  _options: null,
+  get options() this._options,
+  set options(val) {
+    if (!val)
+      val = {};
+
+    if (!("extraClasses" in val))
+      val.extraClasses = {};
+    this._options = val;
+
+    return val;
+  },
+
   /**
    * Gets the DOM node used for the given places node.
    *
    * @param aPlacesNode
    *        a places result node.
    * @throws if there is no DOM node set for aPlacesNode.
    */
   _getDOMNodeForPlacesNode:
@@ -347,16 +361,25 @@ PlacesViewBase.prototype = {
 
     return element;
   },
 
   _insertNewItemToPopup:
   function PVB__insertNewItemToPopup(aNewChild, aPopup, aBefore) {
     let element = this._createMenuItemForPlacesNode(aNewChild);
     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);
+    }
+
     aPopup.insertBefore(element, before);
     return element;
   },
 
   _setLivemarkSiteURIMenuItem:
   function PVB__setLivemarkSiteURIMenuItem(aPopup) {
     let livemarkInfo = this.controller.getCachedLivemarkInfo(aPopup._placesNode);
     let siteUrl = livemarkInfo && livemarkInfo.siteURI ?
@@ -777,19 +800,26 @@ PlacesViewBase.prototype = {
     if (aPopup._startMarker)
       return;
 
     // _startMarker is an hidden menuseparator that lives before places nodes.
     aPopup._startMarker = document.createElement("menuseparator");
     aPopup._startMarker.hidden = true;
     aPopup.insertBefore(aPopup._startMarker, aPopup.firstChild);
 
-    // _endMarker is an hidden menuseparator that lives after places nodes.
-    aPopup._endMarker = document.createElement("menuseparator");
-    aPopup._endMarker.hidden = true;
+    // _endMarker is a DOM node that lives after places nodes, specified with
+    // the 'insertionPoint' option or will be a hidden menuseparator.
+    let node = ("insertionPoint" in this.options) ?
+               aPopup.querySelector(this.options.insertionPoint) : null;
+    if (node) {
+      aPopup._endMarker = node;
+    } else {
+      aPopup._endMarker = document.createElement("menuseparator");
+      aPopup._endMarker.hidden = true;
+    }
     aPopup.appendChild(aPopup._endMarker);
 
     // Move the markers to the right position.
     let firstNonStaticNodeFound = false;
     for (let i = 0; i < aPopup.childNodes.length; i++) {
       let child = aPopup.childNodes[i];
       // Menus that have static content at the end, but are initially empty,
       // use a special "builder" attribute to figure out where to start
@@ -1665,34 +1695,34 @@ PlacesToolbar.prototype = {
     }
   }
 };
 
 /**
  * View for Places menus.  This object should be created during the first
  * popupshowing that's dispatched on the menu.
  */
-function PlacesMenu(aPopupShowingEvent, aPlace) {
+function PlacesMenu(aPopupShowingEvent, aPlace, aOptions) {
   this._rootElt = aPopupShowingEvent.target; // <menupopup>
   this._viewElt = this._rootElt.parentNode;   // <menu>
   this._viewElt._placesView = this;
   this._addEventListeners(this._rootElt, ["popupshowing", "popuphidden"], true);
   this._addEventListeners(window, ["unload"], false);
 
 #ifdef XP_MACOSX
   // Must walk up to support views in sub-menus, like Bookmarks Toolbar menu.
   for (let elt = this._viewElt.parentNode; elt; elt = elt.parentNode) {
     if (elt.localName == "menubar") {
       this._nativeView = true;
       break;
     }
   }
 #endif
 
-  PlacesViewBase.call(this, aPlace);
+  PlacesViewBase.call(this, aPlace, aOptions);
   this._onPopupShowing(aPopupShowingEvent);
 }
 
 PlacesMenu.prototype = {
   __proto__: PlacesViewBase.prototype,
 
   QueryInterface: function PM_QueryInterface(aIID) {
     if (aIID.equals(Ci.nsIDOMEventListener))
@@ -1745,22 +1775,23 @@ PlacesMenu.prototype = {
     // The autoopened attribute is set for folders which have been
     // automatically opened when dragged over.  Turn off this attribute
     // when the folder closes because it is no longer applicable.
     popup.removeAttribute("autoopened");
     popup.removeAttribute("dragstart");
   }
 };
 
-function PlacesPanelMenuView(aPlace, aViewId, aRootId) {
+function PlacesPanelMenuView(aPlace, aViewId, aRootId, aOptions) {
   this._viewElt = document.getElementById(aViewId);
   this._rootElt = document.getElementById(aRootId);
   this._viewElt._placesView = this;
+  this.options = aOptions;
 
-  PlacesViewBase.call(this, aPlace);
+  PlacesViewBase.call(this, aPlace, aOptions);
 }
 
 PlacesPanelMenuView.prototype = {
   __proto__: PlacesViewBase.prototype,
 
   QueryInterface: function PAMV_QueryInterface(aIID) {
     return PlacesViewBase.prototype.QueryInterface.apply(this, arguments);
   },
@@ -1775,17 +1806,20 @@ PlacesPanelMenuView.prototype = {
 
     let type = aChild.type;
     let button;
     if (type == Ci.nsINavHistoryResultNode.RESULT_TYPE_SEPARATOR) {
       button = document.createElement("toolbarseparator");
     }
     else {
       button = document.createElement("toolbarbutton");
-      button.className = "bookmark-item subviewbutton";
+      let className = "bookmark-item";
+      if (typeof this.options.extraClasses.mainLevel == "string")
+        className += " " + this.options.extraClasses.mainLevel;
+      button.className = className;
       button.setAttribute("label", aChild.title);
       let icon = aChild.icon;
       if (icon)
         button.setAttribute("image", icon);
 
       if (PlacesUtils.containerTypes.indexOf(type) != -1) {
         button.setAttribute("container", "true");
 
--- a/browser/themes/osx/customizableui/panelUIOverlay.css
+++ b/browser/themes/osx/customizableui/panelUIOverlay.css
@@ -38,22 +38,21 @@
 
 .panelUI-grid .toolbarbutton-1 {
   margin-right: 0;
   margin-left: 0;
   margin-bottom: 0;
 }
 
 #BMB_bookmarksPopup > menu,
-#BMB_bookmarksPopup > menuitem {
+#BMB_bookmarksPopup > menuitem:not(.panel-subview-footer) {
   padding-top: 5px;
   padding-bottom: 5px;
 }
 
 /* Override OSX-specific toolkit styles for the bookmarks panel */
-#BMB_bookmarksPopup > menuitem > .menu-accel-container,
 #BMB_bookmarksPopup > menu > .menu-right {
   -moz-margin-end: 0;
 }
 
 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
   -moz-margin-start: 4px;
 }
--- a/browser/themes/shared/customizableui/panelUIOverlay.inc.css
+++ b/browser/themes/shared/customizableui/panelUIOverlay.inc.css
@@ -45,16 +45,25 @@
   margin: -4px -4px 4px;
   box-shadow: 0 -1px 0 hsla(210,4%,10%,.08) inset;
   color: #797c80;
 }
 
 .subviewbutton.panel-subview-footer {
   margin: 4px -4px -4px;
   box-shadow: 0 1px 0 hsla(210,4%,10%,.08) inset;
+  border-radius: 0;
+}
+
+.cui-widget-panelview .panel-subview-header {
+  display: none;
+}
+
+.cui-widget-panelview .subviewbutton.panel-subview-footer {
+  margin: 4px 0 0;
 }
 
 #PanelUI-mainView {
   display: flex;
   flex-direction: column;
 }
 
 #app-extension-point-end > #PanelUI-menu-button {
@@ -71,18 +80,22 @@
   display: none;
 }
 #PanelUI-popup > arrowscrollbox > scrollbox {
   overflow: visible;
 }
 
 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
   overflow: hidden;
+  box-shadow: none;
+}
+
+#PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent,
+.cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box {
   padding: 0;
-  box-shadow: none;
 }
 
 .panelUI-grid .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
   margin: 2px 0 0;
   text-align: center;
   -moz-hyphens: auto;
 }
@@ -93,22 +106,30 @@
 }
 
 #PanelUI-contents,
 .panel-mainview:not([panelid="PanelUI-popup"]) {
   max-width: @menuPanelWidth@;
 }
 
 panelview:not([mainview]) .toolbarbutton-text,
-#customizationui-widget-panel toolbarbutton > .toolbarbutton-text {
+.cui-widget-panel toolbarbutton > .toolbarbutton-text {
   text-align: start;
   -moz-padding-start: 8px;
   display: -moz-box;
 }
 
+.cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
+  padding: 4px 0;
+}
+
+.cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
+  padding-bottom: 0;
+}
+
 #PanelUI-contents {
   display: block;
   flex: auto;
   margin-left: auto;
   margin-right: auto;
   padding: .5em 0;
   max-width: @menuPanelWidth@;
 }
@@ -361,55 +382,57 @@ toolbarpaletteitem[place="palette"] > to
 }
 
 #customization-palette .toolbarbutton-multiline-text,
 #customization-palette .toolbarbutton-text {
   display: none;
 }
 
 panelview .toolbarbutton-1,
-panelview .subviewbutton,
+.subviewbutton,
 .widget-overflow-list .toolbarbutton-1,
 .customizationmode-button,
 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
 #edit-controls@inAnyPanel@ > toolbarbutton,
-#zoom-controls@inAnyPanel@ > toolbarbutton,
-#BMB_bookmarksPopup > menu,
-#BMB_bookmarksPopup > menuitem {
+#zoom-controls@inAnyPanel@ > toolbarbutton {
   -moz-appearance: none;
   padding: 2px 6px;
   background-color: hsla(210,4%,10%,0);
   border-radius: 2px;
   border: 1px solid;
   border-color: hsla(210,4%,10%,0);
   transition-property: background-color, border-color;
   transition-duration: 150ms;
 }
 
-.PanelUI-subView .subviewbutton.panel-subview-footer {
+.subviewbutton.panel-subview-footer {
   border-radius: 0;
   border: none;
 }
 
-.PanelUI-subView .subviewbutton.panel-subview-footer > .toolbarbutton-text {
+.subviewbutton.panel-subview-footer > .toolbarbutton-text,
+.subviewbutton.panel-subview-footer > .menu-text {
   -moz-padding-start: 0;
   text-align: center;
 }
 
-.PanelUI-subView .subviewbutton:not(.panel-subview-footer) {
+.subviewbutton:not(.panel-subview-footer) {
   margin: 2px 0;
 }
 
-.PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text {
+.subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
+/* Bookmark items need a more specific selector. */
+.PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
+.PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
   font-size: 1.1em;
 }
 
-.PanelUI-subView .subviewbutton.bookmark-item {
-  font-weight: normal;
-  color: inherit;
+.cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
+  margin-left: 4px;
+  margin-right: 4px;
 }
 
 .PanelUI-subView menuseparator,
 .PanelUI-subView toolbarseparator {
   -moz-margin-start: -5px;
   -moz-margin-end: -4px;
 }
 
@@ -418,53 +441,47 @@ panelview .toolbarbutton-1,
   margin-top: 6px;
 }
 
 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
   border: 0;
 }
 
 panelview .toolbarbutton-1@buttonStateHover@,
-panelview .subviewbutton@buttonStateHover@,
+.subviewbutton@buttonStateHover@,
 .widget-overflow-list .toolbarbutton-1@buttonStateHover@,
 .customizationmode-button,
 #edit-controls@inAnyPanel@ > toolbarbutton@buttonStateHover@,
-#zoom-controls@inAnyPanel@ > toolbarbutton@buttonStateHover@,
-#BMB_bookmarksPopup > menu@buttonStateHover@,
-#BMB_bookmarksPopup > menuitem@buttonStateHover@ {
+#zoom-controls@inAnyPanel@ > toolbarbutton@buttonStateHover@ {
   background-color: hsla(210,4%,10%,.08);
   border-color: hsla(210,4%,10%,.1);
 }
 
-
 #edit-controls@inAnyPanel@@buttonStateHover@,
 #zoom-controls@inAnyPanel@@buttonStateHover@ {
   border-color: hsla(210,4%,10%,.1);
 }
 
 panelview .toolbarbutton-1@buttonStateActive@,
-panelview .subviewbutton@buttonStateActive@,
+.subviewbutton@buttonStateActive@,
 .customizationmode-button@buttonStateActive@,
 .widget-overflow-list .toolbarbutton-1@buttonStateActive@,
 #edit-controls@inAnyPanel@ > toolbarbutton@buttonStateActive@,
-#zoom-controls@inAnyPanel@ > toolbarbutton@buttonStateActive@,
-#BMB_bookmarksPopup > menu@buttonStateActive@,
-#BMB_bookmarksPopup > menuitem@buttonStateActive@ {
+#zoom-controls@inAnyPanel@ > toolbarbutton@buttonStateActive@ {
   background-color: hsla(210,4%,10%,.15);
   border-color: hsla(210,4%,10%,.15);
   box-shadow: 0 1px 0 0 hsla(210,4%,10%,.05) inset;
 }
 
-#BMB_bookmarksPopup > menu,
-#BMB_bookmarksPopup > menuitem {
+#BMB_bookmarksPopup > .subviewbutton {
   font: inherit;
+  font-weight: normal;
 }
 
-#BMB_bookmarksPopup > menu:not([disabled="true"]),
-#BMB_bookmarksPopup > menuitem: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 {
   -moz-appearance: none;
   margin-top: 0;
   margin-bottom: 0;
@@ -473,16 +490,23 @@ panelview .subviewbutton@buttonStateActi
 panelview toolbarseparator,
 #BMB_bookmarksPopup > menuseparator {
   -moz-appearance: none;
   min-height: 0;
   border-top: 1px solid ThreeDShadow;
   margin: 5px 0;
 }
 
+.subviewbutton > .menu-accel-container {
+  -moz-box-pack: start;
+  -moz-margin-start: 10px;
+  -moz-margin-end: auto;
+  color: hsl(0,0%,50%);
+}
+
 #PanelUI-historyItems > toolbarbutton {
   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
 }
 
 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
   width: 16px;
@@ -583,20 +607,24 @@ toolbarpaletteitem[place="palette"] > #s
   background-position: 0 0, 1px 0, 2px 0;
   background-repeat: no-repeat;
 }
 
 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
   padding: 0;
 }
 
+.cui-widget-panelview,
+#widget-overflow-scroller {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
 #widget-overflow-scroller {
   max-height: 30em;
-  overflow-y: auto;
-  overflow-x: hidden;
   margin-top: 10px;
   margin-bottom: 10px;
 }
 
 #widget-overflow-list {
   width: @menuPanelWidth@;
   padding-left: 10px;
   padding-right: 10px;
@@ -647,17 +675,17 @@ toolbarpaletteitem[place="palette"] > #s
 .PanelUI-characterEncodingView-list > toolbarbutton[current] {
   -moz-padding-start: 4px;
 }
 
 #PanelUI-developerItems > toolbarbutton[checked="true"] > .toolbarbutton-text,
 #PanelUI-bookmarks > toolbarbutton[checked="true"] > .toolbarbutton-text,
 #PanelUI-history > toolbarbutton[checked="true"] > .toolbarbutton-text,
 .PanelUI-characterEncodingView-list > toolbarbutton[current] > .toolbarbutton-text,
-#customizationui-widget-panel .PanelUI-characterEncodingView-list > toolbarbutton[current] > .toolbarbutton-text {
+.cui-widget-panel .PanelUI-characterEncodingView-list > toolbarbutton[current] > .toolbarbutton-text {
   -moz-padding-start: 0px;
 }
 
 #BMB_bookmarksPopup > menuitem[checked="true"]::before,
 #PanelUI-bookmarks > toolbarbutton[checked="true"]::before,
 #PanelUI-history > toolbarbutton[checked="true"]::before,
 #PanelUI-developerItems > toolbarbutton[checked="true"]::before,
 .PanelUI-characterEncodingView-list > toolbarbutton[current]::before {
--- a/browser/themes/windows/customizableui/panelUIOverlay.css
+++ b/browser/themes/windows/customizableui/panelUIOverlay.css
@@ -9,26 +9,16 @@
   padding-right: 12px;
 }
 
 #PanelUI-contents #zoom-in-btn {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-#BMB_bookmarksPopup > menu,
-#BMB_bookmarksPopup > menuitem {
-  padding-top: 1px;
-  padding-bottom: 1px;
-}
-
-#BMB_bookmarksPopup > menu > .menu-text,
-#BMB_bookmarksPopup > menuitem > .menu-text,
-#BMB_bookmarksPopup > menu > .menu-iconic-text,
-#BMB_bookmarksPopup > menuitem > .menu-iconic-text,
 #BMB_bookmarksPopup > menuseparator {
   padding-top: 0;
   padding-bottom: 0;
 }
 
 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
   -moz-appearance: none;
   border: 0;