WebKitTools/Drosera/debugger.js

   1 /*
   2  * Copyright (C) 2006 Apple Computer, Inc.  All rights reserved.
   3  * Copyright (C) 2006 David Smith (catfish.man@gmail.com)
   4  * Copyright (C) 2006 Vladimir Olexa (vladimir.olexa@gmail.com)
   5  *
   6  * Redistribution and use in source and binary forms, with or without
   7  * modification, are permitted provided that the following conditions
   8  * are met:
   9  *
  10  * 1.  Redistributions of source code must retain the above copyright
  11  *     notice, this list of conditions and the following disclaimer.
  12  * 2.  Redistributions in binary form must reproduce the above copyright
  13  *     notice, this list of conditions and the following disclaimer in the
  14  *     documentation and/or other materials provided with the distribution.
  15  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
  16  *     its contributors may be used to endorse or promote products derived
  17  *     from this software without specific prior written permission.
  18  *
  19  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
  20  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
  21  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  22  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
  23  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  24  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  25  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  26  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  27  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  28  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  29  */
  30
  31 var files = new Array();
  32 var filesLookup = new Object();
  33 var scripts = new Array();
  34 var currentFile = -1;
  35 var currentRow = null;
  36 var currentStack = null;
  37 var currentCallFrame = null;
  38 var lastStatement = null;
  39 var frameLineNumberStack = new Array();
  40 var previousFiles = new Array();
  41 var nextFiles = new Array();
  42 var isResizingColumn = false;
  43 var draggingBreakpoint = null;
  44 var steppingOut = false;
  45 var steppingOver = false;
  46 var steppingStack = 0;
  47 var pauseOnNextStatement = false;
  48 var pausedWhileLeavingFrame = false;
  49 var consoleWindow = null;
  50 var breakpointEditorHTML = DebuggerDocument.breakpointEditorHTML();
  51 var pendingAction = null;
  52
  53 ScriptCallFrame = function (functionName, index, row)
  54 {
  55     this.functionName = functionName;
  56     this.index = index;
  57     this.row = row;
  58     this.localVariableNames = null;
  59 }
  60
  61 ScriptCallFrame.prototype.valueForScopeVariable = function (name)
  62 {
  63     return DebuggerDocument.valueForScopeVariableNamed_inCallFrame_(name, this.index);
  64 }
  65
  66 ScriptCallFrame.prototype.loadVariables = function ()
  67 {
  68     if (!this.localVariableNames)
  69         this.localVariableNames = DebuggerDocument.localScopeVariableNamesForCallFrame_(this.index);
  70
  71     var variablesTable = document.getElementById("variablesTable");
  72     variablesTable.innerHTML = "";
  73
  74     for(var i = 0; i < this.localVariableNames.length; i++) {
  75         var tr = document.createElement("tr");
  76         var td = document.createElement("td");
  77         td.innerText = this.localVariableNames[i];
  78         td.className = "variable";
  79         tr.appendChild(td);
  80
  81         td = document.createElement("td");
  82         td.innerText = this.valueForScopeVariable(this.localVariableNames[i]);
  83         tr.appendChild(td);
  84         tr.addEventListener("click", selectVariable, true);
  85
  86         variablesTable.appendChild(tr);
  87     }
  88 }
  89
  90 function sleep(numberMillis)
  91 {
  92     var now = new Date();
  93     var exitTime = now.getTime() + numberMillis;
  94     while (true) {
  95         now = new Date();
  96         if (now.getTime() > exitTime)
  97             return;
  98     }
  99 }
 100
 101 function headerMouseDown(element)
 102 {
 103     if (!isResizingColumn)
 104         element.style.background = "url(glossyHeaderPressed.png) repeat-x";
 105 }
 106
 107 function headerMouseUp(element)
 108 {
 109     element.style.background = "url(glossyHeader.png) repeat-x";
 110 }
 111
 112 function headerMouseOut(element)
 113 {
 114     element.style.background = "url(glossyHeader.png) repeat-x";
 115 }
 116
 117 function filesDividerDragStart(event)
 118 {
 119     dividerDragStart(document.getElementById("filesDivider"), filesDividerDrag, filesDividerDragEnd, event, "col-resize");
 120 }
 121
 122 function filesDividerDragEnd(event)
 123 {
 124     dividerDragEnd(document.getElementById("filesDivider"), filesDividerDrag, filesDividerDragEnd, event);
 125 }
 126
 127 function filesDividerDrag(event)
 128 {
 129     var element = document.getElementById("filesDivider");
 130     if (document.getElementById("filesDivider").dragging == true) {
 131         var masterMain = document.getElementById("masterMain");
 132         var main = document.getElementById("main");
 133         var fileBrowser = document.getElementById("fileBrowser");
 134         var x = event.clientX + window.scrollX;
 135         var delta = element.dragLastX - x;
 136         var newWidth = constrainedWidthFromElement(fileBrowser.clientWidth - delta, masterMain, 0.1, 0.9);
 137         if ((fileBrowser.clientWidth - delta) == newWidth) // the width wasn't constrained
 138             element.dragLastX = x;
 139         fileBrowser.style.width = newWidth + "px";
 140         main.style.left = newWidth + "px";
 141         event.preventDefault();
 142     }
 143 }
 144
 145 function dividerDragStart(element, dividerDrag, dividerDragEnd, event, cursor)
 146 {
 147     element.dragging = true;
 148     element.dragLastY = event.clientY + window.scrollY;
 149     element.dragLastX = event.clientX + window.scrollX;
 150     document.addEventListener("mousemove", dividerDrag, true);
 151     document.addEventListener("mouseup", dividerDragEnd, true);
 152     document.body.style.cursor = cursor;
 153     event.preventDefault();
 154 }
 155
 156 function dividerDragEnd(element, dividerDrag, dividerDragEnd, event)
 157 {
 158     element.dragging = false;
 159     document.removeEventListener("mousemove", dividerDrag, true);
 160     document.removeEventListener("mouseup", dividerDragEnd, true);
 161     document.body.style.cursor = null;
 162 }
 163
 164 function dividerDrag(event)
 165 {
 166     var element = document.getElementById("divider");
 167     if (document.getElementById("divider").dragging == true) {
 168         var main = document.getElementById("main");
 169         var top = document.getElementById("info");
 170         var bottom = document.getElementById("body");
 171         var y = event.clientY + window.scrollY;
 172         var delta = element.dragLastY - y;
 173         var newHeight = constrainedHeightFromElement(top.clientHeight - delta, main);
 174         if ((top.clientHeight - delta) == newHeight) // the height wasn't constrained
 175             element.dragLastY = y;
 176         top.style.height = newHeight + "px";
 177         bottom.style.top = newHeight + "px";
 178         event.preventDefault();
 179     }
 180 }
 181
 182 function sourceDividerDragStart(event)
 183 {
 184     dividerDragStart(document.getElementById("divider"), dividerDrag, sourceDividerDragEnd, event, "row-resize");
 185 }
 186
 187 function sourceDividerDragEnd(event)
 188 {
 189     dividerDragEnd(document.getElementById("divider"), dividerDrag, sourceDividerDragEnd, event);
 190 }
 191
 192 function infoDividerDragStart(event)
 193 {
 194     dividerDragStart(document.getElementById("infoDivider"), infoDividerDrag, infoDividerDragEnd, event, "col-resize");
 195 }
 196
 197 function infoDividerDragEnd(event)
 198 {
 199     dividerDragEnd(document.getElementById("infoDivider"), infoDividerDrag, infoDividerDragEnd, event);
 200 }
 201
 202 function infoDividerDrag(event)
 203 {
 204     var element = document.getElementById("infoDivider");
 205     if (document.getElementById("infoDivider").dragging == true) {
 206         var main = document.getElementById("main");
 207         var leftPane = document.getElementById("leftPane");
 208         var rightPane = document.getElementById("rightPane");
 209         var x = event.clientX + window.scrollX;
 210         var delta = element.dragLastX - x;
 211         var newWidth = constrainedWidthFromElement(leftPane.clientWidth - delta, main);
 212         if ((leftPane.clientWidth - delta) == newWidth) // the width wasn't constrained
 213             element.dragLastX = x;
 214         leftPane.style.width = newWidth + "px";
 215         rightPane.style.left = newWidth + "px";
 216         event.preventDefault();
 217     }
 218 }
 219
 220 function columnResizerDragStart(event)
 221 {
 222     isResizingColumn = true;
 223     dividerDragStart(document.getElementById("variableColumnResizer"), columnResizerDrag, columnResizerDragEnd, event, "col-resize");
 224 }
 225
 226 function columnResizerDragEnd(event)
 227 {
 228     isResizingColumn = false;
 229     dividerDragEnd(document.getElementById("variableColumnResizer"), columnResizerDrag, columnResizerDragEnd, event);
 230 }
 231
 232 function columnResizerDrag(event)
 233 {
 234     var element = document.getElementById("variableColumnResizer");
 235     if (element.dragging == true) {
 236         var main = document.getElementById("rightPane");
 237         var variableColumn = document.getElementById("variable");
 238         var rules = document.defaultView.getMatchedCSSRules(variableColumn, "");
 239         for (var i = 0; i < rules.length; i++) {
 240             if (rules[i].selectorText == ".variable") {
 241                 var columnRule = rules[i];
 242                 break;
 243             }
 244         }
 245
 246         var x = event.clientX + window.scrollX;
 247         var delta = element.dragLastX - x;
 248         var newWidth = constrainedWidthFromElement(variableColumn.clientWidth - delta, main);
 249         if ((variableColumn.clientWidth - delta) == newWidth) // the width wasn't constrained
 250             element.dragLastX = x;
 251         columnRule.style.width = newWidth + "px";
 252         element.style.left = newWidth + "px";
 253         event.preventDefault();
 254     }
 255 }
 256
 257 function constrainedWidthFromElement(width, element, constrainLeft, constrainRight)
 258 {
 259     if (constrainLeft === undefined) constrainLeft = 0.25;
 260     if (constrainRight === undefined) constrainRight = 0.75;
 261
 262     if (width < element.clientWidth * constrainLeft)
 263         width = element.clientWidth * constrainLeft;
 264     else if (width > element.clientWidth * constrainRight)
 265         width = element.clientWidth * constrainRight;
 266     return width;
 267 }
 268
 269 function constrainedHeightFromElement(height, element)
 270 {
 271     if (height < element.clientHeight * 0.25)
 272         height = element.clientHeight * 0.25;
 273     else if (height > element.clientHeight * 0.75)
 274         height = element.clientHeight * 0.75;
 275     return height;
 276 }
 277
 278 function loaded()
 279 {
 280     document.getElementById("divider").addEventListener("mousedown", sourceDividerDragStart, false);
 281     document.getElementById("infoDivider").addEventListener("mousedown", infoDividerDragStart, false);
 282     document.getElementById("filesDivider").addEventListener("mousedown", filesDividerDragStart, false);
 283     document.getElementById("variableColumnResizer").addEventListener("mousedown", columnResizerDragStart, false);
 284 }
 285
 286 function isPaused()
 287 {
 288     return DebuggerDocument.isPaused();
 289 }
 290
 291 function pause()
 292 {
 293     DebuggerDocument.pause();
 294 }
 295
 296 function resume()
 297 {
 298     if (currentRow) {
 299         currentRow.removeStyleClass("current");
 300         currentRow = null;
 301     }
 302
 303     var stackframeTable = document.getElementById("stackframeTable");
 304     stackframeTable.innerHTML = ""; // clear the content
 305     var variablesTable = document.getElementById("variablesTable");
 306     variablesTable.innerHTML = ""; // clear the content
 307     currentStack = null;
 308     currentCallFrame = null;
 309
 310     pauseOnNextStatement = false;
 311     pausedWhileLeavingFrame = false;
 312     steppingOut = false;
 313     steppingOver = false;
 314     steppingStack = 0;
 315
 316     DebuggerDocument.resume();
 317 }
 318
 319 function stepInto()
 320 {
 321     pauseOnNextStatement = false;
 322     steppingOut = false;
 323     steppingOver = false;
 324     steppingStack = 0;
 325     DebuggerDocument.stepInto();
 326 }
 327
 328 function stepOver()
 329 {
 330     pauseOnNextStatement = false;
 331     steppingOver = true;
 332     steppingStack = 0;
 333     DebuggerDocument.resume();
 334 }
 335
 336 function stepOut()
 337 {
 338     pauseOnNextStatement = pausedWhileLeavingFrame;
 339     steppingOver = false;
 340     steppingStack = 0;
 341     steppingOut = true;
 342     DebuggerDocument.resume();
 343 }
 344
 345 Element.prototype.removeStyleClass = function(className)
 346 {
 347     if (this.hasStyleClass(className))
 348         this.className = this.className.replace(className, "");
 349 }
 350
 351 Element.prototype.addStyleClass = function(className)
 352 {
 353     if (!this.hasStyleClass(className))
 354         this.className += (this.className.length ? " " + className : className);
 355 }
 356
 357 Element.prototype.hasStyleClass = function(className)
 358 {
 359     return this.className.indexOf(className) != -1;
 360 }
 361
 362 Element.prototype.firstParentWithClass = function(className)
 363 {
 364     var node = this.parentNode;
 365     while(!node.hasStyleClass(className)) {
 366         if (node == document)
 367             return null;
 368         node = node.parentNode;
 369     }
 370     return node;
 371 }
 372
 373 Element.prototype.query = function(query)
 374 {
 375     return document.evaluate(query, this, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
 376 }
 377
 378 function breakpointAction(event)
 379 {
 380     var file = files[currentFile];
 381     var lineNum = event.target.title;
 382
 383     if (file.breakpoints[lineNum]) {
 384         if (!pendingAction)
 385             pendingAction = setTimeout(toggleBreakpointOnLine, DebuggerDocument.doubleClickMilliseconds(), lineNum);
 386     } else
 387         file.breakpoints[lineNum] = new BreakPoint(event.target.parentNode, file, lineNum);
 388 }
 389
 390 BreakPoint = function(row, file, line)
 391 {
 392     this.row = row;
 393     this.file = file;
 394     this.line = line;
 395     row.addStyleClass("breakpoint");
 396     row.removeStyleClass("disabled");
 397     this.value = "break";
 398     this.enabled = true;
 399     this.editor = null;
 400     this.type = 0;
 401     this.hitcount = 0;
 402 }
 403
 404 function toggleBreakpointEditorOnLine(lineNum)
 405 {
 406     if (pendingAction) {
 407         clearTimeout(pendingAction);
 408         pendingAction = null;
 409     }
 410     var file = files[currentFile];
 411     bp = file.breakpoints[lineNum];
 412     if (bp) {
 413         var editor = bp.editor;
 414         if (!editor) {
 415             var sourcesDocument = document.getElementById("sources").contentDocument;
 416             editor = sourcesDocument.createElement("div");
 417             editor.className = "editor";
 418             editor.id = lineNum;
 419             editor.innerHTML = breakpointEditorHTML;
 420
 421             bp.row.childNodes[1].appendChild(editor);
 422
 423             bp.editor = editor;
 424             file.breakpoints[lineNum] = bp;
 425
 426             editor.query('//input[@class="enable"]').checked = bp.enabled;
 427
 428             editor.query('//select[@class="editorDropdown"]').selectedIndex = bp.type;
 429             updateBreakpointTypeOnLine(lineNum);
 430
 431             editor.query('//span[@class="hitCounter"]').innerText = bp.hitcount;
 432
 433             setConditionFieldText(bp);
 434         } else {
 435             saveBreakpointOnLine(lineNum);
 436             bp.row.childNodes[1].removeChild(editor);
 437             bp.editor = null;
 438         }
 439     }
 440 }
 441
 442 function updateBreakpointTypeOnLine(line)
 443 {
 444     var breakpoint = files[currentFile].breakpoints[line];
 445     var editor = breakpoint.editor;
 446     var label = editor.query('//label[@class="conditionLabel"]');
 447     var dropdown = editor.query('//select[@class="editorDropdown"]');
 448     breakpoint.type = dropdown.selectedIndex;
 449     switch(breakpoint.type) {
 450         case 0:
 451             label.innerText = "Condition:";
 452             break;
 453         case 1:
 454             label.innerText = "Expression:";
 455             break;
 456     }
 457 }
 458
 459 function setConditionFieldText(breakpoint)
 460 {
 461     var conditionField = breakpoint.editor.query('//div[@class="condition"]');
 462
 463     var functionBody = breakpoint.value;
 464     if (!functionBody || functionBody == "break")
 465         functionBody = "";
 466     else {
 467         var startIndex = functionBody.indexOf("return((") + 8;
 468         var endIndex = null;
 469         if (startIndex != 7) //-1 + 8, yes, that's lame
 470             endIndex = functionBody.lastIndexOf("))");
 471         else {
 472             startIndex = functionBody.indexOf("{") + 1;
 473             endIndex = functionBody.lastIndexOf("}");
 474         }
 475         functionBody = functionBody.substring(startIndex, endIndex);
 476     }
 477     conditionField.innerText = functionBody;
 478     conditionField.addEventListener("keyup", new Function("saveBreakpointOnLine(" + breakpoint.line + ");"), false);
 479     conditionField.focus();
 480 }
 481
 482 function saveBreakpointOnLine(lineNum)
 483 {
 484     var file = files[currentFile];
 485     var breakpoint = file.breakpoints[lineNum];
 486     row = file.element.firstChild.childNodes.item(lineNum - 1);
 487     var editor = breakpoint.editor;
 488     var body = editor.query('//div[@class="condition"]').innerText;
 489     var actionIndex = editor.query('//select[@class="editorDropdown"]').selectedIndex;
 490     if (body.length == 0)
 491         breakpoint.value = "break";
 492     else if (body.indexOf("return") != -1)
 493         breakpoint.value = "__drosera_breakpoint_conditional_func = function() {" + body + "}; __drosera_breakpoint_conditional_func();";
 494     else
 495         breakpoint.value = "__drosera_breakpoint_conditional_func = function() { return((" + body + ")); }; __drosera_breakpoint_conditional_func();";
 496 }
 497
 498 function toggleBreakpointOnLine(lineNum)
 499 {
 500     var breakpoint = files[currentFile].breakpoints[lineNum];
 501     pendingAction = null;
 502     if (breakpoint.enabled)
 503         breakpoint.row.addStyleClass("disabled");
 504     else
 505         breakpoint.row.removeStyleClass("disabled");
 506
 507     var hack = breakpoint.row.offsetTop; // force a relayout if needed.
 508
 509     breakpoint.enabled = !breakpoint.enabled;
 510     var editor = breakpoint.editor;
 511     if (editor) {
 512         editor.query('//input[@class="enable"]').checked = breakpoint.enabled;
 513         setConditionFieldText(editor, lineNum);
 514     }
 515 }
 516
 517 function moveBreakPoint(event)
 518 {
 519     if (event.target.parentNode.hasStyleClass("breakpoint")) {
 520         draggingBreakpoint = event.target;
 521         draggingBreakpoint.started = false;
 522         draggingBreakpoint.dragLastY = event.clientY + window.scrollY;
 523         draggingBreakpoint.dragLastX = event.clientX + window.scrollX;
 524         var sourcesDocument = document.getElementById("sources").contentDocument;
 525         sourcesDocument.addEventListener("mousemove", breakpointDrag, true);
 526         sourcesDocument.addEventListener("mouseup", breakpointDragEnd, true);
 527         sourcesDocument.body.style.cursor = "default";
 528     }
 529 }
 530
 531 function breakpointDrag(event)
 532 {
 533     var sourcesDocument = document.getElementById("sources").contentDocument;
 534     if (!draggingBreakpoint) {
 535         sourcesDocument.removeEventListener("mousemove", breakpointDrag, true);
 536         sourcesDocument.removeEventListener("mouseup", breakpointDragEnd, true);
 537         sourcesDocument.body.style.cursor = null;
 538         return;
 539     }
 540
 541     var x = event.clientX + window.scrollX;
 542     var y = event.clientY + window.scrollY;
 543     var deltaX = draggingBreakpoint.dragLastX - x;
 544     var deltaY = draggingBreakpoint.dragLastY - y;
 545     if (draggingBreakpoint.started || deltaX > 4 || deltaY > 4 || deltaX < -4 || deltaY < -4) {
 546
 547         if (!draggingBreakpoint.started) {
 548             var lineNum = draggingBreakpoint.title;
 549             var file = files[currentFile];
 550             var breakpoint = file.breakpoints[lineNum];
 551             draggingBreakpoint.breakpoint = breakpoint;
 552             breakpoint.row.removeStyleClass("breakpoint");
 553             breakpoint.row.removeStyleClass("disabled");
 554
 555             var editor = breakpoint.editor;
 556             if (editor)
 557                 toggleBreakpointEditorOnLine(lineNum);
 558
 559             draggingBreakpoint.started = true;
 560
 561             file.breakpoints[lineNum] = null;
 562
 563             var dragImage = sourcesDocument.createElement("img");
 564             if (draggingBreakpoint.breakpoint.enabled)
 565                 dragImage.src = "breakPoint.tif";
 566             else
 567                 dragImage.src = "breakPointDisabled.tif";
 568
 569             dragImage.id = "breakpointDrag";
 570             dragImage.style.top = y - 8 + "px";
 571             dragImage.style.left = x - 12 + "px";
 572             sourcesDocument.body.appendChild(dragImage);
 573         } else {
 574             var dragImage = sourcesDocument.getElementById("breakpointDrag");
 575             if (!dragImage) {
 576                 sourcesDocument.removeEventListener("mousemove", breakpointDrag, true);
 577                 sourcesDocument.removeEventListener("mouseup", breakpointDragEnd, true);
 578                 sourcesDocument.body.style.cursor = null;
 579                 return;
 580             }
 581
 582             dragImage.style.top = y - 8 + "px";
 583             dragImage.style.left = x - 12 + "px";
 584             if (x > 40)
 585                 dragImage.style.visibility = "hidden";
 586             else
 587                 dragImage.style.visibility = null;
 588         }
 589
 590         draggingBreakpoint.dragLastX = x;
 591         draggingBreakpoint.dragLastY = y;
 592     }
 593 }
 594
 595 function breakpointDragEnd(event)
 596 {
 597     var sourcesDocument = document.getElementById("sources").contentDocument;
 598     sourcesDocument.removeEventListener("mousemove", breakpointDrag, true);
 599     sourcesDocument.removeEventListener("mouseup", breakpointDragEnd, true);
 600     sourcesDocument.body.style.cursor = null;
 601
 602     var dragImage = sourcesDocument.getElementById("breakpointDrag");
 603     if (!dragImage)
 604         return;
 605
 606     dragImage.parentNode.removeChild(dragImage);
 607
 608     var x = event.clientX + window.scrollX;
 609     if (x > 40 || !draggingBreakpoint)
 610         return;
 611
 612     var y = event.clientY + window.scrollY;
 613     var rowHeight = draggingBreakpoint.parentNode.offsetHeight;
 614     var row = Math.ceil(y / rowHeight);
 615     if (row <= 0)
 616         row = 1;
 617
 618     var file = files[currentFile];
 619     var table = file.element.firstChild;
 620     if (row > table.childNodes.length)
 621         return;
 622
 623     var tr = table.childNodes.item(row - 1);
 624     if (!tr)
 625         return;
 626
 627     var breakpoint = draggingBreakpoint.breakpoint;
 628     breakpoint.row = tr;
 629
 630     // leave the editor there if it exists... we'll want to update it to the new values
 631     breakpoint.editor = file.breakpoints[row].editor;
 632
 633     file.breakpoints[row] = breakpoint;
 634
 635     if (breakpoint.editor) {
 636         breakpoint.editor.id = row;
 637         updateBreakpointTypeOnLine(row);
 638         setConditionFieldText(breakpoint);
 639     }
 640
 641     if (!breakpoint.enabled)
 642         tr.addStyleClass("disabled");
 643
 644     tr.addStyleClass("breakpoint");
 645
 646     draggingBreakpoint = null;
 647 }
 648
 649 function totalOffsetTop(element, stop)
 650 {
 651     var currentTop = 0;
 652     while (element.offsetParent) {
 653         currentTop += element.offsetTop
 654         element = element.offsetParent;
 655         if (element == stop)
 656             break;
 657     }
 658     return currentTop;
 659 }
 660
 661 function switchFile()
 662 {
 663     var filesSelect = document.getElementById("files");
 664     fileClicked(filesSelect.options[filesSelect.selectedIndex].value, false);
 665     loadFile(filesSelect.options[filesSelect.selectedIndex].value, true);
 666 }
 667
 668 function syntaxHighlight(code)
 669 {
 670     var keywords = { 'abstract': 1, 'boolean': 1, 'break': 1, 'byte': 1, 'case': 1, 'catch': 1, 'char': 1, 'class': 1, 'const': 1, 'continue': 1, 'debugger': 1, 'default': 1, 'delete': 1, 'do': 1, 'double': 1, 'else': 1, 'enum': 1, 'export': 1, 'extends': 1, 'false': 1, 'final': 1, 'finally': 1, 'float': 1, 'for': 1, 'function': 1, 'goto': 1, 'if': 1, 'implements': 1, 'import': 1, 'in': 1, 'instanceof': 1, 'int': 1, 'interface': 1, 'long': 1, 'native': 1, 'new': 1, 'null': 1, 'package': 1, 'private': 1, 'protected': 1, 'public': 1, 'return': 1, 'short': 1, 'static': 1, 'super': 1, 'switch': 1, 'synchronized': 1, 'this': 1, 'throw': 1, 'throws': 1, 'transient': 1, 'true': 1, 'try': 1, 'typeof': 1, 'var': 1, 'void': 1, 'volatile': 1, 'while': 1, 'with': 1 };
 671
 672     function echoChar(c) {
 673         if (c == '<')
 674             result += '&lt;';
 675         else if (c == '>')
 676             result += '&gt;';
 677         else if (c == '&')
 678             result += '&amp;';
 679         else if (c == '\t')
 680             result += '    ';
 681         else
 682             result += c;
 683     }
 684
 685     function isDigit(number) {
 686         var string = "1234567890";
 687         if (string.indexOf(number) != -1)
 688             return true;
 689         return false;
 690     }
 691
 692     function isHex(hex) {
 693         var string = "1234567890abcdefABCDEF";
 694         if (string.indexOf(hex) != -1)
 695             return true;
 696         return false;
 697     }
 698
 699     function isLetter(letter) {
 700         var string = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
 701         if (string.indexOf(letter) != -1)
 702             return true;
 703         return false;
 704     }
 705
 706     var result = "";
 707     var cPrev = "";
 708     var c = "";
 709     var cNext = "";
 710     for (var i = 0; i < code.length; i++) {
 711         cPrev = c;
 712         c = code.charAt(i);
 713         cNext = code.charAt(i + 1);
 714
 715         if (c == "/" && cNext == "*") {
 716             result += "<span class=\"comment\">";
 717             echoChar(c);
 718             echoChar(cNext);
 719             for (i += 2; i < code.length; i++) {
 720                 c = code.charAt(i);
 721                 if (c == "\n")
 722                     result += "</span>";
 723                 echoChar(c);
 724                 if (c == "\n")
 725                     result += "<span class=\"comment\">";
 726                 if (cPrev == "*" && c == "/")
 727                     break;
 728                 cPrev = c;
 729             }
 730             result += "</span>";
 731             continue;
 732         } else if (c == "/" && cNext == "/") {
 733             result += "<span class=\"comment\">";
 734             echoChar(c);
 735             echoChar(cNext);
 736             for (i += 2; i < code.length; i++) {
 737                 c = code.charAt(i);
 738                 if (c == "\n")
 739                     break;
 740                 echoChar(c);
 741             }
 742             result += "</span>";
 743             echoChar(c);
 744             continue;
 745         } else if (c == "\"" || c == "'") {
 746             var instringtype = c;
 747             var stringstart = i;
 748             result += "<span class=\"string\">";
 749             echoChar(c);
 750             for (i += 1; i < code.length; i++) {
 751                 c = code.charAt(i);
 752                 if (stringstart < (i - 1) && cPrev == instringtype && code.charAt(i - 2) != "\\")
 753                     break;
 754                 echoChar(c);
 755                 cPrev = c;
 756             }
 757             result += "</span>";
 758             echoChar(c);
 759             continue;
 760         } else if (c == "0" && cNext == "x" && (i == 0 || (!isLetter(cPrev) && !isDigit(cPrev)))) {
 761             result += "<span class=\"number\">";
 762             echoChar(c);
 763             echoChar(cNext);
 764             for (i += 2; i < code.length; i++) {
 765                 c = code.charAt(i);
 766                 if (!isHex(c))
 767                     break;
 768                 echoChar(c);
 769             }
 770             result += "</span>";
 771             echoChar(c);
 772             continue;
 773         } else if ((isDigit(c) || ((c == "-" || c == ".") && isDigit(cNext))) && (i == 0 || (!isLetter(cPrev) && !isDigit(cPrev)))) {
 774             result += "<span class=\"number\">";
 775             echoChar(c);
 776             for (i += 1; i < code.length; i++) {
 777                 c = code.charAt(i);
 778                 if (!isDigit(c) && c != ".")
 779                     break;
 780                 echoChar(c);
 781             }
 782             result += "</span>";
 783             echoChar(c);
 784             continue;
 785         } else if (isLetter(c) && (i == 0 || !isLetter(cPrev))) {
 786             var keyword = c;
 787             var cj = "";
 788             for (var j = i + 1; j < i + 12 && j < code.length; j++) {
 789                 cj = code.charAt(j);
 790                 if (!isLetter(cj))
 791                     break;
 792                 keyword += cj;
 793             }
 794
 795             if (keywords[keyword]) {
 796                 result += "<span class=\"keyword\">" + keyword + "</span>";
 797                 i += keyword.length - 1;
 798                 continue;
 799             }
 800         }
 801
 802         echoChar(c);
 803     }
 804
 805     return result;
 806 }
 807
 808 function navFilePrevious(element)
 809 {
 810     if (element.disabled)
 811         return;
 812     var lastFile = previousFiles.pop();
 813     if (currentFile != -1)
 814         nextFiles.unshift(currentFile);
 815     loadFile(lastFile, false);
 816 }
 817
 818 function navFileNext(element)
 819 {
 820     if (element.disabled)
 821         return;
 822     var lastFile = nextFiles.shift();
 823     if (currentFile != -1)
 824         previousFiles.push(currentFile);
 825     loadFile(lastFile, false);
 826 }
 827
 828 function updateFunctionStack()
 829 {
 830     var stackframeTable = document.getElementById("stackframeTable");
 831     stackframeTable.innerHTML = ""; // clear the content
 832
 833     currentStack = new Array();
 834     var stack = DebuggerDocument.currentFunctionStack();
 835     for(var i = 0; i < stack.length; i++) {
 836         var tr = document.createElement("tr");
 837         var td = document.createElement("td");
 838         td.className = "stackNumber";
 839         td.innerText = i;
 840         tr.appendChild(td);
 841
 842         td = document.createElement("td");
 843         td.innerText = stack[i];
 844         tr.appendChild(td);
 845         tr.addEventListener("click", selectStackFrame, true);
 846
 847         stackframeTable.appendChild(tr);
 848
 849         var frame = new ScriptCallFrame(stack[i], i, tr);
 850         tr.callFrame = frame;
 851         currentStack.push(frame);
 852
 853         if (i == 0) {
 854             tr.addStyleClass("current");
 855             frame.loadVariables();
 856             currentCallFrame = frame;
 857         }
 858     }
 859 }
 860
 861 function selectStackFrame(event)
 862 {
 863     var stackframeTable = document.getElementById("stackframeTable");
 864     var rows = stackframeTable.childNodes;
 865     for (var i = 0; i < rows.length; i++)
 866         rows[i].removeStyleClass("current");
 867     this.addStyleClass("current");
 868     this.callFrame.loadVariables();
 869     currentCallFrame = this.callFrame;
 870
 871     if (frameLineNumberInfo = frameLineNumberStack[this.callFrame.index - 1])
 872         jumpToLine(frameLineNumberInfo[0], frameLineNumberInfo[1]);
 873     else if (this.callFrame.index == 0)
 874         jumpToLine(lastStatement[0], lastStatement[1]);
 875 }
 876
 877 function selectVariable(event)
 878 {
 879     var variablesTable = document.getElementById("variablesTable");
 880     var rows = variablesTable.childNodes;
 881     for (var i = 0; i < rows.length; i++)
 882         rows[i].removeStyleClass("current");
 883     this.addStyleClass("current");
 884 }
 885
 886 function loadFile(fileIndex, manageNavLists)
 887 {
 888     var file = files[fileIndex];
 889     if (!file)
 890         return;
 891
 892     if (currentFile != -1 && files[currentFile] && files[currentFile].element)
 893         files[currentFile].element.style.display = "none";
 894
 895     if (!file.loaded) {
 896         var sourcesDocument = document.getElementById("sources").contentDocument;
 897         var sourcesDiv = sourcesDocument.body;
 898         var sourceDiv = sourcesDocument.createElement("div");
 899         sourceDiv.id = "file" + fileIndex;
 900         sourcesDiv.appendChild(sourceDiv);
 901         file.element = sourceDiv;
 902
 903         var table = sourcesDocument.createElement("table");
 904         sourceDiv.appendChild(table);
 905
 906         var normalizedSource = file.source.replace(/\r\n|\r/, "\n"); // normalize line endings
 907         var lines = syntaxHighlight(normalizedSource).split("\n");
 908         for( var i = 0; i < lines.length; i++ ) {
 909             var tr = sourcesDocument.createElement("tr");
 910             var td = sourcesDocument.createElement("td");
 911             td.className = "gutter";
 912             td.title = (i + 1);
 913             td.addEventListener("click", breakpointAction, true);
 914             td.addEventListener("dblclick", function() { toggleBreakpointEditorOnLine(event.target.title); }, true);
 915             td.addEventListener("mousedown", moveBreakPoint, true);
 916             tr.appendChild(td);
 917
 918             td = sourcesDocument.createElement("td");
 919             td.className = "source";
 920             td.innerHTML = (lines[i].length ? lines[i] : "&nbsp;");
 921             tr.appendChild(td);
 922             table.appendChild(tr);
 923         }
 924
 925         file.loaded = true;
 926     }
 927
 928     file.element.style.display = null;
 929
 930     document.getElementById("filesPopupButtonContent").innerText = (file.url ? file.url : "(unknown script)");
 931
 932     var filesSelect = document.getElementById("files");
 933     for (var i = 0; i < filesSelect.childNodes.length; i++) {
 934         if (filesSelect.childNodes[i].value == fileIndex) {
 935             filesSelect.selectedIndex = i;
 936             break;
 937         }
 938     }
 939
 940
 941     if (manageNavLists) {
 942         nextFiles = new Array();
 943         if (currentFile != -1)
 944             previousFiles.push(currentFile);
 945     }
 946
 947     document.getElementById("navFileLeftButton").disabled = (previousFiles.length == 0);
 948     document.getElementById("navFileRightButton").disabled = (nextFiles.length == 0);
 949
 950     currentFile = fileIndex;
 951 }
 952
 953 function updateFileSource(source, url, force)
 954 {
 955     var fileIndex = filesLookup[url];
 956     if (!fileIndex || !source.length)
 957         return;
 958
 959     var file = files[fileIndex];
 960     if (force || file.source.length != source.length || file.source != source) {
 961         file.source = source;
 962         file.loaded = false;
 963
 964         if (file.element) {
 965             file.element.parentNode.removeChild(file.element);
 966             file.element = null;
 967         }
 968
 969         if (currentFile == fileIndex)
 970             loadFile(fileIndex, false);
 971     }
 972 }
 973
 974 /**
 975 * ParsedURL - this object chops up full URL into two parts:
 976  * 1) The domain: everything from http:// to the end of the domain name
 977  * 2) The relative path: everything after the domain
 978  *
 979  * @param string url URL to be processed
 980  */
 981 function ParsedURL(url)
 982 {
 983     // Since we're getting the URL from the browser, we're safe to assume the URL is already well formatted
 984     // and so there is no need for more sophisticated regular expression here
 985     var url_parts = ((url.substring(0,4)).toLowerCase() == "file") ? url.match(/(file:[\/]{2,3}(\w|\.|-|_|\/)+)\/(.*)/) : url.match(/(http[s]?:\/\/(www)?\.?(\w|\.|-)+\w(:\d{1,5})?)\/?(.*)/);
 986     // the domain here is considered the whole http://www.example.org:8000 or file:///Users/user/folder/file.htm string for display purposes
 987     this.domain = url_parts[1];
 988     // the relative path is everything following the domain
 989     this.relativePath = (url_parts[5] === undefined) ? "/" + url_parts[3] : "/" + url_parts[5];
 990 }
 991
 992 /**
 993 * SiteBrowser - modifies the file tree via DOM as new files are being open
 994  *
 995  */
 996 function SiteBrowser()
 997 {
 998     var fileBrowser = document.getElementById("filesBrowserSites");
 999
1000     this.addURL = function add(url, fileIndex)
1001     {
1002         var parsedURL = new ParsedURL(url);
1003         var divs = fileBrowser.getElementsByTagName("div");
1004
1005         if (divs.length == 0) {
1006             addNewDomain(parsedURL, fileIndex);
1007         } else {
1008             var isNew = true;
1009             for (var i = 0; i < divs.length; i++) {
1010                 if (divs[i].id == parsedURL.domain) {
1011                     var uls = divs[i].getElementsByTagName("ul");
1012                     var ul = (uls.length > 0) ? uls[0] : document.createElement("ul");
1013                     var li = document.createElement("li");
1014
1015                     li.id = fileIndex;
1016                     li.addEventListener("click", fileBrowserMouseEvents, false);
1017                     li.title = li.innerText = parsedURL.relativePath ? parsedURL.relativePath : "/";
1018                     ul.appendChild(li);
1019                     isNew = false;
1020                     break;
1021                 }
1022             }
1023             if (isNew) {
1024                 addNewDomain(parsedURL, fileIndex);
1025             }
1026         }
1027     }
1028
1029     this.selectInitialFile = function sf()
1030     {
1031         if (currentFile == -1)
1032             document.getElementById("1").className = "active";
1033     }
1034
1035     function addNewDomain(parsedURL, fileIndex)
1036     {
1037         var div = document.createElement("div");
1038         var ul = document.createElement("ul");
1039         var li = document.createElement("li");
1040
1041         div.id = div.innerText = div.title = parsedURL.domain;
1042         div.addEventListener("click", fileBrowserMouseEvents, false);
1043         // Maybe we can add some roll-overs here...
1044         //div.addEventListener("mouseover", fileBrowserMouseEvents, false);
1045         //div.addEventListener("mouseout", fileBrowserMouseEvents, false);
1046         li.id = fileIndex;
1047         li.addEventListener("click", fileBrowserMouseEvents, false);
1048         li.title = li.innerText = parsedURL.relativePath ? parsedURL.relativePath : "/";
1049         ul.appendChild(li);
1050         div.appendChild(ul);
1051         fileBrowser.appendChild(div);
1052     }
1053 }
1054
1055 function fileBrowserMouseEvents(event)
1056 {
1057     switch (event.type)
1058     {
1059         case "click":
1060             // If we clicked on a site, collapse/expand it, if on a file, display it. Since we're only capturing this
1061             // event from either a DIV or LI element, we don't have to worry about any ambiguity
1062             (event.target.nodeName.toUpperCase() == "DIV") ? toggleCollapseSite(event) : fileClicked(event.target.id);
1063             break;
1064     }
1065 }
1066
1067 function fileClicked(fileId, shouldLoadFile)
1068 {
1069     if (shouldLoadFile === undefined) shouldLoadFile = true;
1070
1071     document.getElementById(currentFile).className = "passive";
1072     document.getElementById(fileId).className = "active";
1073     if (shouldLoadFile)
1074         loadFile(fileId, false);
1075 }
1076
1077 function toggleCollapseSite(event)
1078 {
1079     var thisSite = document.getElementById(event.target.id);
1080     var siteFiles = thisSite.getElementsByTagName("ul");
1081
1082     if (siteFiles[0].style.display == "block" || !siteFiles[0].style.display) {
1083         siteFiles[0].style.display = "none";
1084         thisSite.className = "collapsed";
1085     } else {
1086         siteFiles[0].style.display = "block";
1087         thisSite.className = "expanded";
1088     }
1089 }
1090
1091 function didParseScript(source, fileSource, url, sourceId, baseLineNumber)
1092 {
1093     var fileIndex = filesLookup[url];
1094     var file = files[fileIndex];
1095     var firstLoad = false;
1096
1097     if (!fileIndex || !file) {
1098         fileIndex = files.length + 1;
1099         if (url.length)
1100             filesLookup[url] = fileIndex;
1101
1102         file = new Object();
1103         file.scripts = new Array();
1104         file.breakpoints = new Array();
1105         file.source = (fileSource.length ? fileSource : source);
1106         file.url = (url.length ? url : null);
1107         file.loaded = false;
1108
1109         files[fileIndex] = file;
1110
1111         var filesSelect = document.getElementById("files");
1112         var option = document.createElement("option");
1113         files[fileIndex].menuOption = option;
1114         option.value = fileIndex;
1115         option.text = (file.url ? file.url : "(unknown script)");
1116         filesSelect.appendChild(option);
1117
1118         var siteBrowser = new SiteBrowser();
1119         siteBrowser.addURL(file.url, fileIndex);
1120         siteBrowser.selectInitialFile();
1121
1122         firstLoad = true;
1123     }
1124
1125     var sourceObj = new Object();
1126     sourceObj.file = fileIndex;
1127     sourceObj.baseLineNumber = baseLineNumber;
1128     file.scripts.push(sourceId);
1129     scripts[sourceId] = sourceObj;
1130
1131     if (!firstLoad)
1132         updateFileSource((fileSource.length ? fileSource : source), url, false);
1133
1134     if (currentFile == -1)
1135         loadFile(fileIndex, false);
1136 }
1137
1138 function jumpToLine(sourceId, line)
1139 {
1140     var script = scripts[sourceId];
1141     if (line <= 0 || !script)
1142         return;
1143
1144     var file = files[script.file];
1145     if (!file)
1146         return;
1147
1148     if (currentFile != script.file)
1149         loadFile(script.file, true);
1150     if (currentRow)
1151         currentRow.removeStyleClass("current");
1152     if (!file.element)
1153         return;
1154     if (line > file.element.firstChild.childNodes.length)
1155         return;
1156
1157     currentRow = file.element.firstChild.childNodes.item(line - 1);
1158     if (!currentRow)
1159         return;
1160
1161     currentRow.addStyleClass("current");
1162
1163     var sourcesDiv = document.getElementById("sources");
1164     var sourcesDocument = document.getElementById("sources").contentDocument;
1165     var parent = sourcesDocument.body;
1166     var offset = totalOffsetTop(currentRow, parent);
1167     if (offset < (parent.scrollTop + 20) || offset > (parent.scrollTop + sourcesDiv.clientHeight - 20))
1168         parent.scrollTop = totalOffsetTop(currentRow, parent) - (sourcesDiv.clientHeight / 2) + 10;
1169 }
1170
1171 function willExecuteStatement(sourceId, line, fromLeavingFrame)
1172 {
1173     var script = scripts[sourceId];
1174     if (line <= 0 || !script)
1175         return;
1176
1177     var file = files[script.file];
1178     if (!file)
1179         return;
1180
1181     lastStatement = [sourceId, line];
1182
1183     var breakpoint = file.breakpoints[line];
1184
1185     var shouldBreak = false;
1186
1187     if (breakpoint && breakpoint.enabled) {
1188         switch(breakpoint.type) {
1189             case 0:
1190                 shouldBreak = (breakpoint.value == "break" || DebuggerDocument.evaluateScript_inCallFrame_(breakpoint.value, 0) == 1);
1191                 if (shouldBreak)
1192                     breakpoint.hitcount++;
1193                 break;
1194             case 1:
1195                 var message = "Hit breakpoint on line " + line;
1196                 if (breakpoint.value != "break")
1197                     message = DebuggerDocument.evaluateScript_inCallFrame_(breakpoint.value, 0);
1198                 if (consoleWindow)
1199                     consoleWindow.appendMessage("", message);
1200                 breakpoint.hitcount++;
1201                 break;
1202         }
1203         var editor = breakpoint.editor;
1204         var counter = null;
1205         if (editor)
1206             counter = breakpoint.editor.query('//span[@class="hitCounter"]');
1207         if (counter)
1208             counter.innerText = breakpoint.hitcount;
1209     }
1210
1211     if (pauseOnNextStatement || shouldBreak || (steppingOver && !steppingStack)) {
1212         pause();
1213         pauseOnNextStatement = false;
1214         pausedWhileLeavingFrame = fromLeavingFrame || false;
1215     }
1216
1217     if (isPaused()) {
1218         updateFunctionStack();
1219         jumpToLine(sourceId, line);
1220     }
1221 }
1222
1223 function didEnterCallFrame(sourceId, line)
1224 {
1225     if (steppingOver || steppingOut)
1226         steppingStack++;
1227
1228     if (lastStatement)
1229         frameLineNumberStack.unshift(lastStatement);
1230     willExecuteStatement(sourceId, line);
1231 }
1232
1233 function willLeaveCallFrame(sourceId, line)
1234 {
1235     if (line <= 0)
1236         resume();
1237     willExecuteStatement(sourceId, line, true);
1238     frameLineNumberStack.shift();
1239     if (!steppingStack)
1240         steppingOver = false;
1241     if (steppingOut && !steppingStack) {
1242         steppingOut = false;
1243         pauseOnNextStatement = true;
1244     }
1245     if ((steppingOver || steppingOut) && steppingStack >= 1)
1246         steppingStack--;
1247 }
1248
1249 function exceptionWasRaised(sourceId, line)
1250 {
1251     pause();
1252     updateFunctionStack();
1253     jumpToLine(sourceId, line);
1254 }
1255
1256 function showConsoleWindow()
1257 {
1258     if (!consoleWindow)
1259         consoleWindow = window.open("console.html", "console", "top=200, left=200, width=500, height=300, toolbar=yes, resizable=yes");
1260     else
1261         consoleWindow.focus();
1262 }