[Devtools] JSONView implements Searchable interface

third_party/WebKit/Source/devtools/front_end/network/JSONView.js

Index: third_party/WebKit/Source/devtools/front_end/network/JSONView.js
diff --git a/third_party/WebKit/Source/devtools/front_end/network/JSONView.js b/third_party/WebKit/Source/devtools/front_end/network/JSONView.js
index 6dd46562b25ded451aa76e1bbbcd36240ac9baa0..11691c1e0c31e7f72cdd4ccacfd716ccf3fb3738 100644
--- a/third_party/WebKit/Source/devtools/front_end/network/JSONView.js
+++ b/third_party/WebKit/Source/devtools/front_end/network/JSONView.js
@@ -31,6 +31,7 @@
 /**
  * @constructor
  * @extends {WebInspector.VBox}
+ * @implements {WebInspector.Searchable}
  * @param {!WebInspector.ParsedJSON} parsedJSON
  */
 WebInspector.JSONView = function(parsedJSON)
@@ -38,6 +39,32 @@ WebInspector.JSONView = function(parsedJSON)
     WebInspector.VBox.call(this);
     this._parsedJSON = parsedJSON;
     this.element.classList.add("json-view");
+
+    /** @type {?WebInspector.SearchableView} */
+    this._searchableView;
+    /** @type {!WebInspector.ObjectPropertiesSection} */
+    this._treeOutline;

[allada, 2016/05/05 23:01:35]

The name did not make sense so I renamed it to match what other's named the
outline object.

+    /** @type {number} */
+    this._currentSearchFocusIndex = 0;
+    /** @type {!Array.<!TreeElement>} */
+    this._currentSearchTreeElements = [];
+    /** @type {?RegExp} */
+    this._searchRegex = null;
+}
+
+/**
+ * @param {!WebInspector.ParsedJSON} parsedJSON
+ * @return {!WebInspector.SearchableView}
+ */
+WebInspector.JSONView.createSearchableView = function(parsedJSON)
+{
+    var jsonView = new WebInspector.JSONView(parsedJSON);
+    var searchableView = new WebInspector.SearchableView(jsonView);
+    searchableView.setPlaceholder(WebInspector.UIString("Find"));
+    jsonView.setSearchableView(searchableView);
+    jsonView.show(searchableView.element);
+    jsonView.element.setAttribute("tabIndex", 0);
+    return searchableView;
 }
 
 /**
@@ -112,6 +139,14 @@ WebInspector.JSONView._findBrackets = function(text, open, close)
 }
 
 WebInspector.JSONView.prototype = {
+    /**
+     * @param {?WebInspector.SearchableView} view
+     */
+    setSearchableView: function(view)

[lushnikov, 2016/05/06 18:46:25]

Could this be made private?

[allada, 2016/05/06 19:31:50]

Done. But I did it because I was following how SourcesView handles it.

