Bug 1237945 - ensure panel is closed when mobile promo links are clicked. r=Gijs

browser/components/customizableui/CustomizableWidgets.jsm

@@ -311,13 +311,34 @@ const CustomizableWidgets = [
       let formatArgs = ["android", "ios"].map(os => {
         let link = doc.createElement("label");
         link.textContent = bundle.getString(`appMenuRemoteTabs.mobilePromo.${os}`)
-        link.setAttribute("href", Services.prefs.getCharPref(`identity.mobilepromo.${os}`) + "synced-tabs");
+        link.setAttribute("mobile-promo-os", os);
         link.className = "text-link remotetabs-promo-link";
         return link.outerHTML;
       });
       // Put it all together...
       let contents = bundle.getFormattedString("appMenuRemoteTabs.mobilePromo", formatArgs);
-      doc.getElementById("PanelUI-remotetabs-mobile-promo").innerHTML = contents;
+      let promoParentElt = doc.getElementById("PanelUI-remotetabs-mobile-promo");
+      promoParentElt.innerHTML = contents;
+      // We manually manage the "click" event to open the promo links because
+      // allowing the "text-link" widget handle it has 2 problems: (1) it only
+      // supports button 0 and (2) it's tricky to intercept when it does the
+      // open and auto-close the panel. (1) can probably be fixed, but (2) is
+      // trickier without hard-coding here the knowledge of exactly what buttons
+      // it does support.
+      // So we allow left and middle clicks to open the link in a new tab and
+      // close the panel; not setting a "href" attribute prevents the text-link
+      // widget handling it, and we build the final URL in the click handler to
+      // make testing easier (ie, so tests can change the pref after the links
+      // were created and have the new pref value used.)
+      promoParentElt.addEventListener("click", e => {
+        let os = e.target.getAttribute("mobile-promo-os");
+        if (!os || e.button > 1) {
+          return;
+        }
+        let link = Services.prefs.getCharPref(`identity.mobilepromo.${os}`) + "synced-tabs";
+        doc.defaultView.openUILinkIn(link, "tab");
+        CustomizableUI.hidePanelForNode(e.target);
+      });
     },
     onViewShowing(aEvent) {
       let doc = aEvent.target.ownerDocument;

browser/components/customizableui/test/browser_967000_button_sync.js

@@ -130,6 +130,69 @@ add_task(function* () {
   yield openPrefsFromMenuPanel("PanelUI-remotetabs-reauthsync", "syncbutton")
 });
 
+// Test the mobile promo links
+add_task(function* () {
+  // change the preferences for the mobile links.
+  Services.prefs.setCharPref("identity.mobilepromo.android", "http://example.com/?os=android&tail=");
+  Services.prefs.setCharPref("identity.mobilepromo.ios", "http://example.com/?os=ios&tail=");
+
+  mockedInternal.getTabClients = () => [];
+  mockedInternal.syncTabs = () => Promise.resolve();
+
+  document.getElementById("sync-reauth-state").hidden = true;
+  document.getElementById("sync-setup-state").hidden = true;
+  document.getElementById("sync-syncnow-state").hidden = false;
+
+  CustomizableUI.addWidgetToArea("sync-button", CustomizableUI.AREA_PANEL);
+
+  let syncPanel = document.getElementById("PanelUI-remotetabs");
+  let links = syncPanel.querySelectorAll(".remotetabs-promo-link");
+
+  is(links.length, 2, "found 2 links as expected");
+
+  // test each link and left and middle mouse buttons
+  for (let link of links) {
+    for (let button = 0; button < 2; button++) {
+      yield PanelUI.show();
+      EventUtils.sendMouseEvent({ type: "click", button }, link, window);
+      // the panel should have been closed.
+      ok(!isPanelUIOpen(), "click closed the panel");
+      // should be a new tab - wait for the load.
+      is(gBrowser.tabs.length, 2, "there's a new tab");
+      yield new Promise(resolve => {
+        if (gBrowser.selectedBrowser.currentURI.spec == "about:blank") {
+          gBrowser.selectedBrowser.addEventListener("load", function listener(e) {
+            gBrowser.selectedBrowser.removeEventListener("load", listener, true);
+            resolve();
+          }, true);
+          return;
+        }
+        // the new tab has already transitioned away from about:blank so we
+        // are good to go.
+        resolve();
+      });
+
+      let os = link.getAttribute("mobile-promo-os");
+      let expectedUrl = `http://example.com/?os=${os}&tail=synced-tabs`;
+      is(gBrowser.selectedBrowser.currentURI.spec, expectedUrl, "correct URL");
+      gBrowser.removeTab(gBrowser.selectedTab);
+    }
+  }
+
+  // test each link and right mouse button - should be a noop.
+  yield PanelUI.show();
+  for (let link of links) {
+    EventUtils.sendMouseEvent({ type: "click", button: 2 }, link, window);
+    // the panel should still be open
+    ok(isPanelUIOpen(), "panel remains open after right-click");
+    is(gBrowser.tabs.length, 1, "no new tab was opened");
+  }
+  PanelUI.hide();
+
+  Services.prefs.clearUserPref("identity.mobilepromo.android");
+  Services.prefs.clearUserPref("identity.mobilepromo.ios");
+});
+
 // Test the "Sync Now" button
 add_task(function* () {
   let nSyncs = 0;