Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-21 17:25:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1471163 - Remove devtools floating scrollbars and set scrollbar-color on Linux; r=jdescottes

Browse Source 
Remove the floating scrollbar implementation used on Linux now that CSS scrollbar-color
landed for Linux. Also force scrollbar-color for the DevTools light theme on Linux, to
avoid visual conflicts with dark GTK themes.

Differential Revision: https://phabricator.services.mozilla.com/D7858

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Florens Verschelde 2018-10-14 17:14:10 +00:00
parent c9272ef398
commit ccb44df343
6 changed files with 16 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
devtools/client/jar.mn
View File

@ -204,7 +204,6 @@ devtools.jar:
skin/images/jump-definition.svg (themes/images/jump-definition.svg)
skin/images/tracer-icon.png (themes/images/tracer-icon.png)
skin/images/tracer-icon@2x.png (themes/images/tracer-icon@2x.png)
skin/floating-scrollbars-dark-theme.css (themes/floating-scrollbars-dark-theme.css)
skin/floating-scrollbars-responsive-design.css (themes/floating-scrollbars-responsive-design.css)
skin/inspector.css (themes/inspector.css)
skin/images/profiler-stopwatch.svg (themes/images/profiler-stopwatch.svg)

36
devtools/client/shared/theme-switching.js
View File

@ -33,22 +33,6 @@
const devtoolsStyleSheets = new WeakMap();
let gOldTheme = "";
function forceStyle() {
const computedStyle = window.getComputedStyle(documentElement);
if (!computedStyle) {
// Null when documentElement is not ready. This method is anyways not
// required then as scrollbars would be in their state without flushing.
return;
}
// Save display value
const display = computedStyle.display;
documentElement.style.display = "none";
// Flush
window.getComputedStyle(documentElement).display;
// Restore
documentElement.style.display = display;
}
/*
* Notify the window that a theme switch finished so tests can check the DOM
*/
@ -89,26 +73,6 @@
loadEvents.push(loadPromise);
}
if (os !== "win" && os !== "mac") {
// Windows & Mac always use native scrollbars, Linux still uses 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();
}
} catch (e) {
console.warn("customize scrollbar styles is only supported in firefox");
}
}
Promise.all(loadEvents).then(() => {
// Unload all stylesheets and classes from the old theme.
if (oldThemeDef) {

16
devtools/client/sourceeditor/codemirror/mozilla.css
View File

@ -89,22 +89,6 @@
cursor: default;
}
/* This is to avoid the fake horizontal scrollbar div of codemirror to go 0
height when floating scrollbars are active. Make sure that this value is equal
to the maximum of `min-height` specific to the `scrollbar[orient="horizontal"]`
selector in floating-scrollbar-light.css across all platforms. */
.CodeMirror-hscrollbar {
min-height: 10px;
}
/* This is to avoid the fake vertical scrollbar div of codemirror to go 0
width when floating scrollbars are active. Make sure that this value is equal
to the maximum of `min-width` specific to the `scrollbar[orient="vertical"]`
selector in floating-scrollbar-light.css across all platforms. */
.CodeMirror-vscrollbar {
min-width: 10px;
}
.cm-trailingspace {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUXCToH00Y1UgAAACFJREFUCNdjPMDBUc/AwNDAAAFMTAwMDA0OP34wQgX/AQBYgwYEx4f9lQAAAABJRU5ErkJggg==");
opacity: 0.75;

16
devtools/client/themes/common.css
View File

@ -38,6 +38,22 @@
--monospace-font-family: monospace;
}
/**
* Customize the dark theme's scrollbar colors to avoid excessive contrast.
*/
:root.theme-dark {
scrollbar-color: var(--theme-body-color-inactive) var(--theme-splitter-color);
}
/**
* Customize scrollbar colors on Linux + light theme, to avoid visual conflicts
* between the light theme and the selected GTK theme (see bug 1471163).
* This removes GTK scrollbars and uses a fallback design (see bug 1464723).
*/
:root[platform="linux"].theme-light {
scrollbar-color: var(--theme-body-color-inactive) var(--grey-20);
}
.devtools-monospace {
font-family: var(--monospace-font-family);
font-size: var(--theme-code-font-size);

7
devtools/client/themes/dark-theme.css
View File

@ -27,13 +27,6 @@ body {
color: var(--theme-selection-color);
}
:root[platform="win"],
:root[platform="mac"] {
/* Set colors for native scrollbars on Windows dark theme */
/* Other platforms support for scrollbar theming is Bug 1460109 */
scrollbar-color: var(--theme-body-color-inactive) var(--theme-splitter-color);
}
.theme-selected,
.CodeMirror-hint-active {
background-color: var(--theme-selection-background);

55
devtools/client/themes/floating-scrollbars-dark-theme.css
View File

@ -1,55 +0,0 @@
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
/* Restrict all styles to `*|*:not(html|select) > scrollbar` so that scrollbars
inside a <select> are excluded (including them hides the select arrow on
Windows). We want to include both the root scrollbars for the document as
well as any overflow: scroll elements within the page, while excluding
<select>. */
*|*:not(html|select) > scrollbar {
-moz-appearance: none !important;
position: relative;
background-color: transparent;
background-image: none;
z-index: 2147483647;
padding: 2px;
pointer-events: auto;
}
*|*:root[platform="mac"] > scrollbar,
*|*:root[platform="mac"] *|*:not(html|select) > scrollbar {
border: none;
}
/* Scrollbar code will reset the margin to the correct side depending on
where layout actually puts the scrollbar */
*|*:not(html|select) > scrollbar[orient="vertical"] {
margin-left: -10px;
min-width: 10px;
max-width: 10px;
}
*|*:not(html|select) > scrollbar[orient="horizontal"] {
margin-top: -10px;
min-height: 10px;
max-height: 10px;
}
*|*:not(html|select) > scrollbar thumb {
background-color: rgba(170, 170, 170, .2) !important; /* --toolbar-tab-hover */
-moz-appearance: none !important;
border-width: 0px !important;
border-radius: 3px !important;
}
*|*:root[platform="mac"] > scrollbar slider,
*|*:root[platform="mac"] *|*:not(html|select) > scrollbar slider {
-moz-appearance: none !important;
}
*|*:root[platform="linux"] > scrollbar scrollbarbutton,
*|*:root[platform="linux"] > scrollbar gripper,
*|*:root[platform="linux"] *|*:not(html|select) > scrollbar scrollbarbutton,
*|*:root[platform="linux"] *|*:not(html|select) > scrollbar gripper {
display: none;
}