Use SASS for CSS styling + UI improvements

[heyman]

Use SASS for CSS styling

This PR introduces CSS styling though SASS. This greatly improves the readability of the CSS styling rules, as well as the productivity when making changes to the Web UI.

A drawback is that it adds a dependency on having SASS installed for anyone who wants to edit the CSS styling. That's a price well worth paying in my opinion. (Note that it does not add any dependency for people who uses Locust, or even make changes to Locust itself without changing the CSS styling).

Some things to note:

• CSS files generated by SASS should be checked in to version control.
• Build CSS files using make sass_build or make sass_watch to have SASS continuously watch for changes and re-generate the CSS files.
• Info on how to build SASS files has been added to a new "Developing Locust itself" documentation page. On the same page I've added info on how to build the documentation locally, and ho to run the test suite.
• This PR also contains a bunch of improvements to the HTML/DOM and CSS, that made sense to do while converting the CSS to a SASS "tree" structure.
• The failures table is now sortable. Previously it just appeared to be sortable, but it actually wasn't.

Improve design of HTML reports

This PR also improves the design of the HTML report by styling the tables in the same way as the tables in the normal Web UI. It also makes the whole background dark green (removing the white on the sides), and decreases the text contrast to be slightly friendlier to the eye. The "Download the Report" link is no longer shown on reports that have already been downloaded, or on reports generate through the --html flag.

(These changes uses the SASS changes, so it didn't make sense to make a separate PR.)

Now:

Before:

[codecov]

Codecov Report

Merging #1644 (a0ee7d8) into master (9927dfc) will increase coverage by 0.08%.
The diff coverage is 93.33%.

@@            Coverage Diff             @@
##           master    #1644      +/-   ##
==========================================
+ Coverage   80.53%   80.61%   +0.08%     
==========================================
  Files          30       30              
  Lines        2676     2683       +7     
  Branches      411      412       +1     
==========================================
+ Hits         2155     2163       +8     
+ Misses        427      425       -2     
- Partials       94       95       +1     

Impacted Files	Coverage Δ
locust/main.py	20.25% <0.00%> (ø)
locust/html.py	98.03% <100.00%> (+0.31%)	⬆️
locust/web.py	90.86% <100.00%> (ø)
locust/stats.py	88.62% <0.00%> (-0.20%)	⬇️
locust/runners.py	84.97% <0.00%> (+0.38%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9927dfc...a0ee7d8. Read the comment docs.

[cyberw]

Looks nice! I still havent spent enough time in the UI code to say much more than that :)

On a side note I highly recommend running black "on save" in your editor (not only will it ensure that you never need to make that extra commit, it will also save you time as you dont have to format stuff manually + expose some accidental/bad indentations)

[heyman]

On a side note I highly recommend running black "on save" in your editor (not only will it ensure that you never need to make that extra commit, it will also save you time as you dont have to format stuff manually + expose some accidental/bad indentations)

I did turn that on, but I had to turn in back off because it didn't respect the black settings in pyproject.toml. I suspect that the way it's implemented by the IDE I use (WingPro) is to invoke black using the -c flag and pass in the code, instead of passing it the file path.

Also, a fairly common pattern for me while debugging is to jump into some function/class definition that is located in a site-packages-lib in the project virtualenv, and make small temporary changes (e.g. add debug prints, or test out some change). I wouldn't want to automatically reformat those non-project files and as far as I can tell it will be turned on for all files that I edit.

[cyberw]

On a side note I highly recommend running black "on save" in your editor (not only will it ensure that you never need to make that extra commit, it will also save you time as you dont have to format stuff manually + expose some accidental/bad indentations)

I did turn that on, but I had to turn in back off because it didn't respect the black settings in pyproject.toml. I suspect that the way it's implemented by the IDE I use (WingPro) is to invoke black using the -c flag and pass in the code, instead of passing it the file path.

Ah, yea, that is too bad... Sounds a bit weird though? Is WingPro really incompatible with every black-formatted project that has a pyproject.toml?

Also, a fairly common pattern for me while debugging is to jump into some function/class definition that is located in a site-packages-lib in the project virtualenv, and make small temporary changes (e.g. add debug prints, or test out some change). I wouldn't want to automatically reformat those non-project files and as far as I can tell it will be turned on for all files that I edit.

True. Assuming you can get pyproject.toml working, we could specify to only include the locust subdir (and maybe setup.py) - I think that should make it better in that use case.

[heyman]

Is WingPro really incompatible with every black-formatted project that has a pyproject.toml

It seems so :/.

Assuming you can get pyproject.toml working, we could specify to only include the locust subdir (and maybe setup.py) - I think that should make it better in that use case.

Ah, yes, that sounds like a good idea!