Adding regex support to search bar in dev tools console

Source/devtools/front_end/components/SearchableView.js

Index: Source/devtools/front_end/components/SearchableView.js
diff --git a/Source/devtools/front_end/components/SearchableView.js b/Source/devtools/front_end/components/SearchableView.js
index dd4021a9d8d9b32fd6410a1ff5d68b2fe85cb7b0..bcf2b05e77df95c6fee2e95921aa35db06ee573a 100644
--- a/Source/devtools/front_end/components/SearchableView.js
+++ b/Source/devtools/front_end/components/SearchableView.js
@@ -33,10 +33,12 @@
  * @constructor
  * @extends {WebInspector.VBox}
  * @param {!WebInspector.Searchable} searchable
+ * @param {?boolean=} supportRegex
  */
-WebInspector.SearchableView = function(searchable)
+WebInspector.SearchableView = function(searchable, supportRegex)
 {
     WebInspector.VBox.call(this);
+    this.registerRequiredCSS("searchable.css");
 
     this._searchProvider = searchable;
     this.element.addEventListener("keydown", this._onKeyDown.bind(this), false);
@@ -102,17 +104,20 @@ WebInspector.SearchableView = function(searchable)
 
     // Column 4
     this._replaceElement = this._firstRowElement.createChild("td").createChild("span");
-
-    this._replaceCheckboxElement = this._replaceElement.createChild("input");
-    this._replaceCheckboxElement.type = "checkbox";
     this._uniqueId = ++WebInspector.SearchableView._lastUniqueId;
-    var replaceCheckboxId = "search-replace-trigger" + this._uniqueId;
-    this._replaceCheckboxElement.id = replaceCheckboxId;
-    this._replaceCheckboxElement.addEventListener("change", this._updateSecondRowVisibility.bind(this), false);
-
-    this._replaceLabelElement = this._replaceElement.createChild("label");
-    this._replaceLabelElement.textContent = WebInspector.UIString("Replace");
-    this._replaceLabelElement.setAttribute("for", replaceCheckboxId);
+    var replaceChildElements = this._createCheckbox(this._replaceElement, "search-replace",
+        this._updateSecondRowVisibility, "Replace");
+    this._replaceCheckboxElement = replaceChildElements[0];
+    this._replaceLabelElement = replaceChildElements[1];
+
+    if (supportRegex) {
+        this.enableRegex = false;
+        this._regexElement = this._firstRowElement.createChild("td").createChild("span");
+        var regexChildElements = this._createCheckbox(this._regexElement, "search-regex", this._onRegexToggle,
+            "Regex");
+        this._regexCheckboxElement = regexChildElements[0];
+        this._regexLabelElement = regexChildElements[1];
+    }
 
     // Column 5
     var cancelButtonElement = this._firstRowElement.createChild("td").createChild("button");
@@ -485,6 +490,7 @@ WebInspector.SearchableView.prototype = {
             this._searchProvider.searchCanceled();
         }
         this._updateSearchMatchesCountAndCurrentMatchIndex(0, -1);
+        this.setQueryInvalid(false);
     },
 
     /**
@@ -500,9 +506,14 @@ WebInspector.SearchableView.prototype = {
             return;
         }
 
+        this.setQueryInvalid(false);
         this._currentQuery = query;
         this._searchProvider.currentQuery = query;
-        this._searchProvider.performSearch(query, shouldJump, jumpBackwards);
+        if (!this.enableRegex) {
+            this._searchProvider.performSearch(query, shouldJump, jumpBackwards);
+        } else {
+            this._searchProvider.performRegexSearch(query, shouldJump, jumpBackwards);
+        }
     },
 
     _updateSecondRowVisibility: function()
@@ -544,6 +555,37 @@ WebInspector.SearchableView.prototype = {
         this._performSearch(false, true);
     },
 
+    _onRegexToggle: function (event)
+    {
+        this._searchProvider.searchCanceled();
+        this.enableRegex = event.target.checked;
+        this._performSearch(true, true, true);
+    },
+
+    setQueryInvalid: function (invalid) {
+        var cls = "search-query-invalid";
+        if (invalid) {
+            this._searchInputElement.classList.add(cls);
+        } else {
+            this._searchInputElement.classList.remove(cls);
+        }
+    },
+
+    _createCheckbox: function(parentElement, idPrefix, toggleCallback, label)
+    {
+        var checkboxElement = parentElement.createChild("input");
+        checkboxElement.type = "checkbox";
+        var checkboxId = idPrefix + "-trigger" + this._uniqueId;
+        checkboxElement.id = checkboxId;
+        checkboxElement.addEventListener("change", toggleCallback.bind(this), false);
+
+        var labelElement = parentElement.createChild("label");
+        labelElement.textContent = WebInspector.UIString(label);
+        labelElement.setAttribute("for", checkboxId);
+
+        return [checkboxElement, labelElement];
+    },
+
     __proto__: WebInspector.VBox.prototype
 }
 
@@ -564,6 +606,8 @@ WebInspector.Searchable.prototype = {
      */
     performSearch: function(query, shouldJump, jumpBackwards) { },
 
+    performRegexSearch: function(query, shouldJump, jumpBackwards) { },
+
     jumpToNextSearchResult: function() { },
 
     jumpToPreviousSearchResult: function() { }