Improved "add new row" UI.

Closes #209.

resources/report/css/style.css

@@ -341,29 +341,32 @@ td input {
     width: 100%;
     text-overflow: ellipsis;
 }
-.editable td:last-child {
+
+table[is=editable-table] td:last-child {
     cursor: pointer;
 }
-.editable td:last-child:hover {
+table[is=editable-table] td:last-child:hover {
     color: red;
 }
-.editable {
+table[is=editable-table] {
     margin: 3em 1em;
     border-collapse: collapse;
 }
-.editable td, .editable th {
+table[is=editable-table] td, table[is=editable-table] th {
     vertical-align: top;
     text-align: left;
     padding: 0.5em;
 }
-.editable th {
+table[is=editable-table] th {
     border-bottom: 1px black solid;
 }
-.editable tr:last-child {
+table[is=editable-table] tbody tr:last-child {
     cursor: pointer;
+    color: grey;
+}
+table[is=editable-table] tbody tr:last-child:hover {
+    color: black;
 }
-
-
 
 #pluginsNav .priority {
     display: none;

resources/report/js/custom.js

@@ -869,7 +869,7 @@ var EditableTableProto = Object.create(HTMLTableElement.prototype, {
 
         value: function() {
             /* Add new row listener. */
-            this.querySelector('tbody tr:last-child').addEventListener('dblclick', this.addEmptyRow, false);
+            this.querySelector('tbody tr:last-child').addEventListener('click', this.addEmptyRow, false);
         }
 
     },
@@ -886,7 +886,7 @@ var EditableTableProto = Object.create(HTMLTableElement.prototype, {
             }
 
             /* Remove new row listener. */
-            this.querySelector('tbody tr:last-child').removeEventListener('dblclick', this.addEmptyRow, false);
+            this.querySelector('tbody tr:last-child').removeEventListener('click', this.addEmptyRow, false);
 
         }
     },

resources/report/report.html

@@ -150,26 +150,30 @@
             width: 100%;
             text-overflow: ellipsis;
         }
-        table td:last-child {
+        td:last-child {
             cursor: pointer;
         }
-        table td:last-child:hover {
+        td:last-child:hover {
             color: red;
         }
         table {
             margin: 3em 1em;
             border-collapse: collapse;
         }
-        table td, table th {
+        td, th {
             vertical-align: top;
             text-align: left;
             padding: 0.5em;
         }
-        table th {
+        th {
             border-bottom: 1px black solid;
         }
-        table tr:last-child {
+        tbody tr:last-child {
             cursor: pointer;
+            color: grey;
+        }
+        tbody tr:last-child:hover {
+            color: black;
         }
         input[type='checkbox'] {
             position:relative;