Rebuild the page chrome as semantic HTML

The masthead, tab bar, breadcrumb, content region and footer were HTML
tables, which cannot reflow and forced the page to scroll sideways on
small screens. Class and id names are kept so custom themes keep
matching, the tabs gain title hints and the form controls accessible
names.

4 files changed, 189 insertions, 103 deletions

diff --git a/assets/cgit.css b/assets/cgit.css
index d10a24d..e02d551 100644
--- a/assets/cgit.css
+++ b/assets/cgit.css
@@ -21,99 +21,142 @@ div#cgit table {
 	border-collapse: collapse;
 }
 
-div#cgit table#header {
+div#cgit #header {
+	display: grid;
+	grid-template-columns: auto 1fr auto;
+	grid-template-areas:
+		"logo heading switch"
+		"logo desc    owner";
+	align-items: center;
+	column-gap: 10px;
 	width: 100%;
 	margin-bottom: 1em;
 }
 
-div#cgit table#header td.logo {
-	width: 96px;
-	vertical-align: top;
+div#cgit #header .logo {
+	grid-area: logo;
+	align-self: start;
+}
+
+div#cgit #header .logo img {
+	display: block;
+	max-width: 96px;
 }
 
-div#cgit table#header td.main {
+div#cgit #header h1.main {
+	grid-area: heading;
+	margin: 0;
 	font-size: 250%;
-	padding-left: 10px;
+	font-weight: normal;
 	white-space: nowrap;
 }
 
-div#cgit table#header td.main a {
+div#cgit #header h1.main a {
 	color: #000;
 }
 
-div#cgit table#header td.form {
-	text-align: right;
-	vertical-align: bottom;
-	padding-right: 1em;
-	padding-bottom: 2px;
-	white-space: nowrap;
-}
-
-div#cgit table#header td.form form,
-div#cgit table#header td.form input,
-div#cgit table#header td.form select {
+div#cgit #header .branch-switch {
+	grid-area: switch;
+	justify-self: end;
+	align-self: end;
 	font-size: 90%;
 }
 
-div#cgit table#header td.sub {
+div#cgit #header .sub {
+	grid-area: desc;
+	margin: 0;
 	color: #777;
 	border-top: solid 1px #ccc;
-	padding-left: 10px;
 }
 
-div#cgit table.tabs {
+div#cgit #header .owner {
+	grid-area: owner;
+	justify-self: end;
+	text-align: right;
+}
+
+@media (max-width: 640px) {
+	div#cgit #header {
+		grid-template-columns: auto 1fr;
+		grid-template-areas:
+			"logo heading"
+			"desc desc"
+			"owner owner"
+			"switch switch";
+		row-gap: 4px;
+	}
+	div#cgit #header .branch-switch,
+	div#cgit #header .owner {
+		justify-self: start;
+		text-align: left;
+	}
+	div#cgit #header h1.main {
+		white-space: normal;
+	}
+}
+
+div#cgit .tabs {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-end;
+	column-gap: 0.5em;
 	border-bottom: solid 3px #ccc;
-	border-collapse: collapse;
 	margin-top: 2em;
-	margin-bottom: 0px;
-	width: 100%;
 }
 
-div#cgit table.tabs td {
-	padding: 0px 1em;
-	vertical-align: bottom;
+div#cgit .tabs ul {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-end;
+	flex: 1 1 auto;
+	list-style: none;
+	margin: 0;
+	padding: 0;
 }
 
-div#cgit table.tabs td a {
+div#cgit .tabs li {
+	margin: 0;
+	padding: 0 1em;
+}
+
+div#cgit .tabs a {
+	display: inline-block;
 	padding: 2px 0.75em;
 	color: #777;
 	font-size: 110%;
 }
 
-div#cgit table.tabs td a.active {
+div#cgit .tabs a.active {
 	color: #000;
 	background-color: #ccc;
 }
 
