[Australis] Bug 963095: adjust toolbar widget panel styling. r=Gijs

This commit is contained in:
Mike de Boer 2014-01-29 12:20:40 +01:00
Родитель bef90343c8
Коммит 7a1b180930
8 изменённых файлов: 147 добавлений и 68 удалений

Просмотреть файл

@ -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) {

Просмотреть файл

@ -753,20 +753,17 @@
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');">
@ -775,7 +772,9 @@
<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);"
@ -783,7 +782,9 @@
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">
@ -794,7 +795,7 @@
</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"
@ -813,7 +814,7 @@
</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"
@ -823,7 +824,12 @@
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>

Просмотреть файл

@ -85,11 +85,6 @@
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"
@ -120,9 +115,13 @@
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"/>

Просмотреть файл

@ -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);

Просмотреть файл

@ -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; // <menupopup>
this._viewElt = this._rootElt.parentNode; // <menu>
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)

Просмотреть файл

@ -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;
}

Просмотреть файл

@ -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;
}

Просмотреть файл

@ -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;