+    {
+        this._searchableView = view;
+    },
+
     wasShown: function()
     {
         this._initialize();
@@ -125,10 +160,149 @@ WebInspector.JSONView.prototype = {
 
         var obj = WebInspector.RemoteObject.fromLocalObject(this._parsedJSON.data);
         var title = this._parsedJSON.prefix + obj.description + this._parsedJSON.suffix;
-        var section = new WebInspector.ObjectPropertiesSection(obj, title);
-        section.setEditable(false);
-        section.expand();
-        this.element.appendChild(section.element);
+        this._treeOutline = new WebInspector.ObjectPropertiesSection(obj, title);
+        this._treeOutline.setEditable(false);
+        this._treeOutline.expand();
+        this.element.appendChild(this._treeOutline.element);
+    },
+
+    /**
+     * @param {number} index
+     */
+    _jumpToMatch: function(index)
+    {
+        if (!this._searchRegex)
+            return;
+        var newFocusElement = this._currentSearchTreeElements[index];
+        var previousFocusElement = this._currentSearchTreeElements[this._currentSearchFocusIndex];
+
+        if (!newFocusElement)
+            index = 0;
+
+        if (previousFocusElement)
+            previousFocusElement.setSearchRegex(this._searchRegex);
+
+        this._updateSearchIndex(index);
+        if (newFocusElement) {
+            newFocusElement.setSearchRegex(this._searchRegex, WebInspector.highlightedCurrentSearchResultClassName);
+            newFocusElement.reveal();
+        }

[lushnikov, 2016/05/06 18:46:25]

I think _jumpToMatch function could be structured a little bit more
straightforward:

if (!this._searchRegex)
    return;

var previousFocusElement = ...;
if (previousFocusElement)
    previousFocusElement.setSearchRegex(..);

var newFocusElement = ...;
if (newFocusElement) {
    newFocusElement.setSearchRegex(..)
    newFocusElement.reveal();
    this._updateSearchIndex(index);
} else {
    this._updateSearchIndex(0);
}

[allada, 2016/05/06 19:31:51]

Done.

+    },
+
+    /**
+     * @param {number} count
+     */
+    _updateSearchCount: function(count)
+    {
+        if (!this._searchableView)
+            return;
+        this._searchableView.updateSearchMatchesCount(count);
+    },
+
+    /**
+     * @param {number} index
+     */
+    _updateSearchIndex: function(index)
+    {
+        this._currentSearchFocusIndex = index;
+        if (!this._searchableView)
+            return;
+        this._searchableView.updateCurrentMatchIndex(index);
+    },
+
+    /**
+     * @override
+     */
+    searchCanceled: function()
+    {
+        this._searchRegex = null;
+        this._currentSearchTreeElements = [];
+
+        for (var element = this._treeOutline.rootElement(); element; element = element.traverseNextTreeElement(false)) {
+            if (!(element instanceof WebInspector.ObjectPropertyTreeElement))
+                continue;
+            element.revertHighlightChanges();
+        }
+        this._updateSearchCount(0);
+        this._updateSearchIndex(0);
+    },
+
+    /**
+     * @override
+     * @param {!WebInspector.SearchableView.SearchConfig} searchConfig
+     * @param {boolean} shouldJump
+     * @param {boolean=} jumpBackwards
+     */
+    performSearch: function(searchConfig, shouldJump, jumpBackwards)
+    {
+        var newIndex = this._currentSearchFocusIndex;
+        var previousSearchFocusElement = this._currentSearchTreeElements[newIndex];
+        this.searchCanceled();
+        this._searchRegex = searchConfig.toSearchRegex(true);
+
+        for (var element = this._treeOutline.rootElement(); element; element = element.traverseNextTreeElement(false)) {
+            if (!(element instanceof WebInspector.ObjectPropertyTreeElement))

[lushnikov, 2016/05/06 18:46:25]

which other type could it be?

[allada, 2016/05/06 19:31:51]

Root node has a special type. Also the
WebInspector.ObjectPropertyTreeElement.populateWithProperties (it's part of the
constructor/initializer stack) function may append:
WebInspector.FunctionScopeMainTreeElement and
WebInspector.CollectionEntriesMainTreeElement.

+                continue;
+            var hasMatch = element.setSearchRegex(this._searchRegex);
+            if (hasMatch)
+                this._currentSearchTreeElements.push(element);
+            if (previousSearchFocusElement === element) {
+                var currentIndex = this._currentSearchTreeElements.length - 1;
+                if (hasMatch || jumpBackwards)
+                    newIndex = currentIndex;
+                else
+                    newIndex = currentIndex + 1;
+            }
+        }
+        this._updateSearchCount(this._currentSearchTreeElements.length);
+
+        if (!this._currentSearchTreeElements.length) {
+            this._updateSearchIndex(0);
+            return;
+        }
+        newIndex = mod(newIndex, this._currentSearchTreeElements.length);
+
+        this._jumpToMatch(newIndex);
+    },
+
+    /**
+     * @override
+     */
+    jumpToNextSearchResult: function()
+    {
+        if (!this._currentSearchTreeElements.length)
+            return;
+        var newIndex = mod(this._currentSearchFocusIndex + 1, this._currentSearchTreeElements.length);
+        this._jumpToMatch(newIndex);
+    },
+
+    /**
+     * @override
+     */
+    jumpToPreviousSearchResult: function()
+    {
+        if (!this._currentSearchTreeElements.length)
+            return;
+        var newIndex = mod(this._currentSearchFocusIndex - 1, this._currentSearchTreeElements.length);
+        this._jumpToMatch(newIndex);
+    },
+
+    /**
+     * @override
+     * @return {boolean}
+     */
+    supportsCaseSensitiveSearch: function()
+    {
+        return true;
+    },
+
+    /**
+     * @override
+     * @return {boolean}
+     */
+    supportsRegexSearch: function()
+    {
+        return true;
     },
 
     __proto__: WebInspector.VBox.prototype