Attempt for DFL-3654: Selectors (nth-child()) used for the sortable tabl...

src/console-logger/console_templates.js

@@ -36,7 +36,7 @@ window.templates.errors.log_table = function(entries, allExpanded, expandedList,
   };
 
   return [
-    "table", entries.map(rowClosure),
+    "table", new window.helpers.EvenOddHandler().add_elems(entries.map(rowClosure)),
     "class", "sortable-table errors-table",
   ];
 };

src/ecma-debugger/helpers.js

@@ -391,6 +391,57 @@ window.cls.Helpers = function()
       return obj[prop] === val;
     };
   };
+
+  this.EvenOddHandler = function(even_class, odd_class)
+  {
+    // Adds an "even" class when no params are passed
+    var DEFAULT_EVEN_CLASSNAME = "even";
+    var DEFAULT_ODD_CLASSNAME = "odd";
+
+    if (even_class === undefined || even_class === true)
+      this._even_class = DEFAULT_EVEN_CLASSNAME;
+    else
+      this._even_class = even_class;
+
+    if (odd_class === true)
+      this._odd_class = DEFAULT_ODD_CLASSNAME;
+    else
+      this._odd_class = odd_class;
+
+    this.count = 0;
+  };
+
+  this.EvenOddHandlerPrototype = function()
+  {
+    this.add_elem = function(elem)
+    {
+      if (this.count % 2)
+        this._even_class && this._add_class(elem, this._even_class);
+      else
+        this._odd_class && this._add_class(elem, this._odd_class);
+      this.count++;
+      return elem;
+    };
+
+    this.add_elems = function(elems)
+    {
+      elems.forEach(this.add_elem, this);
+      return elems;
+    };
+
+    this._add_class = function(elem_arr, classname)
+    {
+      var class_arg_index = elem_arr.lastIndexOf("class");
+      var has_class_attr = class_arg_index != -1 &&
+                           // In a template, only "class" at an odd reverse index means a class attr
+                           (elem_arr.length - 1 - class_arg_index) % 2
+      if (has_class_attr)
+        elem_arr[class_arg_index + 1] += " " + classname;
+      else
+        elem_arr.push("class", classname);
+    }
+  };
+  this.EvenOddHandler.prototype = new this.EvenOddHandlerPrototype();
 }
 
 cls.Helpers.shortcut_search_cb = function(action_id, event, target)

src/network/network_details_templates.js

@@ -393,6 +393,7 @@ templates._request_body = function(req, do_raw)
         ]
       );
       rows.extend(parts.map(this.param_cells));
+      rows = new window.helpers.EvenOddHandler().addRows(rows);
       var table = ["table", rows];
       ret = table;
     }

src/network/network_style.css

@@ -364,7 +364,7 @@
   padding-left: 0;
 }
 
-.network-detail-overlay tr:nth-child(even)
+.network-detail-overlay tr.even
 {
   background-color: rgba(0, 0, 0, 0.03);
 }

src/network/network_templates.js

@@ -174,8 +174,10 @@ templates.viewmode_graphs = function(ctx, entries, selected, width)
   {
     var stepsize = templates.grid_info(duration, width);
     var gridwidth = Math.round((width / duration) * stepsize);
+    var even_handler = new window.helpers.EvenOddHandler("network-graph-row-even");
     var headerrow = templates.timeline_row(width, stepsize, gridwidth);
-
+    even_handler.add_elem(headerrow);
+    even_handler.add_elems(rows);
     template = ["div", headerrow, rows,
                   "id", "graph",
                   "style", "background-size: " + gridwidth + "px 100%;"
@@ -206,11 +208,14 @@ templates.url_list_entry = function(selected, entry)
 
 templates.url_list = function(ctx, entries, selected)
 {
+  var lis = entries.map(
+    templates.url_list_entry.bind(null, selected)
+  );
+  new window.helpers.EvenOddHandler(false, true).add_elems(lis);
+
   return [
     ["ol",
-      entries.map(
-        templates.url_list_entry.bind(null, selected)
-      ),
+      lis,
       "class", "network-log-url-list sortable-table-style-list"]
   ]
 };

src/ui-scripts/sortable_table/sortable_table.css

@@ -62,9 +62,9 @@
   border-bottom-width: 1px;
 }
 
-.sortable-table > tr:nth-child(even),
-.network-log-url-list li:nth-child(odd),
-.network-graph-row:nth-child(even)
+.sortable-table > tr.even,
+.network-log-url-list li.odd,
+.network-graph-row-even
 {
   background-color: rgba(0, 0, 0, 0.03);
 }

src/ui-scripts/sortable_table/sortable_table.js

@@ -411,12 +411,18 @@ window.templates = window.templates || {};
 
 templates.sortable_table = function(tabledef, data, objectid, cols, groupby, sortby, reversed)
 {
+  var even_handler = new window.helpers.EvenOddHandler();
+  var header = even_handler.add_elem(
+                 templates.sortable_table_header(tabledef, cols, sortby, reversed)
+               );
+  var body = templates.sortable_table_body(tabledef, data, cols, groupby, sortby, reversed);
+  body.forEach(even_handler.add_elems, even_handler);
   var table =  ["table",
-                templates.sortable_table_header(tabledef, cols, sortby, reversed),
-                templates.sortable_table_body(tabledef, data, cols, groupby, sortby, reversed),
+                header,
+                body,
                 "class", "sortable-table" + (tabledef.nowrap ? " nowrap" : ""),
                 "data-table-object-id", objectid,
-               ]
+               ];
 
   if (!tabledef.options || !tabledef.options.no_default_menu)
   {