@samitouri / QOS-React-2 / commits / f74c89b145

Misc improvements based on user feedback from Tim

* Added shadow to modals * Change default "collapse new nodes" to be disabled rather than enabled * Changed setting label "Collapse newly added components by default" to "Expand component tree by default" * Change CSS media query for settings popup to show labels at smaller size * Hide "Inspect the matching DOM element" button (since it doesnt really serve a purpose in standalone) * Fixed small size bug for settings icon (viewbox of 20x20 instead of 24x24) * bugfix: window.addEventListener/window.removeEventListener is not defined in Hermes.

Brian Vaughn committed Jul 24, 2019 at 11:25 UTC f74c89b145c3ed48b0e6e6185c915b96c7f161dc
19 files changed +148 -82
packages/react-devtools-core/src/standalone.js
+1
@@ -85,6 +85,7 @@ function reload() {
85 root.render(
86 createElement(DevTools, {
87 bridge: ((bridge: any): FrontendBridge),
88 + isBrowserMode: false,
89 showTabBar: true,
90 store: ((store: any): Store),
91 warnIfLegacyBackendDetected: true,
src/backend/renderer.js
+9 -3
@@ -135,6 +135,12 @@ type ReactTypeOfSideEffectType = {|
135 Placement: number,
136 |};
137
138 +// Some environments (e.g. React Native / Hermes) don't support the performace API yet.
139 +const getCurrentTime =
140 + typeof performance === 'object' && typeof performance.now === 'function'
141 + ? () => performance.now()
142 + : () => Date.now();
143 +
144 export function getInternalReactConstants(
145 version: string
146 ): {|
@@ -1645,7 +1651,7 @@ export function attach(
1651 currentCommitProfilingMetadata = {
1652 changeDescriptions: recordChangeDescriptions ? new Map() : null,
1653 durations: [],
1648 - commitTime: performance.now() - profilingStartTime,
1654 + commitTime: getCurrentTime() - profilingStartTime,
1655 interactions: Array.from(root.memoizedInteractions).map(
1656 (interaction: Interaction) => ({
1657 ...interaction,
@@ -1689,7 +1695,7 @@ export function attach(
1695 currentCommitProfilingMetadata = {
1696 changeDescriptions: recordChangeDescriptions ? new Map() : null,
1697 durations: [],
1692 - commitTime: performance.now() - profilingStartTime,
1698 + commitTime: getCurrentTime() - profilingStartTime,
1699 interactions: Array.from(root.memoizedInteractions).map(
1700 (interaction: Interaction) => ({
1701 ...interaction,
@@ -2738,7 +2744,7 @@ export function attach(
2744 });
2745
2746 isProfiling = true;
2741 - profilingStartTime = performance.now();
2747 + profilingStartTime = getCurrentTime();
2748 rootToCommitProfilingMetadataMap = new Map();
2749 }
2750
src/backend/views/Highlighter/index.js
+25 -14
@@ -7,6 +7,11 @@ import { hideOverlay, showOverlay } from './Highlighter';
7
8 import type { BackendBridge } from 'src/bridge';
9
10 +// This plug-in provides in-page highlighting of the selected element.
11 +// It is used by the browser extension nad the standalone DevTools shell (when connected to a browser).
12 +// It is not currently the mechanism used to highlight React Native views.
13 +// That is done by the React Native Inspector component.
14 +
15 export default function setupHighlighter(
16 bridge: BackendBridge,
17 agent: Agent
@@ -21,25 +26,31 @@ export default function setupHighlighter(
26 bridge.addListener('stopInspectingNative', stopInspectingNative);
27
28 function startInspectingNative() {
24 - window.addEventListener('click', onClick, true);
25 - window.addEventListener('mousedown', onMouseEvent, true);
26 - window.addEventListener('mouseover', onMouseEvent, true);
27 - window.addEventListener('mouseup', onMouseEvent, true);
28 - window.addEventListener('pointerdown', onPointerDown, true);
29 - window.addEventListener('pointerover', onPointerOver, true);
30 - window.addEventListener('pointerup', onPointerUp, true);
29 + // This plug-in may run in non-DOM environments (e.g. React Native).
30 + if (window && typeof window.addEventListener === 'function') {
31 + window.addEventListener('click', onClick, true);
32 + window.addEventListener('mousedown', onMouseEvent, true);
33 + window.addEventListener('mouseover', onMouseEvent, true);
34 + window.addEventListener('mouseup', onMouseEvent, true);
35 + window.addEventListener('pointerdown', onPointerDown, true);
36 + window.addEventListener('pointerover', onPointerOver, true);
37 + window.addEventListener('pointerup', onPointerUp, true);
38 + }
39 }
40
41 function stopInspectingNative() {
42 hideOverlay();
43
36 - window.removeEventListener('click', onClick, true);
37 - window.removeEventListener('mousedown', onMouseEvent, true);
38 - window.removeEventListener('mouseover', onMouseEvent, true);
39 - window.removeEventListener('mouseup', onMouseEvent, true);
40 - window.removeEventListener('pointerdown', onPointerDown, true);
41 - window.removeEventListener('pointerover', onPointerOver, true);
42 - window.removeEventListener('pointerup', onPointerUp, true);
44 + // This plug-in may run in non-DOM environments (e.g. React Native).
45 + if (window && typeof window.removeEventListener === 'function') {
46 + window.removeEventListener('click', onClick, true);
47 + window.removeEventListener('mousedown', onMouseEvent, true);
48 + window.removeEventListener('mouseover', onMouseEvent, true);
49 + window.removeEventListener('mouseup', onMouseEvent, true);
50 + window.removeEventListener('pointerdown', onPointerDown, true);
51 + window.removeEventListener('pointerover', onPointerOver, true);
52 + window.removeEventListener('pointerup', onPointerUp, true);
53 + }
54 }
55
56 function clearNativeElementHighlight() {
src/devtools/store.js
+2 -3
@@ -136,10 +136,9 @@ export default class Store extends EventEmitter<{|
136 debug('constructor', 'subscribing to Bridge');
137 }
138
139 - // Default this setting to true unless otherwise specified.
139 this._collapseNodesByDefault =
141 - localStorageGetItem(LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY) !==
142 - 'false';
140 + localStorageGetItem(LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY) ===
141 + 'true';
142
143 this._recordChangeDescriptions =
144 localStorageGetItem(LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY) ===
src/devtools/views/ButtonIcon.js
+7 -6
@@ -208,12 +208,13 @@ const PATH_SEARCH = `
208 `;
209
210 const PATH_SETTINGS = `
211 - M15.95 10.78c.03-.25.05-.51.05-.78s-.02-.53-.06-.78l1.69-1.32c.15-.12.19-.34.1-.51l-1.6-2.77c-.1-.18-.31-.24-.49-.18l-1.99.8c-.42-.32-.86-.58-1.35-.78L12
212 - 2.34c-.03-.2-.2-.34-.4-.34H8.4c-.2 0-.36.14-.39.34l-.3 2.12c-.49.2-.94.47-1.35.78l-1.99-.8c-.18-.07-.39
213 - 0-.49.18l-1.6 2.77c-.1.18-.06.39.1.51l1.69
214 - 1.32c-.04.25-.07.52-.07.78s.02.53.06.78L2.37 12.1c-.15.12-.19.34-.1.51l1.6 2.77c.1.18.31.24.49.18l1.99-.8c.42.32.86.58
215 - 1.35.78l.3 2.12c.04.2.2.34.4.34h3.2c.2 0 .37-.14.39-.34l.3-2.12c.49-.2.94-.47 1.35-.78l1.99.8c.18.07.39 0
216 - .49-.18l1.6-2.77c.1-.18.06-.39-.1-.51l-1.67-1.32zM10 13c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z
211 + M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49
212 + 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38
213 + 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11
214 + 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4
215 + 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49
216 + 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5
217 + 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z
218 `;
219
220 const PATH_SUSPEND = `
src/devtools/views/Components/Components.js
+2 -2
@@ -13,7 +13,7 @@ import { SettingsModalContextController } from 'src/devtools/views/Settings/Sett
13
14 import styles from './Components.css';
15
16 -function Components(_: {||}) {
16 +function Components({ isBrowserMode }: {| isBrowserMode?: boolean |}) {
17 // TODO Flex wrappers below should be user resizable.
18 return (
19 <SettingsModalContextController>
@@ -26,7 +26,7 @@ function Components(_: {||}) {
26 <div className={styles.SelectedElementWrapper}>
27 <NativeStyleContextController>
28 <Suspense fallback={<Loading />}>
29 - <SelectedElement />
29 + <SelectedElement isBrowserMode={isBrowserMode} />
30 </Suspense>
31 </NativeStyleContextController>
32 </div>
src/devtools/views/Components/SelectedElement.css
-1
@@ -74,7 +74,6 @@
74 }
75
76 .CannotSuspendWarningMessage {
77 - font-size: var(--font-size-sans-large);
77 }
78
79 .NotInStore {
src/devtools/views/Components/SelectedElement.js
+13 -9
@@ -30,9 +30,11 @@ import type { GetInspectedElementPath } from './InspectedElementContext';
30 import type { Element, InspectedElement } from './types';
31 import type { ElementType } from 'src/types';
32
33 -export type Props = {||};
33 +export type Props = {|
34 + isBrowserMode?: boolean,
35 +|};
36
35 -export default function SelectedElement(_: Props) {
37 +export default function SelectedElement({ isBrowserMode }: Props) {
38 const { inspectedElementID } = useContext(TreeStateContext);
39 const dispatch = useContext(TreeDispatcherContext);
40 const { isFileLocationRequired, viewElementSourceFunction } = useContext(
@@ -186,13 +188,15 @@ export default function SelectedElement(_: Props) {
188 <ButtonIcon type="suspend" />
189 </Toggle>
190 )}
189 - <Button
190 - className={styles.IconButton}
191 - onClick={highlightElement}
192 - title="Inspect the matching DOM element"
193 - >
194 - <ButtonIcon type="view-dom" />
195 - </Button>
191 + {isBrowserMode && (
192 + <Button
193 + className={styles.IconButton}
194 + onClick={highlightElement}
195 + title="Inspect the matching DOM element"
196 + >
197 + <ButtonIcon type="view-dom" />
198 + </Button>
199 + )}
200 <Button
201 className={styles.IconButton}
202 onClick={logElement}
src/devtools/views/DevTools.js
+7 -2
@@ -37,6 +37,7 @@ export type Props = {|
37 bridge: FrontendBridge,
38 browserTheme?: BrowserTheme,
39 defaultTab?: TabID,
40 + isBrowserMode?: boolean,
41 showTabBar?: boolean,
42 store: Store,
43 warnIfLegacyBackendDetected?: boolean,
@@ -77,6 +78,7 @@ export default function DevTools({
78 browserTheme = 'light',
79 defaultTab = 'components',
80 componentsPortalContainer,
81 + isBrowserMode = true,
82 overrideTab,
83 profilerPortalContainer,
84 settingsPortalContainer,
@@ -124,8 +126,8 @@ export default function DevTools({
126 currentTab={tab}
127 id="DevTools"
128 selectTab={setTab}
127 - size="large"
129 tabs={tabs}
130 + type="navigation"
131 />
132 </div>
133 )}
@@ -133,7 +135,10 @@ export default function DevTools({
135 className={styles.TabContent}
136 hidden={tab !== 'components'}
137 >
136 - <Components portalContainer={componentsPortalContainer} />
138 + <Components
139 + isBrowserMode={isBrowserMode}
140 + portalContainer={componentsPortalContainer}
141 + />
142 </div>
143 <div
144 className={styles.TabContent}
src/devtools/views/Icon.js
+7 -6
@@ -101,10 +101,11 @@ const PATH_SEARCH = `
101 const PATH_RANKED_CHART = 'M3 5h18v3H3zM3 10.5h13v3H3zM3 16h8v3H3z';
102
103 const PATH_SETTINGS = `
104 - M15.95 10.78c.03-.25.05-.51.05-.78s-.02-.53-.06-.78l1.69-1.32c.15-.12.19-.34.1-.51l-1.6-2.77c-.1-.18-.31-.24-.49-.18l-1.99.8c-.42-.32-.86-.58-1.35-.78L12
105 - 2.34c-.03-.2-.2-.34-.4-.34H8.4c-.2 0-.36.14-.39.34l-.3 2.12c-.49.2-.94.47-1.35.78l-1.99-.8c-.18-.07-.39
106 - 0-.49.18l-1.6 2.77c-.1.18-.06.39.1.51l1.69
107 - 1.32c-.04.25-.07.52-.07.78s.02.53.06.78L2.37 12.1c-.15.12-.19.34-.1.51l1.6 2.77c.1.18.31.24.49.18l1.99-.8c.42.32.86.58
108 - 1.35.78l.3 2.12c.04.2.2.34.4.34h3.2c.2 0 .37-.14.39-.34l.3-2.12c.49-.2.94-.47 1.35-.78l1.99.8c.18.07.39 0
109 - .49-.18l1.6-2.77c.1-.18.06-.39-.1-.51l-1.67-1.32zM10 13c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z
104 + M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49
105 + 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38
106 + 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11
107 + 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4
108 + 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49
109 + 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5
110 + 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z
111 `;
src/devtools/views/ModalDialog.css
+1
@@ -18,6 +18,7 @@
18 max-width: 100%;
19 display: inline-block;
20 background-color: var(--color-background);
21 + box-shadow: 0 2px 4px var(--color-shadow);
22 padding: 0.5rem;
23 border: 1px solid var(--color-border);
24 border-radius: 0.25rem;
src/devtools/views/Profiler/Profiler.js
+1 -1
@@ -92,8 +92,8 @@ function Profiler(_: {||}) {
92 currentTab={selectedTabID}
93 id="Profiler"
94 selectTab={selectTab}
95 - size="small"
95 tabs={tabs}
96 + type="profiler"
97 />
98 <RootSelector />
99 <div className={styles.Spacer} />
src/devtools/views/Settings/ComponentsSettings.js
+3 -3
@@ -61,7 +61,7 @@ export default function ComponentsSettings(_: {||}) {
61
62 const updateCollapseNodesByDefault = useCallback(
63 ({ currentTarget }) => {
64 - store.collapseNodesByDefault = currentTarget.checked;
64 + store.collapseNodesByDefault = !currentTarget.checked;
65 },
66 [store]
67 );
@@ -240,10 +240,10 @@ export default function ComponentsSettings(_: {||}) {
240 <label className={styles.Setting}>
241 <input
242 type="checkbox"
243 - checked={collapseNodesByDefault}
243 + checked={!collapseNodesByDefault}
244 onChange={updateCollapseNodesByDefault}
245 />{' '}
246 - Collapse newly added components by default
246 + Expand component tree by default
247 </label>
248
249 <div className={styles.Header}>Hide components where...</div>
src/devtools/views/Settings/SettingsContext.js
+1
@@ -308,6 +308,7 @@ function updateThemeVariables(
308 updateStyleHelper(theme, 'color-color-scroll-thumb', documentElements);
309 updateStyleHelper(theme, 'color-color-scroll-track', documentElements);
310 updateStyleHelper(theme, 'color-search-match', documentElements);
311 + updateStyleHelper(theme, 'color-shadow', documentElements);
312 updateStyleHelper(theme, 'color-search-match-current', documentElements);
313 updateStyleHelper(
314 theme,
src/devtools/views/Settings/SettingsModal.css
+2
@@ -1,5 +1,6 @@
1 .Background {
2 position: absolute;
3 + z-index: 3;
4 width: 100%;
5 top: 0;
6 bottom: 0;
@@ -18,6 +19,7 @@
19 max-height: 100%;
20 background-color: var(--color-background);
21 border: 1px solid var(--color-border);
22 + box-shadow: 0 2px 4px var(--color-shadow);
23 border-radius: 0.25rem;
24 overflow: auto;
25 width: 400px;
src/devtools/views/Settings/SettingsModal.js
+1 -1
@@ -100,8 +100,8 @@ function SettingsModalImpl(_: {||}) {
100 currentTab={selectedTabID}
101 id="Settings"
102 selectTab={selectTab}
103 - size="small"
103 tabs={tabs}
104 + type="settings"
105 />
106 <div className={styles.Spacer} />
107 <Button onClick={dismissModal} title="Close settings dialog">
src/devtools/views/TabBar.css
+35 -16
@@ -31,11 +31,15 @@
31 cursor: default;
32 }
33
34 -.TabSizeLarge {
34 +.TabSizeNavigation {
35 font-size: var(--font-size-sans-large);
36 padding: 0.5rem 1rem;
37 }
38 -.TabSizeSmall {
38 +.TabSizeProfiler {
39 + font-size: var(--font-size-sans-normal);
40 + padding: 0.25rem 0.5rem;
41 +}
42 +.TabSizeSettings {
43 font-size: var(--font-size-sans-normal);
44 padding: 0.25rem 0.5rem;
45 }
@@ -46,8 +50,9 @@
50 opacity: 0;
51 }
52
49 -.IconSizeLarge,
50 -.IconSizeSmall {
53 +.IconSizeNavigation,
54 +.IconSizeProfiler,
55 +.IconSizeSettings {
56 margin-right: 0.5rem;
57 color: var(--color-button-active);
58 }
@@ -56,36 +61,50 @@
61 color: var(--color-dim);
62 }
63
59 -.IconSizeLarge {
64 +.IconSizeNavigation {
65 width: 1.5rem;
66 height: 1.5rem;
67 }
63 -
64 -.IconSizeSmall {
68 +.IconSizeProfiler {
69 + width: 1rem;
70 + height: 1rem;
71 +}
72 +.IconSizeSettings {
73 width: 1rem;
74 height: 1rem;
75 }
76
69 -.TabLabelLarge,
70 -.TabLabelSmall {
77 +.TabLabelNavigation,
78 +.TabLabelProfiler,
79 +.TabLabelSettings {
80 +}
81 +
82 +@media screen and (max-width: 525px) {
83 + .IconSizeNavigation {
84 + margin-right: 0;
85 + }
86 +
87 + .TabLabelNavigation {
88 + display: none;
89 + }
90 }
91
92 @media screen and (max-width: 900px) {
74 - .TabLabelSmall {
93 + .TabLabelProfiler {
94 display: none;
95 }
96
78 - .IconSizeSmall {
97 + .IconSizeProfiler {
98 margin-right: 0;
99 }
100 }
101
83 -@media screen and (max-width: 525px) {
84 - .IconSizeLarge {
85 - margin-right: 0;
102 +@media screen and (max-width: 400px) {
103 + .TabLabelSettings {
104 + display: none;
105 }
106
88 - .TabLabelLarge {
89 - display: none;
107 + .IconSizeSettings {
108 + margin-right: 0;
109 }
110 }
src/devtools/views/TabBar.js
+29 -15
@@ -22,8 +22,8 @@ export type Props = {|
22 disabled?: boolean,
23 id: string,
24 selectTab: (tabID: any) => void,
25 - size: 'large' | 'small',
25 tabs: Array<TabInfo>,
26 + type: 'navigation' | 'profiler' | 'settings',
27 |};
28
29 export default function TabBar({
@@ -31,8 +31,8 @@ export default function TabBar({
31 disabled = false,
32 id: groupName,
33 selectTab,
34 - size,
34 tabs,
35 + type,
36 }: Props) {
37 if (!tabs.some(tab => tab.id === currentTab)) {
38 selectTab(tabs[0].id);
@@ -56,8 +56,28 @@ export default function TabBar({
56 }
57 }, []);
58
59 - const tabClassName =
60 - size === 'large' ? styles.TabSizeLarge : styles.TabSizeSmall;
59 + let iconSizeClassName;
60 + let tabLabelClassName;
61 + let tabSizeClassName;
62 + switch (type) {
63 + case 'navigation':
64 + iconSizeClassName = styles.IconSizeNavigation;
65 + tabLabelClassName = styles.TabLabelNavigation;
66 + tabSizeClassName = styles.TabSizeNavigation;
67 + break;
68 + case 'profiler':
69 + iconSizeClassName = styles.IconSizeProfiler;
70 + tabLabelClassName = styles.TabLabelProfiler;
71 + tabSizeClassName = styles.TabSizeProfiler;
72 + break;
73 + case 'settings':
74 + iconSizeClassName = styles.IconSizeSettings;
75 + tabLabelClassName = styles.TabLabelSettings;
76 + tabSizeClassName = styles.TabSizeSettings;
77 + break;
78 + default:
79 + throw Error(`Unsupported type "${type}"`);
80 + }
81
82 return (
83 <Fragment>
@@ -65,7 +85,7 @@ export default function TabBar({
85 let button = (
86 <label
87 className={classNames(
68 - tabClassName,
88 + tabSizeClassName,
89 disabled ? styles.TabDisabled : styles.Tab,
90 !disabled && currentTab === id ? styles.TabCurrent : null
91 )}
@@ -83,18 +103,12 @@ export default function TabBar({
103 onChange={onChange}
104 />
105 <Icon
86 - className={`${disabled ? styles.IconDisabled : ''} ${
87 - size === 'large' ? styles.IconSizeLarge : styles.IconSizeSmall
88 - }`}
106 + className={`${
107 + disabled ? styles.IconDisabled : ''
108 + } ${iconSizeClassName}`}
109 type={icon}
110 />
91 - <span
92 - className={
93 - size === 'large' ? styles.TabLabelLarge : styles.TabLabelSmall
94 - }
95 - >
96 - {label}
97 - </span>
111 + <span className={tabLabelClassName}>{label}</span>
112 </label>
113 );
114
src/devtools/views/root.css
+2
@@ -57,6 +57,7 @@
57 --light-color-search-match-current: #f7923b;
58 --light-color-selected-tree-highlight-active: rgba(0, 136, 250, 0.1);
59 --light-color-selected-tree-highlight-inactive: rgba(0, 0, 0, 0.05);
60 + --light-color-shadow: rgba(0, 0, 0, 0.25);
61 --light-color-tab-selected-border: #0088fa;
62 --light-color-text: #000000;
63 --light-color-text-invalid: #ff0000;
@@ -122,6 +123,7 @@
123 --dark-color-search-match-current: #f7923b;
124 --dark-color-selected-tree-highlight-active: rgba(23, 143, 185, 0.15);
125 --dark-color-selected-tree-highlight-inactive: rgba(255, 255, 255, 0.05);
126 + --dark-color-shadow: rgba(0, 0, 0, 0.5);
127 --dark-color-tab-selected-border: #178fb9;
128 --dark-color-text: #ffffff;
129 --dark-color-text-invalid: #ff8080;