[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 24 matching lines @@
 {
     this._createRootElement();
 
     this.selectedTreeElement = null;
     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._contentElement.addEventListener("keypress", this._treeKeyPress.bind(this), true);
 
     this.setFocusable(!nonFocusable);
 
     this.element = this._contentElement;
+
+    this.element.addEventListener("blur", this._handleBlur.bind(this), true);
+    this.element.addEventListener("click", this._handleClick.bind(this), true);
 }
 
 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");
+
+        this._currentSelectionFilterString = '';

[pfeldman, 2016/03/14 23:51:35]

Please only use double quotes.

[Allada-Google, 2016/03/15 17:13:08]

Done.

+        this._currentSelectionFilter = null;

[pfeldman, 2016/03/14 23:51:34]

You should declare a type here using JSDoc.

[Allada-Google, 2016/03/15 17:13:07]

Done.

+        this._highlightChanges = [];
+        this._interactiveFilterEnabled = false;
     },
 
     /**
      * @return {!TreeElement}
      */
     rootElement: function()
     {
         return this._rootElement;
     },
 
     /**
+     * This will also set/override the RegExp to filter on (ie: setCurrentSelectionFilter())

[pfeldman, 2016/03/14 23:51:34]

We don't explain why (in Blink)...

[Allada-Google, 2016/03/15 17:13:08]

Done.

+     * @param {string} filterString String to filter text on.

[pfeldman, 2016/03/14 23:51:35]

or what... Just the types.

[Allada-Google, 2016/03/15 17:13:08]

Done.

+     */
+    setCurrentSelectionFilterString: function (filterString)

[pfeldman, 2016/03/14 23:51:35]

Seems to be private (starts with _)

[Allada-Google, 2016/03/15 17:13:08]

Done.

+    {
+        this._currentSelectionFilterString = filterString;
+        if (this._currentSelectionFilterString === '')

[pfeldman, 2016/03/14 23:51:34]

""

[Allada-Google, 2016/03/15 17:13:08]

Done.

+            this.setCurrentSelectionFilter(null);
+        else
+            this.setCurrentSelectionFilter(new RegExp(['(', this._currentSelectionFilterString.escapeForRegExp(), ')'].join(''), 'i'));
+    },
+
+    /**
+     * @return {string}
+     */
+    currentSelectionFilterString: function ()

[pfeldman, 2016/03/14 23:51:34]

lets not expose until required.

[Allada-Google, 2016/03/15 17:13:08]

Done.

+    {
+
+        return this._currentSelectionFilterString;
+    },
+
+    setInteractiveFilterable: function (enable)

[pfeldman, 2016/03/14 23:51:34]

JSDoc for enable type.

[Allada-Google, 2016/03/15 17:13:07]

Done.

