Bug 1437848 - Enable browser_console_filters.js in new frontend r?nchevobbe draft
authorMichael Ratcliffe <mratcliffe@mozilla.com>
Tue, 27 Feb 2018 18:08:25 +0000
changeset 760952 fa9aa98a5cbb97c6b06cade88d5b6162de24e132
parent 760935 ee326c976eebdca48128054022c443d3993e12b0
child 761014 3061c29ecb13c0ffaef58a4101bc3a91ff1991a5
child 761018 74ca56420fe7d1e00ebe67dc54305afe213fb8c8
push id100790
push userbmo:mratcliffe@mozilla.com
push dateWed, 28 Feb 2018 12:07:59 +0000
reviewersnchevobbe
bugs1437848
milestone60.0a1
Bug 1437848 - Enable browser_console_filters.js in new frontend r?nchevobbe Rebased due to failing tests on try... built on a failing base. MozReview-Commit-ID: BiC1pWeml2N
devtools/client/webconsole/new-console-output/test/mochitest/browser.ini
devtools/client/webconsole/new-console-output/test/mochitest/browser_console_filters.js
devtools/client/webconsole/new-console-output/test/mochitest/browser_console_nsiconsolemessage.js
devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_filters.js
devtools/client/webconsole/new-console-output/test/mochitest/head.js
--- a/devtools/client/webconsole/new-console-output/test/mochitest/browser.ini
+++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser.ini
@@ -173,17 +173,16 @@ skip-if = true # Bug 1437843
 [browser_console_consolejsm_output.js]
 skip-if = true # Bug 1437844
 [browser_console_context_menu_entries.js]
 [browser_console_dead_objects.js]
 skip-if = true # Bug 1437845
 [browser_console_error_source_click.js]
 skip-if = true # Bug 1437847
 [browser_console_filters.js]
-skip-if = true # Bug 1437848
 [browser_console_nsiconsolemessage.js]
 [browser_console_open_or_focus.js]
 [browser_console_restore.js]
 [browser_console_webconsole_ctrlw_close_tab.js]
 [browser_console_webconsole_iframe_messages.js]
 [browser_console_webconsole_private_browsing.js]
 skip-if = true #	Bug 1403188
 # old console skip-if = e10s # Bug 1042253 - webconsole e10s tests
--- a/devtools/client/webconsole/new-console-output/test/mochitest/browser_console_filters.js
+++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser_console_filters.js
@@ -1,60 +1,51 @@
 /* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
+/* import-globals-from head.js */
+
 // Check that the Browser Console does not use the same filter prefs as the Web
-// Console. See bug 878186.
+// Console.
 
 "use strict";
 
 const TEST_URI = "data:text/html;charset=utf8,<p>browser console filters";
-const WEB_CONSOLE_PREFIX = "devtools.webconsole.filter.";
-const BROWSER_CONSOLE_PREFIX = "devtools.browserconsole.filter.";
 
