Restore resizer div height and thus the overall column resizing

We have to remove the static div elements in the HTML template because
datatables will include all of them in a span for the header cell
content, overwriting the original table structure, and must instead
perform our own overwriting afterwards. The div elements are added to
each table header cell if they are not already present to add them
just once for all table redraws.

If the div is instead wrapped in a span by datatables this will lead
to its dynamically calculated height to be added to ever increasing
table header cell height and degrade the table headers. The current
change achieves the same structure we had before but with multiple
spans (for content and for sorting arrows) now with datatables 2.

Signed-off-by: Plamen Dimitrov <plamen.dimitrov@intra2net.com>

Author: pevogam

optional_plugins/html/avocado_result_html/templates/avocado_html.js

@@ -77,8 +77,12 @@
     // this should be called each table we have a redrawn
     this.setupResizers = function() {
       var self = this;
-      table.find('.resizer').each(function() {
-        var resizerElement = $(this);
+      table.find('th').each(function() {
+        if ($(this).find('.resizer').length == 0) {
+          // we only need one resizer per header cell
+          $(this).append('<div class="resizer"></div>')
+        }
+        var resizerElement = $(this).find('.resizer');
         // the resizer must have the same size as the header cell to be detectable
         resizerElement.height(resizerElement.parent().outerHeight())
         // we detach and reattach each event to prevent them from being triggered

optional_plugins/html/avocado_result_html/templates/results.html

@@ -64,35 +64,27 @@ <h4 class="panel-title">Summary</h4>
           <tr>
             <th>
               <span>Start Time</span>
-              <div class="resizer"></div>
             </th>
             <th>
               <span>UID</span>
-              <div class="resizer"></div>
             </th>
             <th>
               <span>Test Name</span>
-              <div class="resizer"></div>
             </th>
             <th>
               <span>Variant</span>
-              <div class="resizer"></div>
             </th>
             <th>
               <span>Status</span>
-              <div class="resizer"></div>
             </th>
             <th>
               <span>Time (sec)</span>
-              <div class="resizer"></div>
             </th>
             <th>
               <span>Info</span>
-              <div class="resizer"></div>
             </th>
             <th>
               <span>Debug</span>
-              <div class="resizer"></div>
             </th>
           </tr>
         </thead>