[SPARK-4266] [Web-UI] Reduce stage page load time.

The commit changes the java script used to show/hide additional
metrics in order to reduce page load time. SPARK-4016 significantly
increased page load time for the stage page when stages had a lot
(thousands or tens of thousands) of tasks, due to the additional
Javascript to hide some metrics by default and stripe the tables.
This commit reduces page load time in two ways:

(1) Now, all of the metrics that are hidden by default are
hidden by setting "display: none;" using CSS for the page,
rather than hiding them using javascript after the page loads.
Without this change, for stages with thousands of tasks, there
was a few second delay after page load, where first the additional
metrics were shown, and then after a delay were hidden once the
relevant JS finished running.

(2) CSS is used to stripe all of the tables except for the summary
table. The summary table needs javascript to do the striping because
some rows are hidden, but the javascript striping is slower, which
again resulted in a delay when it was used for the task table (where
for a few seconds after page load, all of the rows in the task table
would be white, while the browser finished running the JS to stripe
the table).

cc @pwendell 

This change is intended to be backported to 1.2 to avoid a regression in
UI performance when users run large jobs.
It seems like it is around 3X faster to write this more imperatively in some tests I ran:

```
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      $(document).ready(function() {
        for (i = 0; i < 100000; i++) {
          $("#largeTable").append("<tr><td>This is a row</td></tr>");
        }
 
        var t0 = new Date().getTime(); 
        trs = $($("#largeTable").children()[0]).children();
        for (i = 0; i < trs.size(); i++) {
          if (i % 2 == 1) {
            $(trs[i]).css("background-color", "#f9f9f9");
          }
        }
        console.log("Version A: ")
        console.log(new Date().getTime() - t0)

        var t1 = new Date().getTime();
        $("#largeTable").find("tr:not(:hidden)").each(function (index) {
          if (index % 2 == 1) {
            $(trs[i]).css("background-color", "#f9f9f9");
          }
        })
        console.log("Version B: ")
        console.log(new Date().getTime() - t1)
      });
    </script>
    <table id="largeTable">
    </table>
  <body>
</html>
```
Output:
```
Version A:  page.html:19
411 page.html:20
Version B:  page.html:28
1532 page.html:29
```