[Australis] Bug 916953: introduce separator in overflow panel buttons and bookmark star button gets different label when inside overflow panel. r=Gijs

browser/base/content/browser-places.js

@@ -1082,8 +1082,14 @@ let BookmarkingUI = {
     this._updateToolbarStyle();
   },
 
+  init: function() {
+    CustomizableUI.addListener(this);
+  },
+
   _hasBookmarksObserver: false,
   uninit: function BUI_uninit() {
+    CustomizableUI.removeListener(this);
+
     this._uninitView();
 
     if (this._hasBookmarksObserver) {
@@ -1279,6 +1285,44 @@ let BookmarkingUI = {
   onItemVisited: function () {},
   onItemMoved: function () {},
 
+  // CustomizableUI events:
+  _starButtonLabel: null,
+  _starButtonOverflowedLabel: null,
+  onWidgetOverflow: function(aNode, aContainer) {
+    let win = aNode.ownerDocument.defaultView;
+    if (aNode.id != "bookmarks-menu-button" || win != window)
+      return;
+
+    if (!this._starButtonOverflowedLabel) {
+      let browserBundle = Services.strings.createBundle(
+                          "chrome://browser/locale/browser.properties");
+      this._starButtonOverflowedLabel = browserBundle.GetStringFromName(
+                                        "starButtonOverflowed.label");
+    }
+
+    let button = this.button;
+    if (!this._starButtonLabel)
+      this._starButtonLabel = button.label;
+
+    if (button && button.label == this._starButtonLabel)
+      button.setAttribute("label", this._starButtonOverflowedLabel);
+  },
+
+  onWidgetUnderflow: function(aNode, aContainer) {
+    let win = aNode.ownerDocument.defaultView;
+    if (aNode.id != "bookmarks-menu-button" || win != window)
+      return;
+
+    // If the button hasn't been in the overflow panel before, we may ignore
+    // this event.
+    if (!this._starButtonOverflowedLabel || !this._starButtonLabel)
+      return;
+
+    let button = this.button;
+    if (button && button.label == this._starButtonOverflowedLabel)
+      button.setAttribute("label", this._starButtonLabel);
+  },
+
   QueryInterface: XPCOMUtils.generateQI([
     Ci.nsINavBookmarkObserver
   ])

browser/base/content/browser.js

@@ -1052,6 +1052,8 @@ var gBrowserInit = {
     // Enable/Disable auto-hide tabbar
     gBrowser.tabContainer.updateVisibility();
 
+    BookmarkingUI.init();
+
     gPrefService.addObserver(gHomeButton.prefDomain, gHomeButton, false);
 
     var homeButton = document.getElementById("home-button");

browser/components/customizableui/content/panelUI.inc.xul

@@ -178,6 +178,6 @@
        level="top"
        hidden="true">
   <vbox id="widget-overflow-scroller">
-    <vbox id="widget-overflow-list"/>
+    <vbox id="widget-overflow-list" class="widget-overflow-list"/>
   </vbox>
 </panel>

browser/components/customizableui/src/CustomizableUI.jsm

@@ -3235,6 +3235,7 @@ OverflowableToolbar.prototype = {
         this._collapsed.set(child.id, this._target.clientWidth);
         child.classList.add("overflowedItem");
         child.setAttribute("cui-anchorid", this._chevron.id);
+        CustomizableUIInternal.notifyListeners("onWidgetOverflow", child, this._target);
 
         this._list.insertBefore(child, this._list.firstChild);
         if (!this._toolbar.hasAttribute("overflowing")) {
@@ -3291,6 +3292,7 @@ OverflowableToolbar.prototype = {
       }
       child.removeAttribute("cui-anchorid");
       child.classList.remove("overflowedItem");
+      CustomizableUIInternal.notifyListeners("onWidgetUnderflow", child, this._target);
     }
 
     let win = this._target.ownerDocument.defaultView;
@@ -3365,6 +3367,7 @@ OverflowableToolbar.prototype = {
         this._collapsed.set(aNode.id, minSize);
         aNode.setAttribute("cui-anchorid", this._chevron.id);
         aNode.classList.add("overflowedItem");
+        CustomizableUIInternal.notifyListeners("onWidgetOverflow", aNode, this._target);
       }
       // If it is not overflowed and not in the toolbar, and was not overflowed
       // either, it moved out of the toolbar. That means there's now space in there!
@@ -3382,6 +3385,7 @@ OverflowableToolbar.prototype = {
         this._collapsed.delete(aNode.id);
         aNode.removeAttribute("cui-anchorid");
         aNode.classList.remove("overflowedItem");
+        CustomizableUIInternal.notifyListeners("onWidgetUnderflow", aNode, this._target);
 
         if (!this._collapsed.size) {
           this._toolbar.removeAttribute("overflowing");

browser/locales/en-US/chrome/browser/browser.properties

@@ -229,6 +229,7 @@ refreshBlocked.redirectLabel=%S prevented this page from automatically redirecti
 # Star button
 starButtonOn.tooltip=Edit this bookmark
 starButtonOff.tooltip=Bookmark this page
+starButtonOverflowed.label=Bookmark This Page
 
 # Offline web applications
 offlineApps.available=This website (%S) is asking to store data on your computer for offline use.

browser/themes/linux/customizableui/panelUIOverlay.css

@@ -7,3 +7,12 @@
 #BMB_bookmarksPopup > menuitem[type="checkbox"] {
   -moz-appearance: none !important; /* important, to override toolkit rule */
 }
+
+.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
+  -moz-appearance: none;
+  border: 0;
+}
+
+.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
+  -moz-margin-start: 0;
+}

browser/themes/osx/customizableui/panelUIOverlay.css

@@ -63,3 +63,7 @@ toolbarbutton[cui-areatype="menu-panel"] {
 #BMB_bookmarksPopup > menu > .menu-right {
   -moz-margin-end: 0;
 }
+
+.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
+  -moz-margin-start: 4px;
+}

browser/themes/shared/customizableui/panelUIOverlay.inc.css

@@ -532,6 +532,20 @@ toolbarpaletteitem[place="palette"] > #search-container {
   min-height: 28px;
 }
 
+.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
+  content: "";
+  display: -moz-box;
+  width: 1px;
+  height: 18px;
+  -moz-margin-end: -1px;
+  background-image: linear-gradient(hsla(210,54%,20%,.2) 0, hsla(210,54%,20%,.2) 18px);
+  background-clip: padding-box;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 1px 18px;
+  box-shadow: 0 0 0 1px hsla(0,0%,100%,.2);
+}
+
 #PanelUI-developerItems > toolbarbutton[checked="true"],
 #PanelUI-bookmarks > toolbarbutton[checked="true"],
 #PanelUI-history > toolbarbutton[checked="true"],

browser/themes/windows/browser.css

@@ -1375,7 +1375,7 @@ toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
   -moz-margin-start: 5px;
 }
 
-#bookmarks-menu-button[cui-areatype="toolbar"]:not(.bookmark-item) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
+#bookmarks-menu-button[cui-areatype="toolbar"]:not(.bookmark-item):not(.overflowedItem) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
   padding-top: 2px;
   padding-bottom: 2px;
 }

browser/themes/windows/customizableui/panelUIOverlay.css

@@ -28,3 +28,19 @@
   padding-top: 0;
   padding-bottom: 0;
 }
+
+.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
+  -moz-appearance: none;
+  border: 0;
+  -moz-margin-start: 3px;
+}
+
+.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
+  padding: 0 2px;
+  -moz-padding-start: 0;
+  height: 18px;
+}
+
+.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
+  padding: 0 6px;
+}