[Devtools] XMLView now searchable

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

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @extends {WebInspector.Widget}
+ * @implements {WebInspector.Searchable}
  * @param {!Document} parsedXML
  */
 WebInspector.XMLView = function(parsedXML)
 {
     WebInspector.Widget.call(this, true);
     this.registerRequiredCSS("network/xmlView.css");
     this.contentElement.classList.add("shadow-xml-view", "source-code");
-    var treeOutline = new TreeOutline();
-    this.contentElement.appendChild(treeOutline.element);
-    WebInspector.XMLView.Node.populate(treeOutline, parsedXML);
+    this._treeOutline = new TreeOutline();
+    this.contentElement.appendChild(this._treeOutline.element);
+    WebInspector.XMLView.Node.populate(this._treeOutline, parsedXML, this);
+
+    /** @type {?WebInspector.SearchableView} */
+    this._searchableView;
+   /** @type {number} */
+    this._currentSearchFocusIndex = 0;
+    /** @type {!Array.<!TreeElement>} */
+    this._currentSearchTreeElements = [];
+    /** @type {?WebInspector.SearchableView.SearchConfig} */
+    this._lastSearchConfig;
 }
 
 /**
+ * @param {!Document} parsedXML
+ * @return {!WebInspector.SearchableView}
+ */
+WebInspector.XMLView.createSearchableView = function(parsedXML)
+{
+    var xmlView = new WebInspector.XMLView(parsedXML);
+    var searchableView = new WebInspector.SearchableView(xmlView);
+    searchableView.setPlaceholder(WebInspector.UIString("Find"));
+    xmlView.setSearchableView(searchableView);
+    xmlView.show(searchableView.element);
+    xmlView.contentElement.setAttribute("tabIndex", 0);
+    return searchableView;
+}
+
+/**
  * @param {string} text
  * @param {string} mimeType
  * @return {?Document}
  */
 WebInspector.XMLView.parseXML = function(text, mimeType)
 {
     var parsedXML;
     try {
         parsedXML = (new DOMParser()).parseFromString(text, mimeType);
     } catch (e) {
         return null;
     }
     if (parsedXML.body)
         return null;
     return parsedXML;
 }
 
 WebInspector.XMLView.prototype = {
+    /**
+     * @param {?WebInspector.SearchableView} view
+     */
+    setSearchableView: function(view)
+    {
+        this._searchableView = view;
+    },
+
+    /**
+     * @param {number} index
+     * @param {boolean} shouldJump
+     */
+    _jumpToMatch: function(index, shouldJump)
+    {
+        if (!this._lastSearchConfig)
+            return;
+        var regex = this._lastSearchConfig.toSearchRegex(true);
+        var newFocusElement = this._currentSearchTreeElements[index];
+        var previousFocusElement = this._currentSearchTreeElements[this._currentSearchFocusIndex];
+
+        if (!newFocusElement)
+            index = 0;
+
+        if (previousFocusElement)
+            previousFocusElement.setSearchRegex(regex);
+
+        this._updateSearchIndex(index);
+        if (newFocusElement) {
+            if (shouldJump)
+                newFocusElement.reveal(true);
+            newFocusElement.setSearchRegex(regex, WebInspector.highlightedCurrentSearchResultClassName);
+        }
+    },
+
+    /**
+     * @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);
+    },
+
+    _rerunSearch: function()

[lushnikov, 2016/05/05 00:10:34]

Let's kill this function.

[allada, 2016/05/05 19:17:59]

Done.

+    {
+        if (this._lastSearchConfig)
+            this._innerPerformSearch(this._lastSearchConfig, false, false);
+    },
+
+    /**
+     * @param {!WebInspector.SearchableView.SearchConfig} searchConfig
+     * @param {boolean} shouldJump
+     * @param {boolean=} jumpBackwards
+     */
+    _innerPerformSearch: function(searchConfig, shouldJump, jumpBackwards)

[lushnikov, 2016/05/05 00:10:34]

this function implicitly depends on this._lastSearchConfig, as
this._lastSearchConfig always passed into it through searchConfig argument.

Let's make this dependency explicit.

_innerPerformSearch: function(shouldJump, jumpBackwards)
{
    if (!this._lastSearchConfig)
        return;
    ... use this._lastSearchConfig and do search ...
}

[allada, 2016/05/05 19:17:59]

Done.

+    {
+        var newIndex = this._currentSearchFocusIndex;
+        var previousSearchFocusElement = this._currentSearchTreeElements[newIndex];
+        this.searchCanceled();
+        var regex = searchConfig.toSearchRegex(true);
+
+        for (var element = this._treeOutline.rootElement(); element; element = element.traverseNextTreeElement(false)) {
+            if (!(element instanceof WebInspector.XMLView.Node))
+                continue;
+            var hasMatch = element.setSearchRegex(regex);
+            if (hasMatch)
+                this._currentSearchTreeElements.push(element);
+            var currentIndex = this._currentSearchTreeElements.length - 1;

[lushnikov, 2016/05/05 00:10:34]

let's move currentIndex declaration inside "if (previousSearchFocusElement ===
element) {...}"

[allada, 2016/05/05 19:17:59]

Done.

+            if (previousSearchFocusElement === element) {
+                if (hasMatch)
+                    newIndex = currentIndex;
+                else if (jumpBackwards)
+                    newIndex = currentIndex - 1;
+                else
+                    newIndex = currentIndex + 1;
+            }
+        }
+        this._updateSearchCount(this._currentSearchTreeElements.length);
+
+        if (!this._currentSearchTreeElements.length) {
+            this._updateSearchIndex(0);
+            return;
+        }
+        newIndex = mod(newIndex, this._currentSearchTreeElements.length);
+
+        this._lastSearchConfig = searchConfig;
+        this._jumpToMatch(newIndex, shouldJump);
+    },
+
+    /**
+     * @override
+     */
+    searchCanceled: function()
+    {
+        this._lastSearchConfig = null;
+        this._currentSearchTreeElements = [];
+        var currentElement = this._treeOutline.rootElement();
+
+        while (currentElement) {
+            if (currentElement instanceof WebInspector.XMLView.Node)
+                currentElement.revertHighlightChanges();
+            currentElement = currentElement.traverseNextTreeElement(false);
+        }
+        this._updateSearchCount(0);
+        this._updateSearchIndex(0);
+    },
+
+    /**
+     * @override
+     * @param {!WebInspector.SearchableView.SearchConfig} searchConfig
+     * @param {boolean} shouldJump
+     * @param {boolean=} jumpBackwards
+     */
+    performSearch: function(searchConfig, shouldJump, jumpBackwards)
+    {

[lushnikov, 2016/05/05 00:10:34]

this._lastSearchConfig = searchConfig;
this._innerPerformSearch(shouldJump, jumpBackwards);

[allada, 2016/05/05 19:17:59]

Done.

+        this._innerPerformSearch(searchConfig, shouldJump, jumpBackwards);
+    },
+
+    /**
+     * @override
+     */
+    jumpToNextSearchResult: function()
+    {
+        if (!this._currentSearchTreeElements.length)
+            return;
+
+        var newIndex = mod(this._currentSearchFocusIndex + 1, this._currentSearchTreeElements.length);
+        this._jumpToMatch(newIndex, true);
+    },
+
+    /**
+     * @override
+     */
+    jumpToPreviousSearchResult: function()
+    {
+        if (!this._currentSearchTreeElements.length)
+            return;
+
+        var newIndex = mod(this._currentSearchFocusIndex - 1, this._currentSearchTreeElements.length);
+        this._jumpToMatch(newIndex, true);
+    },
+
+    /**
+     * @override
+     * @return {boolean}
+     */
+    supportsCaseSensitiveSearch: function()
+    {
+        return true;
+    },
+
+    /**
+     * @override
+     * @return {boolean}
+     */
+    supportsRegexSearch: function()
+    {
+        return true;
+    },
+
     __proto__: WebInspector.Widget.prototype
 }
 
 /**
  * @constructor
  * @extends {TreeElement}
  * @param {!Node} node
  * @param {boolean} closeTag
+ * @param {!WebInspector.XMLView} xmlView
  */
