Bug 974745 - Create click event on Sponsored Tiles to show explanation panel [r=adw]

Have the page know how to show a panel on a sponsored icon click.

browser/base/content/newtab/newTab.css

@@ -207,3 +207,16 @@ input[type=button] {
   background-color: #fff;
   opacity: 0.01;
 }
+
+/* PANEL */
+#sponsored-panel {
+  width: 330px;
+}
+
+#sponsored-panel description {
+  margin: 0;
+}
+
+#sponsored-panel .text-link {
+  margin: 12px 0 0;
+}

browser/base/content/newtab/newTab.xul

@@ -17,6 +17,14 @@
             xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
             title="&newtab.pageTitle;">
 
+  <xul:panel id="sponsored-panel" orient="vertical" type="arrow">
+    <xul:description>&newtab.panel.message;</xul:description>
+    <xul:label class="text-link"
+               href="&newtab.panel.link.url;"
+               onclick="this.parentNode.hidePopup();"
+               value="&newtab.panel.link.text;" />
+  </xul:panel>
+
   <div id="newtab-scrollbox">
 
     <div id="newtab-vertical-margin">

browser/base/content/newtab/page.js

@@ -23,6 +23,9 @@ let gPage = {
     let button = document.getElementById("newtab-toggle");
     button.addEventListener("click", this, false);
 
+    // Initialize sponsored panel
+    this._sponsoredPanel = document.getElementById("sponsored-panel");
+
     // Check if the new tab feature is enabled.
     let enabled = gAllPages.enabled;
     if (enabled)
@@ -80,6 +83,21 @@ let gPage = {
     }
   },
 
+  /**
+   * Shows sponsored panel
+   */
+  showSponsoredPanel: function Page_showSponsoredPanel(aTarget) {
+    if (this._sponsoredPanel.state == "closed") {
+      let self = this;
+      this._sponsoredPanel.addEventListener("popuphidden", function onPopupHidden(aEvent) {
+        self._sponsoredPanel.removeEventListener("popuphidden", onPopupHidden, false);
+        aTarget.removeAttribute("panelShown");
+      });
+    }
+    aTarget.setAttribute("panelShown", "true");
+    this._sponsoredPanel.openPopup(aTarget);
+  },
+
   /**
    * Internally initializes the page. This runs only when/if the feature
    * is/gets enabled.

browser/base/content/newtab/sites.js

@@ -224,6 +224,8 @@ Site.prototype = {
     aEvent.preventDefault();
     if (aEvent.target.classList.contains("newtab-control-block"))
       this.block();
+    else if (target.classList.contains("newtab-control-sponsored"))
+      gPage.showSponsoredPanel(target);
     else if (this.isPinned())
       this.unpin();
     else

browser/base/content/test/newtab/browser.ini

@@ -21,6 +21,7 @@ skip-if = os == "mac" # Intermittent failures, bug 898317
 [browser_newtab_focus.js]
 [browser_newtab_perwindow_private_browsing.js]
 [browser_newtab_reset.js]
+[browser_newtab_sponsored_icon_click.js]
 [browser_newtab_tabsync.js]
 [browser_newtab_undo.js]
 [browser_newtab_unpin.js]

browser/base/content/test/newtab/browser_newtab_sponsored_icon_click.js

@@ -0,0 +1,33 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+function runTests() {
+  yield setLinks("0");
+  yield addNewTabPageTab();
+
+  let site = getCell(0).node.querySelector(".newtab-site");
+  site.setAttribute("type", "sponsored");
+
+  let sponsoredPanel = getContentDocument().getElementById("sponsored-panel");
+  is(sponsoredPanel.state, "closed", "Sponsored panel must be closed");
+
+  function continueOnceOn(event) {
+    sponsoredPanel.addEventListener(event, function listener() {
+      sponsoredPanel.removeEventListener(event, listener);
+      executeSoon(TestRunner.next);
+    });
+  }
+
+  // test sponsoredPanel appearing upon a click
+  continueOnceOn("popupshown");
+  let sponsoredButton = site.querySelector(".newtab-control-sponsored");
+  yield EventUtils.synthesizeMouseAtCenter(sponsoredButton, {}, getContentWindow());
+  is(sponsoredPanel.state, "open", "Sponsored panel opens on click");
+  ok(sponsoredButton.hasAttribute("panelShown"), "Sponsored button has panelShown attribute");
+
+  // test sponsoredPanel hiding
+  continueOnceOn("popuphidden");
+  yield sponsoredPanel.hidePopup();
+  is(sponsoredPanel.state, "closed", "Sponsored panel correctly closed/hidden");
+  ok(!sponsoredButton.hasAttribute("panelShown"), "Sponsored button does not have panelShown attribute");
+}

browser/locales/en-US/chrome/browser/newTab.dtd

@@ -8,3 +8,6 @@
 <!ENTITY newtab.undo.undoButton "Undo.">
 <!ENTITY newtab.undo.restoreButton "Restore All.">
 <!ENTITY newtab.undo.closeTooltip "Hide">
+<!ENTITY newtab.panel.message "This site is being suggested because it has sponsored Mozilla, helping us promote openness, innovation and opportunity on the Web.">
+<!ENTITY newtab.panel.link.url "https://support.mozilla.org/kb/how-do-sponsored-tiles-work">
+<!ENTITY newtab.panel.link.text "Learn more…">

browser/themes/linux/newtab/newTab.css

@@ -183,3 +183,7 @@
 .newtab-control-sponsored:hover {
   background-position: -265px -1px;
 }
+
+.newtab-control-sponsored[panelShown] {
+  background-position: -281px -1px;
+}

browser/themes/osx/newtab/newTab.css

@@ -194,3 +194,7 @@
 .newtab-control-sponsored:hover {
   background-position: -265px -1px;
 }
+
+.newtab-control-sponsored[panelShown] {
+  background-position: -281px -1px;
+}

browser/themes/windows/newtab/newTab.css

@@ -186,3 +186,7 @@
 .newtab-control-sponsored:hover {
   background-position: -265px -1px;
 }
+
+.newtab-control-sponsored[panelShown] {
+  background-position: -281px -1px;
+}