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 "
" - + 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 \n"
+ return " \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"; +},"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 = "" + + 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 \n \n" + 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" + + 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" + + 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 \n" + + 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{{alreadyhaveacct}} {{loginnow}}.
+ {{#if fxasignedin}} + + {{else}} + + + {{/if}} +{{alreadyhaveacct}} {{loginnow}}.
{{taglinestory_one}}
+{{taglinestory_two}}
+ +{{alreadyhaveacct}} {{loginnow}}.
+