HTML report improvements

[ketan]

Hi there —

A couple of handful of things that stand out as the gauge report downloads from our CI server.

• Pie charts — they are really bad once you start adding more stuff to it, and humans are generally bad at understanding relative sizing of pies. Consider using a simple bar graph. More here and here

• There's a flash of html "template" that's visible as your report and it's data renders data.

  

• Also, it appears that the html report loads things from an external CDN, is not compressed or concatenated which causes irritably slow page loads on slow networks, by making too many http requests.

  <link rel="stylesheet" type="text/css"
        href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,700,700italic">
  <link rel="stylesheet" type="text/css"
        href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="css/normalize.css"/>
  <link rel="stylesheet" type="text/css" href="css/angular-hovercard.css"/>
  <link rel="stylesheet" type="text/css" href="css/style.css"/>
  

• Stack traces in a serif fonts make it hard to read, code SHOULD always preferably in a monospace font

• Screenshots cannot be dismissed on hitting the ESC key, which feels more natural than pressing x.

• The small press x to close at the bottom that's may not exactly be visible in all cases.

• Report names in sidebar should use css ellipsis to prevent being garbled (instead of trimmed to a fixed length). The advantage of using css ellipsis is that you can still copy the entire report name even though it does not show up.

  

[mahendrakariya]

Thanks a lot for these suggestions @ketan! The second and the last point you mentioned have already been addressed and the changes are available in the nightly. We will work on the other issues soon.

[kaustavdm]

• Pie Charts - Hidden in mobile view. Whether it stays or not needs further design inputs.
• Template flash
• Stop using external CDN
• Show stacktraces in monospace
• Dismiss screenshot on pressing ESC
• Truncate/wrap report names in sidebar

[ketan]

I still see some of these issues not resolved as yet —

• the flash of template (seems to be marked as done in the comment above)
• multiple requests to pull JS and css instead of concatenating them into a single asset. This makes the flash of template even worse, because of the page load time (it'd be awesome if all the css and JS was minimized and inlined into the HTML page)

[mahendrakariya]

@ketan We have re-written HTML reports as per #86 and will be releasing it soon. Most of the issues have been resolved in it. We will be releasing it soon.

In the meantime, you can try the nightly version and give us your feedback.

[sriv]

Closing as stale. Please comment/reopen if this is still valid.

sidenote: html-report can now have custom themes.