diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css index 7533c5abb122..adafd6a68133 100644 --- a/browser/base/content/browser.css +++ b/browser/base/content/browser.css @@ -173,7 +173,6 @@ toolbar[customizing] > .overflow-button { } %ifdef CAN_DRAW_IN_TITLEBAR -#main-window:not([chromemargin]) > #titlebar, #main-window[inFullscreen] > #titlebar, #main-window[inFullscreen] .titlebar-placeholder, #main-window:not([tabsintitlebar]) .titlebar-placeholder { diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js index cfbdb9f4868d..a081110c885d 100644 --- a/browser/base/content/browser.js +++ b/browser/base/content/browser.js @@ -4481,9 +4481,6 @@ var TabsInTitlebar = { // Try to avoid reflows in this code by calculating dimensions first and // then later set the properties affecting layout together in a batch. - // Get the full height of the tabs toolbar: - let tabsToolbar = $("TabsToolbar"); - let fullTabsHeight = rect(tabsToolbar).height; // Buttons first: let captionButtonsBoxWidth = rect($("titlebar-buttonbox")).width; #ifdef XP_MACOSX @@ -4498,9 +4495,11 @@ var TabsInTitlebar = { let menuHeight = rect(menubar).height; let menuStyles = window.getComputedStyle(menubar); let fullMenuHeight = verticalMargins(menuStyles) + menuHeight; - let tabsStyles = window.getComputedStyle(tabsToolbar); - fullTabsHeight += verticalMargins(tabsStyles); #endif + // Get the full height of the tabs toolbar: + let tabsToolbar = $("TabsToolbar"); + let tabsStyles = window.getComputedStyle(tabsToolbar); + let fullTabsHeight = rect(tabsToolbar).height + verticalMargins(tabsStyles); // If the navbar overlaps the tabbar using negative margins, we need to take those into // account so we don't overlap it @@ -4510,6 +4509,16 @@ var TabsInTitlebar = { // And get the height of what's in the titlebar: let titlebarContentHeight = rect(titlebarContent).height; + // Padding surrounds the tab-view-deck when we are in customization mode, + // so take that into account: + let areCustomizing = document.documentElement.hasAttribute("customizing") || + document.documentElement.hasAttribute("customize-exiting"); + let customizePadding = 0; + if (areCustomizing) { + let deckStyle = window.getComputedStyle($("tab-view-deck")); + customizePadding = parseFloat(deckStyle.paddingTop); + } + // Begin setting CSS properties which will cause a reflow // If the menubar is around (menuHeight is non-zero), try to adjust @@ -4542,6 +4551,10 @@ var TabsInTitlebar = { // Next, we calculate how much we need to stretch the titlebar down to // go all the way to the bottom of the tab strip, if necessary. let tabAndMenuHeight = fullTabsHeight + fullMenuHeight; + // Oh, and don't forget customization mode: + if (areCustomizing) { + tabAndMenuHeight += customizePadding; + } if (tabAndMenuHeight > titlebarContentHeight) { // We need to increase the titlebar content's outer height (ie including margins) @@ -4553,6 +4566,12 @@ var TabsInTitlebar = { // On non-OSX, we can just use bottom margin: #ifndef XP_MACOSX titlebarContent.style.marginBottom = extraMargin + "px"; +#else + // Otherwise, center the content. This means taking the titlebar's + // padding into account: + let halfMargin = (extraMargin - titlebarPadding) / 2; + titlebarContent.style.marginTop = halfMargin + "px"; + titlebarContent.style.marginBottom = (titlebarPadding + halfMargin) + "px"; #endif titlebarContentHeight += extraMargin; } @@ -4587,7 +4606,6 @@ var TabsInTitlebar = { updateTitlebarDisplay(); // Reset the margins and padding that might have been modified: - titlebarContent.style.marginTop = ""; titlebarContent.style.marginBottom = ""; titlebar.style.marginBottom = ""; menubar.style.paddingBottom = ""; @@ -4612,37 +4630,16 @@ var TabsInTitlebar = { #ifdef CAN_DRAW_IN_TITLEBAR function updateTitlebarDisplay() { - -#ifdef XP_MACOSX - // OS X and the other platforms differ enough to necessitate this kind of - // special-casing. Like the other platforms where we CAN_DRAW_IN_TITLEBAR, - // we draw in the OS X titlebar when putting the tabs up there. However, OS X - // also draws in the titlebar when a lightweight theme is applied, regardless - // of whether or not the tabs are drawn in the titlebar. - if (TabsInTitlebar.enabled) { - document.documentElement.setAttribute("chromemargin-nonlwtheme", "0,-1,-1,-1"); - document.documentElement.setAttribute("chromemargin", "0,-1,-1,-1"); - document.documentElement.removeAttribute("drawtitle"); - } else { - // We set chromemargin-nonlwtheme to "" instead of removing it as a way of - // making sure that LightweightThemeConsumer doesn't take it upon itself to - // detect this value again if and when we do a lwtheme state change. - document.documentElement.setAttribute("chromemargin-nonlwtheme", ""); - let isCustomizing = document.documentElement.hasAttribute("customizing"); - let hasLWTheme = document.documentElement.hasAttribute("lwtheme"); - if (!hasLWTheme || isCustomizing) { - document.documentElement.removeAttribute("chromemargin"); - } - document.documentElement.setAttribute("drawtitle", "true"); - } - -#else + document.getElementById("titlebar").hidden = !TabsInTitlebar.enabled; if (TabsInTitlebar.enabled) +#ifdef XP_WIN document.documentElement.setAttribute("chromemargin", "0,2,2,2"); +#else + document.documentElement.setAttribute("chromemargin", "0,-1,-1,-1"); +#endif else document.documentElement.removeAttribute("chromemargin"); -#endif } #endif diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css index 47ebbc53a88b..88bcad0b0d67 100644 --- a/browser/themes/osx/browser.css +++ b/browser/themes/osx/browser.css @@ -59,7 +59,7 @@ } } -#main-window[chromehidden~="toolbar"]:not(:-moz-lwtheme) > #titlebar { +#main-window[chromehidden~="toolbar"] > #titlebar { padding-top: 22px; } @@ -2658,7 +2658,7 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker { box-shadow: @focusRingShadow@; } -#main-window:not(:-moz-lwtheme) > #titlebar { +#titlebar { padding-top: @spaceAboveTabbar@; min-height: @tabHeight@; } @@ -4093,26 +4093,13 @@ window > chatbox { %include ../shared/customizableui/customizeMode.inc.css -#main-window[customize-entered] > #titlebar { +#main-window[customize-entered] #titlebar { padding-top: 0; } -#main-window[tabsintitlebar]:not([customizing]):not(:-moz-lwtheme) > #titlebar > #titlebar-content, -#main-window[tabsintitlebar][customize-entering] > #titlebar > #titlebar-content, -#main-window[tabsintitlebar][customize-exiting] > #titlebar > #titlebar-content { - margin-top: 2px; - margin-bottom: 11px; -} - -#main-window[tabsintitlebar][customize-entered] > #titlebar > #titlebar-content, -#main-window:not([tabsintitlebar]):not(:-moz-lwtheme) > #titlebar > #titlebar-content { - margin-top: 11px; - margin-bottom: 0px; -} - -#main-window[tabsintitlebar]:-moz-lwtheme > #titlebar > #titlebar-content { - margin-top: 11px; - margin-bottom: 11px; +#main-window[tabsintitlebar][customize-entered] #titlebar-content { + margin-bottom: 0px !important; + margin-top: 11px !important; } #main-window[customize-entered] #tab-view-deck { @@ -4137,11 +4124,8 @@ window > chatbox { border-bottom-width: 0; } -#main-window[tabsintitlebar][customize-entered] #TabsToolbar { - margin-top: 9px; -} - #main-window[customize-entered] #TabsToolbar { + margin-top: 9px; background-clip: padding-box; border-right: 3px solid transparent; border-left: 3px solid transparent; diff --git a/toolkit/modules/LightweightThemeConsumer.jsm b/toolkit/modules/LightweightThemeConsumer.jsm index 611b640579b2..0e3f8fbd5940 100644 --- a/toolkit/modules/LightweightThemeConsumer.jsm +++ b/toolkit/modules/LightweightThemeConsumer.jsm @@ -42,7 +42,9 @@ LightweightThemeConsumer.prototype = { _lastScreenWidth: null, _lastScreenHeight: null, _enabled: true, - _active: false, +#ifdef XP_MACOSX + _chromemarginDefault: undefined, +#endif enable: function() { this._enabled = true; @@ -98,9 +100,8 @@ LightweightThemeConsumer.prototype = { if (!this._enabled) return; - let root = this._doc.documentElement; - let active = !!aData.headerURL; - let stateChanging = (active != this._active); + var root = this._doc.documentElement; + var active = !!aData.headerURL; if (active) { root.style.color = aData.textcolor || "black"; @@ -116,8 +117,6 @@ LightweightThemeConsumer.prototype = { root.removeAttribute("lwtheme"); } - this._active = active; - _setImage(root, active, aData.headerURL); if (this._footerId) { let footer = this._doc.getElementById(this._footerId); @@ -130,26 +129,20 @@ LightweightThemeConsumer.prototype = { } #ifdef XP_MACOSX - // On OS X, we extend the lightweight theme into the titlebar, which means setting - // the chromemargin attribute. Some XUL applications already draw in the titlebar, - // so we need to save the chromemargin value before we overwrite it with the value - // that lets us draw in the titlebar. We stash this value on the root attribute so - // that XUL applications have the ability to invalidate the saved value. - if (stateChanging) { - if (!root.hasAttribute("chromemargin-nonlwtheme")) { - root.setAttribute("chromemargin-nonlwtheme", root.getAttribute("chromemargin")); - } + // Sample whether or not we draw in the titlebar by default the first time we update. + // If the root has no chromemargin attribute, getAttribute will return null, and + // we'll remove the attribute when the lw-theme is deactivated. + if (this._chromemarginDefault === undefined) + this._chromemarginDefault = root.getAttribute("chromemargin"); - if (active) { - root.setAttribute("chromemargin", "0,-1,-1,-1"); - } else { - let defaultChromemargin = root.getAttribute("chromemargin-nonlwtheme"); - if (defaultChromemargin) { - root.setAttribute("chromemargin", defaultChromemargin); - } else { - root.removeAttribute("chromemargin"); - } - } + if (active) { + root.setAttribute("chromemargin", "0,-1,-1,-1"); + } + else { + if (this._chromemarginDefault) + root.setAttribute("chromemargin", this._chromemarginDefault); + else + root.removeAttribute("chromemargin"); } #endif }