[DevTools] Search in Elements tab is not working for newly added elements

third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
  * 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
@@ skipping 446 matching lines @@
   }
 
   /**
    * @override
    * @param {!UI.SearchableView.SearchConfig} searchConfig
    * @param {boolean} shouldJump
    * @param {boolean=} jumpBackwards
    */
   performSearch(searchConfig, shouldJump, jumpBackwards) {
     var query = searchConfig.query;
-    // Call searchCanceled since it will reset everything we need before doing a new search.
-    this.searchCanceled();
+    this._hideSearchHighlights();
 
     const whitespaceTrimmedQuery = query.trim();
     if (!whitespaceTrimmedQuery.length)
       return;
 
     this._searchQuery = query;
 
     var promises = [];
     var domModels = SDK.DOMModel.instances();
     for (var domModel of domModels) {
@@ skipping 12 matching lines @@
        */
       this._searchResults = [];
       for (var i = 0; i < resultCounts.length; ++i) {
         var resultCount = resultCounts[i];
         for (var j = 0; j < resultCount; ++j)
           this._searchResults.push({domModel: domModels[i], index: j, node: undefined});
       }
       this._searchableView.updateSearchMatchesCount(this._searchResults.length);
       if (!this._searchResults.length)
         return;
-      this._currentSearchResultIndex = -1;
+      if (this._currentSearchResultIndex === undefined)
+        this._currentSearchResultIndex = -1;
 
-      if (shouldJump)
-        this._jumpToSearchResult(jumpBackwards ? -1 : 0);
+      var index = this._currentSearchResultIndex;
+
+      if (shouldJump) {
+        if (index === -1)
+          index = jumpBackwards ? -1 : 0;
+        else
+          index = jumpBackwards ? index - 1 : index + 1;
+        this._jumpToSearchResult(index);
+      }
     }
   }
 
   _domWordWrapSettingChanged(event) {
     // FIXME: crbug.com/425984
     this._contentElement.classList.toggle('elements-wrap', event.data);
     for (var i = 0; i < this._treeOutlines.length; ++i)
       this._treeOutlines[i].setWordWrap(/** @type {boolean} */ (event.data));
   }
 
@@ skipping 32 matching lines @@
     function showPopover(contents) {
       if (!contents)
         return;
       popover.setCanShrink(false);
       popover.showForAnchor(contents, link);
     }
   }
 
   _jumpToSearchResult(index) {
     this._hideSearchHighlights();
-    this._currentSearchResultIndex = (index + this._searchResults.length) % this._searchResults.length;
+    if (index > this._searchResults.length)

[pfeldman, 2017/02/07 23:19:36]

This should never happen. Whenever we update searchResults, we should cap the
index.

+      this._currentSearchResultIndex = 0;
+    else
+      this._currentSearchResultIndex = (index + this._searchResults.length) % this._searchResults.length;
     this._highlightCurrentSearchResult();
   }
 
   /**
    * @override
    */
   jumpToNextSearchResult() {
     if (!this._searchResults)
       return;
     this._jumpToSearchResult(this._currentSearchResultIndex + 1);
@@ skipping 55 matching lines @@
     if (treeElement) {
       treeElement.highlightSearchResults(this._searchQuery);
       treeElement.reveal();
       var matches = treeElement.listItemElement.getElementsByClassName(UI.highlightedSearchResultClassName);
       if (matches.length)
         matches[0].scrollIntoViewIfNeeded(false);
     }
   }
 
   _hideSearchHighlights() {
-    if (!this._searchResults || !this._searchResults.length || this._currentSearchResultIndex < 0)
+    if (!this._searchResults || !this._searchResults.length || this._currentSearchResultIndex < 0 ||
+        this._currentSearchResultIndex > this._searchResults.length - 1)

[pfeldman, 2017/02/07 23:19:36]

ditto

       return;
     var searchResult = this._searchResults[this._currentSearchResultIndex];
     if (!searchResult.node)
       return;
     var treeOutline = Elements.ElementsTreeOutline.forDOMModel(searchResult.node.domModel());
     var treeElement = treeOutline.findTreeElement(searchResult.node);
     if (treeElement)
       treeElement.hideSearchHighlights();
   }
 
@@ skipping 415 matching lines @@
    * @param {!SDK.DOMNode} node
    * @return {?{title: string, color: string}}
    */
   decorate(node) {
     return {
       color: 'orange',
       title: Common.UIString('Element state: %s', ':' + SDK.CSSModel.fromNode(node).pseudoState(node).join(', :'))
     };
   }
 };