Skip to content
This repository has been archived by the owner on Jan 15, 2021. It is now read-only.

Commit

Permalink
Biggish internal chane of how row colouring is calculated
Browse files Browse the repository at this point in the history 
This designed to make supporting dynamically adding rows easier
  • Loading branch information
@avanderhoorn
avanderhoorn committed Feb 25, 2013
1 parent 9cf31c9 commit fc9839d
Show file tree
Hide file tree
Showing 10 changed files with 53 additions and 62 deletions.
4 changes: 2 additions & 2 deletions source/Glimpse.JavaScript/glimpse.ajax.js
View file
Expand Up @@ -86,7 +86,7 @@
var detailData = [['Request URL', 'Method', 'Duration', 'Date/Time', 'View']],
detailMetadata = { layout: [ [ { data : 0, key : true, width : '40%' }, { data : 1 }, { data : 2, width : '10%', className : 'mono', align : 'right' }, { data : 3, width : '20%' }, { data : 4, width : '100px' } ] ] };

panel.html(renderEngine.build(detailData, detailMetadata)).find('table').append('<tbody></tbody>');
panel.html(renderEngine.build(detailData, detailMetadata)).find('table').append('<tbody class="glimpse-row-holder"></tbody>');
panel.find('table').addClass('glimpse-ellipsis').find('thead').append('<tr class="glimpse-head-message" style="display:none"><td colspan="5"><a href="#">Reset context back to starting page</a></td></tr>');
}
},
Expand All @@ -97,7 +97,7 @@

for (var x = context.resultCount; x < result.length; x++) {
var item = result[x];
html = '<tr data-requestId="' + item.requestId + '" class="' + (x % 2 == 0 ? 'even' : 'odd') + '"><td><div class="glimpse-ellipsis" title="' + item.uri + '">' + item.uri + '</div></td><td>' + item.method + '</td><td class="mono" style="text-align:right">' + item.duration + '<span class="glimpse-soft"> ms</span></td><td>' + item.dateTime + '</td><td><a href="#" class="glimpse-ajax-link" data-requestId="' + item.requestId + '">Inspect</a></td></tr>' + html;
html = '<tr data-requestId="' + item.requestId + '" class="glimpse-row"><td><div class="glimpse-ellipsis" title="' + item.uri + '">' + item.uri + '</div></td><td>' + item.method + '</td><td class="mono" style="text-align:right">' + item.duration + '<span class="glimpse-soft"> ms</span></td><td>' + item.dateTime + '</td><td><a href="#" class="glimpse-ajax-link" data-requestId="' + item.requestId + '">Inspect</a></td></tr>' + html;
}
detailBody.prepend(html);

Expand Down
6 changes: 3 additions & 3 deletions source/Glimpse.JavaScript/glimpse.history.js
View file
Expand Up @@ -80,7 +80,7 @@
detailData = [ [ 'Request URL', 'Method', 'Duration', 'Date/Time', 'Is Ajax', 'View' ] ],
detailMetadata = { layout: [ [ { data : 0, key : true, width : '30%' }, { data : 1 }, { data : 2, width : '10%', className : 'mono', align : 'right' }, { data : 3, width : '20%' }, { data : 4, width : '10%' }, { data : 5, width : '100px' } ] ] };

detailPanel.html(renderEngine.build(detailData, detailMetadata)).find('table').append('<tbody></tbody>');
detailPanel.html(renderEngine.build(detailData, detailMetadata)).find('table').append('<tbody class="glimpse-row-holder"></tbody>');
detailPanel.find('table').addClass('glimpse-ellipsis').find('thead').append('<tr class="glimpse-head-message" style="display:none"><td colspan="6"><a href="#">Reset context back to starting page</a></td></tr>');

masterPanel.html(renderEngine.build(masterData));
Expand All @@ -98,7 +98,7 @@

for (var x = context.resultCount; x < clientData.length; x++) {
var item = clientData[x];
html = '<tr class="' + (x % 2 == 0 ? 'even' : 'odd') + '" data-requestId="' + item.requestId + '"><td><div class="glimpse-ellipsis" title="' + item.uri + '">' + item.uri + '</div></td><td>' + item.method + '</td><td class="mono" style="text-align:right">' + item.duration + '<span class="glimpse-soft"> ms</span></td><td>' + item.dateTime + '</td><td>' + item.isAjax + '</td><td><a href="#" class="glimpse-history-link" data-requestId="' + item.requestId + '">Inspect</a></td></tr>' + html;
html = '<tr class="glimpse-row" data-requestId="' + item.requestId + '"><td><div class="glimpse-ellipsis" title="' + item.uri + '">' + item.uri + '</div></td><td>' + item.method + '</td><td class="mono" style="text-align:right">' + item.duration + '<span class="glimpse-soft"> ms</span></td><td>' + item.dateTime + '</td><td>' + item.isAjax + '</td><td><a href="#" class="glimpse-history-link" data-requestId="' + item.requestId + '">Inspect</a></td></tr>' + html;
}
detailBody.prepend(html);

