Fixed an overflow bug. Added mode-specific CSS style for Firefox.
Brian Vaughn committed
Jun 6, 2019 at 10:39 UTC
a987206a3698effcc064c59bd7ff518ba5d870f6
3 files changed
+18
-3
src/devtools/views/Components/Tree.css
+1
-1
@@ -28,7 +28,7 @@
28
29
.AutoSizerWrapper {
30
width: 100%;
31
- overflow: auto;
31
+ overflow: hidden;
32
flex: 1 0 auto;
33
}
34
.AutoSizerWrapper:focus {
src/devtools/views/Settings/SettingsContext.js
+13
-2
@@ -197,8 +197,8 @@ function updateDisplayDensity(
197
const fontSize = computedStyle.getPropertyValue(
198
`--${displayDensity}-root-font-size`
199
);
200
- const root = document.querySelector(':root');
201
- ((root: any): HTMLElement).style.fontSize = fontSize;
200
+ const root = ((document.querySelector(':root'): any): HTMLElement);
201
+ root.style.fontSize = fontSize;
202
}
203
204
function updateThemeVariables(
@@ -285,6 +285,8 @@ function updateThemeVariables(
285
updateStyleHelper(theme, 'color-record-active', documentElements);
286
updateStyleHelper(theme, 'color-record-hover', documentElements);
287
updateStyleHelper(theme, 'color-record-inactive', documentElements);
288
+ updateStyleHelper(theme, 'color-color-scroll-thumb', documentElements);
289
+ updateStyleHelper(theme, 'color-color-scroll-track', documentElements);
290
updateStyleHelper(theme, 'color-search-match', documentElements);
291
updateStyleHelper(theme, 'color-search-match-current', documentElements);
292
updateStyleHelper(
@@ -309,6 +311,15 @@ function updateThemeVariables(
311
312
// Font smoothing varies based on the theme.
313
updateStyleHelper(theme, 'font-smoothing', documentElements);
314
+
315
+ // Update scrollbar color to match theme.
316
+ // this CSS property is currently only supported in Firefox,
317
+ // but it makes a significant UI improvement in dark mode.
318
+ // https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
319
+ documentElements.forEach(documentElement => {
320
+ // $FlowFixMe scrollbarColor is missing in CSSStyleDeclaration
321
+ documentElement.style.scrollbarColor = `var(${`--${theme}-color-scroll-thumb`}) var(${`--${theme}-color-scroll-track`})`;
322
+ });
323
}
324
325
export { SettingsContext, SettingsContextController };
src/devtools/views/root.css
+4
@@ -52,6 +52,8 @@
52
--light-color-record-active: #fc3a4b;
53
--light-color-record-hover: #3578e5;
54
--light-color-record-inactive: #0088fa;
55
+ --light-color-scroll-thumb: #c2c2c2;
56
+ --light-color-scroll-track: #fafafa;
57
--light-color-search-match: yellow;
58
--light-color-search-match-current: #f7923b;
59
--light-color-selected-tree-highlight-active: rgba(0, 136, 250, 0.15);
@@ -115,6 +117,8 @@
117
--dark-color-record-active: #fc3a4b;
118
--dark-color-record-hover: #a2e9fc;
119
--dark-color-record-inactive: #61dafb;
120
+ --dark-color-scroll-thumb: #afb3b9;
121
+ --dark-color-scroll-track: #313640;
122
--dark-color-search-match: yellow;
123
--dark-color-search-match-current: #f7923b;
124
--dark-color-selected-tree-highlight-active: rgba(23, 143, 185, 0.15);