Bug 800857 - Add tests, r=rcampbell

browser/devtools/debugger/debugger-controller.js

@@ -1124,11 +1124,6 @@ SourceScripts.prototype = {
     DebuggerController.Breakpoints.updateEditorBreakpoints();
     DebuggerController.Breakpoints.updatePaneBreakpoints();
 
-    // Make sure the events listeners are up to date.
-    if (DebuggerView.instrumentsPaneTab == "events-tab") {
-      DebuggerController.Breakpoints.DOM.scheduleEventListenersFetch();
-    }
-
     // Signal that sources have been added.
     window.emit(EVENTS.SOURCES_ADDED);
   },

browser/devtools/debugger/test/browser.ini

@@ -33,6 +33,7 @@ support-files =
   doc_empty-tab-01.html
   doc_empty-tab-02.html
   doc_event-listeners.html
+  doc_event-listeners-02.html
   doc_frame-parameters.html
   doc_function-display-name.html
   doc_function-search.html
@@ -64,6 +65,12 @@ support-files =
 [browser_dbg_blackboxing-06.js]
 [browser_dbg_blackboxing-07.js]
 [browser_dbg_breadcrumbs-access.js]
+[browser_dbg_break-on-dom-01.js]
+[browser_dbg_break-on-dom-02.js]
+[browser_dbg_break-on-dom-03.js]
+[browser_dbg_break-on-dom-04.js]
+[browser_dbg_break-on-dom-05.js]
+[browser_dbg_break-on-dom-06.js]
 [browser_dbg_breakpoints-actual-location.js]
 [browser_dbg_breakpoints-contextmenu.js]
 [browser_dbg_breakpoints-disabled-reload.js]

browser/devtools/debugger/test/browser_dbg_break-on-dom-01.js

@@ -0,0 +1,52 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that event listeners aren't fetched when the events tab isn't selected.
+ */
+
+const TAB_URL = EXAMPLE_URL + "doc_event-listeners-02.html";
+
+function test() {
+  initDebugger(TAB_URL).then(([aTab, aDebuggee, aPanel]) => {
+    let gDebugger = aPanel.panelWin;
+    let gView = gDebugger.DebuggerView;
+    let gEvents = gView.EventListeners;
+
+    gDebugger.on(gDebugger.EVENTS.EVENT_LISTENERS_FETCHED, () => {
+      ok(false, "Shouldn't have fetched any event listeners.");
+    });
+    gDebugger.on(gDebugger.EVENTS.EVENT_BREAKPOINTS_UPDATED, () => {
+      ok(false, "Shouldn't have updated any event breakpoints.");
+    });
+
+    gView.toggleInstrumentsPane({ visible: true, animated: false });
+
+    is(gView.instrumentsPaneHidden, false,
+      "The instruments pane should be visible now.");
+    is(gView.instrumentsPaneTab, "variables-tab",
+      "The variables tab should be selected by default.");
+
+    Task.spawn(function() {
+      yield waitForSourceShown(aPanel, ".html");
+      is(gEvents.itemCount, 0, "There should be no events before reloading.");
+
+      let reloaded = waitForSourcesAfterReload();
+      gDebugger.gClient.activeTab.reload();
+
+      is(gEvents.itemCount, 0, "There should be no events while reloading.");
+      yield reloaded;
+      is(gEvents.itemCount, 0, "There should be no events after reloading.");
+
+      yield closeDebuggerAndFinish(aPanel);
+    });
+
+    function waitForSourcesAfterReload() {
+      return promise.all([
+        waitForDebuggerEvents(aPanel, gDebugger.EVENTS.NEW_SOURCE),
+        waitForDebuggerEvents(aPanel, gDebugger.EVENTS.SOURCES_ADDED),
+        waitForDebuggerEvents(aPanel, gDebugger.EVENTS.SOURCE_SHOWN)
+      ]);
+    }
+  });
+}

browser/devtools/debugger/test/browser_dbg_break-on-dom-02.js

