diff --git a/browser/app/profile/firefox.js b/browser/app/profile/firefox.js index 00b8d3c31f20..22ee9df35620 100644 --- a/browser/app/profile/firefox.js +++ b/browser/app/profile/firefox.js @@ -1919,7 +1919,8 @@ pref("dom.serviceWorkers.enabled", true); #endif pref("browser.pocket.enabled", false); -pref("browser.pocket.hostname", "localhost"); +pref("browser.pocket.api", "api.getpocket.com"); +pref("browser.pocket.site", "getpocket.com"); pref("browser.pocket.oAuthConsumerKey", "40249-e88c401e1b1f2242d9e441c4"); pref("browser.pocket.useLocaleList", true); pref("browser.pocket.enabledLocales", "en-US"); diff --git a/browser/components/pocket/jar.mn b/browser/components/pocket/jar.mn index 6c98f1fa5b0a..ff726e9d243e 100644 --- a/browser/components/pocket/jar.mn +++ b/browser/components/pocket/jar.mn @@ -18,14 +18,20 @@ browser.jar: content/browser/pocket/panels/img/pocketlogosolo@2x.png (panels/img/pocketlogosolo@2x.png) content/browser/pocket/panels/img/pocketmenuitem16.png (panels/img/pocketmenuitem16.png) content/browser/pocket/panels/img/pocketmenuitem16@2x.png (panels/img/pocketmenuitem16@2x.png) - content/browser/pocket/panels/img/pocketmultidevices@1x.png (panels/img/pocketmultidevices@1x.png) - content/browser/pocket/panels/img/pocketmultidevices@2x.png (panels/img/pocketmultidevices@2x.png) + content/browser/pocket/panels/img/pocketsignup_button@1x.png (panels/img/pocketsignup_button@1x.png) + content/browser/pocket/panels/img/pocketsignup_button@2x.png (panels/img/pocketsignup_button@2x.png) + content/browser/pocket/panels/img/pocketsignup_devices@1x.png (panels/img/pocketsignup_devices@1x.png) + content/browser/pocket/panels/img/pocketsignup_devices@2x.png (panels/img/pocketsignup_devices@2x.png) + content/browser/pocket/panels/img/pocketsignup_hero@1x.png (panels/img/pocketsignup_hero@1x.png) + content/browser/pocket/panels/img/pocketsignup_hero@2x.png (panels/img/pocketsignup_hero@2x.png) content/browser/pocket/panels/img/signup_firefoxlogo@1x.png (panels/img/signup_firefoxlogo@1x.png) content/browser/pocket/panels/img/signup_firefoxlogo@2x.png (panels/img/signup_firefoxlogo@2x.png) content/browser/pocket/panels/img/signup_help@1x.png (panels/img/signup_help@1x.png) content/browser/pocket/panels/img/signup_help@2x.png (panels/img/signup_help@2x.png) content/browser/pocket/panels/img/tag_close@1x.png (panels/img/tag_close@1x.png) content/browser/pocket/panels/img/tag_close@2x.png (panels/img/tag_close@2x.png) + content/browser/pocket/panels/img/tag_closeactive@1x.png (panels/img/tag_closeactive@1x.png) + content/browser/pocket/panels/img/tag_closeactive@2x.png (panels/img/tag_closeactive@2x.png) content/browser/pocket/panels/js/dictionary.js (panels/js/dictionary.js) content/browser/pocket/panels/js/messages.js (panels/js/messages.js) content/browser/pocket/panels/js/saved.js (panels/js/saved.js) @@ -37,3 +43,4 @@ browser.jar: content/browser/pocket/panels/tmpl/saved_premiumshell.handlebars (panels/tmpl/saved_premiumshell.handlebars) content/browser/pocket/panels/tmpl/saved_shell.handlebars (panels/tmpl/saved_shell.handlebars) content/browser/pocket/panels/tmpl/signup_shell.handlebars (panels/tmpl/signup_shell.handlebars) + content/browser/pocket/panels/tmpl/signupstoryboard_shell.handlebars (panels/tmpl/signupstoryboard_shell.handlebars) diff --git a/browser/components/pocket/main.js b/browser/components/pocket/main.js index 8ac5aaf35e1b..f209201e7460 100644 --- a/browser/components/pocket/main.js +++ b/browser/components/pocket/main.js @@ -42,6 +42,9 @@ // TODO : [nice to have] - Immediately save, buffer the actions in a local queue and send (so it works offline, works like our native extensions) // TODO : Remove console.log entries +Cu.import("resource://gre/modules/XPCOMUtils.jsm"); +XPCOMUtils.defineLazyModuleGetter(this, "ReaderMode", "resource://gre/modules/ReaderMode.jsm"); + var pktUI = (function() { // -- Initialization (on startup and new windows) -- // @@ -277,16 +280,35 @@ var pktUI = (function() { * Show the sign-up panel */ function showSignUp() { - showPanel("chrome://browser/content/pocket/panels/signup.html", { - onShow: function() { - // Open and resize the panel - resizePanel({ + getFirefoxAccountSignedInUser(function(userdata) + { + var fxasignedin = (typeof userdata == 'object' && userdata !== null) ? '1' : '0'; + var startheight = 490; + if (pktApi.getSignupAB() == 'storyboard') + { + startheight = 460; + if (fxasignedin == '1') + { + startheight = 406; + } + } + else + { + if (fxasignedin == '1') + { + startheight = 436; + } + } + showPanel("chrome://browser/content/pocket/panels/signup.html?pockethost=" + Services.prefs.getCharPref("browser.pocket.site") + "&fxasignedin=" + fxasignedin + "&variant=" + pktApi.getSignupAB(), { + onShow: function() { + resizePanel({ width: 300, - height: 550 - }); - }, - onHide: panelDidHide, - }); + height: startheight + }); + }, + onHide: panelDidHide, + }); + }); } /** @@ -294,22 +316,31 @@ var pktUI = (function() { */ function saveAndShowConfirmation(url, title) { - // Validate parameter - // TODO: Show some kind of error - if (typeof url === 'undefined') { return; } - if (!url.startsWith("http") && !url.startsWith('https')) { return; }; + // Validate input parameter + if (typeof url !== 'undefined' && url.startsWith("about:reader?url=")) { + url = ReaderMode.getOriginalUrl(url); + } - showPanel("chrome://browser/content/pocket/panels/saved.html?premiumStatus=" + (pktApi.isPremiumUser() ? '1' : '0'), { + var isValidURL = (typeof url !== 'undefined' && (url.startsWith("http") || url.startsWith('https'))); + + showPanel("chrome://browser/content/pocket/panels/saved.html?pockethost=" + Services.prefs.getCharPref("browser.pocket.site") + "&premiumStatus=" + (pktApi.isPremiumUser() ? '1' : '0'), { onShow: function() { // Open and resize the panel resizePanel({ width: 350, - height: 266 + height: 263 }); - var options = { - success: function(data, response) { + // Send error message for invalid url + if (!isValidURL) { + var error = new Error('Only links can be saved'); + sendErrorMessage('saveLink', error); + return; + } + // Add url + var options = { + success: function(data, request) { var item = data.item; var successResponse = { status: "success", @@ -317,7 +348,14 @@ var pktUI = (function() { }; sendMessage('saveLink', successResponse); }, - error: function(error, response) { + error: function(error, request) { + // If user is not authorized show singup page + if (request.status === 401) { + showSignUp(); + return; + } + + // Send error message to panel sendErrorMessage('saveLink', error); } } @@ -388,7 +426,6 @@ var pktUI = (function() { * Called when the signup and saved panel was hidden */ function panelDidHide() { - console.log("Panel did hide"); } // -- Communication to Panels -- // @@ -478,7 +515,7 @@ var pktUI = (function() { activate = payload.activate; } openTabWithUrl(payload.url, activate); - sendMessage("openTabWithUrlResponse", url); + sendMessage("openTabWithUrlResponse", payload.url); }); // Close the panel @@ -493,7 +530,6 @@ var pktUI = (function() { // Callback post initialization to tell background script that panel is "ready" for communication. addMessageListener("listenerReady", function(payload) { - console.log('got a listener init'); }); addMessageListener("resizePanel", function(payload) { @@ -604,13 +640,12 @@ var pktUI = (function() { return _isHidden; } - function isUserLoggedIntoFxA() { - // TODO : verify with Firefox this is the right way to do this - var user = fxAccounts.getSignedInUser(); - if (user && user.email) - return true; - - return false; + function getFirefoxAccountSignedInUser(callback) { + fxAccounts.getSignedInUser().then(userData => { + callback(userData); + }).then(null, error => { + callback(); + }); } /** @@ -705,7 +740,6 @@ var pktUI = (function() { */ return { onLoad: onLoad, - onUnload: onUnload, pocketButtonOnCommand: pocketButtonOnCommand, pocketPanelDidShow: pocketPanelDidShow, diff --git a/browser/components/pocket/panels/css/normalize.css b/browser/components/pocket/panels/css/normalize.css index 81c6f31ea4b8..aea69516e26f 100644 --- a/browser/components/pocket/panels/css/normalize.css +++ b/browser/components/pocket/panels/css/normalize.css @@ -8,8 +8,6 @@ html { font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ } /** @@ -291,7 +289,6 @@ button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { - -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } @@ -337,17 +334,6 @@ input[type="radio"] { padding: 0; /* 2 */ } -/** - * Fix the cursor style for Chrome's increment/decrement buttons. For certain - * `font-size` values of the `input`, it causes the cursor style of the - * decrement button to change from `default` to `text`. - */ - -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; -} - /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome @@ -355,23 +341,9 @@ input[type="number"]::-webkit-outer-spin-button { */ input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } -/** - * Remove inner padding and search cancel button in Safari and Chrome on OS X. - * Safari (but not Chrome) clips the cancel button when the search input has - * padding (and `textfield` appearance). - */ - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - /** * Define consistent border, margin, and padding. */ @@ -424,4 +396,4 @@ table { td, th { padding: 0; -} \ No newline at end of file +} diff --git a/browser/components/pocket/panels/css/saved.css b/browser/components/pocket/panels/css/saved.css index 1c1e72106088..1d67db7b70de 100644 --- a/browser/components/pocket/panels/css/saved.css +++ b/browser/components/pocket/panels/css/saved.css @@ -23,7 +23,6 @@ font-family: "FiraSans", "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 0; position: relative; - text-shadow: 0; text-align: center; } .pkt_ext_cf:after { @@ -42,17 +41,8 @@ /*=Loading spinner --------------------------------------------------------------------------------------- */ -@-moz-keyframes pkt_ext_spin { +@keyframes pkt_ext_spin { to { - -moz-transform: rotate(1turn); - -webkit-transform: rotate(1turn); - transform: rotate(1turn); - } -} -@-webkit-keyframes pkt_ext_spin { - to { - -moz-transform: rotate(1turn); - -webkit-transform: rotate(1turn); transform: rotate(1turn); } } @@ -68,8 +58,6 @@ font-size: 10px; text-indent: 999em; overflow: hidden; - -moz-animation: pkt_ext_spin 0.7s infinite steps(8); - -webkit-animation: pkt_ext_spin 0.7s infinite steps(8); animation: pkt_ext_spin 0.7s infinite steps(8); } .pkt_ext_containersaved .pkt_ext_loadingspinner:before, @@ -85,28 +73,20 @@ border-radius: .2em; background: #eee; box-shadow: 0 1.75em #eee; - -webkit-transform-origin: 50% 1.25em; - -moz-transform-origin: 50% 1.25em; transform-origin: 50% 1.25em; } .pkt_ext_containersaved .pkt_ext_loadingspinner:before { background: #555; } .pkt_ext_containersaved .pkt_ext_loadingspinner:after { - -webkit-transform: rotate(-45deg); - -moz-transform: rotate(-45deg); transform: rotate(-45deg); background: #777; } .pkt_ext_containersaved .pkt_ext_loadingspinner > div:before { - -webkit-transform: rotate(-90deg); - -moz-transform: rotate(-90deg); transform: rotate(-90deg); background: #999; } .pkt_ext_containersaved .pkt_ext_loadingspinner > div:after { - -webkit-transform: rotate(-135deg); - -moz-transform: rotate(-135deg); transform: rotate(-135deg); background: #bbb; } @@ -125,42 +105,32 @@ position: relative; z-index: 10; } -.pkt_ext_container_detailactive .pkt_ext_initload, -.pkt_ext_container_finalerrorstate .pkt_ext_initload { - -webkit-transition: opacity 0.2s ease-out; - -o-transition: opacity 0.2s ease-out; +.pkt_ext_container_detailactive .pkt_ext_initload { transition: opacity 0.2s ease-out; opacity: 0; } .pkt_ext_container_detailactive .pkt_ext_initload .pkt_ext_loadingspinner, -.pkt_ext_container_finalerrorstate .pkt_ext_initload .pkt_ext_loadingspinner { - -moz-animation: none; - -webkit-animation: none; +.pkt_ext_container_finalstate .pkt_ext_initload .pkt_ext_loadingspinner { animation: none; } .pkt_ext_container_detailactive .pkt_ext_detail { - -webkit-transition: opacity 0.2s ease-out 0.4s; - -moz-transition: opacity 0.2s ease-out 0.4s; - -ms-transition: opacity 0.2s ease-out 0.4s; - -o-transition: opacity 0.2s ease-out 0.4s; max-height: 20em; opacity: 1; - transition: opacity 0.2s ease-out 0.4s; + transition: opacity 0.2s ease-out; } .pkt_ext_container_finalstate .pkt_ext_edit_msg, .pkt_ext_container_finalstate .pkt_ext_tag_detail, .pkt_ext_container_finalstate .pkt_ext_suggestedtag_detail, .pkt_ext_container_finalstate .pkt_ext_item_actions { - -webkit-transition: opacity 0.2s ease-out; - -moz-transition: opacity 0.2s ease-out; - -ms-transition: opacity 0.2s ease-out; - -o-transition: opacity 0.2s ease-out; opacity: 0; transition: opacity 0.2s ease-out; } .pkt_ext_container_finalerrorstate .pkt_ext_edit_msg, -.pkt_ext_container_finalerrorstate .pkt_ext_tag_detail { +.pkt_ext_container_finalerrorstate .pkt_ext_tag_detail, +.pkt_ext_container_finalerrorstate .pkt_ext_suggestedtag_detail, +.pkt_ext_container_finalerrorstate .pkt_ext_item_actions { display: none; + transition: none; } .pkt_ext_containersaved h2 { background: transparent; @@ -168,17 +138,73 @@ color: #333; display: block; float: none; - font-size: 1.125em; - font-size: 22px; + font-size: 18px; font-weight: normal; letter-spacing: normal; line-height: 1; - margin: 18px 0 4px; + margin: 19px 0 4px; padding: 0; position: relative; text-align: left; text-transform: none; } +@keyframes fade_in_out { + 0% { + opacity: 1; + top: 0; + } + 50% { + opacity: 0; + top: 0; + } + 51% { + opacity: 0; + top: 10px; + } + 100% { + opacity: 1; + top: 10px; + } +} +@keyframes fade_in_outalt { + 0% { + opacity: 1; + } + 50% { + opacity: 0; + } + 51% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +.pkt_ext_container_finalstate h2 { + animation: fade_in_out 0.4s ease-out; + top: 10px; +} +.pkt_ext_container_finalerrorstate h2 { + animation: fade_int_outalt 0.4s ease-out; + color: #d74345; + top: 0; +} +.pkt_ext_containersaved .pkt_ext_errordetail { + display: none; + font-size: 12px; + font-weight: normal; + left: 6.4em; + opacity: 0; + position: absolute; + top: 2.7em; + text-align: left; + visibility: hidden; +} +.pkt_ext_container_finalerrorstate .pkt_ext_errordetail { + display: block; + opacity: 1; + visibility: visible; +} .pkt_ext_containersaved .pkt_ext_logo { background: url(../img/pocketlogosolo@1x.png) center center no-repeat; display: block; @@ -188,7 +214,7 @@ position: relative; width: 44px; } -@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) { +@media (min-resolution: 1.1dppx) { .pkt_ext_containersaved .pkt_ext_logo { background-image: url(../img/pocketlogosolo@2x.png); background-size: 44px 40px; @@ -197,10 +223,6 @@ .pkt_ext_containersaved .pkt_ext_topdetail { float: left; } -.pkt_ext_container_finalerrorstate h2 { - line-height: 1.2em; - margin-bottom: 1.5em; -} .pkt_ext_containersaved .pkt_ext_edit_msg { display: none; font-size: 0.875em; @@ -241,8 +263,6 @@ width: 100%; } .pkt_ext_containersaved .pkt_ext_item_actions li { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; box-sizing: border-box; background: none; border: 0; @@ -250,7 +270,7 @@ list-style: none; line-height: 0.8; height: auto; - padding-right: 0.5em; + padding-right: 0.4em; width: auto; } .pkt_ext_containersaved .pkt_ext_item_actions li:before { @@ -283,7 +303,7 @@ } .pkt_ext_containersaved .pkt_ext_item_actions a:hover { color: #008acb; - text-decoration: none; + text-decoration: underline; } .pkt_ext_containersaved .pkt_ext_item_actions a:before, .pkt_ext_containersaved .pkt_ext_item_actions a:after { @@ -299,7 +319,7 @@ text-align: right; } .pkt_ext_containersaved .pkt_ext_item_actions .pkt_ext_removeitem { - padding-left: 0.2em; + padding-left: 0; } .pkt_ext_containersaved .pkt_ext_close { background: url(../img/tag_close@1x.png) center center no-repeat; @@ -315,7 +335,7 @@ top: -1em; width: 10px; } -@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) { +@media (min-resolution: 1.1dppx) { .pkt_ext_containersaved .pkt_ext_close { background-image: url(../img/tag_close@2x.png); background-size: 8px 8px; @@ -335,20 +355,10 @@ clear: both; margin: 1.25em 1em; padding: 0; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-box; - display: -webkit-flex; display: flex; } .pkt_ext_containersaved .pkt_ext_tag_input_wrapper { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; box-sizing: border-box; - -moz-box-flex: 1; - -ms-flex: 1; - -webkit-box-flex: 1; - -webkit-flex: 1; flex: 1; background-color: #fff; border-right: 1px solid #c3c3c3; @@ -384,7 +394,6 @@ content: none; } .pkt_ext_containersaved .pkt_ext_tag_input_wrapper input { - -webkit-appearance: caret; border: 0; box-shadow: none; background-color: #fff; @@ -398,7 +407,7 @@ padding: 3px 2px 1px; text-transform: none; } -.pkt_ext_containersaved .pkt_ext_tag_input_wrapper input::-webkit-input-placeholder { +.pkt_ext_containersaved .pkt_ext_tag_input_wrapper input::-moz-placeholder { color: #a9a9a9; letter-spacing: normal; text-transform: none; @@ -408,8 +417,6 @@ opacity: 0.5; } .pkt_ext_containersaved .pkt_ext_btn { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; box-sizing: border-box; float: none; font-size: 0.875em; @@ -442,8 +449,6 @@ } .pkt_ext_container_detailactive .pkt_ext_suggestedtag_detail { opacity: 1; - -webkit-transition: opacity 0.2s ease-out, visibility 0.2s ease-out; - -o-transition: opacity 0.2s ease-out, visibility 0.2s ease-out; transition: opacity 0.2s ease-out, visibility 0.2s ease-out; visibility: visible; } @@ -523,6 +528,7 @@ } .pkt_ext_containersaved .token_tag:hover { background-color: #008acb; + border-color: #008acb; color: #fff; text-decoration: none; } @@ -530,6 +536,15 @@ .pkt_ext_containersaved .token_tag:after { content: none; } +.pkt_ext_containersaved .token_tag:hover span { + background-image: url(../img/tag_closeactive@1x.png); +} +@media (min-resolution: 1.1dppx) { + .pkt_ext_containersaved .token_tag:hover span { + background-image: url(../img/tag_closeactive@2x.png); + background-size: 8px 8px; + } +} .pkt_ext_containersaved .pkt_ext_recenttag_detail_disabled .token_tag, .pkt_ext_containersaved .pkt_ext_recenttag_detail_disabled .token_tag:hover, .pkt_ext_containersaved .pkt_ext_suggestedtag_detail_disabled .token_tag, @@ -567,10 +582,6 @@ /*=Token input/autocomplete --------------------------------------------------------------------------------------- */ .token-input-dropdown-tag { - -moz-border-radius: 4px; - -moz-box-sizing: border-box; - -webkit-border-radius: 4px; - -webkit-box-sizing: border-box; border-radius: 4px; box-sizing: border-box; background: #fff; @@ -621,11 +632,8 @@ .token-input-list li input { border: 0; background-color: white; - -webkit-appearance: caret; } .pkt_ext_containersaved .token-input-token { - -webkit-border-radius: 4px; - -moz-border-radius: 4px; background: none; border-radius: 4px; border: 1px solid #c3c3c3; @@ -676,19 +684,38 @@ width: 0; } .pkt_ext_containersaved .token-input-token span { - color: #777; + background: url(../img/tag_close@1x.png) center center no-repeat; cursor: pointer; display: inline-block; - margin: 0 0 0 10px; - vertical-align: top; + height: 8px; + margin: 0 2px 0 8px; + overflow: hidden; + width: 8px; + text-indent: -99px; +} +@media (min-resolution: 1.1dppx) { + .pkt_ext_containersaved .token-input-token span { + background-image: url(../img/tag_close@2x.png); + background-size: 8px 8px; + } } .pkt_ext_containersaved .token-input-selected-token { background-color: #008acb; + border-color: #008acb; color: #fff; } +.pkt_ext_containersaved .token-input-selected-token span { + background-image: url(../img/tag_closeactive@1x.png); +} +@media (min-resolution: 1.1dppx) { + .pkt_ext_containersaved .token-input-selected-token span { + background-image: url(../img/tag_closeactive@2x.png); + background-size: 8px 8px; + } +} .pkt_ext_containersaved .pkt_ext_tag_input_wrapper_disabled .token-input-selected-token { background-color: #f7f7f7; } .pkt_ext_containersaved .pkt_ext_tag_input_wrapper_disabled .token-input-selected-token span { color: #bbb; -} \ No newline at end of file +} diff --git a/browser/components/pocket/panels/css/signup.css b/browser/components/pocket/panels/css/signup.css index ee8c7d9382ec..fa5b8264cc07 100644 --- a/browser/components/pocket/panels/css/signup.css +++ b/browser/components/pocket/panels/css/signup.css @@ -6,6 +6,7 @@ * Contents: * Global * Core detail + * Core detail - storyboard * Buttons * Responsive */ @@ -24,8 +25,6 @@ text-align: center; } .pkt_ext_containersignup_inactive { - -moz-animation: pkt_ext_hide 0.3s ease-out; - -webkit-animation: pkt_ext_hide 0.3s ease-out; animation: pkt_ext_hide 0.3s ease-out; opacity: 0; visibility: hidden; @@ -35,20 +34,6 @@ display:table; clear:both; } -@-webkit-keyframes pkt_ext_hide { - 0% { - opacity: 1; - visibility: visible; - } - 99% { - opacity: 0; - visibility: visible; - } - 100% { - opacity: 0; - visibility: hidden; - } -} @keyframes pkt_ext_hide { 0% { opacity: 1; @@ -72,57 +57,48 @@ font-family: "FiraSans", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.3; margin: 0 auto 1.5em; - max-width: 250px; + max-width: 260px; } .pkt_ext_containersignup a { color: #4c8fd0; - text-decoration: none; } .pkt_ext_containersignup a:hover { color: #3076b9; } -.pkt_ext_containersignup .pkt_ext_introrecommend { - background-color: #f4f4f4; - color: #333; - font-size: 12px; - font-weight: normal; - margin: 0; - padding: 1em 0.5em; -} .pkt_ext_containersignup .pkt_ext_introdetail { background-color: #fbfbfb; border: 1px solid #c1c1c1; - border-width: 1px 0; + border-width: 0 0 1px; } .pkt_ext_containersignup .pkt_ext_logo { background: url(../img/pocketlogo@1x.png) center bottom no-repeat; display: block; - height: 38px; + height: 32px; margin: 0 auto 15px; padding-top: 25px; position: relative; text-indent: -9999px; - width: 147px; + width: 123px; } -@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) { +@media (min-resolution: 1.1dppx) { .pkt_ext_containersignup .pkt_ext_logo { background-image: url(../img/pocketlogo@2x.png); - background-size: 147px 38px; + background-size: 123px 32px; } } .pkt_ext_containersignup .pkt_ext_introimg { - background: url(../img/pocketmultidevices@1x.png) center center no-repeat; + background: url(../img/pocketsignup_hero@1x.png) center center no-repeat; display: block; - height: 122px; - margin: 10px auto 20px; + height: 125px; + margin: 0 auto; position: relative; text-indent: -9999px; - width: 171px; + width: 255px; } -@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) { +@media (min-resolution: 1.1dppx) { .pkt_ext_containersignup .pkt_ext_introimg { - background-image: url(../img/pocketmultidevices@2x.png); - background-size: 171px 122px; + background-image: url(../img/pocketsignup_hero@2x.png); + background-size: 255px 125px; } } .pkt_ext_containersignup .pkt_ext_tagline { @@ -162,6 +138,72 @@ margin-top: 15px; } +/*=Core detail - storyboard +--------------------------------------------------------------------------------------- */ +.pkt_ext_introstory { + align-items: center; + display: flex; + padding: 20px; +} +.pkt_ext_introstory:after { + clear: both; + content: ""; + display: table; +} +.pkt_ext_introstory p { + margin-bottom: 0; + text-align: left; +} +.pkt_ext_introstoryone { + padding: 20px 18px 15px 20px; +} +.pkt_ext_introstorytwo { + padding: 3px 0 0 20px; +} +.pkt_ext_introstorytwo .pkt_ext_tagline { + margin-bottom: 1.5em; +} +.pkt_ext_introstory_text { + flex: 1; +} +.pkt_ext_introstoryone_img, +.pkt_ext_introstorytwo_img { + display: block; + overflow: hidden; + position: relative; + text-indent: -999px; +} +.pkt_ext_introstoryone_img { + background: url(../img/pocketsignup_button@1x.png) center right no-repeat; + height: 82px; + padding: 0 0 0 0.7em; + width: 82px; +} +@media (min-resolution: 1.1dppx) { + .pkt_ext_introstoryone_img { + background-image: url(../img/pocketsignup_button@2x.png); + background-size: 82px 82px; + } +} +.pkt_ext_introstorytwo_img { + background: url(../img/pocketsignup_devices@1x.png) bottom right no-repeat; + height: 110px; + padding: 1em 0 0 0.7em; + width: 124px; +} +@media (min-resolution: 1.1dppx) { + .pkt_ext_introstorytwo_img { + background-image: url(../img/pocketsignup_devices@2x.png); + background-size: 124px 110px; + } +} +.pkt_ext_introstorydivider { + border-top: 1px solid #c1c1c1; + height: 1px; + margin: 0 auto; + width: 125px; +} + /*=Buttons --------------------------------------------------------------------------------------- */ .pkt_ext_containersignup .btn { @@ -218,8 +260,6 @@ .pkt_ext_containersignup .signupinterim-btn-signup, .pkt_ext_containersignup .forgot-btn-submit, .pkt_ext_containersignup .forgotreset-btn-change { - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; min-width: 12.125em; padding: 0.8em 1.1875em; box-sizing: content-box; @@ -242,7 +282,7 @@ width: 22px; position: absolute; } -@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) { +@media (min-resolution: 1.1dppx) { .pkt_ext_containersignup .signup-btn-firefox .logo { background-image: url(../img/signup_firefoxlogo@2x.png); background-size: 22px 22px; @@ -264,4 +304,4 @@ .pkt_ext_containersignup .btn-disabled .text { color: #ccc; color: rgba(255,255,255,0.6); -} \ No newline at end of file +} diff --git a/browser/components/pocket/panels/img/pocketlogo@1x.png b/browser/components/pocket/panels/img/pocketlogo@1x.png index 4cb953ae1ad3..62b3db310afa 100644 Binary files a/browser/components/pocket/panels/img/pocketlogo@1x.png and b/browser/components/pocket/panels/img/pocketlogo@1x.png differ diff --git a/browser/components/pocket/panels/img/pocketlogo@2x.png b/browser/components/pocket/panels/img/pocketlogo@2x.png index 20150b0c5423..b0e80bff3fcd 100644 Binary files a/browser/components/pocket/panels/img/pocketlogo@2x.png and b/browser/components/pocket/panels/img/pocketlogo@2x.png differ diff --git a/browser/components/pocket/panels/img/pocketmultidevices@1x.png b/browser/components/pocket/panels/img/pocketmultidevices@1x.png deleted file mode 100644 index afbaf1b6fa60..000000000000 Binary files a/browser/components/pocket/panels/img/pocketmultidevices@1x.png and /dev/null differ diff --git a/browser/components/pocket/panels/img/pocketmultidevices@2x.png b/browser/components/pocket/panels/img/pocketmultidevices@2x.png deleted file mode 100644 index 6ce9216d38d0..000000000000 Binary files a/browser/components/pocket/panels/img/pocketmultidevices@2x.png and /dev/null differ diff --git a/browser/components/pocket/panels/img/pocketsignup_button@1x.png b/browser/components/pocket/panels/img/pocketsignup_button@1x.png new file mode 100644 index 000000000000..12326fae3862 Binary files /dev/null and b/browser/components/pocket/panels/img/pocketsignup_button@1x.png differ diff --git a/browser/components/pocket/panels/img/pocketsignup_button@2x.png b/browser/components/pocket/panels/img/pocketsignup_button@2x.png new file mode 100644 index 000000000000..5bdebc5e9fbb Binary files /dev/null and b/browser/components/pocket/panels/img/pocketsignup_button@2x.png differ diff --git a/browser/components/pocket/panels/img/pocketsignup_devices@1x.png b/browser/components/pocket/panels/img/pocketsignup_devices@1x.png new file mode 100644 index 000000000000..df178a8e4dbf Binary files /dev/null and b/browser/components/pocket/panels/img/pocketsignup_devices@1x.png differ diff --git a/browser/components/pocket/panels/img/pocketsignup_devices@2x.png b/browser/components/pocket/panels/img/pocketsignup_devices@2x.png new file mode 100644 index 000000000000..370c6fa16fcc Binary files /dev/null and b/browser/components/pocket/panels/img/pocketsignup_devices@2x.png differ diff --git a/browser/components/pocket/panels/img/pocketsignup_hero@1x.png b/browser/components/pocket/panels/img/pocketsignup_hero@1x.png new file mode 100644 index 000000000000..6e3a43786cec Binary files /dev/null and b/browser/components/pocket/panels/img/pocketsignup_hero@1x.png differ diff --git a/browser/components/pocket/panels/img/pocketsignup_hero@2x.png b/browser/components/pocket/panels/img/pocketsignup_hero@2x.png new file mode 100644 index 000000000000..8a1c00e45422 Binary files /dev/null and b/browser/components/pocket/panels/img/pocketsignup_hero@2x.png differ diff --git a/browser/components/pocket/panels/img/tag_close@1x.png b/browser/components/pocket/panels/img/tag_close@1x.png index 061c5e45f86c..2dd02ba020d1 100644 Binary files a/browser/components/pocket/panels/img/tag_close@1x.png and b/browser/components/pocket/panels/img/tag_close@1x.png differ diff --git a/browser/components/pocket/panels/img/tag_close@2x.png b/browser/components/pocket/panels/img/tag_close@2x.png index d855c2f92580..8bd0eec571bf 100644 Binary files a/browser/components/pocket/panels/img/tag_close@2x.png and b/browser/components/pocket/panels/img/tag_close@2x.png differ diff --git a/browser/components/pocket/panels/img/tag_closeactive@1x.png b/browser/components/pocket/panels/img/tag_closeactive@1x.png new file mode 100644 index 000000000000..ad4239232352 Binary files /dev/null and b/browser/components/pocket/panels/img/tag_closeactive@1x.png differ diff --git a/browser/components/pocket/panels/img/tag_closeactive@2x.png b/browser/components/pocket/panels/img/tag_closeactive@2x.png new file mode 100644 index 000000000000..80c35e3aae2c Binary files /dev/null and b/browser/components/pocket/panels/img/tag_closeactive@2x.png differ diff --git a/browser/components/pocket/panels/js/dictionary.js b/browser/components/pocket/panels/js/dictionary.js index 88a31abe14aa..47c893ea7cf0 100644 --- a/browser/components/pocket/panels/js/dictionary.js +++ b/browser/components/pocket/panels/js/dictionary.js @@ -2,21 +2,26 @@ Translations = {}; Translations.en = { addtags: "Add Tags", - alreadyhaveacct: "Already have an account?", + alreadyhaveacct: "Already a Pocket user?", learnmore: "Learn More", loginnow: "Log in", + onlylinkssaved: "Only links can be saved", or: "or", + pagenotsaved: "Page Not Saved", pageremoved: "Page Removed", pagesaved: "Saved to Pocket", processingremove: "Removing Page...", processingtags: "Adding tags...", removepage: "Remove Page", save: "Save", - signupemail: "Sign Up with email", - signuptosave: "Sign up to start saving, it’s totally free.", + signupemail: "Sign up with email", + signuptosave: "Sign up for Pocket. It’s free.", suggestedtags: "Suggested Tags", - tagline: "Save links from Firefox to view in Pocket on any device, anytime.", + tagline: "Save articles and videos from Firefox to view in Pocket on any device, any time.", + taglinestory_one: "Click the Pocket Button to save any article, video or page from Firefox.", + taglinestory_two: "View in Pocket on any device, any time.", tagssaved: "Tags Added", - signupfirefox: "Sign Up with Firefox", + signinfirefox: "Sign in with Firefox", + signupfirefox: "Sign up with Firefox", viewlist: "View List" } \ No newline at end of file diff --git a/browser/components/pocket/panels/js/saved.js b/browser/components/pocket/panels/js/saved.js index 51e8422f96e2..ec278be156f9 100644 --- a/browser/components/pocket/panels/js/saved.js +++ b/browser/components/pocket/panels/js/saved.js @@ -18,7 +18,7 @@ var PKT_SAVED_OVERLAY = function (options) this.dictJSON = {}; // TODO: allow the timer to be editable? this.autocloseTiming = 3500; - this.autocloseTimingFinalState = 1500; + this.autocloseTimingFinalState = 2000; this.mouseInside = false; this.userTags = []; this.cxt_suggested_available = 0; @@ -44,10 +44,8 @@ var PKT_SAVED_OVERLAY = function (options) } }; this.fillUserTags = function() { - console.log('start of logic for fillUserTags'); thePKT_SAVED.sendMessage("getTags",{},function(resp) { - console.log('got a big tag response',resp); if (typeof resp == 'object' && typeof resp.tags == 'object') { myself.userTags = resp.tags; @@ -62,14 +60,12 @@ var PKT_SAVED_OVERLAY = function (options) myself.startCloseTimer(); return; } - console.log('calling suggested tags',myself.savedUrl); thePKT_SAVED.sendMessage("getSuggestedTags", { url: myself.savedUrl || window.location.toString() }, function(resp) { $('.pkt_ext_suggestedtag_detail').removeClass('pkt_ext_suggestedtag_detail_loading'); - console.log('got suggested tags response',resp); if (resp.status == 'success') { var newtags = []; @@ -220,7 +216,6 @@ var PKT_SAVED_OVERLAY = function (options) } }, onReady: function() { - console.log('got to autoinput ready'); $('.token-input-dropdown').addClass('token-input-dropdown-tag'); inputwrapper.find('.token-input-input-token input').attr('placeholder',$('.tag-input').attr('placeholder')).css('width','200px'); if ($('.pkt_ext_suggestedtag_detail').length) { @@ -242,7 +237,7 @@ var PKT_SAVED_OVERLAY = function (options) } }).on('keypress','input',function(e) { if (e.which == 13) { - if (Date.now() - changestamp > 250) { + if (typeof changestamp == 'undefined' || (Date.now() - changestamp > 250)) { e.preventDefault(); myself.wrapper.find('.pkt_ext_btn').trigger('click'); } @@ -316,14 +311,12 @@ var PKT_SAVED_OVERLAY = function (options) originaltags.push(text); } }); - console.log('submitting addtags message'); thePKT_SAVED.sendMessage("addTags", { url: myself.savedUrl || window.location.toString(), tags: originaltags }, function(resp) { - console.log('got a response',resp); if (resp.status == 'success') { myself.showStateFinalMsg(myself.dictJSON.tagssaved); @@ -345,12 +338,10 @@ var PKT_SAVED_OVERLAY = function (options) e.preventDefault(); myself.disableInput(); $('.pkt_ext_containersaved').find('.pkt_ext_detail h2').text(myself.dictJSON.processingremove); - console.log('processing page removal',myself.savedItemId); thePKT_SAVED.sendMessage("deleteItem", { itemId: myself.savedItemId },function(resp) { - console.log('got a removal message',resp); if (resp.status == 'success') { myself.showStateFinalMsg(myself.dictJSON.pageremoved); } @@ -365,7 +356,6 @@ var PKT_SAVED_OVERLAY = function (options) $('.pkt_ext_openpocket').click(function(e) { e.preventDefault(); - console.log('sending new tab messsage',$(this).attr('href')); thePKT_SAVED.sendMessage("openTabWithUrl", { url: $(this).attr('href'), @@ -406,7 +396,6 @@ var PKT_SAVED_OVERLAY = function (options) }); }; this.showStateSaved = function(initobj) { - console.log('start of saved state',initobj); 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') @@ -449,10 +438,17 @@ var PKT_SAVED_OVERLAY = function (options) $(this).off('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd'); myself.preventCloseTimerCancel = true; myself.startCloseTimer(myself.autocloseTimingFinalState); + myself.wrapper.find('.pkt_ext_detail h2').text(msg); }); this.wrapper.addClass('pkt_ext_container_finalstate'); - this.wrapper.find('.pkt_ext_detail h2').text(msg); }; + this.showStateError = function(headline,detail) { + this.wrapper.find('.pkt_ext_detail h2').text(headline); + this.wrapper.find('.pkt_ext_detail h3').text(detail); + this.wrapper.addClass('pkt_ext_container_detailactive pkt_ext_container_finalstate pkt_ext_container_finalerrorstate'); + this.preventCloseTimerCancel = true; + this.startCloseTimer(myself.autocloseTimingFinalState); + } this.getTranslations = function() { var language = window.navigator.language.toLowerCase(); @@ -540,7 +536,6 @@ var PKT_SAVED_OVERLAY = function (options) PKT_SAVED_OVERLAY.prototype = { create : function() { - console.log('creating overlay',this.active); if (this.active) { return; @@ -550,6 +545,9 @@ PKT_SAVED_OVERLAY.prototype = { // set translations this.getTranslations(); + // set host + this.dictJSON.pockethost = this.pockethost; + // Create actual content $('body').append(Handlebars.templates.saved_shell(this.dictJSON)); @@ -568,7 +566,6 @@ PKT_SAVED_OVERLAY.prototype = { { if (this.premiumStatus && !$('.pkt_ext_suggestedtag_detail').length) { - console.log('make premium'); $('body').append(Handlebars.templates.saved_premiumshell(this.dictJSON)); } } @@ -598,11 +595,16 @@ PKT_SAVED.prototype = { create: function() { var myself = this; - var url = window.location.href.split('premiumStatus='); - if (url.length > 1) + var url = window.location.href.match(/premiumStatus=([\w|\d|\.]*)&?/); + if (url && url.length > 1) { myself.overlay.premiumStatus = (url[1] == '1'); } + var host = window.location.href.match(/pockethost=([\w|\.]*)&?/); + if (host && host.length > 1) + { + myself.overlay.pockethost = host[1]; + } myself.overlay.create(); // tell back end we're ready @@ -611,10 +613,14 @@ PKT_SAVED.prototype = { // wait confirmation of save before flipping to final saved state thePKT_SAVED.addMessageListener("saveLink",function(resp) { - console.log('sweet, switch to full mode because of registered hit',resp); + if (resp.status == 'error') { + myself.overlay.showStateError(myself.overlay.dictJSON.pagenotsaved,myself.overlay.dictJSON.onlylinkssaved); + return; + } + myself.overlay.showStateSaved(resp); }); - + } } diff --git a/browser/components/pocket/panels/js/signup.js b/browser/components/pocket/panels/js/signup.js index 194ecfa7c86c..97449daefe65 100644 --- a/browser/components/pocket/panels/js/signup.js +++ b/browser/components/pocket/panels/js/signup.js @@ -19,12 +19,14 @@ var PKT_SIGNUP_OVERLAY = function (options) this.closeValid = true; this.mouseInside = false; this.autocloseTimer = null; + this.variant = ""; + this.pockethost = "getpocket.com"; + this.fxasignedin = false; this.dictJSON = {}; this.initCloseTabEvents = function() { - $('.btn,.alreadyhave > a').click(function(e) + $('.btn,.pkt_ext_learnmore,.alreadyhave > a').click(function(e) { e.preventDefault(); - console.log('sending new tab messsage',$(this).attr('href')); thePKT_SIGNUP.sendMessage("openTabWithUrl", { url: $(this).attr('href'), @@ -144,6 +146,22 @@ PKT_SIGNUP_OVERLAY.prototype = { { var myself = this; + var variant = window.location.href.match(/variant=([\w|\.]*)&?/); + if (variant && variant.length > 1) + { + this.variant = variant[1]; + } + var fxasignedin = window.location.href.match(/fxasignedin=([\w|\d|\.]*)&?/); + if (fxasignedin && fxasignedin.length > 1) + { + this.fxasignedin = (fxasignedin[1] == '1'); + } + var host = window.location.href.match(/pockethost=([\w|\.]*)&?/); + if (host && host.length > 1) + { + this.pockethost = host[1]; + } + if (this.active) { return; @@ -151,10 +169,20 @@ PKT_SIGNUP_OVERLAY.prototype = { this.active = true; // set translations - myself.getTranslations(); + this.getTranslations(); + this.dictJSON.fxasignedin = this.fxasignedin ? 1 : 0; + this.dictJSON.variant = (this.variant ? this.variant : 'undefined'); + this.dictJSON.pockethost = this.pockethost; // Create actual content - $('body').append(Handlebars.templates.signup_shell(this.dictJSON)); + if (this.variant == 'storyboard') + { + $('body').append(Handlebars.templates.signupstoryboard_shell(this.dictJSON)); + } + else + { + $('body').append(Handlebars.templates.signup_shell(this.dictJSON)); + } // tell background we're ready thePKT_SIGNUP.sendMessage("show"); diff --git a/browser/components/pocket/panels/js/tmpl.js b/browser/components/pocket/panels/js/tmpl.js index 6da738933416..01288476400c 100644 --- a/browser/components/pocket/panels/js/tmpl.js +++ b/browser/components/pocket/panels/js/tmpl.js @@ -10,9 +10,11 @@ templates['saved_shell'] = template({"compiler":[6,">= 2.0.0-beta.1"],"main":fun var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression; return "
\n
\n
\n
\n
\n
\n

