From 0cc39308b0ab6e721fe907f2f2c2db41e7b32e02 Mon Sep 17 00:00:00 2001 From: avanderhoorn Date: Mon, 28 Mar 2011 07:18:15 -0400 Subject: [PATCH] JS UI Client - Feature - Added string parsing support - now supports syntax for encoded, bold, underline, italic and raw unencoded. --- .../Scripts/XMLHttpRequestWrapper.js | 57 ++---- source/Glimpse.Test/Views/Main/Index.cshtml | 165 ++++++++++++++++-- 2 files changed, 165 insertions(+), 57 deletions(-) diff --git a/source/Glimpse.Test/Scripts/XMLHttpRequestWrapper.js b/source/Glimpse.Test/Scripts/XMLHttpRequestWrapper.js index ae135f92e..f58d744ae 100644 --- a/source/Glimpse.Test/Scripts/XMLHttpRequestWrapper.js +++ b/source/Glimpse.Test/Scripts/XMLHttpRequestWrapper.js @@ -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); } }; @@ -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 @@ -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(); }; @@ -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 @@ -224,8 +192,7 @@ if ($.browser.msie && $.browser.version=="6.0") { } else { var _XMLHttpRequest = XMLHttpRequest; - window.XMLHttpRequest = function() - { + window.XMLHttpRequest = function() { return new XMLHttpRequestWrapper(); } } \ No newline at end of file diff --git a/source/Glimpse.Test/Views/Main/Index.cshtml b/source/Glimpse.Test/Views/Main/Index.cshtml index ea42194d9..1a20a4fe9 100644 --- a/source/Glimpse.Test/Views/Main/Index.cshtml +++ b/source/Glimpse.Test/Views/Main/Index.cshtml @@ -744,6 +744,7 @@ if (window.jQuery) { (function ($) { $.glimpse = {}; $.glimpseProcessor = {}; + $.glimpseContent = {}; $.glimpseResize = {}; $.glimpseAjax = {}; @@ -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(); } }); @@ -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('
') @@ -878,7 +889,7 @@ if (window.jQuery) { (function ($) { var i = 1, html = ''; for (var key in data) - html += ''; + html += ''; html += '
KeyValue
' + $.htmlEncode(key) + ' '+ that.build(data[key], level + 1) + '
' + $.glimpseContent.formatString(key) + ' '+ that.build(data[key], level + 1) + '
'; return html; }, @@ -889,7 +900,7 @@ if (window.jQuery) { (function ($) { var html = ''; for (var x = 0; x < data[0].length; x++) - html += ''; + html += ''; html += ''; for (var i = 1; i < data.length; i++) { html += ''; @@ -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 = '{'; @@ -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 = '' + content + ''; + content = '' + content + ''; if (level < 100) - content = '' + content + '' + $.htmlEncode(data) + ''; + content = '' + content + '' + $.glimpseContent.formatString(data) + ''; } return content; }, @@ -961,14 +981,56 @@ if (window.jQuery) { (function ($) { html += 'length=' + dataLength + ''; } return html; + } + }); + + $.extend($.glimpseContent, { + formatStringTypes : { + italics : { + match : function(d) { return d.match(/^\_[\w\D]+\_$/) != null; }, + replace : function(d) { return '' + $.htmlEncode($.glimpseContent.scrub(d)) + ''; }, + trimmable : true }, + underline : { + match : function(d) { return d.match(/^\\[\w\D]+\\$/) != null; }, + replace : function(d) { return '' + $.htmlEncode($.glimpseContent.scrub(d)) + ''; }, + trimmable : true }, + strong : { + match : function(d) { return d.match(/^\*[\w\D]+\*$/) != null; }, + replace : function(d) { return '' + $.htmlEncode($.glimpseContent.scrub(d)) + ''; }, + 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 ? '...' : '...'); - 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 ? '...' : '...'); + return replace(data); } }); @@ -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('
No ajax calls have yet been detected
'); - } + }, + 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', '!Launch!'] + ], 0)); + + $('table', panelItem).append(''); + + //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('Launch'); + } }); $.extend($.glimpse, { @@ -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); }
' + $.htmlEncode(data[0][x]) + '' + $.glimpseContent.formatString(data[0][x]) + '
' + ajaxSpy.url + 'Loading...' + $.formatTime(ajaxSpy.startTime) + '--' + ajaxSpy.async + '