From fb43711ef2d5f9edcd90ac5d82ccac230559ab17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jim=20Br=C3=A4nnlund?= <jim.brannlund@gmail.com>
Date: Fri, 14 Apr 2023 18:20:27 +0200
Subject: [PATCH] Feature: Make entire row collapsible

---
 src/layout/css/style.scss              | 3 ++-
 src/pytest_html/resources/index.jinja2 | 2 +-
 src/pytest_html/resources/style.css    | 4 ++--
 src/pytest_html/scripts/dom.js         | 2 +-
 src/pytest_html/scripts/main.js        | 4 ++--
 5 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/layout/css/style.scss b/src/layout/css/style.scss
index 5fa7be7f..115fa206 100644
--- a/src/layout/css/style.scss
+++ b/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)';
diff --git a/src/pytest_html/resources/index.jinja2 b/src/pytest_html/resources/index.jinja2
index ced04544..da3410b9 100644
--- a/src/pytest_html/resources/index.jinja2
+++ b/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>
diff --git a/src/pytest_html/resources/style.css b/src/pytest_html/resources/style.css
index 20fe0a18..9d95b058 100644
--- a/src/pytest_html/resources/style.css
+++ b/src/pytest_html/resources/style.css
@@ -168,10 +168,10 @@ div.media {
   display: none;
 }
 
-.col-result {
+.collapsible td:not(.col-links) {
   cursor: pointer;
 }
-.col-result:hover::after {
+.collapsible td:not(.col-links):hover::after {
   color: #bbb;
   font-style: italic;
   cursor: pointer;
diff --git a/src/pytest_html/scripts/dom.js b/src/pytest_html/scripts/dom.js
index bb1ae3d6..c517450f 100644
--- a/src/pytest_html/scripts/dom.js
+++ b/src/pytest_html/scripts/dom.js
@@ -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
diff --git a/src/pytest_html/scripts/main.js b/src/pytest_html/scripts/main.js
index 4e48dade..fa80d9e7 100644
--- a/src/pytest_html/scripts/main.js
+++ b/src/pytest_html/scripts/main.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()
         })
     })