Improve EventListener UI

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 {
@@ -15,6 +18,39 @@
 	user-select: none;
 }
 
+.event-listener-header {
+	display: flex;
+	align-items: center;
+}
+
+.event-listener-expand {
+	border: none;
+	background: none;
+	padding: 4px 5px;
+	line-height: 12px;
+}
+
+.event-listener-expand:hover {
+	background: transparent;
+}
+
+.event-listener-group input[type="checkbox"] {
+	margin: 0px;
+	margin-inline-end: 4px;
+}
+
+.event-listener-label {
+	display: flex;
+	align-items: center;
+	padding-inline-start: 2px;
+	padding-inline-end: 10px;
+}
+
+.event-listener-category {
+	padding: 3px 0px;
+	line-height: 14px;
+}
+
 .event-listeners-content .arrow {
 	margin-inline-end: 0;
 }
@@ -33,7 +69,14 @@ html[dir="rtl"] .event-listeners-content .arrow.expanded {
 	margin-inline-start: 30px;
 }
 
+.event-listener-name {
+	line-height: 14px;
+	padding: 3px 0px;
+}
+
 .event-listener-event input {
 	margin-inline-end: 4px;
 	margin-inline-start: 0px;
+	margin-top: 0px;
+	margin-bottom: 0px;
 }

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,24 @@ class EventListeners extends Component<Props, State> {
       );
 
     return (
-      <label>
-        <AccessibleImage
-          className={classnames("arrow", { expanded })}
+      <div className="event-listener-header">
+        <button
+          className="event-listener-expand"
           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>
+        >
+          <AccessibleImage className={classnames("arrow", { expanded })} />
+        </button>
+        <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>
     );
   }
 
@@ -134,14 +136,14 @@ 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}
                   onChange={e => this.onEventTypeClick(key, e.target.checked)}
                   checked={activeEventListeners.includes(key)}
                 />
-                {eventType}
+                <span className="event-listener-name">{eventType}</span>
               </label>
             </li>
           );