Expand All @@ -119,7 +119,7 @@
rowCount = masterBody.find('tr').length;

if (masterRow.length == 0)
masterRow = $('<tr class="' + (rowCount % 2 == 0 ? 'even' : 'odd') + '"><td>' + recordName + '</td><td class="glimpse-history-count">1</td><td><a href="#" class="glimpse-Client-link" data-clientName="' + recordName + '">Inspect</a></td></tr>').prependTo(masterBody);
masterRow = $('<tr class="glimpse-row"><td>' + recordName + '</td><td class="glimpse-history-count">1</td><td><a href="#" class="glimpse-Client-link" data-clientName="' + recordName + '">Inspect</a></td></tr>').prependTo(masterBody);

masterRow.find('.glimpse-history-count').text(result[recordName].length);

Expand Down
46 changes: 24 additions & 22 deletions source/Glimpse.JavaScript/glimpse.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion source/Glimpse.JavaScript/glimpse.render.engine.heading.js
View file
@@ -1,7 +1,7 @@
(function($, util, engine, engineUtil) {
var providers = engine._providers,
build = function (data, level, forceFull, metadata, forceLimit) {
var html = '<div class="glimpse-row-holder"><div class="glimpse-row">';
var html = '<div class="glimpse-row-holder glimpse-row-holder-suppress"><div class="glimpse-row">';
for (var key in data) {
var value = data[key];
html += '<div class="glimpse-header-item"><div class="glimpse-header">' + key + '</div>';
Expand Down
2 changes: 1 addition & 1 deletion source/Glimpse.JavaScript/glimpse.render.engine.keyvalue.js
View file
Expand Up @@ -14,7 +14,7 @@
html += '<thead><tr class="glimpse-row-header glimpse-row-header-' + level + '"><th class="glimpse-key">Key</th><th class="glimpse-cell-value">Value</th></tr></thead>';
html += '<tbody class="glimpse-row-holder">';
for (var key in data)
html += '<tr class="glimpse-row ' + (i++ % 2 ? 'odd' : 'even') + '"><th class="glimpse-key">' + engineUtil.raw.process(key) + '</th><td> ' + providers.master.build(data[key], level + 1, null, engineUtil.keyMetadata(key, metadata)) + '</td></tr>';
html += '<tr class="glimpse-row"><th class="glimpse-key">' + engineUtil.raw.process(key) + '</th><td> ' + providers.master.build(data[key], level + 1, null, engineUtil.keyMetadata(key, metadata)) + '</td></tr>';
html += '</tbody></table>';

return html;
Expand Down
4 changes: 2 additions & 2 deletions source/Glimpse.JavaScript/glimpse.render.engine.layout.js
View file
Expand Up @@ -90,7 +90,7 @@
for (var i = 0; i < data.length; i++) {
rowClass = data[i].length > data[0].length ? (' ' + data[i][data[i].length - 1]) : '';
html += (i == 0 && includeHeading) ? '<thead class="glimpse-row-header glimpse-row-header-' + level + '">' : '';
html += (i == 1 || !includeHeading) ? '<tbody class="glimpse-row-holder">' : '';
html += ((includeHeading && i == 1) || (!includeHeading && i == 0)) ? '<tbody class="glimpse-row-holder">' : '';
for (var x = 0; x < layout.length; x++) {
var rowData = '';

Expand All @@ -99,7 +99,7 @@
rowData += buildCell(data[i], metadataItem, level, cellType, i, includeHeading);
}

if (rowData != '') { html += '<tr class="glimpse-row ' + (i % 2 ? 'odd' : 'even') + rowClass + '">' + rowData + '</tr>'; };
if (rowData != '') { html += '<tr class="glimpse-row ' + rowClass + '">' + rowData + '</tr>'; };
}
html += (i == 0 && includeHeading) ? '</thead>' : '';
}
Expand Down
4 changes: 2 additions & 2 deletions source/Glimpse.JavaScript/glimpse.render.engine.table.js
View file
Expand Up @@ -19,7 +19,7 @@
}
html += '<tbody class="glimpse-row-holder">';
for (var i = includeHeading ? 1 : 0; i < data.length; i++) {
html += '<tr class="glimpse-row ' + (i % 2 ? 'odd' : 'even') + (data[i].length > data[0].length ? ' ' + data[i][data[i].length - 1] : '') + '">';
html += '<tr class="glimpse-row ' + (data[i].length > data[0].length ? ' ' + data[i][data[i].length - 1] : '') + '">';
for (var x = 0; x < data[0].length; x++)
html += '<td>' + providers.master.build(data[i][x], level + 1) + '</td>';
html += '</tr>';
Expand All @@ -32,7 +32,7 @@
html += '<thead><th>Values</th></tr></thead>';
html += '<tbody class="glimpse-row-holder">';
for (var i = 0; i < data.length; i++)
html += '<tr class="glimpse-row ' + (i % 2 ? 'odd' : 'even') + '"><td>' + providers.master.build(data[i], level + 1) + '</td></tr>';
html += '<tr class="glimpse-row"><td>' + providers.master.build(data[i], level + 1) + '</td></tr>';
html += '</tbody></table>';
}
else
Expand Down
19 changes: 6 additions & 13 deletions source/Glimpse.JavaScript/glimpse.render.shell.css
View file
Expand Up @@ -431,13 +431,10 @@
}
.glimpse-panel table table thead tr th:last-child {
border-right: 0px;
}
.glimpse-panel .even, .glimpse-panel .even > td, .glimpse-panel .even > th, .glimpse-panel .even > tr > td, .glimpse-panel .even > tr > th, .even > td > .glimpse-preview-table > tbody > tr > td, .even > tr > td > .glimpse-preview-table > tbody > tr > td {
background-color: #F2F5F9;
}
.glimpse-panel .odd, .glimpse-panel .odd > td, .glimpse-panel .odd > th, .glimpse-panel .odd > tr > td, .glimpse-panel .odd > tr > th, .odd > td > .glimpse-preview-table > tbody > tr > td, .odd > tr > td > .glimpse-preview-table > tbody > tr > td {
background-color: #FEFFFF;
}
}
.glimpse-row-holder > .glimpse-row:nth-of-type(odd), .glimpse-row-color:nth-of-type(odd), .glimpse-row-odd, .glimpse-row-odd > td { background-color: #FEFFFF; }
.glimpse-row-holder > .glimpse-row:nth-of-type(even), .glimpse-row-color:nth-of-type(even), .glimpse-row-even, .glimpse-row-even > td { background-color: #F2F5F9; }
.glimpse-row-holder.glimpse-row-holder-suppress > .glimpse-row { background-color: transparent; }
.glimpse-panel table table tbody th {
font-weight: normal;
font-style: italic;
Expand Down Expand Up @@ -485,12 +482,8 @@ div.glimpse-ellipsis {
text-overflow: ellipsis;
width: 100%;
}
.glimpse-col-side .even, .glimpse-col-side .even > td {
background-color: #E1E7F0;
}
.glimpse-col-side .odd, .glimpse-col-side .odd > td {
background-color: #F2F5F7;
}
.glimpse-col-side .glimpse-row-holder > .glimpse-row:nth-of-type(odd), .glimpse-row-alt-color:nth-of-type(odd), .glimpse-row-alt-odd, .glimpse-row-alt-odd > td { background-color: #E1E7F0; }
.glimpse-col-side .glimpse-row-holder > .glimpse-row:nth-of-type(even), .glimpse-row-alt-color:nth-of-type(even), .glimpse-row-alt-even, .glimpse-row-alt-even > td { background-color: #F2F5F7; }
.glimpse-panel-holder .glimpse-active {
display: block;
}
Expand Down
22 changes: 12 additions & 10 deletions source/Glimpse.JavaScript/glimpse.timeline.js
View file
Expand Up @@ -293,16 +293,18 @@
},
colorRows = function(args) {
var filter = args.applyAll ? '' : ':visible';
colorElement(elements.contentBandHolder.find('> div'), filter);
colorElement(elements.contentDescHolder.find('> div'), filter);
colorElement(elements.summaryBandHolder.find('> div'), filter);
colorElement(elements.summaryDescHolder.find('> div'), filter);
colorElement(elements.contentTableHolder.find('tbody'), filter);
},
colorElement = function(scope, filter) {
scope.removeClass('odd').removeClass('even');
scope.filter(filter + ':even').addClass('even');
scope.filter(filter + ':odd').addClass('odd');
colorElement(elements.contentBandHolder.find('> div'), filter, 'glimpse-row-');
colorElement(elements.contentDescHolder.find('> div'), filter, 'glimpse-row-alt-');
colorElement(elements.summaryBandHolder.find('> div'), filter, 'glimpse-row-');
colorElement(elements.summaryDescHolder.find('> div'), filter, 'glimpse-row-alt-');
colorElement(elements.contentTableHolder.find('tbody'), filter, 'glimpse-row-');
},
colorElement = function(scope, filter, baseClass) {
var odd = baseClass + 'odd',
even = baseClass + 'even';
scope.removeClass(odd).removeClass(even);
scope.filter(filter + ':even').addClass(odd);
scope.filter(filter + ':odd').addClass(even);
},
categoryEvents = function(item) {
//Handel how the UI will look
Expand Down
6 changes: 0 additions & 6 deletions source/Glimpse.JavaScript/glimpse.timeline.shell.css
View file
Expand Up @@ -310,12 +310,6 @@
.glimpse-panel .glimpse-tl-col-side {
background-color: #F2F5F7;
}
.glimpse-panel .glimpse-tl-col-side .odd, .glimpse-panel .glimpse-tl-col-side .odd > td {
background-color: #F2F5F7;
}
.glimpse-panel .glimpse-tl-col-side .even, .glimpse-panel .glimpse-tl-col-side .even > td {
background-color: #E1E7F0;
}
.glimpse-panel .glimpse-tl-row-summary .glimpse-tl-band-title {
opacity: 0.9;
}
Expand Down

0 comments on commit fc9839d

Please sign in to comment.