-WebInspector.XMLView.Node = function(node, closeTag)
+WebInspector.XMLView.Node = function(node, closeTag, xmlView)
 {
     TreeElement.call(this, "", !closeTag && !!node.childElementCount);
     this._node = node;
     this._closeTag = closeTag;
     this.selectable = false;
+    /** @type {!Array.<!Object>} */
+    this._highlightChanges = [];
+    this._xmlView = xmlView;
     this._updateTitle();
 }
 
 /**
  * @param {!TreeOutline|!TreeElement} root
  * @param {!Node} xmlNode
+ * @param {!WebInspector.XMLView} xmlView
  */
-WebInspector.XMLView.Node.populate = function(root, xmlNode)
+WebInspector.XMLView.Node.populate = function(root, xmlNode, xmlView)
 {
     var node = xmlNode.firstChild;
     while (node) {
         var currentNode = node;
         node = node.nextSibling;
         var nodeType = currentNode.nodeType;
         // ignore empty TEXT
         if (nodeType === 3 && currentNode.nodeValue.match(/\s+/))
             continue;
         // ignore ATTRIBUTE, ENTITY_REFERENCE, ENTITY, DOCUMENT, DOCUMENT_TYPE, DOCUMENT_FRAGMENT, NOTATION
         if ((nodeType !== 1) && (nodeType !== 3) && (nodeType !== 4) && (nodeType !== 7) && (nodeType !== 8))
             continue;
-        root.appendChild(new WebInspector.XMLView.Node(currentNode, false));
+        root.appendChild(new WebInspector.XMLView.Node(currentNode, false, xmlView));
     }
 }
 
 WebInspector.XMLView.Node.prototype = {
+    /**
+     * @param {?RegExp} regex
+     * @param {string=} additionalCssClassName
+     * @return {boolean}
+     */
+    setSearchRegex: function(regex, additionalCssClassName) {
+        this.revertHighlightChanges();
+        if (!regex)
+            return false;
+        if (this._closeTag && this.parent && !this.parent.expanded)
+            return false;
+        regex.lastIndex = 0;
+        var cssClasses = WebInspector.highlightedSearchResultClassName;
+        if (additionalCssClassName)
+            cssClasses += " " + additionalCssClassName;
+        var content = this.listItemElement.textContent.replace(/\xA0/g, " ");
+        var match = regex.exec(content);
+        var ranges = [];
+        while (match) {
+            ranges.push(new WebInspector.SourceRange(match.index, match[0].length));
+            match = regex.exec(content);
+        }
+        if (ranges.length)
+            WebInspector.highlightRangesWithStyleClass(this.listItemElement, ranges, cssClasses, this._highlightChanges);
+        return !!this._highlightChanges.length;
+    },
+
+    revertHighlightChanges: function()
+    {
+        WebInspector.revertDomChanges(this._highlightChanges);
+        this._highlightChanges = [];
+    },
+
     _updateTitle: function()
     {
         var node = this._node;
         switch (node.nodeType) {
         case 1: // ELEMENT
             var tag = node.tagName;
             if (this._closeTag) {
                 this._setTitle(["</" + tag + ">", "shadow-xml-view-tag"]);
                 return;
             }
@@ skipping 46 matching lines @@
 
     /**
      * @param {!Array.<string>} items
      */
     _setTitle: function(items)
     {
         var titleFragment = createDocumentFragment();
         for (var i = 0; i < items.length; i += 2)
             titleFragment.createChild("span", items[i + 1]).textContent = items[i];
         this.title = titleFragment;
+        this._xmlView._rerunSearch();

[lushnikov, 2016/05/05 00:10:34]

this._xmlView._innerPerformSearch(false, false);

[allada, 2016/05/05 19:17:59]

Done.

     },
 
     onattach: function()
     {
         this.listItemElement.classList.toggle("shadow-xml-view-close-tag", this._closeTag);
     },
 
     onexpand: function()
     {
         this._updateTitle();
     },
 
     oncollapse: function()
     {
         this._updateTitle();
     },
 
     onpopulate: function()
     {
-        WebInspector.XMLView.Node.populate(this, this._node);
-        this.appendChild(new WebInspector.XMLView.Node(this._node, true));
+        WebInspector.XMLView.Node.populate(this, this._node, this._xmlView);
+        this.appendChild(new WebInspector.XMLView.Node(this._node, true, this._xmlView));
     },
 
     __proto__: TreeElement.prototype
 }