Bug 1451840 - Add button to Pocket doorhanger to request mobile app draft
authoranthony <anthony@getpocket.com>
Thu, 17 May 2018 14:12:02 -0700
changeset 797937 ccf047ed1ca38def01ab9b4be369becd63f17288
parent 796393 24bae072acb09114c367e6b9ffde9261b2ad8a58
push id110628
push useranthonyliddle@gmail.com
push dateTue, 22 May 2018 01:13:25 +0000
bugs1451840
milestone62.0a1
Bug 1451840 - Add button to Pocket doorhanger to request mobile app By showing users an upsell, positioned as a feature, as part of the save confirmation and make it easy for users to get the mobile app, more users will understand the value of the Pocket mobile and start using the mobile app. The initial experiment will target existing logged in English users only. We've added flags to the server response on the save request that: - Set whether the user has the mobile app - Which variant of the experiment the user should be enrolled in If the user has an account, but they've never installed the Android or iOS app, we will display a new button inline in the current panel that will email a link to the mobile application to the user. MozReview-Commit-ID: 2xtPv5GPVbL *** Bug 1451840 - Add button to Pocket doorhanger to request mobile app - Specified default color on buttons - Removed unnecessary css styles - Resized icon display size - Made RTL friendly - Simplified SVGs - Updated buttons to be html buttons for screen readers MozReview-Commit-ID: HdTi1CZbXdc
browser/extensions/pocket/content/main.js
browser/extensions/pocket/content/panels/css/firasans.css
browser/extensions/pocket/content/panels/css/saved.css
browser/extensions/pocket/content/panels/css/sendtomobile.css
browser/extensions/pocket/content/panels/css/signup.css
browser/extensions/pocket/content/panels/img/app_store_dowload_apple.svg
browser/extensions/pocket/content/panels/js/saved.js
browser/extensions/pocket/content/panels/js/sendtomobile.js
browser/extensions/pocket/content/panels/js/tmpl.js
browser/extensions/pocket/content/panels/saved.html
browser/extensions/pocket/content/panels/signup.html
browser/extensions/pocket/content/panels/tmpl/ho2/ho2_articleinfo.handlebars
browser/extensions/pocket/content/panels/tmpl/ho2/ho2_download.handlebars
browser/extensions/pocket/content/panels/tmpl/ho2/ho2_download_error.handlebars
browser/extensions/pocket/content/panels/tmpl/ho2/ho2_sharebutton_v1.handlebars
browser/extensions/pocket/content/panels/tmpl/ho2/ho2_sharebutton_v2.handlebars
browser/extensions/pocket/content/panels/tmpl/ho2/ho2_sharebutton_v3.handlebars
browser/extensions/pocket/content/panels/tmpl/saved_shell.handlebars
browser/extensions/pocket/content/panels/tmpl/saved_tmplogin.handlebars
browser/extensions/pocket/content/panels/tmpl/signup_shell.handlebars
browser/extensions/pocket/content/panels/tmpl/signupstoryboard_shell.handlebars
browser/extensions/pocket/content/pktApi.jsm
--- 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(res, req) {
+                    pktUIMessaging.sendResponseMessageToPanel(panelId, _getArticleInfoMessageId, res);
+                },
+                error(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(res, req) {
+                    pktUIMessaging.sendResponseMessageToPanel(panelId, _getMobileDownloadMessageId, res);
+                },
+                error(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,99 @@
 --------------------------------------------------------------------------------------- */
 .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;
+}
+
+.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,206 @@
+.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;
+    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
@@ -1,9 +1,9 @@
-/* global $:false, Handlebars:false */
+/* global $:false, Handlebars:false, PKT_SENDTOMOBILE:false, */
 /* import-globals-from messages.js */
 
 /*
 PKT_SAVED_OVERLAY is the view itself and contains all of the methods to manipute the overlay and messaging.
 It does not contain any logic for saving or communication with the extension or server.
 */
 var PKT_SAVED_OVERLAY = function(options) {
     var myself = this;
@@ -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.includes("getpocket.com")) {
+            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,98 @@
+/* global $:false, Handlebars:false, thePKT_SAVED:false, */
+
+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, height: confirmHeight });
+                } else {
+                    $("body").html(Handlebars.templates.ho2_download_error({email}));
+                    thePKT_SAVED.sendMessage("resizePanel", { 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 false;
+    // 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
     };
 }());