Bug 956231 - Implemented right click to open the context menu on the filter buttons of the web console. r=past

--HG--
extra : rebase_source : 98051f65fce5e645d2a513d0ec38c73d90c71835

browser/devtools/webconsole/test/browser.ini

@@ -265,6 +265,7 @@ skip-if = buildapp == 'mulet'
 [browser_webconsole_bug_846918_hsts_invalid-headers.js]
 skip-if = buildapp == 'mulet'
 [browser_webconsole_bug_915141_toggle_response_logging_with_keyboard.js]
+[browser_webconsole_filter_buttons_contextmenu.js]
 [browser_webconsole_bug_1006027_message_timestamps_incorrect.js]
 [browser_webconsole_bug_1010953_cspro.js]
 [browser_webconsole_certificate_messages.js]

browser/devtools/webconsole/test/browser_webconsole_filter_buttons_contextmenu.js

@@ -0,0 +1,93 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Tests that the filter button context menu logic works correctly.
+
+const TEST_URI = "http://example.com/";
+
+function test() {
+  addTab(TEST_URI);
+  browser.addEventListener("load", function onLoad() {
+    browser.removeEventListener("load", onLoad, true);
+    openConsole(null, testFilterButtons);
+  }, true);
+}
+
+function testFilterButtons(aHud) {
+  let hudBox = aHud.ui.rootElement;
+
+  testRightClick("net", hudBox, aHud)
+    .then(() => testRightClick("css", hudBox, aHud))
+    .then(() => testRightClick("js", hudBox, aHud))
+    .then(() => testRightClick("logging", hudBox, aHud))
+    .then(() => testRightClick("security", hudBox, aHud))
+    .then(finishTest);
+}
+
+function testRightClick(aCategory, hudBox, aHud) {
+  let deferred = promise.defer();
+  let selector = ".webconsole-filter-button[category=\"" + aCategory + "\"]";
+  let button = hudBox.querySelector(selector);
+  let mainButton = getMainButton(button, aHud);
+  let origCheckedState = button.getAttribute("aria-pressed");
+  let contextMenu = aHud.iframeWindow.document.getElementById(aCategory + "-contextmenu");
+
+  function verifyContextMenuIsClosed() {
+    info("verify the context menu is closed");
+    is(button.getAttribute("open"), false, "The context menu for the \"" + aCategory +
+      "\" button is closed");
+  }
+
+  function verifyOriginalCheckedState() {
+    info("verify the button has the original checked state");
+    is(button.getAttribute("aria-pressed"), origCheckedState,
+      "The button state should not have changed");
+  };
+
+  function verifyNewCheckedState() {
+    info("verify the button's checked state has changed");
+    isnot(button.getAttribute("aria-pressed"), origCheckedState,
+      "The button state should have changed");
+  };
+
+  function leftClickToClose() {
+    info("left click the button to close the contextMenu");
+    EventUtils.sendMouseEvent({type: "click"}, button);
+    executeSoon(() => {
+      verifyContextMenuIsClosed();
+      verifyOriginalCheckedState();
+      leftClickToChangeCheckedState();
+    });
+  }
+
+  function leftClickToChangeCheckedState() {
+    info("left click the mainbutton to change checked state");
+    EventUtils.sendMouseEvent({type: "click"}, mainButton);
+    executeSoon(() => {
+      verifyContextMenuIsClosed();
+      verifyNewCheckedState();
+      deferred.resolve();
+    });
+  }
+
+  verifyContextMenuIsClosed();
+  info("right click the button to open the context menu");
+  waitForContextMenu(contextMenu, mainButton, verifyOriginalCheckedState,
+                     leftClickToClose);
+  return deferred.promise;
+}
+
+function getMainButton(aTargetButton, aHud) {
+  let anonymousNodes = aHud.ui.document.getAnonymousNodes(aTargetButton);
+  let subbutton;
+
+  for (let i = 0; i < anonymousNodes.length; i++) {
+    let node = anonymousNodes[i];
+    if (node.classList.contains("toolbarbutton-menubutton-button")) {
+      subbutton = node;
+      break;
+    }
+  }
+
+  return subbutton;
+}