-div#cgit table.tabs a[href^="http://"]:after, div#cgit table.tabs a[href^="https://"]:after {
+div#cgit .tabs a.external:after {
 	content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgAhcJDQY+gm2TAAAAHWlUWHRDb21tZW50AAAAAABDcmVhdGVkIHdpdGggR0lNUGQuZQcAAABbSURBVAhbY2BABs4MU4CwhYHBh2Erww4wrGFQZHjI8B8IgUIscJWyDHcggltQhI4zGDCcRwhChPggHIggP1QoAVmQkSETrGoHsiAEsACtBYN0oDAMbgU6EBcAAL2eHUt4XUU4AAAAAElFTkSuQmCC);
 	opacity: 0.5;
 	margin: 0 0 0 5px;
 }
 
-div#cgit table.tabs td.form {
-	text-align: right;
-}
-
-div#cgit table.tabs td.form form {
+div#cgit .tabs .search {
 	padding-bottom: 2px;
 	font-size: 90%;
 	white-space: nowrap;
 }
 
-div#cgit table.tabs td.form input,
-div#cgit table.tabs td.form select {
+div#cgit .tabs .search input,
+div#cgit .tabs .search select {
 	font-size: 90%;
 }
 
-div#cgit div.path {
+div#cgit .path {
 	margin: 0px;
 	padding: 5px 2em 2px 2em;
 	color: #000;
 	background-color: #eee;
+	overflow-wrap: anywhere;
 }
 
-div#cgit div.content {
+div#cgit .content {
 	margin: 0px;
 	padding: 2em;
 	border-bottom: solid 3px #ccc;
@@ -662,19 +705,19 @@ div#cgit span.deletions {
 	color: #800;
 }
 
-div#cgit div.footer {
+div#cgit .footer {
 	margin-top: 0.5em;
 	text-align: center;
 	font-size: 80%;
 	color: #ccc;
 }
 
-div#cgit div.footer a {
+div#cgit .footer a {
 	color: #ccc;
 	text-decoration: none;
 }
 
-div#cgit div.footer a:hover {
+div#cgit .footer a:hover {
 	text-decoration: underline;
 }
 
