From 0075c6ec0743b0c015b74303b302fbb168f57ff0 Mon Sep 17 00:00:00 2001 From: wuggy Date: Sun, 5 Apr 2026 03:04:36 +0100 Subject: [PATCH] Fix CSS in OSX --- application/basilisk/app/profile/basilisk.js | 13 + .../preferences/in-content/content.xul | 2 + application/basilisk/themes/osx/jar.mn | 2 +- .../basilisk/themes/windows/browser.css | 260 +++++++++++++++++- toolkit/themes/osx/global/tabbox.css | 198 ++++++------- 5 files changed, 363 insertions(+), 112 deletions(-) diff --git a/application/basilisk/app/profile/basilisk.js b/application/basilisk/app/profile/basilisk.js index 0a98a12bdf..0f52e65856 100644 --- a/application/basilisk/app/profile/basilisk.js +++ b/application/basilisk/app/profile/basilisk.js @@ -918,14 +918,27 @@ pref("browser.flash-protected-mode-flip.done", false); pref("dom.ipc.shims.enabledWarnings", false); // Start the browser in e10s mode +// Disable e10s on OS X, unstable (prob due to being software only idk) +#ifdef XP_MACOSX +pref("browser.tabs.remote.autostart", false); +pref("browser.tabs.remote.force-enable", false); +pref("browser.tabs.remote.force-disable", true); +pref("browser.tabs.remote.desktopbehavior", false); +pref("browser.tabs.remote.ignoreBlockPolicy", false); +#else pref("browser.tabs.remote.autostart", true); pref("browser.tabs.remote.force-enable", true); pref("browser.tabs.remote.force-disable", false); pref("browser.tabs.remote.desktopbehavior", true); pref("browser.tabs.remote.ignoreBlockPolicy", true); +#endif // Number of web content processes used by e10s. // Keep this at a fixed value in this tree; automatic -1 mode is not supported. +#ifdef XP_MACOSX +pref("dom.ipc.processCount", 1); +#else pref("dom.ipc.processCount", 4); +#endif // This pref governs whether we attempt to work around problems caused by // plugins using OS calls to manipulate the cursor while running out-of- diff --git a/application/basilisk/components/preferences/in-content/content.xul b/application/basilisk/components/preferences/in-content/content.xul index b2e18d79d2..0cfdc424bf 100644 --- a/application/basilisk/components/preferences/in-content/content.xul +++ b/application/basilisk/components/preferences/in-content/content.xul @@ -215,6 +215,7 @@ accesskey="&javascriptWasm.accesskey;" /> +#ifdef MOZ_WEBRTC +#endif diff --git a/application/basilisk/themes/osx/jar.mn b/application/basilisk/themes/osx/jar.mn index 92d2ceedf5..2c584712dd 100644 --- a/application/basilisk/themes/osx/jar.mn +++ b/application/basilisk/themes/osx/jar.mn @@ -12,7 +12,7 @@ browser.jar: #endif skin/classic/browser/actionicon-tab.png skin/classic/browser/actionicon-tab@2x.png -* skin/classic/browser/browser.css +* skin/classic/browser/browser.css (../windows/browser.css) * skin/classic/browser/devedition.css * skin/classic/browser/browser-lightweightTheme.css skin/classic/browser/click-to-play-warning-stripes.png diff --git a/application/basilisk/themes/windows/browser.css b/application/basilisk/themes/windows/browser.css index a45d4985f1..29453584ad 100644 --- a/application/basilisk/themes/windows/browser.css +++ b/application/basilisk/themes/windows/browser.css @@ -7,8 +7,30 @@ @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); @-moz-document url("chrome://browser/content/browser.xul") { +%ifdef XP_MACOSX + /* When this Windows theme is used on macOS, keep titlebar metrics aligned + * with Cocoa so the top chrome doesn't get clipped. */ + #main-window > #titlebar, + #main-window[tabsintitlebar] > #titlebar { + min-height: 22px !important; + } + + #titlebar-buttonbox, + #titlebar-buttonbox-container, + #main-window[sizemode="normal"] #TabsToolbar, + #main-window[sizemode="maximized"] #TabsToolbar { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + + .titlebar-button { + height: 22px !important; + margin-bottom: 0 !important; + } +%endif + :root { - font-family: 'Segoe UI', sans-serif; + font-family: "Segoe UI", "Lucida Grande", "Helvetica Neue", sans-serif; } /* MAIN WINDOW & TITLEBAR BUTTONS */ @@ -25,7 +47,7 @@ padding: 0 !important; width: 46px !important; height: 32px !important; - font-family: "Segoe UI" !important; + font-family: "Segoe UI", "Lucida Grande", "Helvetica Neue", sans-serif !important; } @@ -150,7 +172,7 @@ color: var(--inactive-font-color) !important; background-color: var(--second-level-bg-color) !important; border: none !important; - font-family: "Segoe UI" !important; + font-family: "Segoe UI", "Lucida Grande", "Helvetica Neue", sans-serif !important; font-size: 12px; } @@ -686,7 +708,7 @@ border: none !important; background-color: var(--top-level-bg-color) !important; color: var(--main-font-color) !important; - font-family: "Segoe UI" !important; + font-family: "Segoe UI", "Lucida Grande", "Helvetica Neue", sans-serif !important; } #urlbar[focused] { @@ -5444,3 +5466,233 @@ toolbar[brighttext] thumb:hover, toolbar[brighttext] scrollbarbutton:hover { background-color: #6a6a6a !important; } + +%ifdef XP_MACOSX +/* Final macOS pass for Windows CSS port: + * keep native-style top chrome geometry stable and controls visible. */ +#main-window > #titlebar, +#main-window[tabsintitlebar] > #titlebar { + min-height: 30px !important; + height: 30px !important; +} + +#main-window > #titlebar > #titlebar-content, +#main-window[tabsintitlebar] > #titlebar > #titlebar-content { + min-height: 30px !important; + height: 30px !important; +} + +#titlebar-buttonbox-container, +#titlebar-buttonbox, +#titlebar-min, +#titlebar-max, +#titlebar-close, +#minimize-button, +#restore-button, +#close-button { + display: -moz-box !important; + visibility: visible !important; +} + +#titlebar-buttonbox-container, +#titlebar-buttonbox { + margin: 0 !important; + padding: 0 !important; +} + +/* Keep custom titlebar, but render macOS traffic-light controls inside it. */ +#titlebar-buttonbox-container { + -moz-box-ordinal-group: 0 !important; + margin-left: 8px !important; + margin-right: 0 !important; + z-index: 20 !important; +} + +#titlebar-buttonbox { + -moz-box-align: center !important; + min-height: 30px !important; +} + +.titlebar-button, +#titlebar-min, +#titlebar-max, +#titlebar-close, +#minimize-button, +#restore-button, +#close-button { + width: 12px !important; + height: 12px !important; + min-height: 12px !important; + margin-top: 0 !important; + margin-bottom: 0 !important; + margin-left: 0 !important; + margin-right: 6px !important; + padding: 0 !important; + border: none !important; + border-radius: 50% !important; + background-image: none !important; + list-style-image: none !important; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15) !important; +} + +/* Order buttons as macOS traffic lights: close, minimize, zoom. */ +#titlebar-close, +#close-button { + -moz-box-ordinal-group: 1 !important; +} + +#titlebar-min, +#minimize-button { + -moz-box-ordinal-group: 2 !important; +} + +#titlebar-max, +#restore-button { + -moz-box-ordinal-group: 3 !important; +} + +#titlebar-min, +#minimize-button { + -moz-appearance: none !important; + background-color: #febc2e !important; +} + +#titlebar-max, +#restore-button { + -moz-appearance: none !important; + background-color: #28c840 !important; +} + +/* In maximized mode, Windows-specific selectors have higher specificity. + * Re-assert fixed traffic-light sizing to prevent stretched green button. */ +#main-window[sizemode="maximized"] #titlebar-max, +#main-window[sizemode="maximized"] #restore-button { + width: 12px !important; + height: 12px !important; + min-height: 12px !important; + border-radius: 50% !important; + background-color: #28c840 !important; +} + +#titlebar-close, +#close-button { + -moz-appearance: none !important; + background-color: #ff5f57 !important; +} + +/* Dark mode traffic light colors */ +#main-window[lwtheme-brighttext] #titlebar-min, +#main-window[lwtheme-brighttext] #minimize-button, +:root[data-theme="dark"] #titlebar-min, +:root[data-theme="dark"] #minimize-button { + background-color: #ffbd44 !important; +} + +#main-window[lwtheme-brighttext] #titlebar-max, +#main-window[lwtheme-brighttext] #restore-button, +:root[data-theme="dark"] #titlebar-max, +:root[data-theme="dark"] #restore-button { + background-color: #00ca4e !important; +} + +#main-window[sizemode="maximized"][lwtheme-brighttext] #titlebar-max, +#main-window[sizemode="maximized"][lwtheme-brighttext] #restore-button, +#main-window[sizemode="maximized"]:root[data-theme="dark"] #titlebar-max, +#main-window[sizemode="maximized"]:root[data-theme="dark"] #restore-button { + background-color: #00ca4e !important; +} + +#main-window[lwtheme-brighttext] #titlebar-close, +#main-window[lwtheme-brighttext] #close-button, +:root[data-theme="dark"] #titlebar-close, +:root[data-theme="dark"] #close-button { + background-color: #ff605c !important; +} + +#main-window[sizemode="normal"] #TabsToolbar, +#main-window[sizemode="maximized"] #TabsToolbar, +#main-window[tabsintitlebar] #toolbar-menubar ~ #TabsToolbar, +#main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar { + margin-top: 0 !important; + margin-left: 0 !important; + margin-bottom: 0 !important; + padding-top: 0 !important; + padding-inline-start: 76px !important; +} + +/* Neutralize Windows tabs-in-titlebar top offsets on macOS. */ +#toolbar-menubar:not([autohide=true]) ~ #TabsToolbar:not([inFullscreen]), +#toolbar-menubar[autohide=true]:not([inactive]) ~ #TabsToolbar:not([inFullscreen]), +#main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar, +#main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar { + margin-top: 0 !important; +} + +:root { + --space-above-tabbar: 0px !important; + --tab-toolbar-navbar-overlap: 0px !important; +} + +#main-window[tabsintitlebar] #TabsToolbar { + min-height: 30px !important; +} + +/* Keep the macOS tabstrip anchored; remove Windows floating offsets. */ +#main-window[tabsintitlebar] #tabbrowser-tabs, +#main-window[tabsintitlebar] .tabbrowser-tab, +#main-window[tabsintitlebar] .tabbrowser-tab > .tab-stack { + margin-top: 0 !important; + margin-bottom: 0 !important; + padding-top: 0 !important; +} + +#main-window[tabsintitlebar]:not([sizemode=fullscreen]) #tabbrowser-tabs { + position: static !important; + z-index: auto !important; +} + +/* Ensure webpage content uses the full client area on macOS. */ +#main-window > #tab-view-deck, +#main-window > #tab-view-deck > #browser-panel, +#main-window #appcontent, +#main-window #content, +#main-window .browserContainer, +#main-window .browserStack, +#main-window .tabbrowser-tabpanels, +#main-window #content browser, +#main-window #appcontent browser, +#main-window browser { + margin: 0 !important; + padding: 0 !important; + border: none !important; + box-shadow: none !important; + -moz-appearance: none !important; +} + +#main-window > #tab-view-deck, +#main-window > #tab-view-deck > #browser-panel, +#main-window #appcontent, +#main-window .browserStack, +#main-window .tabbrowser-tabpanels { + -moz-box-flex: 1 !important; +} + +/* SVG color adjustment for dark mode. */ +#main-window[lwtheme-brighttext] #PanelUI-popup svg, +#main-window[lwtheme-brighttext] .panel-arrow svg, +#main-window[lwtheme-brighttext] panelview svg, +:root[data-theme="dark"] #PanelUI-popup svg, +:root[data-theme="dark"] .panel-arrow svg, +:root[data-theme="dark"] panelview svg { + fill: currentColor !important; + filter: invert(100%) !important; +} + +/* Ensure panel backgrounds are appropriate for theme. */ +#main-window[lwtheme-brighttext] .panel-white, +:root[data-theme="dark"] .panel-white { + background-color: #2a2a2a !important; +} +%endif + +} diff --git a/toolkit/themes/osx/global/tabbox.css b/toolkit/themes/osx/global/tabbox.css index 4fcbac486d..6d58f6bd78 100644 --- a/toolkit/themes/osx/global/tabbox.css +++ b/toolkit/themes/osx/global/tabbox.css @@ -2,147 +2,131 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -/* - The default style of these tabs is that of an NSTabView with tabs at - the top in the "regular" size. These tabs can be used with or without - a tabbox element. - For bottom tabs you should use the "tabs-bottom" class on the tabbox - or the tabs element. Bottom tabs use a style that's similar to the - one used in Adium. -*/ +/* ===== tabbox.css ================================================= + == Styles used by XUL tab-related elements. + ======================================================================= */ @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); -tabbox { - margin: 0 5px; +/* ::::: tabs ::::: */ + +.tabs-left, +.tabs-right { + border-bottom: 2px solid; + -moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow; } +/* ::::: tabpanels ::::: */ + tabpanels { - -moz-appearance: tabpanels; - padding: 33px 15px 15px; + -moz-appearance: tabpanels; + border-right: 2px solid; + border-bottom: 2px solid; + border-left: 2px solid; + -moz-border-right-colors: ThreeDDarkShadow ThreeDShadow; + -moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow; + -moz-border-left-colors: ThreeDHighlight ThreeDLightShadow; + background-color: -moz-Dialog; + color: -moz-DialogText; } -tabs { - -moz-box-align: center; - font: menu; -} +/* ::::: tab ::::: */ -tabbox > tabs { - padding: 0 10px; - margin-bottom: -12px; - position: relative; -} - -tab { +tab +{ -moz-appearance: tab; + margin-top: 2px; + border-top: 2px solid; + border-right: 2px solid; + border-left: 2px solid; + border-bottom: 1px solid ThreeDHighlight; + -moz-border-top-colors: ThreeDHighlight ThreeDLightShadow; + -moz-border-right-colors: ThreeDDarkShadow ThreeDShadow; + -moz-border-left-colors: ThreeDHighlight ThreeDLightShadow; + border-top-left-radius: 2px; + border-top-right-radius: 2px; + padding: 1px 4px 2px 4px; + background-color: -moz-Dialog; + color: -moz-DialogText; } -tab:-moz-focusring { - /* Tab focus rings need to overlay adjacent tabs. */ - position: relative; +tab:-moz-locale-dir(rtl) { + border-bottom-left-radius: 1px; + border-bottom-right-radius: 0px; } -tab:first-of-type { - padding-inline-start: 2px; -} - -tab:last-of-type { - padding-inline-end: 2px; +.tab-text { + margin: 0 !important; } tab[visuallyselected="true"] { - color: #FFF; - text-shadow: rgba(0, 0, 0, 0.4) 0 1px; + margin-top: 0; + border-bottom-color: transparent; + padding: 1px 6px 4px 6px; } -.tab-middle { - padding: 1px 6px 2px; +tab:-moz-focusring > .tab-middle { + /* Don't specify the outline-color, we should always use initial value. */ + outline: 1px dotted; } -.tabs-left, -.tabs-right { - -moz-box-flex: 1; +tab[beforeselected="true"]:-moz-locale-dir(ltr), +tab[visuallyselected="true"]:-moz-locale-dir(rtl) + tab { + border-right: none; + border-top-right-radius: 0; } -/* Tabs at the bottom - * These tabs are smaller, left aligned and don't extend into the tabpanel. - */ - -tabbox.tabs-bottom > tabpanels { - padding: 10px; +tab[visuallyselected="true"]:-moz-locale-dir(ltr) + tab, +tab[beforeselected="true"]:-moz-locale-dir(rtl) { + border-left: none; + border-top-left-radius: 0; } -tabbox.tabs-bottom > tabs, -tabs.tabs-bottom { - background-color: rgba(0, 0, 0, 0.1); - padding: 0; - margin: 0; - border-top: 2px solid; - -moz-border-top-colors: #888 rgba(0, 0, 0, 0.08); - -moz-box-align: start; - font: message-box; +tab:first-of-type[visuallyselected="true"] { + padding-right: 5px; + padding-left: 5px; } -tabbox.tabs-bottom > tabs > .tabs-left, -tabs.tabs-bottom > .tabs-left { - -moz-box-flex: 0; +/* ::::: tab-bottom :::::::::: + :: Tabs that are attached to the bottom of a panel, but not necessarily + :: a tabpanels. + ::::: */ + +.tab-bottom { + margin-top: 0; + margin-bottom: 2px; + border-top: 1px solid; + border-bottom: 2px solid; + -moz-border-top-colors: ThreeDShadow; + -moz-border-bottom-colors: ThreeDShadow ThreeDLightShadow; + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 2px; + border-bottom-left-radius: 2px; + padding: 2px 4px 1px 4px; } -tabbox.tabs-bottom > tabs > tab, -tabs.tabs-bottom > tab { - -moz-appearance: none; - margin: -1px 0 0; - padding: 0 0 2px 0; - position: relative; - border-inline-end: 1px solid rgba(0, 0, 0, 0.19); +.tab-bottom[visuallyselected="true"] { + margin-bottom: 0; + -moz-border-top-colors: -moz-Dialog; + padding: 4px 6px 1px 6px; } -tabbox.tabs-bottom > tabs > tab > .tab-middle, -tabs.tabs-bottom > tab > .tab-middle { - padding: 1px 2px 0 2px; +.tab-bottom[beforeselected="true"]:-moz-locale-dir(ltr), +.tab-bottom[visuallyselected="true"]:-moz-locale-dir(rtl) + .tab-bottom { + border-bottom-right-radius: 0; } -tabbox.tabs-bottom > tabs > tab:not([visuallyselected=true]):hover, -tabs.tabs-bottom > tab:not([visuallyselected=true]):hover { - background-color: rgba(0, 0, 0, 0.1); - border-inline-end-color: rgba(0, 0, 0, 0.1); +.tab-bottom[visuallyselected="true"]:-moz-locale-dir(ltr) + .tab-bottom, +.tab-bottom[beforeselected="true"]:-moz-locale-dir(rtl) { + border-bottom-left-radius: 0; } -tabbox.tabs-bottom > tabs > tab[visuallyselected=true], -tabs.tabs-bottom > tab[visuallyselected=true] { - color: #000; - text-shadow: none; - border: solid #888; - border-width: 0 2px 2px; - border-radius: 2px; - -moz-border-left-colors: rgba(0, 0, 0, 0.08) #888; - -moz-border-right-colors: rgba(0, 0, 0, 0.08) #888; - -moz-border-bottom-colors: rgba(0, 0, 0, 0.08) #888; - margin-inline-end: -1px; - margin-top: -2px; - margin-bottom: 1px; - padding: 0; +/* ::::: tabs-bottom ::::: */ + +.tabs-bottom > .tabs-left, +.tabs-bottom > .tabs-right { + border-top: 1px solid ThreeDShadow; + border-bottom: none; } -tabbox.tabs-bottom > tabs > tab[beforeselected=true], -tabs.tabs-bottom > tab[beforeselected=true] { - border-inline-end-color: transparent; - margin-inline-end: -2px; -} - -tabbox.tabs-bottom > tabs > tab:first-of-type:not([visuallyselected=true]), -tabs.tabs-bottom > tab:first-of-type:not([visuallyselected=true]) { - border-inline-start: 4px solid transparent; -} - -tabbox.tabs-bottom > tabs > tab:first-of-type[visuallyselected=true], -tabs.tabs-bottom > tab:first-of-type[visuallyselected=true] { - margin-inline-start: 2px; -} - -tabbox.tabs-bottom, -tabbox.tabs-bottom > tabpanels, -tabbox.tabs-bottom > tabs > tab[visuallyselected=true] > .tab-middle, -tabs.tabs-bottom > tab[visuallyselected=true] > .tab-middle { - -moz-appearance: dialog; -}