[DevTools] Added keyboard search while in sources

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

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  *
  * 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
  *     notice, this list of conditions and the following disclaimer.
  * 2.  Redistributions in binary form must reproduce the above copyright
@@ skipping 28 matching lines @@
     this.expandTreeElementsWhenArrowing = false;
     /** @type {?function(!TreeElement, !TreeElement):number} */
     this._comparator = null;
 
     this._contentElement = this._rootElement._childrenListNode;
     this._contentElement.addEventListener("keydown", this._treeKeyDown.bind(this), true);
 
     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 = {
     ElementAttached: "ElementAttached",
     ElementExpanded: "ElementExpanded",
     ElementCollapsed: "ElementCollapsed",
     ElementSelected: "ElementSelected"
 }
 
 TreeOutline.prototype = {
     _createRootElement: function()
     {
         this._rootElement = new TreeElement();
         this._rootElement.treeOutline = this;
         this._rootElement.root = true;
         this._rootElement.selectable = false;
         this._rootElement.expanded = true;
         this._rootElement._childrenListNode.classList.remove("children");
     },
 
     /**
      * @return {!TreeElement}
      */
     rootElement: function()
     {
         return this._rootElement;
     },
 
     /**
+     * @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()
     {
         return this._rootElement.firstChild();
     },
 
     /**
      * @param {!TreeElement} child
      */
@@ skipping 134 matching lines @@
      * @param {!Event} event
      */
     _treeKeyDown: function(event)
     {
         if (event.target !== this._contentElement)
             return;
 
         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;
             } else if (this.selectedTreeElement._expandable) {
                 handled = true;
                 if (this.selectedTreeElement.expanded) {
                     nextSelectedElement = this.selectedTreeElement.firstChild();
                     while (nextSelectedElement && !nextSelectedElement.selectable)
                         nextSelectedElement = nextSelectedElement.nextSibling;
                     handled = nextSelectedElement ? true : false;
                 } else {
                     if (event.altKey)
                         this.selectedTreeElement.expandRecursively();
                     else
                         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();
             nextSelectedElement.select(false, true);
         }
 
         if (handled)
             event.consume(true);
     },
 
@@ skipping 81 matching lines @@
     this._childrenListNode = createElement("ol");
     this._childrenListNode.parentTreeElement = this;
     this._childrenListNode.classList.add("children");
 
     this._hidden = false;
     this._selectable = true;
     this.expanded = false;
     this.selected = false;
     this.setExpandable(expandable || false);
     this._collapsible = true;
+
+    /** @type {!Array.<!Object>} */
+    this._highlightChanges = [];
 }
 
 /** @const */
 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}
      */
     hasAncestor: function(ancestor)
     {
         if (!ancestor)
             return false;
 
         var currentNode = this.parent;
         while (currentNode) {
@@ skipping 199 matching lines @@
                 this.treeOutline._unbindTreeElement(child);
             for (var current = child.firstChild(); this.treeOutline && current; current = current.traverseNextTreeElement(false, child, true))
                 this.treeOutline._unbindTreeElement(current);
             child._detach();
         }
         this._children = [];
     },
 
     get selectable()
     {
-        if (this._hidden)
+        if (this._hidden || !this.treeOutline._checkFilter(this))
             return false;
         return this._selectable;
     },
 
     set selectable(x)
     {
         this._selectable = x;
     },
 
     get listItemElement()
@@ skipping 535 matching lines @@
     isEventWithinDisclosureTriangle: function(event)
     {
         // FIXME: We should not use getComputedStyle(). For that we need to get rid of using ::before for disclosure triangle. (http://webk.it/74446)
         var paddingLeftValue = window.getComputedStyle(this._listItemNode).paddingLeft;
         console.assert(paddingLeftValue.endsWith("px"));
         var computedLeftPadding = parseFloat(paddingLeftValue);
         var left = this._listItemNode.totalOffsetLeft() + computedLeftPadding;
         return event.pageX >= left && event.pageX <= left + TreeElement._ArrowToggleWidth && this._expandable;
     }
 }