From be0abe4de90029a870edd32fe4d978ccdc1af3d7 Mon Sep 17 00:00:00 2001
From: Harshal Lele <harshallele97@gmail.com>
Date: Mon, 11 Feb 2019 21:24:11 +0530
Subject: [PATCH 01/10] moved arrow icon to outside the label

---
 .../SecondaryPanes/EventListeners.js          | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/SecondaryPanes/EventListeners.js b/src/components/SecondaryPanes/EventListeners.js
index 3ab1b7ef57..4504fcc1d8 100644
--- a/src/components/SecondaryPanes/EventListeners.js
+++ b/src/components/SecondaryPanes/EventListeners.js
@@ -46,8 +46,6 @@ class EventListeners extends Component<Props, State> {
   }
 
   onCategoryToggle(category, event) {
-    event.preventDefault();
-
     const { expandedCategories } = this.state;
 
     if (expandedCategories.includes(category)) {
@@ -102,20 +100,22 @@ class EventListeners extends Component<Props, State> {
       );
 
     return (
-      <label>
+      <div>
         <AccessibleImage
           className={classnames("arrow", { expanded })}
           onClick={e => this.onCategoryToggle(category, e)}
         />
-        <input
-          type="checkbox"
-          value={category}
-          onChange={e => this.onCategoryClick(category, e.target.checked)}
-          checked={checked}
-          ref={el => el && (el.indeterminate = indeterminate)}
-        />
-        <span className="event-listener-category">{category}</span>
-      </label>
+        <label>
+          <input
+            type="checkbox"
+            value={category}
+            onChange={e => this.onCategoryClick(category, e.target.checked)}
+            checked={checked}
+            ref={el => el && (el.indeterminate = indeterminate)}
+          />
+          <span className="event-listener-category">{category}</span>
+        </label>
+      </div>
     );
   }
 

From 8172e8e67b6ee9f304a1837a3948d00cd63f89a9 Mon Sep 17 00:00:00 2001
From: Harshal Lele <harshallele97@gmail.com>
Date: Mon, 11 Feb 2019 21:25:38 +0530
Subject: [PATCH 02/10] fixed vertical alignment of label text and checkbox

---
 src/components/SecondaryPanes/EventListeners.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/SecondaryPanes/EventListeners.css b/src/components/SecondaryPanes/EventListeners.css
index f1075fe21c..b390be3d7b 100644
--- a/src/components/SecondaryPanes/EventListeners.css
+++ b/src/components/SecondaryPanes/EventListeners.css
@@ -15,6 +15,14 @@
 	user-select: none;
 }
 
+.event-listener-group input[type="checkbox"] {
+	vertical-align: middle;
+}
+
+.event-listener-group span.event-listener-category {
+	vertical-align: middle;
+}
+
 .event-listeners-content .arrow {
 	margin-inline-end: 0;
 }

From 14f8c908e888038ceaa46c9798fdd6ebe25cefdd Mon Sep 17 00:00:00 2001
From: Harshal Lele <harshallele97@gmail.com>
Date: Tue, 12 Feb 2019 19:19:53 +0530
Subject: [PATCH 03/10] fixed height of rows to 20px

---
 .../SecondaryPanes/EventListeners.css         | 25 ++++++++++++++++---
 .../SecondaryPanes/EventListeners.js          | 24 ++++++++++--------
 2 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/components/SecondaryPanes/EventListeners.css b/src/components/SecondaryPanes/EventListeners.css
index b390be3d7b..5412a6fccc 100644
--- a/src/components/SecondaryPanes/EventListeners.css
+++ b/src/components/SecondaryPanes/EventListeners.css
@@ -15,12 +15,24 @@
 	user-select: none;
 }
 
+.event-listener-group div {
+	display: flex;
+	align-items: center;
+}
+
 .event-listener-group input[type="checkbox"] {
-	vertical-align: middle;
+	margin-top: 0px;
+	margin-bottom: 0px;
 }
 