browser/devtools/webconsole/webconsole.js

@@ -690,6 +690,9 @@ WebConsoleFrame.prototype = {
     let categories = this.document
                      .querySelectorAll(".webconsole-filter-button[category]");
     Array.forEach(categories, function(aButton) {
+      aButton.addEventListener("contextmenu", (aEvent) => {
+        aButton.open = true;
+      }, false);
       aButton.addEventListener("click", this._toggleFilter, false);
 
       let someChecked = false;
@@ -811,7 +814,9 @@ WebConsoleFrame.prototype = {
   {
     let target = aEvent.target;
     let tagName = target.tagName;
-    if (tagName != aEvent.currentTarget.tagName) {
+    // Prevent toggle if generated from a contextmenu event (right click)
+    let isRightClick = (aEvent.button === 2); // right click is button 2;
+    if (tagName != aEvent.currentTarget.tagName || isRightClick) {
       return;
     }
 
@@ -5395,4 +5400,3 @@ ConsoleContextMenu.prototype = {
     this.lastClickedMessage = null;
   },
 };
-

browser/devtools/webconsole/webconsole.xul

@@ -93,7 +93,7 @@ function goUpdateConsoleCommands() {
                          accesskeyMacOSX="&btnPageNet.accesskeyMacOSX;"
                          accesskey="&btnPageNet.accesskey;"
                          tabindex="3">
-            <menupopup>
+            <menupopup id="net-contextmenu">
               <menuitem label="&btnConsoleErrors;" type="checkbox" autocheck="false"
                         prefKey="network"/>
               <menuitem label="&btnConsoleWarnings;" type="checkbox" autocheck="false"
@@ -110,7 +110,7 @@ function goUpdateConsoleCommands() {
                          tooltiptext="&btnPageCSS.tooltip2;"
                          accesskey="&btnPageCSS.accesskey;"
                          tabindex="4">
-            <menupopup>
+            <menupopup id="css-contextmenu">
               <menuitem label="&btnConsoleErrors;" type="checkbox" autocheck="false"
                         prefKey="csserror"/>
               <menuitem label="&btnConsoleWarnings;" type="checkbox"
@@ -124,7 +124,7 @@ function goUpdateConsoleCommands() {
                          tooltiptext="&btnPageJS.tooltip;"
                          accesskey="&btnPageJS.accesskey;"
                          tabindex="5">
-            <menupopup>
+            <menupopup id="js-contextmenu">
               <menuitem label="&btnConsoleErrors;" type="checkbox"
                         autocheck="false" prefKey="exception"/>
               <menuitem label="&btnConsoleWarnings;" type="checkbox"
@@ -138,7 +138,7 @@ function goUpdateConsoleCommands() {
                          tooltiptext="&btnPageSecurity.tooltip;"
                          accesskey="&btnPageSecurity.accesskey;"
                          tabindex="6">
-            <menupopup>
+            <menupopup id="security-contextmenu">
               <menuitem label="&btnConsoleErrors;" type="checkbox"
                         autocheck="false" prefKey="secerror"/>
               <menuitem label="&btnConsoleWarnings;" type="checkbox"
@@ -150,7 +150,7 @@ function goUpdateConsoleCommands() {
                          tooltiptext="&btnPageLogging.tooltip;"
                          accesskey="&btnPageLogging.accesskey3;"
                          tabindex="7">
-            <menupopup>
+            <menupopup id="logging-contextmenu">
               <menuitem label="&btnConsoleErrors;" type="checkbox"
                         autocheck="false" prefKey="error"/>
               <menuitem label="&btnConsoleWarnings;" type="checkbox"