@@ -0,0 +1,126 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that event listeners are fetched when the events tab is selected
+ * or while sources are fetched and the events tab is focused.
+ */
+
+const TAB_URL = EXAMPLE_URL + "doc_event-listeners-02.html";
+
+function test() {
+  initDebugger(TAB_URL).then(([aTab, aDebuggee, aPanel]) => {
+    let gDebugger = aPanel.panelWin;
+    let gView = gDebugger.DebuggerView;
+    let gEvents = gView.EventListeners;
+
+    Task.spawn(function() {
+      yield waitForSourceShown(aPanel, ".html");
+      yield testFetchOnFocus();
+      yield testFetchOnReloadWhenFocused();
+      yield testFetchOnReloadWhenNotFocused();
+      yield closeDebuggerAndFinish(aPanel);
+    });
+
+    function testFetchOnFocus() {
+      return Task.spawn(function() {
+        let fetched = waitForDebuggerEvents(aPanel, gDebugger.EVENTS.EVENT_LISTENERS_FETCHED);
+
+        gView.toggleInstrumentsPane({ visible: true, animated: false }, 1);
+        is(gView.instrumentsPaneHidden, false,
+          "The instruments pane should be visible now.");
+        is(gView.instrumentsPaneTab, "events-tab",
+          "The events tab should be selected.");
+
+        yield fetched;
+
+        ok(true,
+          "Event listeners were fetched when the events tab was selected");
+        is(gEvents.itemCount, 4,
+          "There should be 4 events displayed in the view.");
+      });
+    }
+
+    function testFetchOnReloadWhenFocused() {
+      return Task.spawn(function() {
+        let fetched = waitForDebuggerEvents(aPanel, gDebugger.EVENTS.EVENT_LISTENERS_FETCHED);
+
+        let reloading = once(gDebugger.gTarget, "will-navigate");
+        let reloaded = waitForSourcesAfterReload();
+        gDebugger.gClient.activeTab.reload();
+
+        yield reloading;
+
+        is(gEvents.itemCount, 0,
+          "There should be no events displayed in the view while reloading.");
+        ok(true,
+          "Event listeners were removed when the target started navigating.");
+
+        yield reloaded;
+
+        is(gView.instrumentsPaneHidden, false,
+          "The instruments pane should still be visible.");
+        is(gView.instrumentsPaneTab, "events-tab",
+          "The events tab should still be selected.");
+
+        yield fetched;
+
+        is(gEvents.itemCount, 4,
+          "There should be 4 events displayed in the view after reloading.");
+        ok(true,
+          "Event listeners were added back after the target finished navigating.");
+      });
+    }
+
+    function testFetchOnReloadWhenNotFocused() {
+      return Task.spawn(function() {
+        gDebugger.on(gDebugger.EVENTS.EVENT_LISTENERS_FETCHED, () => {
+          ok(false, "Shouldn't have fetched any event listeners.");
+        });
+        gDebugger.on(gDebugger.EVENTS.EVENT_BREAKPOINTS_UPDATED, () => {
+          ok(false, "Shouldn't have updated any event breakpoints.");
+        });
+
+        gView.toggleInstrumentsPane({ visible: true, animated: false }, 0);
+        is(gView.instrumentsPaneHidden, false,
+          "The instruments pane should still be visible.");
+        is(gView.instrumentsPaneTab, "variables-tab",
+          "The variables tab should be selected.");
+
+        let reloading = once(gDebugger.gTarget, "will-navigate");
+        let reloaded = waitForSourcesAfterReload();
+        gDebugger.gClient.activeTab.reload();
+
+        yield reloading;
+
+        is(gEvents.itemCount, 0,
+          "There should be no events displayed in the view while reloading.");
+        ok(true,
+          "Event listeners were removed when the target started navigating.");
+
+        yield reloaded;
+
+        is(gView.instrumentsPaneHidden, false,
+          "The instruments pane should still be visible.");
+        is(gView.instrumentsPaneTab, "variables-tab",
+          "The variables tab should still be selected.");
+
+        // Just to be really sure that the events will never ever fire.
+        yield waitForTime(1000);
+
+        is(gEvents.itemCount, 0,
+          "There should be no events displayed in the view after reloading.");
+        ok(true,
+          "Event listeners were not added after the target finished navigating.");
+      });
+    }
+
+    function waitForSourcesAfterReload() {
+      return promise.all([
+        waitForDebuggerEvents(aPanel, gDebugger.EVENTS.NEW_SOURCE),
+        waitForDebuggerEvents(aPanel, gDebugger.EVENTS.SOURCES_ADDED),
+        waitForDebuggerEvents(aPanel, gDebugger.EVENTS.SOURCE_SHOWN)
+      ]);
+    }
+  });
+}

browser/devtools/debugger/test/browser_dbg_break-on-dom-03.js

