Commit 676f9b37 authored by Alex Catarineu's avatar Alex Catarineu
Browse files

Bug 30577: Add Fundraising Banner

parent 73ef44a6

src/chrome/content/aboutTor/aboutTor-content.js

+19 −0
Original line number Diff line number Diff line
@@ -24,6 +24,7 @@ let { bindPrefAndInit, show_torbrowser_manual } = Cu.import("resource://torbutto 
var AboutTorListener = {

  kAboutTorLoadedMessage: "AboutTor:Loaded",

  kAboutTorChromeDataMessage: "AboutTor:ChromeData",

  kAboutTorHideDonationBanner: "AboutTor:HideDonationBanner",



  get isAboutTor() {

    return content.document.documentURI.toLowerCase() == "about:tor";
@@ -58,6 +59,22 @@ var AboutTorListener = { 
    }

  },



  setupBannerClosing: function () {

    let that = this;

    let closer = content.document.getElementById("donation-banner-closer");

    closer.addEventListener("click", function () {

      sendAsyncMessage(that.kAboutTorHideDonationBanner);

    });



    bindPrefAndInit("extensions.torbutton.donation_banner_countdown3",

                    countdown => {

                      if (content.document && content.document.body) {

                        content.document.body.setAttribute(

                          "show-donation-banner", countdown > 0);

                      }

                    });

  },



  onPageLoad: function() {

    // Arrange to update localized text and links.

    bindPrefAndInit("intl.locale.requested", aNewVal => {
@@ -66,6 +83,8 @@ var AboutTorListener = { 
      }

    });



    this.setupBannerClosing();



    // Add message and event listeners.

    addMessageListener(this.kAboutTorChromeDataMessage, this);

    addEventListener("pagehide", this, false);

src/chrome/content/aboutTor/aboutTor.xhtml

+13 −0
Original line number Diff line number Diff line
@@ -34,6 +34,19 @@ window.addEventListener("pageshow", function() { 
</script>

</head>

<body dir="&locale.dir;">

  <div id="donation-banner">

    <div><!--EMPTY SPACER DIV--></div>

    <div id="donation-banner-message">

      <div id="donation-banner-icon"></div>

      <div>&aboutTor.donationBanner3.line1;

        <a href="https://donate.torproject.org/monthly-giving">

          &aboutTor.donationBanner3.line2;

        </a>

      </div>

    </div>

    <div id="donation-banner-closer">&times;</div>

  </div>



  <div class="torcontent-container">

    <div id="torbrowser-info">

      <div id="torbrowser-version"/>

src/chrome/content/torbutton.js

+17 −0
Original line number Diff line number Diff line
@@ -22,6 +22,7 @@ const k_tb_last_browser_version_pref = "extensions.torbutton.lastBrowserVersion" 
const k_tb_browser_update_needed_pref = "extensions.torbutton.updateNeeded";

const k_tb_last_update_check_pref = "extensions.torbutton.lastUpdateCheck";

const k_tb_tor_check_failed_topic = "Torbutton:TorCheckFailed";

const k_tb_donation_banner_countdown = "extensions.torbutton.donation_banner_countdown3";



var m_tb_prefs = Services.prefs;
@@ -217,6 +218,14 @@ function torbutton_init_toolbutton() 
    }

}



// Show the donation banner a finite number of times.

function torbutton_donation_banner_countdown() {

  let count = m_tb_prefs.getIntPref(k_tb_donation_banner_countdown, 0);

  if (count > 0) {

    m_tb_prefs.setIntPref(k_tb_donation_banner_countdown, count - 1);

  }

}



function torbutton_is_mobile() {

    return Services.appinfo.OS === "Android";

}
@@ -329,6 +338,10 @@ function torbutton_init() { 
    // Add about:tor IPC message listener.

    window.messageManager.addMessageListener("AboutTor:Loaded",

                                   torbutton_abouttor_message_handler);

    window.messageManager.addMessageListener("AboutTor:HideDonationBanner",

                                   torbutton_abouttor_message_handler);



    torbutton_donation_banner_countdown();



    setupPreferencesForMobile();
@@ -444,6 +457,10 @@ var torbutton_abouttor_message_handler = { 
        aMessage.target.messageManager.sendAsyncMessage("AboutTor:ChromeData",

                                                    this.getChromeData(true));

        break;

      case "AboutTor:HideDonationBanner":

        torbutton_log(5, "message AboutTor:HideDonationBanner received");

        m_tb_prefs.setIntPref(k_tb_donation_banner_countdown, 0);

        break;

    }

  },

src/chrome/locale/en-US/aboutTor.dtd

+3 −0
Original line number Diff line number Diff line
@@ -30,3 +30,6 @@ 
<!ENTITY aboutTor.newsletter.link_text "Sign up for Tor News.">

<!ENTITY aboutTor.donationBanner.line2e "Keep Tor strong.">

<!ENTITY aboutTor.donationBanner.buttonA "Donate Now">



<!ENTITY aboutTor.donationBanner3.line1 "Automatic monthly donations keep Tor strong.">

<!ENTITY aboutTor.donationBanner3.line2 "Become a Defender of Privacy today.">

src/chrome/skin/aboutTor.css

+83 −0
Original line number Diff line number Diff line
@@ -137,6 +137,12 @@ body:not([showmanual]) .showForManual { 
  margin-top: 10vh;

}



/* Reducing this on mobile to avoid vertical overflow

 * on small screens when showing donation banner */

body[mobile] #bottom {

  margin-top: 3vh;

}



#bottom p {

  font-size: 10px;

  text-align: start;
@@ -304,6 +310,83 @@ body:not([showmanual]) .showForManual { 
  border-radius: 50px 50px 0 0;

}



/* Donation Banner

 * While this banner is present, we need to

 * offset the elements normally at the top of

 * the window.

 */



#donation-banner {

  display: flex;

  align-items: stretch;

  background-color: white;

  color: var(--abouttor-bg-toron-color);

  font-size: 16px;

  height: 70px;

  justify-content: center;

  left: 0px;

  right: 0px;

  top: 0px;

  position: absolute;

  transform: translateY(-70px);

  transition: transform 200ms;

  z-index: 1;

  padding-right:38px;

}



body[mobile] #donation-banner {

  font-size: 14px;

}



body[show-donation-banner="true"] #donation-banner {

  transform: translateY(0px);

  transition: transform 0ms;

}



#donation-banner-message {

  align-items: center;

  display: flex;

  justify-content: center;

}



#donation-banner-message a {

  color: var(--abouttor-bg-toron-color);

}



#donation-banner-icon {

  background: url('chrome://torbutton/skin/icon_monthly_donors.png') no-repeat center center;

  background-size: contain;

  background-position: bottom;

  height: 56px;

  margin: 14px 16px 0px 16px;

  width: 65px;

}



#donation-banner-closer {

  display: flex;

  align-items: center;

  font-size: 20px;

  height: 22px;

  justify-content: center;

  margin: 4px;

  padding: 4px;

  position: absolute;

  offset-inline-end: 0px;

  top: 0px;

  width: 22px;

  -moz-user-select: none;

}



#donation-banner-closer:hover {

  background-color: gray;

  cursor: pointer;

}



body[show-donation-banner="true"] #onboarding-overlay-button-container,

body[show-donation-banner="true"] .torcontent-container {

  margin-top: 72px;

}



/*

 * Mobile specific css

 */