DevTools: Support regex search and case sensitive search in sources panel

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 {string=} settingName
  */
-WebInspector.SearchableView = function(searchable)
+WebInspector.SearchableView = function(searchable, settingName)
 {
     WebInspector.VBox.call(this);
 
     this._searchProvider = searchable;
+    this._settingName = settingName;
+
     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;
 
     this._firstRowElement = this._footerElement.createChild("tr");
     this._secondRowElement = this._footerElement.createChild("tr", "hidden");
 
+    if (this._searchProvider.supportsCaseSensitiveSearch() || this._searchProvider.supportsRegexSearch()) {
+        var searchSettingsPrefixColumn = this._firstRowElement.createChild("td");
+        searchSettingsPrefixColumn.createChild("div", "search-settings-prefix")
+        this._secondRowElement.createChild("td");
+    }
+
+    if (this._searchProvider.supportsCaseSensitiveSearch()) {
+        var caseSensitiveColumn = this._firstRowElement.createChild("td");
+        this._caseSensitiveButton = new WebInspector.StatusBarTextButton(WebInspector.UIString("Case sensitive"), "case-sensitive-search", "Aa", 2);
+        this._caseSensitiveButton.addEventListener("click", this._toggleCaseSensitiveSearch, this);
+        caseSensitiveColumn.appendChild(this._caseSensitiveButton.element);
+        this._secondRowElement.createChild("td");
+    }
+
+    if (this._searchProvider.supportsRegexSearch()) {
+        var regexColumn = this._firstRowElement.createChild("td");
+        this._regexButton = new WebInspector.StatusBarTextButton(WebInspector.UIString("Regex"), "regex-search", ".*", 2);
+        this._regexButton.addEventListener("click", this._toggleRegexSearch, this);
+        regexColumn.appendChild(this._regexButton.element);
+        this._secondRowElement.createChild("td");
+    }
+
     // Column 1
     var searchControlElementColumn = this._firstRowElement.createChild("td");
     this._searchControlElement = searchControlElementColumn.createChild("span", "toolbar-search-control");
     this._searchInputElement = this._searchControlElement.createChild("input", "search-replace");
     this._searchInputElement.id = "search-input-field";
     this._searchInputElement.placeholder = WebInspector.UIString("Find");
 
     this._matchesElement = this._searchControlElement.createChild("label", "search-results-matches");
     this._matchesElement.setAttribute("for", "search-input-field");
 
     this._searchNavigationElement = this._searchControlElement.createChild("div", "toolbar-search-navigation-controls");
 
     this._searchNavigationPrevElement = this._searchNavigationElement.createChild("div", "toolbar-search-navigation toolbar-search-navigation-prev");
     this._searchNavigationPrevElement.addEventListener("click", this._onPrevButtonSearch.bind(this), false);
     this._searchNavigationPrevElement.title = WebInspector.UIString("Search Previous");
 
     this._searchNavigationNextElement = this._searchNavigationElement.createChild("div", "toolbar-search-navigation toolbar-search-navigation-next");
     this._searchNavigationNextElement.addEventListener("click", this._onNextButtonSearch.bind(this), false);
     this._searchNavigationNextElement.title = WebInspector.UIString("Search Next");
 
     this._searchInputElement.addEventListener("mousedown", this._onSearchFieldManualFocus.bind(this), false); // when the search field is manually selected
     this._searchInputElement.addEventListener("keydown", this._onSearchKeyDown.bind(this), true);
     this._searchInputElement.addEventListener("input", this._onInput.bind(this), false);
 
     this._replaceInputElement = this._secondRowElement.createChild("td").createChild("input", "search-replace toolbar-replace-control");
     this._replaceInputElement.addEventListener("keydown", this._onReplaceKeyDown.bind(this), true);
     this._replaceInputElement.placeholder = WebInspector.UIString("Replace");
 
     // Column 2
-    this._findButtonElement = this._firstRowElement.createChild("td").createChild("button", "hidden");
+    this._findButtonElement = this._firstRowElement.createChild("td").createChild("button", "search-action-button hidden");
     this._findButtonElement.textContent = WebInspector.UIString("Find");
     this._findButtonElement.tabIndex = -1;
     this._findButtonElement.addEventListener("click", this._onFindClick.bind(this), false);
 
-    this._replaceButtonElement = this._secondRowElement.createChild("td").createChild("button");
+    this._replaceButtonElement = this._secondRowElement.createChild("td").createChild("button", "search-action-button");
     this._replaceButtonElement.textContent = WebInspector.UIString("Replace");
     this._replaceButtonElement.disabled = true;
     this._replaceButtonElement.tabIndex = -1;
     this._replaceButtonElement.addEventListener("click", this._replace.bind(this), false);
 
     // Column 3
-    this._prevButtonElement = this._firstRowElement.createChild("td").createChild("button", "hidden");
+    this._prevButtonElement = this._firstRowElement.createChild("td").createChild("button", "search-action-button hidden");
     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 = this._secondRowElement.createChild("td").createChild("button", "search-action-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._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);
 
     // Column 5
-    var cancelButtonElement = this._firstRowElement.createChild("td").createChild("button");
+    var cancelButtonElement = this._firstRowElement.createChild("td").createChild("button", "search-action-button");
     cancelButtonElement.textContent = WebInspector.UIString("Cancel");
     cancelButtonElement.tabIndex = -1;
     cancelButtonElement.addEventListener("click", this.closeSearch.bind(this), false);
     this._minimalSearchQuerySize = 3;
 
     this._registerShortcuts();
+    this._loadSetting();
 }
 
 WebInspector.SearchableView._lastUniqueId = 0;
 
 /**
  * @return {!Array.<!WebInspector.KeyboardShortcut.Descriptor>}
  */
 WebInspector.SearchableView.findShortcuts = function()
 {
     if (WebInspector.SearchableView._findShortcuts)
@@ skipping 35 matching lines @@
 {
     if (WebInspector.SearchableView._findPreviousShortcuts)
         return WebInspector.SearchableView._findPreviousShortcuts;
     WebInspector.SearchableView._findPreviousShortcuts = [];
     if (WebInspector.isMac())
         WebInspector.SearchableView._findPreviousShortcuts.push(WebInspector.KeyboardShortcut.makeDescriptor("g", WebInspector.KeyboardShortcut.Modifiers.Meta | WebInspector.KeyboardShortcut.Modifiers.Shift));
     return WebInspector.SearchableView._findPreviousShortcuts;
 }
 
 WebInspector.SearchableView.prototype = {
+    _toggleCaseSensitiveSearch: function()
+    {
+        this._caseSensitiveButton.toggled = !this._caseSensitiveButton.toggled;
+        this._saveSetting();
+        this._performSearch(true, true);
+    },
+
+    _toggleRegexSearch: function()
+    {
+        this._regexButton.toggled = !this._regexButton.toggled;
+        this._saveSetting();
+        this._performSearch(true, true);
+    },
+
+    /**
+     * @return {?WebInspector.Setting}
+     */
+    _setting: function()
+    {
+        if (!this._settingName)
+            return null;
+        if (!WebInspector.settings[this._settingName])
+            WebInspector.settings[this._settingName] = WebInspector.settings.createSetting(this._settingName, {});
+        return WebInspector.settings[this._settingName];
+    },
+
+    _saveSetting: function()
+    {
+        var setting = this._setting();
+        if (!setting)
+            return;
+        var settingValue = setting.get() || {};
+        settingValue.caseSensitive = this._caseSensitiveButton.toggled;
+        settingValue.isRegex = this._regexButton.toggled;
+        setting.set(settingValue);
+    },
+
+    _loadSetting: function()
+    {
+        var settingValue = this._setting() ? (this._setting().get() || {}) : {};
+        if (this._searchProvider.supportsCaseSensitiveSearch())
+            this._caseSensitiveButton.toggled = !!settingValue.caseSensitive;
+        if (this._searchProvider.supportsRegexSearch())
+            this._regexButton.toggled = !!settingValue.isRegex;
+    },
+
     /**
      * @return {!Element}
      */
     defaultFocusedElement: function()
     {
         var children = this.children();
         for (var i = 0; i < children.length; ++i) {
             var element = children[i].defaultFocusedElement();
             if (element)
                 return element;
@@ skipping 305 matching lines @@
     _performSearch: function(forceSearch, shouldJump, jumpBackwards)
     {
         var query = this._searchInputElement.value;
         if (!query || (!forceSearch && query.length < this._minimalSearchQuerySize && !this._currentQuery)) {
             this._clearSearch();
             return;
         }
 
         this._currentQuery = query;
         this._searchProvider.currentQuery = query;
-        this._searchProvider.performSearch(query, shouldJump, jumpBackwards);
+
+        var searchConfig = this._currentSearchConfig();
+        this._searchProvider.performSearch(searchConfig, shouldJump, jumpBackwards);
     },
 
+    /**
+     * @return {!WebInspector.SearchableView.SearchConfig}
+     */
+    _currentSearchConfig: function()
+    {
+        var query = this._searchInputElement.value;
+        var caseSensitive = this._caseSensitiveButton ? this._caseSensitiveButton.toggled : false;
+        var isRegex = this._regexButton ? this._regexButton.toggled : false;
+        return new WebInspector.SearchableView.SearchConfig(query, caseSensitive, isRegex);
+     },
+
     _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);
         this._replaceCheckboxElement.tabIndex = secondRowVisible ? -1 : 0;
 
         if (secondRowVisible)
             this._replaceInputElement.focus();
         else
             this._searchInputElement.focus();
         this.doResize();
     },
 
     _replace: function()
     {
         /** @type {!WebInspector.Replaceable} */ (this._searchProvider).replaceSelectionWith(this._replaceInputElement.value);
         delete this._currentQuery;
         this._performSearch(true, true);
     },
 
     _replaceAll: function()
     {
-        /** @type {!WebInspector.Replaceable} */ (this._searchProvider).replaceAllWith(this._searchInputElement.value, this._replaceInputElement.value);
+        var searchConfig = this._currentSearchConfig();
+        /** @type {!WebInspector.Replaceable} */ (this._searchProvider).replaceAllWith(searchConfig, this._replaceInputElement.value);
     },
 
     _onInput: function(event)
     {
         this._onValueChanged();
     },
 
     _onValueChanged: function()
     {
         this._performSearch(false, true);
     },
 
     __proto__: WebInspector.VBox.prototype
 }
 
 /**
  * @interface
  */
 WebInspector.Searchable = function()
 {
 }
 
 WebInspector.Searchable.prototype = {
     searchCanceled: function() { },
 
     /**
-     * @param {string} query
+     * @param {!WebInspector.SearchableView.SearchConfig} searchConfig
      * @param {boolean} shouldJump
      * @param {boolean=} jumpBackwards
      */
-    performSearch: function(query, shouldJump, jumpBackwards) { },
+    performSearch: function(searchConfig, shouldJump, jumpBackwards) { },
 
     jumpToNextSearchResult: function() { },
 
-    jumpToPreviousSearchResult: function() { }
+    jumpToPreviousSearchResult: function() { },
+
+    /**
+     * @return {boolean}
+     */
+    supportsCaseSensitiveSearch: function() { },
+
+    /**
+     * @return {boolean}
+     */
+    supportsRegexSearch: function() { }
 }
 
 /**
  * @interface
  */
 WebInspector.Replaceable = function()
 {
 }
 
 WebInspector.Replaceable.prototype = {
     /**
-     * @param {string} text
+     * @param {string} replacement
      */
-    replaceSelectionWith: function(text) { },
+    replaceSelectionWith: function(replacement) { },
 
     /**
-     * @param {string} query
+     * @param {!WebInspector.SearchableView.SearchConfig} searchConfig
      * @param {string} replacement
      */
-    replaceAllWith: function(query, replacement) { }
+    replaceAllWith: function(searchConfig, replacement) { }
 }
+
+/**
+ * @constructor
+ * @param {string} query
+ * @param {boolean} caseSensitive
+ * @param {boolean} isRegex
+ */
+WebInspector.SearchableView.SearchConfig = function(query, caseSensitive, isRegex)
+{
+    this.query = query;
+    this.caseSensitive = caseSensitive;
+    this.isRegex = isRegex;
+}