Renamed <Guideline> to <SelectedTreeHighlight>

src/devtools/views/Components/SelectedTreeHighlight.css

@@ -8,9 +8,9 @@
 }
 
 .Active {
-  background-color: var(--color-guideline-active);
+  background-color: var(--color-selected-tree-highlight-active);
 }
 
 .Inactive {
-  background-color: var(--color-guideline-inactive);
+  background-color: var(--color-selected-tree-highlight-inactive);
 }

src/devtools/views/Components/SelectedTreeHighlight.js

@@ -8,14 +8,14 @@ import { StoreContext } from '../context';
 import { useSubscription } from '../hooks';
 import Store from '../../store';
 
-import styles from './Guideline.css';
+import styles from './SelectedTreeHighlight.css';
 
 type Data = {|
   startIndex: number,
   stopIndex: number,
 |};
 
-export default function Guideline(_: {||}) {
+export default function SelectedTreeHighlight(_: {||}) {
   const { lineHeight } = useContext(SettingsContext);
   const store = useContext(StoreContext);
   const treeFocused = useContext(TreeFocusedContext);

src/devtools/views/Components/Tree.js

@@ -22,7 +22,7 @@ import SearchInput from './SearchInput';
 import { ComponentFiltersModalContextController } from './ComponentFiltersModalContext';
 import ToggleComponentFiltersModalButton from './ToggleComponentFiltersModalButton';
 import ComponentFiltersModal from './ComponentFiltersModal';
-import Guideline from './Guideline';
+import SelectedTreeHighlight from './SelectedTreeHighlight';
 import TreeFocusedContext from './TreeFocusedContext';
 
 import styles from './Tree.css';
@@ -466,11 +466,11 @@ function InnerElementType({ children, style, ...rest }) {
   return (
     <div
       className={styles.InnerElementType}
-      style={style}
       ref={divRef}
+      style={style}
       {...rest}
     >
-      <Guideline />
+      <SelectedTreeHighlight />
       {children}
     </div>
   );

src/devtools/views/Settings/SettingsContext.js

@@ -269,8 +269,6 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-dimmer', documentElements);
   updateStyleHelper(theme, 'color-dimmest', documentElements);
   updateStyleHelper(theme, 'color-expand-collapse-toggle', documentElements);
-  updateStyleHelper(theme, 'color-guideline-active', documentElements);
-  updateStyleHelper(theme, 'color-guideline-inactive', documentElements);
   updateStyleHelper(theme, 'color-jsx-arrow-brackets', documentElements);
   updateStyleHelper(
     theme,
@@ -283,6 +281,16 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-record-inactive', documentElements);
   updateStyleHelper(theme, 'color-search-match', documentElements);
   updateStyleHelper(theme, 'color-search-match-current', documentElements);
+  updateStyleHelper(
+    theme,
+    'color-selected-tree-highlight-active',
+    documentElements
+  );
+  updateStyleHelper(
+    theme,
+    'color-selected-tree-highlight-inactive',
+    documentElements
+  );
   updateStyleHelper(theme, 'color-tab-selected-border', documentElements);
   updateStyleHelper(theme, 'color-text', documentElements);
   updateStyleHelper(theme, 'color-text-selected', documentElements);

src/devtools/views/root.css

@@ -46,8 +46,6 @@
   --light-color-dimmer: #cfd1d5;
   --light-color-dimmest: #eff0f1;
   --light-color-expand-collapse-toggle: #777d88;
-  --light-color-guideline-active: rgba(0, 136, 250, 0.1);
-  --light-color-guideline-inactive: rgba(0, 0, 0, 0.05);
   --light-color-jsx-arrow-brackets: #333333;
   --light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --light-color-modal-background: rgba(255, 255, 255, 0.75);
@@ -56,6 +54,8 @@
   --light-color-record-inactive: #0088fa;
   --light-color-search-match: yellow;
   --light-color-search-match-current: #f7923b;
+  --light-color-selected-tree-highlight-active: rgba(0, 136, 250, 0.15);
+  --light-color-selected-tree-highlight-inactive: rgba(0, 0, 0, 0.05);
   --light-color-tab-selected-border: #0088fa;
   --light-color-text: #000000;
   --light-color-text-selected: #ffffff;
@@ -109,8 +109,6 @@
   --dark-color-dimmer: #777d88;
   --dark-color-dimmest: #4f5766;
   --dark-color-expand-collapse-toggle: #8f949d;
-  --dark-color-guideline-active: rgba(23, 143, 185, 0.1);
-  --dark-color-guideline-inactive: rgba(255, 255, 255, 0.05);
   --dark-color-jsx-arrow-brackets: #777d88;
   --dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --dark-color-modal-background: rgba(0, 0, 0, 0.75);
@@ -119,6 +117,8 @@
   --dark-color-record-inactive: #61dafb;
   --dark-color-search-match: yellow;
   --dark-color-search-match-current: #f7923b;
+  --dark-color-selected-tree-highlight-active: rgba(23, 143, 185, 0.15);
+  --dark-color-selected-tree-highlight-inactive: rgba(255, 255, 255, 0.05);
   --dark-color-tab-selected-border: #178fb9;
   --dark-color-text: #ffffff;
   --dark-color-text-selected: #ffffff;