@@ -0,0 +1,89 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that event listeners are properly displayed in the view.
+ */
+
+const TAB_URL = EXAMPLE_URL + "doc_event-listeners-02.html";
+
+function test() {
+  initDebugger(TAB_URL).then(([aTab, aDebuggee, aPanel]) => {
+    let gDebugger = aPanel.panelWin;
+    let gView = gDebugger.DebuggerView;
+    let gEvents = gView.EventListeners;
+
+    Task.spawn(function() {
+      yield waitForSourceShown(aPanel, ".html");
+
+      let fetched = waitForDebuggerEvents(aPanel, gDebugger.EVENTS.EVENT_LISTENERS_FETCHED);
+      gView.toggleInstrumentsPane({ visible: true, animated: false }, 1);
+      yield fetched;
+
+      is(gEvents.widget._parent.querySelectorAll(".side-menu-widget-group").length, 3,
+        "There should be 3 groups shown in the view.");
+      is(gEvents.widget._parent.querySelectorAll(".side-menu-widget-group-checkbox").length, 3,
+        "There should be a checkbox for each group shown in the view.");
+
+      is(gEvents.widget._parent.querySelectorAll(".side-menu-widget-item").length, 4,
+        "There should be 4 items shown in the view.");
+      is(gEvents.widget._parent.querySelectorAll(".side-menu-widget-item-checkbox").length, 4,
+        "There should be a checkbox for each item shown in the view.");
+
+      testEventItem(0, "doc_event-listeners-02.html", "keydown", ["window", "body"], false);
+      testEventItem(1, "doc_event-listeners-02.html", "click", ["body > button:nth-child(1)"], false);
+      testEventItem(2, "doc_event-listeners-02.html", "change", ["body > input:nth-child(2)"], false);
+      testEventItem(3, "doc_event-listeners-02.html", "keyup", ["body > input:nth-child(2)"], false);
+
+      testEventGroup("interactionEvents", false);
+      testEventGroup("keyboardEvents", false);
+      testEventGroup("mouseEvents", false);
+
+      is(gEvents.getAllEvents().toString(), "keydown,click,change,keyup",
+        "The getAllEvents() method returns the correct stuff.");
+      is(gEvents.getCheckedEvents().toString(), "",
+        "The getCheckedEvents() method returns the correct stuff.");
+
+      yield ensureThreadClientState(aPanel, "resumed");
+      yield closeDebuggerAndFinish(aPanel);
+    });
+
+    function testEventItem(index, label, type, selectors, checked) {
+      let item = gEvents.items[index];
+      let node = item.target;
+
+      ok(item.attachment.url.contains(label),
+        "The event at index " + index + " has the correct url.");
+      is(item.attachment.type, type,
+        "The event at index " + index + " has the correct type.");
+      is(item.attachment.selectors.toString(), selectors,
+        "The event at index " + index + " has the correct selectors.");
+      is(item.attachment.checkboxState, checked,
+        "The event at index " + index + " has the correct checkbox state.");
+
+      let targets = selectors.length > 1
+        ? gDebugger.L10N.getFormatStr("eventNodes", selectors.length)
+        : selectors.toString();
+
+      is(node.querySelector(".dbg-event-listener-type").getAttribute("value"), type,
+        "The correct type is shown for this event.");
+      is(node.querySelector(".dbg-event-listener-targets").getAttribute("value"), targets,
+        "The correct target is shown for this event.");
+      is(node.querySelector(".dbg-event-listener-location").getAttribute("value"), label,
+        "The correct location is shown for this event.");
+      is(node.parentNode.querySelector(".side-menu-widget-item-checkbox").checked, checked,
+        "The correct checkbox state is shown for this event.");
+    }
+
+    function testEventGroup(string, checked) {
+      let name = gDebugger.L10N.getStr(string);
+      let group = gEvents.widget._parent
+        .querySelector(".side-menu-widget-group[name=" + name + "]");
+
+      is(group.querySelector(".side-menu-widget-group-title > .name").value, name,
+        "The correct label is shown for the group named " + name + ".");
+      is(group.querySelector(".side-menu-widget-group-checkbox").checked, checked,
+        "The correct checkbox state is shown for the group named " + name + ".");
+    }
+  });
+}

browser/devtools/debugger/test/browser_dbg_break-on-dom-04.js