" + 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))) - + "

\n
\n

\n
\n
\n
\n = 2.0.0-beta.1"],"main":fun + 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))) + "\n
\n
"; },"useData":true}); -templates['signup_shell'] = template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) { +templates['signup_shell'] = template({"1":function(depth0,helpers,partials,data) { var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression; - return "

Recommended by Firefox

\n
\n

Pocket

\n
\n

" - + 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))) - + "

\n

" - + 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))) - + "

\n
\n
\n

" - + 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))) - + "

\n

" + return "

" + + 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))) + + "

\n"; +},"3":function(depth0,helpers,partials,data) { + var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression; + return "

" + 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))) - + " " - + escapeExpression(((helper = (helper = helpers.help || (depth0 != null ? depth0.help : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"help","hash":{},"data":data}) : helper))) - + "

\n

" + + "

\n

" + 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))) - + "

\n

" + + "

\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 = "
\n

Pocket

\n

" + + 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))) + + "

\n

" + + 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))) + + "

\n
\n
\n
\n

" + + 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))) + + "

\n"; + stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.fxasignedin : depth0), {"name":"if","hash":{},"fn":this.program(1, data),"inverse":this.program(3, data),"data":data}); + if (stack1 != null) { buffer += stack1; } + return buffer + "

" + 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))) - + " " + + " " + + 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))) + + ".

