Bug 779732 - Make search operations in the debugger more intuitive, r=past

browser/devtools/debugger/debugger-view.js

@@ -838,6 +838,7 @@ GlobalSearchView.prototype = {
  */
 function ScriptsView() {
   this._onScriptsChange = this._onScriptsChange.bind(this);
+  this._onScriptsSearchClick = this._onScriptsSearchClick.bind(this);
   this._onScriptsSearch = this._onScriptsSearch.bind(this);
   this._onScriptsKeyUp = this._onScriptsKeyUp.bind(this);
 }
@@ -1273,6 +1274,13 @@ ScriptsView.prototype = {
     this._prevSearchedToken = aToken;
   },
 
+  /**
+   * The focus listener for the scripts search box.
+   */
+  _onScriptsSearchClick: function DVS__onScriptsSearchClick() {
+    this._searchboxPanel.openPopup(this._searchbox);
+  },
+
   /**
    * The search listener for the scripts search box.
    */
@@ -1281,6 +1289,8 @@ ScriptsView.prototype = {
     if (!this._scripts.itemCount) {
       return;
     }
+    this._searchboxPanel.hidePopup();
+
     let [file, line, token, isGlobal] = this.searchboxInfo;
 
     // If this is a global script search, schedule a search in all the sources,
@@ -1337,11 +1347,20 @@ ScriptsView.prototype = {
     DebuggerView.GlobalSearch.hideAndEmpty();
   },
 
+  /**
+   * Called when the scripts path filter key sequence was pressed.
+   */
+  _onFileSearch: function DVS__onFileSearch() {
+    this._onSearch();
+    this._searchboxPanel.openPopup(this._searchbox);
+  },
+
   /**
    * Called when the scripts token filter key sequence was pressed.
    */
   _onLineSearch: function DVS__onLineSearch() {
     this._onSearch(SEARCH_LINE_FLAG);
+    this._searchboxPanel.hidePopup();
   },
 
   /**
@@ -1349,6 +1368,7 @@ ScriptsView.prototype = {
    */
   _onTokenSearch: function DVS__onTokenSearch() {
     this._onSearch(SEARCH_TOKEN_FLAG);
+    this._searchboxPanel.hidePopup();
   },
 
   /**
@@ -1356,6 +1376,7 @@ ScriptsView.prototype = {
    */
   _onGlobalSearch: function DVS__onGlobalSearch() {
     this._onSearch(SEARCH_GLOBAL_FLAG);
+    this._searchboxPanel.hidePopup();
   },
 
   /**
@@ -1363,6 +1384,7 @@ ScriptsView.prototype = {
    */
   _scripts: null,
   _searchbox: null,
+  _searchboxPanel: null,
 
   /**
    * Initialization function, called when the debugger is initialized.
@@ -1370,7 +1392,10 @@ ScriptsView.prototype = {
   initialize: function DVS_initialize() {
     this._scripts = document.getElementById("scripts");
     this._searchbox = document.getElementById("scripts-search");
+    this._searchboxPanel = document.getElementById("scripts-search-panel");
+
     this._scripts.addEventListener("select", this._onScriptsChange, false);
+    this._searchbox.addEventListener("click", this._onScriptsSearchClick, false);
     this._searchbox.addEventListener("select", this._onScriptsSearch, false);
     this._searchbox.addEventListener("input", this._onScriptsSearch, false);
     this._searchbox.addEventListener("keyup", this._onScriptsKeyUp, false);
@@ -1382,6 +1407,7 @@ ScriptsView.prototype = {
    */
   destroy: function DVS_destroy() {
     this._scripts.removeEventListener("select", this._onScriptsChange, false);
+    this._searchbox.removeEventListener("click", this._onScriptsSearchClick, false);
     this._searchbox.removeEventListener("select", this._onScriptsSearch, false);
     this._searchbox.removeEventListener("input", this._onScriptsSearch, false);
     this._searchbox.removeEventListener("keyup", this._onScriptsKeyUp, false);
@@ -1389,6 +1415,7 @@ ScriptsView.prototype = {
     this.empty();
     this._scripts = null;
     this._searchbox = null;
+    this._searchboxPanel = null;
   }
 };
 

browser/devtools/debugger/debugger.xul

@@ -38,7 +38,7 @@
   <keyset id="sourceEditorKeys"/>
   <keyset id="scriptSearchKeys">
     <key key="P" modifiers="access shift"
-         oncommand="DebuggerView.Scripts._onSearch()"/>
+         oncommand="DebuggerView.Scripts._onFileSearch()"/>
     <key key="G" modifiers="access shift"
          oncommand="DebuggerView.Scripts._onLineSearch()"/>
     <key key="T" modifiers="access shift"
@@ -102,6 +102,29 @@
                      class="devtools-closebutton"/>
 #endif
     </toolbar>
+    <panel id="scripts-search-panel"
+           type="arrow"
+           noautofocus="true"
+           position="before_start">
+      <vbox>
+        <label class="description" value="&debuggerUI.searchPanelTitle;"/>
+        <hbox align="center">
+          <button class="operator" label="!"
+                  onclick="DebuggerView.Scripts._onGlobalSearch()"/>
+          <label class="plain operator" value="&debuggerUI.searchPanelGlobal;"/>
+        </hbox>
+        <hbox align="center">
+          <button class="operator" label="#"
+                  onclick="DebuggerView.Scripts._onTokenSearch()"/>
+          <label class="plain operator" value="&debuggerUI.searchPanelToken;"/>
+        </hbox>
+        <hbox align="center">
+          <button class="operator" label=":"
+                  onclick="DebuggerView.Scripts._onLineSearch()"/>
+          <label class="plain operator" value="&debuggerUI.searchPanelLine;"/>
+        </hbox>
+      </vbox>
+    </panel>
     <vbox id="dbg-content" flex="1">
       <vbox id="globalsearch" hidden="true"/>
       <splitter id="globalsearch-splitter"

browser/devtools/debugger/test/Makefile.in

@@ -57,6 +57,7 @@ MOCHITEST_BROWSER_TESTS = \
 	browser_dbg_scripts-searching-06.js \
 	browser_dbg_scripts-searching-07.js \
 	browser_dbg_scripts-searching-08.js \
+	browser_dbg_scripts-searching-popup.js \
 	browser_dbg_pause-resume.js \
 	browser_dbg_update-editor-mode.js \
 	$(warning browser_dbg_select-line.js temporarily disabled due to oranges, see bug 726609) \

browser/devtools/debugger/test/browser_dbg_scripts-searching-03.js

@@ -327,5 +327,6 @@ registerCleanupFunction(function() {
   gDebugger = null;
   gEditor = null;
   gScripts = null;
+  gSearchView = null;
   gSearchBox = null;
 });

browser/devtools/debugger/test/browser_dbg_scripts-searching-04.js

@@ -252,5 +252,6 @@ registerCleanupFunction(function() {
   gDebugger = null;
   gEditor = null;
   gScripts = null;
+  gSearchView = null;
   gSearchBox = null;
 });

browser/devtools/debugger/test/browser_dbg_scripts-searching-05.js

@@ -171,5 +171,6 @@ registerCleanupFunction(function() {
   gDebugger = null;
   gEditor = null;
   gScripts = null;
+  gSearchView = null;
   gSearchBox = null;
 });

browser/devtools/debugger/test/browser_dbg_scripts-searching-06.js

@@ -144,5 +144,6 @@ registerCleanupFunction(function() {
   gDebugger = null;
   gEditor = null;
   gScripts = null;
+  gSearchView = null;
   gSearchBox = null;
 });

browser/devtools/debugger/test/browser_dbg_scripts-searching-07.js

@@ -249,5 +249,6 @@ registerCleanupFunction(function() {
   gDebugger = null;
   gEditor = null;
   gScripts = null;
+  gSearchView = null;
   gSearchBox = null;
 });

browser/devtools/debugger/test/browser_dbg_scripts-searching-08.js

@@ -204,5 +204,6 @@ registerCleanupFunction(function() {
   gDebugger = null;
   gEditor = null;
   gScripts = null;
+  gSearchView = null;
   gSearchBox = null;
 });

browser/devtools/debugger/test/browser_dbg_scripts-searching-popup.js

@@ -0,0 +1,62 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const TAB_URL = EXAMPLE_URL + "browser_dbg_script-switching.html";
+
+var gPane = null;
+var gTab = null;
+var gDebuggee = null;
+var gDebugger = null;
+var gScripts = null;
+var gSearchBox = null;
+var gSearchBoxPanel = null;
+
+function test()
+{
+  debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
+    gTab = aTab;
+    gDebuggee = aDebuggee;
+    gPane = aPane;
+    gDebugger = gPane.contentWindow;
+
+    gDebugger.DebuggerController.activeThread.addOneTimeListener("framesadded", function() {
+      runTest();
+    });
+
+    gDebuggee.firstCall();
+  });
+}
+
+function runTest() {
+  gScripts = gDebugger.DebuggerView.Scripts;
+  gSearchBox = gScripts._searchbox;
+  gSearchBoxPanel = gScripts._searchboxPanel;
+
+  focusSearchbox();
+}
+
+function focusSearchbox() {
+  is(gSearchBoxPanel.state, "closed",
+    "The search box panel shouldn't be visible yet.");
+
+  gSearchBoxPanel.addEventListener("popupshown", function _onEvent(aEvent) {
+    gSearchBoxPanel.removeEventListener(aEvent.type, _onEvent);
+    is(gSearchBoxPanel.state, "open",
+      "The search box panel should be visible after searching started.");
+
+    closeDebuggerAndFinish();
+  });
+  EventUtils.sendMouseEvent({ type: "click" }, gSearchBox);
+}
+
+registerCleanupFunction(function() {
+  removeTab(gTab);
+  gPane = null;
+  gTab = null;
+  gDebuggee = null;
+  gDebugger = null;
+  gScripts = null;
+  gSearchBox = null;
+  gSearchBoxPanel = null;
+});