+    {
+        this._interactiveFilterEnabled = !!enable;

[pfeldman, 2016/03/14 23:51:34]

Declare it as a boolean and there would be no need for !!.

[Allada-Google, 2016/03/15 17:13:08]

Done.

+    },
+
+    /**
+     * @param {?RegExp} filterRegExp Regular Expression to use to filter selectable items
+     */
+    setCurrentSelectionFilter: function (filterRegExp)
+    {
+        var currentFilter = this._currentSelectionFilter;
+        this._currentSelectionFilter = filterRegExp;
+
+        if (this._highlightChanges && this._highlightChanges.length > 0)

[pfeldman, 2016/03/14 23:51:34]

(this._highlightChanges && this._highlightChanges.length)

historically Blink omits 0 in comparisons.

[Allada-Google, 2016/03/15 17:13:08]

Done.

+            WebInspector.revertDomChanges(this._highlightChanges);

[pfeldman, 2016/03/14 23:51:34]

We are now vulnerable to the changes made to the element from outside. It seems
like storing the highlight changes on the element itself and resetting it upon
setTitle would be safer.

[Allada-Google, 2016/03/15 17:13:08]

Done.

+        this._highlightChanges = [];
+
+        if (filterRegExp && filterRegExp !== currentFilter) {

[pfeldman, 2016/03/14 23:51:34]

We prefer early returns to nested conditions.

[Allada-Google, 2016/03/15 17:13:08]

Done.

+            // If the list is not fully rendered don't try and continue
+            if (this._rootElement) {

[pfeldman, 2016/03/14 23:51:34]

ditto

[Allada-Google, 2016/03/15 17:13:08]

Done.

+                var textNode = this._rootElement.firstChild();

[pfeldman, 2016/03/14 23:51:35]

textNode is not really a text node, it is a first TreeElement child in the root.

+                var childTextNodes = this.element.childTextNodes();

[pfeldman, 2016/03/14 23:51:34]

unused?

+                var newExp = new RegExp(filterRegExp.source, 'gi');

[pfeldman, 2016/03/14 23:51:34]

"gi", also, why new regex?

[Allada-Google, 2016/03/15 17:13:08]

Done.

+
+                if (this.selectedTreeElement && !this.selectedTreeElement.selectable)
+                    this.selectNext() || this.selectPrevious();
+
+                do {
+                    var match;
+                    var ranges = [];
+                    var textContent = textNode._listItemNode.textContent;
+                    while ((match = newExp.exec(textContent)) !== null) {

[pfeldman, 2016/03/14 23:51:35]

drop !== null, extract match from comparison into a separate statement above.

[Allada-Google, 2016/03/15 17:13:08]

Done.

+                        ranges.push(new WebInspector.SourceRange(match.index, match[0].length));
+                    }
+                    if (ranges.length > 0)
+                        WebInspector.highlightRangesWithStyleClass(textNode._listItemNode, ranges, "tree-text-interactive-highlight", this._highlightChanges);
+
+                    textNode = textNode.traverseNextTreeElement(true, null, true);
+                } while(textNode);
+            }
+        }
+    },
+
+    /**
+     * @return {?RegExp}
+     */
+    currentSelectionFilter: function ()

[pfeldman, 2016/03/14 23:51:34]

do not expose

[Allada-Google, 2016/03/15 17:13:08]

Done.

+    {
+        return this._currentSelectionFilter;
+    },
+
+    /**
      * @return {?TreeElement}
      */
     firstChild: function()
     {
         return this._rootElement.firstChild();
     },
 
     /**
      * @param {!TreeElement} child
      */
@@ skipping 92 matching lines @@
     {
         if (!element.treeOutline)
             console.error("Unbinding element that was not bound: " + new Error().stack);
 
         element.deselect();
         element.onunbind();
         element.treeOutline = null;
     },
 
     /**
+     * @param {!TreeElement} treeElement
+     * @return {boolean}
+     */
+    checkFilter: function (treeElement)

[pfeldman, 2016/03/14 23:51:34]

ditto

[Allada-Google, 2016/03/15 17:13:08]

Done.

+    {
+        return this.currentSelectionFilter() ? this.currentSelectionFilter().test(treeElement.titleText) : true;
+    },
+
+    /**
      * @return {boolean}
      */
     selectPrevious: function()
     {
         var nextSelectedElement = this.selectedTreeElement.traversePreviousTreeElement(true);
         while (nextSelectedElement && !nextSelectedElement.selectable)
             nextSelectedElement = nextSelectedElement.traversePreviousTreeElement(!this.expandTreeElementsWhenArrowing);
         if (nextSelectedElement) {
             nextSelectedElement.reveal();
             nextSelectedElement.select(false, true);
@@ skipping 14 matching lines @@
             nextSelectedElement.reveal();
             nextSelectedElement.select(false, true);
             return true;
         }
         return false;
     },
 
     /**
      * @param {!Event} event
      */
