Bug 1674307 - Add focusin and focusout checkboxes in Event Listener Breakpoints r=bomsy
authorYogita <yogitab2798@gmail.com>
Tue, 23 Feb 2021 08:46:42 +0000
changeset 568361 7a2e24377ae37536b74940f14c3b89a8bad04acc
parent 568360 20c676649a867d1e709ffafc10186405e2e9505e
child 568362 ccfc7c7eb3973902e2781ca9bbd5cfeaf2d1e264
push id38232
push userdluca@mozilla.com
push dateTue, 23 Feb 2021 23:03:32 +0000
treeherdermozilla-central@b422dd886e03 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbomsy
bugs1674307
milestone88.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1674307 - Add focusin and focusout checkboxes in Event Listener Breakpoints r=bomsy Differential Revision: https://phabricator.services.mozilla.com/D103441
devtools/client/debugger/test/mochitest/browser_dbg-event-breakpoints.js
devtools/client/debugger/test/mochitest/examples/doc-event-breakpoints.html
devtools/client/debugger/test/mochitest/examples/event-breakpoints.js
devtools/server/actors/utils/event-breakpoints.js
--- a/devtools/client/debugger/test/mochitest/browser_dbg-event-breakpoints.js
+++ b/devtools/client/debugger/test/mochitest/browser_dbg-event-breakpoints.js
@@ -11,16 +11,18 @@ add_task(async function() {
   const dbg = await initDebugger(
     "doc-event-breakpoints.html",
     "event-breakpoints"
   );
   await selectSource(dbg, "event-breakpoints");
   await waitForSelectedSource(dbg, "event-breakpoints");
 
   await dbg.actions.addEventListenerBreakpoints([
+    "event.control.focusin",
+    "event.control.focusout",
     "event.mouse.click",
     "event.xhr.load",
     "timer.timeout.set",
     "timer.timeout.fire",
     "script.source.firstStatement",
   ]);
 
   invokeInTab("clickHandler");
@@ -42,16 +44,26 @@ add_task(async function() {
   assertPauseLocation(dbg, 28);
   await resume(dbg);
 
   invokeInTab("evalHandler");
   await waitForPaused(dbg);
   assertPauseLocation(dbg, 2, "http://example.com/eval-test.js");
   await resume(dbg);
 
+  invokeOnElement("#focus-text", "focus");
+  await waitForPaused(dbg);
+  assertPauseLocation(dbg, 43);
+  await resume(dbg);
+
+  // wait for focus-out event to fire
+  await waitForPaused(dbg);
+  assertPauseLocation(dbg, 48);
+  await resume(dbg);
+
   // Test that we don't pause on event breakpoints when source is blackboxed.
   await clickElement(dbg, "blackbox");
   await waitForDispatch(dbg, "BLACKBOX");
 
   invokeInTab("clickHandler");
   is(isPaused(dbg), false);
 
   invokeInTab("xhrHandler");
@@ -70,8 +82,15 @@ function assertPauseLocation(dbg, line, 
 
   const source = findSource(dbg, url);
 
   is(location.sourceId, source.id, `correct sourceId`);
   is(location.line, line, `correct line`);
 
   assertPausedLocation(dbg);
 }
+
+async function invokeOnElement(selector, action) {
+  await SpecialPowers.focus(gBrowser.selectedBrowser);
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [selector, action], (_selector, _action) => {
+    content.document.querySelector(_selector)[_action]();
+  });
+}
--- a/devtools/client/debugger/test/mochitest/examples/doc-event-breakpoints.html
+++ b/devtools/client/debugger/test/mochitest/examples/doc-event-breakpoints.html
@@ -4,16 +4,17 @@
 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8"/>
     <title>Debugger event bp test page</title>
   </head>
 
   <body>
+    <input type="text" id="focus-text" value="Text">
     <button id="click-button">Run Click Handler</button>
     <button id="xhr-button">Run XHR Handler</button>
     <button id="timer-button">Run Timer Handler</button>
     <button id="eval-button">Run Eval</button>
     <div id="click-target" style="margin: 50px; background-color: green;">
       Click Target
     </div>
     <script src="event-breakpoints.js"></script>
--- a/devtools/client/debugger/test/mochitest/examples/event-breakpoints.js
+++ b/devtools/client/debugger/test/mochitest/examples/event-breakpoints.js
@@ -32,8 +32,18 @@ function timerHandler() {
 
 document.getElementById("eval-button").onmousedown = evalHandler;
 function evalHandler() {
   eval(`
     console.log("eval ran");
     //# sourceURL=http://example.com/eval-test.js
   `);
 }
+
+document.getElementById("focus-text").addEventListener("focusin", inputFocused);
+function inputFocused() {
+  console.log("focused");
+}
+
+document.getElementById("focus-text").addEventListener("focusout", inputFocusOut);
+function inputFocusOut() {
+  console.log("focus lost");
+}
--- a/devtools/server/actors/utils/event-breakpoints.js
+++ b/devtools/server/actors/utils/event-breakpoints.js
@@ -120,16 +120,18 @@ const AVAILABLE_BREAKPOINTS = [
   },
   {
     name: "Control",
     items: [
       generalEvent("control", "resize"),
       generalEvent("control", "scroll"),
       generalEvent("control", "zoom"),
       generalEvent("control", "focus"),
+      generalEvent("control", "focusin"),
+      generalEvent("control", "focusout"),
       generalEvent("control", "blur"),
       generalEvent("control", "select"),
       generalEvent("control", "change"),
       generalEvent("control", "submit"),
       generalEvent("control", "reset"),
     ],
   },
   {