Bug 1395674 - Adding subviewbutton-nav class to menu-type toolbarbuttons and display the '>' in the overflow list. r=Gijs
MozReview-Commit-ID: I1pGXA3ecxT
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -923,17 +923,17 @@
ondragenter="DownloadsIndicatorView.onDragOver(event);"
label="&downloads.label;"
removable="true"
overflows="false"
cui-areatype="toolbar"
hidden="true"
tooltip="dynamic-shortcut-tooltip"/>
- <toolbarbutton id="library-button" class="toolbarbutton-1 chromeclass-toolbar-additional"
+ <toolbarbutton id="library-button" class="toolbarbutton-1 chromeclass-toolbar-additional subviewbutton-nav"
removable="true"
onmousedown="PanelUI.showSubView('appMenu-libraryView', this, null, event);"
closemenu="none"
cui-areatype="toolbar"
tooltiptext="&libraryButton.tooltip;"
label="&places.library.title;"/>
</hbox>
@@ -1057,17 +1057,17 @@
<toolbarbutton id="fullscreen-button" class="toolbarbutton-1 chromeclass-toolbar-additional"
observes="View:FullScreen"
type="checkbox"
label="&fullScreenCmd.label;"
tooltip="dynamic-shortcut-tooltip"/>
<toolbarbutton id="bookmarks-menu-button"
- class="toolbarbutton-1 chromeclass-toolbar-additional"
+ class="toolbarbutton-1 chromeclass-toolbar-additional subviewbutton-nav"
type="menu"
label="&bookmarksMenuButton2.label;"
tooltip="dynamic-shortcut-tooltip"
anchor="dropmarker"
ondragenter="PlacesMenuDNDHandler.onDragEnter(event);"
ondragover="PlacesMenuDNDHandler.onDragOver(event);"
ondragleave="PlacesMenuDNDHandler.onDragLeave(event);"
ondrop="PlacesMenuDNDHandler.onDrop(event);"
--- a/browser/components/customizableui/CustomizableUI.jsm
+++ b/browser/components/customizableui/CustomizableUI.jsm
@@ -1455,39 +1455,44 @@ var CustomizableUIInternal = {
"' not found!");
}
}
let tooltip = this.getLocalizedProperty(aWidget, "tooltiptext", additionalTooltipArguments);
if (tooltip) {
node.setAttribute("tooltiptext", tooltip);
}
- node.setAttribute("class", "toolbarbutton-1 chromeclass-toolbar-additional");
let commandHandler = this.handleWidgetCommand.bind(this, aWidget, node);
node.addEventListener("command", commandHandler);
let clickHandler = this.handleWidgetClick.bind(this, aWidget, node);
node.addEventListener("click", clickHandler);
+ let nodeClasses = ["toolbarbutton-1", "chromeclass-toolbar-additional"];
+
// If the widget has a view, and has view showing / hiding listeners,
// hook those up to this widget.
if (aWidget.type == "view") {
log.debug("Widget " + aWidget.id + " has a view. Auto-registering event handlers.");
let viewNode = aDocument.getElementById(aWidget.viewId);
if (viewNode) {
// PanelUI relies on the .PanelUI-subView class to be able to show only
// one sub-view at a time.
viewNode.classList.add("PanelUI-subView");
+ if (aWidget.source == CustomizableUI.SOURCE_BUILTIN) {
+ nodeClasses.push("subviewbutton-nav");
+ }
this.ensureSubviewListeners(viewNode);
} else {
log.error("Could not find the view node with id: " + aWidget.viewId +
", for widget: " + aWidget.id + ".");
}
}
+ node.setAttribute("class", nodeClasses.join(" "));
if (aWidget.onCreated) {
aWidget.onCreated(node);
}
}
aWidget.instances.set(aDocument, node);
return node;
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -468,16 +468,20 @@ photonpanelmultiview .panel-subview-body
.panelUI-grid .toolbarbutton-1,
.panel-customization-placeholder-child {
-moz-appearance: none;
-moz-box-orient: vertical;
width: calc(@menuPanelButtonWidth@);
height: calc(51px + 2.2em);
}
+toolbarpaletteitem[place=panel] > .toolbarbutton-1 {
+ -moz-box-flex: 1;
+}
+
/* Help SDK buttons fit in. */
toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon,
toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
toolbarpaletteitem[place="palette"] > toolbaritem[sdkstylewidget="true"] > .toolbarbutton-1 > .toolbarbutton-icon,
toolbarpaletteitem[place="panel"] > toolbaritem[sdkstylewidget="true"] > .toolbarbutton-1 > .toolbarbutton-icon,
toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon,
toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
height: @panelPaletteIconSize@;
@@ -1713,16 +1717,31 @@ toolbaritem[overflowedItem=true],
background-position: 0 center;
}
.widget-overflow-list .toolbarbutton-1 {
-moz-box-align: center;
-moz-box-orient: horizontal;
}
+.widget-overflow-list .subviewbutton-nav:-moz-locale-dir(ltr)::after {
+ transform: scaleX(-1);
+}
+.widget-overflow-list .subviewbutton-nav::after {
+ margin-inline-start: 10px;
+ -moz-context-properties: fill;
+ content: url(chrome://browser/skin/back-12.svg);
+ fill: GrayText;
+ float: right;
+}
+
+toolbarpaletteitem[place=panel] > .subviewbutton-nav::after {
+ opacity: 0.5;
+}
+
.widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text {
text-align: start;
padding-inline-start: .5em;
}
.subviewbutton[checked="true"] {
background: url("chrome://global/skin/menu/shared-menu-check.png") center left 7px / 11px 11px no-repeat transparent;
}