Changeset 76009 in webkit


Ignore:
Timestamp:
Jan 18, 2011 2:15:32 AM (13 years ago)
Author:
podivilov@chromium.org
Message:

2011-01-11 Pavel Podivilov <​podivilov@chromium.org>

Reviewed by Pavel Feldman.

Web Inspector: implement script beautifier prototype.
​https://bugs.webkit.org/show_bug.cgi?id=51588

  • WebCore.gypi:
  • WebCore.vcproj/WebCore.vcproj:
  • inspector/front-end/ScriptFormatter.js: Added. (WebInspector.ScriptFormatter): Implements JavaScript source beautification and conversion between original and formatted line numbers (WebInspector.ScriptFormatter.findLineEndings): (WebInspector.ScriptFormatter.locationToPosition): (WebInspector.ScriptFormatter.positionToLocation): (WebInspector.ScriptFormatter.upperBound): (WebInspector.ScriptFormatter.prototype.format): (WebInspector.ScriptFormatter.prototype.originalLineNumberToFormattedLineNumber): (WebInspector.ScriptFormatter.prototype.formattedLineNumberToOriginalLineNumber): (WebInspector.ScriptFormatter.prototype.originalPositionToFormattedLineNumber): (WebInspector.ScriptFormatter.prototype.formattedLineNumberToOriginalPosition): (WebInspector.ScriptFormatter.prototype._convertPosition):
  • inspector/front-end/ScriptsPanel.js: (WebInspector.ScriptsPanel): (WebInspector.ScriptsPanel.prototype._clearCurrentExecutionLine): (WebInspector.ScriptsPanel.prototype._callFrameSelected): (WebInspector.ScriptsPanel.prototype._formatScript):
  • inspector/front-end/SourceFrame.js: Convert original line numbers to UI line numbers and vice versa
  • inspector/front-end/WebKit.qrc:
  • inspector/front-end/inspector.html:
Location:
trunk/Source/WebCore
Files:
1 added
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r76007 r76009  
     12011-01-11  Pavel Podivilov  <podivilov@chromium.org>
     2
     3        Reviewed by Pavel Feldman.
     4
     5        Web Inspector: implement script beautifier prototype.
     6        https://bugs.webkit.org/show_bug.cgi?id=51588
     7
     8        * WebCore.gypi:
     9        * WebCore.vcproj/WebCore.vcproj:
     10        * inspector/front-end/ScriptFormatter.js: Added.
     11        (WebInspector.ScriptFormatter): Implements JavaScript source beautification and conversion between original and
     12        formatted line numbers
     13        (WebInspector.ScriptFormatter.findLineEndings):
     14        (WebInspector.ScriptFormatter.locationToPosition):
     15        (WebInspector.ScriptFormatter.positionToLocation):
     16        (WebInspector.ScriptFormatter.upperBound):
     17        (WebInspector.ScriptFormatter.prototype.format):
     18        (WebInspector.ScriptFormatter.prototype.originalLineNumberToFormattedLineNumber):
     19        (WebInspector.ScriptFormatter.prototype.formattedLineNumberToOriginalLineNumber):
     20        (WebInspector.ScriptFormatter.prototype.originalPositionToFormattedLineNumber):
     21        (WebInspector.ScriptFormatter.prototype.formattedLineNumberToOriginalPosition):
     22        (WebInspector.ScriptFormatter.prototype._convertPosition):
     23        * inspector/front-end/ScriptsPanel.js:
     24        (WebInspector.ScriptsPanel):
     25        (WebInspector.ScriptsPanel.prototype._clearCurrentExecutionLine):
     26        (WebInspector.ScriptsPanel.prototype._callFrameSelected):
     27        (WebInspector.ScriptsPanel.prototype._formatScript):
     28        * inspector/front-end/SourceFrame.js: Convert original line numbers to UI line numbers and vice versa
     29        * inspector/front-end/WebKit.qrc:
     30        * inspector/front-end/inspector.html:
     31
    1322011-01-18  Philippe Normand  <pnormand@igalia.com>
    233

  • trunk/Source/WebCore/WebCore.gypi

    r76004 r76009  
    46784678            'inspector/front-end/ScopeChainSidebarPane.js',
    46794679            'inspector/front-end/Script.js',
     4680            'inspector/front-end/ScriptFormatter.js',
    46804681            'inspector/front-end/ScriptsPanel.js',
    46814682            'inspector/front-end/ScriptView.js',

  • trunk/Source/WebCore/WebCore.vcproj/WebCore.vcproj

    r76005 r76009  
    6559865598                                </File>
    6559965599                                <File
     65600                                        RelativePath="..\inspector\front-end\ScriptFormatter.js"
     65601                                        >
     65602                                </File>
     65603                                <File
    6560065604                                        RelativePath="..\inspector\front-end\ScriptsPanel.js"
    6560165605                                        >

  • trunk/Source/WebCore/inspector/front-end/ScriptsPanel.js

    r75939 r76009  
    6464    // this.topStatusBar.appendChild(this.functionsSelectElement);
    6565
     66    this.formatButton = document.createElement("button");
     67    this.formatButton.className = "status-bar-item";
     68    this.formatButton.id = "format-script";
     69    this.formatButton.title = WebInspector.UIString("Format script.");
     70    this.formatButton.appendChild(document.createElement("img"));
     71    this.formatButton.addEventListener("click", this._formatScript.bind(this), false);
     72    if (Preferences.debugMode)
     73        this.topStatusBar.appendChild(this.formatButton);
     74
    6675    this.sidebarButtonsElement = document.createElement("div");
    6776    this.sidebarButtonsElement.id = "scripts-sidebar-buttons";
    … …  
    678687    {
    679688        if (this._executionSourceFrame)
    680             this._executionSourceFrame.executionLine = 0;
     689            this._executionSourceFrame.clearExecutionLine();
    681690        delete this._executionSourceFrame;
    682691    },
    … …  
    700709        this._executionSourceFrame = this._sourceFrameForScriptOrResource(scriptOrResource);
    701710        if (this._executionSourceFrame)
    702             this._executionSourceFrame.executionLine = currentFrame.line;
     711            this._executionSourceFrame.setExecutionLine(currentFrame.line);
    703712    },
    704713
    … …  
    834843    },
    835844
     845    _formatScript: function()
     846    {
     847        if (this.visibleView && this.visibleView.sourceFrame)
     848            this.visibleView.sourceFrame.formatSource();
     849    },
     850
    836851    _enableDebugging: function()
    837852    {

  • trunk/Source/WebCore/inspector/front-end/SourceFrame.js

    r75937 r76009  
    7272    },
    7373
    74     get executionLine()
    75     {
    76         return this._executionLine;
    77     },
    78 
    79     set executionLine(x)
    80     {
    81         if (this._executionLine === x)
    82             return;
    83 
    84         var previousLine = this._executionLine;
    85         this._executionLine = x;
    86 
    87         if (this._textViewer)
    88             this._updateExecutionLine(previousLine);
    89     },
    90 
    9174    markDiff: function(diffData)
    9275    {
    … …  
    173156        this._content = content;
    174157        this._textModel.setText(null, content);
     158        this._formatter = new WebInspector.ScriptFormatter(content);
    175159
    176160        this._textViewer = new WebInspector.TextViewer(this._textModel, WebInspector.platform, this._url);
    … …  
    185169
    186170        this._textViewer.mimeType = mimeType;
    187         this._addExistingMessagesToSource();
    188         this._updateExecutionLine();
    189         this._updateDiffDecorations();
    190         this._textViewer.resize();
     171        this._setTextViewerDecorations();
    191172
    192173        if (this._lineNumberToReveal) {
    … …  
    211192        }
    212193
     194        this._textViewer.endUpdates();
     195
     196        WebInspector.debuggerModel.addEventListener(WebInspector.DebuggerModel.Events.BreakpointAdded, this._breakpointAdded, this);
     197
     198        if (this._canEditScripts)
     199            this._textViewer.editCallback = this._editLine.bind(this);
     200    },
     201
     202    _setTextViewerDecorations: function()
     203    {
     204        this._rowMessages = {};
     205        this._messageBubbles = {};
     206
     207        this._textViewer.beginUpdates();
     208
     209        this._addExistingMessagesToSource();
     210        this._updateDiffDecorations();
     211
     212        if (this._executionLine)
     213            this.setExecutionLine(this._executionLine);
     214
    213215        var breakpoints = this._breakpoints();
    214216        for (var i = 0; i < breakpoints.length; ++i)
    215217            this._addBreakpoint(breakpoints[i]);
    216         WebInspector.debuggerModel.addEventListener(WebInspector.DebuggerModel.Events.BreakpointAdded, this._breakpointAdded, this);
     218
     219        this._textViewer.resize();
    217220
    218221        this._textViewer.endUpdates();
    219 
    220         if (this._canEditScripts)
    221             this._textViewer.editCallback = this._editLine.bind(this);
    222222    },
    223223
    … …  
    301301    },
    302302
    303     _updateExecutionLine: function(previousLine)
    304     {
    305         if (previousLine) {
    306             if (previousLine - 1 < this._textModel.linesCount)
    307                 this._textViewer.removeDecoration(previousLine - 1, "webkit-execution-line");
    308         }
    309 
    310         if (!this._executionLine)
    311             return;
    312 
    313         if (this._executionLine < this._textModel.linesCount)
    314             this._textViewer.addDecoration(this._executionLine - 1, "webkit-execution-line");
     303    setExecutionLine: function(lineNumber)
     304    {
     305        this._executionLine = lineNumber;
     306        if (!this._textViewer)
     307            return;
     308        var textViewerLineNumber = this._formatter.originalLineNumberToFormattedLineNumber(this._executionLine - 1);
     309        this._textViewer.addDecoration(textViewerLineNumber, "webkit-execution-line");
     310    },
     311
     312    clearExecutionLine: function()
     313    {
     314        if (!this._textViewer)
     315            return;
     316        var textViewerLineNumber = this._formatter.originalLineNumberToFormattedLineNumber(this._executionLine - 1);
     317        this._textViewer.removeDecoration(textViewerLineNumber, "webkit-execution-line");
     318        delete this._executionLine;
    315319    },
    316320
    … …  
    413417    _addBreakpoint: function(breakpoint)
    414418    {
    415         if (breakpoint.line > this._textModel.linesCount)
     419        var textViewerLineNumber = this._formatter.originalLineNumberToFormattedLineNumber(breakpoint.line - 1);
     420        if (textViewerLineNumber >= this._textModel.linesCount)
    416421            return;
    417422
    … …  
    420425        breakpoint.addEventListener("removed", this._breakpointRemoved, this);
    421426
    422         this._setBreakpointDecoration(breakpoint.line, breakpoint.enabled, !!breakpoint.condition);
     427        this._setBreakpointDecoration(textViewerLineNumber, breakpoint.enabled, !!breakpoint.condition);
    423428    },
    424429
    … …  
    431436        breakpoint.removeEventListener("removed", null, this);
    432437
    433         this._removeBreakpointDecoration(breakpoint.line);
     438        var textViewerLineNumber = this._formatter.originalLineNumberToFormattedLineNumber(breakpoint.line - 1);
     439        this._removeBreakpointDecoration(textViewerLineNumber);
    434440    },
    435441
    … …  
    437443    {
    438444        var breakpoint = event.target;
    439         this._setBreakpointDecoration(breakpoint.line, breakpoint.enabled, !!breakpoint.condition);
     445        var textViewerLineNumber = this._formatter.originalLineNumberToFormattedLineNumber(breakpoint.line - 1);
     446        this._setBreakpointDecoration(textViewerLineNumber, breakpoint.enabled, !!breakpoint.condition);
    440447    },
    441448
    442449    _setBreakpointDecoration: function(lineNumber, enabled, hasCondition)
    443450    {
    444         lineNumber -= 1;
    445451        this._textViewer.beginUpdates();
    446452        this._textViewer.addDecoration(lineNumber, "webkit-breakpoint");
    … …  
    458464    _removeBreakpointDecoration: function(lineNumber)
    459465    {
    460         lineNumber -= 1;
    461466        this._textViewer.beginUpdates();
    462467        this._textViewer.removeDecoration(lineNumber, "webkit-breakpoint");
    … …  
    474479        if (!target)
    475480            return;
    476         var lineNumber = target.parentElement.lineNumber + 1;
     481        var textViewerLineNumber = target.parentElement.lineNumber;
     482        var originalLineNumber = this._formatter.formattedLineNumberToOriginalLineNumber(textViewerLineNumber);
    477483
    478484        var contextMenu = new WebInspector.ContextMenu();
    479485
    480         contextMenu.appendItem(WebInspector.UIString("Continue to Here"), this._continueToLine.bind(this, lineNumber));
    481 
    482         var breakpoint = this._findBreakpoint(lineNumber);
     486        contextMenu.appendItem(WebInspector.UIString("Continue to Here"), this._continueToLine.bind(this, originalLineNumber));
     487
     488        var breakpoint = this._findBreakpoint(originalLineNumber);
    483489        if (!breakpoint) {
    484490            // This row doesn't have a breakpoint: We want to show Add Breakpoint and Add and Edit Breakpoint.
    485             contextMenu.appendItem(WebInspector.UIString("Add Breakpoint"), this._setBreakpoint.bind(this, lineNumber, "", true));
     491            contextMenu.appendItem(WebInspector.UIString("Add Breakpoint"), this._setBreakpoint.bind(this, originalLineNumber, "", true));
    486492
    487493            function addConditionalBreakpoint()
    488494            {
    489                 this._setBreakpointDecoration(lineNumber, true, true);
     495                this._setBreakpointDecoration(textViewerLineNumber, true, true);
    490496                function didEditBreakpointCondition(committed, condition)
    491497                {
    492                     this._removeBreakpointDecoration(lineNumber);
     498                    this._removeBreakpointDecoration(textViewerLineNumber);
    493499                    if (committed)
    494                         this._setBreakpoint(lineNumber, true, condition);
     500                        this._setBreakpoint(originalLineNumber, true, condition);
    495501                }
    496                 this._editBreakpointCondition(lineNumber, "", didEditBreakpointCondition.bind(this));
     502                this._editBreakpointCondition(textViewerLineNumber, "", didEditBreakpointCondition.bind(this));
    497503            }
    498504            contextMenu.appendItem(WebInspector.UIString("Add Conditional Breakpoint…"), addConditionalBreakpoint.bind(this));
    … …  
    506512                    if (committed) {
    507513                        breakpoint.remove();
    508                         this._setBreakpoint(breakpoint.line, breakpoint.enabled, condition);
     514                        this._setBreakpoint(originalLineNumber, breakpoint.enabled, condition);
    509515                    }
    510516                }
    511                 this._editBreakpointCondition(lineNumber, breakpoint.condition, didEditBreakpointCondition.bind(this));
     517                this._editBreakpointCondition(textViewerLineNumber, breakpoint.condition, didEditBreakpointCondition.bind(this));
    512518            }
    513519            contextMenu.appendItem(WebInspector.UIString("Edit Breakpoint…"), editBreakpointCondition.bind(this));
    … …  
    515521            {
    516522                breakpoint.remove();
    517                 this._setBreakpoint(breakpoint.line, enabled, breakpoint.condition);
     523                this._setBreakpoint(originalLineNumber, enabled, breakpoint.condition);
    518524            }
    519525            if (breakpoint.enabled)
    … …  
    539545        if (!target)
    540546            return;
    541         var lineNumber = target.parentElement.lineNumber + 1;
    542 
    543         var breakpoint = this._findBreakpoint(lineNumber);
     547        var originalLineNumber = this._formatter.formattedLineNumberToOriginalLineNumber(target.parentElement.lineNumber);
     548
     549        var breakpoint = this._findBreakpoint(originalLineNumber);
    544550        if (breakpoint) {
    545551            breakpoint.remove();
    546552            if (event.shiftKey)
    547                 this._setBreakpoint(breakpoint.line, !breakpoint.enabled, breakpoint.condition);
     553                this._setBreakpoint(originalLineNumber, !breakpoint.enabled, breakpoint.condition);
    548554        } else
    549             this._setBreakpoint(lineNumber, true, "");
     555            this._setBreakpoint(originalLineNumber, true, "");
    550556        event.preventDefault();
    551557    },
    … …  
    711717    _editBreakpointCondition: function(lineNumber, condition, callback)
    712718    {
    713         lineNumber -= 1;
    714719        this._conditionElement = this._createConditionElement(lineNumber);
    715720        this._textViewer.addDecoration(lineNumber, this._conditionElement);
    … …  
    777782    },
    778783
     784    formatSource: function()
     785    {
     786        if (!this._formatter)
     787            return;
     788
     789        this._textModel.setText(null, this._formatter.format());
     790        this._setTextViewerDecorations();
     791    },
     792
    779793    _continueToLine: function(lineNumber)
    780794    {
    … …  
    782796        if (!sourceID)
    783797            return;
    784         WebInspector.debuggerModel.continueToLine(sourceID, lineNumber);
     798        WebInspector.debuggerModel.continueToLine(sourceID, lineNumber + 1);
    785799    },
    786800
    787801    _editLine: function(lineNumber, newContent, cancelEditingCallback)
    788802    {
    789         lineNumber += 1;
    790 
    791803        var lines = [];
    792804        var oldLines = this._content.split('\n');
    793805        for (var i = 0; i < oldLines.length; ++i) {
    794             if (i === lineNumber - 1)
     806            if (i === lineNumber)
    795807                lines.push(newContent);
    796808            else
    … …  
    801813        editData.sourceID = this._sourceIDForLine(lineNumber);
    802814        editData.content = lines.join("\n");
    803         editData.line = lineNumber;
     815        editData.line = lineNumber + 1;
    804816        editData.linesCountToShift = newContent.split("\n").length - 1;
    805817        this._doEditLine(editData, cancelEditingCallback);
    … …  
    827839        if (!sourceID)
    828840            return;
    829         WebInspector.debuggerModel.setBreakpoint(sourceID, lineNumber, enabled, condition);
     841        WebInspector.debuggerModel.setBreakpoint(sourceID, lineNumber + 1, enabled, condition);
    830842        if (!WebInspector.panels.scripts.breakpointsActivated)
    831843            WebInspector.panels.scripts.toggleBreakpointsClicked();
    … …  
    841853    {
    842854        var sourceID = this._sourceIDForLine(lineNumber);
    843         return WebInspector.debuggerModel.findBreakpoint(sourceID, lineNumber);
     855        return WebInspector.debuggerModel.findBreakpoint(sourceID, lineNumber + 1);
    844856    },
    845857
    … …  
    850862        var scripts = this._contentProvider.scripts();
    851863        for (var i = 0; i < scripts.length; ++i) {
    852             var startingLine = scripts[i].startingLine;
    853             if (startingLine <= lineNumber && startingLine >= closestStartingLine) {
    854                 closestStartingLine = startingLine;
     864            var lineOffset = scripts[i].lineOffset;
     865            if (lineOffset <= lineNumber && lineOffset >= closestStartingLine) {
     866                closestStartingLine = lineOffset;
    855867                sourceIDForLine = scripts[i].sourceID;
    856868            }

  • trunk/Source/WebCore/inspector/front-end/WebKit.qrc

    r75715 r76009  
    8282    <file>ScopeChainSidebarPane.js</file>
    8383    <file>Script.js</file>
     84    <file>ScriptFormatter.js</file>
    8485    <file>ScriptsPanel.js</file>
    8586    <file>ScriptView.js</file>

  • trunk/Source/WebCore/inspector/front-end/inspector.html

    r75715 r76009  
    122122    <script type="text/javascript" src="ResourceView.js"></script>
    123123    <script type="text/javascript" src="SourceFrame.js"></script>
     124    <script type="text/javascript" src="ScriptFormatter.js"></script>
    124125    <script type="text/javascript" src="DOMSyntaxHighlighter.js"></script>
    125126    <script type="text/javascript" src="TextEditorModel.js"></script>
Note: See TracChangeset for help on using the changeset viewer.