+    _handleClick: function (event)
+    {
+        if (this._interactiveFilterEnabled)
+            this.setCurrentSelectionFilterString('');

[pfeldman, 2016/03/14 23:51:34]

""

[Allada-Google, 2016/03/15 17:13:08]

Done.

+    },
+
+    /**
+     * @param {!Event} event
+     */
+    _handleBlur: function (event)
+    {
+        if (this._interactiveFilterEnabled)
+            this.setCurrentSelectionFilterString('');
+    },
+
+    /**
+     * @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();
-                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();
+
+        switch (key) {
+        case WebInspector.KeyboardShortcut.Keys.Esc.code:
+            if (this._interactiveFilterEnabled) {
+                if (currentFilterString.length !== 0)

[pfeldman, 2016/03/14 23:51:35]

drop !== 0

[Allada-Google, 2016/03/15 17:13:08]

Done.

+                    // Consider the item handled if the filter string is already set (this will keep the console from triggering)
+                    handled = true;
+                this.setCurrentSelectionFilterString('');
             }
-        } else if (event.keyIdentifier === "Right") {
+            break;
+        case WebInspector.KeyboardShortcut.Keys.Delete.code:
+            if (this._interactiveFilterEnabled)
+                this.setCurrentSelectionFilterString('');
+        case WebInspector.KeyboardShortcut.Keys.Backspace.code:
+            if (this._interactiveFilterEnabled === false || currentFilterString.length === 0)
+                handled = this.selectedTreeElement.ondelete();
+            else if (this._interactiveFilterEnabled)
+                this.setCurrentSelectionFilterString(currentFilterString.substr(0, currentFilterString.length - 1));
+            break;
+        case WebInspector.KeyboardShortcut.Keys.Right.code:

[pfeldman, 2016/03/14 23:51:34]

Group these and use case fallthrough to handle the ones that just reset the
mode.

[Allada-Google, 2016/03/15 17:13:08]

I optimized the code I added here as much as I found needed, but I decided not
to touch any of the code that was here before. The only major thing I did was:
refactor it out of a bunch of "if-else-if" statements.

Should I try and go through this code and see if I can make it more "readable"?

+            if (this._interactiveFilterEnabled)
+                this.setCurrentSelectionFilterString('');
+
             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.setCurrentSelectionFilterString('');
+
+            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 === 0)
+                handled = this.selectedTreeElement.onspace();
+            break;
+        default:
+            if (isEnterKey(event)) {
+                if (this._interactiveFilterEnabled)
+                    this.setCurrentSelectionFilterString('');
+
+                handled = this.selectedTreeElement.onenter();
+            }
+        }
 
         if (nextSelectedElement) {
             nextSelectedElement.reveal();
             nextSelectedElement.select(false, true);
         }
 
         if (handled)
             event.consume(true);
     },
 
     /**
+     * @param {!Event} event
+     */
+    _treeKeyPress: function (event)
+    {
+        if (this._interactiveFilterEnabled === false)

[pfeldman, 2016/03/14 23:51:34]

!this._interactiveFilterEnabled

[Allada-Google, 2016/03/15 17:13:08]

Done.

+            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) {
+                break;
+            }
+        default:
+            this.setCurrentSelectionFilterString(currentFilterString + event.data);
+        }
+    },
+
+    /**
      * @param {!TreeElement} treeElement
      * @param {boolean} center
      */
     _deferredScrollIntoView: function(treeElement, center)
     {
         if (!this._treeElementToScrollIntoView)
             this.element.window().requestAnimationFrame(deferredScrollIntoView.bind(this));
         this._treeElementToScrollIntoView = treeElement;
         this._centerUponScrollIntoView = center;
         /**
@@ skipping 53 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;
+    this.titleText = null;

[pfeldman, 2016/03/14 23:51:34]

Lets compute this dynamically off element's text content when checking filter.

     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");
@@ skipping 223 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 17 matching lines @@
     set title(x)
     {
         if (this._title === x)
             return;
         this._title = x;
 
         if (typeof x === "string") {
             this._titleElement = createElementWithClass("span", "tree-element-title");
             this._titleElement.textContent = x;
             this.tooltip = x;
+            this.titleText = x;
         } else {
             this._titleElement = x;
             this.tooltip = "";
         }
 
         this._listItemNode.removeChildren();
         if (this._iconElement)
             this._listItemNode.appendChild(this._iconElement);
 
         this._listItemNode.appendChild(this._titleElement);
@@ skipping 498 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;
     }
 }