[インデックス 10991] ファイルの概要
このコミットは、Goプロジェクトのダッシュボードのユーザーインターフェース（UI）に関する変更です。具体的には、ビルド結果を表示するテーブルにおいて、ヘッダー行がコミット行と同様に交互に背景色が付けられてしまう問題を修正し、視認性を向上させています。
コミット
commit 0f14ebf99350fd8e87653129c5e1337cb8de3957
Author: David Symonds <dsymonds@golang.org>
Date: Fri Dec 23 13:21:25 2011 +1100
dashboard: Don't highlight first heading row.
The two heading rows were previously a little hard to pick out,
because they were alternately shaded like the commit rows.
R=adg
CC=golang-dev
https://golang.org/cl/5500074
---
misc/dashboard/app/build/ui.html | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/misc/dashboard/app/build/ui.html b/misc/dashboard/app/build/ui.html
index 1fb7b25274..678c95238a 100644
--- a/misc/dashboard/app/build/ui.html
+++ b/misc/dashboard/app/build/ui.html
@@ -26,7 +26,7 @@
padding: 2px 4px;\n font-size: 10pt;\n }\n- .build tr:nth-child(2n) {\n+ .build tr.commit:nth-child(2n) {\n background-color: #f0f0f0;\n }\n .build .hash {\n@@ -102,7 +102,7 @@\n {{end}}\n </tr>\n {{range $c := $.Commits}}\n- <tr>\n+ <tr class=\"commit\">\n <td class=\"hash\"><a href=\"{{repoURL .Hash \"\"}}\">{{shortHash .Hash}}</a></td>\n {{range $.Builders}}\n <td class=\"result\">\n```
## GitHub上でのコミットページへのリンク
[https://github.com/golang/go/commit/0f14ebf99350fd8e87653129c5e1337cb8de3957](https://github.com/golang/go/commit/0f14ebf99350fd8e87653129c5e1337cb8de3957)
## 元コミット内容
dashboard: Don't highlight first heading row.
The two heading rows were previously a little hard to pick out, because they were alternately shaded like the commit rows.
R=adg CC=golang-dev https://golang.org/cl/5500074
## 変更の背景
Goプロジェクトのビルドダッシュボードでは、ビルド結果がテーブル形式で表示されます。このテーブルには、ビルドの状態を示すコミットごとの行と、その上部にヘッダー行が存在します。以前の実装では、これらのヘッダー行もコミット行と同様に、CSSの`nth-child`セレクタによって交互に背景色が付けられていました。
この結果、ヘッダー行とコミット行の区別がつきにくく、特にヘッダー行がコミット行と同じように網掛けされることで、視覚的な混乱を招いていました。ユーザーがダッシュボードを一目で理解し、必要な情報を素早く見つけられるようにするためには、ヘッダー行を明確に区別する必要がありました。このコミットは、この視認性の問題を解決することを目的としています。
## 前提知識の解説
### Go Dashboard
Go Dashboardは、Go言語プロジェクトの継続的インテグレーション（CI）システムの一部として機能するウェブアプリケーションです。Goプロジェクトの様々なブランチやプラットフォームにおけるビルド、テスト、ベンチマークの結果をリアルタイムで表示し、開発者がプロジェクトの健全性を一目で確認できるようにします。このダッシュボードは、Goのソースコードリポジトリ内の`misc/dashboard`ディレクトリに存在し、Go言語で記述されたバックエンドと、HTML、CSS、JavaScriptで構成されるフロントエンドで構築されています。
### HTML (HyperText Markup Language)
ウェブページの構造を定義するためのマークアップ言語です。`<table>`タグは表を作成し、`<tr>`タグは表の行を、`<td>`タグは表のセルを定義します。
### CSS (Cascading Style Sheets)
HTML要素の見た目（スタイル）を定義するためのスタイルシート言語です。色、フォント、レイアウトなどを指定します。
### CSS `nth-child()` セレクタ
`nth-child(an+b)`は、親要素内の子要素のうち、特定のパターンに一致する要素を選択するCSS擬似クラスセレクタです。
* `nth-child(even)`または`nth-child(2n)`: 偶数番目の子要素を選択します。
* `nth-child(odd)`または`nth-child(2n+1)`: 奇数番目の子要素を選択します。
このセレクタは、テーブルの行に交互の背景色を適用する「ゼブラストライプ」効果によく使用されます。
### CSS クラスセレクタ
HTML要素に適用された`class`属性の値に基づいて要素を選択するセレクタです。例えば、`<tr class="commit">`というHTML要素がある場合、CSSで`.commit`セレクタを使用することで、その要素にスタイルを適用できます。クラスセレクタは、特定の種類の要素にのみスタイルを適用したい場合に非常に便利です。
## 技術的詳細
この変更は、Go Dashboardのフロントエンド部分、具体的には`misc/dashboard/app/build/ui.html`ファイル内のCSSスタイルとHTML構造に焦点を当てています。
問題の核心は、テーブルの行に交互の背景色を適用するCSSルールが、ヘッダー行とデータ行（コミット行）の両方に無差別に適用されていた点にありました。元のCSSルールは以下のようでした。
```css
.build tr:nth-child(2n) {
background-color: #f0f0f0;
}
これは、.buildクラスを持つ要素（この場合はテーブル）内のすべての偶数番目の<tr>要素に薄いグレーの背景色を適用していました。これにより、ヘッダー行も偶数番目であれば網掛けされてしまい、コミット行との視覚的な区別が曖昧になっていました。
このコミットでは、この問題を解決するために、以下の2つの変更が行われました。
-
CSSセレクタの変更:
tr:nth-child(2n)セレクタに.commitクラスを追加し、tr.commit:nth-child(2n)としました。 これにより、交互の背景色が適用される対象が、.buildクラスを持つ要素内の<tr>要素のうち、かつcommitクラスを持つ偶数番目の行に限定されます。ヘッダー行にはcommitクラスが付与されていないため、この新しいルールはヘッダー行には適用されなくなります。 -
HTML構造の変更: コミット情報を表示する各
<tr>要素に、新たにclass="commit"属性が追加されました。 これにより、コミット行のみが新しいCSSルールtr.commit:nth-child(2n)の対象となり、引き続き交互の背景色が適用されるようになります。ヘッダー行はcommitクラスを持たないため、網掛けされずに残ります。
これらの変更により、ヘッダー行は常に白い背景色（またはデフォルトの背景色）を維持し、コミット行のみが交互に網掛けされるようになります。これにより、ダッシュボードの視覚的な階層が明確になり、ヘッダーとデータの区別が容易になることで、ユーザーエクスペリエンスが向上します。
コアとなるコードの変更箇所
--- a/misc/dashboard/app/build/ui.html
+++ b/misc/dashboard/app/build/ui.html
@@ -26,7 +26,7 @@
padding: 2px 4px;\n font-size: 10pt;\n }\n- .build tr:nth-child(2n) {\n+ .build tr.commit:nth-child(2n) {\n background-color: #f0f0f0;\n }\n .build .hash {\n@@ -102,7 +102,7 @@
{{end}}\n </tr>\n {{range $c := $.Commits}}\n- <tr>\n+ <tr class=\"commit\">\n <td class=\"hash\"><a href=\"{{repoURL .Hash \"\"}}\">{{shortHash .Hash}}</a></td>\n {{range $.Builders}}\n <td class=\"result\">\n```
## コアとなるコードの解説
### CSSの変更 (`misc/dashboard/app/build/ui.html` の `style` タグ内)
```css
- .build tr:nth-child(2n) {
+ .build tr.commit:nth-child(2n) {
background-color: #f0f0f0;
}
- 変更前:
.build tr:nth-child(2n)これは、.buildクラスを持つ親要素（おそらく<table>要素）内のすべての偶数番目の<tr>要素を選択し、背景色を#f0f0f0（薄いグレー）に設定していました。このため、ヘッダー行も偶数番目であればこのスタイルが適用されていました。 - 変更後:
.build tr.commit:nth-child(2n)この変更により、セレクタに.commitクラスが追加されました。これは、.buildクラスを持つ親要素内の<tr>要素のうち、かつcommitクラスを持つ偶数番目の行にのみ、背景色#f0f0f0を適用することを意味します。これにより、commitクラスが付与されていないヘッダー行は、この交互の背景色から除外されます。
HTMLの変更 (misc/dashboard/app/build/ui.html の body タグ内)
{{end}}
</tr>
{{range $c := $.Commits}}
- <tr>
+ <tr class="commit">
<td class="hash"><a href="{{repoURL .Hash ""}}">{{shortHash .Hash}}</a></td>
{{range $.Builders}}
<td class="result">
- 変更前:
<tr>コミット情報を表示する各行は、単に<tr>タグで定義されていました。 - 変更後:
<tr class="commit">各コミット行に明示的にclass="commit"属性が追加されました。これにより、上記のCSSセレクタの変更と連携し、これらの行のみが交互の背景色付けの対象となります。{{range $c := $.Commits}}はGoのテンプレート構文であり、$.Commitsコレクション内の各コミットに対してこの<tr>要素が生成されることを示しています。
これらの変更により、CSSセレクタとHTML構造が連携し、ヘッダー行とコミット行の視覚的な区別が明確になり、ダッシュボードの可読性が向上しました。
関連リンク
- Go Gerrit Change: https://golang.org/cl/5500074 このコミットは、Goプロジェクトがコードレビューに利用しているGerritシステム上の変更セット（Change-ID）に対応しています。Gerritは、Gitリポジトリに対する変更をレビューし、承認するためのウェブベースのコードレビューツールです。
参考にした情報源リンク
- MDN Web Docs - :nth-child(): https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child
- MDN Web Docs - CSS クラスセレクター: https://developer.mozilla.org/ja/docs/Web/CSS/Class_selectors
- Go プロジェクト公式サイト: https://go.dev/
- Gerrit Code Review: https://www.gerritcodereview.com/