-.event-listener-group span.event-listener-category {
-	vertical-align: middle;
+.event-listener-group label {
+	display:flex;
+	align-items: center;
+}
+
+.event-listener-category {
+	padding:3px 0px;
+	line-height: 14px;
 }
 
 .event-listeners-content .arrow {
@@ -41,7 +53,14 @@ html[dir="rtl"] .event-listeners-content .arrow.expanded {
 	margin-inline-start: 30px;
 }
 
+.event-listener-event span {
+	line-height: 14px;
+	padding: 3px 0px;
+}
+
 .event-listener-event input {
 	margin-inline-end: 4px;
 	margin-inline-start: 0px;
+	margin-top: 0px;
+	margin-bottom: 0px; 
 }
diff --git a/src/components/SecondaryPanes/EventListeners.js b/src/components/SecondaryPanes/EventListeners.js
index 4504fcc1d8..0247e8f97d 100644
--- a/src/components/SecondaryPanes/EventListeners.js
+++ b/src/components/SecondaryPanes/EventListeners.js
@@ -105,16 +105,18 @@ class EventListeners extends Component<Props, State> {
           className={classnames("arrow", { expanded })}
           onClick={e => this.onCategoryToggle(category, e)}
         />
-        <label>
-          <input
-            type="checkbox"
-            value={category}
-            onChange={e => this.onCategoryClick(category, e.target.checked)}
-            checked={checked}
-            ref={el => el && (el.indeterminate = indeterminate)}
-          />
-          <span className="event-listener-category">{category}</span>
-        </label>
+        <div>
+          <label>
+            <input
+              type="checkbox"
+              value={category}
+              onChange={e => this.onCategoryClick(category, e.target.checked)}
+              checked={checked}
+              ref={el => el && (el.indeterminate = indeterminate)}
+            />
+            <span className="event-listener-category">{category}</span>
+          </label>
+        </div>
       </div>
     );
   }
@@ -141,7 +143,7 @@ class EventListeners extends Component<Props, State> {
                   onChange={e => this.onEventTypeClick(key, e.target.checked)}
                   checked={activeEventListeners.includes(key)}
                 />
-                {eventType}
+                <span>{eventType}</span>
               </label>
             </li>
           );

From 5a090f1edae08ebc4018d42a6cab56fbe7186f32 Mon Sep 17 00:00:00 2001
From: Harshal Lele <harshallele97@gmail.com>
Date: Tue, 12 Feb 2019 19:23:41 +0530
Subject: [PATCH 04/10] fixed formatting

---
 src/components/SecondaryPanes/EventListeners.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/SecondaryPanes/EventListeners.css b/src/components/SecondaryPanes/EventListeners.css
index 5412a6fccc..276d0533de 100644
--- a/src/components/SecondaryPanes/EventListeners.css
+++ b/src/components/SecondaryPanes/EventListeners.css
@@ -26,12 +26,12 @@
 }
 
 .event-listener-group label {
-	display:flex;
+	display: flex;
 	align-items: center;
 }
 
 .event-listener-category {
-	padding:3px 0px;
+	padding: 3px 0px;
 	line-height: 14px;
 }
 
@@ -62,5 +62,5 @@ html[dir="rtl"] .event-listeners-content .arrow.expanded {
 	margin-inline-end: 4px;
 	margin-inline-start: 0px;
 	margin-top: 0px;
-	margin-bottom: 0px; 
+	margin-bottom: 0px;
 }

From bf021285701b86053e591f2fe201c84d87344be6 Mon Sep 17 00:00:00 2001
From: Harshal Lele <harshallele97@gmail.com>
Date: Wed, 13 Feb 2019 11:54:36 +0530
Subject: [PATCH 05/10] wrapped button around the arrow

---
 src/components/SecondaryPanes/EventListeners.css |  9 ++++++++-
 src/components/SecondaryPanes/EventListeners.js  | 10 ++++++----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/SecondaryPanes/EventListeners.css b/src/components/SecondaryPanes/EventListeners.css
index 276d0533de..5d00f925eb 100644
--- a/src/components/SecondaryPanes/EventListeners.css
+++ b/src/components/SecondaryPanes/EventListeners.css
@@ -15,11 +15,18 @@
 	user-select: none;
 }
 