@@ -0,0 +1,97 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that checking/unchecking an event listener in the view correctly
+ * causes the active thread to get updated with the new event breakpoints.
+ */
+
+const TAB_URL = EXAMPLE_URL + "doc_event-listeners-02.html";
+
+function test() {
+  initDebugger(TAB_URL).then(([aTab, aDebuggee, aPanel]) => {
+    let gDebugger = aPanel.panelWin;
+    let gView = gDebugger.DebuggerView;
+    let gController = gDebugger.DebuggerController
+    let gEvents = gView.EventListeners;
+    let gBreakpoints = gController.Breakpoints;
+
+    Task.spawn(function() {
+      yield waitForSourceShown(aPanel, ".html");
+
+      let fetched = waitForDebuggerEvents(aPanel, gDebugger.EVENTS.EVENT_LISTENERS_FETCHED);
+      gView.toggleInstrumentsPane({ visible: true, animated: false }, 1);
+      yield fetched;
+
+      testEventItem(0, false);
+      testEventItem(1, false);
+      testEventItem(2, false);
+      testEventItem(3, false);
+      testEventGroup("interactionEvents", false);
+      testEventGroup("keyboardEvents", false);
+      testEventGroup("mouseEvents", false);
+      testEventArrays("keydown,click,change,keyup", "");
+
+      let updated = waitForDebuggerEvents(aPanel, gDebugger.EVENTS.EVENT_BREAKPOINTS_UPDATED);
+      EventUtils.sendMouseEvent({ type: "click" }, getItemCheckboxNode(0), gDebugger);
+      yield updated;
+
+      testEventItem(0, true);
+      testEventItem(1, false);
+      testEventItem(2, false);
+      testEventItem(3, false);
+      testEventGroup("interactionEvents", false);
+      testEventGroup("keyboardEvents", false);
+      testEventGroup("mouseEvents", false);
+      testEventArrays("keydown,click,change,keyup", "keydown");
+
+      let updated = waitForDebuggerEvents(aPanel, gDebugger.EVENTS.EVENT_BREAKPOINTS_UPDATED);
+      EventUtils.sendMouseEvent({ type: "click" }, getItemCheckboxNode(0), gDebugger);
+      yield updated;
+
+      testEventItem(0, false);
+      testEventItem(1, false);
+      testEventItem(2, false);
+      testEventItem(3, false);
+      testEventGroup("interactionEvents", false);
+      testEventGroup("keyboardEvents", false);
+      testEventGroup("mouseEvents", false);
+      testEventArrays("keydown,click,change,keyup", "");
+
+      yield ensureThreadClientState(aPanel, "resumed");
+      yield closeDebuggerAndFinish(aPanel);
+    });
+
+    function getItemCheckboxNode(index) {
+      return gEvents.items[index].target.parentNode
+        .querySelector(".side-menu-widget-item-checkbox");
+    }
+
+    function getGroupCheckboxNode(string) {
+      return gEvents.widget._parent
+        .querySelector(".side-menu-widget-group[name=" + gDebugger.L10N.getStr(string) + "]")
+        .querySelector(".side-menu-widget-group-checkbox");
+    }
+
+    function testEventItem(index, checked) {
+      is(gEvents.attachments[index].checkboxState, checked,
+        "The event at index " + index + " has the correct checkbox state.");
+      is(getItemCheckboxNode(index).checked, checked,
+        "The correct checkbox state is shown for this event.");
+    }
+
+    function testEventGroup(string, checked) {
+      is(getGroupCheckboxNode(string).checked, checked,
+        "The correct checkbox state is shown for the group " + string + ".");
+    }
+
+    function testEventArrays(all, checked) {
+      is(gEvents.getAllEvents().toString(), all,
+        "The getAllEvents() method returns the correct stuff.");
+      is(gEvents.getCheckedEvents().toString(), checked,
+        "The getCheckedEvents() method returns the correct stuff.");
+      is(gBreakpoints.DOM.activeEventNames.toString(), checked,
+        "The correct event names are listed as being active breakpoints.");
+    }
+  });
+}

browser/devtools/debugger/test/browser_dbg_break-on-dom-05.js

