internal/relui: use table instead of css-grid for tasks
Our hack of using css-grid with nested details elements has broken in
recent Firefox and Chrome releases. This change switches to a table and
some minimal JS for expanding of log data. It doesn't improve
accessibility of expanding rows yet, which was likely in a broken state
before with display: contents.
Fixes golang/go#50618
Change-Id: I7a2594135db1f7ded4bcc5c1feb2f3de24b5954d
Reviewed-on: https://go-review.googlesource.com/c/build/+/378654
Trust: Alex Rakoczy <alex@golang.org>
Run-TryBot: Alex Rakoczy <alex@golang.org>
TryBot-Result: Gopher Robot <gobot@golang.org>
Reviewed-by: Dmitri Shuralyov <dmitshur@golang.org>
diff --git a/internal/relui/static/images/chevron_right_black_24dp.svg b/internal/relui/static/images/chevron_right_black_24dp.svg
new file mode 100644
index 0000000..b0428e2
--- /dev/null
+++ b/internal/relui/static/images/chevron_right_black_24dp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"/></svg>
\ No newline at end of file
diff --git a/internal/relui/static/images/expand_more_black_24dp.svg b/internal/relui/static/images/expand_more_black_24dp.svg
new file mode 100644
index 0000000..b615405
--- /dev/null
+++ b/internal/relui/static/images/expand_more_black_24dp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M24 24H0V0h24v24z" fill="none" opacity=".87"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"/></svg>
\ No newline at end of file
diff --git a/internal/relui/static/site.js b/internal/relui/static/site.js
new file mode 100644
index 0000000..0154a0e
--- /dev/null
+++ b/internal/relui/static/site.js
@@ -0,0 +1,19 @@
+/*
+ Copyright 2022 The Go Authors. All rights reserved.
+ Use of this source code is governed by a BSD-style
+ license that can be found in the LICENSE file.
+*/
+
+;(function () {
+ const registerTaskListExpandListeners = (selector) => {
+ document.querySelectorAll(selector).forEach((element) => {
+ element.addEventListener("click", (e) => {
+ e.stopPropagation()
+ element.classList.toggle("TaskList-expanded")
+ element.nextElementSibling.classList.toggle("TaskList-expanded")
+ })
+ })
+ }
+
+ registerTaskListExpandListeners(".TaskList-expandableItem")
+})()
diff --git a/internal/relui/static/styles.css b/internal/relui/static/styles.css
index 0f2c51c..cb4f8ec 100644
--- a/internal/relui/static/styles.css
+++ b/internal/relui/static/styles.css
@@ -100,57 +100,67 @@
.TaskList {
align-items: center;
border-bottom: 0.0625rem solid #d6d6d6;
- display: grid;
- grid-auto-rows: minmax(1.5rem, auto);
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+ border-collapse: collapse;
margin-bottom: 1rem;
+ width: 100%;
+}
+.TaskList-itemHeaderCol {
+ padding: 0.3125rem 0;
}
.TaskList-itemCol {
border-top: 0.0625rem solid #d6d6d6;
overflow: hidden;
- padding: 0.25rem 0;
+ padding: 0.5rem 0 0.5rem 1px;
text-overflow: ellipsis;
white-space: nowrap;
}
.TaskList-itemSummary {
align-items: center;
cursor: pointer;
- display: contents;
font-size: 0.8125rem;
padding: 0.5rem;
}
.TaskList-itemSummary:hover {
background-color: #fafafa;
}
-.TaskList-itemSummary:hover > .TaskList-itemCol {
- background-color: #fafafa;
+.TaskList-itemExpand {
+ padding: 0.25rem 0 0 0;
+ text-align: center;
+ width: 2rem;
}
-.TaskList-itemDetails {
- display: contents;
+.TaskList-itemExpandControl {
+ height: 1.5rem;
+ width: 1.5rem;
}
-.TaskList-itemDetails .TaskList-itemStatus::before {
- content: "▸";
+.TaskList-expanded .TaskList-itemExpandClosed {
+ display: none;
}
-.TaskList-itemDetails[open] .TaskList-itemStatus::before {
- content: "▾";
+.TaskList-ItemExpandOpened {
+ display: none;
+}
+.TaskList-expanded .TaskList-ItemExpandOpened {
+ display: inline;
+}
+.TaskList-itemLogsRow {
+ display: none;
+}
+.TaskList-expanded.TaskList-itemLogsRow {
+ display: table-row;
}
.TaskList-itemLogs {
background-color: #f5f5f5;
box-shadow: inset 0 6px 6px -8px #888;
font-size: 0.8125rem;
- grid-column: 1/6;
margin: 0;
padding: 1rem 0;
}
.TaskList-itemLogLine {
- grid-row: 6;
padding: 0 1rem;
}
.TaskList-itemLogLine:nth-child(even) {
background-color: #fafafa;
}
.TaskList-item {
- display: contents;
}
.TaskList-itemHeader {
align-items: center;
diff --git a/internal/relui/templates/home.html b/internal/relui/templates/home.html
index ebd946d..f9097b6 100644
--- a/internal/relui/templates/home.html
+++ b/internal/relui/templates/home.html
@@ -29,47 +29,58 @@
</tbody>
</table>
<h4 class="WorkflowList-sectionTitle">Tasks</h4>
- <ul class="TaskList">
- <li class="TaskList-item TaskList-itemHeader">
- <span class="TaskList-itemStatus">Status</span>
- <span class="TaskList-itemName">Name</span>
- <span class="TaskList-itemCreated">Started</span>
- <span class="TaskList-itemUpdated">Updated</span>
- <span class="TaskList-itemResult">Result</span>
- </li>
+ <table class="TaskList">
+ <thead>
+ <tr class="TaskList-item TaskList-itemHeader">
+ <th class="TaskList-itemHeaderCol TaskList-itemExpand"></th>
+ <th class="TaskList-itemHeaderCol TaskList-itemStatus">Status</th>
+ <th class="TaskList-itemHeaderCol TaskList-itemName">Name</th>
+ <th class="TaskList-itemHeaderCol TaskList-itemCreated">Started</th>
+ <th class="TaskList-itemHeaderCol TaskList-itemUpdated">Updated</th>
+ <th class="TaskList-itemHeaderCol TaskList-itemResult">Result</th>
+ </tr>
+ </thead>
{{$tasks := index $.WorkflowTasks $workflow.ID}}
{{range $task := $tasks}}
- <li class="TaskList-item">
- <details class="TaskList-itemDetails">
- <summary class="TaskList-itemSummary">
- <span class="TaskList-itemCol TaskList-itemStatus">
- {{$task.Finished}}
+ <tbody>
+ <tr class="TaskList-item TaskList-itemSummary TaskList-expandableItem">
+ <td class="TaskList-itemCol TaskList-itemExpand">
+ <span class="TaskList-itemExpandClosed">
+ <img class="TaskList-itemExpandControl" alt="unfold more" src="{{baseLink "/static/images/chevron_right_black_24dp.svg"}}" />
</span>
- <span class="TaskList-itemCol TaskList-itemName">
- {{$task.Name}}
+ <span class="TaskList-ItemExpandOpened">
+ <img class="TaskList-itemExpandControl" alt="unfold less" src="{{baseLink "/static/images/expand_more_black_24dp.svg"}}" />
</span>
- <span class="TaskList-itemCol TaskList-itemCreated">
- {{$task.CreatedAt.UTC.Format "Mon Jan _2 2006 15:04:05"}}
- </span>
- <span class="TaskList-itemCol TaskList-itemUpdated">
- {{$task.UpdatedAt.UTC.Format "Mon Jan _2 2006 15:04:05"}}
- </span>
- <span class="TaskList-itemCol TaskList-itemResult">
- {{$task.Result}}
- </span>
- </summary>
- <div class="TaskList-itemLogs">
+ </td>
+ <td class="TaskList-itemCol TaskList-itemStatus">
+ {{$task.Finished}}
+ </td>
+ <td class="TaskList-itemCol TaskList-itemName">
+ {{$task.Name}}
+ </td>
+ <td class="TaskList-itemCol TaskList-itemCreated">
+ {{$task.CreatedAt.UTC.Format "Mon Jan _2 2006 15:04:05"}}
+ </td>
+ <td class="TaskList-itemCol TaskList-itemUpdated">
+ {{$task.UpdatedAt.UTC.Format "Mon Jan _2 2006 15:04:05"}}
+ </td>
+ <td class="TaskList-itemCol TaskList-itemResult">
+ {{$task.Result}}
+ </td>
+ </tr>
+ <tr class="TaskList-itemLogsRow">
+ <td class="TaskList-itemLogs" colspan="6">
{{range $log := $.Logs $workflow.ID $task.Name}}
<div class="TaskList-itemLogLine">
{{$log.CreatedAt.UTC.Format "2006/01/02 15:04:05"}}
{{$log.Body}}
</div>
{{end}}
- </div>
- </details>
- </li>
+ </td>
+ </tr>
+ </tbody>
{{end}}
- </ul>
+ </table>
</li>
{{end}}
</ul>
diff --git a/internal/relui/templates/layout.html b/internal/relui/templates/layout.html
index 69f6ec1..f21bbc6 100644
--- a/internal/relui/templates/layout.html
+++ b/internal/relui/templates/layout.html
@@ -8,6 +8,7 @@
<title>Go Releases</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="{{baseLink "/static/styles.css"}}" />
+ <script async defer src="{{baseLink "/static/site.js"}}"></script>
<body class="Site">
<header class="Site-header">
<div class="Header">
