Adding regex support to search bar in dev tools console

Source/devtools/front_end/components/SearchableView.js

 /*
  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2007 Matt Lilek (pewtermoose@gmail.com).
  * Copyright (C) 2009 Joseph Pecoraro
  * Copyright (C) 2011 Google 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:
  *
@@ skipping 15 matching lines @@
  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /**
  * @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);
 
     this._footerElementContainer = this.element.createChild("div", "search-bar status-bar hidden");
     this._footerElementContainer.style.order = 100;
 
     this._footerElement = this._footerElementContainer.createChild("table", "toolbar-search");
     this._footerElement.cellSpacing = 0;
 
@@ skipping 45 matching lines @@
     this._prevButtonElement.textContent = WebInspector.UIString("Previous");
     this._prevButtonElement.tabIndex = -1;
     this._prevButtonElement.addEventListener("click", this._onPreviousClick.bind(this), false);
 
     this._replaceAllButtonElement = this._secondRowElement.createChild("td").createChild("button");
     this._replaceAllButtonElement.textContent = WebInspector.UIString("Replace All");
     this._replaceAllButtonElement.addEventListener("click", this._replaceAll.bind(this), false);
 
     // Column 4
     this._replaceElement = this._firstRowElement.createChild("td").createChild("span");
+    this._uniqueId = ++WebInspector.SearchableView._lastUniqueId;
+    var replaceChildElements = this._createCheckbox(this._replaceElement, "search-replace",
+        this._updateSecondRowVisibility, "Replace");
+    this._replaceCheckboxElement = replaceChildElements[0];
+    this._replaceLabelElement = replaceChildElements[1];
 
-    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);
+    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");
     cancelButtonElement.textContent = WebInspector.UIString("Cancel");
     cancelButtonElement.tabIndex = -1;
     cancelButtonElement.addEventListener("click", this.closeSearch.bind(this), false);
     this._minimalSearchQuerySize = 3;
 
     this._registerShortcuts();
 }
@@ skipping 352 matching lines @@
     },
 
     _clearSearch: function()
     {
         delete this._currentQuery;
         if (!!this._searchProvider.currentQuery) {
             delete this._searchProvider.currentQuery;
             this._searchProvider.searchCanceled();
         }
         this._updateSearchMatchesCountAndCurrentMatchIndex(0, -1);
+        this.setQueryInvalid(false);
     },
 
     /**
      * @param {boolean} forceSearch
      * @param {boolean} shouldJump
      * @param {boolean=} jumpBackwards
      */
     _performSearch: function(forceSearch, shouldJump, jumpBackwards)
     {
         var query = this._searchInputElement.value;
         if (!query || (!forceSearch && query.length < this._minimalSearchQuerySize && !this._currentQuery)) {
             this._clearSearch();
             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()
     {
         var secondRowVisible = this._replaceCheckboxElement.checked;
         this._footerElementContainer.classList.toggle("replaceable", secondRowVisible);
         this._footerElement.classList.toggle("toolbar-search-replace", secondRowVisible);
         this._secondRowElement.classList.toggle("hidden", !secondRowVisible);
         this._prevButtonElement.classList.toggle("hidden", !secondRowVisible);
         this._findButtonElement.classList.toggle("hidden", !secondRowVisible);
@@ skipping 21 matching lines @@
     _onInput: function(event)
     {
         this._onValueChanged();
     },
 
     _onValueChanged: function()
     {
         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
 }
 
 /**
  * @interface
  */
 WebInspector.Searchable = function()
 {
 }
 
 WebInspector.Searchable.prototype = {
     searchCanceled: function() { },
 
     /**
      * @param {string} query
      * @param {boolean} shouldJump
      * @param {boolean=} jumpBackwards
      */
     performSearch: function(query, shouldJump, jumpBackwards) { },
 
+    performRegexSearch: function(query, shouldJump, jumpBackwards) { },
+
     jumpToNextSearchResult: function() { },
 
     jumpToPreviousSearchResult: function() { }
 }
 
 /**
  * @interface
  */
 WebInspector.Replaceable = function()
 {
 }
 
 WebInspector.Replaceable.prototype = {
     /**
      * @param {string} text
      */
     replaceSelectionWith: function(text) { },
 
     /**
      * @param {string} query
      * @param {string} replacement
      */
     replaceAllWith: function(query, replacement) { }
 }