[LNT] Improve alignment of HTML report.

[marxin]

Summary

Following patch makes reports better aligned in a way that numeric values and percents are aligned right.
Apart from that run report has set proportional column width for tables. That helps to make the whole
content better aligned.

[marxin]

The revision depends on: https://reviews.llvm.org/D51405

[MatzeB]

LGTM

lnt/server/reporting/report.py

130 ↗

(On Diff #164818)

Maybe call this "number" instead?

lnt/trunk/lnt/server/ui/static/lnt_run.css

 
 tr:hover > td > .editable {
     visibility: visible;
     cursor: pointer;
 }
 
 .editable span {
     position: relative;
-}
+}
+
+tr > td.right {
+    text-align: right;
+}

lnt/trunk/lnt/server/ui/templates/reporting/runs.html

 {% import "utils.html" as utils %}
 
 {#
   Macro for rendering the report for either a run-to-run display or a run-to-baseline display.
 #}
 {%
   macro add_report_changes_detail_for_field_and_bucket(
     compare_to, field, show_perf, run_url, field_index, field_display_name, bucket_name, bucket, test_names,
     metric_name, metric_field_suffix, secondary_field_suffix, secondary_info, styles, classes
   )
 %}
 
 {% if bucket and bucket_name != 'Unchanged Tests' %}
+    {% set small_column_width = 'width: 7%;' %}
    <p>
-     <table style="{{ styles['table'] }}" class="{{ classes['table'] }}">
+     <table style="{{ styles['table'] }}; width: 1000px;" class="{{ classes['table'] }}">
        <thead>
        <tr>
-         <th style="{{ styles['th'] }}; width:500px">{{ bucket_name }} - {{ field_display_name }}</th>
+         <th style="{{ styles['th'] }}; width:40%">{{ bucket_name }} - {{ field_display_name }}</th>
        {% if not show_perf %}
          </tr>
          </thead>
          <tbody class="searchable">
          {% for name in test_names %}
            <tr><td class="benchmark-name" style="{{ styles['td'] }}">
                {{ name }}</td></tr>
          {% endfor %}
          </tbody>
        {% else %}
-         <th style="{{ styles['th'] }}">Δ {{ metric_field_suffix }}</th>
-         <th style="{{ styles['th'] }}">{{ metric_name }}</th>
-         <th style="{{ styles['th'] }}">Current</th>
-         <th style="{{ styles['th'] }}">σ {{ metric_field_suffix }}</th>
+         <th style="{{ styles['th'] }}; {{ small_column_width }}">Δ {{ metric_field_suffix }}</th>
+         <th style="{{ styles['th'] }}; {{ small_column_width }}">{{ metric_name }}</th>
+         <th style="{{ styles['th'] }}; {{ small_column_width }}">Current</th>
+         <th style="{{ styles['th'] }}; {{ small_column_width }}">σ {{ metric_field_suffix }}</th>
          {% if secondary_info %}
-         <th style="{{ styles['th'] }}">Δ {{ secondary_field_suffix }}</th>
-         <th style="{{ styles['th'] }}">σ {{ secondary_field_suffix }}</th>
+         <th style="{{ styles['th'] }}; {{ small_column_width }}">Δ {{ secondary_field_suffix }}</th>
+         <th style="{{ styles['th'] }}; {{ small_column_width }}">σ {{ secondary_field_suffix }}</th>
          {% endif %}
          </tr>
          </thead>
          <tbody class="searchable">
          
          {% for name, cr, test_id in bucket %}
          <tr>
            <td class="benchmark-name" style="{{ styles['td'] }}">
              {% if run.machine != compare_to.machine %}
                <a href="{{ run_url }}/graph?plot.0={{run.machine_id}}.{{test_id}}.{{field_index}}&plot.1={{compare_to.machine_id}}.{{test_id}}.{{field_index}}">{{ name }}</a>
              {% else %}
                <a href="{{ run_url }}/graph?{{ [('test.%d' % test_id, field_index)] | urlencode }}">{{ name }}</a>
              {% endif %}
              {% if compare_to %}
              {% set compare_to_id = compare_to.id %}
              {% else %}
              {% set compare_to_id = None %}
              {% endif %}
              {{ utils.render_profile_link(cr.cur_profile, cr.prev_profile, run.id, compare_to_id, test_id) }}
            </td>
-           {{ cr.pct_delta|aspctcell(style=styles['td'],reverse=cr.bigger_is_better)|safe }}
-           <td style="{{ styles['td'] }}">{{ "%.4f" | format(cr.previous) }}</td>
-           <td style="{{ styles['td'] }}">{{ "%.4f" | format(cr.current) }}</td>
-           <td style="{{ styles['td'] }}">{{ "%.4f" | format_or_default(cr.stddev, '-') }}</td>
+           {{ cr.pct_delta|aspctcell(style=styles['td'] + 'text-align: right;',reverse=cr.bigger_is_better)|safe }}
+           <td class="right" style="{{ styles['td'] }}">{{ "%.4f" | format(cr.previous) }}</td>
+           <td class="right" style="{{ styles['td'] }}">{{ "%.4f" | format(cr.current) }}</td>
+           <td class="right" style="{{ styles['td'] }}">{{ "%.4f" | format_or_default(cr.stddev, '-') }}</td>
            {% if secondary_info %}
              {% set a_cr = secondary_info[(name, field)] %}
-             {{ a_cr.pct_delta|aspctcell(style=styles['td'],reverse=cr.bigger_is_better)|safe }}
-             <td style="{{ styles['td'] }}">{{ "%.4f" | format_or_default(a_cr.stddev, '-') }}</td>
+             {{ a_cr.pct_delta|aspctcell(style=styles['td'] + 'text-align: right;',reverse=cr.bigger_is_better)|safe }}
+             <td class="right" style="{{ styles['td'] }}">{{ "%.4f" | format_or_default(a_cr.stddev, '-') }}</td>
            {% endif %}
          </tr>
          {% endfor %}
          </tbody>
        {% endif %}
      </table>
    </p>
 {% endif %}

lnt/trunk/lnt/server/ui/templates/v4_run.html

$('.profile-prev-only').tooltip();
     {% set cell_color = (233,128,128) %}
   {% elif test_status == analysis.IMPROVED %}
     {% set cell_color = (143,223,95) %}
   {% elif test_status == analysis.UNCHANGED_FAIL %}
     {% set cell_color = (255,195,67) %}
   {% endif %}
 
   {% if cell_color %}
-    <td style="background-color:{{ '#%02x%02x%02x' % cell_color }}">{{ run_cell_value }}</td>
+    <td class="right" style="background-color:{{ '#%02x%02x%02x' % cell_color }}">{{ run_cell_value }}</td>
   {% else %}
-    <td>{{run_cell_value}}</td>
+    <td class="right">{{run_cell_value}}</td>
   {% endif %}
 
   {% if test_status == analysis.UNCHANGED_PASS and
         (options.show_all or
          value_status == analysis.REGRESSED or
          value_status == analysis.IMPROVED) %}
     {{ cr.pct_delta|aspctcell(reverse=cr.bigger_is_better)|safe }}
   {% else %}