Home | History | Annotate | Download | only in front-end 
      1 /*
      2  * Copyright (C) 2009 Google Inc. All rights reserved.
      3  *
      4  * Redistribution and use in source and binary forms, with or without
      5  * modification, are permitted provided that the following conditions are
      6  * met:
      7  *
      8  *     * Redistributions of source code must retain the above copyright
      9  * notice, this list of conditions and the following disclaimer.
     10  *     * Redistributions in binary form must reproduce the above
     11  * copyright notice, this list of conditions and the following disclaimer
     12  * in the documentation and/or other materials provided with the
     13  * distribution.
     14  *     * Neither the name of Google Inc. nor the names of its
     15  * contributors may be used to endorse or promote products derived from
     16  * this software without specific prior written permission.
     17  *
     18  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
     19  * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
     20  * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
     21  * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
     22  * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
     23  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
     24  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
     25  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
     26  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
     27  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
     28  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     29  */
     30 
     31 WebInspector.SourceFrame = function(delegate, url)
     32 {
     33     WebInspector.TextViewerDelegate.call(this);
     34 
     35     this._delegate = delegate;
     36     this._url = url;
     37 
     38     this._textModel = new WebInspector.TextEditorModel();
     39     this._textModel.replaceTabsWithSpaces = true;
     40 
     41     this._textViewer = new WebInspector.TextViewer(this._textModel, WebInspector.platform, this._url, this);
     42     this._textViewer.element.addStyleClass("script-view");
     43     this._visible = false;
     44 
     45     this._currentSearchResultIndex = -1;
     46     this._searchResults = [];
     47 
     48     this._messages = [];
     49     this._rowMessages = {};
     50     this._messageBubbles = {};
     51 
     52     this._breakpoints = {};
     53 }
     54 
     55 WebInspector.SourceFrame.Events = {
     56     Loaded: "loaded"
     57 }
     58 
     59 WebInspector.SourceFrame.prototype = {
     60     get visible()
     61     {
     62         return this._textViewer.visible;
     63     },
     64 
     65     set visible(x)
     66     {
     67         this._textViewer.visible = x;
     68     },
     69 
     70     show: function(parentElement)
     71     {
     72         this._ensureContentLoaded();
     73 
     74         this._textViewer.show(parentElement);
     75         this._textViewer.resize();
     76 
     77         if (this.loaded) {
     78             if (this._scrollTop)
     79                 this._textViewer.scrollTop = this._scrollTop;
     80             if (this._scrollLeft)
     81                 this._textViewer.scrollLeft = this._scrollLeft;
     82         }
     83     },
     84 
     85     hide: function()
     86     {
     87         if (this.loaded) {
     88             this._scrollTop = this._textViewer.scrollTop;
     89             this._scrollLeft = this._textViewer.scrollLeft;
     90             this._textViewer.freeCachedElements();
     91         }
     92 
     93         this._textViewer.hide();
     94         this._hidePopup();
     95         this._clearLineHighlight();
     96     },
     97 
     98     detach: function()
     99     {
    100         this._textViewer.detach();
    101     },
    102 
    103     get element()
    104     {
    105         return this._textViewer.element;
    106     },
    107 
    108     get loaded()
    109     {
    110         return !!this._content;
    111     },
    112 
    113     hasContent: function()
    114     {
    115         return true;
    116     },
    117 
    118     _ensureContentLoaded: function()
    119     {
    120         if (!this._contentRequested) {
    121             this._contentRequested = true;
    122             this.requestContent(this._initializeTextViewer.bind(this));
    123         }
    124     },
    125 
    126     requestContent: function(callback)
    127     {
    128         this._delegate.requestContent(callback);
    129     },
    130 
    131     markDiff: function(diffData)
    132     {
    133         if (this._diffLines && this.loaded)
    134             this._removeDiffDecorations();
    135 
    136         this._diffLines = diffData;
    137         if (this.loaded)
    138             this._updateDiffDecorations();
    139     },
    140 
    141     addMessage: function(msg)
    142     {
    143         this._messages.push(msg);
    144         if (this.loaded)
    145             this.addMessageToSource(msg.line - 1, msg);
    146     },
    147 
    148     clearMessages: function()
    149     {
    150         for (var line in this._messageBubbles) {
    151             var bubble = this._messageBubbles[line];
    152             bubble.parentNode.removeChild(bubble);
    153         }
    154 
    155         this._messages = [];
    156         this._rowMessages = {};
    157         this._messageBubbles = {};
    158 
    159         this._textViewer.resize();
    160     },
    161 
    162     get textModel()
    163     {
    164         return this._textModel;
    165     },
    166 
    167     get scrollTop()
    168     {
    169         return this.loaded ? this._textViewer.scrollTop : this._scrollTop;
    170     },
    171 
    172     set scrollTop(scrollTop)
    173     {
    174         this._scrollTop = scrollTop;
    175         if (this.loaded)
    176             this._textViewer.scrollTop = scrollTop;
    177     },
    178 
    179     highlightLine: function(line)
    180     {
    181         if (this.loaded)
    182             this._textViewer.highlightLine(line);
    183         else
    184             this._lineToHighlight = line;
    185     },
    186 
    187     _clearLineHighlight: function()
    188     {
    189         if (this.loaded)
    190             this._textViewer.clearLineHighlight();
    191         else
    192             delete this._lineToHighlight;
    193     },
    194 
    195     _saveViewerState: function()
    196     {
    197         this._viewerState = {
    198             textModelContent: this._textModel.text,
    199             executionLineNumber: this._executionLineNumber,
    200             messages: this._messages,
    201             diffLines: this._diffLines,
    202             breakpoints: this._breakpoints
    203         };
    204     },
    205 
    206     _restoreViewerState: function()
    207     {
    208         if (!this._viewerState)
    209             return;
    210         this._textModel.setText(null, this._viewerState.textModelContent);
    211 
    212         this._messages = this._viewerState.messages;
    213         this._diffLines = this._viewerState.diffLines;
    214         this._setTextViewerDecorations();
    215 
    216         if (typeof this._viewerState.executionLineNumber === "number") {
    217             this.clearExecutionLine();
    218             this.setExecutionLine(this._viewerState.executionLineNumber);
    219         }
    220 
    221         var oldBreakpoints = this._breakpoints;
    222         this._breakpoints = {};
    223         for (var lineNumber in oldBreakpoints)
    224             this.removeBreakpoint(Number(lineNumber));
    225 
    226         var newBreakpoints = this._viewerState.breakpoints;
    227         for (var lineNumber in newBreakpoints) {
    228             lineNumber = Number(lineNumber);
    229             var breakpoint = newBreakpoints[lineNumber];
    230             this.addBreakpoint(lineNumber, breakpoint.resolved, breakpoint.conditional, breakpoint.enabled);
    231         }
    232 
    233         delete this._viewerState;
    234     },
    235 
    236     isContentEditable: function()
    237     {
    238         return this._delegate.canEditScriptSource();
    239     },
    240 
    241     readOnlyStateChanged: function(readOnly)
    242     {
    243         WebInspector.markBeingEdited(this._textViewer.element, !readOnly);
    244     },
    245 
    246     startEditing: function()
    247     {
    248         if (!this._viewerState) {
    249             this._saveViewerState();
    250             this._delegate.setScriptSourceIsBeingEdited(true);
    251         }
    252 
    253         WebInspector.searchController.cancelSearch();
    254         this.clearMessages();
    255     },
    256 
    257     endEditing: function(oldRange, newRange)
    258     {
    259         if (!oldRange || !newRange)
    260             return;
    261 
    262         // Adjust execution line number.
    263         if (typeof this._executionLineNumber === "number") {
    264             var newExecutionLineNumber = this._lineNumberAfterEditing(this._executionLineNumber, oldRange, newRange);
    265             this.clearExecutionLine();
    266             this.setExecutionLine(newExecutionLineNumber, true);
    267         }
    268 
    269         // Adjust breakpoints.
    270         var oldBreakpoints = this._breakpoints;
    271         this._breakpoints = {};
    272         for (var lineNumber in oldBreakpoints) {
    273             lineNumber = Number(lineNumber);
    274             var breakpoint = oldBreakpoints[lineNumber];
    275             var newLineNumber = this._lineNumberAfterEditing(lineNumber, oldRange, newRange);
    276             if (lineNumber === newLineNumber)
    277                 this._breakpoints[lineNumber] = breakpoint;
    278             else {
    279                 this.removeBreakpoint(lineNumber);
    280                 this.addBreakpoint(newLineNumber, breakpoint.resolved, breakpoint.conditional, breakpoint.enabled);
    281             }
    282         }
    283     },
    284 
    285     _lineNumberAfterEditing: function(lineNumber, oldRange, newRange)
    286     {
    287         var shiftOffset = lineNumber <= oldRange.startLine ? 0 : newRange.linesCount - oldRange.linesCount;
    288 
    289         // Special case of editing the line itself. We should decide whether the line number should move below or not.
    290         if (lineNumber === oldRange.startLine) {
    291             var whiteSpacesRegex = /^[\s\xA0]*$/;
    292             for (var i = 0; lineNumber + i <= newRange.endLine; ++i) {
    293                 if (!whiteSpacesRegex.test(this._textModel.line(lineNumber + i))) {
    294                     shiftOffset = i;
    295                     break;
    296                 }
    297             }
    298         }
    299 
    300         var newLineNumber = Math.max(0, lineNumber + shiftOffset);
    301         if (oldRange.startLine < lineNumber && lineNumber < oldRange.endLine)
    302             newLineNumber = oldRange.startLine;
    303         return newLineNumber;
    304     },
    305 
    306     _initializeTextViewer: function(mimeType, content)
    307     {
    308         this._textViewer.mimeType = mimeType;
    309 
    310         this._content = content;
    311         this._textModel.setText(null, content);
    312 
    313         var element = this._textViewer.element;
    314         if (this._delegate.debuggingSupported()) {
    315             element.addEventListener("contextmenu", this._contextMenu.bind(this), true);
    316             element.addEventListener("mousedown", this._mouseDown.bind(this), true);
    317             element.addEventListener("mousemove", this._mouseMove.bind(this), true);
    318             element.addEventListener("scroll", this._scroll.bind(this), true);
    319         }
    320 
    321         this._textViewer.beginUpdates();
    322 
    323         this._setTextViewerDecorations();
    324 
    325         if (typeof this._executionLineNumber === "number")
    326             this.setExecutionLine(this._executionLineNumber);
    327 
    328         if (this._lineToHighlight) {
    329             this.highlightLine(this._lineToHighlight);
    330             delete this._lineToHighlight;
    331         }
    332 
    333         if (this._delayedFindSearchMatches) {
    334             this._delayedFindSearchMatches();
    335             delete this._delayedFindSearchMatches;
    336         }
    337 
    338         this.dispatchEventToListeners(WebInspector.SourceFrame.Events.Loaded);
    339 
    340         this._textViewer.endUpdates();
    341 
    342         if (this._parentElement)
    343             this.show(this._parentElement)
    344     },
    345 
    346     _setTextViewerDecorations: function()
    347     {
    348         this._rowMessages = {};
    349         this._messageBubbles = {};
    350 
    351         this._textViewer.beginUpdates();
    352 
    353         this._addExistingMessagesToSource();
    354         this._updateDiffDecorations();
    355 
    356         this._textViewer.resize();
    357 
    358         this._textViewer.endUpdates();
    359     },
    360 
    361     performSearch: function(query, callback)
    362     {
    363         // Call searchCanceled since it will reset everything we need before doing a new search.
    364         this.searchCanceled();
    365 
    366         function doFindSearchMatches(query)
    367         {
    368             this._currentSearchResultIndex = -1;
    369             this._searchResults = [];
    370 
    371             // First do case-insensitive search.
    372             var regexObject = createSearchRegex(query);
    373             this._collectRegexMatches(regexObject, this._searchResults);
    374 
    375             // Then try regex search if user knows the / / hint.
    376             try {
    377                 if (/^\/.*\/$/.test(query))
    378                     this._collectRegexMatches(new RegExp(query.substring(1, query.length - 1)), this._searchResults);
    379             } catch (e) {
    380                 // Silent catch.
    381             }
    382 
    383             callback(this, this._searchResults.length);
    384         }
    385 
    386         if (this.loaded)
    387             doFindSearchMatches.call(this, query);
    388         else
    389             this._delayedFindSearchMatches = doFindSearchMatches.bind(this, query);
    390 
    391         this._ensureContentLoaded();
    392     },
    393 
    394     searchCanceled: function()
    395     {
    396         delete this._delayedFindSearchMatches;
    397         if (!this.loaded)
    398             return;
    399 
    400         this._currentSearchResultIndex = -1;
    401         this._searchResults = [];
    402         this._textViewer.markAndRevealRange(null);
    403     },
    404 
    405     jumpToFirstSearchResult: function()
    406     {
    407         this._jumpToSearchResult(0);
    408     },
    409 
    410     jumpToLastSearchResult: function()
    411     {
    412         this._jumpToSearchResult(this._searchResults.length - 1);
    413     },
    414 
    415     jumpToNextSearchResult: function()
    416     {
    417         this._jumpToSearchResult(this._currentSearchResultIndex + 1);
    418     },
    419 
    420     jumpToPreviousSearchResult: function()
    421     {
    422         this._jumpToSearchResult(this._currentSearchResultIndex - 1);
    423     },
    424 
    425     showingFirstSearchResult: function()
    426     {
    427         return this._searchResults.length &&  this._currentSearchResultIndex === 0;
    428     },
    429 
    430     showingLastSearchResult: function()
    431     {
    432         return this._searchResults.length && this._currentSearchResultIndex === (this._searchResults.length - 1);
    433     },
    434 
    435     _jumpToSearchResult: function(index)
    436     {
    437         if (!this.loaded || !this._searchResults.length)
    438             return;
    439         this._currentSearchResultIndex = (index + this._searchResults.length) % this._searchResults.length;
    440         this._textViewer.markAndRevealRange(this._searchResults[this._currentSearchResultIndex]);
    441     },
    442 
    443     _collectRegexMatches: function(regexObject, ranges)
    444     {
    445         for (var i = 0; i < this._textModel.linesCount; ++i) {
    446             var line = this._textModel.line(i);
    447             var offset = 0;
    448             do {
    449                 var match = regexObject.exec(line);
    450                 if (match) {
    451                     ranges.push(new WebInspector.TextRange(i, offset + match.index, i, offset + match.index + match[0].length));
    452                     offset += match.index + 1;
    453                     line = line.substring(match.index + 1);
    454                 }
    455             } while (match)
    456         }
    457         return ranges;
    458     },
    459 
    460     _incrementMessageRepeatCount: function(msg, repeatDelta)
    461     {
    462         if (!msg._resourceMessageLineElement)
    463             return;
    464 
    465         if (!msg._resourceMessageRepeatCountElement) {
    466             var repeatedElement = document.createElement("span");
    467             msg._resourceMessageLineElement.appendChild(repeatedElement);
    468             msg._resourceMessageRepeatCountElement = repeatedElement;
    469         }
    470 
    471         msg.repeatCount += repeatDelta;
    472         msg._resourceMessageRepeatCountElement.textContent = WebInspector.UIString(" (repeated %d times)", msg.repeatCount);
    473     },
    474 
    475     setExecutionLine: function(lineNumber, skipRevealLine)
    476     {
    477         this._executionLineNumber = lineNumber;
    478         if (this.loaded) {
    479             this._textViewer.addDecoration(lineNumber, "webkit-execution-line");
    480             if (!skipRevealLine)
    481                 this._textViewer.revealLine(lineNumber);
    482         }
    483     },
    484 
    485     clearExecutionLine: function()
    486     {
    487         if (this.loaded)
    488             this._textViewer.removeDecoration(this._executionLineNumber, "webkit-execution-line");
    489         delete this._executionLineNumber;
    490     },
    491 
    492     _updateDiffDecorations: function()
    493     {
    494         if (!this._diffLines)
    495             return;
    496 
    497         function addDecorations(textViewer, lines, className)
    498         {
    499             for (var i = 0; i < lines.length; ++i)
    500                 textViewer.addDecoration(lines[i], className);
    501         }
    502         addDecorations(this._textViewer, this._diffLines.added, "webkit-added-line");
    503         addDecorations(this._textViewer, this._diffLines.removed, "webkit-removed-line");
    504         addDecorations(this._textViewer, this._diffLines.changed, "webkit-changed-line");
    505     },
    506 
    507     _removeDiffDecorations: function()
    508     {
    509         function removeDecorations(textViewer, lines, className)
    510         {
    511             for (var i = 0; i < lines.length; ++i)
    512                 textViewer.removeDecoration(lines[i], className);
    513         }
    514         removeDecorations(this._textViewer, this._diffLines.added, "webkit-added-line");
    515         removeDecorations(this._textViewer, this._diffLines.removed, "webkit-removed-line");
    516         removeDecorations(this._textViewer, this._diffLines.changed, "webkit-changed-line");
    517     },
    518 
    519     _addExistingMessagesToSource: function()
    520     {
    521         var length = this._messages.length;
    522         for (var i = 0; i < length; ++i)
    523             this.addMessageToSource(this._messages[i].line - 1, this._messages[i]);
    524     },
    525 
    526     addMessageToSource: function(lineNumber, msg)
    527     {
    528         if (lineNumber >= this._textModel.linesCount)
    529             lineNumber = this._textModel.linesCount - 1;
    530         if (lineNumber < 0)
    531             lineNumber = 0;
    532 
    533         var messageBubbleElement = this._messageBubbles[lineNumber];
    534         if (!messageBubbleElement || messageBubbleElement.nodeType !== Node.ELEMENT_NODE || !messageBubbleElement.hasStyleClass("webkit-html-message-bubble")) {
    535             messageBubbleElement = document.createElement("div");
    536             messageBubbleElement.className = "webkit-html-message-bubble";
    537             this._messageBubbles[lineNumber] = messageBubbleElement;
    538             this._textViewer.addDecoration(lineNumber, messageBubbleElement);
    539         }
    540 
    541         var rowMessages = this._rowMessages[lineNumber];
    542         if (!rowMessages) {
    543             rowMessages = [];
    544             this._rowMessages[lineNumber] = rowMessages;
    545         }
    546 
    547         for (var i = 0; i < rowMessages.length; ++i) {
    548             if (rowMessages[i].isEqual(msg)) {
    549                 this._incrementMessageRepeatCount(rowMessages[i], msg.repeatDelta);
    550                 return;
    551             }
    552         }
    553 
    554         rowMessages.push(msg);
    555 
    556         var imageURL;
    557         switch (msg.level) {
    558             case WebInspector.ConsoleMessage.MessageLevel.Error:
    559                 messageBubbleElement.addStyleClass("webkit-html-error-message");
    560                 imageURL = "Images/errorIcon.png";
    561                 break;
    562             case WebInspector.ConsoleMessage.MessageLevel.Warning:
    563                 messageBubbleElement.addStyleClass("webkit-html-warning-message");
    564                 imageURL = "Images/warningIcon.png";
    565                 break;
    566         }
    567 
    568         var messageLineElement = document.createElement("div");
    569         messageLineElement.className = "webkit-html-message-line";
    570         messageBubbleElement.appendChild(messageLineElement);
    571 
    572         // Create the image element in the Inspector's document so we can use relative image URLs.
    573         var image = document.createElement("img");
    574         image.src = imageURL;
    575         image.className = "webkit-html-message-icon";
    576         messageLineElement.appendChild(image);
    577         messageLineElement.appendChild(document.createTextNode(msg.message));
    578 
    579         msg._resourceMessageLineElement = messageLineElement;
    580     },
    581 
    582     addBreakpoint: function(lineNumber, resolved, conditional, enabled)
    583     {
    584         this._breakpoints[lineNumber] = {
    585             resolved: resolved,
    586             conditional: conditional,
    587             enabled: enabled
    588         };
    589         this._textViewer.beginUpdates();
    590         this._textViewer.addDecoration(lineNumber, "webkit-breakpoint");
    591         if (!enabled)
    592             this._textViewer.addDecoration(lineNumber, "webkit-breakpoint-disabled");
    593         if (conditional)
    594             this._textViewer.addDecoration(lineNumber, "webkit-breakpoint-conditional");
    595         this._textViewer.endUpdates();
    596     },
    597 
    598     removeBreakpoint: function(lineNumber)
    599     {
    600         delete this._breakpoints[lineNumber];
    601         this._textViewer.beginUpdates();
    602         this._textViewer.removeDecoration(lineNumber, "webkit-breakpoint");
    603         this._textViewer.removeDecoration(lineNumber, "webkit-breakpoint-disabled");
    604         this._textViewer.removeDecoration(lineNumber, "webkit-breakpoint-conditional");
    605         this._textViewer.endUpdates();
    606     },
    607 
    608     _contextMenu: function(event)
    609     {
    610         var contextMenu = new WebInspector.ContextMenu();
    611         var target = event.target.enclosingNodeOrSelfWithClass("webkit-line-number");
    612         if (target)
    613             this._populateLineGutterContextMenu(target.lineNumber, contextMenu);
    614         else
    615             this._populateTextAreaContextMenu(contextMenu);
    616         contextMenu.show(event);
    617     },
    618 
    619     _populateLineGutterContextMenu: function(lineNumber, contextMenu)
    620     {
    621         contextMenu.appendItem(WebInspector.UIString("Continue to Here"), this._delegate.continueToLine.bind(this._delegate, lineNumber));
    622 
    623         var breakpoint = this._delegate.findBreakpoint(lineNumber);
    624         if (!breakpoint) {
    625             // This row doesn't have a breakpoint: We want to show Add Breakpoint and Add and Edit Breakpoint.
    626             contextMenu.appendItem(WebInspector.UIString("Add Breakpoint"), this._delegate.setBreakpoint.bind(this._delegate, lineNumber, "", true));
    627 
    628             function addConditionalBreakpoint()
    629             {
    630                 this.addBreakpoint(lineNumber, true, true, true);
    631                 function didEditBreakpointCondition(committed, condition)
    632                 {
    633                     this.removeBreakpoint(lineNumber);
    634                     if (committed)
    635                         this._delegate.setBreakpoint(lineNumber, condition, true);
    636                 }
    637                 this._editBreakpointCondition(lineNumber, "", didEditBreakpointCondition.bind(this));
    638             }
    639             contextMenu.appendItem(WebInspector.UIString("Add Conditional Breakpoint"), addConditionalBreakpoint.bind(this));
    640         } else {
    641             // This row has a breakpoint, we want to show edit and remove breakpoint, and either disable or enable.
    642             contextMenu.appendItem(WebInspector.UIString("Remove Breakpoint"), this._delegate.removeBreakpoint.bind(this._delegate, lineNumber));
    643             function editBreakpointCondition()
    644             {
    645                 function didEditBreakpointCondition(committed, condition)
    646                 {
    647                     if (committed)
    648                         this._delegate.updateBreakpoint(lineNumber, condition, breakpoint.enabled);
    649                 }
    650                 this._editBreakpointCondition(lineNumber, breakpoint.condition, didEditBreakpointCondition.bind(this));
    651             }
    652             contextMenu.appendItem(WebInspector.UIString("Edit Breakpoint"), editBreakpointCondition.bind(this));
    653             function setBreakpointEnabled(enabled)
    654             {
    655                 this._delegate.updateBreakpoint(lineNumber, breakpoint.condition, enabled);
    656             }
    657             if (breakpoint.enabled)
    658                 contextMenu.appendItem(WebInspector.UIString("Disable Breakpoint"), setBreakpointEnabled.bind(this, false));
    659             else
    660                 contextMenu.appendItem(WebInspector.UIString("Enable Breakpoint"), setBreakpointEnabled.bind(this, true));
    661         }
    662     },
    663 
    664     _populateTextAreaContextMenu: function(contextMenu)
    665     {
    666         contextMenu.appendCheckboxItem(WebInspector.UIString("De-obfuscate Source"), this._delegate.toggleFormatSourceFiles.bind(this._delegate), this._delegate.formatSourceFilesToggled());
    667     },
    668 
    669     _scroll: function(event)
    670     {
    671         this._hidePopup();
    672     },
    673 
    674     _mouseDown: function(event)
    675     {
    676         this._resetHoverTimer();
    677         this._hidePopup();
    678         if (event.button != 0 || event.altKey || event.ctrlKey || event.metaKey)
    679             return;
    680         var target = event.target.enclosingNodeOrSelfWithClass("webkit-line-number");
    681         if (!target)
    682             return;
    683         var lineNumber = target.lineNumber;
    684 
    685         var breakpoint = this._delegate.findBreakpoint(lineNumber);
    686         if (breakpoint) {
    687             if (event.shiftKey)
    688                 this._delegate.updateBreakpoint(lineNumber, breakpoint.condition, !breakpoint.enabled);
    689             else
    690                 this._delegate.removeBreakpoint(lineNumber);
    691         } else
    692             this._delegate.setBreakpoint(lineNumber, "", true);
    693         event.preventDefault();
    694     },
    695 
    696     _mouseMove: function(event)
    697     {
    698         // Pretend that nothing has happened.
    699         if (this._hoverElement === event.target || event.target.hasStyleClass("source-frame-eval-expression"))
    700             return;
    701 
    702         this._resetHoverTimer();
    703         // User has 500ms to reach the popup.
    704         if (this._popup) {
    705             var self = this;
    706             function doHide()
    707             {
    708                 self._hidePopup();
    709                 delete self._hidePopupTimer;
    710             }
    711             if (!("_hidePopupTimer" in this))
    712                 this._hidePopupTimer = setTimeout(doHide, 500);
    713         }
    714 
    715         this._hoverElement = event.target;
    716 
    717         // Now that cleanup routines are set up above, leave this in case we are not on a break.
    718         if (!this._delegate.debuggerPaused())
    719             return;
    720 
    721         // We are interested in identifiers and "this" keyword.
    722         if (this._hoverElement.hasStyleClass("webkit-javascript-keyword")) {
    723             if (this._hoverElement.textContent !== "this")
    724                 return;
    725         } else if (!this._hoverElement.hasStyleClass("webkit-javascript-ident"))
    726             return;
    727 
    728         const toolTipDelay = this._popup ? 600 : 1000;
    729         this._hoverTimer = setTimeout(this._mouseHover.bind(this, this._hoverElement), toolTipDelay);
    730     },
    731 
    732     _resetHoverTimer: function()
    733     {
    734         if (this._hoverTimer) {
    735             clearTimeout(this._hoverTimer);
    736             delete this._hoverTimer;
    737         }
    738     },
    739 
    740     _hidePopup: function()
    741     {
    742         if (!this._popup)
    743             return;
    744 
    745         // Replace higlight element with its contents inplace.
    746         var parentElement = this._popup.highlightElement.parentElement;
    747         var child = this._popup.highlightElement.firstChild;
    748         while (child) {
    749             var nextSibling = child.nextSibling;
    750             parentElement.insertBefore(child, this._popup.highlightElement);
    751             child = nextSibling;
    752         }
    753         parentElement.removeChild(this._popup.highlightElement);
    754 
    755         this._popup.hide();
    756         delete this._popup;
    757         this._delegate.releaseEvaluationResult();
    758     },
    759 
    760     _mouseHover: function(element)
    761     {
    762         delete this._hoverTimer;
    763 
    764         var lineRow = element.enclosingNodeOrSelfWithClass("webkit-line-content");
    765         if (!lineRow)
    766             return;
    767 
    768         // Collect tokens belonging to evaluated exression.
    769         var tokens = [ element ];
    770         var token = element.previousSibling;
    771         while (token && (token.className === "webkit-javascript-ident" || token.className === "webkit-javascript-keyword" || token.textContent.trim() === ".")) {
    772             tokens.push(token);
    773             token = token.previousSibling;
    774         }
    775         tokens.reverse();
    776 
    777         // Wrap them with highlight element.
    778         var parentElement = element.parentElement;
    779         var nextElement = element.nextSibling;
    780         var container = document.createElement("span");
    781         for (var i = 0; i < tokens.length; ++i)
    782             container.appendChild(tokens[i]);
    783         parentElement.insertBefore(container, nextElement);
    784         this._showPopup(container);
    785     },
    786 
    787     _showPopup: function(element)
    788     {
    789         if (!this._delegate.debuggerPaused())
    790             return;
    791 
    792         function killHidePopupTimer()
    793         {
    794             if (this._hidePopupTimer) {
    795                 clearTimeout(this._hidePopupTimer);
    796                 delete this._hidePopupTimer;
    797 
    798                 // We know that we reached the popup, but we might have moved over other elements.
    799                 // Discard pending command.
    800                 this._resetHoverTimer();
    801             }
    802         }
    803 
    804         function showObjectPopup(result)
    805         {
    806             if (result.isError() || !this._delegate.debuggerPaused())
    807                 return;
    808 
    809             var popupContentElement = null;
    810             if (result.type !== "object" && result.type !== "node" && result.type !== "array") {
    811                 popupContentElement = document.createElement("span");
    812                 popupContentElement.className = "monospace console-formatted-" + result.type;
    813                 popupContentElement.style.whiteSpace = "pre";
    814                 popupContentElement.textContent = result.description;
    815                 if (result.type === "string")
    816                     popupContentElement.textContent = "\"" + popupContentElement.textContent + "\"";
    817                 this._popup = new WebInspector.Popover(popupContentElement);
    818                 this._popup.show(element);
    819             } else {
    820                 var popupContentElement = document.createElement("div");
    821 
    822                 var titleElement = document.createElement("div");
    823                 titleElement.className = "source-frame-popover-title monospace";
    824                 titleElement.textContent = result.description;
    825                 popupContentElement.appendChild(titleElement);
    826 
    827                 var section = new WebInspector.ObjectPropertiesSection(result, "", null, false);
    828                 section.expanded = true;
    829                 section.element.addStyleClass("source-frame-popover-tree");
    830                 section.headerElement.addStyleClass("hidden");
    831                 popupContentElement.appendChild(section.element);
    832 
    833                 this._popup = new WebInspector.Popover(popupContentElement);
    834                 const popupWidth = 300;
    835                 const popupHeight = 250;
    836                 this._popup.show(element, popupWidth, popupHeight);
    837             }
    838             this._popup.highlightElement = element;
    839             this._popup.highlightElement.addStyleClass("source-frame-eval-expression");
    840             popupContentElement.addEventListener("mousemove", killHidePopupTimer.bind(this), true);
    841         }
    842 
    843         this._delegate.evaluateInSelectedCallFrame(element.textContent, showObjectPopup.bind(this));
    844     },
    845 
    846     _editBreakpointCondition: function(lineNumber, condition, callback)
    847     {
    848         this._conditionElement = this._createConditionElement(lineNumber);
    849         this._textViewer.addDecoration(lineNumber, this._conditionElement);
    850 
    851         function finishEditing(committed, element, newText)
    852         {
    853             this._textViewer.removeDecoration(lineNumber, this._conditionElement);
    854             delete this._conditionEditorElement;
    855             delete this._conditionElement;
    856             callback(committed, newText);
    857         }
    858 
    859         WebInspector.startEditing(this._conditionEditorElement, {
    860             context: null,
    861             commitHandler: finishEditing.bind(this, true),
    862             cancelHandler: finishEditing.bind(this, false)
    863         });
    864         this._conditionEditorElement.value = condition;
    865         this._conditionEditorElement.select();
    866     },
    867 
    868     _createConditionElement: function(lineNumber)
    869     {
    870         var conditionElement = document.createElement("div");
    871         conditionElement.className = "source-frame-breakpoint-condition";
    872 
    873         var labelElement = document.createElement("label");
    874         labelElement.className = "source-frame-breakpoint-message";
    875         labelElement.htmlFor = "source-frame-breakpoint-condition";
    876         labelElement.appendChild(document.createTextNode(WebInspector.UIString("The breakpoint on line %d will stop only if this expression is true:", lineNumber)));
    877         conditionElement.appendChild(labelElement);
    878 
    879         var editorElement = document.createElement("input");
    880         editorElement.id = "source-frame-breakpoint-condition";
    881         editorElement.className = "monospace";
    882         editorElement.type = "text";
    883         conditionElement.appendChild(editorElement);
    884         this._conditionEditorElement = editorElement;
    885 
    886         return conditionElement;
    887     },
    888 
    889     resize: function()
    890     {
    891         this._textViewer.resize();
    892     },
    893 
    894     commitEditing: function(callback)
    895     {
    896         if (!this._viewerState) {
    897             // No editing was actually done.
    898             this._delegate.setScriptSourceIsBeingEdited(false);
    899             callback();
    900             return;
    901         }
    902 
    903         function didEditContent(error)
    904         {
    905             if (error) {
    906                 if (error.data && error.data[0]) {
    907                     WebInspector.log(error.data[0], WebInspector.ConsoleMessage.MessageLevel.Error);
    908                     WebInspector.showConsole();
    909                 }
    910                 callback(error);
    911                 return;
    912             }
    913 
    914             var newBreakpoints = {};
    915             for (var lineNumber in this._breakpoints) {
    916                 newBreakpoints[lineNumber] = this._breakpoints[lineNumber];
    917                 this.removeBreakpoint(Number(lineNumber));
    918             }
    919 
    920             for (var lineNumber in this._viewerState.breakpoints)
    921                 this._delegate.removeBreakpoint(Number(lineNumber));
    922 
    923             for (var lineNumber in newBreakpoints) {
    924                 var breakpoint = newBreakpoints[lineNumber];
    925                 this._delegate.setBreakpoint(Number(lineNumber), breakpoint.condition, breakpoint.enabled);
    926             }
    927 
    928             delete this._viewerState;
    929             this._delegate.setScriptSourceIsBeingEdited(false);
    930 
    931             callback();
    932         }
    933         this.editContent(this._textModel.text, didEditContent.bind(this));
    934     },
    935 
    936     editContent: function(newContent, callback)
    937     {
    938         this._delegate.editScriptSource(newContent, callback);
    939     },
    940 
    941     cancelEditing: function()
    942     {
    943         this._restoreViewerState();
    944         this._delegate.setScriptSourceIsBeingEdited(false);
    945     }
    946 }
    947 
    948 WebInspector.SourceFrame.prototype.__proto__ = WebInspector.TextViewerDelegate.prototype;
    949 
    950 
    951 WebInspector.SourceFrameDelegate = function()
    952 {
    953 }
    954 
    955 WebInspector.SourceFrameDelegate.prototype = {
    956     requestContent: function(callback)
    957     {
    958         // Should be implemented by subclasses.
    959     },
    960 
    961     debuggingSupported: function()
    962     {
    963         return false;
    964     },
    965 
    966     setBreakpoint: function(lineNumber, condition, enabled)
    967     {
    968         // Should be implemented by subclasses.
    969     },
    970 
    971     removeBreakpoint: function(lineNumber)
    972     {
    973         // Should be implemented by subclasses.
    974     },
    975 
    976     updateBreakpoint: function(lineNumber, condition, enabled)
    977     {
    978         // Should be implemented by subclasses.
    979     },
    980 
    981     findBreakpoint: function(lineNumber)
    982     {
    983         // Should be implemented by subclasses.
    984     },
    985 
    986     continueToLine: function(lineNumber)
    987     {
    988         // Should be implemented by subclasses.
    989     },
    990 
    991     canEditScriptSource: function()
    992     {
    993         return false;
    994     },
    995 
    996     editScriptSource: function(text, callback)
    997     {
    998         // Should be implemented by subclasses.
    999     },
   1000 
   1001     setScriptSourceIsBeingEdited: function(inEditMode)
   1002     {
   1003         // Should be implemented by subclasses.
   1004     },
   1005 
   1006     debuggerPaused: function()
   1007     {
   1008         // Should be implemented by subclasses.
   1009     },
   1010 
   1011     evaluateInSelectedCallFrame: function(string)
   1012     {
   1013         // Should be implemented by subclasses.
   1014     },
   1015 
   1016     releaseEvaluationResult: function()
   1017     {
   1018         // Should be implemented by subclasses.
   1019     },
   1020 
   1021     toggleFormatSourceFiles: function()
   1022     {
   1023         // Should be implemented by subclasses.
   1024     },
   1025 
   1026     formatSourceFilesToggled: function()
   1027     {
   1028         // Should be implemented by subclasses.
   1029     }
   1030 }
   1031