From e509bc11b76e1a6147200f26945385c061e179c6 Mon Sep 17 00:00:00 2001
From: Jonathan Kingston <jonathan@jooped.co.uk>
Date: Wed, 15 Feb 2017 18:04:10 +0000
Subject: [PATCH] Popup hover and clickable area changes. Fixes #120

---
 webextension/css/popup.css | 6 +++++-
 webextension/js/popup.js   | 9 ++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/webextension/css/popup.css b/webextension/css/popup.css
index 6262c4c..fece976 100644
--- a/webextension/css/popup.css
+++ b/webextension/css/popup.css
@@ -118,7 +118,7 @@ table.unstriped tbody tr {
   padding-right: 10px;
 }
 
-.container-panel-row:hover .usercontext-icon {
+.container-panel-row .usercontext-icon:hover {
   background-image: url('/img/container-newtab.svg');
   fill: 'gray';
   filter: url('/img/filters.svg#fill');
@@ -352,6 +352,10 @@ table.unstriped tbody tr {
   cursor: pointer;
 }
 
+.clickable:hover {
+  background-color: #ebebeb;
+}
+
 .edit-containers-panel-footer a {
   color: #fff;
 }
diff --git a/webextension/js/popup.js b/webextension/js/popup.js
index 49775dc..31219ef 100644
--- a/webextension/js/popup.js
+++ b/webextension/js/popup.js
@@ -230,7 +230,10 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
       const arrowClass = hasTabs ? "show-tabs-img" : "no-tabs-img";
       const tr = document.createElement("tr");
       fragment.appendChild(tr);
-      tr.classList.add("container-panel-row", "clickable");
+      tr.classList.add("container-panel-row");
+      if (hasTabs) {
+        tr.classList.add("container-panel-row", "clickable");
+      }
       tr.innerHTML = `
         <td>
           <div class="userContext-icon open-newtab"
@@ -238,7 +241,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
             data-identity-color="${identity.color}">
           </div>
         </td>
-        <td class="open-newtab container-name">${identity.name}</td>
+        <td class="container-name">${identity.name}</td>
         <td class="show-tabs"><img src="/img/container-arrow.svg" class="show-tabs ${arrowClass}" /></td>`;
 
       tr.addEventListener("click", e => {
@@ -257,7 +260,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
           }).catch(() => {
             window.close();
           });
-        } else if (hasTabs && e.target.matches(".show-tabs")) {
+        } else if (hasTabs) {
           Logic.showPanel(P_CONTAINER_INFO, identity);
         }
       });