diff --git a/source/ui-shared.c b/source/ui-shared.c
index eb68ab7..69d2cdf 100644
--- a/source/ui-shared.c
+++ b/source/ui-shared.c
@@ -867,7 +867,7 @@ void cgit_print_docstart(void)
 
 void cgit_print_docend(void)
 {
-	html("</div> <!-- class=content -->\n");
+	html("</main>\n");
 	if (ctx.cfg.embedded) {
 		html("</div> <!-- id=cgit -->\n");
 		if (ctx.cfg.footer)
@@ -877,10 +877,10 @@ void cgit_print_docend(void)
 	if (ctx.cfg.footer)
 		html_include(ctx.cfg.footer);
 	else {
-		htmlf("<div class='footer'>generated by <a href='https://git.zx2c4.com/cgit/about/'>cgit %s</a> "
+		htmlf("<footer class='footer'>generated by <a href='https://git.zx2c4.com/cgit/about/'>cgit %s</a> "
 			"(<a href='https://git-scm.com/'>git %s</a>) at ", cgit_version, git_version_string);
 		html_txt(show_date(time(NULL), 0, cgit_date_mode(DATE_ISO8601)));
-		html("</div>\n");
+		html("</footer>\n");
 	}
 	html("</div> <!-- id=cgit -->\n");
 	html("</body>\n</html>\n");
@@ -1015,9 +1015,6 @@ static void print_header(void)
 {
 	char *logo = NULL, *logo_link = NULL;
 
-	html("<table id='header'>\n");
-	html("<tr>\n");
-
 	if (ctx.repo && ctx.repo->logo && *ctx.repo->logo)
 		logo = ctx.repo->logo;
 	else
@@ -1026,44 +1023,47 @@ static void print_header(void)
 		logo_link = ctx.repo->logo_link;
 	else
 		logo_link = ctx.cfg.logo_link;
+
+	html("<header id='header'>\n");
 	if (logo && *logo) {
-		html("<td class='logo' rowspan='2'><a href='");
+		html("<a class='logo' href='");
 		if (logo_link && *logo_link)
 			html_attr(logo_link);
 		else
 			html_attr(cgit_rooturl());
 		html("'><img src='");
 		html_attr(logo);
-		html("' alt='cgit logo'/></a></td>\n");
+		html("' alt='cgit logo'/></a>\n");
 	}
 
-	html("<td class='main'>");
+	html("<h1 class='main'>");
 	if (ctx.repo) {
 		cgit_index_link("index", NULL, NULL, NULL, NULL, 0, 1);
 		html(" : ");
 		cgit_summary_link(ctx.repo->name, NULL, NULL, NULL);
-		if (ctx.env.authenticated) {
-			html("</td><td class='form'>");
-			html("<form method='get'>\n");
-			cgit_add_hidden_formfields(0, 1, ctx.qry.page);
-			html("<select name='h' onchange='this.form.submit();'>\n");
-			refs_for_each_branch_ref(get_main_ref_store(the_repository),
-						 print_branch_option, ctx.qry.head);
-			if (ctx.repo->enable_remote_branches)
-				refs_for_each_remote_ref(get_main_ref_store(the_repository),
-							 print_branch_option, ctx.qry.head);
-			html("</select> ");
-			html("<input type='submit' value='switch'/>");
-			html("</form>");
-		}
 	} else
 		html_txt(ctx.cfg.root_title);
-	html("</td></tr>\n");
+	html("</h1>\n");
+
+	if (ctx.repo && ctx.env.authenticated) {
+		html("<form class='branch-switch' method='get'>\n");
+		cgit_add_hidden_formfields(0, 1, ctx.qry.page);
+		html("<select name='h' aria-label='Branch' onchange='this.form.submit();'>\n");
+		refs_for_each_branch_ref(get_main_ref_store(the_repository),
+					 print_branch_option, ctx.qry.head);
+		if (ctx.repo->enable_remote_branches)
+			refs_for_each_remote_ref(get_main_ref_store(the_repository),
+						 print_branch_option, ctx.qry.head);
+		html("</select> ");
+		html("<input type='submit' value='switch'/>");
+		html("</form>\n");
+	}
 
-	html("<tr><td class='sub'>");
 	if (ctx.repo) {
+		html("<p class='sub desc'>");
 		html_txt(ctx.repo->desc);
-		html("</td><td class='sub right'>");
+		html("</p>\n");
+		html("<p class='sub owner'>");
 		if (ctx.repo->owner_filter) {
 			cgit_open_filter(ctx.repo->owner_filter);
 			html_txt(ctx.repo->owner);
@@ -1071,11 +1071,13 @@ static void print_header(void)
 		} else {
 			html_txt(ctx.repo->owner);
 		}
-	} else {
-		if (ctx.cfg.root_desc)
-			html_txt(ctx.cfg.root_desc);
+		html("</p>\n");
+	} else if (ctx.cfg.root_desc) {
+		html("<p class='sub desc'>");
+		html_txt(ctx.cfg.root_desc);
+		html("</p>\n");
 	}
-	html("</td></tr></table>\n");
+	html("</header>\n");
 }
 
 void cgit_print_pageheader(void)
@@ -1084,39 +1086,63 @@ void cgit_print_pageheader(void)
 	if (!ctx.env.authenticated || !ctx.cfg.noheader)
 		print_header();
 
-	html("<table class='tabs'><tr><td>\n");
+	if (ctx.env.authenticated)
+		html("<nav class='tabs'>\n");
 	if (ctx.env.authenticated && ctx.repo) {
-		if (ctx.repo->readme.nr)
-			reporevlink("about", "about", NULL,
+		const char *vp = ctx.qry.vpath;
+		html("<ul>\n");
+		if (ctx.repo->readme.nr) {
+			html("<li>");
+			reporevlink("about", "about", "About this repository",
 				    hc("about"), ctx.qry.head, NULL,
 				    NULL);
-		cgit_summary_link("summary", NULL, hc("summary"),
+			html("</li>\n");
+		}
+		html("<li>");
+		cgit_summary_link("summary", "Repository summary", hc("summary"),
 				  ctx.qry.head);
-		cgit_refs_link("refs", NULL, hc("refs"), ctx.qry.head,
+		html("</li>\n<li>");
+		cgit_refs_link("refs", "Branches and tags", hc("refs"), ctx.qry.head,
 			       ctx.qry.oid, NULL);
-		cgit_log_link("log", NULL, hc("log"), ctx.qry.head,
+		html("</li>\n<li>");
+		cgit_log_link("log",
+			      vp && *vp ? fmt("Commit history of %s", vp) : "Commit history",
+			      hc("log"), ctx.qry.head,
 			      NULL, ctx.qry.vpath, 0, NULL, NULL,
 			      ctx.qry.showmsg, ctx.qry.follow);
+		html("</li>\n<li>");
 		if (ctx.qry.page && !strcmp(ctx.qry.page, "blame"))
-			cgit_blame_link("blame", NULL, hc("blame"), ctx.qry.head,
+			cgit_blame_link("blame",
+					vp && *vp ? fmt("Line-by-line blame of %s", vp) : "Blame",
+					hc("blame"), ctx.qry.head,
 				        ctx.qry.oid, ctx.qry.vpath);
 		else
-			cgit_tree_link("tree", NULL, hc("tree"), ctx.qry.head,
+			cgit_tree_link("tree",
+				       vp && *vp ? fmt("Browse the tree at %s", vp) : "Browse the file tree",
+				       hc("tree"), ctx.qry.head,
 				       ctx.qry.oid, ctx.qry.vpath);
-		cgit_commit_link("commit", NULL, hc("commit"),
+		html("</li>\n<li>");
+		cgit_commit_link("commit", "The current commit", hc("commit"),
 				 ctx.qry.head, ctx.qry.oid, ctx.qry.vpath);
-		cgit_diff_link("diff", NULL, hc("diff"), ctx.qry.head,
+		html("</li>\n<li>");
+		cgit_diff_link("diff",
+			       vp && *vp ? fmt("Changes to %s", vp) : "Changes in the current commit",
+			       hc("diff"), ctx.qry.head,
 			       ctx.qry.oid, ctx.qry.oid2, ctx.qry.vpath);
-		if (ctx.repo->max_stats)
-			cgit_stats_link("stats", NULL, hc("stats"),
+		html("</li>\n");
+		if (ctx.repo->max_stats) {
+			html("<li>");
+			cgit_stats_link("stats", "Commit activity", hc("stats"),
 					ctx.qry.head, ctx.qry.vpath);
+			html("</li>\n");
+		}
 		if (ctx.repo->homepage) {
-			html("<a href='");
+			html("<li><a class='external' href='");
 			html_attr(ctx.repo->homepage);
-			html("'>homepage</a>");
+			html("'>homepage</a></li>\n");
 		}
-		html("</td><td class='form'>");
-		html("<form class='right' method='get' action='");
+		html("</ul>\n");
+		html("<form class='search' method='get' action='");
 		if (ctx.cfg.virtual_root) {
 			char *fileurl = cgit_fileurl(ctx.qry.repo, "log",
 						   ctx.qry.vpath, NULL);
@@ -1125,37 +1151,43 @@ void cgit_print_pageheader(void)
 		}
 		html("'>\n");
 		cgit_add_hidden_formfields(1, 0, "log");
-		html("<select name='qt'>\n");
+		html("<select name='qt' aria-label='Search type'>\n");
 		html_option("grep", "log msg", ctx.qry.grep);
 		html_option("author", "author", ctx.qry.grep);
 		html_option("committer", "committer", ctx.qry.grep);
 		html_option("range", "range", ctx.qry.grep);
 		html("</select>\n");
-		html("<input class='txt' type='search' size='10' name='q' value='");
+		html("<input class='txt' type='search' name='q' aria-label='Search' value='");
 		html_attr(ctx.qry.search);
 		html("'/>\n");
 		html("<input type='submit' value='search'/>\n");
 		html("</form>\n");
 	} else if (ctx.env.authenticated) {
 		char *currenturl = cgit_currenturl();
-		site_link(NULL, "index", NULL, hc("repolist"), NULL, NULL, 0, 1);
-		if (ctx.cfg.root_readme)
-			site_link("about", "about", NULL, hc("about"),
+		html("<ul>\n<li>");
+		site_link(NULL, "index", "Repository index", hc("repolist"), NULL, NULL, 0, 1);
+		html("</li>\n");
+		if (ctx.cfg.root_readme) {
+			html("<li>");
+			site_link("about", "about", "About this site", hc("about"),
 				  NULL, NULL, 0, 1);
-		html("</td><td class='form'>");
-		html("<form method='get' action='");
+			html("</li>\n");
+		}
+		html("</ul>\n");
+		html("<form class='search' method='get' action='");
 		html_attr(currenturl);
 		html("'>\n");
-		html("<input type='search' name='q' size='10' value='");
+		html("<input class='txt' type='search' name='q' aria-label='Search' value='");
 		html_attr(ctx.qry.search);
 		html("'/>\n");
 		html("<input type='submit' value='search'/>\n");
-		html("</form>");
+		html("</form>\n");
 		free(currenturl);
 	}
-	html("</td></tr></table>\n");
+	if (ctx.env.authenticated)
+		html("</nav>\n");
 	if (ctx.env.authenticated && ctx.repo && ctx.qry.vpath) {
-		html("<div class='path'>");
+		html("<nav class='path' aria-label='breadcrumb'>");
 		html("path: ");
 		cgit_print_path_crumbs(ctx.qry.vpath);
 		if (ctx.repo->enable_follow_links && !strcmp(ctx.qry.page, "log")) {
@@ -1166,9 +1198,9 @@ void cgit_print_pageheader(void)
 			ctx.qry.follow = !ctx.qry.follow;
 			html(")");
 		}
-		html("</div>");
+		html("</nav>");
 	}
-	html("<div class='content'>");
+	html("<main class='content'>\n");
 }
 
 void cgit_print_filemode(unsigned short mode)
diff --git a/tests/t0010-validate-html.sh b/tests/t0010-validate-html.sh
index ca08d69..91433f8 100755
--- a/tests/t0010-validate-html.sh
+++ b/tests/t0010-validate-html.sh
@@ -29,6 +29,17 @@ test -n "$tidy" || {
 	exit
 }
 
+# Releases of tidy that predate HTML5 reject the semantic elements (header,
+# nav, main, footer) that cgit emits, reporting them as errors. Skip the
+# validation unless tidy is new enough to understand them.
+printf '<!DOCTYPE html>\n<html lang="en"><head><title>t</title></head><body><header>x</header></body></html>\n' \
+	| "$tidy" -q -e >/dev/null 2>&1
+test $? -ge 2 && {
+	skip_all='Skipping html validation tests: tidy is too old for HTML5'
+	test_done
+	exit
+}
+
 test_expect_success 'index page' 'test_url ""'
 test_expect_success 'foo' 'test_url "foo"'
 test_expect_success 'foo/log' 'test_url "foo/log"'
diff --git a/tests/t0102-summary.sh b/tests/t0102-summary.sh
index b8864cb..f1c1e78 100755
--- a/tests/t0102-summary.sh
+++ b/tests/t0102-summary.sh
@@ -7,7 +7,7 @@ test_expect_success 'generate foo summary' 'cgit_url "foo" >tmp'
 test_expect_success 'find commit 1' 'grep "commit 1" tmp'
 test_expect_success 'find commit 5' 'grep "commit 5" tmp'
 test_expect_success 'find branch master' 'grep "master" tmp'
-test_expect_success 'no tags' '! grep "tags" tmp'
+test_expect_success 'no tags' '! grep "Tag</th>" tmp'
 test_expect_success 'clone-url expanded correctly' '
 	grep "git://example.org/foo.git" tmp
 '
@@ -17,7 +17,7 @@ test_expect_success 'no commit 45' '! grep "commit 45" tmp'
 test_expect_success 'find commit 46' 'grep "commit 46" tmp'
 test_expect_success 'find commit 50' 'grep "commit 50" tmp'
 test_expect_success 'find branch master' 'grep "master" tmp'
-test_expect_success 'no tags' '! grep "tags" tmp'
+test_expect_success 'no tags' '! grep "Tag</th>" tmp'
 test_expect_success 'clone-url expanded correctly' '
 	grep "git://example.org/bar.git" tmp
 '