Skip to content

Instantly share code, notes, and snippets.

@darrinhenein

darrinhenein/Popup-Styling-v2.patch

Created March 5, 2014 20:46
Show Gist options
  • Save darrinhenein/9376238 to your computer and use it in GitHub Desktop.
Save darrinhenein/9376238 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Popup-Styling-v2.patch
# HG changeset patch
# Parent 01d7be943857acf43286cdb6aff94f802fcba4fd
# User Darrin Henein <[email protected]>
Bug 969592 - Restyle Bookmarks Menu Popups
diff --git a/browser/base/content/browser-places.js b/browser/base/content/browser-places.js
--- a/browser/base/content/browser-places.js
+++ b/browser/base/content/browser-places.js
@@ -1089,29 +1089,32 @@ let BookmarkingUI = {
let getPlacesAnonymousElement =
aAnonId => document.getAnonymousElementByAttribute(popup.parentNode,
"placesanonid",
aAnonId);
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);
}
},
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"
+ mainLevel: "subviewbutton",
+ secondaryLevel: "subviewbutton",
+ footerClass: "subviewbutton panel-subview-footer"
},
insertionPoint: ".panel-subview-footer"
});
},
/**
* Handles star styling based on page proxy state changes.
*/
@@ -1425,17 +1428,19 @@ let BookmarkingUI = {
viewToolbar.removeAttribute("checked");
else
viewToolbar.setAttribute("checked", "true");
// Setup the Places view.
this._panelMenuView = new PlacesPanelMenuView("place:folder=BOOKMARKS_MENU",
"panelMenu_bookmarksMenu",
"panelMenu_bookmarksMenu", {
extraClasses: {
- mainLevel: "subviewbutton"
+ mainLevel: "subviewbutton",
+ secondaryLevel: "subviewbutton",
+ footerClass: "subviewbutton panel-subview-footer"
}
});
aEvent.target.removeEventListener("ViewShowing", this);
},
onPanelMenuViewHiding: function BUI_onViewHiding(aEvent) {
this._panelMenuView.uninit();
delete this._panelMenuView;
diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -820,17 +820,17 @@
<menu id="BMB_bookmarksToolbar"
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');">
+ new PlacesMenu(event, 'place:folder=TOOLBAR', PLACES_MENU_DEFAULT_OPTIONS);">
<menuitem id="BMB_viewBookmarksToolbar"
placesanonid="view-toolbar"
toolbarId="PersonalToolbar"
type="checkbox"
oncommand="onViewToolbarCommand(event)"
label="&viewBookmarksToolbar.label;"/>
<menuseparator/>
<!-- Bookmarks toolbar items -->
@@ -839,17 +839,17 @@
<menu id="BMB_unsortedBookmarks"
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');"/>
+ new PlacesMenu(event, 'place:folder=UNFILED_BOOKMARKS', PLACES_MENU_DEFAULT_OPTIONS);"/>
</menu>
<menuseparator/>
<!-- Bookmarks menu items will go here -->
<menuitem id="BMB_bookmarksShowAll"
class="subviewbutton panel-subview-footer"
label="&showAllBookmarks2.label;"
command="Browser:ShowAllBookmarks"
key="manBookmarkKb"/>
diff --git a/browser/components/places/content/browserPlacesViews.js b/browser/components/places/content/browserPlacesViews.js
--- a/browser/components/places/content/browserPlacesViews.js
+++ b/browser/components/places/content/browserPlacesViews.js
@@ -1,15 +1,25 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */
Components.utils.import("resource://gre/modules/XPCOMUtils.jsm");
Components.utils.import("resource://gre/modules/Services.jsm");
+
+/* Default options for styled Places panels/menus */
+const PLACES_MENU_DEFAULT_OPTIONS = {
+ extraClasses: {
+ mainLevel:"subviewbutton",
+ secondaryLevel: "subviewbutton",
+ footerClass: "subviewbutton panel-subview-footer"
+ }
+ };
+
/**
* The base view implements everything that's common to the toolbar and
* menu views.
*/
function PlacesViewBase(aPlace, aOptions) {
this.place = aPlace;
this.options = aOptions;
this._controller = new PlacesController(this);
@@ -263,16 +273,19 @@ PlacesViewBase.prototype = {
_setEmptyPopupStatus:
function PVB__setEmptyPopupStatus(aPopup, aEmpty) {
if (!aPopup._emptyMenuitem) {
let label = PlacesUIUtils.getString("bookmarksMenuEmptyFolder");
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.secondaryLevel == "string")
+ aPopup._emptyMenuitem.className += " " + this.options.extraClasses.secondaryLevel;
}
if (aEmpty) {
aPopup.setAttribute("emptyplacesresult", "true");
// Don't add the menuitem if there is static content.
if (!aPopup._startMarker.previousSibling &&
!aPopup._endMarker.nextSibling)
aPopup.insertBefore(aPopup._emptyMenuitem, aPopup._endMarker);
@@ -338,16 +351,21 @@ PlacesViewBase.prototype = {
popup._placesNode = PlacesUtils.asContainer(aPlacesNode);
if (!this._nativeView) {
popup.setAttribute("placespopup", "true");
}
element.appendChild(popup);
element.className = "menu-iconic bookmark-item";
+ if (element == this._rootElt && typeof this.options.extraClasses.mainLevel == "string") {
+ element.className += " " + this.options.extraClasses.mainLevel;
+ } else if (typeof this.options.extraClasses.secondaryLevel == "string") {
+ element.className += " " + this.options.extraClasses.secondaryLevel;
+ }
this._domNodes.set(aPlacesNode, popup);
}
else
throw "Unexpected node";
element.setAttribute("label", PlacesUIUtils.getBestTitle(aPlacesNode));
@@ -789,16 +807,21 @@ PlacesViewBase.prototype = {
// Create a separator before options.
aPopup._endOptSeparator = document.createElement("menuseparator");
aPopup._endOptSeparator.className = "bookmarks-actions-menuseparator";
aPopup.appendChild(aPopup._endOptSeparator);
// Add the "Open All in Tabs" menuitem.
aPopup._endOptOpenAllInTabs = document.createElement("menuitem");
aPopup._endOptOpenAllInTabs.className = "openintabs-menuitem";
+
+ let extraClasses = this.options.extraClasses;
+ if(typeof extraClasses.footerClass == "string")
+ aPopup._endOptOpenAllInTabs.className += " " + extraClasses.footerClass;
+
aPopup._endOptOpenAllInTabs.setAttribute("oncommand",
"PlacesUIUtils.openContainerNodeInTabs(this.parentNode._placesNode, event, " +
"PlacesUIUtils.getViewForNode(this));");
aPopup._endOptOpenAllInTabs.setAttribute("onclick",
"checkForMiddleClick(this, event); event.stopPropagation();");
aPopup._endOptOpenAllInTabs.setAttribute("label",
gNavigatorBundle.getString("menuOpenAllInTabs.label"));
aPopup.appendChild(aPopup._endOptOpenAllInTabs);
diff --git a/browser/themes/osx/customizableui/panelUIOverlay.css b/browser/themes/osx/customizableui/panelUIOverlay.css
--- a/browser/themes/osx/customizableui/panelUIOverlay.css
+++ b/browser/themes/osx/customizableui/panelUIOverlay.css
@@ -91,32 +91,32 @@
.subviewbutton[checked="true"] {
background-position: top 5px left 4px;
}
.subviewbutton:not(:-moz-any([image],[targetURI],.cui-withicon, .bookmark-item)) > .menu-iconic-left {
display: none;
}
-#BMB_bookmarksPopup > menu,
-#BMB_bookmarksPopup > menuitem:not(.panel-subview-footer) {
+#BMB_bookmarksPopup menu,
+#BMB_bookmarksPopup menuitem:not(.panel-subview-footer) {
padding-top: 5px;
padding-bottom: 5px;
}
/* Override OSX-specific toolkit styles for the bookmarks panel */
-#BMB_bookmarksPopup > menu > .menu-right {
+#BMB_bookmarksPopup menu > .menu-right {
-moz-margin-end: 0;
}
-#BMB_bookmarksPopup > menu > .menu-right > image {
+#BMB_bookmarksPopup menu > .menu-right > image {
-moz-image-region: rect(0, 9px, 10px, 0);
}
@media (min-resolution: 2dppx) {
- #BMB_bookmarksPopup > menu > .menu-right > image {
+ #BMB_bookmarksPopup menu > .menu-right > image {
-moz-image-region: rect(0, 18px, 20px, 0);
}
}
.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
-moz-margin-start: 4px;
}
diff --git a/browser/themes/shared/customizableui/panelUIOverlay.inc.css b/browser/themes/shared/customizableui/panelUIOverlay.inc.css
--- a/browser/themes/shared/customizableui/panelUIOverlay.inc.css
+++ b/browser/themes/shared/customizableui/panelUIOverlay.inc.css
@@ -625,32 +625,46 @@ menuitem.subviewbutton@menuStateActive@,
}
.subviewbutton.panel-subview-footer@buttonStateActive@ {
background-color: hsla(210,4%,10%,.15);
border-top: 1px solid hsla(210,4%,10%,.12);
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 {
-moz-appearance: none;
min-height: 0;
border-top: 1px solid hsla(210,4%,10%,.15);
margin: 2px 0;
padding: 0;
@@ -892,9 +906,9 @@ toolbaritem[overflowedItem=true],
.PanelUI-subView > menu > .menu-iconic-left,
.PanelUI-subView > menuitem > .menu-iconic-left {
-moz-appearance: none;
-moz-margin-end: 3px;
}
.PanelUI-subView > menuitem[checked="true"] > .menu-iconic-left {
visibility: hidden;
-}
+}
\ No newline at end of file
diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -279,16 +279,35 @@
}
@media not all and (-moz-windows-classic) {
#titlebar-min {
-moz-margin-end: 2px;
}
}
+/* ::::: bookmark panel submenus ::::: */
+
+#BMB_bookmarksPopup menupopup {
+ -moz-appearance: none;
+ -moz-binding: url("chrome://browser/content/places/menu.xml#places-popup-base");
+ 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: 4px;
+ margin-top: -3px;
+}
+
/* ::::: bookmark buttons ::::: */
toolbarbutton.bookmark-item,
#personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
margin: 0;
padding: 2px 3px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment