Skip to content

Commit

Permalink
JS UI Client - Feature - Added string parsing support - now supports …
Browse files Browse the repository at this point in the history 
…syntax for encoded, bold, underline, italic and raw unencoded.
  • Loading branch information
@avanderhoorn
avanderhoorn committed Mar 28, 2011
1 parent 057cbff commit 0cc3930
Show file tree
Hide file tree
Showing 2 changed files with 165 additions and 57 deletions.
57 changes: 12 additions & 45 deletions source/Glimpse.Test/Scripts/XMLHttpRequestWrapper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,31 +22,10 @@ XHRSpy.prototype =
duration: null,
logRow: null,
send: function() {
/*
var row = Firebug.Console.log(spy, null, "spy", Firebug.Spy.XHR);
if (row)
{
setClass(row, "loading");
spy.logRow = row;
}
*/
$.glimpseAjax.callStarted(this);
},
finish: function() {
/*
// update row information to avoid "ethernal spinning gif" bug in IE
row = row || spy.logRow;
// if chrome document is not loaded, there will be no row yet, so just ignore
if (!row) return;
$(row).removeClass("loading");
if (!success)
$(row).addClass("error");
var item = $(".spyStatus", row).text(status);
var item = $(".spyTime", row).text(duration + "ms");
*/
console.log(this);
$.glimpseAjax.callFinished(this);
}
};

Expand All @@ -56,7 +35,7 @@ var XMLHttpRequestWrapper = function(activeXObject)
// XMLHttpRequestWrapper internal variables

var xhrRequest = (typeof activeXObject != "undefined" ? activeXObject : new _XMLHttpRequest()),
spy = new XHRSpy(), that = this, startTime;
spy = new XHRSpy(), that = this;

// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
// XMLHttpRequestWrapper internal methods
Expand Down Expand Up @@ -94,19 +73,14 @@ var XMLHttpRequestWrapper = function(activeXObject)
spy.duration = duration;
};

var handleStateChange = function() {
console.log("onreadystatechange");

var handleStateChange = function() {
that.readyState = xhrRequest.readyState;

if (xhrRequest.readyState == 4)
{
finishXHR();
xhrRequest.onreadystatechange = function(){};
}

console.log(spy.url + ": " + xhrRequest.readyState);

}
that.onreadystatechange();
};

Expand Down Expand Up @@ -192,26 +166,20 @@ var XMLHttpRequestWrapper = function(activeXObject)

var _ActiveXObject;
if ($.browser.msie && $.browser.version=="6.0") {
window._ActiveXObject = window.ActiveXObject;

var xhrObjects = " MSXML2.XMLHTTP.5.0 MSXML2.XMLHTTP.4.0 MSXML2.XMLHTTP.3.0 MSXML2.XMLHTTP Microsoft.XMLHTTP ";

window._ActiveXObject = window.ActiveXObject;
window.ActiveXObject = function(name)
{
var error = null;

try
{
try {
var activeXObject = new window._ActiveXObject(name);
}
catch(e)
{
catch(e) {
error = e;
}
finally
{
if (!error)
{
finally {
if (!error) {
var xhrObjects = " MSXML2.XMLHTTP.5.0 MSXML2.XMLHTTP.4.0 MSXML2.XMLHTTP.3.0 MSXML2.XMLHTTP Microsoft.XMLHTTP ";
if (xhrObjects.indexOf(" " + name + " ") != -1)
return new XMLHttpRequestWrapper(activeXObject);
else
Expand All @@ -224,8 +192,7 @@ if ($.browser.msie && $.browser.version=="6.0") {
}
else {
var _XMLHttpRequest = XMLHttpRequest;
window.XMLHttpRequest = function()
{
window.XMLHttpRequest = function() {
return new XMLHttpRequestWrapper();
}
}
165 changes: 153 additions & 12 deletions source/Glimpse.Test/Views/Main/Index.cshtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -744,6 +744,7 @@ if (window.jQuery) { (function ($) {
$.glimpse = {};
$.glimpseProcessor = {};
$.glimpseContent = {};
$.glimpseResize = {};
$.glimpseAjax = {};
Expand All @@ -768,6 +769,12 @@ if (window.jQuery) { (function ($) {
if ($.isPlainObject(data))
$.each(data, function(k, v) { count++; });
return count;
},
formatTime : function(d) {
if (typeof d === 'number')
d = new Date(d);
var padding = function(t) { return t < 10 ? '0' + t : t; }
return d.getHours() + ':' + padding(d.getMinutes()) + ':' + padding(d.getSeconds()) + ' ' +d.getMilliseconds();
}
});
Expand Down Expand Up @@ -821,12 +828,16 @@ if (window.jQuery) { (function ($) {
layout : function(g, options) {
var that = this, tabStrip = options.tabStrip(), panelHolder = options.panelHolder();
var start = new Date().getTime();
//Build Dynamic HTML
for (var key in options.data) {
that.addTab(tabStrip, options.data[key], key);
that.addTabBody(panelHolder, that.build(options.data[key], 0), key);
}
console.log((new Date().getTime() - start) + ' ms render time');
//Adjust rows
$('.info td:first-child, .warn td:first-child, tr.error td:first-child, .fail td:first-child', $('.glimpse-panel')).prepend('<div class="icon"></div>')
Expand Down Expand Up @@ -878,7 +889,7 @@ if (window.jQuery) { (function ($) {
var i = 1, html = '<table><thead><tr class="glimpse-row-header-' + level + '"><th>Key</th><th>Value</th></tr></thead>';
for (var key in data)
html += '<tr class="' + (i++ % 2 ? 'odd' : 'even') + '"><th width="30%">' + $.htmlEncode(key) + '</th><td width="70%"> '+ that.build(data[key], level + 1) + '</td></tr>';
html += '<tr class="' + (i++ % 2 ? 'odd' : 'even') + '"><th width="30%">' + $.glimpseContent.formatString(key) + '</th><td width="70%"> '+ that.build(data[key], level + 1) + '</td></tr>';
html += '</table>';
return html;
},
Expand All @@ -889,7 +900,7 @@ if (window.jQuery) { (function ($) {
var html = '<table><thead><tr class="glimpse-row-header-' + level + '">';
for (var x = 0; x < data[0].length; x++)
html += '<th>' + $.htmlEncode(data[0][x]) + '</th>';
html += '<th>' + $.glimpseContent.formatString(data[0][x]) + '</th>';
html += '</tr></thead>';
for (var i = 1; i < data.length; i++) {
html += '<tr class="' + (i % 2 ? 'odd' : 'even') + (data[i].length > data[0].length ? ' ' + data[i][data[i].length - 1] : '') + '">';
Expand All @@ -901,10 +912,13 @@ if (window.jQuery) { (function ($) {
return html;
},
buildString : function(data, level) {
/*
var that = this, charMax = 50;
if (!(data == undefined || data == null) && data.length > charMax) {
return that.buildStringPreview(data, level);}
return $.htmlEncode(data);
*/
return this.buildStringPreview(data, level);
},
buildKeyValuePreview : function(data, level) {
var that = this, length = $.lengthJson(data), rowMax = 2, rowLimit = (rowMax < length ? rowMax : length), i = 1, html = '<span class="glimpse-expand"></span><span class="glimpse-preview-object"><span class="start">{</span>';
Expand Down Expand Up @@ -939,16 +953,22 @@ if (window.jQuery) { (function ($) {
return html;
},
buildStringPreview : function(data, level) {
if (data == undefined || data == null)
return '--';
if ($.isArray(data))
return "[ ... ]";
if ($.isPlainObject(data))
return "{ ... }";
var that = this, charMax = (level > 100 ? 12 : level > 1 ? 50 : 100), charOuterMax = (charMax * 1.2), content = that.trimAndEncodeString(data, charMax, charOuterMax, true)
return "{ ... }";
var that = this,
charMax = (level > 100 ? 12 : level > 1 ? 80 : 150),
charOuterMax = (charMax * 1.2),
content = $.glimpseContent.trimFormatString(data, charMax, charOuterMax, true);
if (data.length > charOuterMax) {
content = '<span class="glimpse-preview-string" title="' + that.trimAndEncodeString(data, charMax * 2, charMax * 2.1) + '">' + content + '</span>';
content = '<span class="glimpse-preview-string" title="' + $.glimpseContent.trimFormatString(data, charMax * 2, charMax * 2.1, false, true) + '">' + content + '</span>';
if (level < 100)
content = '<span class="glimpse-expand"></span>' + content + '<span class="glimpse-preview-show">' + $.htmlEncode(data) + '</span>';
content = '<span class="glimpse-expand"></span>' + content + '<span class="glimpse-preview-show">' + $.glimpseContent.formatString(data) + '</span>';
}
return content;
},
Expand All @@ -961,14 +981,56 @@ if (window.jQuery) { (function ($) {
html += '<span class="small">length=' + dataLength + '</span>';
}
return html;
}
});
$.extend($.glimpseContent, {
formatStringTypes : {
italics : {
match : function(d) { return d.match(/^\_[\w\D]+\_$/) != null; },
replace : function(d) { return '<em>' + $.htmlEncode($.glimpseContent.scrub(d)) + '</em>'; },
trimmable : true },
underline : {
match : function(d) { return d.match(/^\\[\w\D]+\\$/) != null; },
replace : function(d) { return '<u>' + $.htmlEncode($.glimpseContent.scrub(d)) + '</u>'; },
trimmable : true },
strong : {
match : function(d) { return d.match(/^\*[\w\D]+\*$/) != null; },
replace : function(d) { return '<strong>' + $.htmlEncode($.glimpseContent.scrub(d)) + '</strong>'; },
trimmable : true },
raw : {
match : function(d) { return d.match(/^\![\w\D]+\!$/) != null; },
replace : function(d) { return $.glimpseContent.scrub(d); },
trimmable : false }
},
scrub : function(d) {
return d.substr(1, d.length - 2);
},
trimAndEncodeString : function(data, charMax, charOuterMax, wrapEllipsis) {
formatString : function(data) {
var that = this;
return that.trimFormatString(data);
},
trimFormatString : function(data, charMax, charOuterMax, wrapEllipsis, skipEncoding) {
var that = this, trimmable = true, replace = function(d) { return $.htmlEncode(d); };
if (data == undefined || data == null)
return '--';
data = $.trim(data);
if (data.length > charOuterMax)
return $.htmlEncode(data.substr(0, charMax)) + (wrapEllipsis ? '<span>...</span>' : '...');
return $.htmlEncode(data);
if (!skipEncoding) {
for (var typeKey in that.formatStringTypes) {
var type = that.formatStringTypes[typeKey];
if (type.match(data)) {
replace = type.replace;
trimmable = type.trimmable;
break;
}
}
}
if (trimmable && charOuterMax && data.length > charOuterMax)
return replace(data.substr(0, charMax)) + (wrapEllipsis ? '<span>...</span>' : '...');
return replace(data);
}
});
Expand All @@ -992,7 +1054,32 @@ if (window.jQuery) { (function ($) {
var ga = $.glimpseAjax;
$('.glimpse-tabitem-' + ga.plugin, tabStrip).addClass('glimpse-permanent').text(ga.plugin);
$('.glimpse-panelitem-' + ga.plugin, panelHolder).addClass('glimpse-permanent').html('<div class="glimpse-panel-message">No ajax calls have yet been detected</div>');
}
},
callStarted : function(ajaxSpy) {
var g = $.glimpse, ga = $.glimpseAjax, panelHolder = g.defaults.panelHolder(), panelItem = $('.glimpse-panelitem-' + ga.plugin, panelHolder);
//First time round we need to set everything up
if ($('.glimpse-panel-message', panelItem).length > 0)
panelItem.html($.glimpseProcessor.build([
['Request URL', 'Status', 'Date/Time', 'Druration', 'Is Async', 'Inspect'],
[window.location.pathname, '200', $.formatTime(new Date()), 'N/A', 'N/A', '!<a href="#">Launch</a>!']
], 0));
$('table', panelItem).append('<tr class="glimpse-ajax-loading"><th>' + ajaxSpy.url + '</th><td class="glimpse-ajax-status">Loading...</td><td>' + $.formatTime(ajaxSpy.startTime) + '</td><td class="glimpse-ajax-duration">--</td><td>' + ajaxSpy.async + '</td><td class="glimpse-ajax-inspect"></td></tr>');
//In theory I wouldn't need to do this every time but wanting to make sure that all rows are kept in sync
$('table tbody tr:odd', panelItem).addClass('even');
$('table tbody tr:even', panelItem).addClass('odd');
ajaxSpy.logRow = $('tr:last', panelItem);
},
callFinished :function(ajaxSpy) {
ajaxSpy.logRow.removeClass('glimpse-ajax-loading').addClass('glimpse-ajax-' + (ajaxSpy.success ? 'loaded' : 'error'));
$('.glimpse-ajax-status', ajaxSpy.logRow).text(ajaxSpy.status);
$('.glimpse-ajax-duration', ajaxSpy.logRow).text(ajaxSpy.duration + 'ms');
$('.glimpse-ajax-inspect', ajaxSpy.logRow).html('<a href="#">Launch</a>');
}
});
$.extend($.glimpse, {
Expand Down Expand Up @@ -1121,6 +1208,60 @@ $(document).ready(function() {
$.glimpse.init(glimpse);
});
setTimeout(function() {
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 }
}
xmlhttp.open("POST","/Glimpse/Config",true);
xmlhttp.send();
}, 6000);
setTimeout(function() {
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 }
}
xmlhttp.open("POST","/Glimpse/Config?wqdeqsd",true);
xmlhttp.send();
}, 10000);
setTimeout(function() {
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 }
}
xmlhttp.open("POST","/Glimpse/Config?23tew",true);
xmlhttp.send();
}, 11000);
})(jQuery); }
</script>

Expand Down

0 comments on commit 0cc3930

Please sign in to comment.