Bug 1395674 - Adding subviewbutton-nav class to menu-type toolbarbuttons and display the '>' in the overflow list. r=Gijs draft
authorSam Foster <sfoster@mozilla.com>
Mon, 25 Sep 2017 19:29:04 -0700
changeset 671562 ebfd4dbc2191a921ea04f0fcf56270ad945c3e37
parent 671268 756e10aa8bbd416cbc49b7739f78fb81d5525477
child 733546 57c741bbddff99b16613fae40d87655261835f76
push id81967
push userbmo:sfoster@mozilla.com
push dateThu, 28 Sep 2017 00:09:33 +0000
reviewersGijs
bugs1395674
milestone58.0a1
Bug 1395674 - Adding subviewbutton-nav class to menu-type toolbarbuttons and display the '>' in the overflow list. r=Gijs MozReview-Commit-ID: I1pGXA3ecxT
browser/base/content/browser.xul
browser/components/customizableui/CustomizableUI.jsm
browser/themes/shared/customizableui/panelUI.inc.css
--- 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;
 }