Bug 1672764 - Logged out save variants r=thecount

Differential Revision: https://phabricator.services.mozilla.com/D95641

browser/app/profile/firefox.js

@@ -1872,6 +1872,10 @@ pref("extensions.pocket.site", "getpocket.com");
 pref("extensions.pocket.onSaveRecs", true);
 pref("extensions.pocket.onSaveRecs.locales", "en-US,en-GB,en-CA");
 
+// Control what version of the logged out doorhanger is displayed
+// Possibilities are: `control`, `control-one-button`, `variant_a`, `variant_b`, `variant_c`
+pref("extensions.pocket.loggedOutVariant", "control");
+
 #ifdef NIGHTLY_BUILD
 pref("signon.management.page.fileImport.enabled", true);
 pref("signon.management.page.os-auth.enabled", true);

browser/components/pocket/compile_handlebars.js

@@ -13,6 +13,9 @@ let templates = [
   `ho2/ho2_download`,
   `ho2/ho2_download_error`,
   `ho2/ho2_sharebutton`,
+  `loggedoutvariants/variant_a`,
+  `loggedoutvariants/variant_b`,
+  `loggedoutvariants/variant_c`,
   `saved_premiumextras`,
   `saved_premiumshell`,
   `saved_shell`,

browser/components/pocket/content/main.js

@@ -251,6 +251,8 @@ var pktUI = (function() {
       showPanel(
         "about:pocket-signup?pockethost=" +
           Services.prefs.getCharPref("extensions.pocket.site") +
+          "&loggedOutVariant=" +
+          Services.prefs.getCharPref("extensions.pocket.loggedOutVariant") +
           "&fxasignedin=" +
           fxasignedin +
           "&variant=" +

browser/components/pocket/content/panels/css/signup.css

@@ -430,3 +430,74 @@
 .pkt_ext_signup_overflow.pkt_ext_signup_ru .signup-btn-firefox .logo {
     display: none;
 }
+
+/* Signup variants */
+/* TODO: Delete post-experiment */
+
+.los_variant {
+    background-color: #fff;
+    padding: 0;
+    text-align: start;
+}
+
+.los_variant_top {
+    padding: 24px;
+}
+
+.los_variant_bottom {
+    text-align: center;
+    padding: 26px 22px;
+}
+
+.los_variant_bottom .los_variant_button {
+    font-style: normal;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+    color: #FFFFFF;
+    border-radius: 4px;
+    background: #0060DF;
+    display: block;
+    padding: 8px 16px;
+    margin-bottom: 16px
+}
+
+.los_variant_bottom .los_variant_sub {
+    font-style: normal;
+    font-weight: normal;
+    font-size: 13px;
+    line-height: 16px;
+    color: #737373;
+}
+
+.los_variant_bottom .los_variant_sub a {
+    color: #0060DF;
+}
+
+.los_variant_a .los_variant_top {
+    background-color: #e8f7f6;
+}
+
+.los_variant_b .los_variant_top {
+    background-color: #DCEAFF;
+}
+
+.los_variant_c .los_variant_top {
+    background-color: #ffffff;
+}
+
+.los_variant h1 {
+    font-weight: 600;
+    font-size: 17px;
+    line-height: 20px;
+    color: #0C0C0D;
+}
+
+.los_variant p {
+    font-style: normal;
+    font-weight: normal;
+    font-size: 15px;
+    line-height: 18px;
+    color: #0C0C0D;
+}

browser/components/pocket/content/panels/js/signup.js

@@ -23,6 +23,7 @@ var PKT_SIGNUP_OVERLAY = function(options) {
   this.controlvariant;
   this.pockethost = "getpocket.com";
   this.fxasignedin = false;
+  this.loggedOutVariant = "control";
   this.dictJSON = {};
   this.initCloseTabEvents = function() {
     $(".btn,.pkt_ext_learnmore,.alreadyhave > a").click(function(e) {
@@ -69,6 +70,12 @@ PKT_SIGNUP_OVERLAY.prototype = {
     if (variant && variant.length > 1) {
       this.variant = variant[1];
     }
+    var loggedOutVariant = window.location.href.match(
+      /loggedOutVariant=([\w|\.]*)&?/
+    );
+    if (loggedOutVariant && loggedOutVariant.length > 1) {
+      this.loggedOutVariant = loggedOutVariant[1];
+    }
     var fxasignedin = window.location.href.match(/fxasignedin=([\w|\d|\.]*)&?/);
     if (fxasignedin && fxasignedin.length > 1) {
       this.fxasignedin = fxasignedin[1] == "1";
@@ -116,8 +123,24 @@ PKT_SIGNUP_OVERLAY.prototype = {
     if (this.variant == "overflow") {
       $("body").append(Handlebars.templates.signup_shell(this.dictJSON));
     } else {
+      // Logged Out Display Variants for MV Testing
+      let variants = {
+        control: "signupstoryboard_shell",
+        variant_a: "variant_a",
+        variant_b: "variant_b",
+        variant_c: "variant_c",
+      };
+
+      if (this.loggedOutVariant !== `control`) {
+        $("body").addClass(`
+          los_variant los_${variants[this.loggedOutVariant]}
+        `);
+      }
+
       $("body").append(
-        Handlebars.templates.signupstoryboard_shell(this.dictJSON)
+        Handlebars.templates[
+          variants[this.loggedOutVariant] || variants.control
+        ](this.dictJSON)
       );
     }
 

browser/components/pocket/content/panels/js/tmpl.js

@@ -36,6 +36,15 @@ templates['ho2_download_error'] = template({"compiler":[6,">= 2.0.0-beta.1"],"ma
 templates['ho2_sharebutton'] = template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
     return "<div class=\"pkt_ext_detail pkt_ext_saved_sendtomobile\">\n    <button id=\"pkt_ext_sendtomobile_button\" class=\"pkt_ext_button\">\n        <span class=\"pkt_ext_save_title_wrapper pkt_ext_mobile_icon\">\n            <span class=\"pkt_ext_logo_action_copy\">Send to your phone</span>\n        </span>\n    </button>\n</div>\n";
 },"useData":true});
+templates['variant_a'] = template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
+    return "<div class=\"los_variant_wrapper\">\n  <div class=\"los_variant_top\">\n    <h1>Click this [v] button to save articles, videos, and links to Pocket.</h1>\n    <p>Enjoy everything you save, on any device.</p>\n    <a href=\"#TODO\">Learn more ›</a>\n  </div>\n\n  <div class=\"los_variant_bottom\">\n    <a class=\"los_variant_button\" href=\"#TODO\">Get Pocket for free</a>\n    <p class=\"los_variant_sub\">Already a Pocket user? <a href=\"#TODO\">Log in.</a></p>\n  </div>\n</div>\n";
+},"useData":true});
+templates['variant_b'] = template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
+    return "<div class=\"los_variant_wrapper\">\n  <div class=\"los_variant_top\">\n    <h1>Here's your save button for the internet.</h1>\n    <a href=\"#TODO\">Learn more ›</a>\n  </div>\n\n  <div class=\"los_variant_bottom\">\n    <a class=\"los_variant_button\" href=\"#TODO\">Get Pocket for free</a>\n    <p class=\"los_variant_sub\">Already a Pocket user? <a href=\"#TODO\">Log in.</a></p>\n  </div>\n</div>\n";
+},"useData":true});
+templates['variant_c'] = template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
+    return "<div class=\"los_variant_wrapper\">\n  <div class=\"los_variant_top\">\n    <h1>Get Pocket to save anything to your personal corner of the internet.</h1>\n    <a href=\"#TODO\">Learn more ›</a>\n  </div>\n\n  <div class=\"los_variant_bottom\">\n    <a class=\"los_variant_button\" href=\"#TODO\">Sign up for free</a>\n    <p class=\"los_variant_sub\">Already a Pocket user? <a href=\"#TODO\">Log in.</a></p>\n  </div>\n</div>\n\n\n";
+},"useData":true});
 templates['saved_premiumextras'] = template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
     return "<div class=\"pkt_ext_suggestedtag_detailshown\">\r\n</div> ";
 },"useData":true});