@@ -0,0 +1,124 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that checking/unchecking an event listener's group in the view will
+ * cause the active thread to get updated with the new event breakpoints for
+ * all children inside that group.
+ */
+
+const TAB_URL = EXAMPLE_URL + "doc_event-listeners-02.html";
+
+function test() {
+  initDebugger(TAB_URL).then(([aTab, aDebuggee, aPanel]) => {
+    let gDebugger = aPanel.panelWin;
+    let gView = gDebugger.DebuggerView;
+    let gController = gDebugger.DebuggerController
+    let gEvents = gView.EventListeners;
+    let gBreakpoints = gController.Breakpoints;
+
+    Task.spawn(function() {
+      yield waitForSourceShown(aPanel, ".html");
+
+      let fetched = waitForDebuggerEvents(aPanel, gDebugger.EVENTS.EVENT_LISTENERS_FETCHED);
+      gView.toggleInstrumentsPane({ visible: true, animated: false }, 1);
+      yield fetched;
+
+      testEventItem(0, false);
+      testEventItem(1, false);
+      testEventItem(2, false);
+      testEventItem(3, false);
+      testEventGroup("interactionEvents", false);
+      testEventGroup("keyboardEvents", false);
+      testEventGroup("mouseEvents", false);
+      testEventArrays("keydown,click,change,keyup", "");
+
+      let updated = waitForDebuggerEvents(aPanel, gDebugger.EVENTS.EVENT_BREAKPOINTS_UPDATED);
+      EventUtils.sendMouseEvent({ type: "click" }, getGroupCheckboxNode("interactionEvents"), gDebugger);
+      yield updated;
+
+      testEventItem(0, false);
+      testEventItem(1, false);
+      testEventItem(2, true);
+      testEventItem(3, false);
+      testEventGroup("interactionEvents", true);
+      testEventGroup("keyboardEvents", false);
+      testEventGroup("mouseEvents", false);
+      testEventArrays("keydown,click,change,keyup", "change");
+
+      let updated = waitForDebuggerEvents(aPanel, gDebugger.EVENTS.EVENT_BREAKPOINTS_UPDATED);
+      EventUtils.sendMouseEvent({ type: "click" }, getGroupCheckboxNode("interactionEvents"), gDebugger);
+      yield updated;
+
+      testEventItem(0, false);
+      testEventItem(1, false);
+      testEventItem(2, false);
+      testEventItem(3, false);
+      testEventGroup("interactionEvents", false);
+      testEventGroup("keyboardEvents", false);
+      testEventGroup("mouseEvents", false);
+      testEventArrays("keydown,click,change,keyup", "");
+
+      let updated = waitForDebuggerEvents(aPanel, gDebugger.EVENTS.EVENT_BREAKPOINTS_UPDATED);
+      EventUtils.sendMouseEvent({ type: "click" }, getGroupCheckboxNode("keyboardEvents"), gDebugger);
+      yield updated;
+
+      testEventItem(0, true);
+      testEventItem(1, false);
+      testEventItem(2, false);
+      testEventItem(3, true);
+      testEventGroup("interactionEvents", false);
+      testEventGroup("keyboardEvents", true);
+      testEventGroup("mouseEvents", false);
+      testEventArrays("keydown,click,change,keyup", "keydown,keyup");
+
+      let updated = waitForDebuggerEvents(aPanel, gDebugger.EVENTS.EVENT_BREAKPOINTS_UPDATED);
+      EventUtils.sendMouseEvent({ type: "click" }, getGroupCheckboxNode("keyboardEvents"), gDebugger);
+      yield updated;
+
+      testEventItem(0, false);
+      testEventItem(1, false);
+      testEventItem(2, false);
+      testEventItem(3, false);
+      testEventGroup("interactionEvents", false);
+      testEventGroup("keyboardEvents", false);
+      testEventGroup("mouseEvents", false);
+      testEventArrays("keydown,click,change,keyup", "");
+
+      yield ensureThreadClientState(aPanel, "resumed");
+      yield closeDebuggerAndFinish(aPanel);
+    });
+
+    function getItemCheckboxNode(index) {
+      return gEvents.items[index].target.parentNode
+        .querySelector(".side-menu-widget-item-checkbox");
+    }
+
+    function getGroupCheckboxNode(string) {
+      return gEvents.widget._parent
+        .querySelector(".side-menu-widget-group[name=" + gDebugger.L10N.getStr(string) + "]")
+        .querySelector(".side-menu-widget-group-checkbox");
+    }
+
+    function testEventItem(index, checked) {
+      is(gEvents.attachments[index].checkboxState, checked,
+        "The event at index " + index + " has the correct checkbox state.");
+      is(getItemCheckboxNode(index).checked, checked,
+        "The correct checkbox state is shown for this event.");
+    }
+
+    function testEventGroup(string, checked) {
+      is(getGroupCheckboxNode(string).checked, checked,
+        "The correct checkbox state is shown for the group " + string + ".");
+    }
+
+    function testEventArrays(all, checked) {
+      is(gEvents.getAllEvents().toString(), all,
+        "The getAllEvents() method returns the correct stuff.");
+      is(gEvents.getCheckedEvents().toString(), checked,
+        "The getCheckedEvents() method returns the correct stuff.");
+      is(gBreakpoints.DOM.activeEventNames.toString(), checked,
+        "The correct event names are listed as being active breakpoints.");
+    }
+  });
+}

browser/devtools/debugger/test/browser_dbg_break-on-dom-06.js

