Backed out changeset efd80121bf41 (bug 1501459) for ES lint failure CLOSED TREE

--HG--
rename : browser/components/pocket/content/panels/tmpl/ho2/ho2_sharebutton.handlebars => browser/components/pocket/content/panels/tmpl/ho2/ho2_sharebutton_v2.handlebars

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

@@ -2,6 +2,10 @@
     top: -5px;
 }
 
+.pkt_ext_saved_sendtomobile.pkt_ext_ho2_v1 .pkt_ext_loadingspinner {
+    top: 110px;
+}
+
 .pkt_ext_save_title_wrapper {
     position: relative;
     display: inline-flex;
@@ -91,6 +95,13 @@
     cursor: pointer;
 }
 
+.pkt_ext_ho2_v1 {
+    background-color: #EBEBEB;
+    border-top: 1px solid #C3C3C3;
+    padding: 17px;
+    height: 144px;
+}
+
 .pkt_ext_experiment_saved_tile {
     position: relative;
     margin: 0 auto 17px;

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

@@ -3,7 +3,8 @@
 var PKT_SENDTOMOBILE = (function() {
 
     var width = 350;
-    var ctaHeight = 200;
+    var variant1Height = 312;
+    var variant2Height = 200;
     var confirmHeight = 275;
     var premDetailsHeight = 110;
     var email = null;
@@ -48,10 +49,22 @@ var PKT_SENDTOMOBILE = (function() {
         $("body").addClass("pkt_ext_ho2_experiment");
         var height = (adjustHeight) ? premDetailsHeight : 0;
 
-        // Show "Send to your phone" CTA
-        height += ctaHeight;
-        $("body").append(Handlebars.templates.ho2_sharebutton());
-        thePKT_SAVED.sendMessage("resizePanel", { width, height });
+        if (ho2 == "show_prompt_preview") {
+            height += variant1Height;
+            $("body").append(Handlebars.templates.ho2_sharebutton_v1());
+            thePKT_SAVED.sendMessage("resizePanel", { width, height });
+            thePKT_SAVED.sendMessage("getArticleInfo", {}, function(data) {
+                _swapPlaceholder(data);
+            });
+        } else if (ho2 == "show_prompt_no_preview") {
+            height += variant2Height;
+            $("body").append(Handlebars.templates.ho2_sharebutton_v2());
+            thePKT_SAVED.sendMessage("resizePanel", { width, height });
+        } else if (ho2 == "show_prompt_get_app") {
+            height += variant2Height;
+            $("body").append(Handlebars.templates.ho2_sharebutton_v3());
+            thePKT_SAVED.sendMessage("resizePanel", { width, height });
+        }
 
         _initPanelOneClicks();
     }

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

@@ -33,9 +33,15 @@ templates['ho2_download'] = template({"compiler":[6,">= 2.0.0-beta.1"],"main":fu
 templates['ho2_download_error'] = template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
     return "<div class=\"pkt_ext_detail pkt_ext_saved_sendcollectemail\">\n    <h3 class=\"pkt_ext_heading\">There was a problem</h3>\n    <p class=\"pkt_ext_description\">Email failed to send, please try again later</p>\n\n    <div class=\"pkt_ext_download_section\">\n        <p class=\"pkt_ext_description\">You can also get the Pocket app on the App Store here:</p>\n\n        <div class=\"pkt_ext_download_button_wrapper\">\n            <a href=\"https://getpocket.com/apps/link/pocket-iphone/?s=fx_save_hanger\" target=\"_blank\" ><div class=\"pkt_ext_apple_download\"></div></a>\n            <a href=\"https://getpocket.com/apps/link/pocket-android/?s=fx_save_hanger\" target=\"_blank\" ><img class=\"pkt_ext_google_download\" alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png'/></a>\n        </div>\n    </div>\n</div>\n";
 },"useData":true});
-templates['ho2_sharebutton'] = template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
+templates['ho2_sharebutton_v1'] = template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
+    return "<div class=\"pkt_ext_detail pkt_ext_saved_sendtomobile pkt_ext_ho2_v1\">\n    <div id=\"pkt_ext_articleinfo\">\n        <div id=\"pkt_ext_swap\" class=\"pkt_ext_experiment_saved_tile pkt_ext_has_image pkt_ext_cf\">\n            <div class=\"pkt_ext_save_image pkt_ext_save_image_placeholder\"></div>\n\n            <div class=\"pkt_ext_save_title pkt_ext_title_image_placeholder\">\n                <div class=\"pkt_ext_save_open\"> </div>\n                <div class=\"pkt_ext_save_source\"> </div>\n            </div>\n        </div>\n    </div>\n\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['ho2_sharebutton_v2'] = 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['ho2_sharebutton_v3'] = 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\">Get the Pocket Mobile App</span>\n        </span>\n    </button>\n</div>\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/ho2/ho2_sharebutton_v1.handlebars

@@ -0,0 +1,18 @@
+<div class="pkt_ext_detail pkt_ext_saved_sendtomobile pkt_ext_ho2_v1">
+    <div id="pkt_ext_articleinfo">
+        <div id="pkt_ext_swap" class="pkt_ext_experiment_saved_tile pkt_ext_has_image pkt_ext_cf">
+            <div class="pkt_ext_save_image pkt_ext_save_image_placeholder"></div>
+
+            <div class="pkt_ext_save_title pkt_ext_title_image_placeholder">
+                <div class="pkt_ext_save_open"> </div>
+                <div class="pkt_ext_save_source"> </div>
+            </div>
+        </div>
+    </div>
+
+    <button id="pkt_ext_sendtomobile_button" class="pkt_ext_button">
+        <span class="pkt_ext_save_title_wrapper pkt_ext_mobile_icon">
+            <span class="pkt_ext_logo_action_copy">Send to your phone</span>
+        </span>
+    </button>
+</div>

browser/components/pocket/content/panels/tmpl/ho2/ho2_sharebutton_v3.handlebars

@@ -0,0 +1,7 @@
+<div class="pkt_ext_detail pkt_ext_saved_sendtomobile">
+    <button id="pkt_ext_sendtomobile_button" class="pkt_ext_button">
+        <span class="pkt_ext_save_title_wrapper pkt_ext_mobile_icon">
+            <span class="pkt_ext_logo_action_copy">Get the Pocket Mobile App</span>
+        </span>
+    </button>
+</div>