browser/locales/en-US/chrome/browser/devtools/debugger.dtd

@@ -65,6 +65,22 @@
   -  appears in the filter text box when it is empty. -->
 <!ENTITY debuggerUI.emptyFilterText  "Filter scripts">
 
+<!-- LOCALIZATION NOTE (debuggerUI.searchPanelTitle): This is the text that
+  -  appears in the filter panel popup as a description. -->
+<!ENTITY debuggerUI.searchPanelTitle  "Operators">
+
+<!-- LOCALIZATION NOTE (debuggerUI.searchPanelGlobal): This is the text that
+  -  appears in the filter panel popup for the global search operation. -->
+<!ENTITY debuggerUI.searchPanelGlobal  "Search in all files">
+
+<!-- LOCALIZATION NOTE (debuggerUI.searchPanelToken): This is the text that
+  -  appears in the filter panel popup for the token search operation. -->
+<!ENTITY debuggerUI.searchPanelToken  "Find in this file">
+
+<!-- LOCALIZATION NOTE (debuggerUI.searchPanelLine): This is the text that
+  -  appears in the filter panel popup for the line search operation. -->
+<!ENTITY debuggerUI.searchPanelLine  "Jump to line">
+
 <!-- LOCALIZATION NOTE (emptyScriptText): The text to display in the menulist when
   - there are no scripts. -->
 <!ENTITY debuggerUI.emptyScriptText  "No scripts">

