mozilla-central: changeset 418807:2eba9608447d0e8d2572b292d8d733645d698286

--- a/browser/extensions/pocket/content/main.js
+++ b/browser/extensions/pocket/content/main.js
@@ -217,83 +217,96 @@ var pktUI = (function() {
         var isValidURL = (typeof url !== "undefined" && (url.startsWith("http") || url.startsWith("https")));
 
         var inOverflowMenu = isInOverflowMenu();
         var startheight = pktApi.isPremiumUser() && isValidURL ? savePanelHeights.expanded : savePanelHeights.collapsed;
         if (inOverflowMenu) {
             startheight = overflowMenuHeight;
         }
 
-        var panelId = showPanel("about:pocket-saved?pockethost=" + Services.prefs.getCharPref("extensions.pocket.site") + "&premiumStatus=" + (pktApi.isPremiumUser() ? "1" : "0") + "&inoverflowmenu=" + inOverflowMenu + "&locale=" + getUILocale(), {
-            onShow() {
-                var saveLinkMessageId = "saveLink";
-                _lastAddSucceeded = false;
-                getPanelFrame().setAttribute("itemAdded", "false");
+        getFirefoxAccountSignedInUser(function(userdata) {
+            var panelId = showPanel("about:pocket-saved?pockethost="
+                + Services.prefs.getCharPref("extensions.pocket.site")
+                + "&premiumStatus=" + (pktApi.isPremiumUser() ? "1" : "0")
+                + "&fxasignedin=" + ((typeof userdata == "object" && userdata !== null) ? "1" : "0")
+                + "&inoverflowmenu=" + inOverflowMenu
+                + "&locale=" + getUILocale(), {
+                onShow() {
+                    var saveLinkMessageId = "saveLink";
+                    _lastAddSucceeded = false;
+                    getPanelFrame().setAttribute("itemAdded", "false");
 
-                // Send error message for invalid url
-                if (!isValidURL) {
-                    // TODO: Pass key for localized error in error object
-                    let error = {
-                        message: "Only links can be saved",
-                        localizedKey: "onlylinkssaved"
-                    };
-                    pktUIMessaging.sendErrorMessageToPanel(panelId, saveLinkMessageId, error);
-                    return;
-                }
+                    // Send error message for invalid url
+                    if (!isValidURL) {
+                        // TODO: Pass key for localized error in error object
+                        let error = {
+                            message: "Only links can be saved",
+                            localizedKey: "onlylinkssaved"
+                        };
+                        pktUIMessaging.sendErrorMessageToPanel(panelId, saveLinkMessageId, error);
+                        return;
+                    }
 
-                // Check online state
-                if (!navigator.onLine) {
-                    // TODO: Pass key for localized error in error object
-                    let error = {
-                        message: "You must be connected to the Internet in order to save to Pocket. Please connect to the Internet and try again."
-                    };
-                    pktUIMessaging.sendErrorMessageToPanel(panelId, saveLinkMessageId, error);
-                    return;
-                }
+                    // Check online state
+                    if (!navigator.onLine) {
+                        // TODO: Pass key for localized error in error object
+                        let error = {
+                            message: "You must be connected to the Internet in order to save to Pocket. Please connect to the Internet and try again."
+                        };
+                        pktUIMessaging.sendErrorMessageToPanel(panelId, saveLinkMessageId, error);
+                        return;
+                    }
 
-                // Add url
-                var options = {
-                    success(data, request) {
-                        var item = data.item;
-                        var successResponse = {
-                            status: "success",
-                            item
-                        };
-                        pktUIMessaging.sendMessageToPanel(panelId, saveLinkMessageId, successResponse);
-                        _lastAddSucceeded = true;
-                        getPanelFrame().setAttribute("itemAdded", "true");
-                    },
-                    error(error, request) {
-                        // If user is not authorized show singup page
-                        if (request.status === 401) {
-                            showSignUp();
-                            return;
-                        }
+                    // Add url
+                    var options = {
+                        success(data, request) {
+                            var item = data.item;
+                            var ho2 = data.ho2;
+                            var accountState = data.account_state;
+                            var displayName = data.display_name;
+                            var successResponse = {
+                                status: "success",
+                                accountState,
+                                displayName,
+                                item,
+                                ho2
+                            };
+                            pktUIMessaging.sendMessageToPanel(panelId, saveLinkMessageId, successResponse);
+                            _lastAddSucceeded = true;
+                            getPanelFrame().setAttribute("itemAdded", "true");
+                        },
+                        error(error, request) {
+                            // If user is not authorized show singup page
+                            if (request.status === 401) {
+                                showSignUp();
+                                return;
+                            }
 
-                        // If there is no error message in the error use a
-                        // complete catch-all
-                        var errorMessage = error.message || "There was an error when trying to save to Pocket.";
-                        var panelError = { message: errorMessage};
+                            // If there is no error message in the error use a
+                            // complete catch-all
+                            var errorMessage = error.message || "There was an error when trying to save to Pocket.";
+                            var panelError = { message: errorMessage};
 
-                        // Send error message to panel
-                        pktUIMessaging.sendErrorMessageToPanel(panelId, saveLinkMessageId, panelError);
-                    }
-                };
+                            // Send error message to panel
+                            pktUIMessaging.sendErrorMessageToPanel(panelId, saveLinkMessageId, panelError);
+                        }
+                    };
 
-                // Add title if given
-                if (typeof title !== "undefined") {
-                    options.title = title;
-                }
+                    // Add title if given
+                    if (typeof title !== "undefined") {
+                        options.title = title;
+                    }
 
-                // Send the link
-                pktApi.addLink(url, options);
-            },
-            onHide: panelDidHide,
-            width: inOverflowMenu ? overflowMenuWidth : savePanelWidth,
-            height: startheight
+                    // Send the link
+                    pktApi.addLink(url, options);
+                },
+                onHide: panelDidHide,
+                width: inOverflowMenu ? overflowMenuWidth : savePanelWidth,
+                height: startheight
+            });
         });
     }
 
     /**
      * Open a generic panel
      */
     function showPanel(url, options) {
 
@@ -393,16 +406,44 @@ var pktUI = (function() {
         });
 
         // Send the current url to the panel
         var _getCurrentURLMessageId = "getCurrentURL";
         pktUIMessaging.addMessageListener(iframe, _getCurrentURLMessageId, function(panelId, data) {
             pktUIMessaging.sendResponseMessageToPanel(panelId, _getCurrentURLMessageId, getCurrentUrl());
         });
 
+        // Get article info
+        var _getArticleInfoMessageId = "getArticleInfo";
+        pktUIMessaging.addMessageListener(iframe, _getArticleInfoMessageId, function(panelId, data) {
+            pktApi.getArticleInfo(getCurrentUrl(), {
+                success: function(res, req) {
+                    pktUIMessaging.sendResponseMessageToPanel(panelId, _getArticleInfoMessageId, res);
+                },
+                error: function(err, req) {
+                    err.fallback_title = getCurrentTitle();
+                    err.fallback_domain = new URL(getCurrentUrl()).hostname;
+                    pktUIMessaging.sendResponseMessageToPanel(panelId, _getArticleInfoMessageId, err);
+                }
+            });
+        });
+
+        // getMobileDownload
+        var _getMobileDownloadMessageId = "getMobileDownload";
+        pktUIMessaging.addMessageListener(iframe, _getMobileDownloadMessageId, function(panelId, data) {
+            pktApi.getMobileDownload({
+                success: function(res, req) {
+                    pktUIMessaging.sendResponseMessageToPanel(panelId, _getMobileDownloadMessageId, res);
+                },
+                error: function(err, req) {
+                    pktUIMessaging.sendResponseMessageToPanel(panelId, _getMobileDownloadMessageId, err);
+                }
+            });
+        });
+
         var _resizePanelMessageId = "resizePanel";
         pktUIMessaging.addMessageListener(iframe, _resizePanelMessageId, function(panelId, data) {
             resizePanel(data);
         });
 
         // Callback post initialization to tell background script that panel is "ready" for communication.
         pktUIMessaging.addMessageListener(iframe, "listenerReady", function(panelId, data) {

deleted file mode 100644
--- a/browser/extensions/pocket/content/panels/css/firasans.css
+++ /dev/null
@@ -1,6 +0,0 @@
-@font-face {
-    font-family: 'FiraSans';
-    src: url('../fonts/FiraSans-Regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-}
\ No newline at end of file

--- a/browser/extensions/pocket/content/panels/css/saved.css
+++ b/browser/extensions/pocket/content/panels/css/saved.css
@@ -17,17 +17,17 @@
 
 /*=Global
 --------------------------------------------------------------------------------------- */
 .pkt_ext_containersaved {
     background-color: #fbfbfb;
     border-radius: 4px;
     display: block;
     font-size: 16px;
-    font-family: "FiraSans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     padding: 0;
     position: relative;
     text-align: center;
 }
 .pkt_ext_cf:after {
     content: " ";
     display:table;
     clear:both;
@@ -343,17 +343,17 @@
 --------------------------------------------------------------------------------------- */
 .pkt_ext_containersaved .pkt_ext_tag_detail {
     border: 1px solid #c1c1c1;
     border-radius: 2px;
     font-size: 16px;
     clear: both;
     margin: 1.25em 1em;
     padding: 0;
-    display: flex;    
+    display: flex;
 }
 .pkt_ext_containersaved .pkt_ext_tag_error {
     border: none;
 }
 .pkt_ext_containersaved .pkt_ext_tag_input_wrapper {
     box-sizing: border-box;
     flex: 1;
     background-color: #fff;
@@ -474,21 +474,20 @@
 }
 .pkt_ext_containersaved .pkt_ext_suggestedtag_detailshown {
     padding: 4px 0;
 }
 .pkt_ext_container_finalstate .pkt_ext_suggestedtag_detail {
     opacity: 0;
     visibility: hidden;
 }
-.pkt_ext_containersaved 
+
 .pkt_ext_containersaved .pkt_ext_recenttag_detail h4,
 .pkt_ext_containersaved .pkt_ext_suggestedtag_detail h4 {
     color: #333;
-    font-size: 0.8125em;
     font-size: 13px;
     font-weight: normal;
     font-style: normal;
     letter-spacing: normal;
     margin: 0.5em 0;
     text-align: left;
     text-transform: none;
 }
@@ -502,32 +501,32 @@
     display: block;
     font-size: 6px;
     left: 48%;
 }
 .pkt_ext_containersaved .pkt_ext_recenttag_detail ul,
 .pkt_ext_containersaved .pkt_ext_suggestedtag_detail ul {
     display: block;
     margin: 0;
-    height: 2em; 
+    height: 2em;
     overflow: hidden;
     padding: 2px 0 0 0;
 }
 .pkt_ext_containersaved .pkt_ext_suggestedtag_detail ul {
     height: auto;
     margin: 0;
     max-height: 4em;
     padding-top: 6px;
 }
 .pkt_ext_containersaved .pkt_ext_recenttag_detail li,
 .pkt_ext_containersaved .pkt_ext_suggestedtag_detail li {
     background: none;
     float: left;
     height: inherit;
-    line-height: 1.5; 
+    line-height: 1.5;
     list-style: none;
     margin-bottom: 0.5em;
     width: inherit;
 }
 .pkt_ext_containersaved .pkt_ext_recenttag_detail li:before,
 .pkt_ext_containersaved .pkt_ext_suggestedtag_detail li:before {
     content: none;
 }
@@ -664,17 +663,17 @@
 .token-input-list li input {
     border: 0;
     background-color: white;
 }
 .pkt_ext_containersaved .token-input-token {
     background: none;
     border-radius: 4px;
     border: 1px solid #c3c3c3;
-    overflow: hidden;  
+    overflow: hidden;
     margin: 0;
     padding: 0 8px;
     background-color: #f7f7f7;
     color: #000;
     font-weight: normal;
     cursor: default;
     line-height: 1.5;
     display: block;
@@ -818,8 +817,100 @@
 --------------------------------------------------------------------------------------- */
 .pkt_ext_saved_es .pkt_ext_btn {
     min-width: 5em;
 }
 .pkt_ext_saved_de .pkt_ext_btn,
 .pkt_ext_saved_ru .pkt_ext_btn {
     min-width: 6em;
 }
+
+/*=Coral Button
+--------------------------------------------------------------------------------------- */
+button {
+    padding: 0;
+    margin: 0;
+    background: none;
+    border: 0;
+    outline: none;
+    color: inherit;
+    font: inherit;
+    overflow: visible;
+    user-select: none;
+}
+
+.pkt_ext_button {
+    padding: 3px;
+    background-color: #EF4056;
+    color: #FFF;
+    text-align: center;
+    cursor: pointer;
+    height: 32px;
+    box-sizing: border-box;
+    width: 320px;
+    margin: 0 auto;
+    border-radius: 2px;
+    font-size: 14px;
+}
+
+.pkt_ext_button:hover,
+.pkt_ext_button:active {
+    background-color: #d5374b;
+}
+
+/* alt button */
+.pkt_ext_blue_button {
+    background-color: #0060df;
+    color: #FFF;
+}
+
+.pkt_ext_blue_button:hover {
+    background-color: #003eaa;
+}
+
+.pkt_ext_blue_button:active {
+    background-color: #002275;
+}
+
+.pkt_ext_ffx_icon:after {
+    position: absolute;
+    height: 22px;
+    width: 22px;
+    top: -3px;
+    left: -28px;
+    content: "";
+    background-image: url(../img/signup_firefoxlogo@2x.png);
+    background-size: 22px 22px;
+    background-repeat: no-repeat;
+}
+
+
+/*=Tmp Account Login
+--------------------------------------------------------------------------------------- */
+.pkt_shaded_background {
+    background-color: #EBEBEB;
+    border-top: 1px solid #C3C3C3;
+    padding: 0 15px;
+}
+
+.pkt_ext_saved_tmplogin {
+    height: 146px;
+}
+
+.pkt_ext_indent_bordered {
+    margin: 15px 0;
+    padding: 0 7px;
+    border-left: 4px solid rgba(68, 68, 68, .15);
+    text-align: left;
+    font-size: 13px;
+    color: #313131;
+}
+
+[dir='rtl'] .pkt_ext_indent_bordered {
+  border-left: none;
+  border-right: 4px solid rgba(68, 68, 68, .15);
+  text-align: right;
+}
+
+.pkt_ext_indent_bordered > p {
+    margin-bottom: 3px;
+}
+

new file mode 100644
--- /dev/null
+++ b/browser/extensions/pocket/content/panels/css/sendtomobile.css
@@ -0,0 +1,207 @@
+.pkt_ext_saved_sendtomobile .pkt_ext_loadingspinner {
+    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;
+}
+
+.pkt_ext_save_title_wrapper.pkt_ext_mobile_icon:after {
+    position: absolute;
+    height: 15px;
+    width: 10px;
+    top: 0;
+    left: -16px;
+    content: url('data:image/svg+xml;utf8,<svg viewBox="0 0 10 15" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="white" fill-rule="evenodd"><path d="M0.81,0.407552083 L9.19,0.407552083 C9.63735065,0.407552083 10,0.770201436 10,1.21755208 L10,14.0233333 C10,14.470684 9.63735065,14.8333333 9.19,14.8333333 L0.81,14.8333333 C0.362649353,14.8333333 6.09896166e-16,14.470684 5.55111512e-16,14.0233333 L2.22044605e-16,1.21755208 C1.67259951e-16,0.770201436 0.362649353,0.407552083 0.81,0.407552083 Z M1,1.31865406 L1,12.074719 L9,12.074719 L9,1.31865406 L1,1.31865406 Z M3.68055556,13.1666667 C3.48879002,13.1666667 3.33333333,13.3221234 3.33333333,13.5138889 C3.33333333,13.7056544 3.48879002,13.8611111 3.68055556,13.8611111 L6.31944444,13.8611111 C6.51120998,13.8611111 6.66666667,13.7056544 6.66666667,13.5138889 C6.66666667,13.3221234 6.51120998,13.1666667 6.31944444,13.1666667 L3.68055556,13.1666667 Z"></path></g></svg>');
+}
+
+.pkt_ext_logo_action_copy {
+    display: inline-block;
+    font-size: 13px;
+}
+
+.pkt_ext_checkbox_label {
+    font-size: 11px;
+    color: #999;
+    cursor: pointer;
+}
+
+#pkt_ext_signup_button {
+    width: 70px;
+}
+
+.pkt_ext_heading {
+    font-size: 17px;
+    font-weight: 400;
+    color: #222;
+    width: 250px;
+    margin: 35px auto 10px;
+}
+
+.pkt_ext_saved_sendcollectemail .pkt_ext_tag_detail {
+    margin: 0px auto;
+}
+
+.pkt_ext_saved_sendcollectemail .pkt_ext_tag_detail,
+.pkt_ext_saved_sendcollectemail .pkt_ext_tag_input_wrapper {
+    width: 255px;
+}
+
+.pkt_ext_checkbox_wrapper {
+    text-align: left;
+    margin: 0px auto 15px;
+    width: 255px;
+}
+
+.pkt_ext_description {
+    font-size: 14px;
+    color: #666;
+    font-weight: 400;
+    width: 280px;
+    margin: 0 auto;
+    line-height: 20px;
+}
+
+.pkt_ext_bold {
+    font-weight: bold;
+}
+
+.pkt_ext_download_section {
+    margin-top: 28px;
+}
+
+.pkt_ext_download_button_wrapper {
+    margin-top: 5px;
+}
+
+.pkt_ext_apple_download {
+    display: inline-block;
+    cursor: pointer;
+    height: 40px;
+    margin: 10px;
+    vertical-align: center;
+    width: 120px;
+    background: url(../img/app_store_dowload_apple.svg) bottom right no-repeat;
+}
+
+.pkt_ext_google_download {
+    display: inline-block;
+    height: 60px;
+    width: 155px;
+    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;
+    height: 95px;
+    background-color: #FFF;
+    box-shadow: 0px 1px 1px rgba(147,147,147,0.5);
+}
+
+.pkt_ext_experiment_saved_tile .pkt_ext_save_title {
+    width: 295px;
+}
+
+.pkt_ext_experiment_saved_tile .pkt_ext_save_open {
+    max-height: 50px;
+    overflow: hidden;
+}
+
+.pkt_ext_experiment_saved_tile.pkt_ext_has_image .pkt_ext_save_title {
+    margin-left: 78px;
+    width: 210px;
+}
+
+.pkt_ext_experiment_saved_tile .pkt_ext_save_image {
+    left: 0;
+}
+
+.pkt_ext_experiment_saved_tile {
+    transform-style: preserve-3d;
+}
+
+.pkt_ext_save_image {
+    position: absolute;
+    top: 0;
+    right: 0;
+    box-sizing: border-box;
+    height: 100%;
+    width: 78px;
+    background-color: #979797;
+    border: none;
+}
+
+.pkt_ext_save_title {
+    position: relative;
+    top: 50%;
+    padding: 10px 15px;
+    transform: perspective(1px) translateY(-50%);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 16px;
+    text-align: left;
+    overflow: hidden;
+    color: #222;
+}
+
+.pkt_ext_save_title a {
+    display: block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.pkt_ext_save_title a:link ,
+.pkt_ext_save_title a:visited ,
+.pkt_ext_save_title a:active,
+.pkt_ext_save_title a:hover {
+    color: #222 !important;
+}
+
+a.pkt_ext_save_open,
+a.pkt_ext_save_open:hover {
+    color: #000;
+}
+
+.pkt_ext_save_source {
+    margin-top: 7px;
+    padding-left: 0;
+    color: #999;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 1.1em;
+    letter-spacing:0.03em;
+}
+
+.pkt_ext_ho2_experiment .pkt_ext_suggestedtag_detail,
+.pkt_ext_ho2_experiment .pkt_ext_suggestedtag_detailshown {
+    position: relative;
+    background-color: #fbfbfb;
+    border-top: none;
+}
+
+/* Placeholder */
+.pkt_ext_experiment_saved_tile .pkt_ext_save_image.pkt_ext_save_image_placeholder,
+.pkt_ext_experiment_saved_tile.pkt_ext_has_image .pkt_ext_save_title.pkt_ext_title_image_placeholder .pkt_ext_save_open,
+.pkt_ext_experiment_saved_tile.pkt_ext_has_image .pkt_ext_save_title.pkt_ext_title_image_placeholder .pkt_ext_save_source {
+    background: linear-gradient(to right, #EEE 0%, #DDD 50%, #EEE 100%);
+    background-size: 400% 400%;
+    animation: backgroundScroll 3s linear infinite;
+}
+
+@keyframes backgroundScroll {
+    0%  { background-position: -200% 0 }
+    100%{ background-position: 200% 0 }
+}

--- a/browser/extensions/pocket/content/panels/css/signup.css
+++ b/browser/extensions/pocket/content/panels/css/signup.css
@@ -14,17 +14,17 @@
 
 /*=Global
 --------------------------------------------------------------------------------------- */
 .pkt_ext_containersignup {
     background-color: #ebebeb;
     color: #333;
     display: block;
     font-size: 16px;
-    font-family: "FiraSans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     margin: 0;
     padding: 0;
     position: relative;
     text-align: center;
 }
 .pkt_ext_containersignup_inactive {
     animation: pkt_ext_hide 0.3s ease-out;
     opacity: 0;
@@ -50,17 +50,17 @@
     }
 }
 
 /*=Core detail
 --------------------------------------------------------------------------------------- */
 .pkt_ext_containersignup p {
     font-size: 14px;
     color: #333;
-    font-family: "FiraSans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     line-height: 1.3;
     margin: 0 auto 1.5em;
     max-width: 260px;
 }
 .pkt_ext_containersignup a {
     color: #4c8fd0;
 }
 .pkt_ext_containersignup a:hover {
@@ -222,17 +222,17 @@
 /*=Buttons
 --------------------------------------------------------------------------------------- */
 .pkt_ext_containersignup .btn {
     background-color: #0096dd;
     border: 1px solid #0095dd;
     border-radius: 2px;
     color: #fff;
     display: inline-block;
-    font-family: "FiraSans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 16px;
     font-weight: normal;
     line-height: 1;
     margin: 0;
     padding: 11px 45px;
     text-align: center;
     text-decoration: none;
     text-shadow: 0 -1px 0 rgba(142,4,17,0.5);

new file mode 100755
--- /dev/null
+++ b/browser/extensions/pocket/content/panels/img/app_store_dowload_apple.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="119.664" height="40" viewBox="0 0 119.66407 40">
+    <path d="M110.135 0H9.535c-.367 0-.73 0-1.095.002-.306.002-.61.008-.919.013A13.215 13.215 0 0 0 5.517.19a6.665 6.665 0 0 0-1.9.627 6.438 6.438 0 0 0-1.62 1.18A6.258 6.258 0 0 0 .82 3.617a6.601 6.601 0 0 0-.625 1.903 12.993 12.993 0 0 0-.179 2.002c-.01.307-.01.615-.015.921V31.56c.005.31.006.61.015.921a12.992 12.992 0 0 0 .18 2.002 6.588 6.588 0 0 0 .624 1.905A6.208 6.208 0 0 0 1.998 38a6.274 6.274 0 0 0 1.618 1.179 6.7 6.7 0 0 0 1.901.63 13.455 13.455 0 0 0 2.004.177c.31.007.613.011.919.011.366.002.728.002 1.095.002h100.6c.36 0 .724 0 1.084-.002.304 0 .617-.004.922-.01a13.279 13.279 0 0 0 2-.178 6.804 6.804 0 0 0 1.908-.63A6.277 6.277 0 0 0 117.666 38a6.395 6.395 0 0 0 1.182-1.614 6.604 6.604 0 0 0 .619-1.905 13.506 13.506 0 0 0 .185-2.002c.004-.31.004-.61.004-.921.008-.364.008-.725.008-1.094V9.536c0-.366 0-.73-.008-1.092 0-.306 0-.614-.004-.92a13.507 13.507 0 0 0-.185-2.003 6.618 6.618 0 0 0-.62-1.903 6.466 6.466 0 0 0-2.798-2.8 6.768 6.768 0 0 0-1.908-.627 13.044 13.044 0 0 0-2-.176c-.305-.005-.618-.011-.922-.013-.36-.002-.725-.002-1.084-.002z" fill="#a6a6a6" />
+    <path d="M8.445 39.125c-.305 0-.602-.004-.904-.01a12.687 12.687 0 0 1-1.87-.164 5.884 5.884 0 0 1-1.656-.548 5.406 5.406 0 0 1-1.397-1.016 5.32 5.32 0 0 1-1.02-1.397 5.722 5.722 0 0 1-.544-1.657 12.414 12.414 0 0 1-.166-1.875c-.007-.21-.015-.913-.015-.913v-23.1s.009-.692.015-.895a12.37 12.37 0 0 1 .165-1.872 5.755 5.755 0 0 1 .544-1.662 5.373 5.373 0 0 1 1.015-1.398 5.565 5.565 0 0 1 1.402-1.023 5.823 5.823 0 0 1 1.653-.544A12.586 12.586 0 0 1 7.543.887l.902-.012h102.769l.913.013a12.385 12.385 0 0 1 1.858.162 5.938 5.938 0 0 1 1.671.548 5.594 5.594 0 0 1 2.415 2.42 5.763 5.763 0 0 1 .535 1.649 12.995 12.995 0 0 1 .174 1.887c.003.283.003.588.003.89.008.375.008.732.008 1.092v20.929c0 .363 0 .718-.008 1.075 0 .325 0 .623-.004.93a12.731 12.731 0 0 1-.17 1.853 5.739 5.739 0 0 1-.54 1.67 5.48 5.48 0 0 1-1.016 1.386 5.413 5.413 0 0 1-1.4 1.022 5.862 5.862 0 0 1-1.668.55 12.542 12.542 0 0 1-1.869.163c-.293.007-.6.011-.897.011l-1.084.002z" />
+    <path fill="#fff" d="M24.769 20.3a4.949 4.949 0 0 1 2.356-4.151 5.066 5.066 0 0 0-3.99-2.158c-1.68-.176-3.308 1.005-4.164 1.005-.872 0-2.19-.988-3.608-.958a5.315 5.315 0 0 0-4.473 2.728c-1.934 3.348-.491 8.269 1.361 10.976.927 1.325 2.01 2.805 3.428 2.753 1.387-.058 1.905-.885 3.58-.885 1.658 0 2.144.885 3.59.852 1.489-.025 2.426-1.332 3.32-2.67a10.962 10.962 0 0 0 1.52-3.092 4.782 4.782 0 0 1-2.92-4.4zM22.037 12.21a4.872 4.872 0 0 0 1.115-3.49 4.957 4.957 0 0 0-3.208 1.66A4.636 4.636 0 0 0 18.8 13.74a4.1 4.1 0 0 0 3.237-1.53z" />
+    <path fill="#fff" d="M42.302 27.14H37.57l-1.137 3.356h-2.005l4.484-12.418h2.083l4.483 12.418h-2.039zm-4.243-1.55h3.752l-1.85-5.446h-.051zM55.16 25.97c0 2.813-1.506 4.62-3.779 4.62a3.07 3.07 0 0 1-2.848-1.583h-.043v4.484H46.63V21.442h1.8v1.506h.033a3.212 3.212 0 0 1 2.883-1.6c2.298 0 3.813 1.816 3.813 4.622zm-1.91 0c0-1.833-.948-3.038-2.393-3.038-1.42 0-2.375 1.23-2.375 3.038 0 1.824.955 3.046 2.375 3.046 1.445 0 2.393-1.197 2.393-3.046zM65.125 25.97c0 2.813-1.506 4.62-3.779 4.62a3.07 3.07 0 0 1-2.848-1.583h-.043v4.484h-1.859V21.442h1.799v1.506h.034a3.212 3.212 0 0 1 2.883-1.6c2.298 0 3.813 1.816 3.813 4.622zm-1.91 0c0-1.833-.948-3.038-2.393-3.038-1.42 0-2.375 1.23-2.375 3.038 0 1.824.955 3.046 2.375 3.046 1.445 0 2.392-1.197 2.392-3.046zM71.71 27.036c.138 1.232 1.334 2.04 2.97 2.04 1.566 0 2.693-.808 2.693-1.919 0-.964-.68-1.54-2.29-1.936l-1.609-.388c-2.28-.55-3.339-1.617-3.339-3.348 0-2.142 1.867-3.614 4.519-3.614 2.624 0 4.423 1.472 4.483 3.614h-1.876c-.112-1.239-1.136-1.987-2.634-1.987s-2.521.757-2.521 1.858c0 .878.654 1.395 2.255 1.79l1.368.336c2.548.603 3.606 1.626 3.606 3.443 0 2.323-1.85 3.778-4.793 3.778-2.754 0-4.614-1.42-4.734-3.667zM83.346 19.3v2.142h1.722v1.472h-1.722v4.991c0 .776.345 1.137 1.102 1.137a5.808 5.808 0 0 0 .611-.043v1.463a5.104 5.104 0 0 1-1.032.086c-1.833 0-2.548-.689-2.548-2.445v-5.189h-1.316v-1.472h1.316V19.3zM86.065 25.97c0-2.849 1.678-4.639 4.294-4.639 2.625 0 4.295 1.79 4.295 4.639 0 2.856-1.661 4.638-4.295 4.638-2.633 0-4.294-1.782-4.294-4.638zm6.695 0c0-1.954-.895-3.108-2.401-3.108s-2.4 1.162-2.4 3.108c0 1.962.894 3.106 2.4 3.106s2.401-1.144 2.401-3.106zM96.186 21.442h1.773v1.541h.043a2.16 2.16 0 0 1 2.177-1.635 2.866 2.866 0 0 1 .637.069v1.738a2.598 2.598 0 0 0-.835-.112 1.873 1.873 0 0 0-1.937 2.083v5.37h-1.858zM109.384 27.837c-.25 1.643-1.85 2.771-3.898 2.771-2.634 0-4.269-1.764-4.269-4.595 0-2.84 1.644-4.682 4.19-4.682 2.506 0 4.08 1.72 4.08 4.466v.637h-6.394v.112a2.358 2.358 0 0 0 2.436 2.564 2.048 2.048 0 0 0 2.09-1.273zm-6.282-2.702h4.526a2.177 2.177 0 0 0-2.22-2.298 2.292 2.292 0 0 0-2.306 2.298z" />
+    <path fill="#fff" d="M37.826 8.731a2.64 2.64 0 0 1 2.808 2.965c0 1.906-1.03 3.002-2.808 3.002h-2.155V8.73zm-1.228 5.123h1.125a1.876 1.876 0 0 0 1.967-2.146 1.881 1.881 0 0 0-1.967-2.134h-1.125zM41.68 12.444a2.133 2.133 0 1 1 4.248 0 2.134 2.134 0 1 1-4.247 0zm3.334 0c0-.976-.439-1.547-1.208-1.547-.773 0-1.207.571-1.207 1.547 0 .984.434 1.55 1.207 1.55.77 0 1.208-.57 1.208-1.55zM51.573 14.698h-.922l-.93-3.317h-.07l-.927 3.317h-.913l-1.242-4.503h.902l.806 3.436h.067l.926-3.436h.852l.926 3.436h.07l.803-3.436h.889zM53.854 10.195h.855v.715h.066a1.348 1.348 0 0 1 1.344-.802 1.465 1.465 0 0 1 1.559 1.675v2.915h-.889v-2.692c0-.724-.314-1.084-.972-1.084a1.033 1.033 0 0 0-1.075 1.141v2.635h-.888zM59.094 8.437h.888v6.26h-.888zM61.218 12.444a2.133 2.133 0 1 1 4.247 0 2.134 2.134 0 1 1-4.247 0zm3.333 0c0-.976-.439-1.547-1.208-1.547-.773 0-1.207.571-1.207 1.547 0 .984.434 1.55 1.207 1.55.77 0 1.208-.57 1.208-1.55zM66.4 13.424c0-.81.604-1.278 1.676-1.344l1.22-.07v-.389c0-.475-.315-.744-.922-.744-.497 0-.84.182-.939.5h-.86c.09-.773.818-1.27 1.84-1.27 1.128 0 1.765.563 1.765 1.514v3.077h-.855v-.633h-.07a1.515 1.515 0 0 1-1.353.707 1.36 1.36 0 0 1-1.501-1.348zm2.895-.384v-.377l-1.1.07c-.62.042-.9.253-.9.65 0 .405.351.64.834.64a1.062 1.062 0 0 0 1.166-.983zM71.348 12.444c0-1.423.732-2.324 1.87-2.324a1.484 1.484 0 0 1 1.38.79h.067V8.437h.888v6.26h-.851v-.71h-.07a1.563 1.563 0 0 1-1.415.785c-1.145 0-1.869-.901-1.869-2.328zm.918 0c0 .955.45 1.53 1.203 1.53.75 0 1.212-.583 1.212-1.526 0-.938-.468-1.53-1.212-1.53-.748 0-1.203.58-1.203 1.526zM79.23 12.444a2.133 2.133 0 1 1 4.247 0 2.134 2.134 0 1 1-4.247 0zm3.333 0c0-.976-.438-1.547-1.208-1.547-.772 0-1.207.571-1.207 1.547 0 .984.435 1.55 1.207 1.55.77 0 1.208-.57 1.208-1.55zM84.67 10.195h.855v.715h.066a1.348 1.348 0 0 1 1.344-.802 1.465 1.465 0 0 1 1.559 1.675v2.915h-.889v-2.692c0-.724-.314-1.084-.972-1.084a1.033 1.033 0 0 0-1.075 1.141v2.635h-.889zM93.515 9.074v1.141h.976v.749h-.976v2.315c0 .472.194.679.637.679a2.967 2.967 0 0 0 .339-.021v.74a2.916 2.916 0 0 1-.484.046c-.988 0-1.381-.348-1.381-1.216v-2.543h-.715v-.749h.715V9.074zM95.705 8.437h.88v2.481h.07a1.386 1.386 0 0 1 1.374-.806 1.483 1.483 0 0 1 1.55 1.679v2.907h-.889V12.01c0-.72-.335-1.084-.963-1.084a1.052 1.052 0 0 0-1.134 1.142v2.63h-.888zM104.761 13.482a1.828 1.828 0 0 1-1.95 1.303 2.045 2.045 0 0 1-2.081-2.325 2.077 2.077 0 0 1 2.076-2.352c1.253 0 2.009.856 2.009 2.27v.31h-3.18v.05a1.19 1.19 0 0 0 1.2 1.29 1.08 1.08 0 0 0 1.07-.546zm-3.126-1.451h2.275a1.086 1.086 0 0 0-1.109-1.167 1.152 1.152 0 0 0-1.166 1.167z" />
+</svg>

--- a/browser/extensions/pocket/content/panels/js/saved.js
+++ b/browser/extensions/pocket/content/panels/js/saved.js
@@ -24,16 +24,19 @@ var PKT_SAVED_OVERLAY = function(options
     this.autocloseTimingFinalState = 2000;
     this.mouseInside = false;
     this.userTags = [];
     this.cxt_suggested_available = 0;
     this.cxt_entered = 0;
     this.cxt_suggested = 0;
     this.cxt_removed = 0;
     this.justaddedsuggested = false;
+    this.fxasignedin = false;
+    this.premiumDetailsAdded = false;
+    this.freezeHeight = false;
     this.fillTagContainer = function(tags, container, tagclass) {
         container.children().remove();
         for (var i = 0; i < tags.length; i++) {
             var newtag = $('<li><a href="#" class="token_tag"></a></li>');
             newtag.find("a").text(tags[i]);
             newtag.addClass(tagclass);
             container.append(newtag);
             this.cxt_suggested_available++;
@@ -224,20 +227,22 @@ var PKT_SAVED_OVERLAY = function(options
             },
             onDelete() {
                 myself.checkValidTagSubmit();
                 this.changestamp = Date.now();
                 myself.showActiveTags();
                 myself.checkPlaceholderStatus();
             },
             onShowDropdown() {
-                thePKT_SAVED.sendMessage("expandSavePanel");
+                if (!myself.freezeHeight)
+                    thePKT_SAVED.sendMessage("expandSavePanel");
             },
             onHideDropdown() {
-                thePKT_SAVED.sendMessage("collapseSavePanel");
+                if (!myself.freezeHeight)
+                    thePKT_SAVED.sendMessage("collapseSavePanel");
             }
         });
         $("body").on("keydown", function(e) {
             var key = e.keyCode || e.which;
             if (key == 8) {
                 var selected = $(".token-input-selected-token");
                 if (selected.length) {
                     e.preventDefault();
@@ -372,23 +377,33 @@ var PKT_SAVED_OVERLAY = function(options
         this.wrapper.find(".pkt_ext_detail h2").text(this.dictJSON.pagesaved);
         this.wrapper.find(".pkt_ext_btn").addClass("pkt_ext_btn_disabled");
         if (typeof initobj.item == "object") {
             this.savedItemId = initobj.item.item_id;
             this.savedUrl = initobj.item.given_url;
         }
         $(".pkt_ext_containersaved").addClass("pkt_ext_container_detailactive").removeClass("pkt_ext_container_finalstate");
 
+        if (initobj.ho2 && initobj.ho2 != 'control'
+            && !initobj.accountState.has_mobile
+            && myself.savedUrl.indexOf('getpocket.com') == -1) {
+            myself.createSendToMobilePanel(initobj.ho2, initobj.displayName);
+            myself.freezeHeight = true;
+        }
+
         myself.fillUserTags();
         if (myself.suggestedTagsLoaded) {
             myself.startCloseTimer();
         } else {
             myself.fillSuggestedTags();
         }
     };
+    this.createSendToMobilePanel = function(ho2, displayName) {
+        PKT_SENDTOMOBILE.create(ho2, displayName, myself.premiumDetailsAdded);
+    };
     this.sanitizeText = function(s) {
         var sanitizeMap = {
             "&": "&amp;",
             "<": "&lt;",
             ">": "&gt;",
             '"': "&quot;",
             "'": "&#39;"
         };
@@ -454,16 +469,17 @@ PKT_SAVED_OVERLAY.prototype = {
         this.initTagInput();
         this.initAddTagInput();
         this.initRemovePageInput();
         this.initOpenListInput();
         this.initAutoCloseEvents();
     },
     createPremiumFunctionality() {
         if (this.premiumStatus && !$(".pkt_ext_suggestedtag_detail").length) {
+            this.premiumDetailsAdded = true;
             $("body").append(Handlebars.templates.saved_premiumshell(this.dictJSON));
             $(".pkt_ext_initload").append(Handlebars.templates.saved_premiumextras(this.dictJSON));
         }
     }
 };
 
 
 // Layer between Bookmarklet and Extensions
@@ -489,16 +505,20 @@ PKT_SAVED.prototype = {
     },
 
     create() {
         var myself = this;
         var url = window.location.href.match(/premiumStatus=([\w|\d|\.]*)&?/);
         if (url && url.length > 1) {
             myself.overlay.premiumStatus = (url[1] == "1");
         }
+        var fxasignedin = window.location.href.match(/fxasignedin=([\w|\d|\.]*)&?/);
+        if (fxasignedin && fxasignedin.length > 1) {
+            myself.overlay.fxasignedin = (fxasignedin[1] == "1");
+        }
         var host = window.location.href.match(/pockethost=([\w|\.]*)&?/);
         if (host && host.length > 1) {
             myself.overlay.pockethost = host[1];
         }
         var inoverflowmenu = window.location.href.match(/inoverflowmenu=([\w|\.]*)&?/);
         if (inoverflowmenu && inoverflowmenu.length > 1) {
             myself.overlay.inoverflowmenu = (inoverflowmenu[1] == "true");
         }

new file mode 100644
--- /dev/null
+++ b/browser/extensions/pocket/content/panels/js/sendtomobile.js
@@ -0,0 +1,100 @@
+var PKT_SENDTOMOBILE = (function() {
+
+    var width = 350;
+    var variant1Height = 312;
+    var variant2Height = 200;
+    var confirmHeight = 275;
+    var premDetailsHeight = 110;
+    var email = null;
+
+    function _swapPlaceholder(data) {
+        var info = {};
+
+        if (!data.item_preview) {
+            info.domain = data.fallback_domain;
+            info.title = data.fallback_title;
+        }
+        else {
+            info.domain = data.item_preview.resolved_domain;
+            info.title = data.item_preview.title;
+            info.has_image = (data.item_preview.top_image_url) ? 1 : 0;
+
+            if (data.item_preview.top_image_url) {
+                info.image_src = getImageCacheUrl(data.item_preview.top_image_url, 'w225');
+            }
+        }
+
+        $('#pkt_ext_swap').replaceWith(Handlebars.templates.ho2_articleinfo(info));
+    }
+
+    function _initPanelOneClicks() {
+        $('#pkt_ext_sendtomobile_button').click(function() {
+            $('#pkt_ext_sendtomobile_button').replaceWith('<div class="pkt_ext_loadingspinner"><div></div></div>');
+
+            thePKT_SAVED.sendMessage('getMobileDownload', {}, function(data) {
+                if (data.status == 1) {
+                    $('body').html(Handlebars.templates.ho2_download({email}));
+                    thePKT_SAVED.sendMessage('resizePanel', { width: width, height: confirmHeight });
+                }
+                else {
+                    $('body').html(Handlebars.templates.ho2_download_error({email}));
+                    thePKT_SAVED.sendMessage('resizePanel', { width: width, height: confirmHeight });
+                }
+            });
+        });
+    }
+
+    function create(ho2, displayName, adjustHeight) {
+        email = displayName;
+        $('body').addClass('pkt_ext_ho2_experiment');
+        var height = (adjustHeight) ? premDetailsHeight : 0;
+
+        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();
+    }
+
+    /**
+     * Public functions
+     */
+    return {
+        create,
+    };
+}());
+
+
+/**
+ * This function is based on getImageCacheUrl in:
+ * https://github.com/Pocket/Web/blob/master/public_html/a/j/shared.js
+ */
+function getImageCacheUrl(url, resize, fallback) {
+    if (!url)
+        return;
+    // The full URL should be included in the get parameters such that the image cache can request it.
+    var query = {
+        'url': url,
+    };
+    if (resize)
+        query.resize = resize;
+    if (fallback)
+        query.f = fallback;
+
+    return 'https://d33ypg4xwx0n86.cloudfront.net/direct?' + $.param(query);
+}

--- a/browser/extensions/pocket/content/panels/js/tmpl.js
+++ b/browser/extensions/pocket/content/panels/js/tmpl.js
@@ -1,242 +1,305 @@
 (function() {
   var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
+templates['ho2_articleinfo'] = template({"1":function(depth0,helpers,partials,data) {
+    return "pkt_ext_has_image";
+},"3":function(depth0,helpers,partials,data) {
+    var helper, alias1=helpers.helperMissing, alias2="function", alias3=this.escapeExpression;
+
+  return "        <div class=\"pkt_ext_save_image\" style=\"background-image:url('"
+    + alias3(((helper = (helper = helpers.image_src || (depth0 != null ? depth0.image_src : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"image_src","hash":{},"data":data}) : helper)))
+    + "'); background-size:cover; background-position:center center;\" data-imgsrc=\""
+    + alias3(((helper = (helper = helpers.image_src || (depth0 != null ? depth0.image_src : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"image_src","hash":{},"data":data}) : helper)))
+    + "\"></div>\n";
+},"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
+    var stack1, helper, alias1=helpers.helperMissing, alias2="function", alias3=this.escapeExpression;
+
+  return "<div class=\"pkt_ext_experiment_saved_tile pkt_ext_cf "
+    + ((stack1 = helpers['if'].call(depth0,(depth0 != null ? depth0.has_image : depth0),{"name":"if","hash":{},"fn":this.program(1, data, 0),"inverse":this.noop,"data":data})) != null ? stack1 : "")
+    + "\">\n"
+    + ((stack1 = helpers['if'].call(depth0,(depth0 != null ? depth0.has_image : depth0),{"name":"if","hash":{},"fn":this.program(3, data, 0),"inverse":this.noop,"data":data})) != null ? stack1 : "")
+    + "    <div class=\"pkt_ext_save_title\">\n        <div class=\"pkt_ext_save_open\">"
+    + alias3(((helper = (helper = helpers.title || (depth0 != null ? depth0.title : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"title","hash":{},"data":data}) : helper)))
+    + "</div>\n        <div class=\"pkt_ext_save_source\">"
+    + alias3(((helper = (helper = helpers.domain || (depth0 != null ? depth0.domain : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"domain","hash":{},"data":data}) : helper)))
+    + "</div>\n    </div>\n</div>\n";
+},"useData":true});
+templates['ho2_download'] = template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
+    var helper;
+
+  return "<div class=\"pkt_ext_detail pkt_ext_saved_sendcollectemail\">\n    <h3 class=\"pkt_ext_heading\">Check your inbox</h3>\n    <p class=\"pkt_ext_description\">We’ve sent an email to <span class=\"pkt_ext_bold\">"
+    + this.escapeExpression(((helper = (helper = helpers.email || (depth0 != null ? depth0.email : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0,{"name":"email","hash":{},"data":data}) : helper)))
+    + "</span> with a link to install the Pocket app, where your article will be waiting for you.</p>\n\n    <div class=\"pkt_ext_download_section\">\n        <p class=\"pkt_ext_description\">You can also get it 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_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_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});
+    return "<div class=\"pkt_ext_suggestedtag_detailshown\">\r\n</div> ";
+},"useData":true});
 templates['saved_premiumshell'] = template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
-  var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
+    var helper;
+
   return "<div class=\"pkt_ext_suggestedtag_detail pkt_ext_suggestedtag_detail_loading\">\n    <h4>"
-    + escapeExpression(((helper = (helper = helpers.suggestedtags || (depth0 != null ? depth0.suggestedtags : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"suggestedtags","hash":{},"data":data}) : helper)))
+    + this.escapeExpression(((helper = (helper = helpers.suggestedtags || (depth0 != null ? depth0.suggestedtags : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0,{"name":"suggestedtags","hash":{},"data":data}) : helper)))
     + "</h4>\n    <div class=\"pkt_ext_loadingspinner\"><div></div></div>\n    <ul class=\"pkt_ext_cf\">\n    </ul>\n</div>";
 },"useData":true});
 templates['saved_shell'] = template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
-  var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
-  return "<div class=\"pkt_ext_initload\">\n    <div class=\"pkt_ext_logo\"></div> \n    <div class=\"pkt_ext_topdetail\">\n        <h2>"
-    + escapeExpression(((helper = (helper = helpers.saving || (depth0 != null ? depth0.saving : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"saving","hash":{},"data":data}) : helper)))
-    + "</h2>\n    </div> \n    <div class=\"pkt_ext_loadingspinner\"><div></div></div>\n</div>                                      \n<div class=\"pkt_ext_detail\">                        \n    <div class=\"pkt_ext_logo\"></div>\n    <div class=\"pkt_ext_topdetail\">\n        <h2>"
-    + escapeExpression(((helper = (helper = helpers.pagesaved || (depth0 != null ? depth0.pagesaved : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"pagesaved","hash":{},"data":data}) : helper)))
+    var helper, alias1=helpers.helperMissing, alias2="function", alias3=this.escapeExpression;
+
+  return "<div class=\"pkt_ext_initload\">\n    <div class=\"pkt_ext_logo\"></div>\n    <div class=\"pkt_ext_topdetail\">\n        <h2>"
+    + alias3(((helper = (helper = helpers.saving || (depth0 != null ? depth0.saving : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"saving","hash":{},"data":data}) : helper)))
+    + "</h2>\n    </div>\n    <div class=\"pkt_ext_loadingspinner\"><div></div></div>\n</div>\n<div class=\"pkt_ext_detail\">\n    <div class=\"pkt_ext_logo\"></div>\n    <div class=\"pkt_ext_topdetail\">\n        <h2>"
+    + alias3(((helper = (helper = helpers.pagesaved || (depth0 != null ? depth0.pagesaved : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"pagesaved","hash":{},"data":data}) : helper)))
     + "</h2>\n        <h3 class=\"pkt_ext_errordetail\"></h3>\n        <nav class=\"pkt_ext_item_actions pkt_ext_cf\">\n            <ul>\n                <li><a class=\"pkt_ext_removeitem\" href=\"#\">"
-    + escapeExpression(((helper = (helper = helpers.removepage || (depth0 != null ? depth0.removepage : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"removepage","hash":{},"data":data}) : helper)))
-    + "</a></li>\n                <li class=\"pkt_ext_actions_separator\"></li>                                \n                <li><a class=\"pkt_ext_openpocket\" href=\"https://"
-    + escapeExpression(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"pockethost","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.removepage || (depth0 != null ? depth0.removepage : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"removepage","hash":{},"data":data}) : helper)))
+    + "</a></li>\n                <li class=\"pkt_ext_actions_separator\"></li>\n                <li><a class=\"pkt_ext_openpocket\" href=\"https://"
+    + alias3(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"pockethost","hash":{},"data":data}) : helper)))
     + "/a?src=ff_ext_saved\" target=\"_blank\">"
-    + escapeExpression(((helper = (helper = helpers.viewlist || (depth0 != null ? depth0.viewlist : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"viewlist","hash":{},"data":data}) : helper)))
-    + "</a></li>\n            </ul>\n        </nav>                        \n    </div>\n    <div class=\"pkt_ext_tag_detail pkt_ext_cf\">\n        <div class=\"pkt_ext_tag_input_wrapper\">\n            <div class=\"pkt_ext_tag_input_blocker\"></div>\n            <input class=\"pkt_ext_tag_input\" type=\"text\" placeholder=\""
-    + escapeExpression(((helper = (helper = helpers.addtags || (depth0 != null ? depth0.addtags : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"addtags","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.viewlist || (depth0 != null ? depth0.viewlist : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"viewlist","hash":{},"data":data}) : helper)))
+    + "</a></li>\n            </ul>\n        </nav>\n    </div>\n    <div class=\"pkt_ext_tag_detail pkt_ext_cf\">\n        <div class=\"pkt_ext_tag_input_wrapper\">\n            <div class=\"pkt_ext_tag_input_blocker\"></div>\n            <input class=\"pkt_ext_tag_input\" type=\"text\" placeholder=\""
+    + alias3(((helper = (helper = helpers.addtags || (depth0 != null ? depth0.addtags : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"addtags","hash":{},"data":data}) : helper)))
     + "\">\n        </div>\n        <a href=\"#\" class=\"pkt_ext_btn pkt_ext_btn_disabled\">"
-    + escapeExpression(((helper = (helper = helpers.save || (depth0 != null ? depth0.save : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"save","hash":{},"data":data}) : helper)))
-    + "</a>\n    </div>\n    <p class=\"pkt_ext_edit_msg\"></p>\n</div>";
+    + alias3(((helper = (helper = helpers.save || (depth0 != null ? depth0.save : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"save","hash":{},"data":data}) : helper)))
+    + "</a>\n    </div>\n    <p class=\"pkt_ext_edit_msg\"></p>\n</div>\n";
+},"useData":true});
+templates['saved_tmplogin'] = template({"1":function(depth0,helpers,partials,data) {
+    return "        <button id=\"pkt_ext_tmp_account_signup\" class=\"pkt_ext_button pkt_ext_blue_button\">\n            <span class=\"pkt_ext_save_title_wrapper pkt_ext_ffx_icon\">\n                <span class=\"pkt_ext_logo_action_copy\">Login with Firefox</span>\n            </span>\n        </button>\n";
+},"3":function(depth0,helpers,partials,data) {
+    return "        <button id=\"pkt_ext_tmp_account_signup\" class=\"pkt_ext_button\">\n            <span class=\"pkt_ext_save_title_wrapper\">\n                <span class=\"pkt_ext_logo_action_copy\">Sign up</span>\n            </span>\n        </button>\n";
+},"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
+    var stack1;
+
+  return "<div class=\"pkt_ext_detail pkt_ext_saved_tmplogin pkt_shaded_background\">\n    <div class=\"pkt_ext_indent_bordered\">\n        <p>You are using Pocket without an account.<br />Sign up to back up your saved items.</p>\n        <p><a href=\"https://help.getpocket.com/article/1129-using-pocket-without-an-account-in-firefox?s=ghost_upsell\" target=\"_blank\">Learn more</a></p>\n    </div>\n\n"
+    + ((stack1 = helpers['if'].call(depth0,(depth0 != null ? depth0.fxasignedin : depth0),{"name":"if","hash":{},"fn":this.program(1, data, 0),"inverse":this.program(3, data, 0),"data":data})) != null ? stack1 : "")
+    + "</div>\n";
 },"useData":true});
 templates['signup_shell'] = template({"1":function(depth0,helpers,partials,data) {
-  var stack1, buffer = "";
-  stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.controlvariant : depth0), {"name":"if","hash":{},"fn":this.program(2, data),"inverse":this.program(4, data),"data":data});
-  if (stack1 != null) { buffer += stack1; }
-  return buffer;
+    var stack1;
+
+  return ((stack1 = helpers['if'].call(depth0,(depth0 != null ? depth0.controlvariant : depth0),{"name":"if","hash":{},"fn":this.program(2, data, 0),"inverse":this.program(4, data, 0),"data":data})) != null ? stack1 : "");
 },"2":function(depth0,helpers,partials,data) {
-  var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
-  return "      <p class=\"pkt_ext_learnmorecontainer\"><a class=\"pkt_ext_learnmore\" href=\"https://"
-    + escapeExpression(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"pockethost","hash":{},"data":data}) : helper)))
+    var helper, alias1=helpers.helperMissing, alias2="function", alias3=this.escapeExpression;
+
+  return "          <p class=\"pkt_ext_learnmorecontainer\"><a class=\"pkt_ext_learnmore\" href=\"https://"
+    + alias3(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"pockethost","hash":{},"data":data}) : helper)))
     + "/firefox_learnmore?s=ffi&t=learnmore&tv=panel_control&v="
-    + escapeExpression(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"variant","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"variant","hash":{},"data":data}) : helper)))
     + "\" target=\"_blank\">"
-    + escapeExpression(((helper = (helper = helpers.learnmore || (depth0 != null ? depth0.learnmore : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"learnmore","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.learnmore || (depth0 != null ? depth0.learnmore : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"learnmore","hash":{},"data":data}) : helper)))
     + "</a></p>\n";
 },"4":function(depth0,helpers,partials,data) {
-  var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
-  return "      <p class=\"pkt_ext_learnmorecontainer\"><a class=\"pkt_ext_learnmore\" href=\"https://"
-    + escapeExpression(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"pockethost","hash":{},"data":data}) : helper)))
+    var helper, alias1=helpers.helperMissing, alias2="function", alias3=this.escapeExpression;
+
+  return "          <p class=\"pkt_ext_learnmorecontainer\"><a class=\"pkt_ext_learnmore\" href=\"https://"
+    + alias3(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"pockethost","hash":{},"data":data}) : helper)))
     + "/firefox_learnmore?s=ffi&t=learnmore&tv=panel_tryit&v="
-    + escapeExpression(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"variant","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"variant","hash":{},"data":data}) : helper)))
     + "\" target=\"_blank\">"
-    + escapeExpression(((helper = (helper = helpers.learnmore || (depth0 != null ? depth0.learnmore : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"learnmore","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.learnmore || (depth0 != null ? depth0.learnmore : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"learnmore","hash":{},"data":data}) : helper)))
     + "</a></p>\n";
 },"6":function(depth0,helpers,partials,data) {
-  var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
+    var helper;
+
   return "  <p class=\"pkt_ext_learnmorecontainer\"><a class=\"pkt_ext_learnmore pkt_ext_learnmoreinactive\" href=\"#\">"
-    + escapeExpression(((helper = (helper = helpers.learnmore || (depth0 != null ? depth0.learnmore : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"learnmore","hash":{},"data":data}) : helper)))
+    + this.escapeExpression(((helper = (helper = helpers.learnmore || (depth0 != null ? depth0.learnmore : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0,{"name":"learnmore","hash":{},"data":data}) : helper)))
     + "</a></p>\n";
 },"8":function(depth0,helpers,partials,data) {
-  var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
+    var helper, alias1=helpers.helperMissing, alias2="function", alias3=this.escapeExpression;
+
   return "  <h4>"
-    + escapeExpression(((helper = (helper = helpers.signuptosave || (depth0 != null ? depth0.signuptosave : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"signuptosave","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.signuptosave || (depth0 != null ? depth0.signuptosave : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"signuptosave","hash":{},"data":data}) : helper)))
     + "</h4>\n  <p class=\"btn-container\"><a href=\"https://"
-    + escapeExpression(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"pockethost","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"pockethost","hash":{},"data":data}) : helper)))
     + "/ff_signup?s=ffi&t=signupff&v="
-    + escapeExpression(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"variant","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"variant","hash":{},"data":data}) : helper)))
     + "\" target=\"_blank\" class=\"btn signup-btn-firefox\"><span class=\"logo\"></span><span class=\"text\">"
-    + escapeExpression(((helper = (helper = helpers.signinfirefox || (depth0 != null ? depth0.signinfirefox : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"signinfirefox","hash":{},"data":data}) : helper)))
-    + "</span></a></p>\n  <p class=\"alreadyhave\">"
-    + escapeExpression(((helper = (helper = helpers.alreadyhaveacct || (depth0 != null ? depth0.alreadyhaveacct : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"alreadyhaveacct","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.signupfirefox || (depth0 != null ? depth0.signupfirefox : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"signupfirefox","hash":{},"data":data}) : helper)))
+    + "</span></a></p>\n    <p class=\"alreadyhave\">"
+    + alias3(((helper = (helper = helpers.alreadyhaveacct || (depth0 != null ? depth0.alreadyhaveacct : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"alreadyhaveacct","hash":{},"data":data}) : helper)))
     + " <a href=\"https://"
-    + escapeExpression(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"pockethost","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"pockethost","hash":{},"data":data}) : helper)))
     + "/login?ep=3&src=extension&s=ffi&t=login&v="
-    + escapeExpression(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"variant","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"variant","hash":{},"data":data}) : helper)))
     + "\" target=\"_blank\">"
-    + escapeExpression(((helper = (helper = helpers.loginnow || (depth0 != null ? depth0.loginnow : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"loginnow","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.loginnow || (depth0 != null ? depth0.loginnow : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"loginnow","hash":{},"data":data}) : helper)))
     + "</a>.</p>\n";
 },"10":function(depth0,helpers,partials,data) {
-  var stack1, buffer = "";
-  stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.controlvariant : depth0), {"name":"if","hash":{},"fn":this.program(11, data),"inverse":this.program(13, data),"data":data});
-  if (stack1 != null) { buffer += stack1; }
-  return buffer;
+    var stack1;
+
+  return ((stack1 = helpers['if'].call(depth0,(depth0 != null ? depth0.controlvariant : depth0),{"name":"if","hash":{},"fn":this.program(11, data, 0),"inverse":this.program(13, data, 0),"data":data})) != null ? stack1 : "");
 },"11":function(depth0,helpers,partials,data) {
-  var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
-  return "      <h4>"
-    + escapeExpression(((helper = (helper = helpers.signuptosave || (depth0 != null ? depth0.signuptosave : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"signuptosave","hash":{},"data":data}) : helper)))
-    + "</h4>\n      <p class=\"btn-container\"><a href=\"https://"
-    + escapeExpression(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"pockethost","hash":{},"data":data}) : helper)))
+    var helper, alias1=helpers.helperMissing, alias2="function", alias3=this.escapeExpression;
+
+  return "          <h4>"
+    + alias3(((helper = (helper = helpers.signuptosave || (depth0 != null ? depth0.signuptosave : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"signuptosave","hash":{},"data":data}) : helper)))
+    + "</h4>\n          <p class=\"btn-container\"><a href=\"https://"
+    + alias3(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"pockethost","hash":{},"data":data}) : helper)))
     + "/ff_signup?s=ffi&tv=panel_control&t=signupff&v="
-    + escapeExpression(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"variant","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"variant","hash":{},"data":data}) : helper)))
     + "\" target=\"_blank\" class=\"btn signup-btn-firefox\"><span class=\"logo\"></span><span class=\"text\">"
-    + escapeExpression(((helper = (helper = helpers.signupfirefox || (depth0 != null ? depth0.signupfirefox : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"signupfirefox","hash":{},"data":data}) : helper)))
-    + "</span></a></p>\n      <p class=\"btn-container\"><a href=\"https://"
-    + escapeExpression(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"pockethost","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.signupfirefox || (depth0 != null ? depth0.signupfirefox : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"signupfirefox","hash":{},"data":data}) : helper)))
+    + "</span></a></p>\n            <p class=\"btn-container\"><a href=\"https://"
+    + alias3(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"pockethost","hash":{},"data":data}) : helper)))
     + "/signup?force=email&tv=panel_control&src=extension&s=ffi&t=signupemail&v="
-    + escapeExpression(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"variant","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"variant","hash":{},"data":data}) : helper)))
     + "\" target=\"_blank\" class=\"btn btn-secondary signup-btn-email signup-btn-initstate\">"
-    + escapeExpression(((helper = (helper = helpers.signupemail || (depth0 != null ? depth0.signupemail : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"signupemail","hash":{},"data":data}) : helper)))
-    + "</a></p>\n     <p class=\"alreadyhave\">"
-    + escapeExpression(((helper = (helper = helpers.alreadyhaveacct || (depth0 != null ? depth0.alreadyhaveacct : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"alreadyhaveacct","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.signupemail || (depth0 != null ? depth0.signupemail : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"signupemail","hash":{},"data":data}) : helper)))
+    + "</a></p>\n           <p class=\"alreadyhave\">"
+    + alias3(((helper = (helper = helpers.alreadyhaveacct || (depth0 != null ? depth0.alreadyhaveacct : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"alreadyhaveacct","hash":{},"data":data}) : helper)))
     + " <a href=\"https://"
-    + escapeExpression(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"pockethost","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"pockethost","hash":{},"data":data}) : helper)))
     + "/login?ep=3&tv=panel_control&src=extension&s=ffi&t=login&v="
-    + escapeExpression(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"variant","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"variant","hash":{},"data":data}) : helper)))
     + "\" target=\"_blank\">"
-    + escapeExpression(((helper = (helper = helpers.loginnow || (depth0 != null ? depth0.loginnow : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"loginnow","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.loginnow || (depth0 != null ? depth0.loginnow : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"loginnow","hash":{},"data":data}) : helper)))
     + "</a>.</p>\n";
 },"13":function(depth0,helpers,partials,data) {
-  var stack1, helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression, buffer = "      <p class=\"btn-container\"><a href=\"https://"
-    + escapeExpression(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"pockethost","hash":{},"data":data}) : helper)))
+    var stack1, helper, alias1=helpers.helperMissing, alias2="function", alias3=this.escapeExpression;
+
+  return "          <p class=\"btn-container\"><a href=\"https://"
+    + alias3(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"pockethost","hash":{},"data":data}) : helper)))
     + "/firefox_tryitnow?s=ffi&tv=panel_tryit&t=tryitnow\" target=\"_blank\" class=\"btn signup-btn-tryitnow\"><span class=\"text\">"
-    + escapeExpression(((helper = (helper = helpers.tryitnow || (depth0 != null ? depth0.tryitnow : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"tryitnow","hash":{},"data":data}) : helper)))
-    + "</span></a></p>\n      <p class=\"alreadyhave tryitnowspace\">"
-    + escapeExpression(((helper = (helper = helpers.alreadyhaveacct || (depth0 != null ? depth0.alreadyhaveacct : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"alreadyhaveacct","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.tryitnow || (depth0 != null ? depth0.tryitnow : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"tryitnow","hash":{},"data":data}) : helper)))
+    + "</span></a></p>\n            <p class=\"alreadyhave tryitnowspace\">"
+    + alias3(((helper = (helper = helpers.alreadyhaveacct || (depth0 != null ? depth0.alreadyhaveacct : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"alreadyhaveacct","hash":{},"data":data}) : helper)))
     + " <a href=\"https://"
-    + escapeExpression(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"pockethost","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"pockethost","hash":{},"data":data}) : helper)))
     + "/login?ep=3&s=ffi&tv=panel_tryit&src=extension&t=login&v="
-    + escapeExpression(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"variant","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"variant","hash":{},"data":data}) : helper)))
     + "\" target=\"_blank\">"
-    + escapeExpression(((helper = (helper = helpers.loginnow || (depth0 != null ? depth0.loginnow : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"loginnow","hash":{},"data":data}) : helper)))
-    + "</a>.</p>\n      <p class=\"pkt_ext_tos\">";
-  stack1 = ((helper = (helper = helpers.tos || (depth0 != null ? depth0.tos : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"tos","hash":{},"data":data}) : helper));
-  if (stack1 != null) { buffer += stack1; }
-  return buffer + "</p>\n";
+    + alias3(((helper = (helper = helpers.loginnow || (depth0 != null ? depth0.loginnow : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"loginnow","hash":{},"data":data}) : helper)))
+    + "</a>.</p>\n          <p class=\"pkt_ext_tos\">"
+    + ((stack1 = ((helper = (helper = helpers.tos || (depth0 != null ? depth0.tos : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"tos","hash":{},"data":data}) : helper))) != null ? stack1 : "")
+    + "</p>\n";
 },"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
-  var stack1, helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression, buffer = "<div class=\"pkt_ext_introdetail pkt_ext_introdetailhero\">\n <h2 class=\"pkt_ext_logo\">Pocket</h2>\n  <p class=\"pkt_ext_tagline\">"
-    + escapeExpression(((helper = (helper = helpers.tagline || (depth0 != null ? depth0.tagline : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"tagline","hash":{},"data":data}) : helper)))
-    + "</p>\n";
-  stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.showlearnmore : depth0), {"name":"if","hash":{},"fn":this.program(1, data),"inverse":this.program(6, data),"data":data});
-  if (stack1 != null) { buffer += stack1; }
-  buffer += " <div class=\"pkt_ext_introimg\"></div>\n</div>\n<div class=\"pkt_ext_signupdetail pkt_ext_signupdetail_hero\">\n";
-  stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.fxasignedin : depth0), {"name":"if","hash":{},"fn":this.program(8, data),"inverse":this.program(10, data),"data":data});
-  if (stack1 != null) { buffer += stack1; }
-  return buffer + "</div>\n";
+    var stack1, helper;
+
+  return "<div class=\"pkt_ext_introdetail pkt_ext_introdetailhero\">\n <h2 class=\"pkt_ext_logo\">Pocket</h2>\n    <p class=\"pkt_ext_tagline\">"
+    + this.escapeExpression(((helper = (helper = helpers.tagline || (depth0 != null ? depth0.tagline : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0,{"name":"tagline","hash":{},"data":data}) : helper)))
+    + "</p>\n"
+    + ((stack1 = helpers['if'].call(depth0,(depth0 != null ? depth0.showlearnmore : depth0),{"name":"if","hash":{},"fn":this.program(1, data, 0),"inverse":this.program(6, data, 0),"data":data})) != null ? stack1 : "")
+    + " <div class=\"pkt_ext_introimg\"></div>\n</div>\n<div class=\"pkt_ext_signupdetail pkt_ext_signupdetail_hero\">\n"
+    + ((stack1 = helpers['if'].call(depth0,(depth0 != null ? depth0.fxasignedin : depth0),{"name":"if","hash":{},"fn":this.program(8, data, 0),"inverse":this.program(10, data, 0),"data":data})) != null ? stack1 : "")
+    + "</div>\n";
 },"useData":true});
 templates['signupstoryboard_shell'] = template({"1":function(depth0,helpers,partials,data) {
-  var stack1, buffer = "";
-  stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.controlvariant : depth0), {"name":"if","hash":{},"fn":this.program(2, data),"inverse":this.program(4, data),"data":data});
-  if (stack1 != null) { buffer += stack1; }
-  return buffer;
+    var stack1;
+
+  return ((stack1 = helpers['if'].call(depth0,(depth0 != null ? depth0.controlvariant : depth0),{"name":"if","hash":{},"fn":this.program(2, data, 0),"inverse":this.program(4, data, 0),"data":data})) != null ? stack1 : "");
 },"2":function(depth0,helpers,partials,data) {
-  var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
-  return "          <p><a class=\"pkt_ext_learnmore\" href=\"https://"
-    + escapeExpression(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"pockethost","hash":{},"data":data}) : helper)))
+    var helper, alias1=helpers.helperMissing, alias2="function", alias3=this.escapeExpression;
+
+  return "                  <p><a class=\"pkt_ext_learnmore\" href=\"https://"
+    + alias3(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"pockethost","hash":{},"data":data}) : helper)))
     + "/firefox_learnmore?s=ffi&t=learnmore&tv=panel_control&v="
-    + escapeExpression(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"variant","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"variant","hash":{},"data":data}) : helper)))
     + "\" target=\"_blank\">"
-    + escapeExpression(((helper = (helper = helpers.learnmore || (depth0 != null ? depth0.learnmore : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"learnmore","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.learnmore || (depth0 != null ? depth0.learnmore : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"learnmore","hash":{},"data":data}) : helper)))
     + "</a></p>\n";
 },"4":function(depth0,helpers,partials,data) {
-  var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
-  return "          <p><a class=\"pkt_ext_learnmore\" href=\"https://"
-    + escapeExpression(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"pockethost","hash":{},"data":data}) : helper)))
+    var helper, alias1=helpers.helperMissing, alias2="function", alias3=this.escapeExpression;
+
+  return "                  <p><a class=\"pkt_ext_learnmore\" href=\"https://"
+    + alias3(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"pockethost","hash":{},"data":data}) : helper)))
     + "/firefox_learnmore?s=ffi&t=learnmore&tv=panel_tryit&v="
-    + escapeExpression(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"variant","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"variant","hash":{},"data":data}) : helper)))
     + "\" target=\"_blank\">"
-    + escapeExpression(((helper = (helper = helpers.learnmore || (depth0 != null ? depth0.learnmore : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"learnmore","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.learnmore || (depth0 != null ? depth0.learnmore : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"learnmore","hash":{},"data":data}) : helper)))
     + "</a></p>\n";
 },"6":function(depth0,helpers,partials,data) {
-  var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
-  return "      <p><a class=\"pkt_ext_learnmore pkt_ext_learnmoreinactive\" href=\"#\">"
-    + escapeExpression(((helper = (helper = helpers.learnmore || (depth0 != null ? depth0.learnmore : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"learnmore","hash":{},"data":data}) : helper)))
+    var helper;
+
+  return "          <p><a class=\"pkt_ext_learnmore pkt_ext_learnmoreinactive\" href=\"#\">"
+    + this.escapeExpression(((helper = (helper = helpers.learnmore || (depth0 != null ? depth0.learnmore : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0,{"name":"learnmore","hash":{},"data":data}) : helper)))
     + "</a></p>\n";
 },"8":function(depth0,helpers,partials,data) {
-  var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
+    var helper, alias1=helpers.helperMissing, alias2="function", alias3=this.escapeExpression;
+
   return "  <h4>"
-    + escapeExpression(((helper = (helper = helpers.signuptosave || (depth0 != null ? depth0.signuptosave : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"signuptosave","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.signuptosave || (depth0 != null ? depth0.signuptosave : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"signuptosave","hash":{},"data":data}) : helper)))
     + "</h4>\n  <p class=\"btn-container\"><a href=\"https://"
-    + escapeExpression(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"pockethost","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"pockethost","hash":{},"data":data}) : helper)))
     + "/ff_signup?s=ffi&t=signupff&v="
-    + escapeExpression(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"variant","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"variant","hash":{},"data":data}) : helper)))
     + "\" target=\"_blank\" class=\"btn signup-btn-firefox\"><span class=\"logo\"></span><span class=\"text\">"
-    + escapeExpression(((helper = (helper = helpers.signinfirefox || (depth0 != null ? depth0.signinfirefox : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"signinfirefox","hash":{},"data":data}) : helper)))
-    + "</span></a></p>\n  <p class=\"alreadyhave\">"
-    + escapeExpression(((helper = (helper = helpers.alreadyhaveacct || (depth0 != null ? depth0.alreadyhaveacct : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"alreadyhaveacct","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.signupfirefox || (depth0 != null ? depth0.signupfirefox : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"signupfirefox","hash":{},"data":data}) : helper)))
+    + "</span></a></p>\n    <p class=\"alreadyhave\">"
+    + alias3(((helper = (helper = helpers.alreadyhaveacct || (depth0 != null ? depth0.alreadyhaveacct : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"alreadyhaveacct","hash":{},"data":data}) : helper)))
     + " <a href=\"https://"
-    + escapeExpression(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"pockethost","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"pockethost","hash":{},"data":data}) : helper)))
     + "/login?ep=3&src=extension&s=ffi&t=login&v="
-    + escapeExpression(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"variant","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"variant","hash":{},"data":data}) : helper)))
     + "\" target=\"_blank\">"
-    + escapeExpression(((helper = (helper = helpers.loginnow || (depth0 != null ? depth0.loginnow : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"loginnow","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.loginnow || (depth0 != null ? depth0.loginnow : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"loginnow","hash":{},"data":data}) : helper)))
     + "</a>.</p>\n";
 },"10":function(depth0,helpers,partials,data) {
-  var stack1, buffer = "";
-  stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.controlvariant : depth0), {"name":"if","hash":{},"fn":this.program(11, data),"inverse":this.program(13, data),"data":data});
-  if (stack1 != null) { buffer += stack1; }
-  return buffer;
+    var stack1;
+
+  return ((stack1 = helpers['if'].call(depth0,(depth0 != null ? depth0.controlvariant : depth0),{"name":"if","hash":{},"fn":this.program(11, data, 0),"inverse":this.program(13, data, 0),"data":data})) != null ? stack1 : "");
 },"11":function(depth0,helpers,partials,data) {
-  var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
-  return "      <h4>"
-    + escapeExpression(((helper = (helper = helpers.signuptosave || (depth0 != null ? depth0.signuptosave : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"signuptosave","hash":{},"data":data}) : helper)))
-    + "</h4>\n      <p class=\"btn-container\"><a href=\"https://"
-    + escapeExpression(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"pockethost","hash":{},"data":data}) : helper)))
+    var helper, alias1=helpers.helperMissing, alias2="function", alias3=this.escapeExpression;
+
+  return "          <h4>"
+    + alias3(((helper = (helper = helpers.signuptosave || (depth0 != null ? depth0.signuptosave : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"signuptosave","hash":{},"data":data}) : helper)))
+    + "</h4>\n          <p class=\"btn-container\"><a href=\"https://"
+    + alias3(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"pockethost","hash":{},"data":data}) : helper)))
     + "/ff_signup?s=ffi&tv=panel_control&t=signupff&v="
-    + escapeExpression(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"variant","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"variant","hash":{},"data":data}) : helper)))
     + "\" target=\"_blank\" class=\"btn signup-btn-firefox\"><span class=\"logo\"></span><span class=\"text\">"
-    + escapeExpression(((helper = (helper = helpers.signupfirefox || (depth0 != null ? depth0.signupfirefox : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"signupfirefox","hash":{},"data":data}) : helper)))
-    + "</span></a></p>\n      <p class=\"btn-container\"><a href=\"https://"
-    + escapeExpression(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"pockethost","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.signupfirefox || (depth0 != null ? depth0.signupfirefox : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"signupfirefox","hash":{},"data":data}) : helper)))
+    + "</span></a></p>\n            <p class=\"btn-container\"><a href=\"https://"
+    + alias3(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"pockethost","hash":{},"data":data}) : helper)))
     + "/signup?force=email&tv=panel_control&src=extension&s=ffi&t=signupemail&v="
-    + escapeExpression(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"variant","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"variant","hash":{},"data":data}) : helper)))
     + "\" target=\"_blank\" class=\"btn btn-secondary signup-btn-email signup-btn-initstate\">"
-    + escapeExpression(((helper = (helper = helpers.signupemail || (depth0 != null ? depth0.signupemail : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"signupemail","hash":{},"data":data}) : helper)))
-    + "</a></p>\n     <p class=\"alreadyhave\">"
-    + escapeExpression(((helper = (helper = helpers.alreadyhaveacct || (depth0 != null ? depth0.alreadyhaveacct : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"alreadyhaveacct","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.signupemail || (depth0 != null ? depth0.signupemail : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"signupemail","hash":{},"data":data}) : helper)))
+    + "</a></p>\n           <p class=\"alreadyhave\">"
+    + alias3(((helper = (helper = helpers.alreadyhaveacct || (depth0 != null ? depth0.alreadyhaveacct : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"alreadyhaveacct","hash":{},"data":data}) : helper)))
     + " <a href=\"https://"
-    + escapeExpression(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"pockethost","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"pockethost","hash":{},"data":data}) : helper)))
     + "/login?ep=3&tv=panel_control&src=extension&s=ffi&t=login&v="
-    + escapeExpression(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"variant","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"variant","hash":{},"data":data}) : helper)))
     + "\" target=\"_blank\">"
-    + escapeExpression(((helper = (helper = helpers.loginnow || (depth0 != null ? depth0.loginnow : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"loginnow","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.loginnow || (depth0 != null ? depth0.loginnow : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"loginnow","hash":{},"data":data}) : helper)))
     + "</a>.</p>\n";
 },"13":function(depth0,helpers,partials,data) {
-  var stack1, helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression, buffer = "      <p class=\"btn-container\"><a href=\"https://"
-    + escapeExpression(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"pockethost","hash":{},"data":data}) : helper)))
+    var stack1, helper, alias1=helpers.helperMissing, alias2="function", alias3=this.escapeExpression;
+
+  return "          <p class=\"btn-container\"><a href=\"https://"
+    + alias3(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"pockethost","hash":{},"data":data}) : helper)))
     + "/firefox_tryitnow?s=ffi&tv=panel_tryit&t=tryitnow\" target=\"_blank\" class=\"btn signup-btn-tryitnow\"><span class=\"text\">"
-    + escapeExpression(((helper = (helper = helpers.tryitnow || (depth0 != null ? depth0.tryitnow : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"tryitnow","hash":{},"data":data}) : helper)))
-    + "</span></a></p>\n      <p class=\"alreadyhave tryitnowspace\">"
-    + escapeExpression(((helper = (helper = helpers.alreadyhaveacct || (depth0 != null ? depth0.alreadyhaveacct : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"alreadyhaveacct","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.tryitnow || (depth0 != null ? depth0.tryitnow : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"tryitnow","hash":{},"data":data}) : helper)))
+    + "</span></a></p>\n            <p class=\"alreadyhave tryitnowspace\">"
+    + alias3(((helper = (helper = helpers.alreadyhaveacct || (depth0 != null ? depth0.alreadyhaveacct : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"alreadyhaveacct","hash":{},"data":data}) : helper)))
     + " <a href=\"https://"
-    + escapeExpression(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"pockethost","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.pockethost || (depth0 != null ? depth0.pockethost : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"pockethost","hash":{},"data":data}) : helper)))
     + "/login?ep=3&s=ffi&tv=panel_tryit&src=extension&t=login&v="
-    + escapeExpression(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"variant","hash":{},"data":data}) : helper)))
+    + alias3(((helper = (helper = helpers.variant || (depth0 != null ? depth0.variant : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"variant","hash":{},"data":data}) : helper)))
     + "\" target=\"_blank\">"
-    + escapeExpression(((helper = (helper = helpers.loginnow || (depth0 != null ? depth0.loginnow : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"loginnow","hash":{},"data":data}) : helper)))
-    + "</a>.</p>\n      <p class=\"pkt_ext_tos\">";
-  stack1 = ((helper = (helper = helpers.tos || (depth0 != null ? depth0.tos : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"tos","hash":{},"data":data}) : helper));
-  if (stack1 != null) { buffer += stack1; }
-  return buffer + "</p>\n";
+    + alias3(((helper = (helper = helpers.loginnow || (depth0 != null ? depth0.loginnow : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"loginnow","hash":{},"data":data}) : helper)))
+    + "</a>.</p>\n          <p class=\"pkt_ext_tos\">"
+    + ((stack1 = ((helper = (helper = helpers.tos || (depth0 != null ? depth0.tos : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"tos","hash":{},"data":data}) : helper))) != null ? stack1 : "")
+    + "</p>\n";
 },"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
-  var stack1, helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression, buffer = "<div class=\"pkt_ext_introdetail pkt_ext_introdetailstoryboard\">\n <div class=\"pkt_ext_introstory pkt_ext_introstoryone\">\n    <div class=\"pkt_ext_introstory_text\">\n     <p class=\"pkt_ext_tagline\">"
-    + escapeExpression(((helper = (helper = helpers.taglinestory_one || (depth0 != null ? depth0.taglinestory_one : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"taglinestory_one","hash":{},"data":data}) : helper)))
-    + "</p>\n   </div>\n    <div class=\"pkt_ext_introstoryone_img\"></div>\n </div>\n  <div class=\"pkt_ext_introstorydivider\"></div>\n <div class=\"pkt_ext_introstory pkt_ext_introstorytwo\">\n    <div class=\"pkt_ext_introstory_text\">\n     <p class=\"pkt_ext_tagline\">"
-    + escapeExpression(((helper = (helper = helpers.taglinestory_two || (depth0 != null ? depth0.taglinestory_two : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"taglinestory_two","hash":{},"data":data}) : helper)))
-    + "</p>\n";
-  stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.showlearnmore : depth0), {"name":"if","hash":{},"fn":this.program(1, data),"inverse":this.program(6, data),"data":data});
-  if (stack1 != null) { buffer += stack1; }
-  buffer += "   </div>\n    <div class=\"pkt_ext_introstorytwo_img\"></div>\n </div>\n</div>\n<div class=\"pkt_ext_signupdetail\">\n";
-  stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.fxasignedin : depth0), {"name":"if","hash":{},"fn":this.program(8, data),"inverse":this.program(10, data),"data":data});
-  if (stack1 != null) { buffer += stack1; }
-  return buffer + "\n</div>\n";
+    var stack1, helper, alias1=helpers.helperMissing, alias2="function", alias3=this.escapeExpression;
+
+  return "<div class=\"pkt_ext_introdetail pkt_ext_introdetailstoryboard\">\n   <div class=\"pkt_ext_introstory pkt_ext_introstoryone\">\n      <div class=\"pkt_ext_introstory_text\">\n           <p class=\"pkt_ext_tagline\">"
+    + alias3(((helper = (helper = helpers.taglinestory_one || (depth0 != null ? depth0.taglinestory_one : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"taglinestory_one","hash":{},"data":data}) : helper)))
+    + "</p>\n       </div>\n        <div class=\"pkt_ext_introstoryone_img\"></div>\n   </div>\n    <div class=\"pkt_ext_introstorydivider\"></div>\n   <div class=\"pkt_ext_introstory pkt_ext_introstorytwo\">\n      <div class=\"pkt_ext_introstory_text\">\n           <p class=\"pkt_ext_tagline\">"
+    + alias3(((helper = (helper = helpers.taglinestory_two || (depth0 != null ? depth0.taglinestory_two : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"taglinestory_two","hash":{},"data":data}) : helper)))
+    + "</p>\n"
+    + ((stack1 = helpers['if'].call(depth0,(depth0 != null ? depth0.showlearnmore : depth0),{"name":"if","hash":{},"fn":this.program(1, data, 0),"inverse":this.program(6, data, 0),"data":data})) != null ? stack1 : "")
+    + "     </div>\n        <div class=\"pkt_ext_introstorytwo_img\"></div>\n   </div>\n</div>\n<div class=\"pkt_ext_signupdetail\">\n"
+    + ((stack1 = helpers['if'].call(depth0,(depth0 != null ? depth0.fxasignedin : depth0),{"name":"if","hash":{},"fn":this.program(8, data, 0),"inverse":this.program(10, data, 0),"data":data})) != null ? stack1 : "")
+    + "\n</div>\n";
 },"useData":true});
 })();

--- a/browser/extensions/pocket/content/panels/saved.html
+++ b/browser/extensions/pocket/content/panels/saved.html
@@ -1,19 +1,20 @@
 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <base href="chrome://pocket/content/panels/">
         <title>Pocket: Page Saved</title>
         <link rel="stylesheet" href="css/normalize.css">
-        <link rel="stylesheet" href="css/firasans.css">
         <link rel="stylesheet" href="css/saved.css">
+        <link rel="stylesheet" href="css/sendtomobile.css">
     </head>
     <body class="pkt_ext_containersaved" aria-live="polite">
         <script type="text/javascript" src="js/vendor/jquery-2.1.1.min.js"></script>
         <script type="text/javascript" src="js/vendor/handlebars.runtime.js"></script>
         <script type="text/javascript" src="js/vendor/jquery.tokeninput.min.js"></script>
         <script type="text/javascript" src="js/tmpl.js"></script>
         <script type="text/javascript" src="js/messages.js"></script>
+        <script type="text/javascript" src="js/sendtomobile.js"></script>
         <script type="text/javascript" src="js/saved.js"></script>
     </body>
 </html>

--- a/browser/extensions/pocket/content/panels/signup.html
+++ b/browser/extensions/pocket/content/panels/signup.html
@@ -1,16 +1,15 @@
 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <base href="chrome://pocket/content/panels/">
         <title>Pocket: Sign Up</title>
         <link rel="stylesheet" href="css/normalize.css">
-        <link rel="stylesheet" href="css/firasans.css">
         <link rel="stylesheet" href="css/signup.css">
     </head>
     <body class="pkt_ext_containersignup" aria-live="polite">
         <script type="text/javascript" src="js/vendor/jquery-2.1.1.min.js"></script>
         <script type="text/javascript" src="js/vendor/handlebars.runtime.js"></script>
         <script type="text/javascript" src="js/tmpl.js"></script>
         <script type="text/javascript" src="js/messages.js"></script>
         <script type="text/javascript" src="js/signup.js"></script>

new file mode 100644
--- /dev/null
+++ b/browser/extensions/pocket/content/panels/tmpl/ho2/ho2_articleinfo.handlebars
@@ -0,0 +1,9 @@
+<div class="pkt_ext_experiment_saved_tile pkt_ext_cf {{#if has_image }}pkt_ext_has_image{{/if}}">
+    {{#if has_image}}
+        <div class="pkt_ext_save_image" style="background-image:url('{{image_src}}'); background-size:cover; background-position:center center;" data-imgsrc="{{image_src}}"></div>
+    {{/if}}
+    <div class="pkt_ext_save_title">
+        <div class="pkt_ext_save_open">{{title}}</div>
+        <div class="pkt_ext_save_source">{{domain}}</div>
+    </div>
+</div>

new file mode 100644
--- /dev/null
+++ b/browser/extensions/pocket/content/panels/tmpl/ho2/ho2_download.handlebars
@@ -0,0 +1,13 @@
+<div class="pkt_ext_detail pkt_ext_saved_sendcollectemail">
+    <h3 class="pkt_ext_heading">Check your inbox</h3>
+    <p class="pkt_ext_description">We’ve sent an email to <span class="pkt_ext_bold">{{email}}</span> with a link to install the Pocket app, where your article will be waiting for you.</p>
+
+    <div class="pkt_ext_download_section">
+        <p class="pkt_ext_description">You can also get it on the App Store here:</p>
+
+        <div class="pkt_ext_download_button_wrapper">
+            <a href="https://getpocket.com/apps/link/pocket-iphone/?s=fx_save_hanger" target="_blank" ><div class="pkt_ext_apple_download"></div></a>
+            <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>
+        </div>
+    </div>
+</div>

new file mode 100644
--- /dev/null
+++ b/browser/extensions/pocket/content/panels/tmpl/ho2/ho2_download_error.handlebars
@@ -0,0 +1,13 @@
+<div class="pkt_ext_detail pkt_ext_saved_sendcollectemail">
+    <h3 class="pkt_ext_heading">There was a problem</h3>
+    <p class="pkt_ext_description">Email failed to send, please try again later</p>
+
+    <div class="pkt_ext_download_section">
+        <p class="pkt_ext_description">You can also get the Pocket app<br />on the App Store here:</p>
+
+        <div class="pkt_ext_download_button_wrapper">
+            <a href="https://getpocket.com/apps/link/pocket-iphone/?s=fx_save_hanger" target="_blank" ><div class="pkt_ext_apple_download"></div></a>
+            <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>
+        </div>
+    </div>
+</div>

new file mode 100644
--- /dev/null
+++ b/browser/extensions/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>

new file mode 100644
--- /dev/null
+++ b/browser/extensions/pocket/content/panels/tmpl/ho2/ho2_sharebutton_v2.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">Send to your phone</span>
+        </span>
+    </button>
+</div>

new file mode 100644
--- /dev/null
+++ b/browser/extensions/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>

--- a/browser/extensions/pocket/content/panels/tmpl/saved_shell.handlebars
+++ b/browser/extensions/pocket/content/panels/tmpl/saved_shell.handlebars
@@ -1,29 +1,29 @@
 <div class="pkt_ext_initload">
-    <div class="pkt_ext_logo"></div> 
+    <div class="pkt_ext_logo"></div>
     <div class="pkt_ext_topdetail">
         <h2>{{saving}}</h2>
-    </div> 
+    </div>
     <div class="pkt_ext_loadingspinner"><div></div></div>
-</div>                                      
-<div class="pkt_ext_detail">                        
+</div>
+<div class="pkt_ext_detail">
     <div class="pkt_ext_logo"></div>
     <div class="pkt_ext_topdetail">
         <h2>{{pagesaved}}</h2>
         <h3 class="pkt_ext_errordetail"></h3>
         <nav class="pkt_ext_item_actions pkt_ext_cf">
             <ul>
                 <li><a class="pkt_ext_removeitem" href="#">{{removepage}}</a></li>
-                <li class="pkt_ext_actions_separator"></li>                                
+                <li class="pkt_ext_actions_separator"></li>
                 <li><a class="pkt_ext_openpocket" href="https://{{pockethost}}/a?src=ff_ext_saved" target="_blank">{{viewlist}}</a></li>
             </ul>
-        </nav>                        
+        </nav>
     </div>
     <div class="pkt_ext_tag_detail pkt_ext_cf">
         <div class="pkt_ext_tag_input_wrapper">
             <div class="pkt_ext_tag_input_blocker"></div>
             <input class="pkt_ext_tag_input" type="text" placeholder="{{addtags}}">
         </div>
         <a href="#" class="pkt_ext_btn pkt_ext_btn_disabled">{{save}}</a>
     </div>
     <p class="pkt_ext_edit_msg"></p>
-</div>
\ No newline at end of file
+</div>

new file mode 100644
--- /dev/null
+++ b/browser/extensions/pocket/content/panels/tmpl/saved_tmplogin.handlebars
@@ -0,0 +1,20 @@
+<div class="pkt_ext_detail pkt_ext_saved_tmplogin pkt_shaded_background">
+    <div class="pkt_ext_indent_bordered">
+        <p>You are using Pocket without an account.<br />Sign up to back up your saved items.</p>
+        <p><a href="https://help.getpocket.com/article/1129-using-pocket-without-an-account-in-firefox?s=ghost_upsell" target="_blank">Learn more</a></p>
+    </div>
+
+    {{#if fxasignedin}}
+        <button id="pkt_ext_tmp_account_signup" class="pkt_ext_button pkt_ext_blue_button">
+            <span class="pkt_ext_save_title_wrapper pkt_ext_ffx_icon">
+                <span class="pkt_ext_logo_action_copy">Login with Firefox</span>
+            </span>
+        </button>
+    {{else}}
+        <button id="pkt_ext_tmp_account_signup" class="pkt_ext_button">
+            <span class="pkt_ext_save_title_wrapper">
+                <span class="pkt_ext_logo_action_copy">Sign up</span>
+            </span>
+        </button>
+    {{/if}}
+</div>

--- a/browser/extensions/pocket/content/panels/tmpl/signup_shell.handlebars
+++ b/browser/extensions/pocket/content/panels/tmpl/signup_shell.handlebars
@@ -10,17 +10,17 @@
 	{{else}}
 	<p class="pkt_ext_learnmorecontainer"><a class="pkt_ext_learnmore pkt_ext_learnmoreinactive" href="#">{{learnmore}}</a></p>
 	{{/if}}
 	<div class="pkt_ext_introimg"></div>
 </div>
 <div class="pkt_ext_signupdetail pkt_ext_signupdetail_hero">
 	{{#if fxasignedin}}
 	<h4>{{signuptosave}}</h4>
-	<p class="btn-container"><a href="https://{{pockethost}}/ff_signup?s=ffi&t=signupff&v={{variant}}" target="_blank" class="btn signup-btn-firefox"><span class="logo"></span><span class="text">{{signinfirefox}}</span></a></p>
+	<p class="btn-container"><a href="https://{{pockethost}}/ff_signup?s=ffi&t=signupff&v={{variant}}" target="_blank" class="btn signup-btn-firefox"><span class="logo"></span><span class="text">{{signupfirefox}}</span></a></p>
 	<p class="alreadyhave">{{alreadyhaveacct}} <a href="https://{{pockethost}}/login?ep=3&src=extension&s=ffi&t=login&v={{variant}}" target="_blank">{{loginnow}}</a>.</p>
 	{{else}}
 		{{#if controlvariant}}
 			<h4>{{signuptosave}}</h4>
 			<p class="btn-container"><a href="https://{{pockethost}}/ff_signup?s=ffi&tv=panel_control&t=signupff&v={{variant}}" target="_blank" class="btn signup-btn-firefox"><span class="logo"></span><span class="text">{{signupfirefox}}</span></a></p>
 			<p class="btn-container"><a href="https://{{pockethost}}/signup?force=email&tv=panel_control&src=extension&s=ffi&t=signupemail&v={{variant}}" target="_blank" class="btn btn-secondary signup-btn-email signup-btn-initstate">{{signupemail}}</a></p>
 			<p class="alreadyhave">{{alreadyhaveacct}} <a href="https://{{pockethost}}/login?ep=3&tv=panel_control&src=extension&s=ffi&t=login&v={{variant}}" target="_blank">{{loginnow}}</a>.</p>
 		{{else}}

--- a/browser/extensions/pocket/content/panels/tmpl/signupstoryboard_shell.handlebars
+++ b/browser/extensions/pocket/content/panels/tmpl/signupstoryboard_shell.handlebars
@@ -20,17 +20,17 @@
 			{{/if}}
 		</div>
 		<div class="pkt_ext_introstorytwo_img"></div>
 	</div>
 </div>
 <div class="pkt_ext_signupdetail">
 	{{#if fxasignedin}}
 	<h4>{{signuptosave}}</h4>
-	<p class="btn-container"><a href="https://{{pockethost}}/ff_signup?s=ffi&t=signupff&v={{variant}}" target="_blank" class="btn signup-btn-firefox"><span class="logo"></span><span class="text">{{signinfirefox}}</span></a></p>
+	<p class="btn-container"><a href="https://{{pockethost}}/ff_signup?s=ffi&t=signupff&v={{variant}}" target="_blank" class="btn signup-btn-firefox"><span class="logo"></span><span class="text">{{signupfirefox}}</span></a></p>
 	<p class="alreadyhave">{{alreadyhaveacct}} <a href="https://{{pockethost}}/login?ep=3&src=extension&s=ffi&t=login&v={{variant}}" target="_blank">{{loginnow}}</a>.</p>
 	{{else}}
 		{{#if controlvariant}}
 			<h4>{{signuptosave}}</h4>
 			<p class="btn-container"><a href="https://{{pockethost}}/ff_signup?s=ffi&tv=panel_control&t=signupff&v={{variant}}" target="_blank" class="btn signup-btn-firefox"><span class="logo"></span><span class="text">{{signupfirefox}}</span></a></p>
 			<p class="btn-container"><a href="https://{{pockethost}}/signup?force=email&tv=panel_control&src=extension&s=ffi&t=signupemail&v={{variant}}" target="_blank" class="btn btn-secondary signup-btn-email signup-btn-initstate">{{signupemail}}</a></p>
 			<p class="alreadyhave">{{alreadyhaveacct}} <a href="https://{{pockethost}}/login?ep=3&tv=panel_control&src=extension&s=ffi&t=login&v={{variant}}" target="_blank">{{loginnow}}</a>.</p>
 		{{else}}

--- a/browser/extensions/pocket/content/pktApi.jsm
+++ b/browser/extensions/pocket/content/pktApi.jsm
@@ -336,17 +336,16 @@ var pktApi = (function() {
         if (options.title) {
             sendData.title = options.title;
         }
 
         return apiRequest({
             path: "/firefox/save",
             data: sendData,
             success(data) {
-
                 // Update premium status, tags and since
                 var tags = data.tags;
                 if ((typeof tags !== "undefined") && Array.isArray(tags)) {
                     // If a tagslist is in the response replace the tags
                     setSetting("tags", JSON.stringify(data.tags));
                 }
 
                 // Update premium status
@@ -354,16 +353,65 @@ var pktApi = (function() {
                 if (typeof premiumStatus !== "undefined") {
                     // If a premium_status is in the response replace the premium_status
                     setSetting("premium_status", premiumStatus);
                 }
 
                 // Save since value for further requests
                 setSetting("latestSince", data.since);
 
+                // Define variant for ho2
+                if (data.flags) {
+                    var showHo2 = (Services.locale.getAppLocaleAsLangTag() === 'en-US') ? data.flags.show_ffx_mobile_prompt : 'control';
+                    setSetting("test.ho2", showHo2);
+                }
+                data.ho2 = getSetting("test.ho2");
+
+                if (options.success) {
+                    options.success.apply(options, Array.apply(null, arguments));
+                }
+            },
+            error: options.error
+        });
+    }
+
+    /**
+     * Get a preview for saved URL
+     * @param {string} url     URL of the link
+     * @param {Object | undefined} options Can provide a `success` callback and an `error` callback.
+     * @return {Boolean} Returns Boolean whether the api call started sucessfully
+     */
+    function getArticleInfo(url, options) {
+        return apiRequest({
+            path: '/getItemPreview',
+            data: {
+                access_token: getAccessToken(),
+                url,
+            },
+            success(data) {
+                if (options.success) {
+                    options.success.apply(options, Array.apply(null, arguments));
+                }
+            },
+            error: options.error
+        });
+    }
+
+    /**
+     * Request a email for mobile apps
+     * @param {Object | undefined} options Can provide a `success` callback and an `error` callback.
+     * @return {Boolean} Returns Boolean whether the api call started sucessfully
+     */
+    function getMobileDownload(options) {
+        return apiRequest({
+            path: '/firefox/get-app',
+            data: {
+                access_token: getAccessToken()
+            },
+            success(data) {
                 if (options.success) {
                     options.success.apply(options, Array.apply(null, arguments));
                 }
             },
             error: options.error
         });
     }
 
@@ -671,10 +719,12 @@ var pktApi = (function() {
         addTagsToItem,
         addTagsToURL,
         getTags,
         isPremiumUser,
         getSuggestedTagsForItem,
         getSuggestedTagsForURL,
         getSignupPanelTabTestVariant,
         retrieve,
+        getArticleInfo,
+        getMobileDownload
     };
 }());

☠☠ backed out by 9dd8b6f551ab ☠ ☠
author	anthony <anthony@getpocket.com>
	Thu, 17 May 2018 14:12:02 -0700
changeset 418807	2eba9608447d0e8d2572b292d8d733645d698286
parent 418806	99a063f6a3f2c79cdd3f10f9ba19f87d593c8306
child 418808	9111dee5d50185d07582776207f58617bbb54227
push id	34014
push user	aciure@mozilla.com
push date	Fri, 18 May 2018 22:04:52 +0000
treeherder	mozilla-central@b54f574a1dd2 [default view] [failures only]
perfherder	[talos] [build metrics] [platform microbench] (compared to previous push)
reviewers	Gijs
bugs	1451840
milestone	62.0a1
first release with	nightly linux32 e1fafe357b36 / 62.0a1 / 20180518222751 / files nightly linux64 e1fafe357b36 / 62.0a1 / 20180518222751 / files nightly mac e1fafe357b36 / 62.0a1 / 20180518222751 / files nightly win32 e1fafe357b36 / 62.0a1 / 20180518222751 / files nightly win64 e1fafe357b36 / 62.0a1 / 20180518222751 / files
last release without	nightly linux32 24bae072acb0 / 62.0a1 / 20180517220057 / files nightly linux64 24bae072acb0 / 62.0a1 / 20180517220057 / files nightly mac 24bae072acb0 / 62.0a1 / 20180517220057 / files nightly win32 24bae072acb0 / 62.0a1 / 20180517220057 / files nightly win64 24bae072acb0 / 62.0a1 / 20180517220057 / files

browser/extensions/pocket/content/main.js		file \| annotate \| diff \| comparison \| revisions
browser/extensions/pocket/content/panels/css/firasans.css		file \| annotate \| diff \| comparison \| revisions
browser/extensions/pocket/content/panels/css/saved.css		file \| annotate \| diff \| comparison \| revisions
browser/extensions/pocket/content/panels/css/sendtomobile.css		file \| annotate \| diff \| comparison \| revisions
browser/extensions/pocket/content/panels/css/signup.css		file \| annotate \| diff \| comparison \| revisions
browser/extensions/pocket/content/panels/img/app_store_dowload_apple.svg		file \| annotate \| diff \| comparison \| revisions
browser/extensions/pocket/content/panels/js/saved.js		file \| annotate \| diff \| comparison \| revisions
browser/extensions/pocket/content/panels/js/sendtomobile.js		file \| annotate \| diff \| comparison \| revisions
browser/extensions/pocket/content/panels/js/tmpl.js		file \| annotate \| diff \| comparison \| revisions
browser/extensions/pocket/content/panels/saved.html		file \| annotate \| diff \| comparison \| revisions
browser/extensions/pocket/content/panels/signup.html		file \| annotate \| diff \| comparison \| revisions
browser/extensions/pocket/content/panels/tmpl/ho2/ho2_articleinfo.handlebars		file \| annotate \| diff \| comparison \| revisions
browser/extensions/pocket/content/panels/tmpl/ho2/ho2_download.handlebars		file \| annotate \| diff \| comparison \| revisions
browser/extensions/pocket/content/panels/tmpl/ho2/ho2_download_error.handlebars		file \| annotate \| diff \| comparison \| revisions
browser/extensions/pocket/content/panels/tmpl/ho2/ho2_sharebutton_v1.handlebars		file \| annotate \| diff \| comparison \| revisions
browser/extensions/pocket/content/panels/tmpl/ho2/ho2_sharebutton_v2.handlebars		file \| annotate \| diff \| comparison \| revisions
browser/extensions/pocket/content/panels/tmpl/ho2/ho2_sharebutton_v3.handlebars		file \| annotate \| diff \| comparison \| revisions
browser/extensions/pocket/content/panels/tmpl/saved_shell.handlebars		file \| annotate \| diff \| comparison \| revisions
browser/extensions/pocket/content/panels/tmpl/saved_tmplogin.handlebars		file \| annotate \| diff \| comparison \| revisions
browser/extensions/pocket/content/panels/tmpl/signup_shell.handlebars		file \| annotate \| diff \| comparison \| revisions
browser/extensions/pocket/content/panels/tmpl/signupstoryboard_shell.handlebars		file \| annotate \| diff \| comparison \| revisions
browser/extensions/pocket/content/pktApi.jsm		file \| annotate \| diff \| comparison \| revisions