Here are a few changes to improve rendering for people with low-end machines using text-based browsers (w3m, lynx) or lightweight GUI browsers such as dillo, which has incomplete CSS support. The only incompatible (with existing CSS customisations) change might be the one to use <pre> instead of <div> for commit-msg. I'm not sure how much of a stable interface the CSS styles are expected to be for this project. All my recent changes (including the 32-bit fix) are also available at at my git/cgit repository: https://80x24.org/cgit.git (I also use a custom CSS there which forces monospace and uniform font-size all around to make it easier for people who need to use gigantic fonts). Eric Wong (4): ui-shared: improve pageheader display on text-based browsers ui-{commit,tag}: use <pre> for commit-msg ui-log: improve decoration display for browsers without CSS ui-diff: preserve spaces w/o CSS on context lines cgit.css | 7 ------- html.c | 46 +++++++++++++++++++++++++++++++++++++++++++ html.h | 1 + tests/t0105-commit.sh | 2 +- ui-commit.c | 4 ++-- ui-diff.c | 5 +---- ui-log.c | 5 +++++ ui-shared.c | 15 +++++++++++--- ui-tag.c | 4 ++-- 9 files changed, 70 insertions(+), 19 deletions(-) -- EW
Text-based browsers (and some GUI browsers such as dillo) display the pageheader as: "summaryrefslogtreecommitdiff" This is difficult-to-read. Improve accessibility for users who cannot run memory-hungry browsers by using whitespace instead of relying on CSS. --- cgit.css | 1 - ui-shared.c | 15 ++++++++++++--- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/cgit.css b/cgit.css index d4aadbf..8c313e2 100644 --- a/cgit.css +++ b/cgit.css @@ -75,7 +75,6 @@ div#cgit table.tabs td { } div#cgit table.tabs td a { - padding: 2px 0.75em; color: #777; font-size: 110%; } diff --git a/ui-shared.c b/ui-shared.c index 7a4c726..017fe30 100644 --- a/ui-shared.c +++ b/ui-shared.c @@ -1029,32 +1029,41 @@ void cgit_print_pageheader(void) html("<table class='tabs'><tr><td>\n"); if (ctx.env.authenticated && ctx.repo) { - if (ctx.repo->readme.nr) + if (ctx.repo->readme.nr) { reporevlink("about", "about", NULL, hc("about"), ctx.qry.head, NULL, NULL); + html(" "); + } cgit_summary_link("summary", NULL, hc("summary"), ctx.qry.head); + html(" "); cgit_refs_link("refs", NULL, hc("refs"), ctx.qry.head, ctx.qry.sha1, NULL); + html(" "); cgit_log_link("log", NULL, hc("log"), ctx.qry.head, NULL, ctx.qry.vpath, 0, NULL, NULL, ctx.qry.showmsg, ctx.qry.follow); + html(" "); if (ctx.qry.page && !strcmp(ctx.qry.page, "blame")) cgit_blame_link("blame", NULL, hc("blame"), ctx.qry.head, ctx.qry.sha1, ctx.qry.vpath); else cgit_tree_link("tree", NULL, hc("tree"), ctx.qry.head, ctx.qry.sha1, ctx.qry.vpath); + html(" "); cgit_commit_link("commit", NULL, hc("commit"), ctx.qry.head, ctx.qry.sha1, ctx.qry.vpath); + html(" "); cgit_diff_link("diff", NULL, hc("diff"), ctx.qry.head, ctx.qry.sha1, ctx.qry.sha2, ctx.qry.vpath); - if (ctx.repo->max_stats) + if (ctx.repo->max_stats) { + html(" "); cgit_stats_link("stats", NULL, hc("stats"), ctx.qry.head, ctx.qry.vpath); + } if (ctx.repo->homepage) { - html("<a href='"); + html(" <a href='"); html_attr(ctx.repo->homepage); html("'>homepage</a>"); } -- EW
This preserves formatting readable for users of text-based browsers without CSS support. --- cgit.css | 5 ----- tests/t0105-commit.sh | 2 +- ui-commit.c | 4 ++-- ui-tag.c | 4 ++-- 4 files changed, 5 insertions(+), 10 deletions(-) diff --git a/cgit.css b/cgit.css index 8c313e2..9f70d14 100644 --- a/cgit.css +++ b/cgit.css @@ -436,11 +436,6 @@ div#cgit div.commit-subject { padding: 0em; } -div#cgit div.commit-msg { - white-space: pre; - font-family: monospace; -} - div#cgit div.notes-header { font-weight: bold; padding-top: 1.5em; diff --git a/tests/t0105-commit.sh b/tests/t0105-commit.sh index 9cdf55c..9e34abd 100755 --- a/tests/t0105-commit.sh +++ b/tests/t0105-commit.sh @@ -11,7 +11,7 @@ test_expect_success 'find commit subject' ' grep "<div class=.commit-subject.>commit 5<" tmp ' -test_expect_success 'find commit msg' 'grep "<div class=.commit-msg.></div>" tmp' +test_expect_success 'find commit msg' 'grep "<pre class=.commit-msg.></pre>" tmp' test_expect_success 'find diffstat' 'grep "<table summary=.diffstat. class=.diffstat.>" tmp' test_expect_success 'find diff summary' ' diff --git a/ui-commit.c b/ui-commit.c index 9a47b54..1c04c87 100644 --- a/ui-commit.c +++ b/ui-commit.c @@ -120,11 +120,11 @@ void cgit_print_commit(char *hex, const char *prefix) cgit_close_filter(ctx.repo->commit_filter); show_commit_decorations(commit); html("</div>"); - html("<div class='commit-msg'>"); + html("<pre class='commit-msg'>"); cgit_open_filter(ctx.repo->commit_filter); html_txt(info->msg); cgit_close_filter(ctx.repo->commit_filter); - html("</div>"); + html("</pre>"); if (notes.len != 0) { html("<div class='notes-header'>Notes</div>"); html("<div class='notes'>"); diff --git a/ui-tag.c b/ui-tag.c index f530224..9e54d2c 100644 --- a/ui-tag.c +++ b/ui-tag.c @@ -25,9 +25,9 @@ static void print_tag_content(char *buf) html_txt(buf); html("</div>"); if (p) { - html("<div class='commit-msg'>"); + html("<pre class='commit-msg'>"); html_txt(++p); - html("</div>"); + html("</pre>"); } } -- EW
Text-based browsers without CSS support show all the decorations bunched together without spacing. Rely on a whitespace instead of CSS support. --- cgit.css | 1 - ui-log.c | 5 +++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/cgit.css b/cgit.css index 9f70d14..6fcd984 100644 --- a/cgit.css +++ b/cgit.css @@ -708,7 +708,6 @@ div#cgit div.commit-subject a.tag-deco, div#cgit div.commit-subject a.tag-annotated-deco, div#cgit div.commit-subject a.remote-deco, div#cgit div.commit-subject a.deco { - margin-left: 1em; font-size: 75%; } diff --git a/ui-log.c b/ui-log.c index 3bcb657..10dc286 100644 --- a/ui-log.c +++ b/ui-log.c @@ -67,6 +67,7 @@ void show_commit_decorations(struct commit *commit) while (deco) { struct object_id peeled; int is_annotated = 0; + strlcpy(buf, prettify_refname(deco->name), sizeof(buf)); switch(deco->type) { case DECORATION_NONE: @@ -74,11 +75,13 @@ void show_commit_decorations(struct commit *commit) * don't display anything. */ break; case DECORATION_REF_LOCAL: + html(" "); cgit_log_link(buf, NULL, "branch-deco", buf, NULL, ctx.qry.vpath, 0, NULL, NULL, ctx.qry.showmsg, 0); break; case DECORATION_REF_TAG: + html(" "); if (!peel_ref(deco->name, &peeled)) is_annotated = !oidcmp(&commit->object.oid, &peeled); cgit_tag_link(buf, NULL, is_annotated ? "tag-annotated-deco" : "tag-deco", buf); @@ -86,12 +89,14 @@ void show_commit_decorations(struct commit *commit) case DECORATION_REF_REMOTE: if (!ctx.repo->enable_remote_branches) break; + html(" "); cgit_log_link(buf, NULL, "remote-deco", NULL, oid_to_hex(&commit->object.oid), ctx.qry.vpath, 0, NULL, NULL, ctx.qry.showmsg, 0); break; default: + html(" "); cgit_commit_link(buf, NULL, "deco", ctx.qry.head, oid_to_hex(&commit->object.oid), ctx.qry.vpath); -- EW
We need to use a non-breaking space entity to preserve spacing for browsers without CSS support. --- html.c | 46 ++++++++++++++++++++++++++++++++++++++++++++++ html.h | 1 + ui-diff.c | 5 +---- 3 files changed, 48 insertions(+), 4 deletions(-) diff --git a/html.c b/html.c index 7f81965..138c649 100644 --- a/html.c +++ b/html.c @@ -156,6 +156,52 @@ ssize_t html_ntxt(const char *txt, size_t len) return slen; } +ssize_t html_ntxt_pre(const char *txt, size_t len) +{ + const char *t = txt; + ssize_t slen; + int prev = 0; + + if (len > SSIZE_MAX) + return -1; + + slen = (ssize_t) len; + while (t && *t && slen--) { + int c = *t; + if (c == '<' || c == '>' || c == '&' || c == ' ' || c == '\t') { + html_raw(txt, t - txt); + if (c == '>') + html(">"); + else if (c == '<') + html("<"); + else if (c == '&') + html("&"); + else if (c == ' ') { + if (!prev || prev == ' ' || prev == '\t') { + html(" "); + /* next byte can be unescaped ' ' */ + c = 160; + } else { + html(" "); + } + } else if (c == '\t') { + html("    " + "    "); + /* next byte can be unescaped ' ' */ + c = 160; + } + txt = t + 1; + } + prev = c; + t++; + } + if (t != txt) + html_raw(txt, t - txt); + return slen; +} + + + void html_attrf(const char *fmt, ...) { va_list ap; diff --git a/html.h b/html.h index fa4de77..4479b8e 100644 --- a/html.h +++ b/html.h @@ -20,6 +20,7 @@ extern void html_attrf(const char *format,...); extern void html_txt(const char *txt); extern ssize_t html_ntxt(const char *txt, size_t len); +extern ssize_t html_ntxt_pre(const char *txt, size_t len); extern void html_attr(const char *txt); extern void html_url_path(const char *txt); extern void html_url_arg(const char *txt); diff --git a/ui-diff.c b/ui-diff.c index 70dcc91..ca19f9e 100644 --- a/ui-diff.c +++ b/ui-diff.c @@ -222,7 +222,6 @@ static void cgit_print_diffstat(const struct object_id *old_oid, static void print_line(char *line, int len) { char *class = "ctx"; - char c = line[len-1]; if (line[0] == '+') class = "add"; @@ -232,10 +231,8 @@ static void print_line(char *line, int len) class = "hunk"; htmlf("<div class='%s'>", class); - line[len-1] = '\0'; - html_txt(line); + html_ntxt_pre(line, len - 1); html("</div>"); - line[len-1] = c; } static void header(const struct object_id *oid1, char *path1, int mode1, -- EW
Eric Wong <e at 80x24.org> wrote:
> We need to use a non-breaking space entity to preserve
> spacing for browsers without CSS support.
Btw, an alternative patch which could save bandwidth but
possibly break compatibility with existing CSS would be to wrap
the whole diff area in a <pre>, and use <span class='...'>
instead of <div class='...'>
For browsers on low-end machines running browsers without CSS support, the default tree view displayed "logplain" when it should be "log plain". Stop relying on CSS and add a space in between elements to improve accessibility. --- cgit.css | 1 - ui-repolist.c | 2 ++ ui-tree.c | 12 +++++++++--- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/cgit.css b/cgit.css index 6fcd984..d4f2418 100644 --- a/cgit.css +++ b/cgit.css @@ -575,7 +575,6 @@ div#cgit table.list td.reposection { div#cgit a.button { font-size: 80%; - padding: 0em 0.5em; } div#cgit a.primary { diff --git a/ui-repolist.c b/ui-repolist.c index 41424c0..6187101 100644 --- a/ui-repolist.c +++ b/ui-repolist.c @@ -353,8 +353,10 @@ void cgit_print_repolist(void) if (ctx.cfg.enable_index_links) { html("<td>"); cgit_summary_link("summary", NULL, "button", NULL); + html(" "); cgit_log_link("log", NULL, "button", NULL, NULL, NULL, 0, NULL, NULL, ctx.qry.showmsg, 0); + html(" "); cgit_tree_link("tree", NULL, "button", NULL, NULL, NULL); html("</td>"); } diff --git a/ui-tree.c b/ui-tree.c index df8ad82..436c2b3 100644 --- a/ui-tree.c +++ b/ui-tree.c @@ -245,15 +245,21 @@ static int ls_item(const struct object_id *oid, struct strbuf *base, cgit_log_link("log", NULL, "button", ctx.qry.head, walk_tree_ctx->curr_rev, fullpath.buf, 0, NULL, NULL, ctx.qry.showmsg, 0); - if (ctx.repo->max_stats) + if (ctx.repo->max_stats) { + html(" "); cgit_stats_link("stats", NULL, "button", ctx.qry.head, fullpath.buf); - if (!S_ISGITLINK(mode)) + } + if (!S_ISGITLINK(mode)) { + html(" "); cgit_plain_link("plain", NULL, "button", ctx.qry.head, walk_tree_ctx->curr_rev, fullpath.buf); - if (!S_ISDIR(mode) && ctx.cfg.enable_blame) + } + if (!S_ISDIR(mode) && ctx.cfg.enable_blame) { + html(" "); cgit_blame_link("blame", NULL, "button", ctx.qry.head, walk_tree_ctx->curr_rev, fullpath.buf); + } html("</td></tr>\n"); free(name); strbuf_release(&fullpath); -- EW
Eric Wong <e at 80x24.org> wrote:
> Here are a few changes to improve rendering for people with
> low-end machines using text-based browsers (w3m, lynx) or
> lightweight GUI browsers such as dillo, which has incomplete CSS
> support.
Ping. Any feedback on this series? Thanks.