browser/components/pocket/content/panels/tmpl/loggedoutvariants/variant_a.handlebars

@@ -0,0 +1,12 @@
+<div class="los_variant_wrapper">
+  <div class="los_variant_top">
+    <h1>Click this [v] button to save articles, videos, and links to Pocket.</h1>
+    <p>Enjoy everything you save, on any device.</p>
+    <a href="#TODO">Learn more ›</a>
+  </div>
+
+  <div class="los_variant_bottom">
+    <a class="los_variant_button" href="#TODO">Get Pocket for free</a>
+    <p class="los_variant_sub">Already a Pocket user? <a href="#TODO">Log in.</a></p>
+  </div>
+</div>

browser/components/pocket/content/panels/tmpl/loggedoutvariants/variant_b.handlebars

@@ -0,0 +1,11 @@
+<div class="los_variant_wrapper">
+  <div class="los_variant_top">
+    <h1>Here's your save button for the internet.</h1>
+    <a href="#TODO">Learn more ›</a>
+  </div>
+
+  <div class="los_variant_bottom">
+    <a class="los_variant_button" href="#TODO">Get Pocket for free</a>
+    <p class="los_variant_sub">Already a Pocket user? <a href="#TODO">Log in.</a></p>
+  </div>
+</div>

browser/components/pocket/content/panels/tmpl/loggedoutvariants/variant_c.handlebars

@@ -0,0 +1,13 @@
+<div class="los_variant_wrapper">
+  <div class="los_variant_top">
+    <h1>Get Pocket to save anything to your personal corner of the internet.</h1>
+    <a href="#TODO">Learn more ›</a>
+  </div>
+
+  <div class="los_variant_bottom">
+    <a class="los_variant_button" href="#TODO">Sign up for free</a>
+    <p class="los_variant_sub">Already a Pocket user? <a href="#TODO">Log in.</a></p>
+  </div>
+</div>
+
+