Navigate between individual search matches in DevTools console

Source/devtools/front_end/console/ConsoleView.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 32 matching lines @@
     this._searchableView = new WebInspector.SearchableView(this);
     this._searchableView.setMinimalSearchQuerySize(0);
     this._searchableView.show(this.element);
 
     this._contentsElement = this._searchableView.element;
     this._contentsElement.classList.add("console-view");
     this._visibleViewMessages = [];
     this._urlToMessageCount = {};
     this._hiddenByFilterCount = 0;
 
+    /**
+     * @type {!Array.<!WebInspector.ConsoleView.RegexMatchRange>}
+     */
+    this._regexMatchRanges = [];
+
     this._clearConsoleButton = new WebInspector.StatusBarButton(WebInspector.UIString("Clear console log."), "clear-status-bar-item");
     this._clearConsoleButton.addEventListener("click", this._requestClearMessages, this);
 
     this._executionContextSelector = new WebInspector.StatusBarComboBox(this._executionContextChanged.bind(this), "console-context");
 
     /**
      * @type {!Map.<!WebInspector.ExecutionContext, !Element>}
      */
     this._optionByExecutionContext = new Map();
 
@@ skipping 518 matching lines @@
             this._currentGroup = this._currentGroup.parentGroup();
             return;
         }
         if (!this._currentGroup.messagesHidden()) {
             var originatingMessage = viewMessage.consoleMessage().originatingMessage();
             if (lastMessage && originatingMessage && lastMessage.consoleMessage() === originatingMessage)
                 lastMessage.toMessageElement().classList.add("console-adjacent-user-command-result");
 
             this._visibleViewMessages.push(viewMessage);
 
-            if (this._searchRegex && viewMessage.matchesRegex(this._searchRegex)) {
-                this._searchResults.push(viewMessage);
-                this._searchableView.updateSearchMatchesCount(this._searchResults.length);
-            }
+            if (this._searchRegex && this._searchMessage(this._visibleViewMessages.length - 1))
+                this._searchableView.updateSearchMatchesCount(this._regexMatchRanges.length);
         }
 
         if (viewMessage.consoleMessage().isGroupStartMessage())
             this._currentGroup = new WebInspector.ConsoleGroup(this._currentGroup, viewMessage);
     },
 
     /**
      * @param {!WebInspector.ConsoleMessage} message
      * @return {!WebInspector.ConsoleViewMessage}
      */
     _createViewMessage: function(message)
     {
         var nestingLevel = this._currentGroup.nestingLevel();
         switch (message.type) {
         case WebInspector.ConsoleMessage.MessageType.Command:
             return new WebInspector.ConsoleCommand(message, this._linkifier, nestingLevel);
         case WebInspector.ConsoleMessage.MessageType.Result:
             return new WebInspector.ConsoleCommandResult(message, this._linkifier, nestingLevel);
         case WebInspector.ConsoleMessage.MessageType.StartGroupCollapsed:
         case WebInspector.ConsoleMessage.MessageType.StartGroup:
             return new WebInspector.ConsoleGroupViewMessage(message, this._linkifier, nestingLevel);
         default:
             return new WebInspector.ConsoleViewMessage(message, this._linkifier, nestingLevel);
         }
     },
 
     _consoleCleared: function()
     {
-        this._clearCurrentSearchResultHighlight();
+        this._clearSearchResultHighlights();
         this._consoleMessages = [];
         this._updateMessageList();
         this._hidePromptSuggestBox();
 
         if (this._searchRegex)
             this._searchableView.updateSearchMatchesCount(0);
 
         this._linkifier.reset();
     },
 