@@ -0,0 +1,123 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that the event listener states are preserved in the view after the
+ * target navigates.
+ */
+
+const TAB_URL = EXAMPLE_URL + "doc_event-listeners-02.html";
+
+function test() {
+  initDebugger(TAB_URL).then(([aTab, aDebuggee, aPanel]) => {
+    let gDebugger = aPanel.panelWin;
+    let gView = gDebugger.DebuggerView;
+    let gController = gDebugger.DebuggerController
+    let gEvents = gView.EventListeners;
+    let gBreakpoints = gController.Breakpoints;
+
+    Task.spawn(function() {
+      yield waitForSourceShown(aPanel, ".html");
+
+      let fetched = waitForDebuggerEvents(aPanel, gDebugger.EVENTS.EVENT_LISTENERS_FETCHED);
+      gView.toggleInstrumentsPane({ visible: true, animated: false }, 1);
+      yield fetched;
+
+      testEventItem(0, false);
+      testEventItem(1, false);
+      testEventItem(2, false);
+      testEventItem(3, false);
+      testEventGroup("interactionEvents", false);
+      testEventGroup("keyboardEvents", false);
+      testEventGroup("mouseEvents", false);
+      testEventArrays("keydown,click,change,keyup", "");
+
+      let updated = waitForDebuggerEvents(aPanel, gDebugger.EVENTS.EVENT_BREAKPOINTS_UPDATED);
+      EventUtils.sendMouseEvent({ type: "click" }, getItemCheckboxNode(0), gDebugger);
+      EventUtils.sendMouseEvent({ type: "click" }, getItemCheckboxNode(1), gDebugger);
+      EventUtils.sendMouseEvent({ type: "click" }, getItemCheckboxNode(2), gDebugger);
+      yield updated;
+
+      testEventItem(0, true);
+      testEventItem(1, true);
+      testEventItem(2, true);
+      testEventItem(3, false);
+      testEventGroup("interactionEvents", false);
+      testEventGroup("keyboardEvents", false);
+      testEventGroup("mouseEvents", false);
+      testEventArrays("keydown,click,change,keyup", "keydown,click,change");
+
+      yield reloadActiveTab(aPanel, gDebugger.EVENTS.EVENT_LISTENERS_FETCHED);
+
+      testEventItem(0, true);
+      testEventItem(1, true);
+      testEventItem(2, true);
+      testEventItem(3, false);
+      testEventGroup("interactionEvents", false);
+      testEventGroup("keyboardEvents", false);
+      testEventGroup("mouseEvents", false);
+      testEventArrays("keydown,click,change,keyup", "keydown,click,change");
+
+      let updated = waitForDebuggerEvents(aPanel, gDebugger.EVENTS.EVENT_BREAKPOINTS_UPDATED);
+      EventUtils.sendMouseEvent({ type: "click" }, getItemCheckboxNode(0), gDebugger);
+      EventUtils.sendMouseEvent({ type: "click" }, getItemCheckboxNode(1), gDebugger);
+      EventUtils.sendMouseEvent({ type: "click" }, getItemCheckboxNode(2), gDebugger);
+      yield updated;
+
+      testEventItem(0, false);
+      testEventItem(1, false);
+      testEventItem(2, false);
+      testEventItem(3, false);
+      testEventGroup("interactionEvents", false);
+      testEventGroup("keyboardEvents", false);
+      testEventGroup("mouseEvents", false);
+      testEventArrays("keydown,click,change,keyup", "");
+
+      yield reloadActiveTab(aPanel, gDebugger.EVENTS.EVENT_LISTENERS_FETCHED);
+
+      testEventItem(0, false);
+      testEventItem(1, false);
+      testEventItem(2, false);
+      testEventItem(3, false);
+      testEventGroup("interactionEvents", false);
+      testEventGroup("keyboardEvents", false);
+      testEventGroup("mouseEvents", false);
+      testEventArrays("keydown,click,change,keyup", "");
+
+      yield ensureThreadClientState(aPanel, "resumed");
+      yield closeDebuggerAndFinish(aPanel);
+    });
+
+    function getItemCheckboxNode(index) {
+      return gEvents.items[index].target.parentNode
+        .querySelector(".side-menu-widget-item-checkbox");
+    }
+
+    function getGroupCheckboxNode(string) {
+      return gEvents.widget._parent
+        .querySelector(".side-menu-widget-group[name=" + gDebugger.L10N.getStr(string) + "]")
+        .querySelector(".side-menu-widget-group-checkbox");
+    }
+
+    function testEventItem(index, checked) {
+      is(gEvents.attachments[index].checkboxState, checked,
+        "The event at index " + index + " has the correct checkbox state.");
+      is(getItemCheckboxNode(index).checked, checked,
+        "The correct checkbox state is shown for this event.");
+    }
+
+    function testEventGroup(string, checked) {
+      is(getGroupCheckboxNode(string).checked, checked,
+        "The correct checkbox state is shown for the group " + string + ".");
+    }
+
+    function testEventArrays(all, checked) {
+      is(gEvents.getAllEvents().toString(), all,
+        "The getAllEvents() method returns the correct stuff.");
+      is(gEvents.getCheckedEvents().toString(), checked,
+        "The getCheckedEvents() method returns the correct stuff.");
+      is(gBreakpoints.DOM.activeEventNames.toString(), checked,
+        "The correct event names are listed as being active breakpoints.");
+    }
+  });
+}

