Changeset 86539 in webkit


Ignore:
Timestamp:
May 16, 2011 12:30:04 AM (13 years ago)
Author:
yurys@chromium.org
Message:

2011-05-12 Yury Semikhatsky <​yurys@chromium.org>

Reviewed by Pavel Feldman.

Web Inspector: inspector console should be searchable
​https://bugs.webkit.org/show_bug.cgi?id=60711

Search now works for Console panel. It shows number of matching console entries
and allows to jump to the next matching console entry. Also the matches count
is dynamically updated when new messages are added to the console.

ResourceTreeModel and DebuggerPresentationModel now listen to console events instead
of being called directly from ConsoleView.

  • inspector/front-end/ConsolePanel.js: (WebInspector.ConsolePanel): (WebInspector.ConsolePanel.prototype.show): (WebInspector.ConsolePanel.prototype.hide): (WebInspector.ConsolePanel.prototype.searchCanceled): (WebInspector.ConsolePanel.prototype.performSearch): (WebInspector.ConsolePanel.prototype.jumpToNextSearchResult): (WebInspector.ConsolePanel.prototype.jumpToPreviousSearchResult): (WebInspector.ConsolePanel.prototype._clearCurrentSearchResultHighlight): (WebInspector.ConsolePanel.prototype._jumpToSearchResult): (WebInspector.ConsolePanel.prototype._consoleMessageAdded): (WebInspector.ConsolePanel.prototype._consoleCleared):
  • inspector/front-end/ConsoleView.js: (WebInspector.ConsoleView.prototype.addMessage): (WebInspector.ConsoleView.prototype.clearMessages): (WebInspector.ConsoleMessage.prototype.clearHighlight): (WebInspector.ConsoleMessage.prototype.highlightSearchResults): (WebInspector.ConsoleMessage.prototype.matchesRegex): (WebInspector.ConsoleMessage.prototype.toMessageElement): (WebInspector.ConsoleCommand.prototype.clearHighlight): (WebInspector.ConsoleCommand.prototype.highlightSearchResults): (WebInspector.ConsoleCommand.prototype.matchesRegex): (WebInspector.ConsoleCommand.prototype.toMessageElement): (WebInspector.ConsoleCommand.prototype._formatCommand):
  • inspector/front-end/DebuggerPresentationModel.js: (WebInspector.DebuggerPresentationModel): (WebInspector.DebuggerPresentationModel.prototype.setFormatSourceFiles): (WebInspector.DebuggerPresentationModel.prototype._consoleMessageAdded): (WebInspector.DebuggerPresentationModel.prototype._consoleCleared):
  • inspector/front-end/ResourceTreeModel.js: (WebInspector.ResourceTreeModel): (WebInspector.ResourceTreeModel.prototype._consoleMessageAdded):
  • inspector/front-end/ScriptsPanel.js: (WebInspector.ScriptsPanel): (WebInspector.ScriptsPanel.prototype._consoleMessagesCleared):
  • inspector/front-end/utilities.js: ():
