From 67a7ee7ede7196e8fcb64933abe48aa716e971dc Mon Sep 17 00:00:00 2001 From: Scott Date: Thu, 24 Mar 2022 15:36:26 +0000 Subject: [PATCH] Bug 1746014 - Pocket button refresh, saved panel. r=gvn,flod Differential Revision: https://phabricator.services.mozilla.com/D138962 --- .../pocket/content/panels/css/global.scss | 16 ++ .../content/panels/css/main.compiled.css | 38 +++ .../pocket/content/panels/css/main.scss | 1 + .../js/components/ArticleList/ArticleList.jsx | 75 ++++-- .../components/ArticleList/ArticleList.scss | 12 + .../panels/js/components/Button/Button.jsx | 1 + .../panels/js/components/Home/Home.jsx | 19 +- .../panels/js/components/Saved/Saved.jsx | 158 +++++++++++- .../panels/js/components/Saved/Saved.scss | 11 + .../pocket/content/panels/js/main.bundle.js | 242 ++++++++++++++---- .../pocket/content/panels/js/saved/overlay.js | 16 +- browser/components/pocket/content/pktUI.js | 8 + browser/locales/en-US/browser/aboutPocket.ftl | 8 +- 13 files changed, 506 insertions(+), 99 deletions(-) create mode 100644 browser/components/pocket/content/panels/js/components/Saved/Saved.scss diff --git a/browser/components/pocket/content/panels/css/global.scss b/browser/components/pocket/content/panels/css/global.scss index 27e64768f3cf..de6feea2a980 100644 --- a/browser/components/pocket/content/panels/css/global.scss +++ b/browser/components/pocket/content/panels/css/global.scss @@ -33,6 +33,22 @@ hr { line-height: 1.23em; } +.header_small { + margin: 12px 0 8px; + font-size: 0.84em; + line-height: 1.07em; +} + +.header_flex { + display: flex; + align-items: center; + justify-content: space-between; +} + +.header_center { + text-align: center; +} + p { margin: 8px 0; font-size: 0.84em; diff --git a/browser/components/pocket/content/panels/css/main.compiled.css b/browser/components/pocket/content/panels/css/main.compiled.css index 1b00a2983610..9a2767bc1258 100644 --- a/browser/components/pocket/content/panels/css/main.compiled.css +++ b/browser/components/pocket/content/panels/css/main.compiled.css @@ -417,6 +417,22 @@ hr { line-height: 1.23em; } +.header_small { + margin: 12px 0 8px; + font-size: 0.84em; + line-height: 1.07em; +} + +.header_flex { + display: flex; + align-items: center; + justify-content: space-between; +} + +.header_center { + text-align: center; +} + p { margin: 8px 0; font-size: 0.84em; @@ -2070,6 +2086,7 @@ body.theme_dark .stp_popular_topics .stp_popular_topic .stp_popular_topic_link { padding: 0; list-style: none; } +.stp_article_list .stp_article_list_saved_article, .stp_article_list .stp_article_list_link { display: flex; border-radius: 4px; @@ -2091,6 +2108,10 @@ body.theme_dark .stp_article_list .stp_article_list_link:hover { margin-inline-end: 8px; background-color: #ECECEE; } +.stp_article_list .stp_article_list_thumb:-moz-broken, +.stp_article_list .stp_article_list_thumb_placeholder:-moz-broken { + display: none; +} .stp_article_list .stp_article_list_header { font-style: normal; font-weight: 600; @@ -2098,6 +2119,11 @@ body.theme_dark .stp_article_list .stp_article_list_link:hover { line-height: 1.27em; color: #15141A; margin: 0 0 4px; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + display: -webkit-box; + overflow: hidden; + word-break: break-word; } body.theme_dark .stp_article_list .stp_article_list_header { color: #FBFBFE; @@ -2219,4 +2245,16 @@ body.stp_signup_body { margin-inline-start: 16px; } +.stp_panel_error { + margin: 23px 0 32px; +} +.stp_panel_error .stp_panel_error_icon { + float: inline-start; + margin-block: 6px 16px; + margin-inline: 7px 17px; + background-image: url(../img/pocketerror@1x.png); + height: 44px; + width: 44px; +} + /*# sourceMappingURL=main.compiled.css.map */ diff --git a/browser/components/pocket/content/panels/css/main.scss b/browser/components/pocket/content/panels/css/main.scss index c4a8896985dd..7a3111210a71 100644 --- a/browser/components/pocket/content/panels/css/main.scss +++ b/browser/components/pocket/content/panels/css/main.scss @@ -14,3 +14,4 @@ @import "../js/components/Header/Header"; @import "../js/components/Button/Button"; @import "../js/components/Signup/Signup"; +@import "../js/components/Saved/Saved"; diff --git a/browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.jsx b/browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.jsx index 4c984eb42ba8..00cdbaf9f405 100644 --- a/browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.jsx +++ b/browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.jsx @@ -4,29 +4,66 @@ import React from "react"; +function ArticleUrl(props) { + // We turn off the link if we're either a saved article, or if the url doesn't exist. + if (props.savedArticle || !props.url) { + return ( +
{props.children}
+ ); + } + return ( + + {props.children} + + ); +} + +function Article(props) { + function encodeThumbnail(rawSource) { + return rawSource + ? `https://img-getpocket.cdn.mozilla.net/80x80/filters:format(jpeg):quality(60):no_upscale():strip_exif()/${encodeURIComponent( + rawSource + )}` + : null; + } + + const { article } = props; + const url = article.url || article.resolved_url; + // Using array notation because there is a key titled `1` (`images` is an object) + const thumbnail = + article.thumbnail || + encodeThumbnail(article?.top_image_url || article?.images?.["1"]?.src); + const alt = article.alt || "thumbnail image"; + const title = article.title || article.resolved_title; + // Sometimes domain_metadata is not there, depending on the source. + const publisher = + article.publisher || + article.domain_metadata?.name || + article.resolved_domain; + return ( +
  • + + <> + {thumbnail ? ( + {alt} + ) : ( +
    + )} +
    +
    {title}
    +

    {publisher}

    +
    + + +
    • + ); +} + function ArticleList(props) { return ( ); diff --git a/browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.scss b/browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.scss index b4c660f50603..30086366ded8 100644 --- a/browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.scss +++ b/browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.scss @@ -2,11 +2,14 @@ padding: 0; list-style: none; + .stp_article_list_saved_article, .stp_article_list_link { display: flex; border-radius: 4px; padding: 8px; + } + .stp_article_list_link { &:hover { text-decoration: none; background-color: #ECECEE; @@ -24,6 +27,9 @@ border-radius: 4px; margin-inline-end: 8px; background-color: #ECECEE; + &:-moz-broken { + display: none; + } } .stp_article_list_header { @@ -34,6 +40,12 @@ color: #15141A; margin: 0 0 4px; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + display: -webkit-box; + overflow: hidden; + word-break: break-word; + @include theme_dark { color: #FBFBFE; } diff --git a/browser/components/pocket/content/panels/js/components/Button/Button.jsx b/browser/components/pocket/content/panels/js/components/Button/Button.jsx index 80cf4ddb5fb3..48fbb9e8ff41 100644 --- a/browser/components/pocket/content/panels/js/components/Button/Button.jsx +++ b/browser/components/pocket/content/panels/js/components/Button/Button.jsx @@ -8,6 +8,7 @@ function Button(props) { return ( {props.children} diff --git a/browser/components/pocket/content/panels/js/components/Home/Home.jsx b/browser/components/pocket/content/panels/js/components/Home/Home.jsx index 1ef8082e3b02..e30102e9f31f 100644 --- a/browser/components/pocket/content/panels/js/components/Home/Home.jsx +++ b/browser/components/pocket/content/panels/js/components/Home/Home.jsx @@ -9,14 +9,6 @@ import PopularTopics from "../PopularTopics/PopularTopics"; import Button from "../Button/Button"; import panelMessaging from "../../messages"; -function encodeThumbnail(rawSource) { - return rawSource - ? `https://img-getpocket.cdn.mozilla.net/80x80/filters:format(jpeg):quality(60):no_upscale():strip_exif()/${encodeURIComponent( - rawSource - )}` - : null; -} - function Home(props) { const { locale, topics, pockethost, hideRecentSaves } = props; const [{ articles, status }, setArticlesState] = useState({ @@ -52,16 +44,7 @@ function Home(props) { } setArticlesState({ - articles: data.map(item => ({ - url: item.resolved_url, - // Using array notation because there is a key titled `1` (`images` is an object) - thumbnail: encodeThumbnail( - item?.top_image_url || item?.images?.["1"]?.src - ), - alt: "thumbnail image", - title: item.resolved_title, - publisher: item.domain_metadata?.name, - })), + articles: data, status: "success", }); }); diff --git a/browser/components/pocket/content/panels/js/components/Saved/Saved.jsx b/browser/components/pocket/content/panels/js/components/Saved/Saved.jsx index 222477015b66..1c9b0c410c3b 100644 --- a/browser/components/pocket/content/panels/js/components/Saved/Saved.jsx +++ b/browser/components/pocket/content/panels/js/components/Saved/Saved.jsx @@ -2,31 +2,165 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this file, * You can obtain one at http://mozilla.org/MPL/2.0/. */ -import React from "react"; +import React, { useState, useEffect } from "react"; import Header from "../Header/Header"; +import Button from "../Button/Button"; import ArticleList from "../ArticleList/ArticleList"; +import panelMessaging from "../../messages"; function Saved(props) { - const { similarRecs, savedStory } = props; + const { locale } = props; + // savedStatus can be success, loading, or error. + const [ + { savedStatus, savedErrorId, itemId }, + setSavedStatusState, + ] = useState({ savedStatus: "loading" }); + // removedStatus can be removed, removing, or error. + const [ + { removedStatus, removedErrorMessage }, + setRemovedStatusState, + ] = useState({}); + const [savedStory, setSavedStoryState] = useState(); + const [similarRecs, setSimilarRecsState] = useState(); + + function removeItem(event) { + event.preventDefault(); + setRemovedStatusState({ removedStatus: "removing" }); + panelMessaging.sendMessage( + "PKT_deleteItem", + { + itemId, + }, + function(resp) { + const { data } = resp; + if (data.status == "success") { + setRemovedStatusState({ removedStatus: "removed" }); + } else if (data.status == "error") { + let errorMessage = ""; + // The server returns English error messages, so in the case of + // non English, we do our best with a generic translated error. + if (data.error.message && locale?.startsWith("en")) { + errorMessage = data.error.message; + } + setRemovedStatusState({ + removedStatus: "error", + removedErrorMessage: errorMessage, + }); + } + } + ); + } + + useEffect(() => { + // Wait confirmation of save before flipping to final saved state + panelMessaging.addMessageListener("PKT_saveLink", function(resp) { + const { data } = resp; + if (data.status == "error") { + // Use localizedKey or fallback to a generic catch all error. + setSavedStatusState({ + savedStatus: "error", + savedErrorId: + data?.error?.localizedKey || "pocket-panel-saved-error-generic", + }); + return; + } + + // Success, so no localized error id needed. + setSavedStatusState({ + savedStatus: "success", + itemId: data.item.item_id, + savedErrorId: "", + }); + }); + + panelMessaging.addMessageListener("PKT_renderSavedStory", function(resp) { + setSavedStoryState(resp?.data?.item_preview); + }); + + panelMessaging.addMessageListener("PKT_renderItemRecs", function(resp) { + const { data } = resp; + setSimilarRecsState(data?.recommendations?.map(rec => rec.item)); + }); + + // tell back end we're ready + panelMessaging.sendMessage("PKT_show_saved"); + }, []); + + if (savedStatus === "error") { + return ( +
    +
    +
    +

    +

    +

    +
    + ); + } + return (
    -
    +
    - +
    - {savedStory && ( + {!removedStatus && savedStatus === "success" && ( <> -

    - - - +

    + + +

    + {savedStory && ( + + )} +

    + {similarRecs?.length && locale?.startsWith("en") && ( + <> +
    +

    Similar Stories

    + + + )} + + )} + {savedStatus === "loading" && ( +

    + )} + {removedStatus === "removing" && ( +

    + )} + {removedStatus === "removed" && ( +

    + )} + {removedStatus === "error" && ( + <> +

    + {removedErrorMessage &&

    {removedErrorMessage}

    } )} -
    - {similarRecs?.length && }

    ); diff --git a/browser/components/pocket/content/panels/js/components/Saved/Saved.scss b/browser/components/pocket/content/panels/js/components/Saved/Saved.scss new file mode 100644 index 000000000000..ae90f176e6cc --- /dev/null +++ b/browser/components/pocket/content/panels/js/components/Saved/Saved.scss @@ -0,0 +1,11 @@ +.stp_panel_error { + margin: 23px 0 32px; + .stp_panel_error_icon { + float: inline-start; + margin-block: 6px 16px; + margin-inline: 7px 17px; + background-image: url(../img/pocketerror@1x.png); + height: 44px; + width: 44px; + } +} diff --git a/browser/components/pocket/content/panels/js/main.bundle.js b/browser/components/pocket/content/panels/js/main.bundle.js index 6805c3ba08a9..f541bc46a1bb 100644 --- a/browser/components/pocket/content/panels/js/main.bundle.js +++ b/browser/components/pocket/content/panels/js/main.bundle.js @@ -55,27 +55,62 @@ function Header(props) { * You can obtain one at http://mozilla.org/MPL/2.0/. */ -function ArticleList(props) { - return /*#__PURE__*/react.createElement("ul", { - className: "stp_article_list" - }, props.articles?.map(article => /*#__PURE__*/react.createElement("li", { - className: "stp_article_list_item" - }, /*#__PURE__*/react.createElement("a", { +function ArticleUrl(props) { + // We turn off the link if we're either a saved article, or if the url doesn't exist. + if (props.savedArticle || !props.url) { + return /*#__PURE__*/react.createElement("div", { + className: "stp_article_list_saved_article" + }, props.children); + } + + return /*#__PURE__*/react.createElement("a", { className: "stp_article_list_link", - href: article.url - }, article.thumbnail ? /*#__PURE__*/react.createElement("img", { + href: props.url + }, props.children); +} + +function Article(props) { + function encodeThumbnail(rawSource) { + return rawSource ? `https://img-getpocket.cdn.mozilla.net/80x80/filters:format(jpeg):quality(60):no_upscale():strip_exif()/${encodeURIComponent(rawSource)}` : null; + } + + const { + article + } = props; + const url = article.url || article.resolved_url; // Using array notation because there is a key titled `1` (`images` is an object) + + const thumbnail = article.thumbnail || encodeThumbnail(article?.top_image_url || article?.images?.["1"]?.src); + const alt = article.alt || "thumbnail image"; + const title = article.title || article.resolved_title; // Sometimes domain_metadata is not there, depending on the source. + + const publisher = article.publisher || article.domain_metadata?.name || article.resolved_domain; + return /*#__PURE__*/react.createElement("li", { + className: "stp_article_list_item" + }, /*#__PURE__*/react.createElement(ArticleUrl, { + url: url, + savedArticle: props.savedArticle + }, /*#__PURE__*/react.createElement(react.Fragment, null, thumbnail ? /*#__PURE__*/react.createElement("img", { className: "stp_article_list_thumb", - src: article.thumbnail, - alt: article.alt + src: thumbnail, + alt: alt }) : /*#__PURE__*/react.createElement("div", { className: "stp_article_list_thumb_placeholder" }), /*#__PURE__*/react.createElement("div", { className: "stp_article_list_meta" }, /*#__PURE__*/react.createElement("header", { className: "stp_article_list_header" - }, article.title), /*#__PURE__*/react.createElement("p", { + }, title), /*#__PURE__*/react.createElement("p", { className: "stp_article_list_publisher" - }, article.publisher)))))); + }, publisher))))); +} + +function ArticleList(props) { + return /*#__PURE__*/react.createElement("ul", { + className: "stp_article_list" + }, props.articles?.map(article => /*#__PURE__*/react.createElement(Article, { + article: article, + savedArticle: props.savedArticle + }))); } /* harmony default export */ const ArticleList_ArticleList = (ArticleList); @@ -107,6 +142,7 @@ function PopularTopics(props) { function Button(props) { return /*#__PURE__*/react.createElement("a", { href: props.url, + onClick: props.onClick, className: `stp_button${props?.style && ` stp_button_${props.style}`}` }, props.children); } @@ -177,10 +213,6 @@ var pktPanelMessaging = { -function encodeThumbnail(rawSource) { - return rawSource ? `https://img-getpocket.cdn.mozilla.net/80x80/filters:format(jpeg):quality(60):no_upscale():strip_exif()/${encodeURIComponent(rawSource)}` : null; -} - function Home(props) { const { locale, @@ -220,14 +252,7 @@ function Home(props) { } setArticlesState({ - articles: data.map(item => ({ - url: item.resolved_url, - // Using array notation because there is a key titled `1` (`images` is an object) - thumbnail: encodeThumbnail(item?.top_image_url || item?.images?.["1"]?.src), - alt: "thumbnail image", - title: item.resolved_title, - publisher: item.domain_metadata?.name - })), + articles: data, status: "success" }); }); @@ -580,28 +605,152 @@ var SignupOverlay = function (options) { + + function Saved(props) { const { - similarRecs, - savedStory - } = props; + locale + } = props; // savedStatus can be success, loading, or error. + + const [{ + savedStatus, + savedErrorId, + itemId + }, setSavedStatusState] = (0,react.useState)({ + savedStatus: "loading" + }); // removedStatus can be removed, removing, or error. + + const [{ + removedStatus, + removedErrorMessage + }, setRemovedStatusState] = (0,react.useState)({}); + const [savedStory, setSavedStoryState] = (0,react.useState)(); + const [similarRecs, setSimilarRecsState] = (0,react.useState)(); + + function removeItem(event) { + event.preventDefault(); + setRemovedStatusState({ + removedStatus: "removing" + }); + messages.sendMessage("PKT_deleteItem", { + itemId + }, function (resp) { + const { + data + } = resp; + + if (data.status == "success") { + setRemovedStatusState({ + removedStatus: "removed" + }); + } else if (data.status == "error") { + let errorMessage = ""; // The server returns English error messages, so in the case of + // non English, we do our best with a generic translated error. + + if (data.error.message && locale?.startsWith("en")) { + errorMessage = data.error.message; + } + + setRemovedStatusState({ + removedStatus: "error", + removedErrorMessage: errorMessage + }); + } + }); + } + + (0,react.useEffect)(() => { + // Wait confirmation of save before flipping to final saved state + messages.addMessageListener("PKT_saveLink", function (resp) { + const { + data + } = resp; + + if (data.status == "error") { + // Use localizedKey or fallback to a generic catch all error. + setSavedStatusState({ + savedStatus: "error", + savedErrorId: data?.error?.localizedKey || "pocket-panel-saved-error-generic" + }); + return; + } // Success, so no localized error id needed. + + + setSavedStatusState({ + savedStatus: "success", + itemId: data.item.item_id, + savedErrorId: "" + }); + }); + messages.addMessageListener("PKT_renderSavedStory", function (resp) { + setSavedStoryState(resp?.data?.item_preview); + }); + messages.addMessageListener("PKT_renderItemRecs", function (resp) { + const { + data + } = resp; + setSimilarRecsState(data?.recommendations?.map(rec => rec.item)); + }); // tell back end we're ready + + messages.sendMessage("PKT_show_saved"); + }, []); + + if (savedStatus === "error") { + return /*#__PURE__*/react.createElement("div", { + className: "stp_panel_container" + }, /*#__PURE__*/react.createElement("div", { + className: "stp_panel stp_panel_error" + }, /*#__PURE__*/react.createElement("div", { + className: "stp_panel_error_icon" + }), /*#__PURE__*/react.createElement("h3", { + className: "header_large", + "data-l10n-id": "pocket-panel-saved-error-not-saved" + }), /*#__PURE__*/react.createElement("p", { + "data-l10n-id": savedErrorId + }))); + } + return /*#__PURE__*/react.createElement("div", { className: "stp_panel_container" }, /*#__PURE__*/react.createElement("div", { - className: "stp_panel stp_panel_home" - }, /*#__PURE__*/react.createElement(Header_Header, null, /*#__PURE__*/react.createElement("a", null, /*#__PURE__*/react.createElement("span", { + className: "stp_panel stp_panel_saved" + }, /*#__PURE__*/react.createElement(Header_Header, null, /*#__PURE__*/react.createElement(Button_Button, { + style: "primary" + }, /*#__PURE__*/react.createElement("span", { "data-l10n-id": "pocket-panel-header-my-list" - }))), /*#__PURE__*/react.createElement("hr", null), savedStory && /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("p", { - "data-l10n-id": "pocket-panel-saved-page-saved" - }), /*#__PURE__*/react.createElement(ArticleList_ArticleList, { - articles: [savedStory] - }), /*#__PURE__*/react.createElement("span", { - "data-l10n-id": "pocket-panel-button-add-tags" - }), /*#__PURE__*/react.createElement("span", { - "data-l10n-id": "pocket-panel-saved-remove-page" - })), /*#__PURE__*/react.createElement("hr", null), similarRecs?.length && /*#__PURE__*/react.createElement(ArticleList_ArticleList, { + }))), /*#__PURE__*/react.createElement("hr", null), !removedStatus && savedStatus === "success" && /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("h3", { + className: "header_large header_flex" + }, /*#__PURE__*/react.createElement("span", { + "data-l10n-id": "pocket-panel-saved-page-saved-b" + }), /*#__PURE__*/react.createElement(Button_Button, { + style: "text", + url: "google.com", + onClick: removeItem + }, /*#__PURE__*/react.createElement("span", { + "data-l10n-id": "pocket-panel-button-remove" + }))), savedStory && /*#__PURE__*/react.createElement(ArticleList_ArticleList, { + articles: [savedStory], + savedArticle: true + }), /*#__PURE__*/react.createElement("h3", { + className: "header_small", + "data-l10n-id": "pocket-panel-cta-add-tags" + }), similarRecs?.length && locale?.startsWith("en") && /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("hr", null), /*#__PURE__*/react.createElement("h3", { + className: "header_medium" + }, "Similar Stories"), /*#__PURE__*/react.createElement(ArticleList_ArticleList, { articles: similarRecs - }))); + }))), savedStatus === "loading" && /*#__PURE__*/react.createElement("h3", { + className: "header_large", + "data-l10n-id": "pocket-panel-saved-saving-tags" + }), removedStatus === "removing" && /*#__PURE__*/react.createElement("h3", { + className: "header_large header_center", + "data-l10n-id": "pocket-panel-saved-processing-remove" + }), removedStatus === "removed" && /*#__PURE__*/react.createElement("h3", { + className: "header_large header_center", + "data-l10n-id": "pocket-panel-saved-removed" + }), removedStatus === "error" && /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("h3", { + className: "header_large", + "data-l10n-id": "pocket-panel-saved-error-remove" + }), removedErrorMessage && /*#__PURE__*/react.createElement("p", null, removedErrorMessage)))); } /* harmony default export */ const Saved_Saved = (Saved); @@ -1129,10 +1278,14 @@ SavedOverlay.prototype = { const layoutRefresh = searchParams.get(`layoutRefresh`) === `true`; if (layoutRefresh) { - // Create actual content + // For now, we need to do a little work on the body element + // to support both old and new versions. + document.querySelector(`.pkt_ext_containersaved`)?.classList.add(`stp_saved_body`); + document.querySelector(`.pkt_ext_containersaved`)?.classList.remove(`pkt_ext_containersaved`); // Create actual content + react_dom.render( /*#__PURE__*/react.createElement(Saved_Saved, { pockethost: pockethost, - savedStory: {} + locale: locale }), document.querySelector(`body`)); } else { // set host @@ -1183,11 +1336,10 @@ SavedOverlay.prototype = { data } = resp; myself.renderItemRecs(data); - }); - } // tell back end we're ready + }); // tell back end we're ready - - messages.sendMessage("PKT_show_saved"); + messages.sendMessage("PKT_show_saved"); + } } }; diff --git a/browser/components/pocket/content/panels/js/saved/overlay.js b/browser/components/pocket/content/panels/js/saved/overlay.js index d70c0c40500b..3423f8dbdcab 100644 --- a/browser/components/pocket/content/panels/js/saved/overlay.js +++ b/browser/components/pocket/content/panels/js/saved/overlay.js @@ -667,9 +667,17 @@ SavedOverlay.prototype = { const layoutRefresh = searchParams.get(`layoutRefresh`) === `true`; if (layoutRefresh) { + // For now, we need to do a little work on the body element + // to support both old and new versions. + document + .querySelector(`.pkt_ext_containersaved`) + ?.classList.add(`stp_saved_body`); + document + .querySelector(`.pkt_ext_containersaved`) + ?.classList.remove(`pkt_ext_containersaved`); // Create actual content ReactDOM.render( - , + , document.querySelector(`body`) ); } else { @@ -748,10 +756,10 @@ SavedOverlay.prototype = { const { data } = resp; myself.renderItemRecs(data); }); - } - // tell back end we're ready - pktPanelMessaging.sendMessage("PKT_show_saved"); + // tell back end we're ready + pktPanelMessaging.sendMessage("PKT_show_saved"); + } }, }; diff --git a/browser/components/pocket/content/pktUI.js b/browser/components/pocket/content/pktUI.js index 9cad0fc243d2..89b40d24a031 100644 --- a/browser/components/pocket/content/pktUI.js +++ b/browser/components/pocket/content/pktUI.js @@ -367,6 +367,14 @@ var pktUI = (function() { pktUIMessaging.sendMessageToPanel(saveLinkMessageId, successResponse); SaveToPocket.itemSaved(); + if (item?.resolved_id && item?.resolved_id !== "0") { + pktApi.getArticleInfo(item.resolved_url, { + success(data) { + pktUIMessaging.sendMessageToPanel("PKT_renderSavedStory", data); + }, + }); + } + getAndShowRecsForItem(item, { success(data) { pktUIMessaging.sendMessageToPanel("PKT_renderItemRecs", data); diff --git a/browser/locales/en-US/browser/aboutPocket.ftl b/browser/locales/en-US/browser/aboutPocket.ftl index ff509c089f93..fa8a3b3c946c 100644 --- a/browser/locales/en-US/browser/aboutPocket.ftl +++ b/browser/locales/en-US/browser/aboutPocket.ftl @@ -15,9 +15,12 @@ pocket-panel-saved-error-tag-length = Tags are limited to 25 characters pocket-panel-saved-error-only-links = Only links can be saved pocket-panel-saved-error-not-saved = Page Not Saved pocket-panel-saved-error-no-internet = You must be connected to the Internet in order to save to { -pocket-brand-name }. Please connect to the Internet and try again. +pocket-panel-saved-error-remove = There was an error while trying to remove this page. pocket-panel-saved-page-removed = Page Removed pocket-panel-saved-page-saved = Saved to { -pocket-brand-name } +pocket-panel-saved-page-saved-b = Saved to { -pocket-brand-name }! pocket-panel-saved-processing-remove = Removing Page… +pocket-panel-saved-removed = Page Removed from My List pocket-panel-saved-processing-tags = Adding tags… pocket-panel-saved-remove-page = Remove Page pocket-panel-saved-save-tags = Save @@ -26,6 +29,9 @@ pocket-panel-saved-suggested-tags = Suggested Tags pocket-panel-saved-tags-saved = Tags Added pocket-panel-signup-view-list = View List +# This is displayed above a field where the user can add tags +pocket-panel-signup-add-tags = Add Tags: + ## about:pocket-signup panel pocket-panel-signup-already-have = Already a { -pocket-brand-name } user? @@ -65,5 +71,5 @@ pocket-panel-header-sign-in = Sign In ## Pocket panel buttons pocket-panel-button-show-all = Show All -pocket-panel-button-add-tags = Add Tags pocket-panel-button-activate = Activate { -pocket-brand-name } in { -brand-product-name } +pocket-panel-button-remove = Remove