In side-by-side diff, add support for marking individual characters.

Refuses to do so if the left hand side of the diff has different amount of
differing lines to the right hand side to avoid confusion.

Note that I use the naive dynamic programming approach for calculating the
longest common subsequence. We could probably be more efficient by using a
better algorithm. The LCS calculating function is O(n*m) and uses up n*m
amount of memory too (so if we we compare two strings of length 100, I use
an array of 10000 for calculating the LCS). Might want to not calculate LCS
if the length of the line is too large.

Signed-off-by: Ragnar Ouchterlony <ragnar@lysator.liu.se>

1 files changed, 10 insertions, 0 deletions

diff --git a/cgit.css b/cgit.css
index 3f37165..9e6d2a4 100644
--- a/cgit.css
+++ b/cgit.css
@@ -438,255 +438,265 @@ a.button {
 	font-size: 80%;
 	padding: 0em 0.5em;
 }
 
 a.primary {
 	font-size: 100%;
 }
 
 a.secondary {
 	font-size: 90%;
 }
 
 td.toplevel-repo {
 
 }
 
 table.list td.sublevel-repo {
 	padding-left: 1.5em;
 }
 
 div.pager {
 	text-align: center;
 	margin: 1em 0em 0em 0em;
 }
 
 div.pager a {
 	color: #777;
 	margin: 0em 0.5em;
 }
 
 span.age-mins {
 	font-weight: bold;
 	color: #080;
 }
 
 span.age-hours {
 	color: #080;
 }
 
 span.age-days {
 	color: #040;
 }
 
 span.age-weeks {
 	color: #444;
 }
 
 span.age-months {
 	color: #888;
 }
 
 span.age-years {
 	color: #bbb;
 }
 div.footer {
 	margin-top: 0.5em;
 	text-align: center;
 	font-size: 80%;
 	color: #ccc;
 }
 a.branch-deco {
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
 	background-color: #88ff88;
 	border: solid 1px #007700;
 }
 a.tag-deco {
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
 	background-color: #ffff88;
 	border: solid 1px #777700;
 }
 a.remote-deco {
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
 	background-color: #ccccff;
 	border: solid 1px #000077;
 }
 a.deco {
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
 	background-color: #ff8888;
 	border: solid 1px #770000;
 }
 
 div.commit-subject a {
 	margin-left: 1em;
 	font-size: 75%;
 }
 
 table.stats {
 	border: solid 1px black;
 	border-collapse: collapse;
 }
 
 table.stats th {
 	text-align: left;
 	padding: 1px 0.5em;
 	background-color: #eee;
 	border: solid 1px black;
 }
 
 table.stats td {
 	text-align: right;
 	padding: 1px 0.5em;
 	border: solid 1px black;
 }
 
 table.stats td.total {
 	font-weight: bold;
 	text-align: left;
 }
 
 table.stats td.sum {
 	color: #c00;
 	font-weight: bold;
 /*	background-color: #eee; */
 }
 
 table.stats td.left {
 	text-align: left;
 }
 
 table.vgraph {
 	border-collapse: separate;
 	border: solid 1px black;
 	height: 200px;
 }
 
 table.vgraph th {
 	background-color: #eee;
 	font-weight: bold;
 	border: solid 1px white;
 	padding: 1px 0.5em;
 }
 
 table.vgraph td {
 	vertical-align: bottom;
 	padding: 0px 10px;
 }
 
 table.vgraph div.bar {
 	background-color: #eee;
 }
 
 table.hgraph {
 	border: solid 1px black;
 	width: 800px;
 }
 
 table.hgraph th {
 	background-color: #eee;
 	font-weight: bold;
 	border: solid 1px black;
 	padding: 1px 0.5em;
 }
 
 table.hgraph td {
 	vertical-align: center;
 	padding: 2px 2px;
 }
 
 table.hgraph div.bar {
 	background-color: #eee;
 	height: 1em;
 }
 
 table.ssdiff {
 	width: 100%;
 }
 
 table.ssdiff td {
 	font-size: 75%;
 	font-family: monospace;
 	white-space: pre;
 	padding: 1px 4px 1px 4px;
 	border-left: solid 1px #aaa;
 	border-right: solid 1px #aaa;
 }
 
 table.ssdiff td.add {
 	color: black;
 	background: #cfc;
 	min-width: 50%;
 }
 
 table.ssdiff td.add_dark {
 	color: black;
 	background: #aca;
 	min-width: 50%;
 }
 
+table.ssdiff span.add {
+	background: #cfc;
+	font-weight: bold;
+}
+
 table.ssdiff td.del {
 	color: black;
 	background: #fcc;
 	min-width: 50%;
 }
 
 table.ssdiff td.del_dark {
 	color: black;
 	background: #caa;
 	min-width: 50%;
 }
 
+table.ssdiff span.del {
+	background: #fcc;
+	font-weight: bold;
+}
+
 table.ssdiff td.changed {
 	color: black;
 	background: #ffc;
 	min-width: 50%;
 }
 
 table.ssdiff td.changed_dark {
 	color: black;
 	background: #cca;
 	min-width: 50%;
 }
 
 table.ssdiff td.lineno {
 	color: black;
 	background: #eee;
 	text-align: right;
 	width: 3em;
 	min-width: 3em;
 }
 
 table.ssdiff td.hunk {
 	color: #black;
 	background: #ccf;
 	border-top: solid 1px #aaa;
 	border-bottom: solid 1px #aaa;
 }
 
 table.ssdiff td.head {
 	border-top: solid 1px #aaa;
 	border-bottom: solid 1px #aaa;
 }
 
 table.ssdiff td.head div.head {
 	font-weight: bold;
 	color: black;
 }
 
 table.ssdiff td.foot {
 	border-top: solid 1px #aaa;
         border-left: none;
         border-right: none;
         border-bottom: none;
 }
 
 table.ssdiff td.space {
 	border: none;
 }
 
 table.ssdiff td.space div {
 	min-height: 3em;
 }
\ No newline at end of file