Renamed <Guideline> to <SelectedTreeHighlight>
Brian Vaughn committed
Jun 3, 2019 at 09:39 UTC
06b004b5d49ef97e5ffd213c39e3651195722d19
5 files changed
+21
-13
src/devtools/views/Components/SelectedTreeHighlight.css
renamed
+2
-2
@@ -8,9 +8,9 @@
8
}
9
10
.Active {
11
- background-color: var(--color-guideline-active);
11
+ background-color: var(--color-selected-tree-highlight-active);
12
}
13
14
.Inactive {
15
- background-color: var(--color-guideline-inactive);
15
+ background-color: var(--color-selected-tree-highlight-inactive);
16
}
src/devtools/views/Components/SelectedTreeHighlight.js
renamed
+2
-2
@@ -8,14 +8,14 @@ import { StoreContext } from '../context';
8
import { useSubscription } from '../hooks';
9
import Store from '../../store';
10
11
-import styles from './Guideline.css';
11
+import styles from './SelectedTreeHighlight.css';
12
13
type Data = {|
14
startIndex: number,
15
stopIndex: number,
16
|};
17
18
-export default function Guideline(_: {||}) {
18
+export default function SelectedTreeHighlight(_: {||}) {
19
const { lineHeight } = useContext(SettingsContext);
20
const store = useContext(StoreContext);
21
const treeFocused = useContext(TreeFocusedContext);
src/devtools/views/Components/Tree.js
+3
-3
@@ -22,7 +22,7 @@ import SearchInput from './SearchInput';
22
import { ComponentFiltersModalContextController } from './ComponentFiltersModalContext';
23
import ToggleComponentFiltersModalButton from './ToggleComponentFiltersModalButton';
24
import ComponentFiltersModal from './ComponentFiltersModal';
25
-import Guideline from './Guideline';
25
+import SelectedTreeHighlight from './SelectedTreeHighlight';
26
import TreeFocusedContext from './TreeFocusedContext';
27
28
import styles from './Tree.css';
@@ -466,11 +466,11 @@ function InnerElementType({ children, style, ...rest }) {
466
return (
467
<div
468
className={styles.InnerElementType}
469
- style={style}
469
ref={divRef}
470
+ style={style}
471
{...rest}
472
>
473
- <Guideline />
473
+ <SelectedTreeHighlight />
474
{children}
475
</div>
476
);
src/devtools/views/Settings/SettingsContext.js
+10
-2
@@ -269,8 +269,6 @@ function updateThemeVariables(
269
updateStyleHelper(theme, 'color-dimmer', documentElements);
270
updateStyleHelper(theme, 'color-dimmest', documentElements);
271
updateStyleHelper(theme, 'color-expand-collapse-toggle', documentElements);
272
- updateStyleHelper(theme, 'color-guideline-active', documentElements);
273
- updateStyleHelper(theme, 'color-guideline-inactive', documentElements);
272
updateStyleHelper(theme, 'color-jsx-arrow-brackets', documentElements);
273
updateStyleHelper(
274
theme,
@@ -283,6 +281,16 @@ function updateThemeVariables(
281
updateStyleHelper(theme, 'color-record-inactive', documentElements);
282
updateStyleHelper(theme, 'color-search-match', documentElements);
283
updateStyleHelper(theme, 'color-search-match-current', documentElements);
284
+ updateStyleHelper(
285
+ theme,
286
+ 'color-selected-tree-highlight-active',
287
+ documentElements
288
+ );
289
+ updateStyleHelper(
290
+ theme,
291
+ 'color-selected-tree-highlight-inactive',
292
+ documentElements
293
+ );
294
updateStyleHelper(theme, 'color-tab-selected-border', documentElements);
295
updateStyleHelper(theme, 'color-text', documentElements);
296
updateStyleHelper(theme, 'color-text-selected', documentElements);
src/devtools/views/root.css
+4
-4
@@ -46,8 +46,6 @@
46
--light-color-dimmer: #cfd1d5;
47
--light-color-dimmest: #eff0f1;
48
--light-color-expand-collapse-toggle: #777d88;
49
- --light-color-guideline-active: rgba(0, 136, 250, 0.1);
50
- --light-color-guideline-inactive: rgba(0, 0, 0, 0.05);
49
--light-color-jsx-arrow-brackets: #333333;
50
--light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
51
--light-color-modal-background: rgba(255, 255, 255, 0.75);
@@ -56,6 +54,8 @@
54
--light-color-record-inactive: #0088fa;
55
--light-color-search-match: yellow;
56
--light-color-search-match-current: #f7923b;
57
+ --light-color-selected-tree-highlight-active: rgba(0, 136, 250, 0.15);
58
+ --light-color-selected-tree-highlight-inactive: rgba(0, 0, 0, 0.05);
59
--light-color-tab-selected-border: #0088fa;
60
--light-color-text: #000000;
61
--light-color-text-selected: #ffffff;
@@ -109,8 +109,6 @@
109
--dark-color-dimmer: #777d88;
110
--dark-color-dimmest: #4f5766;
111
--dark-color-expand-collapse-toggle: #8f949d;
112
- --dark-color-guideline-active: rgba(23, 143, 185, 0.1);
113
- --dark-color-guideline-inactive: rgba(255, 255, 255, 0.05);
112
--dark-color-jsx-arrow-brackets: #777d88;
113
--dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
114
--dark-color-modal-background: rgba(0, 0, 0, 0.75);
@@ -119,6 +117,8 @@
117
--dark-color-record-inactive: #61dafb;
118
--dark-color-search-match: yellow;
119
--dark-color-search-match-current: #f7923b;
120
+ --dark-color-selected-tree-highlight-active: rgba(23, 143, 185, 0.15);
121
+ --dark-color-selected-tree-highlight-inactive: rgba(255, 255, 255, 0.05);
122
--dark-color-tab-selected-border: #178fb9;
123
--dark-color-text: #ffffff;
124
--dark-color-text-selected: #ffffff;