browser/themes/gnomestripe/devtools/debugger.css

@@ -106,6 +106,25 @@
   transform: scale(1.75, 1.75);
 }
 
+#scripts-search-panel .description {
+  margin-top: -6px;
+  margin-bottom: 8px;
+  -moz-margin-start: 0;
+  -moz-margin-end: 0;
+}
+
+#scripts-search-panel button.operator {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  font: 9pt monospace;
+}
+
+#scripts-search-panel label.operator {
+  -moz-padding-start: 6px;
+  padding-bottom: 1px;
+}
+
 /**
  * Stack frames and breakpoints panel
  */

browser/themes/pinstripe/devtools/debugger.css

@@ -108,6 +108,25 @@
   transform: scale(1.75, 1.75);
 }
 
+#scripts-search-panel .description {
+  margin-top: -6px;
+  margin-bottom: 8px;
+  -moz-margin-start: 0;
+  -moz-margin-end: 0;
+}
+
+#scripts-search-panel button.operator {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  font: 9pt monospace;
+}
+
+#scripts-search-panel label.operator {
+  -moz-padding-start: 6px;
+  padding-bottom: 1px;
+}
+
 /**
  * Stack frames and breakpoints panel
  */

browser/themes/winstripe/devtools/debugger.css

@@ -114,6 +114,25 @@
   transform: scale(1.75, 1.75);
 }
 
+#scripts-search-panel .description {
+  margin-top: -6px;
+  margin-bottom: 8px;
+  -moz-margin-start: 0;
+  -moz-margin-end: 0;
+}
+
+#scripts-search-panel button.operator {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  font: 9pt monospace;
+}
+
+#scripts-search-panel label.operator {
+  -moz-padding-start: 6px;
+  padding-bottom: 1px;
+}
+
 /**
  * Stack frames and breakpoints panel
  */