Add rendering metrics visualization tool to results.html

[amyqiu]

To better analyze the durations of each step in the rendering pipeline, a visualization tool has been created here. The documentation for this tool can be found here. By embedding this tool into the results.html page and adding a button that toggles it on/off, users would be able to more easily identify which rendering metric is contributing to delays. Note: the button would only be visible for results containing rendering benchmarks.

The next steps involved in improving the tool are:

• Replace placeholder rendering metrics with correct ones (once implemented)
• Show comparisons of results using grouped columns
• Improve the UI of the tool within results.html

@benshayden @sadrulhc

[benshayden]

Thanks! Can you expand on how the UI can be improved?

[amyqiu]

There are a few adjustments that would make the tool fit better into results.html, like the styling of the buttons or moving the tool to somewhere else within the page (which is difficult right now because Plotly doesn't support Polymer's shadow DOM).

[benshayden]

Results.html already has a d3-based Polymerized stacked column chart. Want to look at it and let me know if it's missing any features? Feel free to schedule a VC if you have any questions!

[amyqiu]

Okay, I'll check it out!

[amyqiu]

I looked into the stacked column chart and noticed there isn't a built-in way to do grouped columns. Something like this:

Currently, I can simulate this by adding empty columns in between the groups (in the chart data), but is there a better way to do this?

Similarly, there's no default way to make a waterfall chart:

To create this, I could mark columns as "blank" and make them white when drawing, but again I'm not sure that's the best way?