[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 427 matching lines @@
       return;
     this.selectDOMNode(node);
     if (treeOutline.selectedTreeElement)
       treeOutline.selectedTreeElement.expand();
   }
 
   /**
    * @override
    */
   searchCanceled() {
-    delete this._searchQuery;
+    delete this._searchConfig;
     this._hideSearchHighlights();
 
     this._searchableView.updateSearchMatchesCount(0);
 
     delete this._currentSearchResultIndex;
     delete this._searchResults;
 
     SDK.DOMModel.cancelSearch();
   }
 
   /**
    * @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();
 
     const whitespaceTrimmedQuery = query.trim();
     if (!whitespaceTrimmedQuery.length)
       return;
 
-    this._searchQuery = query;
+    if (!this._searchConfig || this._searchConfig.query !== query)
+      this.searchCanceled();
+    else
+      this._hideSearchHighlights();
+
+    this._searchConfig = searchConfig;
 
     var promises = [];
     var domModels = SDK.DOMModel.instances();
     for (var domModel of domModels) {
       promises.push(
           domModel.performSearchPromise(whitespaceTrimmedQuery, Common.moduleSetting('showUAShadowDOM').get()));
     }
     Promise.all(promises).then(resultCountCallback.bind(this));
 
     /**
      * @param {!Array.<number>} resultCounts
      * @this {Elements.ElementsPanel}
      */
     function resultCountCallback(resultCounts) {
       /**
        * @type {!Array.<{domModel: !SDK.DOMModel, index: number, node: (?SDK.DOMNode|undefined)}>}
        */
       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 >= this._searchResults.length)
+        this._currentSearchResultIndex = -1;
 
-      if (shouldJump)
-        this._jumpToSearchResult(jumpBackwards ? -1 : 0);
+      var index = this._currentSearchResultIndex;
+
+      if (shouldJump) {
+        if (index === -1)

[pfeldman, 2017/02/13 18:16:24]

Let's replace this with this._currentSearchResultIndex === undefined for clarity
then and reset it to undefined above. That way we encode missing selection as
"this._currentSearchResultIndex === undefined". Today we encode it with
"this._currentSearchResultIndex === undefined" (first time and in
searchCanceled) and this._currentSearchResultIndex = -1 here.

+          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 31 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;
     this._highlightCurrentSearchResult();
   }
 
   /**
    * @override
    */
   jumpToNextSearchResult() {
     if (!this._searchResults)
       return;
-    this._jumpToSearchResult(this._currentSearchResultIndex + 1);
+    this.performSearch(this._searchConfig, true);
   }
 
   /**
    * @override
    */
   jumpToPreviousSearchResult() {
     if (!this._searchResults)
       return;
-    this._jumpToSearchResult(this._currentSearchResultIndex - 1);
+    this.performSearch(this._searchConfig, true, true);
   }
 
   /**
    * @override
    * @return {boolean}
    */
   supportsCaseSensitiveSearch() {
     return false;
   }
 
@@ skipping 27 matching lines @@
     if (typeof searchResult.node === 'undefined') {
       // No data for slot, request it.
       searchResult.domModel.searchResult(searchResult.index, searchCallback.bind(this));
       return;
     }
 
     this._searchableView.updateCurrentMatchIndex(index);
 
     var treeElement = this._treeElementForNode(searchResult.node);
     if (treeElement) {
-      treeElement.highlightSearchResults(this._searchQuery);
+      treeElement.highlightSearchResults(this._searchConfig.query);
       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)
       return;
@@ skipping 424 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(', :'))
     };
   }
 };