From f1287248e6adb4f5d8727f760fde5e11040183ff Mon Sep 17 00:00:00 2001 From: Mike de Boer Date: Wed, 22 Jan 2014 13:31:09 +0100 Subject: [PATCH] [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 | 44 +++++++++++++++++++ browser/base/content/browser.js | 2 + .../customizableui/content/panelUI.inc.xul | 2 +- .../customizableui/src/CustomizableUI.jsm | 4 ++ .../en-US/chrome/browser/browser.properties | 1 + .../linux/customizableui/panelUIOverlay.css | 9 ++++ .../osx/customizableui/panelUIOverlay.css | 4 ++ .../customizableui/panelUIOverlay.inc.css | 14 ++++++ browser/themes/windows/browser.css | 2 +- .../windows/customizableui/panelUIOverlay.css | 16 +++++++ 10 files changed, 96 insertions(+), 2 deletions(-) diff --git a/browser/base/content/browser-places.js b/browser/base/content/browser-places.js index d162c815f4e..bcbce53931c 100644 --- a/browser/base/content/browser-places.js +++ b/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 ]) diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js index a86b542b897..afee7b38e4e 100644 --- a/browser/base/content/browser.js +++ b/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"); diff --git a/browser/components/customizableui/content/panelUI.inc.xul b/browser/components/customizableui/content/panelUI.inc.xul index 32d322b1ec9..9303d6b7ada 100644 --- a/browser/components/customizableui/content/panelUI.inc.xul +++ b/browser/components/customizableui/content/panelUI.inc.xul @@ -178,6 +178,6 @@ level="top" hidden="true"> - + diff --git a/browser/components/customizableui/src/CustomizableUI.jsm b/browser/components/customizableui/src/CustomizableUI.jsm index 4ea11d1430b..0c6d70a2773 100644 --- a/browser/components/customizableui/src/CustomizableUI.jsm +++ b/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"); diff --git a/browser/locales/en-US/chrome/browser/browser.properties b/browser/locales/en-US/chrome/browser/browser.properties index e507483c421..abd8d71c600 100644 --- a/browser/locales/en-US/chrome/browser/browser.properties +++ b/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. diff --git a/browser/themes/linux/customizableui/panelUIOverlay.css b/browser/themes/linux/customizableui/panelUIOverlay.css index c9a604c01a4..d0d4d47a317 100644 --- a/browser/themes/linux/customizableui/panelUIOverlay.css +++ b/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; +} diff --git a/browser/themes/osx/customizableui/panelUIOverlay.css b/browser/themes/osx/customizableui/panelUIOverlay.css index 980ad2cc100..5134afdfd50 100644 --- a/browser/themes/osx/customizableui/panelUIOverlay.css +++ b/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; +} diff --git a/browser/themes/shared/customizableui/panelUIOverlay.inc.css b/browser/themes/shared/customizableui/panelUIOverlay.inc.css index 8862213fea2..cd1666a522e 100644 --- a/browser/themes/shared/customizableui/panelUIOverlay.inc.css +++ b/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"], diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css index 92e284c4bee..ef3dd3aa9b4 100644 --- a/browser/themes/windows/browser.css +++ b/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; } diff --git a/browser/themes/windows/customizableui/panelUIOverlay.css b/browser/themes/windows/customizableui/panelUIOverlay.css index d66a8e0aa13..78add471eaf 100644 --- a/browser/themes/windows/customizableui/panelUIOverlay.css +++ b/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; +}