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

[eustas, 2014/10/06 08:16:07]

If you make this parameter optional, then you can remove changes in all
panels/views except console.

Like this:
@param {?boolean=} supportRegex

[robwu, 2014/10/06 08:30:21]

After looking over the rest, I'm not sure if this parameter belongs here. I
think that you should default to plain text, and save the regex preference when
the user changes the checkbox value. When the view is rendered again, you use
the saved preference to render the correct checkbox.

[aknudsen, 2014/10/07 19:39:56]

Done.

  */
-WebInspector.SearchableView = function(searchable)
+WebInspector.SearchableView = function(searchable, supportRegex)
 {
+    var self = this;

[eustas, 2014/10/06 08:16:07]

We usually don't do that way.

[robwu, 2014/10/06 08:30:21]

Remove this and use "this" instead of "self".

[aknudsen, 2014/10/07 19:39:56]

Done.

[aknudsen, 2014/10/07 19:39:57]

Done.

     WebInspector.VBox.call(this);
 
     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 58 matching lines @@
     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) {
+      self._regexElement = self._firstRowElement.createChild("td").createChild("span");
+
+      self._regexCheckboxElement = self._regexElement.createChild("input");
+      self._regexCheckboxElement.type = "checkbox";
+      var regexCheckboxId = "search-regex-trigger" + self._uniqueId;
+      self._regexCheckboxElement.id = regexCheckboxId;
+      self.enableRegex = false;
+      self._regexCheckboxElement.addEventListener("change", function (event) {

[eustas, 2014/10/06 08:16:07]

Don't inline function and bind it to this.

[aknudsen, 2014/10/07 19:39:56]

Done.

+        self.enableRegex = event.target.checked;
+        self._performSearch(true, true, true);
+      }, false);

[robwu, 2014/10/06 08:30:21]

Move the contents of this function to a separate member of this object with an
apprioiate underscore-prefixed name, and use .addEventListener("change",
this._someName.bind(this), false); to bind the "this" context (this eliminates
the need for "var self = this;").

[aknudsen, 2014/10/07 19:39:56]

Done.

+
+      self._regexLabelElement = self._regexElement.createChild("label");
+      self._regexLabelElement.textContent = WebInspector.UIString("Regex");
+      self._regexElement.setAttribute("for", regexCheckboxId);

[robwu, 2014/10/06 08:30:21]

Change to

this._regexLabelElement.setAttribute("for", regexCheckboxId);

[aknudsen, 2014/10/07 19:39:56]

Done.

+    }
+
     // 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 454 matching lines @@
      * @param {string} text
      */
     replaceSelectionWith: function(text) { },
 
     /**
      * @param {string} query
      * @param {string} replacement
      */
     replaceAllWith: function(query, replacement) { }
 }