[DevTools] Added keyboard search while in sources

third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js

Index: third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js b/third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js
index 7755b1cdc7fc565c0af853c00ba39addfbd23400..213b5296fa9fc5d25f447970a0d2d54213118918 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js
@@ -46,6 +46,15 @@ function TreeOutline(nonFocusable)
     this.setFocusable(!nonFocusable);
 
     this.element = this._contentElement;
+
+    this._contentElement.addEventListener("keypress", this._handleKeyPressForHighlighting.bind(this), true);
+    this.element.addEventListener("blur", this._clearFilter.bind(this), true);
+    this.element.addEventListener("click", this._clearFilter.bind(this), true);
+
+    this._currentSelectionFilterString = "";
+    this._interactiveFilterEnabled = false;
+    /** @type {!Array.<!TreeElement>} */
+    this._highlightChangedNodes = []
 }
 
 TreeOutline.Events = {
@@ -75,6 +84,122 @@ TreeOutline.prototype = {
     },
 
     /**
+     * @param {boolean} enable
+     */
+    setInteractiveFilterable: function (enable)

[lushnikov, 2016/03/25 17:15:59]

style: extra space after function keyword

[allada, 2016/04/05 00:16:22]

Done.

[lushnikov, 2016/04/06 00:22:36]

This seems to be not done.

[allada, 2016/04/08 17:26:07]

Sorry must have stashed and not committed my changes

+    {
+        if (!enable)

[lushnikov, 2016/03/25 17:15:59]

let's do nothing if the state doesn't change

[allada, 2016/04/05 00:16:22]

Done.

[lushnikov, 2016/04/06 00:22:36]

This seems to be not done.

[allada, 2016/04/08 17:26:07]

Done.

+            this._setCurrentSelectionFilterString("");
+
+        this._interactiveFilterEnabled = enable;
+    },
+
+    /**
+     * @param {string} filterString
+     */
+    _setCurrentSelectionFilterString: function (filterString)
+    {
+        this._currentSelectionFilterString = filterString;
+        this._refreshHighlighting();
+    },
+
+    /**
+     * @param {string} filterString
+     * @return {!RegExp}
+     */
+    _makeFilterRegExpFromString: function (filterString)

[lushnikov, 2016/03/25 17:15:59]

despite the JavaScript class RegExp, we always abbreviate regular expression as
"regex".
So it would be consistent to name this "_makeFilterRegexFromString"

[allada, 2016/04/05 00:16:22]

Done.

[lushnikov, 2016/04/06 00:22:36]

This seems to be not done.

[allada, 2016/04/08 17:26:07]

Done.

+    {
+        return new RegExp(filterString.escapeForRegExp(), "gi")
+    },
+
+    _refreshHighlighting: function ()
+    {
+        if (!this._rootElement)
+            return;
+
+        var filterRegExp = this._makeFilterRegExpFromString(this._currentSelectionFilterString);

[lushnikov, 2016/03/25 17:15:59]

let's move this closer to the point where it is actually used

[allada, 2016/04/05 00:16:22]

Done.

+
+        for (var changedNode of this._highlightChangedNodes)
+            changedNode._revertHighlightChanges();
+
+        this._highlightChanges = [];

[lushnikov, 2016/03/25 17:15:59]

this seems to be not used

[allada, 2016/04/05 00:16:22]

Done.

+
+        if (!this._currentSelectionFilterString)
+            return;
+
+        if (this.selectedTreeElement && !this.selectedTreeElement.selectable) {

[lushnikov, 2016/03/25 17:15:59]

why do you need this?

[allada, 2016/04/05 00:16:22]

Because this function is executed after a new filter is put on it. If there the
currently selected item does meet the criteria for the new filter it should try
and find the next item in the tree that meets the filter's criteria. If it fails
on the next, it tries to go backwards looking for an item. (this is probably the
most important part of the user interaction)

+            if (!this.selectNext())
+                this.selectPrevious();
+        }
+
+        var node = this._rootElement.firstChild();
+        do {
+            var textContent = node._listItemNode.textContent;

[lushnikov, 2016/03/25 17:16:00]

let's move this logic into TreeElement. 
The treeElement._setHighlightChanges method will not be needed, as well as 
treeOutline._checkFilter method

E.g. TreeElement.prototype = {
  _setFilter: function(regex);
}

[allada, 2016/04/05 00:16:22]

Done.

+            var match = filterRegExp.exec(textContent);
+            var ranges = [];
+            var changes = [];
+            while (true) {
+                if (!match)
+                    break;
+                ranges.push(new WebInspector.SourceRange(match.index, match[0].length));
+                match = filterRegExp.exec(textContent);
+            }
+            if (ranges.length)
+                WebInspector.highlightRangesWithStyleClass(node._listItemNode, ranges, "tree-text-interactive-highlight", changes);
+
+            if (changes.length) {
+                node._setHighlightChanges(changes);
+                this._highlightChangedNodes.push(node);
+            }
+
+            node = node.traverseNextTreeElement(true, null, true);
+        } while(node);
+    },
+
+    /**
+     * @param {!TreeElement} treeElement
+     * @return {boolean}
+     */
+    _checkFilter: function (treeElement)
+    {
+        return this._currentSelectionFilterString ? this._makeFilterRegExpFromString(this._currentSelectionFilterString).test(treeElement._titleElement.textContent) : true;
+    },
+
+    _clearFilter: function ()
+    {
+        if (this._interactiveFilterEnabled)
+            this._setCurrentSelectionFilterString("");
+    },
+
+    /**
+     * @param {!Event} event
+     */
+    _handleKeyPressForHighlighting: function (event)
+    {
+        if (!this._interactiveFilterEnabled)
+            return;
+
+        if (event.target !== this._contentElement)
+            return;
+
+        if (!this.selectedTreeElement || event.shiftKey || event.metaKey || event.ctrlKey)
+            return;
+
+        var currentFilterString = this._currentSelectionFilterString;
+
+        switch (event.data) {

[lushnikov, 2016/03/25 17:15:59]

I think this switch could be simplified

if (key === "\r" || key === "\n" || (key === " " &&
!this._currentSelectionFilterString))
    // Do nothing.
else
  this._setCurrentSelectionFilterString(...)

[allada, 2016/04/05 00:16:22]

Done.

[lushnikov, 2016/04/06 00:22:36]

This seems to be not done.

[allada, 2016/04/08 17:26:07]

Done.

+        case "\r":
+        case "\n":
+            break;
+        case " ":
+            if (!currentFilterString)
+                break;

[lushnikov, 2016/03/25 17:16:00]

we do not use fall-through as they are confusing.  (unless it's a case A: case
B: case C: syntax). 

[allada, 2016/04/05 00:16:22]

Done.

+        default:
+            this._setCurrentSelectionFilterString(currentFilterString + event.data);
+        }
+    },
+
+    /**
      * @return {?TreeElement}
      */
     firstChild: function()
@@ -229,30 +354,38 @@ TreeOutline.prototype = {
         if (!this.selectedTreeElement || event.shiftKey || event.metaKey || event.ctrlKey)
             return;
 
+        var currentFilterString = this._currentSelectionFilterString;
         var handled = false;
+        var key = event.keyCode;
         var nextSelectedElement;
-        if (event.keyIdentifier === "Up" && !event.altKey) {
-            handled = this.selectPrevious();
-        } else if (event.keyIdentifier === "Down" && !event.altKey) {
-            handled = this.selectNext();
-        } else if (event.keyIdentifier === "Left") {
-            if (this.selectedTreeElement.expanded) {
-                if (event.altKey)
-                    this.selectedTreeElement.collapseRecursively();
-                else
-                    this.selectedTreeElement.collapse();
+
+        switch (key) {
+        case WebInspector.KeyboardShortcut.Keys.Esc.code:
+            if (this._interactiveFilterEnabled) {
+                if (currentFilterString)
+                    // Consider the item handled if the filter string is already set (this will keep the console from triggering)
+                    handled = true;
+                this._clearFilter();
+            }
+            break;
+        case WebInspector.KeyboardShortcut.Keys.Delete.code:
+            if (this._interactiveFilterEnabled && currentFilterString) {
                 handled = true;
-            } else if (this.selectedTreeElement.parent && !this.selectedTreeElement.parent.root) {
+                this._clearFilter();
+            } else
+                handled = this.selectedTreeElement.ondelete();
+            break;
+        case WebInspector.KeyboardShortcut.Keys.Backspace.code:
+            if (this._interactiveFilterEnabled && currentFilterString) {
                 handled = true;
-                if (this.selectedTreeElement.parent.selectable) {
-                    nextSelectedElement = this.selectedTreeElement.parent;
-                    while (nextSelectedElement && !nextSelectedElement.selectable)
-                        nextSelectedElement = nextSelectedElement.parent;
-                    handled = nextSelectedElement ? true : false;
-                } else if (this.selectedTreeElement.parent)
-                    this.selectedTreeElement.parent.collapse();
-            }
-        } else if (event.keyIdentifier === "Right") {
+                this._setCurrentSelectionFilterString(currentFilterString.substr(0, currentFilterString.length - 1));
+            } else
+                handled = this.selectedTreeElement.ondelete();
+            break;
+        case WebInspector.KeyboardShortcut.Keys.Right.code:
+            if (this._interactiveFilterEnabled)
+                this._clearFilter();
+
             if (!this.selectedTreeElement.revealed()) {
                 this.selectedTreeElement.reveal();
                 handled = true;
@@ -270,12 +403,49 @@ TreeOutline.prototype = {
                         this.selectedTreeElement.expand();
                 }
             }
-        } else if (event.keyCode === 8 /* Backspace */ || event.keyCode === 46 /* Delete */)
-            handled = this.selectedTreeElement.ondelete();
-        else if (isEnterKey(event))
-            handled = this.selectedTreeElement.onenter();
-        else if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Space.code)
-            handled = this.selectedTreeElement.onspace();
+            break;
+        case WebInspector.KeyboardShortcut.Keys.Left.code:
+            if (this._interactiveFilterEnabled)
+                this._clearFilter();
+
+            if (this.selectedTreeElement.expanded) {
+                if (event.altKey)
+                    this.selectedTreeElement.collapseRecursively();
+                else
+                    this.selectedTreeElement.collapse();
+                handled = true;
+            } else if (this.selectedTreeElement.parent && !this.selectedTreeElement.parent.root) {
+                handled = true;
+                if (this.selectedTreeElement.parent.selectable) {
+                    nextSelectedElement = this.selectedTreeElement.parent;
+                    while (nextSelectedElement && !nextSelectedElement.selectable)
+                        nextSelectedElement = nextSelectedElement.parent;
+                    handled = nextSelectedElement ? true : false;
+                } else if (this.selectedTreeElement.parent)
+                    this.selectedTreeElement.parent.collapse();
+            }
+            break;
+        case WebInspector.KeyboardShortcut.Keys.Down.code:
+            if (!event.altKey)
+                handled = this.selectNext();
+            break;
+        case WebInspector.KeyboardShortcut.Keys.Up.code:
+            if (!event.altKey)
+                handled = this.selectPrevious();
+            break;
+        case WebInspector.KeyboardShortcut.Keys.Space.code:
+            // Do not send space key event if the search filter has stuff in buffer
+            if (!currentFilterString)
+                handled = this.selectedTreeElement.onspace();
+            break;
+        default:
+            if (isEnterKey(event)) {
+                if (this._interactiveFilterEnabled)
+                    this._clearFilter();
+
+                handled = this.selectedTreeElement.onenter();
+            }
+        }
 
         if (nextSelectedElement) {
             nextSelectedElement.reveal();
@@ -377,6 +547,9 @@ function TreeElement(title, expandable)
     this.selected = false;
     this.setExpandable(expandable || false);
     this._collapsible = true;
+
+    /** @type {!Array.<!Object>} */
+    this._highlightChanges = [];
 }
 
 /** @const */
@@ -384,6 +557,20 @@ TreeElement._ArrowToggleWidth = 10;
 
 TreeElement.prototype = {
     /**
+     * @param {!Array.<!Object>} changes
+     */
+    _setHighlightChanges: function (changes)
+    {
+        this._highlightChanges = changes;
+    },
+
+    _revertHighlightChanges: function ()
+    {
+        WebInspector.revertDomChanges(this._highlightChanges);
+        this._highlightChanges = [];
+    },
+
+    /**
      * @param {?TreeElement} ancestor
      * @return {boolean}
      */
@@ -603,7 +790,7 @@ TreeElement.prototype = {
 
     get selectable()
     {
-        if (this._hidden)
+        if (this._hidden || !this.treeOutline._checkFilter(this))
             return false;
         return this._selectable;
     },