\n
"; +},"useData":true}); +templates['signupstoryboard_shell'] = template({"1":function(depth0,helpers,partials,data) { + var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression; + return "

" + + 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))) + + "

\n"; +},"3":function(depth0,helpers,partials,data) { + var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression; + return "

" + + 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))) + + "

\n

" + + 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))) + + "

\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 = "
\n
\n
\n

" + + 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))) + + "

\n
\n
\n
\n
\n
\n
\n

" + + 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))) + + "

\n

" + + 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))) + + "

\n
\n
\n
\n
\n
\n

" + + 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))) + + "

\n"; + stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.fxasignedin : depth0), {"name":"if","hash":{},"fn":this.program(1, data),"inverse":this.program(3, data),"data":data}); + if (stack1 != null) { buffer += stack1; } + return buffer + "

" + + 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))) + + " " + 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))) + ".

\n
"; },"useData":true}); diff --git a/browser/components/pocket/panels/LICENSE b/browser/components/pocket/panels/license.txt similarity index 93% rename from browser/components/pocket/panels/LICENSE rename to browser/components/pocket/panels/license.txt index c122b8fd7b45..7f3f806bab56 100644 --- a/browser/components/pocket/panels/LICENSE +++ b/browser/components/pocket/panels/license.txt @@ -9,7 +9,7 @@ to the license set forth below, "Pocket," "Read It Later" and the Pocket icon and logos (collectively, the “Pocket Marks”) are registered and common law trademarks of Read It Later, Inc. This means that, while you have considerable freedom to redistribute and modify the Software, there are tight restrictions -on your ability to use the Pocket Marks. This license does not grant you any +on your ability to use the Pocket Marks. This license does not grant you any rights to use the Pocket Marks except as they are embodied in the Software. --- diff --git a/browser/components/pocket/panels/tmpl/saved_shell.handlebars b/browser/components/pocket/panels/tmpl/saved_shell.handlebars index af1cd04c45a6..ff943dd363fe 100644 --- a/browser/components/pocket/panels/tmpl/saved_shell.handlebars +++ b/browser/components/pocket/panels/tmpl/saved_shell.handlebars @@ -5,11 +5,12 @@ diff --git a/browser/components/pocket/panels/tmpl/signup_shell.handlebars b/browser/components/pocket/panels/tmpl/signup_shell.handlebars index 8b9d361cd418..300f1e2b620a 100644 --- a/browser/components/pocket/panels/tmpl/signup_shell.handlebars +++ b/browser/components/pocket/panels/tmpl/signup_shell.handlebars @@ -1,13 +1,16 @@ -