-add_task(function* () {
-  yield loadTab(TEST_URI);
-
-  info("open the web console");
-  let hud = yield openConsole();
+add_task(async function () {
+  let hud = await openNewTabAndConsole(TEST_URI);
   ok(hud, "web console opened");
 
-  is(Services.prefs.getBoolPref(BROWSER_CONSOLE_PREFIX + "exception"), true,
-     "'exception' filter is enabled (browser console)");
-  is(Services.prefs.getBoolPref(WEB_CONSOLE_PREFIX + "exception"), true,
-     "'exception' filter is enabled (web console)");
+  let filterState = await getFilterState(hud);
+  ok(filterState.error, "The web console error filter is enabled");
 
-  info("toggle 'exception' filter");
-  hud.setFilterState("exception", false);
+  info(`toggle "error" filter`);
+  await setFilterState(hud, {
+    error: false
+  });
 
-  is(Services.prefs.getBoolPref(BROWSER_CONSOLE_PREFIX + "exception"), true,
-     "'exception' filter is enabled (browser console)");
-  is(Services.prefs.getBoolPref(WEB_CONSOLE_PREFIX + "exception"), false,
-     "'exception' filter is disabled (web console)");
-
-  hud.setFilterState("exception", true);
+  filterState = await getFilterState(hud);
+  ok(!filterState.error, "The web console error filter is disabled");
 
-  // We need to let the console opening event loop to finish.
-  let deferred = defer();
-  executeSoon(() => closeConsole().then(() => deferred.resolve(null)));
-  yield deferred.promise;
+  await resetFilters(hud);
+  await setFilterBarVisible(hud, false);
+  await closeConsole();
+  info("web console closed");
 
-  info("web console closed");
-  hud = yield HUDService.toggleBrowserConsole();
+  hud = await HUDService.toggleBrowserConsole();
   ok(hud, "browser console opened");
 
-  is(Services.prefs.getBoolPref(BROWSER_CONSOLE_PREFIX + "exception"), true,
-     "'exception' filter is enabled (browser console)");
-  is(Services.prefs.getBoolPref(WEB_CONSOLE_PREFIX + "exception"), true,
-     "'exception' filter is enabled (web console)");
-
-  info("toggle 'exception' filter");
-  hud.setFilterState("exception", false);
+  filterState = await getFilterState(hud);
+  ok(filterState.error, "The browser console error filter is enabled");
 
-  is(Services.prefs.getBoolPref(BROWSER_CONSOLE_PREFIX + "exception"), false,
-     "'exception' filter is disabled (browser console)");
-  is(Services.prefs.getBoolPref(WEB_CONSOLE_PREFIX + "exception"), true,
-     "'exception' filter is enabled (web console)");
+  info(`toggle "error" filter in browser console`);
+  await setFilterState(hud, {
+    error: false
+  });
 
-  hud.setFilterState("exception", true);
+  filterState = await getFilterState(hud);
+  ok(!filterState.error, "The browser console error filter is disabled");
+
+  await resetFilters(hud);
+  await setFilterBarVisible(hud, false);
 });
--- a/devtools/client/webconsole/new-console-output/test/mochitest/browser_console_nsiconsolemessage.js
+++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser_console_nsiconsolemessage.js
@@ -57,33 +57,21 @@ add_task(async function () {
 
   await waitFor(() => findMessage(hud, "cachedBrowserConsoleMessage"));
   Services.console.logStringMessage("liveBrowserConsoleMessage2");
   await waitFor(() => findMessage(hud, "liveBrowserConsoleMessage2"));
 
   let msg = await waitFor(() => findMessage(hud, "liveBrowserConsoleMessage"));
   ok(msg, "message element for liveBrowserConsoleMessage (nsIConsoleMessage)");
 
-  const outputNode = hud.ui.outputNode;
-  const toolbar = outputNode.querySelector(".webconsole-filterbar-primary");
+  // Disable the log filter.
+  await setFilterState(hud, {
+    log: false
+  });
 
-  // Test that filtering is working by hiding log messages...
-  // show the filter bar.
-  toolbar.querySelector(".devtools-filter-icon").click();
-  const filterBar = await waitFor(() => {
-    return outputNode.querySelector(".webconsole-filterbar-secondary");
-  });
-  ok(filterBar, "Filter bar is shown when filter icon is clicked.");
-
-  // Check that messages are not shown when their filter is turned off.
-  filterBar.querySelector(".log").click();
-
-  // And then checking that log messages are hidden.
+  // And then checking that the log messages are hidden.
   await waitFor(() => findMessages(hud, "cachedBrowserConsoleMessage").length === 0);
   await waitFor(() => findMessages(hud, "liveBrowserConsoleMessage").length === 0);
   await waitFor(() => findMessages(hud, "liveBrowserConsoleMessage2").length === 0);
 
-  // Turn the log filter off.
-  filterBar.querySelector(".log").click();
-
-  // Hide the filter bar.
-  toolbar.querySelector(".devtools-filter-icon").click();
+  resetFilters(hud);
+  await setFilterBarVisible(hud, false);
 });
--- a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_filters.js
+++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_filters.js
@@ -1,49 +1,47 @@
 /* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
+ /* import-globals-from head.js */
+
 // Tests filters.
 
 "use strict";
-const { MESSAGE_LEVEL } = require("devtools/client/webconsole/new-console-output/constants");
+
 const TEST_URI = "http://example.com/browser/devtools/client/webconsole/new-console-output/test/mochitest/test-console-filters.html";
+
 add_task(async function () {
-  let hud = await openNewTabAndConsole(TEST_URI);
-  const outputNode = hud.ui.outputNode;
-  const toolbar = await waitFor(() => {
-    return outputNode.querySelector(".webconsole-filterbar-primary");
-  });
-  ok(toolbar, "Toolbar found");
-  // Show the filter bar
-  toolbar.querySelector(".devtools-filter-icon").click();
-  const filterBar = await waitFor(() => {
-    return outputNode.querySelector(".webconsole-filterbar-secondary");
-  });
-  ok(filterBar, "Filter bar is shown when filter icon is clicked.");
+  const hud = await openNewTabAndConsole(TEST_URI);
+  await setFilterBarVisible(hud, true);
+
+  let filterState = await getFilterState(hud);
 
   // Check defaults.
-  Object.values(MESSAGE_LEVEL).forEach(level => {
-    ok(filterIsEnabled(filterBar.querySelector(`.${level}`)),
-      `Filter button for ${level} is on by default`);
-  });
-  ["net", "netxhr"].forEach(category => {
-    ok(!filterIsEnabled(filterBar.querySelector(`.${category}`)),
-      `Filter button for ${category} is off by default`);
-  });
+
+  for (let category of ["error", "warn", "log", "info", "debug"]) {
+    let state = filterState[category];
+    ok(state, `Filter button for ${category} is on by default`);
+  }
+  for (let category of ["css", "net", "netxhr"]) {
+    let state = filterState[category];
+    ok(!state, `Filter button for ${category} is off by default`);
+  }
 
   // Check that messages are shown as expected. This depends on cached messages being
   // shown.
   ok(findMessages(hud, "").length == 5,
     "Messages of all levels shown when filters are on.");
 
   // Check that messages are not shown when their filter is turned off.
-  filterBar.querySelector(".error").click();
+  await setFilterState(hud, {
+    error: false
+  });
   await waitFor(() => findMessages(hud, "").length == 4);
   ok(true, "When a filter is turned off, its messages are not shown.");
 
   // Check that the ui settings were persisted.
   await closeTabAndToolbox();
   await testFilterPersistence();
 });
 
@@ -57,10 +55,13 @@ async function testFilterPersistence() {
   const filterBar = await waitFor(() => {
     return outputNode.querySelector(".webconsole-filterbar-secondary");
   });
   ok(filterBar, "Filter bar ui setting is persisted.");
   // Check that the filter settings were persisted.
   ok(!filterIsEnabled(filterBar.querySelector(".error")),
     "Filter button setting is persisted");
   ok(findMessages(hud, "").length == 4,
-    "Messages of all levels shown when filters are on.");
+    "testFilterPersistence: Messages of all levels shown when filters are on.");
+
+  await resetFilters(hud);
+  await setFilterBarVisible(hud, false);
 }
--- a/devtools/client/webconsole/new-console-output/test/mochitest/head.js
+++ b/devtools/client/webconsole/new-console-output/test/mochitest/head.js
@@ -26,16 +26,18 @@ const DOCS_GA_PARAMS = `?${new URLSearch
   "utm_campaign": "default"
 })}`;
 const STATUS_CODES_GA_PARAMS = `?${new URLSearchParams({
   "utm_source": "mozilla",
   "utm_medium": "devtools-webconsole",
   "utm_campaign": "default"
 })}`;
 
+const wcActions = require("devtools/client/webconsole/new-console-output/actions/index");
+
 Services.prefs.setBoolPref("devtools.browserconsole.new-frontend-enabled", true);
 registerCleanupFunction(async function () {
   Services.prefs.clearUserPref("devtools.browserconsole.new-frontend-enabled");
   Services.prefs.clearUserPref("devtools.webconsole.ui.filterbar");
 
   // Reset all filter prefs between tests. First flushPrefEnv in case one of the
   // filter prefs has been pushed for the test
   await SpecialPowers.flushPrefEnv();
@@ -470,20 +472,22 @@ async function closeConsole(tab = gBrows
  * network in tests.
  * This can also be used to test that a click will not be fired.
  *
  * @param ElementNode element
  *        The <a> element we want to simulate click on.
  * @param Object clickEventProps
  *        The custom properties which would be used to dispatch a click event
  * @returns Promise
- *          A Promise that is resolved when the link click simulation occured or when the click is not dispatched.
+ *          A Promise that is resolved when the link click simulation occured or
+ *          when the click is not dispatched.
  *          The promise resolves with an object that holds the following properties
  *          - link: url of the link or null(if event not fired)
- *          - where: "tab" if tab is active or "tabshifted" if tab is inactive or null(if event not fired)
+ *          - where: "tab" if tab is active or "tabshifted" if tab is inactive
+ *            or null(if event not fired)
  */
 function simulateLinkClick(element, clickEventProps) {
   // Override openUILinkIn to prevent navigating.
   let oldOpenUILinkIn = window.openUILinkIn;
 
   const onOpenLink = new Promise((resolve) => {
     window.openUILinkIn = function (link, where) {
       window.openUILinkIn = oldOpenUILinkIn;
@@ -496,17 +500,17 @@ function simulateLinkClick(element, clic
     } else {
       // Click on the link.
       element.click();
     }
   });
 
   // Declare a timeout Promise that we can use to make sure openUILinkIn was not called.
   let timeoutId;
-  const onTimeout = new Promise(function(resolve, reject) {
+  const onTimeout = new Promise(function (resolve) {
     timeoutId = setTimeout(() => {
       window.openUILinkIn = oldOpenUILinkIn;
       timeoutId = null;
       resolve({link: null, where: null});
     }, 1000);
   });
 
   onOpenLink.then(() => {
@@ -560,21 +564,21 @@ async function openMessageInNetmonitor(t
   let openInNetMenuItem = menuPopup.querySelector("#console-menu-open-in-network-panel");
   ok(openInNetMenuItem, "open in network panel item is enabled");
   openInNetMenuItem.click();
 
   const {panelWin} = await onNetmonitorSelected;
   ok(true, "The netmonitor panel is selected when clicking on the network message");
 
   let { store, windowRequire } = panelWin;
-  let actions = windowRequire("devtools/client/netmonitor/src/actions/index");
+  let nmActions = windowRequire("devtools/client/netmonitor/src/actions/index");
   let { getSelectedRequest } =
     windowRequire("devtools/client/netmonitor/src/selectors/index");
 
-  store.dispatch(actions.batchEnable(false));
+  store.dispatch(nmActions.batchEnable(false));
 
   await waitUntil(() => {
     const selected = getSelectedRequest(store.getState());
     return selected && selected.url === url;
   });
 
   ok(true, "The attached url is correct.");
 }
@@ -603,8 +607,140 @@ async function waitForBrowserConsole() {
       let hud = HUDService.getBrowserConsole();
       ok(hud, "browser console is open");
       is(subject.data, hud.hudId, "notification hudId is correct");
 
       executeSoon(() => resolve(hud));
     }, "web-console-created");
   });
 }
+
+/**
+ * Get the state of a console filter.
+ *
+ * @param {Object} hud
+ */
+async function getFilterState(hud) {
+  const filterBar = await setFilterBarVisible(hud, true);
+  const buttons = filterBar.querySelectorAll("button");
+  const result = { };
+
+  for (let button of buttons) {
+    let classes = new Set(button.classList.values());
+    let checked = classes.has("checked");
+
+    classes.delete("devtools-button");
+    classes.delete("checked");
+
+    let category = classes.values().next().value;
+
+    result[category] = checked;
+  }
+
+  return result;
+}
+
+/**
+ * Set the state of a console filter.
+ *
+ * @param {Object} hud
+ * @param {Object} settings
+ *        Category settings in the following format:
+ *          {
+ *            error: true,
+ *            warn: true,
+ *            log: true,
+ *            info: true,
+ *            debug: true,
+ *            css: false,
+ *            netxhr: false,
+ *            net: false
+ *          }
+ */
+async function setFilterState(hud, settings) {
+  const filterBar = await setFilterBarVisible(hud, true);
+
+  for (let category in settings) {
+    let check = settings[category];
+    let button = filterBar.querySelector(`.${category}`);
+
+    if (!button) {
+      ok(false, `setFilterState() called with a category of ${category}, ` +
+                `which doesn't exist.`);
+    }
+
+    info(`Setting the ${category} category to ${check ? "checked" : "disabled"}`);
+
+    let checked = button.classList.contains("checked");
+    if (check) {
+      // Enable filter.
+      if (checked) {
+        return;
+      }
+      button.click();
+      await waitFor(() => {
+        return button.classList.contains("checked");
+      });
+    } else if (checked) {
+      // Disable filter.
+      button.click();
+      await waitFor(() => {
+        return !button.classList.contains("checked");
+      });
+    }
+  }
+}
+
+/**
+ * Set the visibility of the filter bar.
+ *
+ * @param {Object} hud
+ * @param {Boolean} state
+ *        Set filter bar visibility
+ */
+async function setFilterBarVisible(hud, state) {
+  info(`Setting the filter bar visibility to ${state}`);
+
+  const outputNode = hud.ui.outputNode;
+  const toolbar = await waitFor(() => {
+    return outputNode.querySelector(".webconsole-filterbar-primary");
+  });
+  let filterBar = outputNode.querySelector(".webconsole-filterbar-secondary");
+
+  // Show filter bar if state is true
+  if (state) {
+    if (!filterBar) {
+      // Click the filter icon to show the filter bar.
+      toolbar.querySelector(".devtools-filter-icon").click();
+      filterBar = await waitFor(() => {
+        return outputNode.querySelector(".webconsole-filterbar-secondary");
+      });
+    }
+    return filterBar;
+  }
+
+  // Hide filter bar if it is visible.
+  if (filterBar) {
+    // Click the filter icon to hide the filter bar.
+    toolbar.querySelector(".devtools-filter-icon").click();
+    await waitFor(() => {
+      return !outputNode.querySelector(".webconsole-filterbar-secondary");
+    });
+  }
+
+  return null;
+}
+
+/**
+ * Reset the filters at the end of a test that has changed them. This is
+ * important when using the `--verify` test option as when it is used you need
+ * to manually reset the filters.
+ *
+ * The css, netxhr and net filters are disabled by default.
+ *
+ * @param {Object} hud
+ */
+async function resetFilters(hud) {
+  info("Resetting filters to their default state");
+
+  const store = hud.ui.newConsoleOutput.getStore();
+  store.dispatch(wcActions.filtersClear());
+}