From 7a1b180930d7e8293c53acd9920318fec35a2b14 Mon Sep 17 00:00:00 2001 From: Mike de Boer Date: Wed, 29 Jan 2014 12:20:40 +0100 Subject: [PATCH] [Australis] Bug 963095: adjust toolbar widget panel styling. r=Gijs --- browser/base/content/browser-places.js | 19 ++++- browser/base/content/browser.xul | 28 ++++--- .../customizableui/content/panelUI.inc.xul | 13 ++- .../customizableui/content/panelUI.js | 6 ++ .../places/content/browserPlacesViews.js | 52 ++++++++++-- .../osx/customizableui/panelUIOverlay.css | 3 +- .../customizableui/panelUIOverlay.inc.css | 84 ++++++++++++------- .../windows/customizableui/panelUIOverlay.css | 10 --- 8 files changed, 147 insertions(+), 68 deletions(-) diff --git a/browser/base/content/browser-places.js b/browser/base/content/browser-places.js index ccd5dd15350a..c3edd9f367ef 100644 --- a/browser/base/content/browser-places.js +++ b/browser/base/content/browser-places.js @@ -1052,6 +1052,19 @@ let BookmarkingUI = { } }, + 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. */ @@ -1239,7 +1252,11 @@ let BookmarkingUI = { // 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) { diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul index 7a5b2263466b..6b1034a20bed 100644 --- a/browser/base/content/browser.xul +++ b/browser/base/content/browser.xul @@ -753,20 +753,17 @@ cui-areatype="toolbar" oncommand="BookmarkingUI.onCommand(event);"> - @@ -775,7 +772,9 @@ @@ -794,7 +795,7 @@ - + + diff --git a/browser/components/customizableui/content/panelUI.inc.xul b/browser/components/customizableui/content/panelUI.inc.xul index 6e467ac50998..f823262da2b6 100644 --- a/browser/components/customizableui/content/panelUI.inc.xul +++ b/browser/components/customizableui/content/panelUI.inc.xul @@ -85,11 +85,6 @@ command="Browser:AddBookmarkAs" onclick="PanelUI.hide();"/> - - + - + diff --git a/browser/components/customizableui/content/panelUI.js b/browser/components/customizableui/content/panelUI.js index ae1b0d129974..c8262cfd4b16 100644 --- a/browser/components/customizableui/content/panelUI.js +++ b/browser/components/customizableui/content/panelUI.js @@ -296,16 +296,22 @@ const PanelUI = { 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); diff --git a/browser/components/places/content/browserPlacesViews.js b/browser/components/places/content/browserPlacesViews.js index 7ef92725ca5e..afaeea215de3 100644 --- a/browser/components/places/content/browserPlacesViews.js +++ b/browser/components/places/content/browserPlacesViews.js @@ -9,8 +9,9 @@ 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); } @@ -84,6 +85,19 @@ PlacesViewBase.prototype = { 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. * @@ -352,6 +366,15 @@ PlacesViewBase.prototype = { 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; }, @@ -782,9 +805,16 @@ PlacesViewBase.prototype = { 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. @@ -1670,7 +1700,7 @@ 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; // this._viewElt = this._rootElt.parentNode; // this._viewElt._placesView = this; @@ -1687,7 +1717,7 @@ function PlacesMenu(aPopupShowingEvent, aPlace) { } #endif - PlacesViewBase.call(this, aPlace); + PlacesViewBase.call(this, aPlace, aOptions); this._onPopupShowing(aPopupShowingEvent); } @@ -1750,12 +1780,13 @@ PlacesMenu.prototype = { } }; -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 = { @@ -1780,7 +1811,10 @@ PlacesPanelMenuView.prototype = { } 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) diff --git a/browser/themes/osx/customizableui/panelUIOverlay.css b/browser/themes/osx/customizableui/panelUIOverlay.css index bd06f0ef88a7..521f047bebe4 100644 --- a/browser/themes/osx/customizableui/panelUIOverlay.css +++ b/browser/themes/osx/customizableui/panelUIOverlay.css @@ -43,13 +43,12 @@ } #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; } diff --git a/browser/themes/shared/customizableui/panelUIOverlay.inc.css b/browser/themes/shared/customizableui/panelUIOverlay.inc.css index 97fbaeacd876..2f22280cb754 100644 --- a/browser/themes/shared/customizableui/panelUIOverlay.inc.css +++ b/browser/themes/shared/customizableui/panelUIOverlay.inc.css @@ -50,6 +50,15 @@ .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 { @@ -76,10 +85,14 @@ #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent { overflow: hidden; - padding: 0; box-shadow: none; } +#PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent, +.cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box { + padding: 0; +} + .panelUI-grid .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text, .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text { margin: 2px 0 0; @@ -98,12 +111,20 @@ } 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; @@ -366,14 +387,12 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { } 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); @@ -384,27 +403,31 @@ panelview .subviewbutton, 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, @@ -423,43 +446,37 @@ panelview .toolbarbutton-1, } 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; } @@ -478,6 +495,13 @@ panelview toolbarseparator, 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"); } @@ -588,10 +612,14 @@ toolbarpaletteitem[place="palette"] > #search-container { padding: 0; } +.cui-widget-panelview, #widget-overflow-scroller { - max-height: 30em; overflow-y: auto; overflow-x: hidden; +} + +#widget-overflow-scroller { + max-height: 30em; margin-top: 10px; margin-bottom: 10px; } @@ -652,7 +680,7 @@ toolbarpaletteitem[place="palette"] > #search-container { #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; } diff --git a/browser/themes/windows/customizableui/panelUIOverlay.css b/browser/themes/windows/customizableui/panelUIOverlay.css index 78add471eaf2..0d370117ed1d 100644 --- a/browser/themes/windows/customizableui/panelUIOverlay.css +++ b/browser/themes/windows/customizableui/panelUIOverlay.css @@ -14,16 +14,6 @@ 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;