diff --git a/src/console-logger/console_templates.js b/src/console-logger/console_templates.js index e10b6e23d..d1a509f8d 100644 --- a/src/console-logger/console_templates.js +++ b/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", ]; }; diff --git a/src/ecma-debugger/helpers.js b/src/ecma-debugger/helpers.js index 52fe6698c..7b746173a 100644 --- a/src/ecma-debugger/helpers.js +++ b/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) diff --git a/src/network/network_details_templates.js b/src/network/network_details_templates.js index 7792f467e..d7cc56317 100644 --- a/src/network/network_details_templates.js +++ b/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; } diff --git a/src/network/network_style.css b/src/network/network_style.css index 1ae598a49..5c1bee6e3 100644 --- a/src/network/network_style.css +++ b/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); } diff --git a/src/network/network_templates.js b/src/network/network_templates.js index 8b1f0e800..e00a8a759 100644 --- a/src/network/network_templates.js +++ b/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"] ] }; diff --git a/src/ui-scripts/sortable_table/sortable_table.css b/src/ui-scripts/sortable_table/sortable_table.css index 57ac25219..ae9ed749f 100644 --- a/src/ui-scripts/sortable_table/sortable_table.css +++ b/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); } diff --git a/src/ui-scripts/sortable_table/sortable_table.js b/src/ui-scripts/sortable_table/sortable_table.js index f1d27b55f..992cb3209 100644 --- a/src/ui-scripts/sortable_table/sortable_table.js +++ b/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) {