[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 443 matching lines @@
     delete this._searchResults;
 
     SDK.DOMModel.cancelSearch();
   }
 
   /**
    * @override
    * @param {!UI.SearchableView.SearchConfig} searchConfig
    * @param {boolean} shouldJump
    * @param {boolean=} jumpBackwards
+   * @param {boolean=} reset
    */
-  performSearch(searchConfig, shouldJump, jumpBackwards) {
+  performSearch(searchConfig, shouldJump, jumpBackwards, reset) {
     var query = searchConfig.query;
-    // Call searchCanceled since it will reset everything we need before doing a new search.
-    this.searchCanceled();
+    if (reset)
+      // Call searchCanceled since it will reset everything we need before doing a new search.
+      this.searchCanceled();
+    else
+      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 (reset || typeof 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)
+      this._currentSearchResultIndex = 0;
+    else
+      this._currentSearchResultIndex = (index + this._searchResults.length) % this._searchResults.length;
     this._highlightCurrentSearchResult();
   }
 
   /**
    * @override
    */
   jumpToNextSearchResult() {
     if (!this._searchResults)

[pfeldman, 2017/02/06 19:24:53]

Can we instead just call performSearch(sameConfig, true, false) here? And there
you never reset this._currentSearchResultIndex or reset it only when config
changes.

[Oleksii Kadurin, 2017/02/07 20:20:24]

If you are talking about resetting this._currentSearchResultIndex in
_jumpToSearchResult then I do it for cases when the number of found items
decreased dynamically. For instance, if the current index is 10, but
this._searchResults.length is 5, then we need to reset the index.
Hence I think tracking sameConfig will not help in catching such cases.

       return;
     this._jumpToSearchResult(this._currentSearchResultIndex + 1);
   }
 
   /**
    * @override
    */
   jumpToPreviousSearchResult() {
     if (!this._searchResults)

[pfeldman, 2017/02/06 19:24:53]

performSearch(sameConfig, true, true)

       return;
     this._jumpToSearchResult(this._currentSearchResultIndex - 1);
   }
 
   /**
    * @override
    * @return {boolean}
    */
   supportsCaseSensitiveSearch() {
     return false;
@@ skipping 38 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)
       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(', :'))
     };
   }
 };