diff --git a/devtools/client/shared/theme-switching.js b/devtools/client/shared/theme-switching.js index 0eb275df4f86..fe50c3ef4b84 100644 --- a/devtools/client/shared/theme-switching.js +++ b/devtools/client/shared/theme-switching.js @@ -89,24 +89,22 @@ loadEvents.push(loadPromise); } - if (os !== "win") { - // Windows always uses native scrollbars, other platforms might use custom floating - // scrollbar implementation. - try { - const StylesheetUtils = require("devtools/shared/layout/utils"); - const SCROLLBARS_URL = "chrome://devtools/skin/floating-scrollbars-dark-theme.css"; - if (!Services.appShell.hiddenDOMWindow - .matchMedia("(-moz-overlay-scrollbars)").matches) { - if (newTheme == "dark") { - StylesheetUtils.loadSheet(window, SCROLLBARS_URL, "agent"); - } else if (oldTheme == "dark") { - StylesheetUtils.removeSheet(window, SCROLLBARS_URL, "agent"); - } - forceStyle(); + try { + const StylesheetUtils = require("devtools/shared/layout/utils"); + const SCROLLBARS_URL = "chrome://devtools/skin/floating-scrollbars-dark-theme.css"; + + // TODO: extensions might want to customize scrollbar styles too. + if (!Services.appShell.hiddenDOMWindow + .matchMedia("(-moz-overlay-scrollbars)").matches) { + if (newTheme == "dark") { + StylesheetUtils.loadSheet(window, SCROLLBARS_URL, "agent"); + } else if (oldTheme == "dark") { + StylesheetUtils.removeSheet(window, SCROLLBARS_URL, "agent"); } - } catch (e) { - console.warn("customize scrollbar styles is only supported in firefox"); + forceStyle(); } + } catch (e) { + console.warn("customize scrollbar styles is only supported in firefox"); } Promise.all(loadEvents).then(() => { diff --git a/devtools/client/themes/common.css b/devtools/client/themes/common.css index 81fa81f9f8e1..bc548e8636e4 100644 --- a/devtools/client/themes/common.css +++ b/devtools/client/themes/common.css @@ -31,13 +31,6 @@ --monospace-font-family: monospace; } -:root.theme-dark[platform="win"] { - /* Set colors for native scrollbars on Windows dark theme */ - /* Other platforms support for scrollbar theming is Bug 1460109 */ - scrollbar-face-color: var(--theme-body-color-inactive); - scrollbar-track-color: var(--theme-splitter-color); -} - .devtools-monospace { font-family: var(--monospace-font-family); } diff --git a/devtools/client/themes/floating-scrollbars-dark-theme.css b/devtools/client/themes/floating-scrollbars-dark-theme.css index 76a998fbc2cc..042fe28cc299 100644 --- a/devtools/client/themes/floating-scrollbars-dark-theme.css +++ b/devtools/client/themes/floating-scrollbars-dark-theme.css @@ -47,9 +47,13 @@ -moz-appearance: none !important; } +*|*:root[platform="win"] > scrollbar scrollbarbutton, *|*:root[platform="linux"] > scrollbar scrollbarbutton, +*|*:root[platform="win"] > scrollbar gripper, *|*:root[platform="linux"] > scrollbar gripper, +*|*:root[platform="win"] *|*:not(html|select) > scrollbar scrollbarbutton, *|*:root[platform="linux"] *|*:not(html|select) > scrollbar scrollbarbutton, +*|*:root[platform="win"] *|*:not(html|select) > scrollbar gripper, *|*:root[platform="linux"] *|*:not(html|select) > scrollbar gripper { display: none; }