Feature: Make entire row collapsible

Author: BeyondEvil

src/layout/css/style.scss

@@ -193,12 +193,13 @@ div.media {
   cursor: pointer;
 }
 
-.col-result {
+.collapsible td:not(.col-links) {
   cursor: pointer;
   &:hover::after {
     @include rowToggle;
   }
 }
+
 .col-result.collapser {
   &:hover::after {
     content: ' (hide details)';

src/pytest_html/resources/index.jinja2

@@ -29,7 +29,7 @@
     </template>
     <template id="template_results-table__tbody">
       <tbody class="results-table-row">
-        <tr>
+        <tr class="collapsible">
           <td class="col-result"></td>
           <td class="col-name"></td>
           <td class="col-duration"></td>

src/pytest_html/resources/style.css

@@ -85,9 +85,9 @@ const dom = {
         const resultBody = templateResult.content.cloneNode(true)
         resultBody.querySelector('tbody').classList.add(resultLower)
         resultBody.querySelector('tbody').id = testId
+        resultBody.querySelector('.collapsible').dataset.id = id
         resultBody.querySelector('.col-result').innerText = result
         resultBody.querySelector('.col-result').classList.add(`${collapsed ? 'expander' : 'collapser'}`)
-        resultBody.querySelector('.col-result').dataset.id = id
         resultBody.querySelector('.col-name').innerText = testId
 
         const formattedDuration = duration < 1 ? formatDuration(duration).ms : formatDuration(duration).formatted

src/pytest_html/scripts/dom.js

@@ -65,9 +65,9 @@ const renderContent = (tests) => {
             redraw()
         })
     })
-    findAll('.col-result').forEach((elem) => {
+    findAll('.collapsible td:not(.col-links').forEach((elem) => {
         elem.addEventListener('click', ({ target }) => {
-            manager.toggleCollapsedItem(target.dataset.id)
+            manager.toggleCollapsedItem(target.parentElement.dataset.id)
             redraw()
         })
     })