Improvements for HTML report template

[andresriancho]

Contributor wanted

This issue is easy and looking for a contributor, just add a comment saying you'll do it's yours!

Not sure where to start from? Take a look at our First steps as a contributor and Contributing 101 wiki pages.

Other interesting tasks which can be completed by new w3af contributors can be found here.

Introduction

The report template I've drafted is properly rendered but, as usual, ugly. These are some of the things I would like others to improve.

Requirements

• The generated HTML needs to be 100% self-contained, it must not reference any images, css, js or fonts.

  Header

• [ ] There should be some padding on the top, before the first div with data
• [ ] More padding after the main title
• [ ] Potentially use different font for titles
• [ ] Solve the issue we see in the second screenshot where a long list of enabled plugins uses a lot of vertical space and leaves the left "blank". Maybe add one of those "More ..." and "Less ..." buttons that show/hide data?

  Vulnerability

• [ ] The red flag icon is not properly located, it should be centered (vertically/horizontally) and have padding
• [ ] Maybe change the icon with something better/nicer
• [ ] Maybe make the icon smaller
• [ ] Use highlight.js to highlight the HTTP request/response
• [ ] When there are long HTTP responses we're showing them all, using a lot of space. It might be a good idea to have a "vertical limit" for the HTTP request/response and add the "More ..." and "Less ..." links (as explained above)

  Overall

• [ ] Change the background so that the divs with data (which will still have white background) grab the reader's attention
• [ ] Apply cosmetic changes to make the report look beautiful

[Mruocco]

I have done a lot of this out of personal necessity. I will clean it up and issue a PR.

[andresriancho]

@Mruocco sounds good! Please do!