diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js index 1d0ca5ef16b3..10f05861c391 100644 --- a/browser/base/content/browser.js +++ b/browser/base/content/browser.js @@ -1327,6 +1327,8 @@ function BrowserStartup() { gPrivateBrowsingUI.init(); + retrieveToolbarIconsizesFromTheme(); + setTimeout(delayedStartup, 0, isLoadingBlank, mustLoadSidebar); } @@ -3616,10 +3618,43 @@ function BrowserToolboxCustomizeDone(aToolboxChanged) { window.content.focus(); } -function BrowserToolboxCustomizeChange() { - gHomeButton.updatePersonalToolbarStyle(); - BookmarksMenuButton.customizeChange(); - allTabs.readPref(); +function BrowserToolboxCustomizeChange(aType) { + switch (aType) { + case "iconsize": + case "mode": + retrieveToolbarIconsizesFromTheme(); + break; + default: + gHomeButton.updatePersonalToolbarStyle(); + BookmarksMenuButton.customizeChange(); + allTabs.readPref(); + } +} + +/** + * Allows themes to override the "iconsize" attribute on toolbars. + */ +function retrieveToolbarIconsizesFromTheme() { + function retrieveToolbarIconsize(aToolbar) { + if (aToolbar.localName != "toolbar") + return; + + // The theme indicates that it wants to override the "iconsize" attribute + // by specifying a special value for the "counter-reset" property on the + // toolbar. A custom property cannot be used because getComputedStyle can + // only return the values of standard CSS properties. + let counterReset = getComputedStyle(aToolbar).counterReset; + if (counterReset == "smallicons 0") { + aToolbar.setAttribute("iconsize", "small"); + document.persist(aToolbar.id, "iconsize"); + } else if (counterReset == "largeicons 0") { + aToolbar.setAttribute("iconsize", "large"); + document.persist(aToolbar.id, "iconsize"); + } + } + + Array.forEach(gNavToolbox.childNodes, retrieveToolbarIconsize); + gNavToolbox.externalToolbars.forEach(retrieveToolbarIconsize); } /** diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul index 77353ba93c00..f0b076afff26 100644 --- a/browser/base/content/browser.xul +++ b/browser/base/content/browser.xul @@ -467,6 +467,8 @@ defaultmode="icons" mode="icons" #ifdef WINCE defaulticonsize="small" iconsize="small" +#else + iconsize="large" #endif tabsontop="true" persist="tabsontop"> diff --git a/browser/themes/pinstripe/browser/browser.css b/browser/themes/pinstripe/browser/browser.css index 870fa56ea41f..617e530d9e05 100644 --- a/browser/themes/pinstripe/browser/browser.css +++ b/browser/themes/pinstripe/browser/browser.css @@ -449,6 +449,11 @@ toolbar[mode="icons"] .toolbarbutton-1 > menupopup { margin-top: 1px; } +#navigator-toolbox > toolbar { + /* force iconsize="small" on these toolbars */ + counter-reset: smallicons; +} + /* unified back/forward button */ #unified-back-forward-button { @@ -465,7 +470,7 @@ toolbar:not([mode="icons"]) #back-button:-moz-locale-dir(rtl) { -moz-image-region: rect(0, 60px, 20px, 40px); } -toolbar:not([iconsize="small"])[mode="icons"] #back-button { +#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button { -moz-margin-end: -5px; position: relative; z-index: 1; @@ -485,27 +490,17 @@ toolbar[mode="icons"] #forward-button { -moz-margin-start: 0; } -toolbar[mode="icons"]:not([iconsize="small"]) #forward-button { +#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #forward-button { /* 1px to the right */ padding-left: 4px; padding-right: 2px; } -toolbar[mode="icons"]:not([iconsize="small"]) #forward-button:-moz-lwtheme { +#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #forward-button:-moz-lwtheme { mask: url(chrome://browser/content/browser.xul#pinstripe-keyhole-forward-mask); } -toolbar[iconsize="small"][mode="icons"] #back-button { - -moz-margin-end: 0; -} - -toolbar[iconsize="small"][mode="icons"] #back-button { - width: 26px; - border-right-width: 0; - padding-right: 2px; -} - -toolbar[iconsize="small"][mode="icons"] #forward-button { +#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar #forward-button { width: 27px; padding-left: 2px; } @@ -515,7 +510,11 @@ toolbar[mode="icons"] #forward-button { border-bottom-left-radius: 0; } -toolbar[iconsize="small"][mode="icons"] #back-button { +#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar #back-button { + -moz-margin-end: 0; + width: 26px; + padding-right: 2px; + border-right-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } diff --git a/browser/themes/winstripe/browser/browser.css b/browser/themes/winstripe/browser/browser.css index 07c1430ab822..3ca2cece3030 100644 --- a/browser/themes/winstripe/browser/browser.css +++ b/browser/themes/winstripe/browser/browser.css @@ -108,8 +108,8 @@ } %endif -#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar)[iconsize="small"], -#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar)[defaulticonsize="small"]:not([iconsize]) { +#navigator-toolbox[iconsize="small"] > #nav-bar, +#navigator-toolbox > toolbar:not(#nav-bar):not(#toolbar-menubar):not(#TabsToolbar)[iconsize="small"] { padding-top: 1px; padding-bottom: 1px; } @@ -572,6 +572,11 @@ menuitem.bookmark-item { opacity: .4; } +#nav-bar { + /* force iconsize="small" on this toolbar */ + counter-reset: smallicons; +} + #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button, #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker, #nav-bar .toolbarbutton-1 { @@ -592,8 +597,8 @@ menuitem.bookmark-item { } #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker, -#nav-bar[iconsize="small"][mode="icons"] .toolbarbutton-1 > .toolbarbutton-menubutton-button, -#nav-bar[iconsize="small"][mode="icons"] .toolbarbutton-1 { +#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button, +#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar .toolbarbutton-1 { padding-left: 3px; padding-right: 3px; } @@ -610,7 +615,7 @@ menuitem.bookmark-item { margin: 1px 3px; } -#nav-bar[iconsize="small"][mode="icons"] .toolbarbutton-1 { +#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar .toolbarbutton-1 { margin-left: 2px; margin-right: 2px; } @@ -732,7 +737,7 @@ toolbar[mode="full"] .toolbarbutton-1 > .toolbarbutton-menubutton-button { -moz-image-region: rect(0, 36px, 18px, 18px); } -toolbar:not([iconsize="small"])[mode="icons"] #back-button { +#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button { -moz-image-region: rect(18px, 20px, 38px, 0); } @@ -743,12 +748,12 @@ toolbar:not([iconsize="small"])[mode="icons"] #back-button { } #nav-bar #back-button { - -moz-margin-end: 0; + -moz-margin-end: 0 !important; } #nav-bar #forward-button { - border-left: none; - -moz-margin-start: 0; + border-left-style: none; + -moz-margin-start: 0 !important; } #nav-bar #back-button:-moz-locale-dir(ltr) { @@ -762,7 +767,7 @@ toolbar:not([iconsize="small"])[mode="icons"] #back-button { border-bottom-left-radius: 0; } -#nav-bar:not([iconsize="small"])[mode="icons"] #back-button { +#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button { border-radius: 10000px; padding: 0; width: 30px; @@ -782,7 +787,7 @@ toolbar:not([iconsize="small"])[mode="icons"] #back-button { 1px 2px 1px rgba(0,0,0,.2); } -#nav-bar:not([iconsize="small"])[mode="icons"] #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover { +#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover { box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset, 0 0 0 2px rgba(255,255,255,.1) inset, 0 0 0 1px hsla(190,50%,40%,.3), @@ -792,34 +797,34 @@ toolbar:not([iconsize="small"])[mode="icons"] #back-button { 0 0 5px 1px hsl(190,90%,80%); } -#nav-bar:not([iconsize="small"])[mode="icons"] #back-button:not([disabled="true"]):hover:active, -#nav-bar:not([iconsize="small"])[mode="icons"] #back-button[open="true"] { +#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button:not([disabled="true"]):hover:active, +#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button[open="true"] { box-shadow: 0 0 6.5px rgba(0,0,0,.4) inset, 0 0 2px rgba(0,0,0,.4) inset, 0 0 0 1px rgba(0,0,0,.65), 0 2px 0 rgba(255,255,255,.4); } -#nav-bar:not([iconsize="small"])[mode="icons"][currentset*="unified-back-forward-button"], -#nav-bar:not([iconsize="small"])[mode="icons"]:not([currentset]) { +#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button"], +#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar:not([currentset]) { padding-top: 3px; padding-bottom: 5px; } -#navigator-toolbox[tabsontop="true"] > #nav-bar:not([iconsize="small"])[mode="icons"][currentset*="unified-back-forward-button"], -#navigator-toolbox[tabsontop="true"] > #nav-bar:not([iconsize="small"])[mode="icons"]:not([currentset]) { +#navigator-toolbox[iconsize="large"][mode="icons"][tabsontop="true"] > #nav-bar[currentset*="unified-back-forward-button"], +#navigator-toolbox[iconsize="large"][mode="icons"][tabsontop="true"] > #nav-bar:not([currentset]) { padding-top: 5px; } -#nav-bar:not([iconsize="small"])[mode="icons"] #forward-button { +#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #forward-button { /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */ mask: url(chrome://browser/content/browser.xul#winstripe-keyhole-forward-mask); - -moz-margin-start: -6px; + -moz-margin-start: -6px !important; padding-left: 7px; padding-right: 3px; } -#nav-bar:not([iconsize="small"])[mode="icons"] #forward-button:not([disabled="true"]):not(:active):hover { +#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #forward-button:not([disabled="true"]):not(:active):hover { /*mask: url(keyhole-forward-mask.svg#mask-hover);*/ mask: url(chrome://browser/content/browser.xul#winstripe-keyhole-forward-mask-hover); /* Don't animate the box shadow, as the blur and spread radii affect the mask. */ diff --git a/toolkit/content/customizeToolbar.js b/toolkit/content/customizeToolbar.js index 9654f3c0788a..ce0cf660c4e4 100644 --- a/toolkit/content/customizeToolbar.js +++ b/toolkit/content/customizeToolbar.js @@ -167,11 +167,11 @@ function notifyParentComplete() dispatchCustomizationEvent("aftercustomization"); } -function toolboxChanged(aEvent) +function toolboxChanged(aType) { gToolboxChanged = true; if ("customizeChange" in gToolbox) - gToolbox.customizeChange(aEvent); + gToolbox.customizeChange(aType); dispatchCustomizationEvent("customizationchange"); } @@ -696,6 +696,8 @@ function updateToolboxProperty(aProp, aValue, aToolkitDefault) { gToolboxDocument.persist(toolbar.id, aProp); }); + toolboxChanged(aProp); + return aValue || toolboxDefault; }