Location:
trunk/Source/WebCore
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r86537 r86539  
     12011-05-12  Yury Semikhatsky  <yurys@chromium.org>
     2
     3        Reviewed by Pavel Feldman.
     4
     5        Web Inspector: inspector console should be searchable
     6        https://bugs.webkit.org/show_bug.cgi?id=60711
     7
     8        Search now works for Console panel. It shows number of matching console entries
     9        and allows to jump to the next matching console entry. Also the matches count
     10        is dynamically updated when new messages are added to the console.
     11
     12        ResourceTreeModel and DebuggerPresentationModel now listen to console events instead
     13        of being called directly from ConsoleView.
     14
     15        * inspector/front-end/ConsolePanel.js:
     16        (WebInspector.ConsolePanel):
     17        (WebInspector.ConsolePanel.prototype.show):
     18        (WebInspector.ConsolePanel.prototype.hide):
     19        (WebInspector.ConsolePanel.prototype.searchCanceled):
     20        (WebInspector.ConsolePanel.prototype.performSearch):
     21        (WebInspector.ConsolePanel.prototype.jumpToNextSearchResult):
     22        (WebInspector.ConsolePanel.prototype.jumpToPreviousSearchResult):
     23        (WebInspector.ConsolePanel.prototype._clearCurrentSearchResultHighlight):
     24        (WebInspector.ConsolePanel.prototype._jumpToSearchResult):
     25        (WebInspector.ConsolePanel.prototype._consoleMessageAdded):
     26        (WebInspector.ConsolePanel.prototype._consoleCleared):
     27        * inspector/front-end/ConsoleView.js:
     28        (WebInspector.ConsoleView.prototype.addMessage):
     29        (WebInspector.ConsoleView.prototype.clearMessages):
     30        (WebInspector.ConsoleMessage.prototype.clearHighlight):
     31        (WebInspector.ConsoleMessage.prototype.highlightSearchResults):
     32        (WebInspector.ConsoleMessage.prototype.matchesRegex):
     33        (WebInspector.ConsoleMessage.prototype.toMessageElement):
     34        (WebInspector.ConsoleCommand.prototype.clearHighlight):
     35        (WebInspector.ConsoleCommand.prototype.highlightSearchResults):
     36        (WebInspector.ConsoleCommand.prototype.matchesRegex):
     37        (WebInspector.ConsoleCommand.prototype.toMessageElement):
     38        (WebInspector.ConsoleCommand.prototype._formatCommand):
     39        * inspector/front-end/DebuggerPresentationModel.js:
     40        (WebInspector.DebuggerPresentationModel):
     41        (WebInspector.DebuggerPresentationModel.prototype.setFormatSourceFiles):
     42        (WebInspector.DebuggerPresentationModel.prototype._consoleMessageAdded):
     43        (WebInspector.DebuggerPresentationModel.prototype._consoleCleared):
     44        * inspector/front-end/ResourceTreeModel.js:
     45        (WebInspector.ResourceTreeModel):
     46        (WebInspector.ResourceTreeModel.prototype._consoleMessageAdded):
     47        * inspector/front-end/ScriptsPanel.js:
     48        (WebInspector.ScriptsPanel):
     49        (WebInspector.ScriptsPanel.prototype._consoleMessagesCleared):
     50        * inspector/front-end/utilities.js:
     51        ():
     52
    1532011-05-16  Adam Barth  <abarth@webkit.org>
    254

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

    r62647 r86539  
    3030{
    3131    WebInspector.Panel.call(this, "console");
     32    WebInspector.console.addEventListener(WebInspector.ConsoleView.Events.EntryAdded, this._consoleMessageAdded, this);
     33    WebInspector.console.addEventListener(WebInspector.ConsoleView.Events.ConsoleCleared, this._consoleCleared, this);
    3234}
    3335
    … …  
    4547        WebInspector.drawer.enterPanelMode();
    4648        WebInspector.showConsole();
    47        
     49
    4850        // Move the scope bar to the top of the messages, like the resources filter.
    4951        var scopeBar = document.getElementById("console-filter");
    … …  
    5254        scopeBar.parentNode.removeChild(scopeBar);
    5355        document.getElementById("console-view").insertBefore(scopeBar, consoleMessages);
    54        
     56
    5557        // Update styles, and give console-messages a top margin so it doesn't overwrite the scope bar.
    5658        scopeBar.addStyleClass("console-filter-top");
    … …  
    6971            WebInspector.drawer.exitPanelMode();
    7072        delete this._previousConsoleState;
    71        
     73
    7274        // Move the scope bar back to the bottom bar, next to Clear Console.
    7375        var scopeBar = document.getElementById("console-filter");
    … …  
    7577        scopeBar.parentNode.removeChild(scopeBar);
    7678        document.getElementById("other-drawer-status-bar-items").appendChild(scopeBar);
    77        
     79
    7880        // Update styles, and remove the top margin on console-messages.
    7981        scopeBar.removeStyleClass("console-filter-top");
    … …  
    8183
    8284        document.getElementById("console-messages").removeStyleClass("console-filter-top");
     85    },
     86
     87    searchCanceled: function()
     88    {
     89        this._clearCurrentSearchResultHighlight();
     90        delete this._searchResults;
     91        delete this._searchRegex;
     92    },
     93
     94    performSearch: function(query)
     95    {
     96        WebInspector.searchController.updateSearchMatchesCount(0, this);
     97        this.searchCanceled();
     98        this._searchRegex = createSearchRegex(query, "g");
     99
     100        this._searchResults = [];
     101        var messages = WebInspector.console.messages;
     102        for (var i = 0; i < messages.length; i++) {
     103            if (messages[i].matchesRegex(this._searchRegex)) {
     104                this._searchResults.push(messages[i]);
     105                this._searchRegex.lastIndex = 0;
     106            }
     107        }
     108        WebInspector.searchController.updateSearchMatchesCount(this._searchResults.length, this);
     109        this._currentSearchResultIndex = -1;
     110        if (this._searchResults.length)
     111            this._jumpToSearchResult(0);
     112    },
     113
     114    jumpToNextSearchResult: function()
     115    {
     116        if (!this._searchResults || !this._searchResults.length)
     117            return;
     118        this._jumpToSearchResult((this._currentSearchResultIndex + 1) % this._searchResults.length);
     119    },
     120
     121    jumpToPreviousSearchResult: function()
     122    {
     123        if (!this._searchResults || !this._searchResults.length)
     124            return;
     125        var index = this._currentSearchResultIndex - 1;
     126        if (index === -1)
     127            index = this._searchResults.length - 1;
     128        this._jumpToSearchResult(index);
     129    },
     130
     131    _clearCurrentSearchResultHighlight: function()
     132    {
     133        if (!this._searchResults)
     134            return;
     135        var highlightedMessage = this._searchResults[this._currentSearchResultIndex];
     136        if (highlightedMessage)
     137            highlightedMessage.clearHighlight();
     138        this._currentSearchResultIndex = -1;
     139    },
     140
     141    _jumpToSearchResult: function(index)
     142    {
     143        this._clearCurrentSearchResultHighlight();
     144        this._currentSearchResultIndex = index;
     145        this._searchResults[index].highlightSearchResults(this._searchRegex);
     146    },
     147
     148    _consoleMessageAdded: function(event)
     149    {
     150        if (!this._searchRegex || !this.visible)
     151            return;
     152        var message = event.data;
     153        this._searchRegex.lastIndex = 0;
     154        if (message.matchesRegex(this._searchRegex)) {
     155            this._searchResults.push(message);
     156            WebInspector.searchController.updateSearchMatchesCount(this._searchResults.length, this);
     157        }
     158    },
     159
     160    _consoleCleared: function()
     161    {
     162        if (!this._searchResults)
     163            return;
     164        this._clearCurrentSearchResultHighlight();
     165        this._searchResults.length = 0;
     166        if (this.visible)
     167            WebInspector.searchController.updateSearchMatchesCount(0, this);
    83168    }
    84169}

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

    r85319 r86539  
    102102}
    103103
     104WebInspector.ConsoleView.Events = {
     105  ConsoleCleared: "console-cleared",
     106  EntryAdded: "console-entry-added",
     107  MessageAdded: "console-message-added"
     108}
     109
    104110WebInspector.ConsoleView.prototype = {
    105111    _registerConsoleDomainDispatcher: function() {
    … …  
    275281        if (msg instanceof WebInspector.ConsoleMessage && !(msg instanceof WebInspector.ConsoleCommandResult)) {
    276282            this._incrementErrorWarningCount(msg);
    277             WebInspector.resourceTreeModel.addConsoleMessage(msg);
    278             WebInspector.panels.scripts.addConsoleMessage(msg);
     283            this.dispatchEventToListeners(WebInspector.ConsoleView.Events.MessageAdded, msg);
    279284            this.commandSincePreviousMessage = false;
    280285            this.previousMessage = msg;
    … …  
    304309        if (shouldScrollToLastMessage || (msg instanceof WebInspector.ConsoleCommandResult))
    305310            this._scheduleScrollIntoView();
     311
     312        this.dispatchEventToListeners(WebInspector.ConsoleView.Events.EntryAdded, msg);
    306313    },
    307314
    … …  
    325332    clearMessages: function()
    326333    {
    327         WebInspector.resourceTreeModel.clearConsoleMessages();
    328         WebInspector.panels.scripts.clearConsoleMessages();
     334        this.dispatchEventToListeners(WebInspector.ConsoleView.Events.ConsoleCleared);
    329335
    330336        this.messages = [];
    … …  
    866872    },
    867873
     874    clearHighlight: function()
     875    {
     876        var highlightedMessage = this._formattedMessage;
     877        delete this._formattedMessage;
     878        this._formatMessage();
     879        this._element.replaceChild(this._formattedMessage, highlightedMessage);
     880    },
     881
     882    highlightSearchResults: function(regexObject)
     883    {
     884        regexObject.lastIndex = 0;
     885        var text = this.message;
     886        var match = regexObject.exec(text);
     887        var offset = 0;
     888        var matchRanges = [];
     889        while (match) {
     890            matchRanges.push({ offset: match.index, length: match[0].length });
     891            match = regexObject.exec(text);
     892        }
     893        highlightSearchResults(this._formattedMessage, matchRanges);
     894        this._element.scrollIntoViewIfNeeded();
     895    },
     896
     897    matchesRegex: function(regexObject)
     898    {
     899        return regexObject.test(this.message);
     900    },
     901
    868902    toMessageElement: function()
    869903    {
    … …  
    897931        if (this.type === WebInspector.ConsoleMessage.MessageType.StartGroup || this.type === WebInspector.ConsoleMessage.MessageType.StartGroupCollapsed)
    898932            element.addStyleClass("console-group-title");
    899 
    900         if (this.elementsTreeOutline) {
    901             element.addStyleClass("outline-disclosure");
    902             element.appendChild(this.elementsTreeOutline.element);
    903             return element;
    904         }
    905933
    906934        element.appendChild(this._formattedMessage);
    … …  
    10791107
    10801108WebInspector.ConsoleCommand.prototype = {
     1109    clearHighlight: function()
     1110    {
     1111        var highlightedMessage = this._formattedCommand;
     1112        delete this._formattedCommand;
     1113        this._formatCommand();
     1114        this._element.replaceChild(this._formattedCommand, highlightedMessage);
     1115    },
     1116
     1117    highlightSearchResults: function(regexObject)
     1118    {
     1119        regexObject.lastIndex = 0;
     1120        var text = this.command;
     1121        var match = regexObject.exec(text);
     1122        var offset = 0;
     1123        var matchRanges = [];
     1124        while (match) {
     1125            matchRanges.push({ offset: match.index, length: match[0].length });
     1126            match = regexObject.exec(text);
     1127        }
     1128        highlightSearchResults(this._formattedCommand, matchRanges);
     1129        this._element.scrollIntoViewIfNeeded();
     1130    },
     1131
     1132    matchesRegex: function(regexObject)
     1133    {
     1134        return regexObject.test(this.command);
     1135    },
     1136
    10811137    toMessageElement: function()
    10821138    {
    1083         var element = document.createElement("div");
    1084         element.command = this;
    1085         element.className = "console-user-command";
    1086 
    1087         var commandTextElement = document.createElement("span");
    1088         commandTextElement.className = "console-message-text source-code";
    1089         commandTextElement.textContent = this.command;
    1090         element.appendChild(commandTextElement);
    1091 
    1092         return element;
    1093     }
     1139        if (!this._element) {
     1140            this._element = document.createElement("div");
     1141            this._element.command = this;
     1142            this._element.className = "console-user-command";
     1143
     1144            this._formatCommand();
     1145            this._element.appendChild(this._formattedCommand);
     1146        }
     1147        return this._element;
     1148    },
     1149
     1150    _formatCommand: function()
     1151    {
     1152        this._formattedCommand = document.createElement("span");
     1153        this._formattedCommand.className = "console-message-text source-code";
     1154        this._formattedCommand.textContent = this.command;
     1155    },
    10941156}
    10951157

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

    r85321 r86539  
    4747    WebInspector.debuggerModel.addEventListener(WebInspector.DebuggerModel.Events.Reset, this._debuggerReset, this);
    4848
     49    WebInspector.console.addEventListener(WebInspector.ConsoleView.Events.MessageAdded, this._consoleMessageAdded, this);
     50    WebInspector.console.addEventListener(WebInspector.ConsoleView.Events.ConsoleCleared, this._consoleCleared, this);
     51
    4952    new WebInspector.DebuggerPresentationModelResourceBinding(this);
    5053}
    … …  
    5457    SourceFileChanged: "source-file-changed",
    5558    ConsoleMessageAdded: "console-message-added",
     59    ConsoleMessagesCleared: "console-messages-cleared",
    5660    BreakpointAdded: "breakpoint-added",
    5761    BreakpointRemoved: "breakpoint-removed",
    … …  
    225229
    226230        for (var i = 0; i < messages.length; ++i)
    227             this.addConsoleMessage(messages[i]);
     231            this._addConsoleMessage(messages[i]);
    228232
    229233        if (WebInspector.debuggerModel.callFrames)
    … …  
    238242    },
    239243
    240     addConsoleMessage: function(message)
     244    _consoleMessageAdded: function(event)
     245    {
     246        var message = event.data;
     247        if (message.isErrorOrWarning() && message.message)
     248            this._addConsoleMessage(message);
     249    },
     250
     251    _addConsoleMessage: function(message)
    241252    {
    242253        this._messages.push(message);
    … …  
    258269    },
    259270
    260     clearConsoleMessages: function()
     271    _consoleCleared: function()
    261272    {
    262273        this._messages = [];
    263274        for (var id in this._sourceFiles)
    264275            this._sourceFiles[id].messages = [];
     276        this.dispatchEventToListeners(WebInspector.DebuggerPresentationModel.Events.ConsoleMessagesCleared);
    265277    },
    266278

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

    r85591 r86539  
    3636    WebInspector.networkManager.addEventListener(WebInspector.NetworkManager.EventTypes.ResourceFinished, this._onResourceUpdated, this);
    3737
     38    WebInspector.console.addEventListener(WebInspector.ConsoleView.Events.MessageAdded, this._consoleMessageAdded, this);
     39    WebInspector.console.addEventListener(WebInspector.ConsoleView.Events.ConsoleCleared, this._consoleCleared, this);
     40
    3841    this.frontendReused();
    3942    InspectorBackend.registerDomainDispatcher("Page", new WebInspector.PageDispatcher(this));
    … …  
    213216    },
    214217
    215     addConsoleMessage: function(msg)
    216     {
     218    _consoleMessageAdded: function(event)
     219    {
     220        var msg = event.data;
    217221        var resource = this.resourceForURL(msg.url);
    218222        if (!resource)
    … …  
    233237    },
    234238
    235     clearConsoleMessages: function()
     239    _consoleCleared: function()
    236240    {
    237241        function callback(resource)

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

    r85321 r86539  
    188188    this._presentationModel.addEventListener(WebInspector.DebuggerPresentationModel.Events.SourceFileChanged, this._sourceFileChanged, this);
    189189    this._presentationModel.addEventListener(WebInspector.DebuggerPresentationModel.Events.ConsoleMessageAdded, this._consoleMessageAdded, this);
     190    this._presentationModel.addEventListener(WebInspector.DebuggerPresentationModel.Events.ConsoleMessagesCleared, this._consoleMessagesCleared, this);
    190191    this._presentationModel.addEventListener(WebInspector.DebuggerPresentationModel.Events.BreakpointAdded, this._breakpointAdded, this);
    191192    this._presentationModel.addEventListener(WebInspector.DebuggerPresentationModel.Events.BreakpointRemoved, this._breakpointRemoved, this);
    … …  
    332333    },
    333334
    334     addConsoleMessage: function(message)
    335     {
    336         if (message.isErrorOrWarning() && message.message)
    337             this._presentationModel.addConsoleMessage(message);
    338     },
    339 
    340     clearConsoleMessages: function()
    341     {
    342         this._presentationModel.clearConsoleMessages();
     335    _consoleMessagesCleared: function()
     336    {
    343337        for (var sourceFileId in this._sourceFileIdToSourceFrame)
    344338            this._sourceFileIdToSourceFrame[sourceFileId].clearMessages();

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

    r85751 r86539  
    976976            textNode = textNodeSnapshot.snapshotItem(currentSnapshotItem++);
    977977            var textNodeLength = textNode.nodeValue.length;
    978             if (snapshotNodeOffset + textNodeLength >= startOffset) {
     978            if (snapshotNodeOffset + textNodeLength > startOffset) {
    979979                textNodeOffset = startOffset - snapshotNodeOffset;
    980980                snapshotNodeOffset += textNodeLength;
Note: See TracChangeset for help on using the changeset viewer.