From 82e224fd80db333b88a3a6d5f102e4606f5e0614 Mon Sep 17 00:00:00 2001
From: hensm <m+github@matt.tf>
Date: Wed, 12 Dec 2018 12:53:00 +0000
Subject: [PATCH] Fix list input focus and improve styling

---
 ext/src/options/EditableListItem.jsx |  9 ++++++--
 ext/src/options/styles/index.css     | 34 +++++++++++++++++-----------
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/ext/src/options/EditableListItem.jsx b/ext/src/options/EditableListItem.jsx
index 5921a53..05a6ed1 100644
--- a/ext/src/options/EditableListItem.jsx
+++ b/ext/src/options/EditableListItem.jsx
@@ -26,6 +26,8 @@ export default class EditableListItem extends Component {
         this.setState({
             editing: true
           , editValue: this.props.text
+        }, () => {
+            this.input.focus();
         });
     }
 
@@ -65,14 +67,17 @@ export default class EditableListItem extends Component {
     }
 
     render () {
+        const selected = this.state.editing
+            ? "editable-list__item--selected" : "";
+
         return (
-            <li className="editable-list__item">
+            <li className={`editable-list__item ${selected}`}>
                 <div className="editable-list__title"
                      onDoubleClick={ this.handleEditBegin }>
                     { this.state.editing
                         ? <input className="editable-list__edit-field"
                                  type="text"
-                                 autoFocus
+                                 ref={ input => this.input = input }
                                  value={ this.state.editValue }
                                  onBlur={ this.handleEditEnd }
                                  onChange={ this.handleInputChange }
diff --git a/ext/src/options/styles/index.css b/ext/src/options/styles/index.css
index 0577c03..88f5aee 100644
--- a/ext/src/options/styles/index.css
+++ b/ext/src/options/styles/index.css
@@ -1,3 +1,7 @@
+:root {
+    --border-color: rgb(225, 225, 225);;
+}
+
 *:invalid {
     box-shadow: 0 0 1.5px 1px red;
 }
@@ -74,18 +78,12 @@
 }
 
 .category:not(:first-of-type) {
-    border-top: 1px solid rgb(225, 225, 225);
+    border-top: 1px solid var(--border-color);
 }
 
 .category > .category {
-    background: rgba(235, 235, 235);
-    border-radius: 3px;
-    padding: 10px 0;
-    box-shadow: inset 6px 0 0 0 rgba(0, 0, 0, 0.1);
-}
-
-.category > .category:disabled {
-    background: rgba(245, 245, 245);
+    padding: 5px 0;
+    box-shadow: inset 6px 0 0 0 var(--border-color);
 }
 
 .category > .category > .category__name,
@@ -130,7 +128,9 @@
 
 
 .editable-list {
-    border: 1px solid rgb(225, 225, 225);
+    background-color: -moz-field;
+    border: 1px solid var(--border-color);
+    color: -moz-fieldtext;
     justify-content: end;
     padding: 5px;
 }
@@ -147,7 +147,7 @@
 
 .editable-list hr {
     border: initial;
-    border-top: 1px solid rgb(225, 225, 225);
+    border-top: 1px solid var(--border-color);
     margin: 5px 0;
 }
 
@@ -167,8 +167,16 @@
     padding: 0 5px;
 }
 
-.editable-list__item:nth-of-type(even) {
-    background-color: rgb(245, 245, 245);
+.editable-list__item:nth-child(even):not(:last-child) {
+    background-color: -moz-eventreerow;
+}
+.editable-list__item:nth-child(odd):not(:last-child) {
+    background-color: -moz-oddtreerow;
+}
+
+.editable-list__item--selected {
+    background-color: -moz-cellhighlight !important;
+    color: -moz-cellhighlighttext !important;
 }
 
 .editable-list__title {