From 6083ce2d14e049e16c6183e178055b03b5c927b7 Mon Sep 17 00:00:00 2001
From: Eric Brelsford <ebrelsford@gmail.com>
Date: Wed, 27 Jul 2016 13:47:53 -0400
Subject: [PATCH] Fix deselect entity on Firefox

Includes splitting select/deselect elements into separate buttons
---
 css/app.css                  | 25 ++++++++++++++++++-------
 modules/ui/selection_list.js | 14 +++++++-------
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/css/app.css b/css/app.css
index aba047aa1..169f4a618 100644
--- a/css/app.css
+++ b/css/app.css
@@ -722,9 +722,24 @@ button.save.has-count .count::before {
     border-radius: 0;
 }
 
+.feature-list-item {
+    background-color: white;
+    font-weight: bold;
+    height: 40px;
+    line-height: 20px;
+}
+
+.feature-list-item:hover {
+    background-color: #ececec;
+}
+
+.feature-list-item button {
+    background: transparent;
+}
+
 .feature-list-item .label {
     text-align: left;
-    padding: 5px 10px;
+    padding: 10px 10px;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -735,18 +750,14 @@ button.save.has-count .count::before {
     opacity: .5;
 }
 
-.feature-list-item .label .close {
+.feature-list-item .close {
     float: right;
 }
 
-.feature-list-item .label .close .icon {
+.feature-list-item .close .icon {
     opacity: 1;
 }
 
-.feature-list-item:hover .label {
-    background-color: #ececec;
-}
-
 .feature-list-item .entity-type {
     color:#7092ff;
 }
diff --git a/modules/ui/selection_list.js b/modules/ui/selection_list.js
index a0d3ba80b..4c3b02d7a 100644
--- a/modules/ui/selection_list.js
+++ b/modules/ui/selection_list.js
@@ -45,14 +45,19 @@ export function SelectionList(context, selectedIDs) {
             var items = list.selectAll('.feature-list-item')
                 .data(entities, Entity.key);
 
-            var enter = items.enter().append('button')
+            var enter = items.enter().append('div')
                 .attr('class', 'feature-list-item')
                 .on('click', selectEntity);
 
             // Enter
-            var label = enter.append('div')
+            var label = enter.append('button')
                 .attr('class', 'label');
 
+            enter.append('button')
+                .attr('class', 'close')
+                .on('click', deselectEntity)
+                .call(Icon('#icon-close'));
+
             label.append('span')
                 .attr('class', 'entity-geom-icon')
                 .call(Icon('', 'pre-text'));
@@ -63,11 +68,6 @@ export function SelectionList(context, selectedIDs) {
             label.append('span')
                 .attr('class', 'entity-name');
 
-            label.append('span')
-                .attr('class', 'close')
-                .on('click', deselectEntity)
-                .call(Icon('#icon-close'));
-
             // Update
             items.selectAll('.entity-geom-icon use')
                 .attr('href', function() {