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 670843 6f5c711538435e3995b21707df7d0da8c76ec3b6
parent 670812 7d15bc419c6cd7e9f3b4d41370c3b0e5990c8d1b
child 733333 c9d8b81e5566543cbe406a00d9cb309c859f4192
push id81736
push userbmo:sfoster@mozilla.com
push dateTue, 26 Sep 2017 23:11:40 +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
@@ -656,17 +656,17 @@
                      ondrop="newTabButtonObserver.onDrop(event)"
                      ondragover="newTabButtonObserver.onDragOver(event)"
                      ondragenter="newTabButtonObserver.onDragOver(event)"
                      ondragexit="newTabButtonObserver.onDragExit(event)"
                      cui-areatype="toolbar"
                      removable="true"/>
 
       <toolbarbutton id="alltabs-button"
-                     class="toolbarbutton-1 chromeclass-toolbar-additional tabs-alltabs-button"
+                     class="toolbarbutton-1 chromeclass-toolbar-additional tabs-alltabs-button subviewbutton-nav"
                      type="menu"
                      label="&listAllTabs.label;"
                      tooltiptext="&listAllTabs.label;"
                      removable="false">
         <menupopup id="alltabs-popup"
                    position="after_end">
           <menuitem id="alltabs_undoCloseTab"
                     key="key_undoCloseTab"
@@ -1012,17 +1012,17 @@
                      mousethrough="always"
                      collapsed="true"/>
             </hbox>
             <scrollbox orient="horizontal"
                        id="PlacesToolbarItems"
                        flex="1"/>
             <toolbarbutton type="menu"
                            id="PlacesChevron"
-                           class="toolbarbutton-1"
+                           class="toolbarbutton-1 subviewbutton-nav"
                            mousethrough="never"
                            collapsed="true"
                            tooltiptext="&bookmarksToolbarChevron.tooltip;"
                            onpopupshowing="document.getElementById('PlacesToolbar')
                                                    ._placesView._onChevronPopupShowing(event);">
               <menupopup id="PlacesChevronPopup"
                          placespopup="true"
                          tooltip="bhTooltip" popupsinherittooltip="true"
@@ -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,42 @@ 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");
+          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
@@ -1704,25 +1704,42 @@ toolbarpaletteitem[place=panel] > .toolb
 .widget-overflow-list {
   width: @wideMenuPanelWidth@;
 }
 
 toolbaritem[overflowedItem=true],
 .widget-overflow-list .toolbarbutton-1 {
   width: 100%;
   max-width: @wideMenuPanelWidth@;
+  -moz-box-flex: 1;
   background-repeat: no-repeat;
   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;
+}
+.widget-overflow-list .subviewbutton-nav::after {
+    -moz-context-properties: fill;
+    content: url(chrome://browser/skin/back-12.svg);
+    fill: GrayText;
+    float: right;
+}
+.widget-overflow-list > toolbarpaletteitem .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;
 }