Styling the html diff reports

[vaibhav shukla]

Hi All

I am thoroughly using DaisyDiff and its a charm. However, the only thing that bothers me is the beautification of the html diff reports which gets generated.

When I try to compare two html sources, i do get the diff report, but its kind of raw without any styling from the original webpage.

I worked around and grabbed all the CSS used in the original page and fed it to the diff report which somewhat brings up the styling, but again its distorted and inconsistent i.e orientations of elements(span,images,divs etc) changes every time I run the Main Class. Also, apart from CSS, there are some dynamic styling on the original through JS, then images are also used and all such stuffs are difficult to incorporate inside diff report.

I am trying to figure out a way, so that the diff report could look like the ORIGINAL page (almost 80-90% at least) and give a clear feel of the differences as they would be, with red and green highlighting. It would look like original page with red/green highlights.

How could we achieve this thing? I can save the original page from the browser which gives me all the page contents(JS, CSS, images and icons), but I am stuck on how to integrate them to my diff report programmatically? We have the method to integrate css but what about JS? Images etc?

Please guide and give some ways to achieve this. 

Thank you!

[Kostis Kapelonis]

I thought that DaisyDiff html mode (not the XML one) already does what
you want.
The result of running DaisyDiff.jar, is the original page with some
extra stuff of the differences.

For example if a text is italic in the original page, it is also in
the output. Do you mean something else?

Daisydiff is using text as html input. It is not a general ΧΗΤML
differ. For example it does not diff non visual changes (e.g. col
attributes on a table or line breaks)

If you have a complex page with text and other stuff (e.g. heavy
footer and header) it would be best to pass to daisydiff just the text
(i.e. a subset of the original page) and then stitch the result back
to the original page. Just a suggestion.

Kostis

> --
> You received this message because you are subscribed to the Google Groups
> "DaisyDiff" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to daisydiff+...@googlegroups.com.
> To post to this group, send email to dais...@googlegroups.com.
> Visit this group at http://groups.google.com/group/daisydiff.
> For more options, visit https://groups.google.com/groups/opt_out.

[vaibhav shukla]

Hi Kostis

Well, the current result of running DaisyDiff.jar is the "content with differences". I am more interested in getting the complete styling as well along with the difference so that it could give the feeling of viewing the real page and not just diff.

Here is the example of what I am trying the achieve. I used the hotel page of a popular website booking.com and tried to check out the differences. I copied the source code into a html file and compared it with a previously stored source file. Below is the image which will clearly differentiate the difference between approaches used.

Now, from left, the first one is the original view of the page, the second is the traditional DaisyDiff.jar output. The third one is the result of this approach : I copied all the CSS files from the source, and using "addCSS method" of daisydiff, I incorporated that in the diff report which resulted in this.

But since there are too many stylings involve in the page(from JS dynamically, inline css or few images etc), the elements are distorted. 

What I am trying to find out is any way so that I could incorporate everything inside the diff report to make it look like original (may be 80-90% if not 100%).

What would you suggest then ?

[Kostis Kapelonis]

I suggest you create a completely different utility that wraps daisydiff inside it.

Meaning that daisydiff does only one thing (as it should). You have extra code that deals with CSS and other "presentation" stuff.

In fact I think that there are several open issues with people requesting DaisyDiff to be modified to output ONLY the diffs. I suspect that they want

that in order to incorporate it into their own external tool.

So my suggestion for you is to incorporate DaisyDif in your own code, rather than changing it directly.

(This is also what I have done in the past)

Kostis