Recommended by Firefox

-

{{tagline}}

-

{{learnmore}}

+

{{learnmore}}

+

{{signuptosave}}

-

{{help}}

-

-

{{alreadyhaveacct}} {{loginnow}}.

+ {{#if fxasignedin}} +

+ {{else}} +

+

+ {{/if}} +

{{alreadyhaveacct}} {{loginnow}}.

\ No newline at end of file diff --git a/browser/components/pocket/panels/tmpl/signupstoryboard_shell.handlebars b/browser/components/pocket/panels/tmpl/signupstoryboard_shell.handlebars new file mode 100644 index 000000000000..0b2457bccdbb --- /dev/null +++ b/browser/components/pocket/panels/tmpl/signupstoryboard_shell.handlebars @@ -0,0 +1,26 @@ +
+
+
+

{{taglinestory_one}}

+
+
+
+
+
+
+

{{taglinestory_two}}

+

{{learnmore}}

+
+
+
+
+
+

{{signuptosave}}

+ {{#if fxasignedin}} +

+ {{else}} +

+

+ {{/if}} +

{{alreadyhaveacct}} {{loginnow}}.

+
\ No newline at end of file diff --git a/browser/components/pocket/pktApi.js b/browser/components/pocket/pktApi.js index a2bed9e5fb58..325e7429c455 100644 --- a/browser/components/pocket/pktApi.js +++ b/browser/components/pocket/pktApi.js @@ -50,7 +50,8 @@ var pktApi = (function() { // Base url for all api calls // TODO: This is a dev server and will be changed before launch - var pocketAPIhost = Services.prefs.getCharPref("browser.pocket.hostname"); + var pocketAPIhost = Services.prefs.getCharPref("browser.pocket.api"); + var pocketSiteHost = Services.prefs.getCharPref("browser.pocket.site"); // Base url for all api calls var baseAPIUrl = "https://" + pocketAPIhost + "/v3"; @@ -139,7 +140,7 @@ var pktApi = (function() { function getCookiesFromPocket() { var cookieManager = Cc["@mozilla.org/cookiemanager;1"].getService(Ci.nsICookieManager2); - var pocketCookies = cookieManager.getCookiesFromHost(pocketAPIhost); + var pocketCookies = cookieManager.getCookiesFromHost(pocketSiteHost); var cookies = {}; while (pocketCookies.hasMoreElements()) { var cookie = pocketCookies.getNext().QueryInterface(Ci.nsICookie2); @@ -225,6 +226,12 @@ var pktApi = (function() { // TODO: Better error handling if (options.error) { + // In case the user did revoke the access token or it's not + // valid anymore clear the user data + if (request.status === 401) { + clearUserData(); + } + // Check to handle Pocket error var errorMessage = request.getResponseHeader("X-Error"); if (typeof errorMessage !== "undefined") { @@ -238,9 +245,6 @@ var pktApi = (function() { } }; - // TODO - do we want to pass a special user agent? - //request.setRequestHeader("User-Agent" , 'Pocket Firefox ' + this.APP.v); - // Set headers request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); request.setRequestHeader('X-Accept',' application/json'); @@ -268,6 +272,7 @@ var pktApi = (function() { setSetting("tags", undefined); setSetting("usedTags", undefined); + setSetting("fsv1", undefined); } /** @@ -321,8 +326,6 @@ var pktApi = (function() { }, error: options.error }); - - return sendAction(action, options); } /** @@ -444,7 +447,7 @@ var pktApi = (function() { var tagToSave = tags[i].trim(); var newUsedTagObject = { "tag": tagToSave, - "timestamp": new Date() + "timestamp": new Date().getTime() }; usedTags[tagToSave] = newUsedTagObject; } @@ -488,9 +491,9 @@ var pktApi = (function() { } // Sort usedTagsObjectArray based on timestamp - usedTagsObjectArray.sort(function(a, b) { - a = new Date(a.timestamp); - b = new Date(b.timestamp); + usedTagsObjectArray.sort(function(usedTagA, usedTagB) { + var a = usedTagA.timestamp; + var b = usedTagB.timestamp; return a < b ? -1 : a > b ? 1 : 0; }); @@ -563,6 +566,26 @@ var pktApi = (function() { }); } + /** + * Helper function to get current signup AB group the user is in + */ + function getSignupAB() { + if (!getSetting('signupAB')) + { + var rand = (Math.floor(Math.random()*2+1)); + if (rand == 2) + { + setSetting('signupAB','storyboard'); + } + else + { + setSetting('signupAB','hero'); + } + + } + return getSetting('signupAB'); + } + /** * Public functions */ @@ -576,6 +599,7 @@ var pktApi = (function() { getTags: getTags, isPremiumUser: isPremiumUser, getSuggestedTagsForItem: getSuggestedTagsForItem, - getSuggestedTagsForURL: getSuggestedTagsForURL + getSuggestedTagsForURL: getSuggestedTagsForURL, + getSignupAB: getSignupAB }; -}()); \ No newline at end of file +}());