Re: [fossil-users] Diff highlighting
On Thu, 20 Jan 2011 20:29:40 +0100, Dmitry Chestnykh wrote:
Hello,
I've made a tiny simple diff highlighting for Fossil (well,
technically, for any HTML page) in JavaScript, and thought I'd share
it with you.
Just put the following somewhere into Footer (not header!) above
/body:
script
/* Simple diff highlighting */
var DiffHighlighter = {
isDiff : function(s){
return (s.match(/^@@.*@@/m) s.match(/^[+-]/m));
},
highlightElement : function(el){
var s = el.innerHTML;
if (!this.isDiff(s)){
return;
}
el.className += 'diff';
s = s.replace(, lt;);
s = s.replace(/^\+.*$/mg, 'span class=diff-mark
added$/span');
s = s.replace(/^\-.*$/mg, 'span class=diff-mark
removed$/span');
s = s.replace(/^@@.*$/mg, 'span class=diff-mark
position$/span');
s = pre + s + /pre; // workaround for IE
el.innerHTML = s;
},
highlightElementsWithTagName : function(tagName){
var els = document.getElementsByTagName(tagName);
for (var i=0; i els.length; i++){
this.highlightElement(els[i]);
}
}
};
DiffHighlighter.highlightElementsWithTagName('pre');
/script
And add this (or something to your taste) to your CSS:
.diff-mark {
display: inline;
color: #000;
}
.diff-mark.position {
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:block;
width: 100%;
font-style: italic;
padding: 0.5em 0;
margin: 0.5em 0;
border-top: 1px dotted #A2B5CD;
border-bottom: 1px dotted #A2B5CD;
color: #A2B5CD;
}
.diff-mark.added {
background-color: #CEFBC3;
}
.diff-mark.removed {
background-color: #F5C2C1;
}
That's it: the script will automatically detect diffs and color them.
You can see it in action here:
http://codingrobots.org/p/fossil/ci/7ad9a4640a
--
Dmitry Chestnykh
___
fossil-users mailing list
fossil-users@lists.fossil-scm.org
http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
You could define every thing in the head and do
body
th1
if { fdiff eq $current_page || otherdiffed page eq $current_page
} {
html
onload='DiffHighlighter.highlightElementsWithTagName(\'pre\')'
}
/th1
This would have the benefit of running highlighter only on diff pages
and after the page has loaded
--
Rene
___
fossil-users mailing list
fossil-users@lists.fossil-scm.org
http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
Re: [fossil-users] Diff highlighting
On Jan 21, 2011, at 1:30 PM, Rene wrote:
You could define every thing in the head and do
body
th1
if { fdiff eq $current_page || otherdiffed page eq $current_page
} {
html
onload='DiffHighlighter.highlightElementsWithTagName(\'pre\')'
}
/th1
This would have the benefit of running highlighter only on diff pages
and after the page has loaded
Awesome. The only downside is that onload will wait for images to load
(http://www.javascriptkit.com/dhtmltutors/domready.shtml)
but it doesn't matter that much.
Does anyone has the list of all pages that have diffs?
--
Dmitry Chestnykh
___
fossil-users mailing list
fossil-users@lists.fossil-scm.org
http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
Re: [fossil-users] Diff highlighting
On Fri, 21 Jan 2011 13:44:47 +0100, Dmitry Chestnykh wrote:
On Jan 21, 2011, at 1:30 PM, Rene wrote:
You could define every thing in the head and do
body
th1
if { fdiff eq $current_page || otherdiffed page eq
$current_page
} {
html
onload='DiffHighlighter.highlightElementsWithTagName(\'pre\')'
}
/th1
This would have the benefit of running highlighter only on diff
pages
and after the page has loaded
Awesome. The only downside is that onload will wait for images to
load
(http://www.javascriptkit.com/dhtmltutors/domready.shtml)
but it doesn't matter that much.
Does anyone has the list of all pages that have diffs?
--
Dmitry Chestnykh
___
fossil-users mailing list
fossil-users@lists.fossil-scm.org
http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
I think that we better could do
script
function init()
{
th1if { fdiff eq $current_page || otherdiffed page eq
$current_page)
puts DiffHighlighter.highlightElementsWithTagName('pre')/th1
}
/script
body onload='init()'
This has the benefit that if someone else want to do something on load
he could
add it in the init function.
I did a egrep WEB.*diffon the files in the src directory and found
info.c:** WEBPAGE: vdiff
info.c:** WEBPAGE: fdiff
wiki.c:** WEBPAGE: wdiff
--
Rene
___
fossil-users mailing list
fossil-users@lists.fossil-scm.org
http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
Re: [fossil-users] Diff highlighting
On Thu, Jan 20, 2011 at 8:29 PM, Dmitry Chestnykh dmi...@codingrobots.comwrote: I've made a tiny simple diff highlighting for Fossil (well, technically, for any HTML page) in JavaScript, and thought I'd share it with you. Thank you for sharing! i thought i'd report that this works beautifully on Firefox but Chrome, though it does see the css (the DOM inspector shows the properties your code applies), it isn't colorizing as it should. This is almost certainly not a bug in your script, but an incompatibility in Chrome. Really cool - i'll be adding this to all of my repos :). -- - stephan beal http://wanderinghorse.net/home/stephan/ ___ fossil-users mailing list fossil-users@lists.fossil-scm.org http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
Re: [fossil-users] Diff highlighting
On Thu, Jan 20, 2011 at 8:42 PM, Stephan Beal sgb...@googlemail.com wrote: Thank you for sharing! i thought i'd report that this works beautifully on Firefox but Chrome, though it does see the css (the DOM inspector shows the properties your code applies), it isn't colorizing as it should. This is almost certainly not a bug in your script, but an incompatibility in Chrome. LOL! i found that by removing this line: s = pre + s + /pre; // workaround for IE this problem goes away! What happens (on IE) without that workaround? (i don't have/use Windows) -- - stephan beal http://wanderinghorse.net/home/stephan/ ___ fossil-users mailing list fossil-users@lists.fossil-scm.org http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
Re: [fossil-users] Diff highlighting
On Jan 20, 2011, at 8:48 PM, Stephan Beal wrote: Thank you for sharing! i thought i'd report that this works beautifully on Firefox but Chrome, though it does see the css (the DOM inspector shows the properties your code applies), it isn't colorizing as it should. This is almost certainly not a bug in your script, but an incompatibility in Chrome. Interesting. Which version of Chrome and OS is it? I developed and tested it with 8.0.552.237 on Mac, and it works. LOL! i found that by removing this line: s = pre + s + /pre; // workaround for IE this problem goes away! What happens (on IE) without that workaround? (i don't have/use Windows) In IE 7 the whole pre with diff gets collapsed into one line (IE removes line breaks). Not sure about IE8/9. -- Dmitry Chestnykh ___ fossil-users mailing list fossil-users@lists.fossil-scm.org http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
Re: [fossil-users] Diff highlighting
On Thu, Jan 20, 2011 at 9:28 PM, Dmitry Chestnykh dmi...@codingrobots.comwrote: Interesting. Which version of Chrome and OS is it? I developed and tested it with 8.0.552.237 on Mac, and it works. 10.0.634.0 dev on Ubuntu. i later found that i had to tell Chrome about 37 times before it would re-load the css - the page inspector tool showed me that it was pulling it from the cache. Perhaps if i re-add the IE workaround, it will work now. The classes were being applied, but i had a cached css. -- - stephan beal http://wanderinghorse.net/home/stephan/ ___ fossil-users mailing list fossil-users@lists.fossil-scm.org http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
Re: [fossil-users] Diff highlighting
On Thu, Jan 20, 2011 at 9:42 PM, Dmitry Chestnykh dmi...@codingrobots.comwrote: I guess this could be because of the conflict with other styles for pre, so here's the improved version of the script and CSS: i think it was just cached css. i've already deployed it on some 20 repos, so i'll keep it the way it is :). -- - stephan beal http://wanderinghorse.net/home/stephan/ ___ fossil-users mailing list fossil-users@lists.fossil-scm.org http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
Re: [fossil-users] Diff highlighting
On Jan 20, 2011, at 9:50 PM, Stephan Beal wrote: I guess this could be because of the conflict with other styles for pre, so here's the improved version of the script and CSS: i think it was just cached css. i've already deployed it on some 20 repos, so i'll keep it the way it is :). Good :-) Though I've updated the version in Cookbook http://fossil-scm.org/index.html/wiki?name=Cookbook#HighlightDiff with newer version to handle cases where pre styles might redefine diff highlighter styles. -- Dmitry Chestnykh ___ fossil-users mailing list fossil-users@lists.fossil-scm.org http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
