Bug 1113896: toggle the Loop panel upon clicking the toolbar button. r=MattN, a=sylvestre
authorMike de Boer <mdeboer@mozilla.com>
Fri, 06 Feb 2015 15:31:34 +0100
changeset 243751 3287468f6460
parent 243750 2f97ce37f5c4
child 243752 7c472ea5e3b3
push id4462
push usermdeboer@mozilla.com
push date2015-02-11 13:14 +0000
treeherdermozilla-beta@3287468f6460 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN, sylvestre
bugs1113896
milestone36.0
Bug 1113896: toggle the Loop panel upon clicking the toolbar button. r=MattN, a=sylvestre
browser/base/content/browser-loop.js
browser/components/customizableui/CustomizableWidgets.jsm
browser/components/loop/test/mochitest/browser_toolbarbutton.js
--- a/browser/base/content/browser-loop.js
+++ b/browser/base/content/browser-loop.js
@@ -13,32 +13,45 @@ XPCOMUtils.defineLazyModuleGetter(this, 
 
 (function() {
   LoopUI = {
     get toolbarButton() {
       delete this.toolbarButton;
       return this.toolbarButton = CustomizableUI.getWidget("loop-button").forWindow(window);
     },
 
+    get panel() {
+      delete this.panel;
+      return this.panel = document.getElementById("loop-notification-panel");
+    },
+
     /**
      * @return {Promise}
      */
     promiseDocumentVisible(aDocument) {
       if (!aDocument.hidden) {
         return Promise.resolve();
       }
 
       return new Promise((resolve) => {
         aDocument.addEventListener("visibilitychange", function onVisibilityChanged() {
           aDocument.removeEventListener("visibilitychange", onVisibilityChanged);
           resolve();
         });
       });
     },
 
+    togglePanel: function(event, tabId = null) {
+      if (this.panel.state == "open") {
+        this.panel.hidePopup();
+      } else {
+        this.openCallPanel(event, tabId);
+      }
+    },
+
     /**
      * Opens the panel for Loop and sizes it appropriately.
      *
      * @param {event}  event   The event opening the panel, used to anchor
      *                         the panel to the button which triggers it.
      * @param {String} [tabId] Identifier of the tab to select when the panel is
      *                         opened. Example: 'rooms', 'contacts', etc.
      * @return {Promise}
--- a/browser/components/customizableui/CustomizableWidgets.jsm
+++ b/browser/components/customizableui/CustomizableWidgets.jsm
@@ -939,17 +939,17 @@ const CustomizableWidgets = [
       node.setAttribute("id", this.id);
       node.classList.add("toolbarbutton-1");
       node.classList.add("chromeclass-toolbar-additional");
       node.classList.add("badged-button");
       node.setAttribute("label", CustomizableUI.getLocalizedProperty(this, "label"));
       node.setAttribute("tooltiptext", CustomizableUI.getLocalizedProperty(this, "tooltiptext"));
       node.setAttribute("removable", "true");
       node.addEventListener("command", function(event) {
-        aDocument.defaultView.LoopUI.openCallPanel(event);
+        aDocument.defaultView.LoopUI.togglePanel(event);
       });
 
       return node;
     }
   }, {
     id: "web-apps-button",
     label: "web-apps-button.label",
     tooltiptext: "web-apps-button.tooltiptext",
--- a/browser/components/loop/test/mochitest/browser_toolbarbutton.js
+++ b/browser/components/loop/test/mochitest/browser_toolbarbutton.js
@@ -31,18 +31,17 @@ add_task(function* test_doNotDisturb_wit
   yield MozLoopService.doNotDisturb = true;
   Assert.strictEqual(LoopUI.toolbarButton.node.getAttribute("state"), "disabled", "Check button is in disabled state");
   MozLoopServiceInternal.fxAOAuthTokenData = {token_type:"bearer",access_token:"1bad3e44b12f77a88fe09f016f6a37c42e40f974bc7a8b432bb0d2f0e37e1752",scope:"profile"};
   MozLoopServiceInternal.fxAOAuthProfile = {email: "test@example.com", uid: "abcd1234"};
   yield MozLoopServiceInternal.notifyStatusChanged("login");
   Assert.strictEqual(LoopUI.toolbarButton.node.getAttribute("state"), "active", "Check button is in active state");
   yield loadLoopPanel();
   Assert.strictEqual(LoopUI.toolbarButton.node.getAttribute("state"), "disabled", "Check button is in disabled state after opening panel");
-  let loopPanel = document.getElementById("loop-notification-panel");
-  loopPanel.hidePopup();
+  LoopUI.panel.hidePopup();
   yield MozLoopService.doNotDisturb = false;
   Assert.strictEqual(LoopUI.toolbarButton.node.getAttribute("state"), "", "Check button is in default state");
   MozLoopServiceInternal.fxAOAuthTokenData = null;
   yield MozLoopServiceInternal.notifyStatusChanged();
   Assert.strictEqual(LoopUI.toolbarButton.node.getAttribute("state"), "", "Check button is in default state");
 });
 
 add_task(function* test_error() {
@@ -70,26 +69,38 @@ add_task(function* test_error_with_login
 add_task(function* test_active() {
   Assert.strictEqual(LoopUI.toolbarButton.node.getAttribute("state"), "", "Check button is in default state");
   MozLoopServiceInternal.fxAOAuthTokenData = {token_type:"bearer",access_token:"1bad3e44b12f77a88fe09f016f6a37c42e40f974bc7a8b432bb0d2f0e37e1752",scope:"profile"};
   MozLoopServiceInternal.fxAOAuthProfile = {email: "test@example.com", uid: "abcd1234"};
   yield MozLoopServiceInternal.notifyStatusChanged("login");
   Assert.strictEqual(LoopUI.toolbarButton.node.getAttribute("state"), "active", "Check button is in active state");
   yield loadLoopPanel();
   Assert.strictEqual(LoopUI.toolbarButton.node.getAttribute("state"), "", "Check button is in default state after opening panel");
-  let loopPanel = document.getElementById("loop-notification-panel");
-  loopPanel.hidePopup();
+  LoopUI.panel.hidePopup();
   MozLoopServiceInternal.fxAOAuthTokenData = null;
   MozLoopServiceInternal.notifyStatusChanged();
   Assert.strictEqual(LoopUI.toolbarButton.node.getAttribute("state"), "", "Check button is in default state");
 });
 
 add_task(function* test_room_participants() {
   Assert.strictEqual(LoopUI.toolbarButton.node.getAttribute("state"), "", "Check button is in default state");
   LoopRoomsInternal.rooms.set("test_room", {participants: [{displayName: "hugh", id: "008"}]});
   MozLoopServiceInternal.notifyStatusChanged();
   Assert.strictEqual(LoopUI.toolbarButton.node.getAttribute("state"), "active", "Check button is in active state");
   LoopRoomsInternal.rooms.set("test_room", {participants: []});
   MozLoopServiceInternal.notifyStatusChanged();
   Assert.strictEqual(LoopUI.toolbarButton.node.getAttribute("state"), "", "Check button is in default state");
   LoopRoomsInternal.rooms.delete("test_room");
 });
 
+add_task(function* test_panelToggle_on_click() {
+  // Since we _know_ the first click on the button will open the panel, we'll
+  // open it using the test utility and check the correct state by clicking the
+  // button. This should hide the panel.
+  // If we'd open the panel with a simulated click on the button, we won't know
+  // for sure when the panel has opened, because the event loop spins a few times
+  // in the mean time.
+  yield loadLoopPanel();
+  Assert.strictEqual(LoopUI.panel.state, "open", "Panel should be open");
+  // The panel should now be visible. Clicking the button should hide it.
+  LoopUI.toolbarButton.node.click();
+  Assert.strictEqual(LoopUI.panel.state, "closed", "Panel should be closed");
+});