From de9fb0a8a2a04d77405eda3e780fe83d21bb8304 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 1 Jun 2019 09:34:39 -0700
Subject: [PATCH] Tweaked guideline background color style

---
 src/devtools/views/Components/Element.css      |  1 +
 src/devtools/views/Components/Guideline.css    | 12 ++++++++++--
 src/devtools/views/Components/Guideline.js     |  4 +++-
 src/devtools/views/Components/HocBadges.css    |  2 +-
 src/devtools/views/Settings/SettingsContext.js |  3 ++-
 src/devtools/views/root.css                    | 10 ++++++----
 6 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/devtools/views/Components/Element.css b/src/devtools/views/Components/Element.css
index 7cd5512188..05a446bb19 100644
--- a/src/devtools/views/Components/Element.css
+++ b/src/devtools/views/Components/Element.css
@@ -33,6 +33,7 @@
 
   /* Invert colors */
   --color-component-name: var(--color-component-name-inverted);
+  --color-text: var(--color-text-selected);
   --color-component-badge-background: var(
     --color-component-badge-background-inverted
   );
diff --git a/src/devtools/views/Components/Guideline.css b/src/devtools/views/Components/Guideline.css
index e3adaed726..3e53e6f3ba 100644
--- a/src/devtools/views/Components/Guideline.css
+++ b/src/devtools/views/Components/Guideline.css
@@ -1,8 +1,16 @@
-.Guideline {
+.Active,
+.Inactive {
   position: absolute;
   left: 0;
   width: 100%;
   z-index: 0;
   pointer-events: none;
-  background-color: var(--color-guideline);
+}
+
+.Active {
+  background-color: var(--color-guideline-active);
+}
+
+.Inactive {
+  background-color: var(--color-guideline-inactive);
 }
diff --git a/src/devtools/views/Components/Guideline.js b/src/devtools/views/Components/Guideline.js
index f2a69292eb..f9e9d7407f 100644
--- a/src/devtools/views/Components/Guideline.js
+++ b/src/devtools/views/Components/Guideline.js
@@ -3,6 +3,7 @@
 import React, { useContext, useMemo } from 'react';
 import { TreeStateContext } from './TreeContext';
 import { SettingsContext } from '../Settings/SettingsContext';
+import TreeFocusedContext from './TreeFocusedContext';
 import { StoreContext } from '../context';
 import { useSubscription } from '../hooks';
 import Store from '../../store';
@@ -17,6 +18,7 @@ type Data = {|
 export default function Guideline(_: {||}) {
   const { lineHeight } = useContext(SettingsContext);
   const store = useContext(StoreContext);
+  const treeFocused = useContext(TreeFocusedContext);
   const { selectedElementID } = useContext(TreeStateContext);
 
   const subscription = useMemo(
@@ -81,7 +83,7 @@ export default function Guideline(_: {||}) {
 
   return (
     <div
-      className={styles.Guideline}
+      className={treeFocused ? styles.Active : styles.Inactive}
       style={{
         position: 'absolute',
         top: `${startIndex * lineHeight - lineHeight / 2}px`,
diff --git a/src/devtools/views/Components/HocBadges.css b/src/devtools/views/Components/HocBadges.css
index 04c5f92dc4..fb1944d8ef 100644
--- a/src/devtools/views/Components/HocBadges.css
+++ b/src/devtools/views/Components/HocBadges.css
@@ -1,7 +1,7 @@
 .HocBadges {
   padding: 0.125rem 0.25rem;
   background-color: var(--color-background-selected);
-  color: var(--color-text-selected);
+  --color-text: var(--color-text-selected);
   --color-component-badge-background: var(
     --color-component-badge-background-inverted
   );
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index 4f79131554..734b7752a2 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -261,7 +261,8 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-dimmer', documentElements);
   updateStyleHelper(theme, 'color-dimmest', documentElements);
   updateStyleHelper(theme, 'color-expand-collapse-toggle', documentElements);
-  updateStyleHelper(theme, 'color-guideline', documentElements);
+  updateStyleHelper(theme, 'color-guideline-active', documentElements);
+  updateStyleHelper(theme, 'color-guideline-inactive', documentElements);
   updateStyleHelper(theme, 'color-jsx-arrow-brackets', documentElements);
   updateStyleHelper(
     theme,
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index 4d27295233..70aefe072e 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -8,7 +8,7 @@
   --light-color-attribute-value: #1a1aa6;
   --light-color-attribute-editable-value: #1a1aa6;
   --light-color-background: #ffffff;
-  --light-color-background-hover: #ebf1fb;
+  --light-color-background-hover: rgba(0, 136, 250, 0.1);
   --light-color-background-inactive: #e5e5e5;
   --light-color-background-selected: #0088fa;
   --light-color-button-background: #ffffff;
@@ -42,7 +42,8 @@
   --light-color-dimmer: #cfd1d5;
   --light-color-dimmest: #eff0f1;
   --light-color-expand-collapse-toggle: #777d88;
-  --light-color-guideline: rgba(0, 0, 0, 0.05);
+  --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);
@@ -66,7 +67,7 @@
   --dark-color-attribute-value: #cedae0;
   --dark-color-attribute-editable-value: yellow;
   --dark-color-background: #282c34;
-  --dark-color-background-hover: #3d424a;
+  --dark-color-background-hover: rgba(255, 255, 255, 0.1);
   --dark-color-background-inactive: #3d424a;
   --dark-color-background-selected: #178fb9;
   --dark-color-button-background: #282c34;
@@ -100,7 +101,8 @@
   --dark-color-dimmer: #777d88;
   --dark-color-dimmest: #4f5766;
   --dark-color-expand-collapse-toggle: #8f949d;
-  --dark-color-guideline: rgba(255, 255, 255, 0.05);
+  --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);