-.event-listener-group div {
+.event-listener-header {
 	display: flex;
 	align-items: center;
 }
 
+.btn-expand-category {
+	border: none;
+	background: none;
+	padding: 4px 5px;
+	line-height: 12px;
+}
+
 .event-listener-group input[type="checkbox"] {
 	margin-top: 0px;
 	margin-bottom: 0px;
diff --git a/src/components/SecondaryPanes/EventListeners.js b/src/components/SecondaryPanes/EventListeners.js
index 0247e8f97d..c983f30faa 100644
--- a/src/components/SecondaryPanes/EventListeners.js
+++ b/src/components/SecondaryPanes/EventListeners.js
@@ -100,11 +100,13 @@ class EventListeners extends Component<Props, State> {
       );
 
     return (
-      <div>
-        <AccessibleImage
-          className={classnames("arrow", { expanded })}
+      <div className="event-listener-header">
+        <button
+          className="btn-expand-category"
           onClick={e => this.onCategoryToggle(category, e)}
-        />
+        >
+          <AccessibleImage className={classnames("arrow", { expanded })} />
+        </button>
         <div>
           <label>
             <input

From c024d4d5d18ea4194b203868b30cc0120aec1e8a Mon Sep 17 00:00:00 2001
From: Harshal Lele <harshallele97@gmail.com>
Date: Wed, 13 Feb 2019 22:01:26 +0530
Subject: [PATCH 06/10] changed class names

---
 src/components/SecondaryPanes/EventListeners.css | 4 ++--
 src/components/SecondaryPanes/EventListeners.js  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/SecondaryPanes/EventListeners.css b/src/components/SecondaryPanes/EventListeners.css
index 5d00f925eb..7fbd2505af 100644
--- a/src/components/SecondaryPanes/EventListeners.css
+++ b/src/components/SecondaryPanes/EventListeners.css
@@ -20,7 +20,7 @@
 	align-items: center;
 }
 
-.btn-expand-category {
+.event-listener-expand {
 	border: none;
 	background: none;
 	padding: 4px 5px;
@@ -60,7 +60,7 @@ html[dir="rtl"] .event-listeners-content .arrow.expanded {
 	margin-inline-start: 30px;
 }
 
-.event-listener-event span {
+.event-listener-name {
 	line-height: 14px;
 	padding: 3px 0px;
 }
diff --git a/src/components/SecondaryPanes/EventListeners.js b/src/components/SecondaryPanes/EventListeners.js
index c983f30faa..44012b53c5 100644
--- a/src/components/SecondaryPanes/EventListeners.js
+++ b/src/components/SecondaryPanes/EventListeners.js
@@ -102,7 +102,7 @@ class EventListeners extends Component<Props, State> {
     return (
       <div className="event-listener-header">
         <button
-          className="btn-expand-category"
+          className="event-listener-expand"
           onClick={e => this.onCategoryToggle(category, e)}
         >
           <AccessibleImage className={classnames("arrow", { expanded })} />
@@ -145,7 +145,7 @@ class EventListeners extends Component<Props, State> {
                   onChange={e => this.onEventTypeClick(key, e.target.checked)}
                   checked={activeEventListeners.includes(key)}
                 />
-                <span>{eventType}</span>
+                <span className="event-listener-name">{eventType}</span>
               </label>
             </li>
           );

From d2944c8b356db4e8a20f3172b06215a154137cdb Mon Sep 17 00:00:00 2001
From: Harshal Lele <harshallele97@gmail.com>
Date: Thu, 14 Feb 2019 18:36:22 +0530
Subject: [PATCH 07/10] fixed padding

---
 src/components/SecondaryPanes/EventListeners.css | 12 ++++++++----
 src/components/SecondaryPanes/EventListeners.js  |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/SecondaryPanes/EventListeners.css b/src/components/SecondaryPanes/EventListeners.css
index 7fbd2505af..66ac6c04a5 100644
--- a/src/components/SecondaryPanes/EventListeners.css
+++ b/src/components/SecondaryPanes/EventListeners.css
@@ -3,7 +3,10 @@
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 .event-listeners-content {
-	padding: 4px 20px;
+	padding-top: 4px;
+	padding-bottom: 4px;
+	padding-inline-start: 14px;
+	padding-inline-end:20px;
 }
 
 .event-listeners-content ul {
@@ -28,13 +31,14 @@
 }
 
 .event-listener-group input[type="checkbox"] {
-	margin-top: 0px;
-	margin-bottom: 0px;
+	margin:0px;
+	margin-inline-end: 4px;
 }
 
-.event-listener-group label {
+.event-listener-header-label {
 	display: flex;
 	align-items: center;
+	padding-inline-start: 2px;
 }
 
 .event-listener-category {
diff --git a/src/components/SecondaryPanes/EventListeners.js b/src/components/SecondaryPanes/EventListeners.js
index 44012b53c5..8c6c319865 100644
--- a/src/components/SecondaryPanes/EventListeners.js
+++ b/src/components/SecondaryPanes/EventListeners.js
@@ -108,7 +108,7 @@ class EventListeners extends Component<Props, State> {
           <AccessibleImage className={classnames("arrow", { expanded })} />
         </button>
         <div>
-          <label>
+          <label className="event-listener-header-label">
             <input
               type="checkbox"
               value={category}

From ffea2720ace34106c939b86ed3a1e4254a3e9ea5 Mon Sep 17 00:00:00 2001
From: Harshal Lele <harshallele97@gmail.com>
Date: Thu, 14 Feb 2019 18:43:47 +0530
Subject: [PATCH 08/10] fixed formatting

---
 src/components/SecondaryPanes/EventListeners.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/SecondaryPanes/EventListeners.css b/src/components/SecondaryPanes/EventListeners.css
index 66ac6c04a5..9d8a51eae1 100644
--- a/src/components/SecondaryPanes/EventListeners.css
+++ b/src/components/SecondaryPanes/EventListeners.css
@@ -6,7 +6,7 @@
 	padding-top: 4px;
 	padding-bottom: 4px;
 	padding-inline-start: 14px;
-	padding-inline-end:20px;
+	padding-inline-end: 20px;
 }
 
 .event-listeners-content ul {
@@ -31,7 +31,7 @@
 }
 
 .event-listener-group input[type="checkbox"] {
-	margin:0px;
+	margin: 0px;
 	margin-inline-end: 4px;
 }
 

From a2be38e6973674b3ba038130c6a6b97250936657 Mon Sep 17 00:00:00 2001
From: Harshal Lele <harshallele97@gmail.com>
Date: Thu, 14 Feb 2019 21:48:37 +0530
Subject: [PATCH 09/10] added padding to labels

---
 .../SecondaryPanes/EventListeners.css         |  3 ++-
 .../SecondaryPanes/EventListeners.js          | 24 +++++++++----------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/components/SecondaryPanes/EventListeners.css b/src/components/SecondaryPanes/EventListeners.css
index 9d8a51eae1..8300cac550 100644
--- a/src/components/SecondaryPanes/EventListeners.css
+++ b/src/components/SecondaryPanes/EventListeners.css
@@ -35,10 +35,11 @@
 	margin-inline-end: 4px;
 }
 
-.event-listener-header-label {
+.event-listener-label {
 	display: flex;
 	align-items: center;
 	padding-inline-start: 2px;
+	padding-inline-end: 10px;
 }
 
 .event-listener-category {
diff --git a/src/components/SecondaryPanes/EventListeners.js b/src/components/SecondaryPanes/EventListeners.js
index 8c6c319865..c97039a38a 100644
--- a/src/components/SecondaryPanes/EventListeners.js
+++ b/src/components/SecondaryPanes/EventListeners.js
@@ -107,18 +107,16 @@ class EventListeners extends Component<Props, State> {
         >
           <AccessibleImage className={classnames("arrow", { expanded })} />
         </button>
-        <div>
-          <label className="event-listener-header-label">
-            <input
-              type="checkbox"
-              value={category}
-              onChange={e => this.onCategoryClick(category, e.target.checked)}
-              checked={checked}
-              ref={el => el && (el.indeterminate = indeterminate)}
-            />
-            <span className="event-listener-category">{category}</span>
-          </label>
-        </div>
+        <label className="event-listener-label">
+          <input
+            type="checkbox"
+            value={category}
+            onChange={e => this.onCategoryClick(category, e.target.checked)}
+            checked={checked}
+            ref={el => el && (el.indeterminate = indeterminate)}
+          />
+          <span className="event-listener-category">{category}</span>
+        </label>
       </div>
     );
   }
@@ -138,7 +136,7 @@ class EventListeners extends Component<Props, State> {
           const key = getKey(category, eventType);
           return (
             <li className="event-listener-event" key={key}>
-              <label>
+              <label className="event-listener-label">
                 <input
                   type="checkbox"
                   value={key}

From 386d3c0161b86d8017e80e7c79d0f905767854a3 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Fri, 15 Feb 2019 13:29:46 -0600
Subject: [PATCH 10/10] Make arrow hover transparent

---
 src/components/SecondaryPanes/EventListeners.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/SecondaryPanes/EventListeners.css b/src/components/SecondaryPanes/EventListeners.css
index 8300cac550..27697ec4ad 100644
--- a/src/components/SecondaryPanes/EventListeners.css
+++ b/src/components/SecondaryPanes/EventListeners.css
@@ -30,6 +30,10 @@
 	line-height: 12px;
 }
 
+.event-listener-expand:hover {
+	background: transparent;
+}
+
 .event-listener-group input[type="checkbox"] {
 	margin: 0px;
 	margin-inline-end: 4px;