Display of release notes differs between Avalonia and WPF

[FRvanderVeen]

I am using NetSparkleUpdater in multiple projects. One of the is a WPF project the other is an Avalonia project. That way I found out there are some differences in the display of the release notes depending on the UI

WPF

Avalonia

I want to propose a few changes to unify the lay-out somewhat more

1. The colored bar with version number and date In ReleaseNotesGrabber (https://github.com/NetSparkleUpdater/NetSparkle/blob/86df223938c2c00e59a72edb2512f2f53e1a8584/src/NetSparkle/ReleaseNotesGrabber.cs#L78-L83) the background of the div is set by using style="background: ...". When this is changed to style="background-color: ..." the colored bar is also working in Avalonia. Also see https://github.com/ArthurHub/HTML-Renderer/issues/138
2. The 'float: right' on the datepart is not working In ReleaseNotesGrabber (https://github.com/NetSparkleUpdater/NetSparkle/blob/86df223938c2c00e59a72edb2512f2f53e1a8584/src/NetSparkle/ReleaseNotesGrabber.cs#L78-L83) I changed the <span style=\"float: right;\">{1}</span>{0} to <div style=\"font-size: 1.2em; line-height: 1.2em;\">{0}</div><div style=\"font-size: 0.8em; line-height: 1em;\">{1}</div>. That way the lay-out of the header will change to look like
3. The lines don't wrap This is caused by the horizontal scrollbar on the Scrollviewer in https://github.com/NetSparkleUpdater/NetSparkle/blob/86df223938c2c00e59a72edb2512f2f53e1a8584/src/NetSparkle.UI.Avalonia/UpdateAvailableWindow.xaml#L45-L49. I would suggest we only need a verticalscrollbar at that point.
4. The background of the control is grey This can be fixed in https://github.com/NetSparkleUpdater/NetSparkle/blob/86df223938c2c00e59a72edb2512f2f53e1a8584/src/NetSparkle.UI.Avalonia/UpdateAvailableWindow.xaml#L50 by setting the background to white

If you want, I have a demo application available showing the changes

[Deadpikle]

Hi @FRvanderVeen,

Thank you very much for the report and being very clear about what needs to change. That saves me a lot of time -- Thank you!

I have implemented your recommendations with some tweaks. Here is what it looks like currently using the macOS sample:

Not sure what's up with the bullet list still, but this vastly improves the look of the release notes on the Avalonia UI. Thank you! This is rolling out in preview now via CI/CD.

[FRvanderVeen]

Hi @Deadpikle,

Thanks for the quick reaction!

I think I know what's up with the bullet list. I'm facing the same:

I've been diving into the HtmlRenderer library, that's used by the Avalonia.HtmlRenderer, and I think I found the culprit:

The yellow highlighted whitespaces between the lines are unexpected. From what I've found out, this is caused by the method in https://github.com/ArthurHub/HTML-Renderer/blob/e0a2d1702aae5a4f267cc60d847c2c64c1a5b0bc/Source/HtmlRenderer/Core/Dom/CssRect.cs#L272-L289. In the cases with the extra whitespace remTop > remBottom is true, so the line is placed lower. In my opinion we don't need to call that method for the HtmlLabel. There is no such thing as pages. In the second screenshot I commented out the this.Top += container.PageSize.Height - remTop + 1;. Then everything looks fine to me.

I think we need to raise an issue on the Avolonia.HtmlRenderer project. The used external HtmlRenderer looks quite dead unfortunately (https://github.com/ArthurHub/HTML-Renderer)

EDIT

I've found out that by adding a position: fixed on the body the new lines in the first screenshot disappear. The BreakPage method is not called when the CssBox containing the word, or one of the parents of that box has a fixed position.

I also investigated the list item thing you mentioned. I found out that the HTML that should be rendered is different for list-items that are 'under' the bullet:

Renders as expected <li>Fixed bug where ExecuteAsync sometimes doesn't send data</li>

Renders 'under' <li><p>Resolved an xAuth support issue in the OAuth1Authenticator (thanks artema)</p></li>

Apparently the Markdown to HTML converter adds a paragraph around the text sometimes.

[Deadpikle]

Again, wonderful research. Thank you.

I have done a bunch of tweaking and modifying. Here is how the release notes currently look in the sample:

This is a significant improvement over the current, non-preview version for Avalonia and actually looks reasonable for the first time. I'll push these changes to a new preview. Once it rolls out, can you take a look at it (Avalonia UI Nuget)?

I still need to test this out in WPF and WinForms and make sure I didn't break anything. I only have my Mac on me, hence only testing the Avalonia side.

[Deadpikle]

Everything checks out on WPF and WinForms; in fact, I went ahead and updated those templates so that everything is as close as possible, barring small rendering differences per platform. This should greatly improve things for release note viewing.

Thank you again for your research and help! I'll leave this issue open until a non-preview version is released.

[Deadpikle]

This is now released in 2.1! 🎉