[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)
+    {
+        this._interactiveFilterEnabled = enable;

[pfeldman, 2016/03/22 00:00:33]

Should disabling perform the cleanup?

+    },
+
+    /**
+     * @param {string} filterString
+     */
+    _setCurrentSelectionFilterString: function (filterString)
+    {
+        this._currentSelectionFilterString = filterString;
+        this._refreshHighlighting();
+    },
+
+    /**
+     * @param {string} filterString
+     * @return {!RegExp}
+     */
+    _makeFilterRegExpFromString: function (filterString)
+    {
+        return new RegExp(["(", filterString.escapeForRegExp(), ")"].join(""), "gi")

[pfeldman, 2016/03/22 00:00:34]

Do you need the () group?

+    },
+
+    _refreshHighlighting: function ()
+    {
+        if (!this._rootElement)
+            return;
+
+        var filterRegExp = this._makeFilterRegExpFromString(this._currentSelectionFilterString);
+
+        for (var changedNode of this._highlightChangedNodes)
+            changedNode._revertHighlightChanges();
+
+        this._highlightChanges = [];
+
+        if (this._currentSelectionFilterString === "")

[pfeldman, 2016/03/22 00:00:33]

if (!this._currentSelectionFilterString)

+            return;
+
+        if (this.selectedTreeElement && !this.selectedTreeElement.selectable)
+            this.selectNext() || this.selectPrevious();

[pfeldman, 2016/03/22 00:00:34]

statement per line please.
if (!selectNext)
    selectPrevious();

+
+        var node = this._rootElement.firstChild();
+        do {
+            var textContent = node._listItemNode.textContent;
+            var match = filterRegExp.exec(textContent);
+            var ranges = [];
+            var changes = [];
+            while (true) {
+                if (match === null)
+                    break;
+                ranges.push(new WebInspector.SourceRange(match.index, match[0].length));
+                match = filterRegExp.exec(textContent);
+            }
+            if (ranges.length > 0)

[pfeldman, 2016/03/22 00:00:34]

if (ranges.length)

+                WebInspector.highlightRangesWithStyleClass(node._listItemNode, ranges, "tree-text-interactive-highlight", changes);
+
+            if (changes.length) {
+                node._setHighlightChanges(changes);
+                this._highlightChangedNodes.push(node);

[pfeldman, 2016/03/22 00:00:33]

Can't there only be one highlighted 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;

[pfeldman, 2016/03/22 00:00:33]

this._currentSelectionFilterString ? ...

+    },
+
+    _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) {
+        case "\r":
+        case "\n":
+            break;
+        case " ":
+            if (currentFilterString.length === 0) {

[pfeldman, 2016/03/22 00:00:34]

!length

+                break;
+            }
+        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.length)
+                    // 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.length) {
                 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.length) {
                 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.length)
+                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 64 matching lines @@
 function TreeElement(title, expandable)
 {
     /** @type {?TreeOutline} */
     this.treeOutline = null;
     this.parent = null;
     this.previousSibling = null;
     this.nextSibling = null;
 
     this._listItemNode = createElement("li");
     this._listItemNode.treeElement = this;
+
     if (title)
         this.title = title;
     this._listItemNode.addEventListener("mousedown", this._handleMouseDown.bind(this), false);
     this._listItemNode.addEventListener("selectstart", this._treeElementSelectStart.bind(this), false);
     this._listItemNode.addEventListener("click", this._treeElementToggled.bind(this), false);
     this._listItemNode.addEventListener("dblclick", this._handleDoubleClick.bind(this), false);
 
     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;
     }
 }