Plugins/DeBug.js

   1 //part of mootools.js - by Valerio Proietti (http://mad4milk.net). MIT-style license.
   2 //Debug.js : nice crossbrowser javascript debugger - depends on ??
   3
   4 var $debug = {
   5
   6         submit: function(evt){
   7                 var error = false;
   8                 evt = evt || window.event;
   9                 if (evt.keyCode == 13) {
  10                         if (!this.value) return;
  11                         $debug.currentCommand = $debug.commands.length;
  12                         try {
  13                                 $debug.write(eval(this.value));
  14                         } catch (err){
  15                                 error = true;
  16                                 $debug.write(err);
  17                         } finally {
  18                                 if (!error) {
  19                                         $debug.commands.push(this.value);
  20                                         this.value = '';
  21                                 }
  22                         }
  23                 } else if (evt.keyCode == 38) {
  24                         $debug.commandUp();
  25                 } else if       (evt.keyCode == 40) {
  26                         $debug.commandDown();
  27                 }
  28         },
  29
  30         commands: [],
  31
  32         commandUp: function(){
  33                 if ($debug.commands[$debug.currentCommand]){
  34                         $debug.swapColors();
  35                         $debug.inputs.value = $debug.commands[$debug.currentCommand];
  36                         $debug.currentCommand = $debug.currentCommand-1;
  37                 }
  38         },
  39
  40         commandDown: function(){
  41                 if ($debug.commands[$debug.currentCommand+1]){
  42                         $debug.swapColors();
  43                         $debug.inputs.value = $debug.commands[$debug.currentCommand+1];
  44                         $debug.currentCommand = $debug.currentCommand+1;
  45                 }
  46         },
  47
  48         swapColors: function(){
  49                 if ($debug.currentColor == '#ddd') {
  50                         $debug.console.setStyle('background-color', '#ccc');
  51                         $debug.currentColor = '#ccc';
  52                 } else {
  53                         $debug.console.setStyle('background-color', '#ddd');
  54                         $debug.currentColor = '#ddd';
  55                 }
  56         },
  57
  58         create: function(){
  59
  60                 $debug.currentColor = '#ddd';
  61
  62                 new Element('style').setProperties({
  63                         'type': 'text/css',
  64                         'media': 'screen'
  65                 }).injectInside(document.getElementsByTagName('head')[0]).appendText($debug.css);
  66
  67                 $debug.main = new Element('div').injectInside(document.body).addClass('moobug').setStyles({
  68                         'top': 100+Window.getScrollTop()+'px',
  69                         'left': Window.getWidth()/2-150+'px'
  70                 });
  71
  72                 $debug.dragger = new Element('div').injectInside($debug.main).addClass('moobug_drag');
  73
  74                 $debug.closer = new Element('div').injectInside($debug.dragger).addClass('moobug_close');
  75
  76                 $debug.expander = new Element('div').injectInside($debug.dragger).addClass('moobug_expand');
  77
  78                 $debug.dragger.appendText('moobugger');
  79
  80                 var mainLeft = $debug.main.effect('left', {duration: 300, transition: Fx.backOut, wait: false});
  81                 var mainTop = $debug.main.effect('top', {duration: 300, transition: Fx.backOut, wait: false});
  82
  83                 if (window.ActiveXObject) var position = 'absolute';
  84                 else var position = 'fixed';
  85
  86                 $debug.main.setStyle('position', position);
  87
  88                 $debug.dragfx = new Drag.Move($debug.main, {
  89                         handle: $debug.dragger,
  90                         onComplete: function(){
  91                                 if (this.element.getTop() < 10) mainTop.custom(this.element.getTop(), 10);
  92                                 if (this.element.getLeft() < 10) mainLeft.custom(this.element.getLeft(), 10);
  93                         }
  94                 });
  95
  96                 $debug.mainOpacity = $debug.main.effect('opacity', {duration: 200, wait: false}).set(0);
  97
  98                 $debug.bugsContainer = new Element('div').injectInside($debug.main).addClass('moobug_bugscontainer');
  99
 100                 $debug.bugs = new Element('div').injectInside($debug.bugsContainer).addClass('moobug_bugs');
 101                 $debug.bugsHeight = $debug.bugs.effect('height', {duration: 1000, transition: Fx.quadIn});
 102                 $debug.effects = new Fx.Styles($debug.main, {duration: 1000, transition: Fx.quadIn});
 103
 104                 var setBugsScrollTop = function(evt){
 105                         var delta = 0;
 106                         if (evt.wheelDelta) {
 107                                 delta = evt.wheelDelta/120;
 108                                 if (window.opera) delta = -delta;
 109                         } else if (evt.detail) {
 110                                 delta = -evt.detail/3;
 111                         }
 112
 113                         $debug.bugs.scrollTop -= delta*2;
 114                 };
 115
 116                 if ($debug.bugs.addEventListener) $debug.bugs.addEventListener('DOMMouseScroll', setBugsScrollTop.bindAsEventListener($debug.bugs), false);
 117                 else $debug.bugs.onmousewheel = setBugsScrollTop.bindAsEventListener($debug.bugs);
 118
 119                 $debug.scroller = new Fx.Scroll($debug.bugs, {duration: 200, wait: false});
 120
 121                 $debug.console = new Element('div').addClass('moobug_console').injectInside($debug.main);
 122                 $debug.inputs = new Element('input').setProperties({
 123                         'type': 'text',
 124                         'autocomplete': 'off'
 125                 }).addClass('moobug_input').injectInside($debug.console);
 126
 127                 $debug.inputs.onkeydown = $debug.submit;
 128
 129                 if (Cookie.get('moobug_commands')) {
 130                         $debug.commands = Cookie.get('moobug_commands').split(':::::');
 131                 }
 132
 133                 $debug.currentCommand = $debug.commands.length-1;
 134
 135                 $debug.resizer = new Element('div').addClass('moobug_resize').injectInside($debug.main);
 136
 137                 $debug.mainOpacity.goTo(1);
 138
 139                 if (!window.ActiveXObject){
 140                         $debug.closer = $debug.closer.replaceWith(new Element('img').setProperty('src', 'data:image/png;base64,\
 141                                 iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAABGdBTUEAANbY1E9YMgAAABl0RVh0\
 142                                 U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAABhSURBVHjadE/BEcAgCEM3gL10WLoXK1Dz\
 143                                 wFJqveOMSS5EYuaxxnG7O8VkvgHQc6aZXSIyFtYgO4Rk0mqA3hB9EF7JSCKAkrgNse4vKVYTin86\
 144                                 1HevxGG15t/tDsU4bwEGAL1IOEpjYO9qAAAAAElFTkSuQmCC').addClass('moobug_close').setStyle('background', 'none'));
 145
 146                         $debug.expander = $debug.expander.replaceWith(new Element('img').setProperty('src', 'data:image/png;base64,\
 147                                 iVBORw0KGgoAAAANSUhEUgAAAAsAAAAJCAYAAADkZNYtAAAABGdBTUEAANbY1E9YMgAAABl0RVh0\
 148                                 U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAABjSURBVHjalJABCsAgCEXNG+i98rDtXl7B\
 149                                 6TDYCqR9kCzf70dgZjCLiLqXZW+xf88RUszcfRnw1cjzR1iAm6FF1AqqanPAFpNgceOWELAcwoIe\
 150                                 eR0YJDjMN1YGyTnAn3++BRgAo4lMLEPm7s4AAAAASUVORK5CYII=').addClass('moobug_expand').setStyle('background', 'none'));
 151                 } else {
 152                         $debug.main.setStyle('font-size', '12px');
 153                         $debug.bugs.setStyle('font-size', '11px');
 154                         $debug.inputs.setStyle('font-size', '11px');
 155                 }
 156
 157                 $debug.expanded = false;
 158
 159                 $debug.closer.onclick = function(){
 160                         $debug.destroy();
 161                 };
 162
 163                 $debug.expander.onclick = function(){
 164
 165                         if (!$debug.expanded){
 166                                 $debug.expanded = true;
 167                                 $debug.dragfx.pause();
 168                                 $debug.dragger.setStyle('cursor', 'default');
 169
 170                                 $debug.bugsHeight.custom($debug.bugs.offsetHeight, 100).chain(function(){
 171                                         $debug.scroller.custom($debug.bugs.scrollTop, $debug.bugs.scrollHeight+1);
 172                                         $debug.main.setStyle('width', '100%');
 173                                 });
 174                                 $debug.effects.custom({
 175                                         'top': [$debug.main.getTop(), Window.getHeight()-165],
 176                                         'left': [$debug.main.getLeft(), 0],
 177                                         'width': [$debug.main.offsetWidth, Window.getWidth()]
 178                                 });
 179                         } else {
 180                                 $debug.expanded = false;
 181                                 $debug.dragfx.resume();
 182                                 $debug.dragger.setStyle('cursor', 'move');
 183
 184                                 var h = $debug.bugs.scrollHeight;
 185                                 var j;
 186
 187                                 if (h > 300) j = 300;
 188                                 else j = h;
 189
 190                                 $debug.bugsHeight.custom(100, j);
 191
 192                                 $debug.effects.custom({
 193                                         'top': [Window.getHeight()-165, 100],
 194                                         'left': [0, Window.getWidth()/2-150],
 195                                         'width': [Window.getWidth(), 300]
 196                                 }).chain(function(){
 197                                         $debug.bugs.scrollTop = $debug.bugs.scrollHeight;
 198                                         $debug.bugs.setStyle('height', 'auto');
 199                                         $debug.checkHeight();
 200                                 });
 201                         }
 202                 };
 203
 204                 window.addEvent('unload', function(){
 205                         Cookie.set('moobug_commands', $debug.commands.join(':::::'));
 206                 });
 207         },
 208
 209         checkHeight: function(){
 210                 if ($debug.bugs.scrollHeight > 300) {
 211                         $debug.bugs.setStyle('height', '300px');
 212                 } else {
 213                         $debug.bugs.setStyle('height', 'auto');
 214                 }
 215         },
 216
 217         destroy: function(){
 218                 $debug.main.onmouseover = null;
 219                 $debug.main.onmouseout = null;
 220                 $debug.mainOpacity.goTo(0).chain(function(){
 221                         $debug.main.remove();
 222                         $debug.main = null;
 223                 });
 224         },
 225
 226         test: function(fn, args, bind){
 227                 if (!$debug.main) $debug.create();
 228                 var error = false;
 229                 try {
 230                         fn.apply(bind || fn, args);
 231                 } catch (catched){
 232                         $debug.write(catched);
 233                         error = true;
 234                 } finally {
 235                         if (!error) $debug.write('function ok');
 236                 }
 237         },
 238
 239         write: function(message){
 240                 if (!$debug.main) $debug.create();
 241                 if (!$debug.expanded) $debug.checkHeight();
 242                 var container = new Element('div').injectInside($debug.bugs).setStyles({
 243                         'height': '0',
 244                         'overflow': 'hidden'
 245                 });
 246                 var line = new Element('p').addClass('moobug_line').injectInside(container);
 247                 var deleter = new Element('div').addClass('moobug_del').injectInside(line);
 248
 249                 if (!window.ActiveXObject) {
 250                         deleter = deleter.replaceWith(new Element('img').setProperty('src', 'data:image/png;base64,\
 251                         iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAABGdBTUEAANbY1E9YMgAAABl0RVh0\
 252                         U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAABfSURBVHjajI7RDYAwCEQPVtI12mFxDXfC\
 253                         Qmut4IckhOvl9QC6obRWn6qYvfhkAk9VnHpgp9K03KZBL8PB8CaLjj9jMru0FT0hASY69J0kw/93\
 254                         EycgrxZejHlDAOslwAAzHzpAOYR3jQAAAABJRU5ErkJggg==').addClass('moobug_del').setStyle('background', 'none'));
 255                 }
 256
 257                 line.appendText(message);
 258
 259                 var containerEffects = container.effects({duration: 300, wait: false});
 260
 261                 containerEffects.custom({'opacity': [0,1], 'height': [0, container.scrollHeight]});
 262
 263                 $debug.scroller.custom($debug.bugs.scrollTop, $debug.bugs.scrollHeight+1);
 264
 265                 deleter.onclick = function(){
 266                         deleter.onclick = null;
 267                         containerEffects.custom({'opacity': [1,0], 'height': [container.scrollHeight, 0]}).chain(function(){
 268                                 container.remove();
 269                                 $debug.scroller.custom($debug.bugs.scrollTop, $debug.bugs.scrollHeight+1);
 270                         });
 271                 };
 272         },
 273
 274         parseFunction: function(fn){
 275                 var txt = fn.toString().match(/^function[\s]*\((.*)\)[\s]*$/);
 276         },
 277
 278         css: '\
 279         .moobug {\
 280                 width: 300px;\
 281                 background: #111;\
 282                 font: 10px "Monaco", "Andale Mono", "Courier New";\
 283                 color: #fff;\
 284         }\
 285         .moobug_close {\
 286                 margin: 3px 4px 0 2px;\
 287                 float: left;\
 288                 height: 9px;\
 289                 width: 9px;\
 290                 background: #111;\
 291                 cursor: pointer;\
 292         }\
 293         .moobug_expand {\
 294                 margin: 3px 10px 0 2px;\
 295                 float: left;\
 296                 height: 9px;\
 297                 width: 11px;\
 298                 background: #111;\
 299                 cursor: pointer;\
 300         }\
 301         .moobug_del {\
 302                 margin: 1px 10px 2px 2px;\
 303                 float: left;\
 304                 height: 9px;\
 305                 width: 9px;\
 306                 background: #ff3300;\
 307                 cursor: pointer;\
 308         }\
 309         .moobug_line {\
 310                 clear: both;\
 311                 padding: 3px 0;\
 312                 border-bottom: 1px solid #333;\
 313                 margin: 0;\
 314         }\
 315         .moobug_bugs {\
 316                 overflow: hidden;\
 317                 font-size: 9px;\
 318         }\
 319         .moobug_bugscontainer {\
 320                 padding: 5px 5px 10px;\
 321         }\
 322         .moobug_console {\
 323                 background: #fff;\
 324                 padding: 1px;\
 325                 background: #ddd;\
 326                 overflow: hidden;\
 327         }\
 328         .moobug_input {\
 329                 padding: 1px 2px;\
 330                 color: #111;\
 331                 font-size: 9px;\
 332                 width: 99%;\
 333                 border: 0;\
 334                 font: 10px "Monaco", "Andale Mono", "Courier New";\
 335                 background: none;\
 336         }\
 337         .moobug_drag {\
 338                 cursor: move;\
 339                 text-align: right;\
 340                 background: #ff3300;\
 341                 color: #000;\
 342                 padding: 5px;\
 343         }\
 344         .moobug_resize {\
 345                 background: #ff3300;\
 346                 height: 10px;\
 347         }'
 348
 349 };