@@ skipping 58 matching lines @@
             return true;
         }
 
         return false;
     },
 
     _updateMessageList: function()
     {
         this._topGroup = WebInspector.ConsoleGroup.createTopGroup();
         this._currentGroup = this._topGroup;
-        this._searchResults = [];
+        this._regexMatchRanges = [];
         this._hiddenByFilterCount = 0;
         for (var i = 0; i < this._visibleViewMessages.length; ++i) {
             this._visibleViewMessages[i].resetCloseGroupDecorationCount();
             this._visibleViewMessages[i].resetIncrementRepeatCount();
         }
         this._visibleViewMessages = [];
         for (var i = 0; i < this._consoleMessages.length; ++i)
             this._appendMessageToEnd(this._consoleMessages[i]);
         this._updateFilterStatus();
         this._viewport.invalidate();
@@ skipping 197 matching lines @@
     elementsToRestoreScrollPositionsFor: function()
     {
         return [this._messagesElement];
     },
 
     /**
      * @override
      */
     searchCanceled: function()
     {
-        this._clearCurrentSearchResultHighlight();
-        delete this._searchResults;
+        this._clearSearchResultHighlights();
+        this._regexMatchRanges = [];
         delete this._searchRegex;
         this._viewport.refresh();
     },
 
     /**
      * @override
      * @param {!WebInspector.SearchableView.SearchConfig} searchConfig
      * @param {boolean} shouldJump
      * @param {boolean=} jumpBackwards
      */
     performSearch: function(searchConfig, shouldJump, jumpBackwards)
     {
         var query = searchConfig.query;
         this.searchCanceled();
         this._searchableView.updateSearchMatchesCount(0);
         this._searchRegex = createPlainTextSearchRegex(query, "gi");
 
-        /** @type {!Array.<number>} */
-        this._searchResults = [];
-        for (var i = 0; i < this._visibleViewMessages.length; i++) {
-            if (this._visibleViewMessages[i].matchesRegex(this._searchRegex))
-                this._searchResults.push(i);
+        this._regexMatchRanges = [];
+        this._currentMatchRangeIndex = -1;
+        for (var i = 0; i < this._visibleViewMessages.length; i++)
+            this._searchMessage(i);
+        this._searchableView.updateSearchMatchesCount(this._regexMatchRanges.length);
+        if (shouldJump)
+            this._jumpToMatch(jumpBackwards ? -1 : 0);
+        this._viewport.refresh();
+    },
+
+    /**
+     * @param {number} index
+     * @return {boolean}
+     */
+    _searchMessage: function(index)
+    {
+        // Reset regex wrt. global search.
+        this._searchRegex.lastIndex = 0;
+
+        var message = this._visibleViewMessages[index];
+        var text = message.renderedText();
+        var match;
+        var matchRanges = [];
+        var sourceRanges = [];
+        while ((match = this._searchRegex.exec(text)) && match[0]) {
+            matchRanges.push({
+                messageIndex: index,
+                highlightNode: null,
+            });
+            sourceRanges.push(new WebInspector.SourceRange(match.index, match[0].length));
         }
-        this._searchableView.updateSearchMatchesCount(this._searchResults.length);
-        this._currentSearchResultIndex = -1;
-        if (shouldJump && this._searchResults.length)
-            this._jumpToSearchResult(jumpBackwards ? -1 : 0);
-        this._viewport.refresh();
+
+        var matchRange;
+        var highlightNodes = message.highlightMatches(sourceRanges);
+        for (var i = 0; i < matchRanges.length; ++i) {
+            matchRange = matchRanges[i];
+            matchRange.highlightNode = highlightNodes[i];
+            this._regexMatchRanges.push(matchRange);
+        }
+
+        return !!matchRange;
     },
 
     /**
      * @override
      */
     jumpToNextSearchResult: function()
     {
-        if (!this._searchResults || !this._searchResults.length)
-            return;
-        this._jumpToSearchResult(this._currentSearchResultIndex + 1);
+        this._jumpToMatch(this._currentMatchRangeIndex + 1);
     },
 
     /**
      * @override
      */
     jumpToPreviousSearchResult: function()
     {
-        if (!this._searchResults || !this._searchResults.length)
-            return;
-        this._jumpToSearchResult(this._currentSearchResultIndex - 1);
+        this._jumpToMatch(this._currentMatchRangeIndex - 1);
     },
 
     /**
      * @override
      * @return {boolean}
      */
     supportsCaseSensitiveSearch: function()
     {
         return false;
     },
 
     /**
      * @override
      * @return {boolean}
      */
     supportsRegexSearch: function()
     {
         return false;
     },
 
-    _clearCurrentSearchResultHighlight: function()
+    _clearSearchResultHighlights: function()
     {
-        if (!this._searchResults)
+        for (var i = 0; i < this._regexMatchRanges.length; ++i) {
+            var matchRange = this._regexMatchRanges[i];
+            var message = this._visibleViewMessages[matchRange.messageIndex];

[lushnikov, 2014/12/17 13:21:23]

You should not call clearHighlights() more then once per every message - it
gonna cost you DOM querying/manipulation.

[aknudsen, 2014/12/21 17:58:23]

Acknowledged.

[aknudsen, 2014/12/21 20:00:09]

Done.

+            if (message)
+                message.clearHighlights();
+        }
+        this._currentMatchRangeIndex = -1;
+    },
+
+    /**
+     * @param {number} index
+     */
+    _jumpToMatch: function(index)
+    {
+        if (!this._regexMatchRanges.length)
             return;
 
-        var highlightedViewMessage = this._visibleViewMessages[this._searchResults[this._currentSearchResultIndex]];
-        if (highlightedViewMessage)
-            highlightedViewMessage.clearHighlight();
-        this._currentSearchResultIndex = -1;
-    },
+        var currentSearchResultClassName = "current-search-result";
 
-    _jumpToSearchResult: function(index)
-    {
-        index = mod(index, this._searchResults.length);
-        this._clearCurrentSearchResultHighlight();
-        this._currentSearchResultIndex = index;
-        this._searchableView.updateCurrentMatchIndex(this._currentSearchResultIndex);
-        var currentViewMessageIndex = this._searchResults[index];
-        this._viewport.scrollItemIntoView(currentViewMessageIndex);
-        this._visibleViewMessages[currentViewMessageIndex].highlightSearchResults(this._searchRegex);
+        var matchRange;
+        if (this._currentMatchRangeIndex >= 0) {
+            matchRange = this._regexMatchRanges[this._currentMatchRangeIndex];
+            matchRange.highlightNode.classList.remove(currentSearchResultClassName);
+        }
+
+        index = mod(index, this._regexMatchRanges.length);
+        this._currentMatchRangeIndex = index;
+        this._searchableView.updateCurrentMatchIndex(index);
+        matchRange = this._regexMatchRanges[index];
+        matchRange.highlightNode.classList.add(currentSearchResultClassName);
+        // Scroll the message itself into view

[lushnikov, 2014/12/17 13:21:23]

can we get rid of these comments?

[aknudsen, 2014/12/21 17:58:23]

Do you want to also remove the comments at 1053-1054?

[lushnikov, 2014/12/23 13:43:33]

I'd prefer it to, yes

[aknudsen, 2014/12/24 11:08:06]

Done.

+        this._viewport.scrollItemIntoView(matchRange.messageIndex);
+        // In case the highlight node is in a tree element, it must be scrolled into view,
+        // the message itself must first be scrolled into view though.
+        matchRange.highlightNode.scrollIntoViewIfNeeded();
     },
 
     __proto__: WebInspector.VBox.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.Object}
  * @param {!WebInspector.ConsoleView} view
  */
@@ skipping 133 matching lines @@
  * @param {!WebInspector.ConsoleMessage} message
  * @param {!WebInspector.Linkifier} linkifier
  * @param {number} nestingLevel
  */
 WebInspector.ConsoleCommand = function(message, linkifier, nestingLevel)
 {
     WebInspector.ConsoleViewMessage.call(this, message, linkifier, nestingLevel);
 }
 
 WebInspector.ConsoleCommand.prototype = {
-    clearHighlight: function()
+    clearHighlights: function()
     {
         var highlightedMessage = this._formattedCommand;
         delete this._formattedCommand;
         this._formatCommand();
         this._element.replaceChild(this._formattedCommand, highlightedMessage);
     },
 
     /**
-     * @param {!RegExp} regexObject
-     */
-    highlightSearchResults: function(regexObject)
-    {
-        regexObject.lastIndex = 0;
-        var match = regexObject.exec(this.text);
-        var matchRanges = [];
-        while (match) {
-            matchRanges.push(new WebInspector.SourceRange(match.index, match[0].length));
-            match = regexObject.exec(this.text);
-        }
-        WebInspector.highlightSearchResults(this._formattedCommand, matchRanges);
-        this._element.scrollIntoViewIfNeeded();
-    },
-
-    /**
      * @override
      * @param {!RegExp} regexObject
      * @return {boolean}
      */
     matchesRegex: function(regexObject)
     {
         regexObject.lastIndex = 0;
         return regexObject.test(this.text);
     },
 
@@ skipping 12 matching lines @@
         }
         return this._element;
     },
 
     _formatCommand: function()
     {
         this._formattedCommand = createElementWithClass("span", "console-message-text source-code");
         this._formattedCommand.textContent = this.text;
     },
 
+    /**
+     * @override
+     * @return {string}
+     */
+    renderedText: function()
+    {
+        return this.text;
+    },
+
+    /**
+     * @override
+     * @param {!Array.<!Object>} ranges
+     * @return {!Array.<!Element>}
+     */
+    highlightMatches: function(ranges)
+    {
+        var highlightNodes = [];
+        if (this._formattedCommand) {
+            highlightNodes = WebInspector.highlightRangesWithStyleClass(this._formattedCommand, ranges, WebInspector.highlightedSearchResultClassName);
+        }
+        return highlightNodes;
+    },
+
     __proto__: WebInspector.ConsoleViewMessage.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.ConsoleViewMessage}
  * @param {!WebInspector.ConsoleMessage} message
  * @param {!WebInspector.Linkifier} linkifier
  * @param {number} nestingLevel
  */
@@ skipping 86 matching lines @@
     /**
      * @override
      * @return {boolean}
      */
     handleAction: function()
     {
         WebInspector.console.show();
         return true;
     }
 }
+
+/**
+* @typedef {{messageIndex: number, highlightNode: !Element}}
+*/
+WebInspector.ConsoleView.RegexMatchRange;