browser/devtools/debugger/test/browser_dbg_break-on-dom-event.js

@@ -212,7 +212,7 @@ function triggerInputKeyup() {
 }
 
 function triggerButtonClick() {
-  EventUtils.sendMouseEvent({ type: "click" }, gButton)
+  EventUtils.sendMouseEvent({ type: "click" }, gButton);
 }
 
 function triggerInputChange() {

browser/devtools/debugger/test/browser_dbg_location-changes-01-simple.js

@@ -49,11 +49,11 @@ function performTest() {
   is(gSources.widget.getAttribute("tooltiptext"), "example.com test",
     "The sources widget should have a correct tooltip text attribute.");
 
-  is(gDebugger.document.querySelectorAll(".side-menu-widget-empty-notice-container").length, 0,
+  is(gDebugger.document.querySelectorAll("#sources .side-menu-widget-empty-notice-container").length, 0,
     "The sources widget should not display any notice at this point (1).");
-  is(gDebugger.document.querySelectorAll(".side-menu-widget-empty-notice").length, 0,
+  is(gDebugger.document.querySelectorAll("#sources .side-menu-widget-empty-notice").length, 0,
     "The sources widget should not display any notice at this point (2).");
-  is(gDebugger.document.querySelector(".side-menu-widget-empty-notice > label"), null,
+  is(gDebugger.document.querySelector("#sources .side-menu-widget-empty-notice > label"), null,
     "The sources widget should not display a notice at this point (3).");
 
   gDebugger.gThreadClient.resume(() => {

browser/devtools/debugger/test/browser_dbg_location-changes-02-blank.js

@@ -48,11 +48,11 @@ function testLocationChange() {
     is(gSources.widget.getAttribute("tooltiptext"), "",
       "The sources widget shouldn't have any tooltip text attribute when there are no sources available.");
 
-    is(gDebugger.document.querySelectorAll(".side-menu-widget-empty-notice-container").length, 1,
+    is(gDebugger.document.querySelectorAll("#sources .side-menu-widget-empty-notice-container").length, 1,
       "The sources widget should now display a notice (1).");
-    is(gDebugger.document.querySelectorAll(".side-menu-widget-empty-notice").length, 1,
+    is(gDebugger.document.querySelectorAll("#sources .side-menu-widget-empty-notice").length, 1,
       "The sources widget should now display a notice (2).");
-    is(gDebugger.document.querySelector(".side-menu-widget-empty-notice").getAttribute("value"),
+    is(gDebugger.document.querySelector("#sources .side-menu-widget-empty-notice").getAttribute("value"),
        gSources.widget.getAttribute("label"),
       "The sources widget should now display a notice (3).");
 

browser/devtools/debugger/test/browser_dbg_location-changes-03-new.js

@@ -51,11 +51,11 @@ function testLocationChange() {
     is(gSources.widget.getAttribute("tooltiptext"), "example.com test",
       "The sources widget should have a correct tooltip text attribute.");
 
-    is(gDebugger.document.querySelectorAll(".side-menu-widget-empty-notice-container").length, 0,
+    is(gDebugger.document.querySelectorAll("#sources .side-menu-widget-empty-notice-container").length, 0,
       "The sources widget should not display any notice at this point (1).");
-    is(gDebugger.document.querySelectorAll(".side-menu-widget-empty-notice").length, 0,
+    is(gDebugger.document.querySelectorAll("#sources .side-menu-widget-empty-notice").length, 0,
       "The sources widget should not display any notice at this point (2).");
-    is(gDebugger.document.querySelector(".side-menu-widget-empty-notice > label"), null,
+    is(gDebugger.document.querySelector("#sources .side-menu-widget-empty-notice > label"), null,
       "The sources widget should not display a notice at this point (3).");
 
     closeDebuggerAndFinish(gPanel);

browser/devtools/debugger/test/browser_dbg_variables-view-large-array-buffer.js

@@ -85,14 +85,18 @@ function performTest() {
   let paints = 0;
 
   // Make sure the variables view doesn't scroll while adding the properties.
-  let scrollTop = gVariables._list.parentNode.scrollTop;
+  let [oldX, oldY] = getScroll();
+  info("Initial scroll position: " + oldX + ", " + oldY);
 
   waitForProperties(total, {
     onLoading: function(aLoaded) {
       ok(aLoaded >= loaded,
         "Should have loaded more properties.");
-      is(gVariables._list.scrollTop, scrollTop,
-        "The variables view hasn't scrolled.");
+
+      let [newX, newY] = getScroll();
+      info("Current scroll position: " + newX + " " + newY);
+      is(oldX, newX, "The variables view hasn't scrolled horizontally.");
+      is(oldY, newY, "The variables view hasn't scrolled vertically.");
 
       info("Displayed " + aLoaded + " properties, not finished yet.");
 
@@ -102,11 +106,14 @@ function performTest() {
     onFinished: function(aLoaded) {
       ok(aLoaded == total,
         "Displayed all the properties.");
-      is(gVariables._list.scrollTop, scrollTop,
-        "The variables view hasn't scrolled.");
       isnot(paints, 0,
         "Debugger was unresponsive, sad panda.");
 
+      let [newX, newY] = getScroll();
+      info("Current scroll position: " + newX + ", " + newY);
+      is(oldX, newX, "The variables view hasn't scrolled horizontally.");
+      is(oldY, newY, "The variables view hasn't scrolled vertically.");
+
       is(bufferVar._enum.childNodes.length, 0,
         "The bufferVar should contain all the created enumerable elements.");
       is(bufferVar._nonenum.childNodes.length, 2,
@@ -177,6 +184,13 @@ function performTest() {
     }
   });
 
+  function getScroll() {
+    let scrollX = {};
+    let scrollY = {};
+    gVariables._boxObject.getPosition(scrollX, scrollY);
+    return [scrollX.value, scrollY.value];
+  }
+
   return deferred.promise;
 }
 

browser/devtools/debugger/test/doc_event-listeners-02.html

@@ -0,0 +1,49 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Debugger test page</title>
+  </head>
+
+  <body>
+    <button>Click me!</button>
+    <input type="text" onchange="changeHandler()">
+
+    <script type="text/javascript">
+      window.addEventListener("load", function onload() {
+        window.removeEventListener("load", onload);
+        function initialSetup(event) {
+          debugger;
+          var button = document.querySelector("button");
+          button.onclick = clickHandler;
+        }
+        function clickHandler(event) {
+          window.foobar = "clickHandler";
+        }
+        function changeHandler(event) {
+          window.foobar = "changeHandler";
+        }
+        function keyupHandler(event) {
+          window.foobar = "keyupHandler";
+        }
+        function keydownHandler(event) {
+          window.foobar = "keydownHandler";
+        }
+
+        var button = document.querySelector("button");
+        button.onclick = initialSetup;
+
+        var input = document.querySelector("input");
+        input.addEventListener("keyup", keyupHandler, true);
+
+        window.addEventListener("keydown", keydownHandler, true);
+        document.body.addEventListener("keydown", keydownHandler, true);
+
+        window.changeHandler = changeHandler;
+      });
+    </script>
+  </body>
+
+</html>

browser/devtools/debugger/test/head.js

@@ -74,6 +74,7 @@ function addTab(aUrl, aWindow) {
 
   linkedBrowser.addEventListener("load", function onLoad() {
     linkedBrowser.removeEventListener("load", onLoad, true);
+    info("Tab added and finished loading: " + aUrl);
     deferred.resolve(tab);
   }, true);
 
@@ -90,6 +91,7 @@ function removeTab(aTab, aWindow) {
 
   tabContainer.addEventListener("TabClose", function onClose(aEvent) {
     tabContainer.removeEventListener("TabClose", onClose, false);
+    info("Tab removed and finished closing.");
     deferred.resolve();
   }, false);
 
@@ -212,6 +214,12 @@ function waitForTick() {
   return deferred.promise;
 }
 
+function waitForTime(aDelay) {
+  let deferred = promise.defer();
+  setTimeout(deferred.resolve, aDelay);
+  return deferred.promise;
+}
+
 function waitForSourceShown(aPanel, aUrl) {
   return waitForDebuggerEvents(aPanel, aPanel.panelWin.EVENTS.SOURCE_SHOWN).then(aSource => {
     let sourceUrl = aSource.url;