diff options
Diffstat (limited to '')
76 files changed, 10204 insertions, 0 deletions
diff --git a/browser/components/pocket/content/Pocket.jsm b/browser/components/pocket/content/Pocket.jsm new file mode 100644 index 0000000000..3747afdba2 --- /dev/null +++ b/browser/components/pocket/content/Pocket.jsm @@ -0,0 +1,74 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * 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/. */ + +"use strict"; + +var EXPORTED_SYMBOLS = ["Pocket"]; + +const lazy = {}; + +ChromeUtils.defineModuleGetter( + lazy, + "BrowserUIUtils", + "resource:///modules/BrowserUIUtils.jsm" +); +ChromeUtils.defineModuleGetter( + lazy, + "CustomizableUI", + "resource:///modules/CustomizableUI.jsm" +); + +var Pocket = { + get site() { + return Services.prefs.getCharPref("extensions.pocket.site"); + }, + get listURL() { + return "https://" + Pocket.site + "/firefox_learnmore?src=ff_library"; + }, + + _initPanelView(window) { + let document = window.document; + + let libraryButton = document.getElementById("library-button"); + if (libraryButton) { + lazy.BrowserUIUtils.setToolbarButtonHeightProperty(libraryButton); + } + + let urlToSave = Pocket._urlToSave; + let titleToSave = Pocket._titleToSave; + Pocket._urlToSave = null; + Pocket._titleToSave = null; + // ViewShowing fires immediately before it creates the contents, + // in lieu of an AfterViewShowing event, just spin the event loop. + window.setTimeout(function() { + if (urlToSave) { + window.pktUI.tryToSaveUrl(urlToSave, titleToSave); + } else { + window.pktUI.tryToSaveCurrentPage(); + } + }, 0); + }, + + _urlToSave: null, + _titleToSave: null, + savePage(browser, url, title) { + // We want to target the top browser which has the Pocket panel UI, + // which might not be the browser saving the article. + const ownerGlobal = browser?.ownerGlobal?.top; + const ownerDocument = ownerGlobal?.document; + + if (!ownerDocument || !ownerGlobal?.PanelUI) { + return; + } + + let widget = lazy.CustomizableUI.getWidget("save-to-pocket-button"); + let anchorNode = widget.areaType + ? widget.forWindow(ownerGlobal).anchor + : ownerDocument.getElementById("PanelUI-menu-button"); + + this._urlToSave = url; + this._titleToSave = title; + ownerGlobal.PanelUI.showSubView("PanelUI-savetopocket", anchorNode); + }, +}; diff --git a/browser/components/pocket/content/SaveToPocket.jsm b/browser/components/pocket/content/SaveToPocket.jsm new file mode 100644 index 0000000000..2d467cfed2 --- /dev/null +++ b/browser/components/pocket/content/SaveToPocket.jsm @@ -0,0 +1,258 @@ +/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */ +/* This Source Code Form is subject to the terms of the Mozilla Public + * 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/. */ + +"use strict"; + +const { XPCOMUtils } = ChromeUtils.importESModule( + "resource://gre/modules/XPCOMUtils.sys.mjs" +); +const lazy = {}; +ChromeUtils.defineModuleGetter( + lazy, + "Pocket", + "chrome://pocket/content/Pocket.jsm" +); +ChromeUtils.defineModuleGetter( + lazy, + "CustomizableUI", + "resource:///modules/CustomizableUI.jsm" +); +ChromeUtils.defineESModuleGetters(lazy, { + AboutReaderParent: "resource:///actors/AboutReaderParent.sys.mjs", +}); + +var EXPORTED_SYMBOLS = ["SaveToPocket"]; + +var PocketCustomizableWidget = { + init() { + lazy.CustomizableUI.createWidget({ + id: "save-to-pocket-button", + l10nId: "save-to-pocket-button", + type: "view", + viewId: "PanelUI-savetopocket", + // This closes any open Pocket panels if you change location. + locationSpecific: true, + onViewShowing(aEvent) { + let panelView = aEvent.target; + let panelNode = panelView.querySelector( + ".PanelUI-savetopocket-container" + ); + let doc = panelNode.ownerDocument; + let frame = doc.createXULElement("browser"); + + frame.setAttribute("type", "content"); + frame.setAttribute("remote", "true"); + frame.setAttribute("remoteType", "privilegedabout"); + frame.setAttribute("maychangeremoteness", "true"); + frame.setAttribute("autocompletepopup", "PopupAutoComplete"); + panelNode.appendChild(frame); + + SaveToPocket.onShownInToolbarPanel(panelNode, frame); + }, + onViewHiding(aEvent) { + let panelView = aEvent.target; + let panelNode = panelView.querySelector( + ".PanelUI-savetopocket-container" + ); + + panelNode.textContent = ""; + SaveToPocket.updateToolbarNodeState(panelNode.ownerGlobal); + }, + }); + }, + shutdown() { + lazy.CustomizableUI.destroyWidget("save-to-pocket-button"); + }, +}; + +var PocketOverlay = { + startup() { + PocketCustomizableWidget.init(); + }, + shutdown() { + PocketCustomizableWidget.shutdown(); + }, +}; + +function browserWindows() { + return Services.wm.getEnumerator("navigator:browser"); +} + +var SaveToPocket = { + init() { + // migrate enabled pref + if (Services.prefs.prefHasUserValue("browser.pocket.enabled")) { + Services.prefs.setBoolPref( + "extensions.pocket.enabled", + Services.prefs.getBoolPref("browser.pocket.enabled") + ); + Services.prefs.clearUserPref("browser.pocket.enabled"); + } + // Only define the pref getter now, so we don't get notified for the + // migrated pref above. + XPCOMUtils.defineLazyPreferenceGetter( + this, + "prefEnabled", + "extensions.pocket.enabled", + true, + this.onPrefChange.bind(this) + ); + if (this.prefEnabled) { + PocketOverlay.startup(); + } else { + // We avoid calling onPrefChange or similar here, because we don't want to + // shut down things that haven't started up, or broadcast unnecessary messages. + this.updateElements(false); + Services.obs.addObserver(this, "browser-delayed-startup-finished"); + } + lazy.AboutReaderParent.addMessageListener("Reader:OnSetup", this); + lazy.AboutReaderParent.addMessageListener( + "Reader:Clicked-pocket-button", + this + ); + }, + + observe(subject, topic, data) { + if (topic == "browser-delayed-startup-finished") { + // We only get here if pocket is disabled; the observer is removed when + // we're enabled. + this.updateElementsInWindow(subject, false); + } + }, + + _readerButtonData: { + id: "pocket-button", + l10nId: "about-reader-toolbar-savetopocket", + telemetryId: "save-to-pocket", + image: "chrome://global/skin/icons/pocket.svg", + }, + + onPrefChange(pref, oldValue, newValue) { + if (!newValue) { + lazy.AboutReaderParent.broadcastAsyncMessage("Reader:RemoveButton", { + id: "pocket-button", + }); + PocketOverlay.shutdown(); + Services.obs.addObserver(this, "browser-delayed-startup-finished"); + } else { + lazy.AboutReaderParent.broadcastAsyncMessage( + "Reader:AddButton", + this._readerButtonData + ); + Services.obs.removeObserver(this, "browser-delayed-startup-finished"); + PocketOverlay.startup(); + } + this.updateElements(newValue); + }, + + // Sets or removes the "pocketed" attribute on the Pocket urlbar button as + // necessary. + updateToolbarNodeState(browserWindow) { + const toolbarNode = browserWindow.document.getElementById( + "save-to-pocket-button" + ); + if (!toolbarNode || toolbarNode.hidden) { + return; + } + + let browser = browserWindow.gBrowser.selectedBrowser; + + let pocketedInnerWindowID = this.innerWindowIDsByBrowser.get(browser); + if (pocketedInnerWindowID == browser.innerWindowID) { + // The current window in this browser is pocketed. + toolbarNode.setAttribute("pocketed", "true"); + } else { + // The window isn't pocketed. + toolbarNode.removeAttribute("pocketed"); + } + }, + + // For pocketed inner windows, this maps their <browser>s to those inner + // window IDs. If a browser's inner window changes, then the mapped ID will + // be out of date, meaning that the new inner window has not been pocketed. + // If a browser goes away, then it'll be gone from this map too since it's + // weak. To tell whether a window has been pocketed then, look up its browser + // in this map and compare the mapped inner window ID to the ID of the current + // inner window. + get innerWindowIDsByBrowser() { + delete this.innerWindowIDsByBrowser; + return (this.innerWindowIDsByBrowser = new WeakMap()); + }, + + onLocationChange(browserWindow) { + this.updateToolbarNodeState(browserWindow); + }, + + /** + * Functions related to the Pocket panel UI. + */ + onShownInToolbarPanel(panel, frame) { + let window = panel.ownerGlobal; + window.pktUI.setToolbarPanelFrame(frame); + lazy.Pocket._initPanelView(window); + }, + + // If an item is saved to Pocket, we cache the browser's inner window ID, + // so if you navigate to that tab again, we can check the ID + // and see if we need to update the toolbar icon. + itemSaved() { + const browserWindow = Services.wm.getMostRecentWindow("navigator:browser"); + const browser = browserWindow.gBrowser.selectedBrowser; + SaveToPocket.innerWindowIDsByBrowser.set(browser, browser.innerWindowID); + }, + + // If an item is removed from Pocket, we remove that browser's inner window ID, + // so if you navigate to that tab again, we can check the ID + // and see if we need to update the toolbar icon. + itemDeleted() { + const browserWindow = Services.wm.getMostRecentWindow("navigator:browser"); + const browser = browserWindow.gBrowser.selectedBrowser; + SaveToPocket.innerWindowIDsByBrowser.delete(browser); + }, + + updateElements(enabled) { + // loop through windows and show/hide all our elements. + for (let win of browserWindows()) { + this.updateElementsInWindow(win, enabled); + } + }, + + updateElementsInWindow(win, enabled) { + if (enabled) { + win.document.documentElement.removeAttribute("pocketdisabled"); + } else { + win.document.documentElement.setAttribute("pocketdisabled", "true"); + } + }, + + receiveMessage(message) { + if (!this.prefEnabled) { + return; + } + switch (message.name) { + case "Reader:OnSetup": { + // Tell the reader about our button. + message.target.sendMessageToActor( + "Reader:AddButton", + this._readerButtonData, + "AboutReader" + ); + break; + } + case "Reader:Clicked-pocket-button": { + let pocketPanel = message.target.ownerDocument.querySelector( + "#customizationui-widget-panel" + ); + if (pocketPanel?.getAttribute("panelopen")) { + pocketPanel.hidePopup(); + } else { + // Saves the currently viewed page. + lazy.Pocket.savePage(message.target); + } + break; + } + } + }, +}; diff --git a/browser/components/pocket/content/panels/css/global.scss b/browser/components/pocket/content/panels/css/global.scss new file mode 100644 index 0000000000..b1f2cb0776 --- /dev/null +++ b/browser/components/pocket/content/panels/css/global.scss @@ -0,0 +1,67 @@ +// Mixins + +@mixin theme_dark { + @at-root body.theme_dark & { + @content; + } +} + +html { + font: menu; +} + +body { + &.theme_dark { + background: #42414c; + color: #FBFBFE; + } +} + +hr { + margin: 12px -8px; + background-color: #F0F0F4; + height: 1px; + border: none; + + @include theme_dark { + background-color: #52525E; + } +} + +.header_large { + margin: 12px 0 8px; + font-size: 1.25rem; + line-height: 1.65rem; + + .stp_button { + margin: 0; + } +} + +.header_medium { + margin: 12px 0 8px; + font-size: 1.1rem; + line-height: 1.35rem; +} + +.header_small { + margin: 12px 0 8px; + font-size: 0.95rem; + line-height: 1.16rem; +} + +.header_flex { + display: flex; + align-items: center; + justify-content: space-between; +} + +.header_center { + text-align: center; +} + +p { + margin: 8px 0; + font-size: 0.95rem; + line-height: 1.16rem; +} diff --git a/browser/components/pocket/content/panels/css/home.scss b/browser/components/pocket/content/panels/css/home.scss new file mode 100644 index 0000000000..9780963fee --- /dev/null +++ b/browser/components/pocket/content/panels/css/home.scss @@ -0,0 +1,115 @@ +.pkt_ext_containerhome, +.pkt_ext_wrapperhome { + overflow: hidden; +} + +.pkt_ext_home { + line-height: 20px; + color: #363636; + + a { + color: #008078; + text-decoration: none; + } + + a, p { + font-size: 0.9em; + } + + .pkt_ext_hr { + height: 1px; + background: linear-gradient(90deg, #83EDB8 0%, #83EDB8 0%, #83EDB8 0.01%, #1CB0A8 33.15%, #EF4056 67.4%, #FCB643 100%); + } + + .pkt_ext_detail { + margin: 18px 20px; + } + + .pkt_ext_header { + display: flex; + justify-content: space-between; + align-items: center; + .pkt_ext_mylist_icon { + background: url(../img/list-view.svg) no-repeat; + background-size: contain; + height: 1.2em; + width: 1.2em; + margin-inline-end: 8px; + } + a { + height: 36px; + display: flex; + align-items: center; + box-sizing: border-box; + padding: 0 8px; + margin: 12px; + border-radius: 4px; + &:hover { + background: #F5F5F5; + } + } + .pkt_ext_logo { + background: url(../img/pocketlogo.svg) bottom right no-repeat; + background-size: contain; + height: 32px; + width: 123px; + margin: 0 20px; + } + } + .pkt_ext_detail { + a { + display: block; + } + h2 { + font-weight: 600; + font-size: 1em; + } + h2, + p { + margin: 8px 0; + } + h3 { + font-weight: 600; + font-size: 1em; + margin: 12px 0; + } + .pkt_ext_more { + margin: 19px 0; + .pkt_ext_chevron_right { + background: url(../img/chevron-right.svg) no-repeat; + background-size: contain; + height: 1.2em; + width: 1.2em; + } + ul { + list-style-type: none; + padding: 0; + line-height: 14px; + li { + a { + height: 44px; + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + box-sizing: border-box; + border-bottom: 1px solid #EAEAEA; + } + } + } + } + .pkt_ext_discover { + line-height: 12px; + margin: 20px 0; + height: 40px; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + border-radius: 4px; + &:hover { + background: #F5F5F5; + } + } + } +} diff --git a/browser/components/pocket/content/panels/css/main.compiled.css b/browser/components/pocket/content/panels/css/main.compiled.css new file mode 100644 index 0000000000..db6554282e --- /dev/null +++ b/browser/components/pocket/content/panels/css/main.compiled.css @@ -0,0 +1,2413 @@ +/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ +html { + font-family: sans-serif; /* 1 */ +} + +/** + * Remove default margin. + */ +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; +} + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ +audio, +canvas, +progress, +video { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + */ +[hidden], +template { + display: none; +} + +/* Links + ========================================================================== */ +/** + * Remove the gray background color from active links in IE 10. + */ +a { + background-color: transparent; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ +a:active, +a:hover { + outline: 0; +} + +/* Text-level semantics + ========================================================================== */ +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari and Chrome. + */ +dfn { + font-style: italic; +} + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9. + */ +mark { + background: #ff0; + color: #000; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* Embedded content + ========================================================================== */ +/** + * Remove border when inside `a` element in IE 8/9/10. + */ +img { + border: 0; +} + +/** + * Correct overflow not hidden in IE 9/10/11. + */ +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ +/** + * Address margin not present in IE 8/9 and Safari. + */ +figure { + margin: 1em 40px; +} + +/** + * Address differences between Firefox and other browsers. + */ +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Contain overflow in all browsers. + */ +pre { + overflow: auto; +} + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Forms + ========================================================================== */ +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ +button, +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ +button { + overflow: visible; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ +button, +html input[type=button], +input[type=reset], +input[type=submit] { + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ +input { + line-height: normal; +} + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ +input[type=checkbox], +input[type=radio] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome + * (include `-moz` to future-proof). + */ +input[type=search] { + box-sizing: content-box; +} + +/** + * Define consistent border, margin, and padding. + */ +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ +textarea { + overflow: auto; +} + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ +optgroup { + font-weight: bold; +} + +/* Tables + ========================================================================== */ +/** + * Remove most spacing between table cells. + */ +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} + +/* Normalization for FF panel defauts + ========================================================================== */ +html { + outline: none; + padding: 0; +} + +a { + color: #0095dd; + margin: 0; + outline: none; + padding: 0; + text-decoration: none; +} + +a:hover, +a:active, +a:focus { + color: #008acb; + text-decoration: underline; +} + +a:active { + color: #006b9d; +} + +html { + font: menu; +} + +body.theme_dark { + background: #42414c; + color: #FBFBFE; +} + +hr { + margin: 12px -8px; + background-color: #F0F0F4; + height: 1px; + border: none; +} +body.theme_dark hr { + background-color: #52525E; +} + +.header_large { + margin: 12px 0 8px; + font-size: 1.25rem; + line-height: 1.65rem; +} +.header_large .stp_button { + margin: 0; +} + +.header_medium { + margin: 12px 0 8px; + font-size: 1.1rem; + line-height: 1.35rem; +} + +.header_small { + margin: 12px 0 8px; + font-size: 0.95rem; + line-height: 1.16rem; +} + +.header_flex { + display: flex; + align-items: center; + justify-content: space-between; +} + +.header_center { + text-align: center; +} + +p { + margin: 8px 0; + font-size: 0.95rem; + line-height: 1.16rem; +} + +.stp_panel_container { + overflow: hidden; +} + +.stp_panel { + padding: 0 16px; + margin: 16px 0 12px; +} + +/* saved.css + * + * Description: + * With base elements out of the way, this sets all custom styling for the page saved dialog. + * + * Contents: + * Global + * Loading spinner + * Core detail + * Tag entry + * Recent/suggested tags + * Premium upsell + * Token input/autocomplete + * Overflow mode + * Language overrides + */ +/*=Global +--------------------------------------------------------------------------------------- */ +.pkt_ext_containersaved { + background-color: #fbfbfb; + border-radius: 4px; + display: block; + padding: 0; + position: relative; + text-align: center; + overflow: hidden; +} + +.pkt_ext_cf:after { + content: " "; + display: table; + clear: both; +} + +.pkt_ext_containersaved .pkt_ext_tag_detail, +.pkt_ext_containersaved .pkt_ext_recenttag_detail, +.pkt_ext_containersaved .pkt_ext_suggestedtag_detail { + margin: 0 auto; + padding: 0.25em 1em; + position: relative; + width: auto; +} + +/*=Loading spinner +--------------------------------------------------------------------------------------- */ +@keyframes pkt_ext_spin { + to { + transform: rotate(1turn); + } +} +.pkt_ext_containersaved .pkt_ext_loadingspinner { + position: relative; + display: inline-block; + height: 2.5em; + inset-inline-start: 50%; + margin-block: 2em 0; + margin-inline: -1.25em 0; + font-size: 10px; + text-indent: 999em; + position: absolute; + top: 4em; + overflow: hidden; + width: 2.5em; + animation: pkt_ext_spin 0.7s infinite steps(8); +} + +.pkt_ext_containersaved .pkt_ext_loadingspinner:before, +.pkt_ext_containersaved .pkt_ext_loadingspinner:after, +.pkt_ext_containersaved .pkt_ext_loadingspinner > div:before, +.pkt_ext_containersaved .pkt_ext_loadingspinner > div:after { + content: ""; + position: absolute; + top: 0; + inset-inline-start: 1.125em; + width: 0.25em; + height: 0.75em; + border-radius: 0.2em; + background: #eee; + box-shadow: 0 1.75em #eee; + transform-origin: 50% 1.25em; +} + +.pkt_ext_containersaved .pkt_ext_loadingspinner:before { + background: #555; +} + +.pkt_ext_containersaved .pkt_ext_loadingspinner:after { + transform: rotate(-45deg); + background: #777; +} + +.pkt_ext_containersaved .pkt_ext_loadingspinner > div:before { + transform: rotate(-90deg); + background: #999; +} + +.pkt_ext_containersaved .pkt_ext_loadingspinner > div:after { + transform: rotate(-135deg); + background: #bbb; +} + +/*=Core detail +--------------------------------------------------------------------------------------- */ +.pkt_ext_containersaved .pkt_ext_initload { + inset-inline-start: 0; + position: absolute; + top: 0; + width: 100%; +} + +.pkt_ext_containersaved .pkt_ext_detail { + opacity: 0; + position: relative; + padding-bottom: 1.25em; +} + +.pkt_ext_container_detailactive .pkt_ext_initload { + opacity: 0; +} + +.pkt_ext_container_detailactive .pkt_ext_initload .pkt_ext_loadingspinner, +.pkt_ext_container_finalstate .pkt_ext_initload .pkt_ext_loadingspinner { + animation: none; +} + +.pkt_ext_container_detailactive .pkt_ext_detail { + max-height: 20em; + opacity: 1; +} + +.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 { + 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_suggestedtag_detail, +.pkt_ext_container_finalerrorstate .pkt_ext_item_actions { + display: none; + transition: none; +} + +.pkt_ext_containersaved h2 { + background: transparent; + border: none; + color: #333; + display: block; + float: none; + font-size: 1.2em; + font-weight: normal; + letter-spacing: normal; + line-height: 1; + margin: 19px 0 4px; + padding: 0; + position: relative; + text-align: start; + text-transform: none; +} + +@keyframes fade_in_out { + 0% { + opacity: 1; + } + 50% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +.pkt_ext_container_finalstate h2 { + animation: fade_in_out 0.4s ease-out; +} + +.pkt_ext_container_finalerrorstate h2 { + animation: none; + color: #d74345; +} + +.pkt_ext_containersaved .pkt_ext_errordetail { + display: none; + font-size: 0.9em; + font-weight: normal; + inset-inline-start: 6.4em; + max-width: 21em; + opacity: 0; + position: absolute; + top: 2.7em; + text-align: start; + visibility: hidden; +} + +.pkt_ext_container_finalerrorstate { + max-height: 133px; +} + +.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; + float: inline-start; + height: 40px; + padding: 1.25em 1em; + position: relative; + width: 44px; +} + +@media (min-resolution: 1.1dppx) { + .pkt_ext_containersaved .pkt_ext_logo { + background-image: url(../img/pocketlogosolo@2x.png); + background-size: 44px 40px; + } +} +.pkt_ext_container_finalerrorstate .pkt_ext_logo { + background-image: url(../img/pocketerror@1x.png); + height: 44px; + width: 44px; +} + +@media (min-resolution: 1.1dppx) { + .pkt_ext_container_finalerrorstate .pkt_ext_logo { + background-image: url(../img/pocketerror@2x.png); + background-size: 44px 44px; + } +} +.pkt_ext_containersaved .pkt_ext_topdetail { + float: inline-start; +} + +.pkt_ext_containersaved .pkt_ext_edit_msg_container { + position: relative; +} +.pkt_ext_containersaved .pkt_ext_edit_msg_container .pkt_ext_edit_msg { + box-sizing: border-box; + display: none; + font-size: 0.75em; + inset-inline-start: auto; + padding: 0 1.4em; + position: absolute; + text-align: start; + top: 0; + width: 100%; + margin: 0; +} +.pkt_ext_containersaved .pkt_ext_edit_msg_container .pkt_ext_edit_msg.pkt_ext_edit_msg_error { + color: #d74345; +} +.pkt_ext_containersaved .pkt_ext_edit_msg_container .pkt_ext_edit_msg.pkt_ext_edit_msg_active { + display: block; +} + +.pkt_ext_containersaved .pkt_ext_item_actions { + background: transparent; + float: none; + height: auto; + margin-bottom: 1em; + margin-top: 0; + width: auto; +} + +.pkt_ext_containersaved .pkt_ext_item_actions_disabled { + opacity: 0.5; +} + +.pkt_ext_container_finalstate .pkt_ext_item_actions_disabled { + opacity: 0; +} + +.pkt_ext_containersaved .pkt_ext_item_actions ul { + background: none; + display: block; + float: none; + height: auto; + margin: 0; + padding: 0; + width: 100%; +} + +.pkt_ext_containersaved .pkt_ext_item_actions li { + box-sizing: border-box; + background: none; + border: 0; + float: inline-start; + list-style: none; + line-height: 0.8; + height: auto; + padding-inline-end: 0.4em; + width: auto; +} + +.pkt_ext_containersaved .pkt_ext_item_actions li:before { + content: none; +} + +.pkt_ext_containersaved .pkt_ext_item_actions .pkt_ext_actions_separator { + border-inline-start: 2px solid #777; + height: 1em; + margin-top: 0.3em; + padding: 0; + width: 10px; +} + +.pkt_ext_containersaved .pkt_ext_item_actions a { + background: transparent; + color: #0095dd; + display: block; + font-feature-settings: normal; + font-size: 0.9em; + font-weight: normal; + letter-spacing: normal; + line-height: inherit; + height: auto; + margin: 0; + padding: 0.5em; + float: inline-start; + text-align: start; + text-decoration: none; + text-transform: none; +} + +.pkt_ext_containersaved .pkt_ext_item_actions a:hover, +.pkt_ext_containersaved .pkt_ext_item_actions a:focus { + color: #008acb; + text-decoration: underline; +} + +.pkt_ext_containersaved .pkt_ext_item_actions a:before, +.pkt_ext_containersaved .pkt_ext_item_actions a:after { + background: transparent; + display: none; +} + +.pkt_ext_containersaved .pkt_ext_item_actions_disabled a { + cursor: default; +} + +.pkt_ext_containersaved .pkt_ext_item_actions .pkt_ext_openpocket { + float: inline-end; + padding-inline-end: 0.7em; + text-align: end; +} + +.pkt_ext_containersaved .pkt_ext_item_actions .pkt_ext_removeitem { + padding-inline-start: 0; +} + +.pkt_ext_containersaved .pkt_ext_close { + background: url(../img/tag_close@1x.png) center center no-repeat; + color: #333; + display: block; + font-size: 0.8em; + height: 10px; + inset-inline-end: 0.5em; + overflow: hidden; + position: absolute; + text-align: center; + text-indent: -9999px; + top: -1em; + width: 10px; +} + +@media (min-resolution: 1.1dppx) { + .pkt_ext_containersaved .pkt_ext_close { + background-image: url(../img/tag_close@2x.png); + background-size: 8px 8px; + } +} +.pkt_ext_containersaved .pkt_ext_close:hover { + color: #000; + text-decoration: none; +} + +/*=Tag entry +--------------------------------------------------------------------------------------- */ +.pkt_ext_containersaved .pkt_ext_tag_detail { + border: 1px solid #c1c1c1; + border-radius: 2px; + clear: both; + margin: 0 1em; + padding: 0; + display: flex; +} + +.pkt_ext_containersaved .pkt_ext_tag_error { + border: none; +} + +.pkt_ext_containersaved .pkt_ext_tag_input_wrapper { + box-sizing: border-box; + flex: 1; + background-color: #fff; + border-inline-end: 1px solid #c3c3c3; + color: #333; + display: block; + float: none; + font-size: 0.875em; + list-style: none; + margin: 0; + overflow: hidden; + padding: 0.25em 0.5em; + width: 14em; + padding-inline: 0.5em; +} + +.pkt_ext_containersaved .pkt_ext_tag_error .pkt_ext_tag_input_wrapper { + border: 1px solid #d74345; +} + +.pkt_ext_containersaved .pkt_ext_tag_input_wrapper .token-input-list { + display: block; + height: 1.7em; + overflow: hidden; + position: relative; + width: 60em; +} + +.pkt_ext_containersaved .pkt_ext_tag_input_wrapper .token-input-list, +.pkt_ext_containersaved .pkt_ext_tag_input_wrapper li { + font-size: 1em; +} + +.pkt_ext_containersaved .pkt_ext_tag_input_wrapper li { + height: auto; + width: auto; +} + +.pkt_ext_containersaved .pkt_ext_tag_input_wrapper li:before { + content: none; +} + +.pkt_ext_containersaved .pkt_ext_tag_input_wrapper input { + border: 0; + box-shadow: none; + background-color: #fff; + color: #333; + font-size: 1em; + float: inline-start; + line-height: normal; + height: auto; + min-height: 0; + min-width: 5em; + padding: 3px 2px 1px; + text-transform: none; +} + +.pkt_ext_containersaved .pkt_ext_tag_input_wrapper input::placeholder { + color: #a9a9a9; + letter-spacing: normal; + text-transform: none; +} + +.pkt_ext_containersaved .input_disabled { + cursor: default; + opacity: 0.5; +} + +.pkt_ext_containersaved .pkt_ext_btn { + box-sizing: border-box; + color: #333; + float: none; + font-size: 1em; + letter-spacing: normal; + height: 2.2em; + min-width: 4em; + padding: 0.5em 0; + text-decoration: none; + text-transform: none; + width: auto; +} + +.pkt_ext_containersaved .pkt_ext_btn:hover { + background-color: #ebebeb; +} + +.pkt_ext_containersaved .pkt_ext_btn:active { + background-color: #dadada; +} + +.pkt_ext_containersaved .pkt_ext_btn_disabled, +.pkt_ext_containersaved .pkt_ext_btn_disabled:hover, +.pkt_ext_containersaved .pkt_ext_btn_disabled:active { + background-color: transparent; + cursor: default; + opacity: 0.4; +} + +.pkt_ext_containersaved .pkt_ext_tag_error .pkt_ext_btn { + border: 1px solid #c3c3c3; + border-block-width: 1px; + border-inline-width: 0 1px; + height: 2.35em; +} + +.pkt_ext_containersaved .autocomplete-suggestions { + margin-top: 2.2em; +} + +/*=Recent/suggested tags +--------------------------------------------------------------------------------------- */ +.pkt_ext_containersaved .pkt_ext_suggestedtag_detail { + box-sizing: border-box; + clear: both; + inset-inline-start: 0; + opacity: 0; + min-height: 110px; + visibility: hidden; + width: 100%; +} + +.pkt_ext_container_detailactive .pkt_ext_suggestedtag_detail { + opacity: 1; + visibility: visible; +} + +.pkt_ext_container_finalstate .pkt_ext_suggestedtag_detail { + opacity: 0; + visibility: hidden; +} + +.pkt_ext_containersaved .pkt_ext_recenttag_detail h4, +.pkt_ext_containersaved .pkt_ext_suggestedtag_detail h4 { + color: #333; + font-size: 1em; + font-weight: normal; + font-style: normal; + letter-spacing: normal; + margin: 0.5em 0; + text-align: start; + text-transform: none; +} + +.pkt_ext_containersaved .pkt_ext_recenttag_detail .pkt_ext_loadingspinner, +.pkt_ext_containersaved .pkt_ext_suggestedtag_detail .pkt_ext_loadingspinner { + display: none; + position: absolute; +} + +.pkt_ext_containersaved .pkt_ext_recenttag_detail_loading .pkt_ext_loadingspinner, +.pkt_ext_containersaved .pkt_ext_suggestedtag_detail_loading .pkt_ext_loadingspinner { + display: block; + font-size: 6px; + inset-inline-start: 48%; +} + +.pkt_ext_containersaved .pkt_ext_recenttag_detail ul, +.pkt_ext_containersaved .pkt_ext_suggestedtag_detail ul { + display: block; + margin: 0; + height: 2em; + overflow: hidden; + padding: 2px 0 0; +} + +.pkt_ext_containersaved .pkt_ext_suggestedtag_detail ul { + height: auto; + margin: 0; + max-height: 4em; + padding-top: 6px; +} + +.pkt_ext_containersaved .pkt_ext_recenttag_detail li, +.pkt_ext_containersaved .pkt_ext_suggestedtag_detail li { + background: none; + float: inline-start; + height: inherit; + line-height: 1.5; + list-style: none; + margin-bottom: 0.5em; + width: inherit; +} + +.pkt_ext_containersaved .pkt_ext_recenttag_detail li:before, +.pkt_ext_containersaved .pkt_ext_suggestedtag_detail li:before { + content: none; +} + +.pkt_ext_containersaved .pkt_ext_recenttag_detail .recenttag_msg, +.pkt_ext_containersaved .pkt_ext_suggestedtag_detail .suggestedtag_msg { + color: #333; + font-size: 0.8125em; + line-height: 1.2; + inset-inline-start: auto; + position: absolute; + text-align: start; + top: 2em; +} + +.pkt_ext_containersaved .pkt_ext_suggestedtag_detail .suggestedtag_msg { + margin-inline-end: 1.3em; +} + +.pkt_ext_containersaved .token_tag { + border-radius: 4px; + background: #f7f7f7; + border: 1px solid #c3c3c3; + color: #333; + font-size: 1em; + font-weight: normal; + letter-spacing: normal; + margin-inline-end: 0.5em; + padding: 0.125em 0.625em; + text-decoration: none; + text-transform: none; +} + +.pkt_ext_containersaved .token_tag:hover { + background-color: #008acb; + border-color: #008acb; + color: #fff; + text-decoration: none; +} + +.pkt_ext_containersaved .token_tag:before, +.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, +.pkt_ext_containersaved .pkt_ext_suggestedtag_detail_disabled .token_tag:hover { + background-color: #f7f7f7; + cursor: default; + opacity: 0.5; +} + +.pkt_ext_containersaved .token_tag_inactive { + display: none; +} + +/*=Premium upsell +--------------------------------------------------------------------------------------- */ +.pkt_ext_detail .pkt_ext_premupsell { + background-color: #50bbb6; + display: block; + padding: 1.5em 0; + text-align: center; +} + +.pkt_ext_premupsell h4 { + color: #fff; + font-size: 1em; + margin-bottom: 1em; +} + +.pkt_ext_premupsell a { + color: #28605d; + border-bottom: 1px solid #47a7a3; + font-weight: normal; +} + +.pkt_ext_premupsell a:hover { + color: #14302f; +} + +/*=Token input/autocomplete +--------------------------------------------------------------------------------------- */ +.token-input-dropdown-tag { + border-radius: 4px; + box-sizing: border-box; + background: #fff; + border: 1px solid #cdcdcd; + margin-top: 0.5em; + inset-inline-start: 0 !important; + overflow-y: auto; + top: 1.9em !important; + z-index: 9000; +} + +.token-input-dropdown-tag ul { + height: inherit; + max-height: 115px; + margin: 0; + overflow: auto; + padding: 0.5em 0; +} + +.token-input-dropdown-tag ul li { + background: none; + color: #333; + font-weight: normal; + font-size: 1em; + float: none; + height: inherit; + letter-spacing: normal; + list-style: none; + padding: 0.75em; + text-align: start; + text-transform: none; + width: inherit; +} + +.token-input-dropdown-tag ul li:before { + content: none; +} + +.token-input-dropdown ul li.token-input-selected-dropdown-item { + background-color: #008acb; + color: #fff; +} + +.token-input-list { + list-style: none; + margin: 0; + padding: 0; +} + +.token-input-list li { + text-align: start; + list-style: none; +} + +.token-input-list li input { + border: 0; + background-color: white; +} + +.pkt_ext_containersaved .token-input-token { + background: none; + border-radius: 4px; + border: 1px solid #c3c3c3; + overflow: hidden; + margin: 0; + padding: 0 8px; + background-color: #f7f7f7; + color: #000; + font-weight: normal; + cursor: default; + line-height: 1.5; + display: block; + width: auto; + margin: 0 0.2em; + float: inline-start; +} + +.pkt_ext_containersaved .pkt_ext_tag_input_wrapper_disabled { + position: relative; +} + +.pkt_ext_containersaved .pkt_ext_tag_input_wrapper_disabled input { + opacity: 0.5; +} + +.pkt_ext_containersaved .pkt_ext_tag_input_wrapper_disabled .token-input-list { + opacity: 0.5; +} + +.pkt_ext_containersaved .pkt_ext_tag_input_wrapper_disabled .pkt_ext_tag_input_blocker { + height: 100%; + inset-inline-start: 0; + position: absolute; + top: 0; + width: 100%; + z-index: 5; +} + +.pkt_ext_containersaved .token-input-token p { + display: inline-block; + font-size: 1em; + font-weight: normal; + line-height: inherit; + letter-spacing: normal; + padding: 0; + margin: 0; + text-transform: none; + vertical-align: top; + width: auto; + unicode-bidi: plaintext; +} + +.pkt_ext_containersaved .token-input-token p:before { + content: none; + width: 0; +} + +.pkt_ext_containersaved .token-input-token span { + background: url(../img/tag_close@1x.png) center center no-repeat; + cursor: pointer; + display: inline-block; + height: 8px; + margin-block: 0; + margin-inline: 8px 0; + 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; +} + +/*=Language overrides +--------------------------------------------------------------------------------------- */ +.pkt_ext_saved_es .pkt_ext_btn { + min-width: 5em; +} + +.pkt_ext_saved_de .pkt_ext_btn, +.pkt_ext_saved_ru .pkt_ext_btn { + min-width: 6em; +} + +/*=Coral Button +--------------------------------------------------------------------------------------- */ +button { + padding: 0; + margin: 0; + background: none; + border: 0; + outline: none; + color: inherit; + font: inherit; + overflow: visible; +} + +.pkt_ext_button { + padding: 3px; + background-color: #EF4056; + color: #FFF; + text-align: center; + cursor: pointer; + height: 32px; + box-sizing: border-box; + width: 320px; + margin: 0 auto; + border-radius: 2px; + font-size: 1em; +} + +.pkt_ext_button:hover, +.pkt_ext_button:active { + background-color: #d5374b; +} + +/* alt button */ +.pkt_ext_blue_button { + background-color: #0060df; + color: #FFF; +} + +.pkt_ext_blue_button:hover { + background-color: #003eaa; +} + +.pkt_ext_blue_button:active { + background-color: #002275; +} + +.pkt_ext_ffx_icon:after { + position: absolute; + height: 22px; + width: 22px; + top: -3px; + inset-inline-start: -28px; + content: ""; + background-image: url(../img/signup_firefoxlogo@2x.png); + background-size: 22px 22px; + background-repeat: no-repeat; +} + +.pkt_ext_subshell { + display: none; + border-top: 1px solid #c1c1c1; + background: #ebebeb; + width: 100%; +} + +.pkt_ext_subshell hr { + display: none; +} + +.recs_enabled .pkt_ext_subshell hr { + display: block; + border: 0; + border-top: 1px solid #D7D7DB; + margin: 0; +} + +.pkt_ext_item_recs { + text-align: start; + margin: 0 auto; + padding: 0.25em 1em; +} + +.pkt_ext_item_recs header { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 12px; +} + +.pkt_ext_item_recs header h4 { + color: #333; + font-size: 1em; + font-weight: normal; + font-style: normal; + letter-spacing: normal; + margin: 0.5em 0; + text-align: start; + text-transform: none; +} + +.pkt_ext_item_recs header a { + font-style: normal; + font-weight: 500; + font-size: 1em; + line-height: 20px; + color: #0095DD; +} + +.pkt_ext_containersaved .pkt_ext_item_recs ol { + padding: 0; + margin: 0 0 10px; + list-style: none; +} + +.pkt_ext_containersaved .pkt_ext_item_recs li { + float: none; + display: flex; + font-style: normal; + font-weight: normal; + line-height: 18px; + margin: 0 -1em; + min-height: 60px; +} + +.pkt_ext_containersaved .pkt_ext_item_recs li a { + padding-block: 8px; + padding-inline: 1em 40px; + background: url(../img/open.svg) top 8px right 14px no-repeat; + flex-grow: 1; +} + +.pkt_ext_containersaved .pkt_ext_item_recs li a:dir(rtl) { + background-position-x: left 14px; +} + +.pkt_ext_containersaved .pkt_ext_item_recs li:hover, +.pkt_ext_containersaved .pkt_ext_item_recs li a:focus { + background-color: rgba(12, 12, 13, 0.1); +} + +.pkt_ext_containersaved .pkt_ext_item_recs li:active { + background-color: rgba(12, 12, 13, 0.2); +} + +.pkt_ext_containersaved .pkt_ext_item_recs .pkt_ext_item_recs_link:hover { + text-decoration: none; +} + +.pkt_ext_containersaved .pkt_ext_item_recs .rec-thumb { + width: 40px; + height: 40px; + float: inline-start; + margin: 0; + margin-inline-end: 12px; + border-radius: 2px; +} + +.pkt_ext_containersaved .pkt_ext_item_recs .rec-thumb:-moz-broken { + display: none; +} + +.pkt_ext_containersaved .pkt_ext_item_recs p { + -webkit-box-orient: vertical; + display: -webkit-box; + overflow: hidden; + word-break: break-word; + font-style: normal; + font-weight: normal; + margin: 0; +} + +.pkt_ext_containersaved .pkt_ext_item_recs .rec-title { + -webkit-line-clamp: 2; + font-size: 1em; + line-height: 18px; + color: #0C0C0D; +} + +.pkt_ext_containersaved .pkt_ext_item_recs .rec-source { + -webkit-line-clamp: 1; + font-size: 0.9em; + line-height: 16px; + color: #737373; +} + +/* signup.css + * + * Description: + * With base elements out of the way, this sets all custom styling for the extension. + * + * Contents: + * Global + * Core detail + * Core detail - storyboard + * Buttons + * Overflow mode + * Language overrides + */ +/*=Global +--------------------------------------------------------------------------------------- */ +.pkt_ext_containersignup { + background-color: #ebebeb; + color: #333; + display: block; + margin: 0; + padding: 0; + position: relative; + text-align: center; + overflow: hidden; +} + +.pkt_ext_containersignup_inactive { + animation: pkt_ext_hide 0.3s ease-out; + opacity: 0; + visibility: hidden; +} + +.pkt_ext_cf:after { + content: " "; + display: table; + clear: both; +} + +@keyframes pkt_ext_hide { + 0% { + opacity: 1; + visibility: visible; + } + 99% { + opacity: 0; + visibility: visible; + } + 100% { + opacity: 0; + visibility: hidden; + } +} +/*=Core detail +--------------------------------------------------------------------------------------- */ +.pkt_ext_containersignup p { + font-size: 1em; + color: #333; + line-height: 1.3; + margin: 0 auto 1.5em; + max-width: 260px; +} + +.pkt_ext_containersignup a { + color: #4c8fd0; +} + +.pkt_ext_containersignup a:hover { + color: #3076b9; +} + +.pkt_ext_containersignup .pkt_ext_introdetail { + background-color: #fbfbfb; + border: 1px solid #c1c1c1; + border-width: 0 0 1px; +} + +.pkt_ext_containersignup .pkt_ext_logo { + background: url(../img/pocketlogo@1x.png) center bottom no-repeat; + display: block; + height: 32px; + margin: 0 auto 15px; + padding-top: 25px; + position: relative; + text-indent: -9999px; + width: 123px; +} + +@media (min-resolution: 1.1dppx) { + .pkt_ext_containersignup .pkt_ext_logo { + background-image: url(../img/pocketlogo@2x.png); + background-size: 123px 32px; + } +} +.pkt_ext_containersignup .pkt_ext_introimg { + background: url(../img/pocketsignup_hero@1x.png) center center no-repeat; + display: block; + height: 125px; + margin: 0 auto; + position: relative; + text-indent: -9999px; + width: 255px; +} + +@media (min-resolution: 1.1dppx) { + .pkt_ext_containersignup .pkt_ext_introimg { + background-image: url(../img/pocketsignup_hero@2x.png); + background-size: 255px 125px; + } +} +.pkt_ext_containersignup .pkt_ext_tagline { + margin-bottom: 0.5em; +} + +.pkt_ext_containersignup .pkt_ext_learnmore { + font-size: 0.9em; +} + +.pkt_ext_signupdetail { + overflow: hidden; +} + +.pkt_ext_signupdetail h4 { + font-size: 0.9em; + font-weight: normal; +} + +.pkt_ext_signupdetail .btn-container { + position: relative; + margin-bottom: 0.8em; +} + +.pkt_ext_containersignup .ff_signuphelp { + background: url(../img/signup_help@1x.png) center center no-repeat; + display: block; + height: 18px; + margin-top: -9px; + inset-inline-end: -15px; + position: absolute; + text-indent: -9999px; + width: 18px; + top: 50%; +} + +@media (min-resolution: 1.1dppx) { + .pkt_ext_containersignup .ff_signuphelp { + background-image: url(../img/signup_help@2x.png); + background-size: 18px 18px; + } +} +.pkt_ext_containersignup .alreadyhave { + font-size: 0.9em; + max-width: 320px; + 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: start; +} + +.pkt_ext_introstoryone { + padding-block: 20px 15px; + padding-inline: 20px 18px; +} + +.pkt_ext_introstorytwo { + padding-block: 3px 0; + padding-inline: 20px 0; +} + +.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-block: 0; + padding-inline: 0.7em 0; + width: 82px; +} + +.pkt_ext_introstoryone_img:dir(rtl) { + background-position-x: left; +} + +@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-block: 1em 0; + padding-inline: 0.7em 0; + width: 124px; +} + +.pkt_ext_introstorytwo_img:dir(rtl) { + background-position-x: left; +} + +@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 { + background-color: #0096dd; + border: 1px solid #0095dd; + border-radius: 2px; + color: #fff; + display: inline-block; + font-size: 1.1em; + font-weight: normal; + line-height: 1; + margin: 0; + padding: 11px 45px; + text-align: center; + text-decoration: none; + text-shadow: 0 -1px 0 rgba(142, 4, 17, 0.5); + transition: background-color 0.1s linear; + width: auto; +} + +.pkt_ext_containersignup .btn-secondary { + background-color: #fbfbfb; + border-color: #c1c1c1; + color: #444; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); +} + +.pkt_ext_containersignup .btn-small { + padding: 6px 20px; +} + +.pkt_ext_containersignup .btn:hover { + background-color: #008acb; + color: #fff; + text-decoration: none; +} + +.pkt_ext_containersignup .btn-secondary:hover, +.pkt_ext_containersignup .btn-important:hover { + background-color: #f6f6f6; + color: #222; +} + +.pkt_ext_containersignup .btn-disabled { + background-image: none; + color: #ccc; + color: rgba(255, 255, 255, 0.6); + cursor: default; + opacity: 0.9; +} + +.pkt_ext_containersignup .signup-btn-firefox, +.pkt_ext_containersignup .signup-btn-email, +.pkt_ext_containersignup .signupinterim-btn-login, +.pkt_ext_containersignup .signupinterim-btn-signup, +.pkt_ext_containersignup .forgot-btn-submit, +.pkt_ext_containersignup .forgotreset-btn-change { + min-width: 12.125em; + padding: 0.8em 1.1875em; + box-sizing: content-box; +} + +.pkt_ext_containersignup .signup-btn-email { + position: relative; + z-index: 10; +} + +.pkt_ext_containersignup .signup-btn-firefox { + min-width: 14.5em; + position: relative; + padding: 0; +} + +.pkt_ext_containersignup .signup-btn-firefox .logo { + background: url(../img/signup_firefoxlogo@1x.png) center center no-repeat; + height: 2.6em; + inset-inline-start: 10px; + margin: 0; + padding: 0; + width: 22px; + position: absolute; +} + +@media (min-resolution: 1.1dppx) { + .pkt_ext_containersignup .signup-btn-firefox .logo { + background-image: url(../img/signup_firefoxlogo@2x.png); + background-size: 22px 22px; + } +} +.pkt_ext_containersignup .forgotreset-btn-change { + margin-bottom: 2em; +} + +.pkt_ext_containersignup .signup-btn-firefox .text { + display: inline-block; + padding: 0.8em 1.625em; + position: relative; + text-shadow: none; + white-space: nowrap; +} + +.pkt_ext_containersignup .signup-btn-firefox .text { + color: #fff; +} + +.pkt_ext_containersignup .btn-disabled .text { + color: #ccc; + color: rgba(255, 255, 255, 0.6); +} + +/*=Language overrides +--------------------------------------------------------------------------------------- */ +.pkt_ext_signup_de .pkt_ext_introstoryone_img { + margin-inline-end: -5px; + padding-inline-start: 0; +} + +.pkt_ext_signup_de .pkt_ext_introstorytwo .pkt_ext_tagline, +.pkt_ext_signup_es .pkt_ext_introstorytwo .pkt_ext_tagline, +.pkt_ext_signup_ja .pkt_ext_introstorytwo .pkt_ext_tagline, +.pkt_ext_signup_ru .pkt_ext_introstorytwo .pkt_ext_tagline { + margin-bottom: 0.5em; +} + +.pkt_ext_signup_ja .signup-btn-firefox .text, +.pkt_ext_signup_ru .signup-btn-firefox .text { + inset-inline-start: 15px; +} + +.pkt_ext_signup_de .signup-btn-firefox .logo, +.pkt_ext_signup_ja .signup-btn-firefox .logo, +.pkt_ext_signup_ru .signup-btn-firefox .logo { + height: 2.4em; +} + +@media (min-resolution: 1.1dppx) { + .pkt_ext_signup_de .signup-btn-firefox .logo, +.pkt_ext_signup_ja .signup-btn-firefox .logo, +.pkt_ext_signup_ru .signup-btn-firefox .logo { + height: 2.5em; + } +} +.pkt_ext_signup_de .signup-btn-email, +.pkt_ext_signup_ja .signup-btn-email, +.pkt_ext_signup_ru .signup-btn-email { + min-width: 13em; + padding: 0.8533em 1.2667em; +} + +.pkt_ext_signup_de .pkt_ext_logo, +.pkt_ext_signup_es .pkt_ext_logo, +.pkt_ext_signup_ru .pkt_ext_logo { + padding-top: 15px; +} + +.pkt_ext_signup_overflow.pkt_ext_signup_de .signup-btn-firefox .logo, +.pkt_ext_signup_overflow.pkt_ext_signup_es .signup-btn-firefox .logo, +.pkt_ext_signup_overflow.pkt_ext_signup_ja .signup-btn-firefox .logo, +.pkt_ext_signup_overflow.pkt_ext_signup_ru .signup-btn-firefox .logo { + display: none; +} + +.pkt_ext_containerhome, +.pkt_ext_wrapperhome { + overflow: hidden; +} + +.pkt_ext_home { + line-height: 20px; + color: #363636; +} +.pkt_ext_home a { + color: #008078; + text-decoration: none; +} +.pkt_ext_home a, .pkt_ext_home p { + font-size: 0.9em; +} +.pkt_ext_home .pkt_ext_hr { + height: 1px; + background: linear-gradient(90deg, #83EDB8 0%, #83EDB8 0%, #83EDB8 0.01%, #1CB0A8 33.15%, #EF4056 67.4%, #FCB643 100%); +} +.pkt_ext_home .pkt_ext_detail { + margin: 18px 20px; +} +.pkt_ext_home .pkt_ext_header { + display: flex; + justify-content: space-between; + align-items: center; +} +.pkt_ext_home .pkt_ext_header .pkt_ext_mylist_icon { + background: url(../img/list-view.svg) no-repeat; + background-size: contain; + height: 1.2em; + width: 1.2em; + margin-inline-end: 8px; +} +.pkt_ext_home .pkt_ext_header a { + height: 36px; + display: flex; + align-items: center; + box-sizing: border-box; + padding: 0 8px; + margin: 12px; + border-radius: 4px; +} +.pkt_ext_home .pkt_ext_header a:hover { + background: #F5F5F5; +} +.pkt_ext_home .pkt_ext_header .pkt_ext_logo { + background: url(../img/pocketlogo.svg) bottom right no-repeat; + background-size: contain; + height: 32px; + width: 123px; + margin: 0 20px; +} +.pkt_ext_home .pkt_ext_detail a { + display: block; +} +.pkt_ext_home .pkt_ext_detail h2 { + font-weight: 600; + font-size: 1em; +} +.pkt_ext_home .pkt_ext_detail h2, +.pkt_ext_home .pkt_ext_detail p { + margin: 8px 0; +} +.pkt_ext_home .pkt_ext_detail h3 { + font-weight: 600; + font-size: 1em; + margin: 12px 0; +} +.pkt_ext_home .pkt_ext_detail .pkt_ext_more { + margin: 19px 0; +} +.pkt_ext_home .pkt_ext_detail .pkt_ext_more .pkt_ext_chevron_right { + background: url(../img/chevron-right.svg) no-repeat; + background-size: contain; + height: 1.2em; + width: 1.2em; +} +.pkt_ext_home .pkt_ext_detail .pkt_ext_more ul { + list-style-type: none; + padding: 0; + line-height: 14px; +} +.pkt_ext_home .pkt_ext_detail .pkt_ext_more ul li a { + height: 44px; + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + box-sizing: border-box; + border-bottom: 1px solid #EAEAEA; +} +.pkt_ext_home .pkt_ext_detail .pkt_ext_discover { + line-height: 12px; + margin: 20px 0; + height: 40px; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + border-radius: 4px; +} +.pkt_ext_home .pkt_ext_detail .pkt_ext_discover:hover { + background: #F5F5F5; +} + +#stp_style_guide { + border: 1px solid #ddd; + margin: 20px auto; + padding: 20px; + width: 260px; +} +#stp_style_guide #dark_mode_toggle { + text-align: end; +} +body.theme_dark #stp_style_guide { + background: #42414c; +} + +#stp_style_guide .stp_superheader { + margin: 0; +} +#stp_style_guide .stp_styleguide_h4 { + border-bottom: 1px solid #ccc; + margin: 20px 0; +} +#stp_style_guide .stp_styleguide_h5 { + font-size: 10px; + margin: 10px 0; +} + +.stp_tag_picker .stp_tag_picker_tags { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; + padding: 8px; + border: 1px solid #8F8F9D; + border-radius: 4px; + font-style: normal; + font-weight: normal; + font-size: 1rem; + line-height: 1.2rem; + color: #15141A; + margin-bottom: 10px; +} +.stp_tag_picker .stp_tag_picker_tag { + background: #F0F0F4; + border-radius: 4px; + color: #15141A; + display: inline-block; + font-size: 0.85rem; + line-height: 1rem; + font-style: normal; + font-weight: 600; + padding: 0 8px; + transition: background-color 200ms ease-in-out; +} +body.theme_dark .stp_tag_picker .stp_tag_picker_tag { + background: #2B2A33; + color: #FBFBFB; +} + +.stp_tag_picker .stp_tag_picker_tag_remove { + padding: 5px; + color: #5B5B66; + font-weight: 400; +} +.stp_tag_picker .stp_tag_picker_tag_remove:hover { + color: #3E3E44; +} +.stp_tag_picker .stp_tag_picker_tag_remove:focus { + color: #3E3E44; + outline: 2px solid #0060df; + outline-offset: -4px; +} +body.theme_dark .stp_tag_picker .stp_tag_picker_tag_remove { + color: #8F8F9D; +} +body.theme_dark .stp_tag_picker .stp_tag_picker_tag_remove:hover { + color: #fff; +} +body.theme_dark .stp_tag_picker .stp_tag_picker_tag_remove:focus { + outline: 2px solid #00DDFF; +} + +.stp_tag_picker .stp_tag_picker_tag_duplicate { + background-color: #bbb; +} +body.theme_dark .stp_tag_picker .stp_tag_picker_tag_duplicate { + background-color: #666; +} + +.stp_tag_picker .stp_tag_picker_input_wrapper { + display: flex; + flex-grow: 1; +} +.stp_tag_picker .stp_tag_picker_input { + flex-grow: 1; + border: 1px solid #8F8F9D; + padding: 0 6px; + border-start-start-radius: 4px; + border-end-start-radius: 4px; +} +.stp_tag_picker .stp_tag_picker_input:focus { + border: 1px solid #0060DF; + outline: 1px solid #0060DF; +} +body.theme_dark .stp_tag_picker .stp_tag_picker_input { + background: none; + color: #FBFBFB; +} +body.theme_dark .stp_tag_picker .stp_tag_picker_input:focus { + border: 1px solid #00DDFF; + outline: 1px solid #00DDFF; +} + +.stp_tag_picker .stp_tag_picker_button { + font-size: 0.95rem; + line-height: 1.1rem; + padding: 4px 6px; + background-color: #F0F0F4; + border: 1px solid #8F8F9D; + border-inline-start: none; + border-start-end-radius: 4px; + border-end-end-radius: 4px; +} +.stp_tag_picker .stp_tag_picker_button:disabled { + color: #8F8F9D; +} +.stp_tag_picker .stp_tag_picker_button:hover:enabled { + background-color: #DADADF; +} +.stp_tag_picker .stp_tag_picker_button:focus:enabled { + border: 1px solid #0060DF; + outline: 1px solid #0060DF; +} +body.theme_dark .stp_tag_picker .stp_tag_picker_button { + background-color: #2B2A33; + color: #FBFBFB; +} +body.theme_dark .stp_tag_picker .stp_tag_picker_button:disabled { + color: #666; +} +body.theme_dark .stp_tag_picker .stp_tag_picker_button:hover:enabled { + background-color: #53535d; +} +body.theme_dark .stp_tag_picker .stp_tag_picker_button:focus:enabled { + border: 1px solid #00DDFF; + outline: 1px solid #00DDFF; +} + +.stp_popular_topics { + padding: 0; +} +.stp_popular_topics .stp_popular_topic { + display: inline-block; +} +.stp_popular_topics .stp_popular_topic .stp_popular_topic_link { + display: inline-block; + background: #F0F0F4; + border-radius: 4px; + font-size: 0.85rem; + line-height: 1rem; + font-style: normal; + font-weight: 600; + margin-inline-end: 8px; + margin-bottom: 8px; + padding: 4px 8px; + color: #000; +} +.stp_popular_topics .stp_popular_topic .stp_popular_topic_link:focus { + text-decoration: none; + background: #F0F0F4; + outline: 2px solid #0060df; + outline-offset: 2px; +} +.stp_popular_topics .stp_popular_topic .stp_popular_topic_link:hover { + background: #E0E0E6; + text-decoration: none; +} +.stp_popular_topics .stp_popular_topic .stp_popular_topic_link:active { + background: #CFCFD8; +} +.stp_popular_topics .stp_popular_topic .stp_popular_topic_link::after { + content: " >"; +} +body.theme_dark .stp_popular_topics .stp_popular_topic .stp_popular_topic_link { + background: #2B2A33; + color: #FBFBFE; +} +body.theme_dark .stp_popular_topics .stp_popular_topic .stp_popular_topic_link:focus { + outline: 2px solid #00DDFF; +} +body.theme_dark .stp_popular_topics .stp_popular_topic .stp_popular_topic_link:hover { + background: #53535d; +} + +.stp_article_list { + 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; + padding: 8px; + margin: 0 -8px; +} +.stp_article_list .stp_article_list_link:hover, .stp_article_list .stp_article_list_link:focus { + text-decoration: none; + background-color: #ECECEE; +} +body.theme_dark .stp_article_list .stp_article_list_link:hover, body.theme_dark .stp_article_list .stp_article_list_link:focus { + background-color: #2B2A33; +} + +.stp_article_list .stp_article_list_thumb, +.stp_article_list .stp_article_list_thumb_placeholder { + width: 40px; + height: 40px; + border-radius: 4px; + margin-inline-end: 8px; + background-color: #ECECEE; + flex-shrink: 0; +} +.stp_article_list .stp_article_list_header { + font-style: normal; + font-weight: 600; + font-size: 0.95rem; + line-height: 1.18rem; + 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; +} + +.stp_article_list .stp_article_list_publisher { + font-style: normal; + font-weight: normal; + font-size: 0.95rem; + line-height: 1.18rem; + color: #52525E; + margin: 4px 0 0; +} +body.theme_dark .stp_article_list .stp_article_list_publisher { + color: #CFCFD8; +} + +.stp_header { + display: flex; + justify-content: space-between; + align-items: center; + margin: 16px 0 12px; + font-weight: 600; +} +.stp_header .stp_header_logo { + background: url(../img/pocketlogo.svg) bottom center no-repeat; + background-size: contain; + height: 32px; + width: 121px; +} +body.theme_dark .stp_header .stp_header_logo { + background-image: url(../img/pocketlogo-dark.svg); +} + +.stp_header .stp_button { + margin: 0; +} + +.stp_button { + cursor: pointer; + display: inline-block; + margin: 12px 0; +} +.stp_button:hover { + text-decoration: none; +} +.stp_button.stp_button_text { + color: #0060DF; + font-size: 0.95rem; + line-height: 1.2rem; + font-style: normal; + font-weight: 600; +} +.stp_button.stp_button_text:focus { + text-decoration: underline; +} +.stp_button.stp_button_text:hover { + color: #0250BB; + text-decoration: none; +} +.stp_button.stp_button_text:active { + color: #054096; +} +body.theme_dark .stp_button.stp_button_text { + color: #00DDFF; +} + +.stp_button.stp_button_primary { + align-items: center; + background: #0060DF; + border-radius: 4px; + color: #FBFBFE; + font-size: 0.85rem; + line-height: 1rem; + font-style: normal; + font-weight: 600; + justify-content: center; + padding: 6px 12px; +} +.stp_button.stp_button_primary:focus { + text-decoration: none; + background: #0060DF; + outline: 2px solid #0060df; + outline-offset: 2px; +} +.stp_button.stp_button_primary:hover { + background: #0250BB; +} +.stp_button.stp_button_primary:active { + background: #054096; +} +body.theme_dark .stp_button.stp_button_primary { + background: #00DDFF; + color: #15141A; +} +body.theme_dark .stp_button.stp_button_primary:hover { + background: #80ebfe; +} +body.theme_dark .stp_button.stp_button_primary:focus { + outline: 2px solid #00DDFF; +} + +.stp_button.stp_button_secondary { + align-items: center; + background: #F0F0F4; + border-radius: 4px; + color: #15141A; + font-size: 0.85rem; + line-height: 1rem; + font-style: normal; + font-weight: 600; + padding: 6px 12px; +} +.stp_button.stp_button_secondary:focus { + text-decoration: none; + background: #F0F0F4; + outline: 2px solid #0060df; + outline-offset: 2px; +} +.stp_button.stp_button_secondary:hover { + background: #E0E0E6; +} +.stp_button.stp_button_secondary:active { + background: #CFCFD8; +} +body.theme_dark .stp_button.stp_button_secondary { + background: #2B2A33; + color: #FBFBFE; +} +body.theme_dark .stp_button.stp_button_secondary:focus { + outline: 2px solid #00DDFF; +} +body.theme_dark .stp_button.stp_button_secondary:hover { + background: #53535d; +} + +.stp_button_wide .stp_button { + display: block; + margin: 12px 0; + text-align: center; + padding: 8px 12px; +} +.stp_button_wide .stp_button.stp_button_primary { + font-size: 1.1rem; + line-height: 1.35rem; +} +.stp_button_wide .stp_button.stp_button_secondary { + font-size: 0.85rem; + line-height: 1rem; +} + +.stp_button_wide .stp_button { + display: block; + margin: 12px 0; + text-align: center; +} + +body.stp_signup_body { + overflow: hidden; +} + +.stp_panel_signup .stp_signup_content_wrapper { + margin: 12px 0 20px; +} +.stp_panel_signup .stp_signup_img_rainbow_reader { + background: url(../img/rainbow-reader.svg) bottom center no-repeat; + background-size: contain; + height: 72px; + width: 82px; + float: inline-end; + margin-inline-start: 16px; +} + +body.stp_saved_body { + overflow: hidden; +} + +.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 new file mode 100644 index 0000000000..7a3111210a --- /dev/null +++ b/browser/components/pocket/content/panels/css/main.scss @@ -0,0 +1,17 @@ +@import "./normalize"; +@import "./global"; +@import "./panel"; +@import "./saved"; +@import "./signup"; +@import "./home"; +@import "./styleguide"; + +// Components + +@import "../js/components/TagPicker/TagPicker"; +@import "../js/components/PopularTopics/PopularTopics"; +@import "../js/components/ArticleList/ArticleList"; +@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/css/normalize.scss b/browser/components/pocket/content/panels/css/normalize.scss new file mode 100644 index 0000000000..af461f1e0b --- /dev/null +++ b/browser/components/pocket/content/panels/css/normalize.scss @@ -0,0 +1,425 @@ +/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; +} + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ + +audio, +canvas, +progress, +video { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9/10. + */ + +img { + border: 0; +} + +/** + * Correct overflow not hidden in IE 9/10/11. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari. + */ + +figure { + margin: 1em 40px; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Contain overflow in all browsers. + */ + +pre { + overflow: auto; +} + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Forms + ========================================================================== */ + +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ + +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ + +button { + overflow: visible; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + box-sizing: content-box; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ + +textarea { + overflow: auto; +} + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} + +/* Normalization for FF panel defauts + ========================================================================== */ +html { + outline: none; + padding: 0; +} + +a { + color: #0095dd; + margin: 0; + outline: none; + padding: 0; + text-decoration: none; +} + +a:hover, +a:active, +a:focus { + color: #008acb; + text-decoration: underline; +} + +a:active { + color: #006b9d; +} diff --git a/browser/components/pocket/content/panels/css/panel.scss b/browser/components/pocket/content/panels/css/panel.scss new file mode 100644 index 0000000000..e89ba4e0fe --- /dev/null +++ b/browser/components/pocket/content/panels/css/panel.scss @@ -0,0 +1,8 @@ +.stp_panel_container { + overflow: hidden; +} + +.stp_panel { + padding: 0 16px; + margin: 16px 0 12px; +} diff --git a/browser/components/pocket/content/panels/css/saved.scss b/browser/components/pocket/content/panels/css/saved.scss new file mode 100644 index 0000000000..18ce64dd2f --- /dev/null +++ b/browser/components/pocket/content/panels/css/saved.scss @@ -0,0 +1,941 @@ +/* saved.css + * + * Description: + * With base elements out of the way, this sets all custom styling for the page saved dialog. + * + * Contents: + * Global + * Loading spinner + * Core detail + * Tag entry + * Recent/suggested tags + * Premium upsell + * Token input/autocomplete + * Overflow mode + * Language overrides + */ + +/*=Global +--------------------------------------------------------------------------------------- */ +.pkt_ext_containersaved { + background-color: #fbfbfb; + border-radius: 4px; + display: block; + padding: 0; + position: relative; + text-align: center; + overflow: hidden; +} +.pkt_ext_cf:after { + content: " "; + display:table; + clear:both; +} +.pkt_ext_containersaved .pkt_ext_tag_detail, +.pkt_ext_containersaved .pkt_ext_recenttag_detail, +.pkt_ext_containersaved .pkt_ext_suggestedtag_detail { + margin: 0 auto; + padding: 0.25em 1em; + position: relative; + width: auto; +} + +/*=Loading spinner +--------------------------------------------------------------------------------------- */ +@keyframes pkt_ext_spin { + to { + transform: rotate(1turn); + } +} +.pkt_ext_containersaved .pkt_ext_loadingspinner { + position: relative; + display: inline-block; + height: 2.5em; + inset-inline-start: 50%; + margin-block: 2em 0; + margin-inline: -1.25em 0; + font-size: 10px; + text-indent: 999em; + position: absolute; + top: 4em; + overflow: hidden; + width: 2.5em; + animation: pkt_ext_spin 0.7s infinite steps(8); +} +.pkt_ext_containersaved .pkt_ext_loadingspinner:before, +.pkt_ext_containersaved .pkt_ext_loadingspinner:after, +.pkt_ext_containersaved .pkt_ext_loadingspinner > div:before, +.pkt_ext_containersaved .pkt_ext_loadingspinner > div:after { + content: ''; + position: absolute; + top: 0; + inset-inline-start: 1.125em; + width: 0.25em; + height: 0.75em; + border-radius: .2em; + background: #eee; + box-shadow: 0 1.75em #eee; + transform-origin: 50% 1.25em; +} +.pkt_ext_containersaved .pkt_ext_loadingspinner:before { + background: #555; +} +.pkt_ext_containersaved .pkt_ext_loadingspinner:after { + transform: rotate(-45deg); + background: #777; +} +.pkt_ext_containersaved .pkt_ext_loadingspinner > div:before { + transform: rotate(-90deg); + background: #999; +} +.pkt_ext_containersaved .pkt_ext_loadingspinner > div:after { + transform: rotate(-135deg); + background: #bbb; +} + +/*=Core detail +--------------------------------------------------------------------------------------- */ +.pkt_ext_containersaved .pkt_ext_initload { + inset-inline-start: 0; + position: absolute; + top: 0; + width: 100%; +} +.pkt_ext_containersaved .pkt_ext_detail { + opacity: 0; + position: relative; + padding-bottom: 1.25em; +} +.pkt_ext_container_detailactive .pkt_ext_initload { + opacity: 0; +} +.pkt_ext_container_detailactive .pkt_ext_initload .pkt_ext_loadingspinner, +.pkt_ext_container_finalstate .pkt_ext_initload .pkt_ext_loadingspinner { + animation: none; +} +.pkt_ext_container_detailactive .pkt_ext_detail { + max-height: 20em; + opacity: 1; +} +.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 { + 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_suggestedtag_detail, +.pkt_ext_container_finalerrorstate .pkt_ext_item_actions { + display: none; + transition: none; +} +.pkt_ext_containersaved h2 { + background: transparent; + border: none; + color: #333; + display: block; + float: none; + font-size: 1.2em; + font-weight: normal; + letter-spacing: normal; + line-height: 1; + margin: 19px 0 4px; + padding: 0; + position: relative; + text-align: start; + text-transform: none; +} +@keyframes fade_in_out { + 0% { + opacity: 1; + } + 50% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +.pkt_ext_container_finalstate h2 { + animation: fade_in_out 0.4s ease-out; +} +.pkt_ext_container_finalerrorstate h2 { + animation: none; + color: #d74345; +} +.pkt_ext_containersaved .pkt_ext_errordetail { + display: none; + font-size: 0.9em; + font-weight: normal; + inset-inline-start: 6.4em; + max-width: 21em; + opacity: 0; + position: absolute; + top: 2.7em; + text-align: start; + visibility: hidden; +} +.pkt_ext_container_finalerrorstate { + max-height: 133px; +} +.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; + float: inline-start; + height: 40px; + padding: 1.25em 1em; + position: relative; + width: 44px; +} +@media (min-resolution: 1.1dppx) { + .pkt_ext_containersaved .pkt_ext_logo { + background-image: url(../img/pocketlogosolo@2x.png); + background-size: 44px 40px; + } +} +.pkt_ext_container_finalerrorstate .pkt_ext_logo { + background-image: url(../img/pocketerror@1x.png); + height: 44px; + width: 44px; +} +@media (min-resolution: 1.1dppx) { + .pkt_ext_container_finalerrorstate .pkt_ext_logo { + background-image: url(../img/pocketerror@2x.png); + background-size: 44px 44px; + } +} +.pkt_ext_containersaved .pkt_ext_topdetail { + float: inline-start; +} +.pkt_ext_containersaved { + .pkt_ext_edit_msg_container { + position: relative; + .pkt_ext_edit_msg { + box-sizing: border-box; + display: none; + font-size: 0.75em; + inset-inline-start: auto; + padding: 0 1.4em; + position: absolute; + text-align: start; + top: 0; + width: 100%; + margin: 0; + &.pkt_ext_edit_msg_error { + color: #d74345; + } + &.pkt_ext_edit_msg_active { + display: block; + } + } + } +} +.pkt_ext_containersaved .pkt_ext_item_actions { + background: transparent; + float: none; + height: auto; + margin-bottom: 1em; + margin-top: 0; + width: auto; +} +.pkt_ext_containersaved .pkt_ext_item_actions_disabled { + opacity: 0.5; +} +.pkt_ext_container_finalstate .pkt_ext_item_actions_disabled { + opacity: 0; +} +.pkt_ext_containersaved .pkt_ext_item_actions ul { + background: none; + display: block; + float: none; + height: auto; + margin: 0; + padding: 0; + width: 100%; +} +.pkt_ext_containersaved .pkt_ext_item_actions li { + box-sizing: border-box; + background: none; + border: 0; + float: inline-start; + list-style: none; + line-height: 0.8; + height: auto; + padding-inline-end: 0.4em; + width: auto; +} +.pkt_ext_containersaved .pkt_ext_item_actions li:before { + content: none; +} +.pkt_ext_containersaved .pkt_ext_item_actions .pkt_ext_actions_separator { + border-inline-start: 2px solid #777; + height: 1em; + margin-top: 0.3em; + padding: 0; + width: 10px; +} +.pkt_ext_containersaved .pkt_ext_item_actions a { + background: transparent; + color: #0095dd; + display: block; + font-feature-settings: normal; + font-size: 0.9em; + font-weight: normal; + letter-spacing: normal; + line-height: inherit; + height: auto; + margin: 0; + padding: 0.5em; + float: inline-start; + text-align: start; + text-decoration: none; + text-transform: none; +} +.pkt_ext_containersaved .pkt_ext_item_actions a:hover, +.pkt_ext_containersaved .pkt_ext_item_actions a:focus { + color: #008acb; + text-decoration: underline; +} +.pkt_ext_containersaved .pkt_ext_item_actions a:before, +.pkt_ext_containersaved .pkt_ext_item_actions a:after { + background: transparent; + display: none; +} +.pkt_ext_containersaved .pkt_ext_item_actions_disabled a { + cursor: default; +} +.pkt_ext_containersaved .pkt_ext_item_actions .pkt_ext_openpocket { + float: inline-end; + padding-inline-end: 0.7em; + text-align: end; +} +.pkt_ext_containersaved .pkt_ext_item_actions .pkt_ext_removeitem { + padding-inline-start: 0; +} +.pkt_ext_containersaved .pkt_ext_close { + background: url(../img/tag_close@1x.png) center center no-repeat; + color: #333; + display: block; + font-size: 0.8em; + height: 10px; + inset-inline-end: 0.5em; + overflow: hidden; + position: absolute; + text-align: center; + text-indent: -9999px; + top: -1em; + width: 10px; +} +@media (min-resolution: 1.1dppx) { + .pkt_ext_containersaved .pkt_ext_close { + background-image: url(../img/tag_close@2x.png); + background-size: 8px 8px; + } +} +.pkt_ext_containersaved .pkt_ext_close:hover { + color: #000; + text-decoration: none; +} + +/*=Tag entry +--------------------------------------------------------------------------------------- */ +.pkt_ext_containersaved .pkt_ext_tag_detail { + border: 1px solid #c1c1c1; + border-radius: 2px; + clear: both; + margin: 0 1em; + padding: 0; + display: flex; +} +.pkt_ext_containersaved .pkt_ext_tag_error { + border: none; +} +.pkt_ext_containersaved .pkt_ext_tag_input_wrapper { + box-sizing: border-box; + flex: 1; + background-color: #fff; + border-inline-end: 1px solid #c3c3c3; + color: #333; + display: block; + float: none; + font-size: 0.875em; + list-style: none; + margin: 0; + overflow: hidden; + padding: 0.25em 0.5em; + width: 14em; + padding-inline: 0.5em; +} +.pkt_ext_containersaved .pkt_ext_tag_error .pkt_ext_tag_input_wrapper { + border: 1px solid #d74345; +} +.pkt_ext_containersaved .pkt_ext_tag_input_wrapper .token-input-list { + display: block; + height: 1.7em; + overflow: hidden; + position: relative; + width: 60em; +} +.pkt_ext_containersaved .pkt_ext_tag_input_wrapper .token-input-list, +.pkt_ext_containersaved .pkt_ext_tag_input_wrapper li { + font-size: 1em; +} +.pkt_ext_containersaved .pkt_ext_tag_input_wrapper li { + height: auto; + width: auto; +} +.pkt_ext_containersaved .pkt_ext_tag_input_wrapper li:before { + content: none; +} +.pkt_ext_containersaved .pkt_ext_tag_input_wrapper input { + border: 0; + box-shadow: none; + background-color: #fff; + color: #333; + font-size: 1em; + float: inline-start; + line-height: normal; + height: auto; + min-height: 0; + min-width: 5em; + padding: 3px 2px 1px; + text-transform: none; +} +.pkt_ext_containersaved .pkt_ext_tag_input_wrapper input::placeholder { + color: #a9a9a9; + letter-spacing: normal; + text-transform: none; +} +.pkt_ext_containersaved .input_disabled { + cursor: default; + opacity: 0.5; +} +.pkt_ext_containersaved .pkt_ext_btn { + box-sizing: border-box; + color: #333; + float: none; + font-size: 1em; + letter-spacing: normal; + height: 2.2em; + min-width: 4em; + padding: 0.5em 0; + text-decoration: none; + text-transform: none; + width: auto; +} +.pkt_ext_containersaved .pkt_ext_btn:hover { + background-color: #ebebeb; +} +.pkt_ext_containersaved .pkt_ext_btn:active { + background-color: #dadada; +} +.pkt_ext_containersaved .pkt_ext_btn_disabled, +.pkt_ext_containersaved .pkt_ext_btn_disabled:hover, +.pkt_ext_containersaved .pkt_ext_btn_disabled:active { + background-color: transparent; + cursor: default; + opacity: 0.4; +} +.pkt_ext_containersaved .pkt_ext_tag_error .pkt_ext_btn { + border: 1px solid #c3c3c3; + border-block-width: 1px; + border-inline-width: 0 1px; + height: 2.35em; +} +.pkt_ext_containersaved .autocomplete-suggestions { + margin-top: 2.2em; +} + +/*=Recent/suggested tags +--------------------------------------------------------------------------------------- */ +.pkt_ext_containersaved .pkt_ext_suggestedtag_detail { + box-sizing: border-box; + clear: both; + inset-inline-start: 0; + opacity: 0; + min-height: 110px; + visibility: hidden; + width: 100%; +} +.pkt_ext_container_detailactive .pkt_ext_suggestedtag_detail { + opacity: 1; + visibility: visible; +} +.pkt_ext_container_finalstate .pkt_ext_suggestedtag_detail { + opacity: 0; + visibility: hidden; +} + +.pkt_ext_containersaved .pkt_ext_recenttag_detail h4, +.pkt_ext_containersaved .pkt_ext_suggestedtag_detail h4 { + color: #333; + font-size: 1em; + font-weight: normal; + font-style: normal; + letter-spacing: normal; + margin: 0.5em 0; + text-align: start; + text-transform: none; +} +.pkt_ext_containersaved .pkt_ext_recenttag_detail .pkt_ext_loadingspinner, +.pkt_ext_containersaved .pkt_ext_suggestedtag_detail .pkt_ext_loadingspinner { + display: none; + position: absolute; +} +.pkt_ext_containersaved .pkt_ext_recenttag_detail_loading .pkt_ext_loadingspinner, +.pkt_ext_containersaved .pkt_ext_suggestedtag_detail_loading .pkt_ext_loadingspinner { + display: block; + font-size: 6px; + inset-inline-start: 48%; +} +.pkt_ext_containersaved .pkt_ext_recenttag_detail ul, +.pkt_ext_containersaved .pkt_ext_suggestedtag_detail ul { + display: block; + margin: 0; + height: 2em; + overflow: hidden; + padding: 2px 0 0; +} +.pkt_ext_containersaved .pkt_ext_suggestedtag_detail ul { + height: auto; + margin: 0; + max-height: 4em; + padding-top: 6px; +} +.pkt_ext_containersaved .pkt_ext_recenttag_detail li, +.pkt_ext_containersaved .pkt_ext_suggestedtag_detail li { + background: none; + float: inline-start; + height: inherit; + line-height: 1.5; + list-style: none; + margin-bottom: 0.5em; + width: inherit; +} +.pkt_ext_containersaved .pkt_ext_recenttag_detail li:before, +.pkt_ext_containersaved .pkt_ext_suggestedtag_detail li:before { + content: none; +} +.pkt_ext_containersaved .pkt_ext_recenttag_detail .recenttag_msg, +.pkt_ext_containersaved .pkt_ext_suggestedtag_detail .suggestedtag_msg { + color: #333; + font-size: 0.8125em; + line-height: 1.2; + inset-inline-start: auto; + position: absolute; + text-align: start; + top: 2em; +} +.pkt_ext_containersaved .pkt_ext_suggestedtag_detail .suggestedtag_msg { + margin-inline-end: 1.3em; +} +.pkt_ext_containersaved .token_tag { + border-radius: 4px; + background: #f7f7f7; + border: 1px solid #c3c3c3; + color: #333; + font-size: 1em; + font-weight: normal; + letter-spacing: normal; + margin-inline-end: 0.5em; + padding: 0.125em 0.625em; + text-decoration: none; + text-transform: none; +} +.pkt_ext_containersaved .token_tag:hover { + background-color: #008acb; + border-color: #008acb; + color: #fff; + text-decoration: none; +} +.pkt_ext_containersaved .token_tag:before, +.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, +.pkt_ext_containersaved .pkt_ext_suggestedtag_detail_disabled .token_tag:hover { + background-color: #f7f7f7; + cursor: default; + opacity: 0.5; +} +.pkt_ext_containersaved .token_tag_inactive { + display: none; +} + +/*=Premium upsell +--------------------------------------------------------------------------------------- */ +.pkt_ext_detail .pkt_ext_premupsell { + background-color: #50bbb6; + display: block; + padding: 1.5em 0; + text-align: center; +} +.pkt_ext_premupsell h4 { + color: #fff; + font-size: 1em; + margin-bottom: 1em; +} +.pkt_ext_premupsell a { + color: #28605d; + border-bottom: 1px solid #47a7a3; + font-weight: normal; +} +.pkt_ext_premupsell a:hover { + color: #14302f; +} + +/*=Token input/autocomplete +--------------------------------------------------------------------------------------- */ +.token-input-dropdown-tag { + border-radius: 4px; + box-sizing: border-box; + background: #fff; + border: 1px solid #cdcdcd; + margin-top: 0.5em; + inset-inline-start: 0 !important; + overflow-y: auto; + top: 1.9em !important; + z-index: 9000; +} +.token-input-dropdown-tag ul { + height: inherit; + max-height: 115px; + margin: 0; + overflow: auto; + padding: 0.5em 0; +} +.token-input-dropdown-tag ul li { + background: none; + color: #333; + font-weight: normal; + font-size: 1em; + float: none; + height: inherit; + letter-spacing: normal; + list-style: none; + padding: 0.75em; + text-align: start; + text-transform: none; + width: inherit; +} +.token-input-dropdown-tag ul li:before { + content: none; +} +.token-input-dropdown ul li.token-input-selected-dropdown-item { + background-color: #008acb; + color: #fff; +} +.token-input-list { + list-style: none; + margin: 0; + padding: 0; +} +.token-input-list li { + text-align: start; + list-style: none; +} +.token-input-list li input { + border: 0; + background-color: white; +} +.pkt_ext_containersaved .token-input-token { + background: none; + border-radius: 4px; + border: 1px solid #c3c3c3; + overflow: hidden; + margin: 0; + padding: 0 8px; + background-color: #f7f7f7; + color: #000; + font-weight: normal; + cursor: default; + line-height: 1.5; + display: block; + width: auto; + margin: 0 0.2em; + float: inline-start; +} +.pkt_ext_containersaved .pkt_ext_tag_input_wrapper_disabled { + position: relative; +} +.pkt_ext_containersaved .pkt_ext_tag_input_wrapper_disabled input { + opacity: 0.5; +} +.pkt_ext_containersaved .pkt_ext_tag_input_wrapper_disabled .token-input-list { + opacity: 0.5; +} +.pkt_ext_containersaved .pkt_ext_tag_input_wrapper_disabled .pkt_ext_tag_input_blocker { + height: 100%; + inset-inline-start: 0; + position: absolute; + top: 0; + width: 100%; + z-index: 5; +} +.pkt_ext_containersaved .token-input-token p { + display: inline-block; + font-size: 1em; + font-weight: normal; + line-height: inherit; + letter-spacing: normal; + padding: 0; + margin: 0; + text-transform: none; + vertical-align: top; + width: auto; + unicode-bidi: plaintext; +} +.pkt_ext_containersaved .token-input-token p:before { + content: none; + width: 0; +} +.pkt_ext_containersaved .token-input-token span { + background: url(../img/tag_close@1x.png) center center no-repeat; + cursor: pointer; + display: inline-block; + height: 8px; + margin-block: 0; + margin-inline: 8px 0; + 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; +} + +/*=Language overrides +--------------------------------------------------------------------------------------- */ +.pkt_ext_saved_es .pkt_ext_btn { + min-width: 5em; +} +.pkt_ext_saved_de .pkt_ext_btn, +.pkt_ext_saved_ru .pkt_ext_btn { + min-width: 6em; +} + +/*=Coral Button +--------------------------------------------------------------------------------------- */ +button { + padding: 0; + margin: 0; + background: none; + border: 0; + outline: none; + color: inherit; + font: inherit; + overflow: visible; +} + +.pkt_ext_button { + padding: 3px; + background-color: #EF4056; + color: #FFF; + text-align: center; + cursor: pointer; + height: 32px; + box-sizing: border-box; + width: 320px; + margin: 0 auto; + border-radius: 2px; + font-size: 1em; +} + +.pkt_ext_button:hover, +.pkt_ext_button:active { + background-color: #d5374b; +} + +/* alt button */ +.pkt_ext_blue_button { + background-color: #0060df; + color: #FFF; +} + +.pkt_ext_blue_button:hover { + background-color: #003eaa; +} + +.pkt_ext_blue_button:active { + background-color: #002275; +} + +.pkt_ext_ffx_icon:after { + position: absolute; + height: 22px; + width: 22px; + top: -3px; + inset-inline-start: -28px; + content: ""; + background-image: url(../img/signup_firefoxlogo@2x.png); + background-size: 22px 22px; + background-repeat: no-repeat; +} + +.pkt_ext_subshell { + display: none; + border-top: 1px solid #c1c1c1; + background: #ebebeb; + width: 100%; +} + +.pkt_ext_subshell hr { + display: none; +} + +.recs_enabled .pkt_ext_subshell hr { + display: block; + border: 0; + border-top: 1px solid #D7D7DB; + margin: 0; +} + +.pkt_ext_item_recs { + text-align: start; + margin: 0 auto; + padding: 0.25em 1em; +} + +.pkt_ext_item_recs header { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 12px; +} + +.pkt_ext_item_recs header h4 { + color: #333; + font-size: 1em; + font-weight: normal; + font-style: normal; + letter-spacing: normal; + margin: 0.5em 0; + text-align: start; + text-transform: none; +} + +.pkt_ext_item_recs header a { + font-style: normal; + font-weight: 500; + font-size: 1em; + line-height: 20px; + color: #0095DD; +} + +.pkt_ext_containersaved .pkt_ext_item_recs ol { + padding: 0; + margin: 0 0 10px; + list-style: none; +} + +.pkt_ext_containersaved .pkt_ext_item_recs li { + float: none; + display: flex; + font-style: normal; + font-weight: normal; + line-height: 18px; + margin: 0 -1em; + min-height: 60px; +} + +.pkt_ext_containersaved .pkt_ext_item_recs li a { + padding-block: 8px; + padding-inline: 1em 40px; + background: url(../img/open.svg) top 8px right 14px no-repeat; + flex-grow: 1; +} + +.pkt_ext_containersaved .pkt_ext_item_recs li a:dir(rtl) { + background-position-x: left 14px; +} + +.pkt_ext_containersaved .pkt_ext_item_recs li:hover, +.pkt_ext_containersaved .pkt_ext_item_recs li a:focus { + background-color: rgba(12, 12, 13, 0.1); +} + +.pkt_ext_containersaved .pkt_ext_item_recs li:active { + background-color: rgba(12, 12, 13, 0.2); +} + +.pkt_ext_containersaved .pkt_ext_item_recs .pkt_ext_item_recs_link:hover { + text-decoration: none; +} + +.pkt_ext_containersaved .pkt_ext_item_recs .rec-thumb { + width: 40px; + height: 40px; + float: inline-start; + margin: 0; + margin-inline-end: 12px; + border-radius: 2px; +} + +.pkt_ext_containersaved .pkt_ext_item_recs .rec-thumb:-moz-broken { + display: none; +} + +.pkt_ext_containersaved .pkt_ext_item_recs p { + -webkit-box-orient: vertical; + display: -webkit-box; + overflow: hidden; + word-break: break-word; + font-style: normal; + font-weight: normal; + margin: 0; +} + +.pkt_ext_containersaved .pkt_ext_item_recs .rec-title { + -webkit-line-clamp: 2; + font-size: 1em; + line-height: 18px; + color: #0C0C0D; +} + +.pkt_ext_containersaved .pkt_ext_item_recs .rec-source { + -webkit-line-clamp: 1; + font-size: 0.9em; + line-height: 16px; + color: #737373; +} diff --git a/browser/components/pocket/content/panels/css/signup.scss b/browser/components/pocket/content/panels/css/signup.scss new file mode 100644 index 0000000000..da35a58eec --- /dev/null +++ b/browser/components/pocket/content/panels/css/signup.scss @@ -0,0 +1,360 @@ +/* signup.css + * + * Description: + * With base elements out of the way, this sets all custom styling for the extension. + * + * Contents: + * Global + * Core detail + * Core detail - storyboard + * Buttons + * Overflow mode + * Language overrides + */ + +/*=Global +--------------------------------------------------------------------------------------- */ +.pkt_ext_containersignup { + background-color: #ebebeb; + color: #333; + display: block; + margin: 0; + padding: 0; + position: relative; + text-align: center; + overflow: hidden; +} +.pkt_ext_containersignup_inactive { + animation: pkt_ext_hide 0.3s ease-out; + opacity: 0; + visibility: hidden; +} +.pkt_ext_cf:after { + content: " "; + display: table; + clear: both; +} +@keyframes pkt_ext_hide { + 0% { + opacity: 1; + visibility: visible; + } + 99% { + opacity: 0; + visibility: visible; + } + 100% { + opacity: 0; + visibility: hidden; + } +} + +/*=Core detail +--------------------------------------------------------------------------------------- */ +.pkt_ext_containersignup p { + font-size: 1em; + color: #333; + line-height: 1.3; + margin: 0 auto 1.5em; + max-width: 260px; +} +.pkt_ext_containersignup a { + color: #4c8fd0; +} +.pkt_ext_containersignup a:hover { + color: #3076b9; +} +.pkt_ext_containersignup .pkt_ext_introdetail { + background-color: #fbfbfb; + border: 1px solid #c1c1c1; + border-width: 0 0 1px; +} +.pkt_ext_containersignup .pkt_ext_logo { + background: url(../img/pocketlogo@1x.png) center bottom no-repeat; + display: block; + height: 32px; + margin: 0 auto 15px; + padding-top: 25px; + position: relative; + text-indent: -9999px; + width: 123px; +} +@media (min-resolution: 1.1dppx) { + .pkt_ext_containersignup .pkt_ext_logo { + background-image: url(../img/pocketlogo@2x.png); + background-size: 123px 32px; + } +} +.pkt_ext_containersignup .pkt_ext_introimg { + background: url(../img/pocketsignup_hero@1x.png) center center no-repeat; + display: block; + height: 125px; + margin: 0 auto; + position: relative; + text-indent: -9999px; + width: 255px; +} +@media (min-resolution: 1.1dppx) { + .pkt_ext_containersignup .pkt_ext_introimg { + background-image: url(../img/pocketsignup_hero@2x.png); + background-size: 255px 125px; + } +} +.pkt_ext_containersignup .pkt_ext_tagline { + margin-bottom: 0.5em; +} +.pkt_ext_containersignup .pkt_ext_learnmore { + font-size: 0.9em; +} +.pkt_ext_signupdetail { + overflow: hidden; +} +.pkt_ext_signupdetail h4 { + font-size: 0.9em; + font-weight: normal; +} +.pkt_ext_signupdetail .btn-container { + position: relative; + margin-bottom: 0.8em; +} +.pkt_ext_containersignup .ff_signuphelp { + background: url(../img/signup_help@1x.png) center center no-repeat; + display: block; + height: 18px; + margin-top: -9px; + inset-inline-end: -15px; + position: absolute; + text-indent: -9999px; + width: 18px; + top: 50%; +} +@media (min-resolution: 1.1dppx) { + .pkt_ext_containersignup .ff_signuphelp { + background-image: url(../img/signup_help@2x.png); + background-size: 18px 18px; + } +} +.pkt_ext_containersignup .alreadyhave { + font-size: 0.9em; + max-width: 320px; + 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: start; +} +.pkt_ext_introstoryone { + padding-block: 20px 15px; + padding-inline: 20px 18px; +} +.pkt_ext_introstorytwo { + padding-block: 3px 0; + padding-inline: 20px 0; +} +.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-block: 0; + padding-inline: 0.7em 0; + width: 82px; +} +.pkt_ext_introstoryone_img:dir(rtl) { + background-position-x: left; +} +@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-block: 1em 0; + padding-inline: 0.7em 0; + width: 124px; +} +.pkt_ext_introstorytwo_img:dir(rtl) { + background-position-x: left; +} +@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 { + background-color: #0096dd; + border: 1px solid #0095dd; + border-radius: 2px; + color: #fff; + display: inline-block; + font-size: 1.1em; + font-weight: normal; + line-height: 1; + margin: 0; + padding: 11px 45px; + text-align: center; + text-decoration: none; + text-shadow: 0 -1px 0 rgba(142,4,17,0.5); + transition: background-color 0.1s linear; + width: auto; +} +.pkt_ext_containersignup .btn-secondary { + background-color: #fbfbfb; + border-color: #c1c1c1; + color: #444; + text-shadow: 0 1px 0 rgba(255,255,255,0.5); +} +.pkt_ext_containersignup .btn-small { + padding: 6px 20px; +} +.pkt_ext_containersignup .btn:hover { + background-color: #008acb; + color: #fff; + text-decoration: none; +} +.pkt_ext_containersignup .btn-secondary:hover, +.pkt_ext_containersignup .btn-important:hover { + background-color: #f6f6f6; + color: #222; +} +.pkt_ext_containersignup .btn-disabled { + background-image: none; + color: #ccc; + color: rgba(255,255,255,0.6); + cursor: default; + opacity: 0.9; +} +.pkt_ext_containersignup .signup-btn-firefox, +.pkt_ext_containersignup .signup-btn-email, +.pkt_ext_containersignup .signupinterim-btn-login, +.pkt_ext_containersignup .signupinterim-btn-signup, +.pkt_ext_containersignup .forgot-btn-submit, +.pkt_ext_containersignup .forgotreset-btn-change { + min-width: 12.125em; + padding: 0.8em 1.1875em; + box-sizing: content-box; +} +.pkt_ext_containersignup .signup-btn-email { + position: relative; + z-index: 10; +} +.pkt_ext_containersignup .signup-btn-firefox { + min-width: 14.5em; + position: relative; + padding: 0; +} +.pkt_ext_containersignup .signup-btn-firefox .logo { + background: url(../img/signup_firefoxlogo@1x.png) center center no-repeat; + height: 2.6em; + inset-inline-start: 10px; + margin: 0; + padding: 0; + width: 22px; + position: absolute; +} +@media (min-resolution: 1.1dppx) { + .pkt_ext_containersignup .signup-btn-firefox .logo { + background-image: url(../img/signup_firefoxlogo@2x.png); + background-size: 22px 22px; + } +} +.pkt_ext_containersignup .forgotreset-btn-change { + margin-bottom: 2em; +} +.pkt_ext_containersignup .signup-btn-firefox .text { + display: inline-block; + padding: 0.8em 1.625em; + position: relative; + text-shadow: none; + white-space: nowrap; +} +.pkt_ext_containersignup .signup-btn-firefox .text { + color: #fff; +} +.pkt_ext_containersignup .btn-disabled .text { + color: #ccc; + color: rgba(255,255,255,0.6); +} + +/*=Language overrides +--------------------------------------------------------------------------------------- */ +.pkt_ext_signup_de .pkt_ext_introstoryone_img { + margin-inline-end: -5px; + padding-inline-start: 0; +} +.pkt_ext_signup_de .pkt_ext_introstorytwo .pkt_ext_tagline, +.pkt_ext_signup_es .pkt_ext_introstorytwo .pkt_ext_tagline, +.pkt_ext_signup_ja .pkt_ext_introstorytwo .pkt_ext_tagline, +.pkt_ext_signup_ru .pkt_ext_introstorytwo .pkt_ext_tagline { + margin-bottom: 0.5em; +} +.pkt_ext_signup_ja .signup-btn-firefox .text, +.pkt_ext_signup_ru .signup-btn-firefox .text { + inset-inline-start: 15px; +} +.pkt_ext_signup_de .signup-btn-firefox .logo, +.pkt_ext_signup_ja .signup-btn-firefox .logo, +.pkt_ext_signup_ru .signup-btn-firefox .logo { + height: 2.4em; +} +@media (min-resolution: 1.1dppx) { + .pkt_ext_signup_de .signup-btn-firefox .logo, + .pkt_ext_signup_ja .signup-btn-firefox .logo, + .pkt_ext_signup_ru .signup-btn-firefox .logo { + height: 2.5em; + } +} +.pkt_ext_signup_de .signup-btn-email, +.pkt_ext_signup_ja .signup-btn-email, +.pkt_ext_signup_ru .signup-btn-email { + min-width: 13em; + padding: 0.8533em 1.2667em; +} +.pkt_ext_signup_de .pkt_ext_logo, +.pkt_ext_signup_es .pkt_ext_logo, +.pkt_ext_signup_ru .pkt_ext_logo { + padding-top: 15px; +} +.pkt_ext_signup_overflow.pkt_ext_signup_de .signup-btn-firefox .logo, +.pkt_ext_signup_overflow.pkt_ext_signup_es .signup-btn-firefox .logo, +.pkt_ext_signup_overflow.pkt_ext_signup_ja .signup-btn-firefox .logo, +.pkt_ext_signup_overflow.pkt_ext_signup_ru .signup-btn-firefox .logo { + display: none; +} diff --git a/browser/components/pocket/content/panels/css/styleguide.scss b/browser/components/pocket/content/panels/css/styleguide.scss new file mode 100644 index 0000000000..9310d6ba98 --- /dev/null +++ b/browser/components/pocket/content/panels/css/styleguide.scss @@ -0,0 +1,28 @@ +#stp_style_guide { + #dark_mode_toggle { + text-align: end; + } + + border: 1px solid #ddd; + margin: 20px auto; + padding: 20px; + width: 260px; + + @include theme_dark { + background: #42414c; + } + + .stp_superheader { + margin: 0; + } + + .stp_styleguide_h4 { + border-bottom: 1px solid #ccc; + margin: 20px 0; + } + + .stp_styleguide_h5 { + font-size: 10px; + margin: 10px 0; + } +} diff --git a/browser/components/pocket/content/panels/fonts/FiraSans-Regular.woff b/browser/components/pocket/content/panels/fonts/FiraSans-Regular.woff Binary files differnew file mode 100644 index 0000000000..f466cdda9b --- /dev/null +++ b/browser/components/pocket/content/panels/fonts/FiraSans-Regular.woff diff --git a/browser/components/pocket/content/panels/home.html b/browser/components/pocket/content/panels/home.html new file mode 100644 index 0000000000..c6edc95695 --- /dev/null +++ b/browser/components/pocket/content/panels/home.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta http-equiv="Content-Security-Policy" content="default-src chrome:; img-src https://img-getpocket.cdn.mozilla.net; object-src 'none'" /> + <base href="chrome://pocket/content/panels/"> + <link rel="localization" href="browser/branding/brandings.ftl" /> + <link rel="localization" href="browser/aboutPocket.ftl" /> + <title>Pocket: Home</title> + <link rel="stylesheet" href="css/main.compiled.css"> + </head> + <body class="pkt_ext_containerhome" aria-live="polite"> + <script src="js/vendor.bundle.js"></script> + <script src="js/main.bundle.js"></script> + <script src="js/home/entry.js"></script> + </body> +</html> diff --git a/browser/components/pocket/content/panels/img/chevron-right.svg b/browser/components/pocket/content/panels/img/chevron-right.svg new file mode 100644 index 0000000000..ea4f72e649 --- /dev/null +++ b/browser/components/pocket/content/panels/img/chevron-right.svg @@ -0,0 +1,3 @@ +<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M6.19526 13.1381C5.93491 12.8777 5.93491 12.4556 6.19526 12.1952L10.3905 7.99998L6.19526 3.80472C5.93491 3.54437 5.93491 3.12226 6.19526 2.86191C6.45561 2.60156 6.87772 2.60156 7.13807 2.86191L11.8047 7.52857C12.0651 7.78892 12.0651 8.21103 11.8047 8.47138L7.13807 13.1381C6.87772 13.3984 6.45561 13.3984 6.19526 13.1381Z" fill="#008078"/> +</svg> diff --git a/browser/components/pocket/content/panels/img/list-view.svg b/browser/components/pocket/content/panels/img/list-view.svg new file mode 100644 index 0000000000..234d1866ea --- /dev/null +++ b/browser/components/pocket/content/panels/img/list-view.svg @@ -0,0 +1,8 @@ +<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M3.33331 3.33337C3.33331 3.88566 2.8856 4.33337 2.33331 4.33337C1.78103 4.33337 1.33331 3.88566 1.33331 3.33337C1.33331 2.78109 1.78103 2.33337 2.33331 2.33337C2.8856 2.33337 3.33331 2.78109 3.33331 3.33337Z" fill="#008078"/> +<path d="M3.33331 8.00004C3.33331 8.55233 2.8856 9.00004 2.33331 9.00004C1.78103 9.00004 1.33331 8.55233 1.33331 8.00004C1.33331 7.44776 1.78103 7.00004 2.33331 7.00004C2.8856 7.00004 3.33331 7.44776 3.33331 8.00004Z" fill="#008078"/> +<path d="M3.33331 12.6667C3.33331 13.219 2.8856 13.6667 2.33331 13.6667C1.78103 13.6667 1.33331 13.219 1.33331 12.6667C1.33331 12.1144 1.78103 11.6667 2.33331 11.6667C2.8856 11.6667 3.33331 12.1144 3.33331 12.6667Z" fill="#008078"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M4.66665 3.33337C4.66665 2.96518 4.96512 2.66671 5.33331 2.66671H14C14.3682 2.66671 14.6666 2.96518 14.6666 3.33337C14.6666 3.70156 14.3682 4.00004 14 4.00004H5.33331C4.96512 4.00004 4.66665 3.70156 4.66665 3.33337Z" fill="#008078"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M4.66665 8.00004C4.66665 7.63185 4.96512 7.33337 5.33331 7.33337H14C14.3682 7.33337 14.6666 7.63185 14.6666 8.00004C14.6666 8.36823 14.3682 8.66671 14 8.66671H5.33331C4.96512 8.66671 4.66665 8.36823 4.66665 8.00004Z" fill="#008078"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M4.66665 12.6667C4.66665 12.2985 4.96512 12 5.33331 12H14C14.3682 12 14.6666 12.2985 14.6666 12.6667C14.6666 13.0349 14.3682 13.3334 14 13.3334H5.33331C4.96512 13.3334 4.66665 13.0349 4.66665 12.6667Z" fill="#008078"/> +</svg> diff --git a/browser/components/pocket/content/panels/img/open.svg b/browser/components/pocket/content/panels/img/open.svg new file mode 100644 index 0000000000..49406f04ba --- /dev/null +++ b/browser/components/pocket/content/panels/img/open.svg @@ -0,0 +1,3 @@ +<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M3.83333 2.16667C3.39131 2.16667 2.96738 2.34226 2.65482 2.65482C2.34226 2.96738 2.16667 3.39131 2.16667 3.83333V12.1667C2.16667 12.6087 2.34226 13.0326 2.65482 13.3452C2.96738 13.6577 3.39131 13.8333 3.83333 13.8333H12.1667C12.6087 13.8333 13.0326 13.6577 13.3452 13.3452C13.6577 13.0326 13.8333 12.6087 13.8333 12.1667V11.3333C13.8333 11.1123 13.9211 10.9004 14.0774 10.7441C14.2337 10.5878 14.4457 10.5 14.6667 10.5C14.8877 10.5 15.0996 10.5878 15.2559 10.7441C15.4122 10.9004 15.5 11.1123 15.5 11.3333V12.1667C15.5 13.0507 15.1488 13.8986 14.5237 14.5237C13.8986 15.1488 13.0507 15.5 12.1667 15.5H3.83333C2.94928 15.5 2.10143 15.1488 1.47631 14.5237C0.851189 13.8986 0.5 13.0507 0.5 12.1667V3.83333C0.5 2.94928 0.851189 2.10143 1.47631 1.47631C2.10143 0.851189 2.94928 0.5 3.83333 0.5H4.66667C4.88768 0.5 5.09964 0.587797 5.25592 0.744078C5.4122 0.900358 5.5 1.11232 5.5 1.33333C5.5 1.55435 5.4122 1.76631 5.25592 1.92259C5.09964 2.07887 4.88768 2.16667 4.66667 2.16667H3.83333ZM8.83333 2.16667C8.61232 2.16667 8.40036 2.07887 8.24408 1.92259C8.0878 1.76631 8 1.55435 8 1.33333C8 1.11232 8.0878 0.900358 8.24408 0.744078C8.40036 0.587797 8.61232 0.5 8.83333 0.5H14.6667C14.8877 0.5 15.0996 0.587797 15.2559 0.744078C15.4122 0.900358 15.5 1.11232 15.5 1.33333V7.16667C15.5 7.38768 15.4122 7.59964 15.2559 7.75592C15.0996 7.9122 14.8877 8 14.6667 8C14.4457 8 14.2337 7.9122 14.0774 7.75592C13.9211 7.59964 13.8333 7.38768 13.8333 7.16667V3.345L8.58917 8.58917C8.432 8.74096 8.2215 8.82496 8.003 8.82306C7.7845 8.82116 7.57549 8.73352 7.42098 8.57901C7.26648 8.42451 7.17884 8.2155 7.17694 7.997C7.17504 7.7785 7.25904 7.568 7.41083 7.41083L12.655 2.16667H8.83333Z" fill="#0C0C0D" fill-opacity="0.8"/> +</svg> diff --git a/browser/components/pocket/content/panels/img/pocketerror@1x.png b/browser/components/pocket/content/panels/img/pocketerror@1x.png Binary files differnew file mode 100644 index 0000000000..059812678a --- /dev/null +++ b/browser/components/pocket/content/panels/img/pocketerror@1x.png diff --git a/browser/components/pocket/content/panels/img/pocketerror@2x.png b/browser/components/pocket/content/panels/img/pocketerror@2x.png Binary files differnew file mode 100644 index 0000000000..f462f30a6c --- /dev/null +++ b/browser/components/pocket/content/panels/img/pocketerror@2x.png diff --git a/browser/components/pocket/content/panels/img/pocketlogo-dark.svg b/browser/components/pocket/content/panels/img/pocketlogo-dark.svg new file mode 100644 index 0000000000..7ec3f7dac0 --- /dev/null +++ b/browser/components/pocket/content/panels/img/pocketlogo-dark.svg @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> +<svg width="100%" height="100%" viewBox="0 0 91 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"> + <g> + <rect x="2.51" y="8.703" width="9.226" height="6.26" style="fill:white;"/> + <path d="M12.721,5.709L1.353,5.709C1.179,5.705 1.005,5.736 0.843,5.799C0.68,5.863 0.531,5.958 0.406,6.079C0.28,6.2 0.179,6.345 0.11,6.505C0.04,6.665 0.003,6.838 0,7.012L0,11.221C0,15.035 3.148,18.21 7.037,18.21C8.89,18.204 10.665,17.466 11.976,16.157C13.286,14.848 14.025,13.073 14.033,11.221L14.033,7.012C14.034,6.84 14,6.67 13.935,6.511C13.869,6.352 13.772,6.207 13.65,6.086C13.528,5.965 13.383,5.869 13.224,5.804C13.064,5.739 12.893,5.707 12.721,5.709ZM11.024,10.926L7.677,14.073C7.595,14.16 7.495,14.229 7.385,14.275C7.275,14.322 7.157,14.346 7.037,14.345C6.91,14.348 6.784,14.326 6.665,14.279C6.547,14.233 6.44,14.163 6.349,14.073L3.052,10.926C2.874,10.741 2.775,10.494 2.775,10.237C2.775,9.98 2.874,9.733 3.052,9.548C3.42,9.203 4.035,9.154 4.405,9.548L7.037,12.083L9.719,9.548C10.064,9.154 10.679,9.203 11.031,9.548C11.197,9.739 11.289,9.983 11.289,10.237C11.289,10.49 11.197,10.735 11.031,10.926L11.024,10.926Z" style="fill:rgb(239,64,86);"/> + <path d="M90.161,15.823C89.924,15.84 89.699,15.935 89.521,16.093C89.176,16.388 88.758,16.683 88.168,16.683C87.159,16.683 86.594,16.068 86.594,14.666L86.594,7.082L89.719,7.13C90.163,7.13 90.458,6.86 90.458,6.442C90.458,5.999 90.163,5.728 89.719,5.728L86.594,5.752L86.594,3.224C86.594,2.732 86.249,2.387 85.831,2.387C85.722,2.387 85.614,2.408 85.514,2.451C85.414,2.493 85.323,2.555 85.247,2.633C85.172,2.711 85.112,2.804 85.073,2.905C85.034,3.007 85.016,3.115 85.019,3.224L85.019,5.757L83.691,5.734C83.595,5.728 83.5,5.742 83.41,5.775C83.321,5.809 83.24,5.861 83.172,5.929C83.105,5.997 83.052,6.078 83.019,6.167C82.985,6.256 82.971,6.352 82.977,6.447C82.976,6.54 82.993,6.632 83.029,6.718C83.064,6.804 83.117,6.882 83.184,6.946C83.251,7.011 83.331,7.061 83.418,7.094C83.505,7.126 83.598,7.141 83.691,7.136L85.018,7.082L85.018,14.715C85.018,17.102 86.47,18.21 88.143,18.21C88.581,18.222 89.018,18.142 89.424,17.977C89.83,17.812 90.198,17.564 90.504,17.25C90.677,17.053 90.849,16.831 90.849,16.536C90.855,16.443 90.843,16.349 90.811,16.261C90.779,16.173 90.729,16.093 90.664,16.026C90.599,15.958 90.52,15.905 90.434,15.871C90.347,15.836 90.254,15.819 90.16,15.823" style="fill:white;"/> + <path d="M82.484,11.246C82.484,8.492 80.072,5.586 76.845,5.586C73.35,5.586 70.742,8.471 70.742,11.934C70.742,15.398 73.399,18.21 76.87,18.21C78.592,18.21 80.265,17.57 81.372,16.487C81.618,16.241 81.815,15.97 81.815,15.7C81.821,15.604 81.807,15.509 81.773,15.419C81.74,15.33 81.687,15.249 81.62,15.182C81.552,15.114 81.471,15.062 81.382,15.028C81.293,14.994 81.197,14.98 81.102,14.986C80.847,14.991 80.602,15.086 80.412,15.256C79.378,16.167 78.321,16.683 76.871,16.683C74.611,16.683 72.595,14.964 72.386,12.401L81.173,12.401C82.016,12.401 82.484,11.959 82.484,11.246ZM72.432,11.049C72.794,8.466 74.702,7.115 76.849,7.115C79.137,7.115 80.736,9.035 80.834,11.049L72.432,11.049Z" style="fill:white;"/> + <path d="M64.959,11.312L69.54,7.186C69.958,6.816 70.008,6.275 69.688,5.93C69.343,5.561 68.826,5.66 68.458,6.004L62.232,11.845L62.232,0.935C62.232,0.369 61.986,0 61.469,0C60.902,0 60.632,0.369 60.632,0.935L60.632,17.298C60.632,17.84 60.952,18.21 61.469,18.21C61.936,18.21 62.232,17.84 62.232,17.298L62.232,13.771L63.827,12.328L68.853,17.913C69.173,18.258 69.714,18.382 70.058,18.062C70.451,17.693 70.329,17.2 70.034,16.856L64.959,11.312Z" style="fill:white;"/> + <path d="M57.728,14.321C57.507,14.321 57.262,14.493 57.114,14.69C56.425,15.601 54.948,16.683 53.3,16.683C50.838,16.683 48.723,14.74 48.723,11.935C48.723,8.932 50.838,7.136 53.3,7.136C55.095,7.136 56.08,7.997 56.917,9.006C56.992,9.106 57.089,9.189 57.199,9.248C57.31,9.308 57.432,9.343 57.557,9.351C57.925,9.351 58.295,9.081 58.295,8.711C58.295,8.441 58.122,8.169 57.975,7.948C56.965,6.496 55.268,5.659 53.3,5.659C51.643,5.668 50.057,6.334 48.89,7.51C47.723,8.686 47.07,10.278 47.074,11.935C47.074,15.355 49.879,18.21 53.3,18.21C55.415,18.21 57.234,16.978 58.195,15.7C58.353,15.522 58.448,15.297 58.467,15.06C58.471,14.962 58.454,14.864 58.419,14.773C58.383,14.681 58.329,14.598 58.259,14.529C58.19,14.46 58.107,14.405 58.016,14.37C57.924,14.334 57.827,14.318 57.728,14.321Z" style="fill:white;"/> + <path d="M39.372,16.683C36.837,16.683 34.721,14.543 34.721,11.934C34.721,9.301 36.837,7.111 39.372,7.111C41.955,7.111 44.022,9.301 44.022,11.934C44.022,14.543 41.955,16.683 39.372,16.683ZM39.42,5.586C38.587,5.584 37.762,5.747 36.993,6.066C36.223,6.385 35.524,6.853 34.936,7.443C34.349,8.033 33.883,8.734 33.567,9.505C33.252,10.276 33.092,11.101 33.096,11.934C33.096,15.405 35.85,18.21 39.42,18.21C42.767,18.21 45.671,15.405 45.671,11.934C45.671,8.464 42.742,5.586 39.42,5.586Z" style="fill:white;"/> + <path d="M25.419,16.683C22.885,16.683 20.769,14.543 20.769,11.934C20.769,9.301 22.885,7.111 25.419,7.111C28.003,7.111 30.07,9.301 30.07,11.934C30.07,14.543 28.003,16.683 25.419,16.683ZM25.443,5.586C23.523,5.586 21.826,6.669 20.619,8.121L20.57,6.397C20.546,5.782 20.25,5.487 19.807,5.487C19.34,5.487 19.02,5.857 19.02,6.374L19.02,23.161C19.015,23.27 19.031,23.379 19.07,23.482C19.108,23.584 19.167,23.678 19.244,23.756C19.32,23.835 19.411,23.897 19.513,23.938C19.614,23.98 19.723,24 19.832,23.997C20.324,23.997 20.619,23.628 20.619,23.136L20.619,15.798C21.826,17.225 23.523,18.21 25.443,18.21C26.266,18.212 27.082,18.051 27.843,17.737C28.605,17.422 29.296,16.959 29.877,16.376C30.458,15.792 30.918,15.099 31.23,14.337C31.542,13.575 31.7,12.758 31.694,11.934C31.694,8.464 28.94,5.586 25.444,5.586" style="fill:white;"/> + </g> +</svg> diff --git a/browser/components/pocket/content/panels/img/pocketlogo.svg b/browser/components/pocket/content/panels/img/pocketlogo.svg new file mode 100644 index 0000000000..4b8dc67d6c --- /dev/null +++ b/browser/components/pocket/content/panels/img/pocketlogo.svg @@ -0,0 +1,16 @@ +<svg width="91" height="24" viewBox="0 0 91 24" fill="none" xmlns="http://www.w3.org/2000/svg"> +<g clip-path="url(#clip0)"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0243 10.9259L7.67738 14.0734C7.59482 14.1599 7.49547 14.2286 7.38541 14.2752C7.27536 14.3219 7.15692 14.3456 7.03738 14.3449C6.91026 14.3482 6.78379 14.3258 6.66549 14.2792C6.5472 14.2326 6.43951 14.1626 6.34885 14.0734L3.0518 10.9259C2.87395 10.7405 2.77463 10.4936 2.77463 10.2367C2.77463 9.9798 2.87395 9.73286 3.0518 9.5475C3.42033 9.20259 4.03541 9.15406 4.40525 9.5475L7.03738 12.0826L9.71934 9.5475C10.0643 9.15406 10.6793 9.20259 11.0308 9.5475C11.1972 9.73853 11.2889 9.98333 11.2889 10.2367C11.2889 10.49 11.1972 10.7348 11.0308 10.9259H11.0243ZM12.7213 5.70881H1.35344C1.17883 5.70499 1.00519 5.73573 0.842512 5.79927C0.679831 5.86281 0.531322 5.9579 0.405531 6.07906C0.279741 6.20022 0.179152 6.34506 0.109555 6.50524C0.0399574 6.66543 0.00272483 6.83779 0 7.01242L0 11.2209C0 15.0347 3.14754 18.2098 7.03738 18.2098C8.88984 18.2043 10.6649 17.4664 11.9755 16.1571C13.286 14.8478 14.0255 13.0734 14.0328 11.2209V7.01242C14.0337 6.84032 14.0003 6.66976 13.9346 6.51069C13.8689 6.35161 13.7722 6.2072 13.6501 6.08588C13.5281 5.96455 13.3831 5.86872 13.2236 5.80399C13.0642 5.73925 12.8934 5.7069 12.7213 5.70881Z" fill="#EF4056"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M90.1613 15.8229C89.9241 15.8402 89.6992 15.9351 89.5213 16.0931C89.1764 16.3882 88.7581 16.6832 88.1679 16.6832C87.1594 16.6832 86.5941 16.0682 86.5941 14.6662V7.08192L89.7194 7.13045C90.1626 7.13045 90.4577 6.86028 90.4577 6.44192C90.4577 5.99865 90.1626 5.72848 89.7194 5.72848L86.5941 5.75209V3.22356C86.5941 2.73176 86.2492 2.38684 85.8308 2.38684C85.722 2.38661 85.6143 2.40828 85.5141 2.45056C85.4138 2.49285 85.3231 2.55488 85.2474 2.63296C85.1716 2.71104 85.1124 2.80357 85.0731 2.90503C85.0339 3.0065 85.0155 3.11483 85.019 3.22356V5.75733L83.6905 5.73373C83.5952 5.72756 83.4997 5.74179 83.4103 5.77546C83.321 5.80913 83.2398 5.86148 83.1723 5.929C83.1048 5.99652 83.0524 6.07766 83.0188 6.16702C82.9851 6.25637 82.9709 6.35188 82.977 6.44717C82.9755 6.54015 82.9931 6.63246 83.0287 6.71835C83.0643 6.80425 83.1172 6.8819 83.1841 6.94648C83.2511 7.01105 83.3305 7.06118 83.4176 7.09373C83.5047 7.12628 83.5976 7.14056 83.6905 7.13569L85.0177 7.08192V14.7147C85.0177 17.1016 86.4695 18.2098 88.143 18.2098C88.5814 18.2216 89.0176 18.1424 89.4239 17.9771C89.8302 17.8119 90.1978 17.5642 90.5036 17.2498C90.6767 17.0531 90.8485 16.8314 90.8485 16.5363C90.8554 16.443 90.8426 16.3493 90.8107 16.2613C90.7789 16.1732 90.7289 16.0929 90.6639 16.0256C90.5989 15.9583 90.5204 15.9054 90.4336 15.8705C90.3468 15.8355 90.2535 15.8193 90.16 15.8229" fill="#363636"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M82.484 11.2459C82.484 8.4918 80.0722 5.58557 76.8446 5.58557C73.3495 5.58557 70.7423 8.47082 70.7423 11.9344C70.7423 15.398 73.3994 18.2098 76.8695 18.2098C78.5915 18.2098 80.2649 17.5698 81.3718 16.4866C81.6184 16.2413 81.8151 15.9698 81.8151 15.6997C81.8213 15.6044 81.807 15.5089 81.7734 15.4195C81.7397 15.3302 81.6874 15.249 81.6198 15.1815C81.5523 15.114 81.4712 15.0616 81.3818 15.028C81.2925 14.9943 81.197 14.9801 81.1017 14.9862C80.8467 14.9906 80.6019 15.0865 80.4118 15.2564C79.3784 16.1666 78.3213 16.6833 76.8708 16.6833C74.6112 16.6833 72.5954 14.9639 72.3856 12.4013H81.1725C82.0158 12.4013 82.484 11.9593 82.484 11.2459ZM72.4315 11.0492C72.7935 8.46557 74.7017 7.11475 76.8485 7.11475C79.1371 7.11475 80.7358 9.03475 80.8341 11.0492H72.4315Z" fill="#363636"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M64.9587 11.3115L69.5397 7.18557C69.958 6.81574 70.0079 6.27541 69.6879 5.93049C69.343 5.56066 68.8262 5.66033 68.4577 6.00393L62.2321 11.8452V0.935082C62.2321 0.368525 61.9856 0 61.4689 0C60.9023 0 60.6321 0.368525 60.6321 0.935082V17.2984C60.6321 17.84 60.9521 18.2098 61.4689 18.2098C61.9357 18.2098 62.2321 17.84 62.2321 17.2984V13.7705L63.8269 12.3279L68.8525 17.9134C69.1725 18.2584 69.7141 18.3816 70.0577 18.0616C70.4511 17.6931 70.3292 17.2 70.0341 16.8564L64.9587 11.3115Z" fill="#363636"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M57.7285 14.3213C57.5069 14.3213 57.2616 14.4932 57.1135 14.6899C56.4249 15.6013 54.9482 16.6833 53.2997 16.6833C50.838 16.6833 48.7226 14.7397 48.7226 11.9345C48.7226 8.9325 50.838 7.13578 53.2997 7.13578C55.0951 7.13578 56.08 7.99742 56.9167 9.00594C56.9923 9.10609 57.0886 9.18874 57.1991 9.24827C57.3095 9.30779 57.4315 9.34279 57.5567 9.35086C57.9253 9.35086 58.2951 9.08069 58.2951 8.71086C58.2951 8.4407 58.122 8.16922 57.9751 7.94758C56.9653 6.49578 55.2682 5.65906 53.2997 5.65906C51.6427 5.66808 50.0569 6.33372 48.8899 7.51006C47.7229 8.6864 47.0699 10.2775 47.0741 11.9345C47.0741 15.3548 49.8794 18.2099 53.2997 18.2099C55.4151 18.2099 57.2341 16.9784 58.1954 15.6997C58.353 15.5215 58.4483 15.2969 58.4669 15.0597C58.4708 14.9617 58.4543 14.864 58.4186 14.7726C58.3829 14.6813 58.3286 14.5983 58.2593 14.529C58.1899 14.4596 58.1069 14.4054 58.0156 14.3697C57.9243 14.3339 57.8265 14.3175 57.7285 14.3213Z" fill="#363636"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M39.3718 16.6833C36.8367 16.6833 34.7213 14.543 34.7213 11.9344C34.7213 9.30099 36.8367 7.11083 39.3718 7.11083C41.9554 7.11083 44.0223 9.30099 44.0223 11.9344C44.0223 14.543 41.9554 16.6833 39.3718 16.6833ZM39.4203 5.58558C38.5873 5.58401 37.7622 5.74734 36.9927 6.06615C36.2231 6.38496 35.5242 6.85295 34.9363 7.44314C34.3485 8.03332 33.8832 8.73403 33.5674 9.50487C33.2517 10.2757 33.0916 11.1014 33.0964 11.9344C33.0964 15.4046 35.8505 18.2098 39.4203 18.2098C42.7672 18.2098 45.6708 15.4046 45.6708 11.9344C45.6708 8.46427 42.7423 5.58558 39.4203 5.58558Z" fill="#363636"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M25.419 16.6832C22.8852 16.6832 20.7685 14.5429 20.7685 11.9344C20.7685 9.30095 22.8852 7.11079 25.419 7.11079C28.0026 7.11079 30.0695 9.30095 30.0695 11.9344C30.0695 14.5429 28.0026 16.6832 25.419 16.6832ZM25.4426 5.58554C23.5226 5.58554 21.8255 6.66882 20.619 8.12063L20.5704 6.39735C20.5455 5.78226 20.2504 5.48718 19.8072 5.48718C19.3403 5.48718 19.0203 5.85702 19.0203 6.37374V23.1606C19.0145 23.2699 19.0313 23.3792 19.0697 23.4817C19.1081 23.5842 19.1673 23.6777 19.2435 23.7562C19.3197 23.8348 19.4113 23.8967 19.5126 23.9382C19.6139 23.9797 19.7227 23.9998 19.8321 23.9973C20.3239 23.9973 20.619 23.6275 20.619 23.1357V15.798C21.8255 17.2249 23.5226 18.2098 25.4426 18.2098C26.2662 18.2123 27.0822 18.0514 27.8434 17.7366C28.6045 17.4218 29.2958 16.9593 29.8771 16.3758C30.4584 15.7923 30.9183 15.0993 31.2303 14.337C31.5422 13.5746 31.6999 12.7581 31.6944 11.9344C31.6944 8.46423 28.9403 5.58554 25.4439 5.58554" fill="#363636"/> +</g> +<defs> +<clipPath id="clip0"> +<rect width="90.8852" height="24" fill="white"/> +</clipPath> +</defs> +</svg> diff --git a/browser/components/pocket/content/panels/img/pocketlogo@1x.png b/browser/components/pocket/content/panels/img/pocketlogo@1x.png Binary files differnew file mode 100644 index 0000000000..4ae1a84dc9 --- /dev/null +++ b/browser/components/pocket/content/panels/img/pocketlogo@1x.png diff --git a/browser/components/pocket/content/panels/img/pocketlogo@2x.png b/browser/components/pocket/content/panels/img/pocketlogo@2x.png Binary files differnew file mode 100644 index 0000000000..86d4264d06 --- /dev/null +++ b/browser/components/pocket/content/panels/img/pocketlogo@2x.png diff --git a/browser/components/pocket/content/panels/img/pocketlogosolo@1x.png b/browser/components/pocket/content/panels/img/pocketlogosolo@1x.png Binary files differnew file mode 100644 index 0000000000..0af50f1f10 --- /dev/null +++ b/browser/components/pocket/content/panels/img/pocketlogosolo@1x.png diff --git a/browser/components/pocket/content/panels/img/pocketlogosolo@2x.png b/browser/components/pocket/content/panels/img/pocketlogosolo@2x.png Binary files differnew file mode 100644 index 0000000000..e3e203172f --- /dev/null +++ b/browser/components/pocket/content/panels/img/pocketlogosolo@2x.png diff --git a/browser/components/pocket/content/panels/img/pocketsignup_button@1x.png b/browser/components/pocket/content/panels/img/pocketsignup_button@1x.png Binary files differnew file mode 100644 index 0000000000..e0cb05a51a --- /dev/null +++ b/browser/components/pocket/content/panels/img/pocketsignup_button@1x.png diff --git a/browser/components/pocket/content/panels/img/pocketsignup_button@2x.png b/browser/components/pocket/content/panels/img/pocketsignup_button@2x.png Binary files differnew file mode 100644 index 0000000000..6f26cee95d --- /dev/null +++ b/browser/components/pocket/content/panels/img/pocketsignup_button@2x.png diff --git a/browser/components/pocket/content/panels/img/pocketsignup_devices@1x.png b/browser/components/pocket/content/panels/img/pocketsignup_devices@1x.png Binary files differnew file mode 100644 index 0000000000..effa073c60 --- /dev/null +++ b/browser/components/pocket/content/panels/img/pocketsignup_devices@1x.png diff --git a/browser/components/pocket/content/panels/img/pocketsignup_devices@2x.png b/browser/components/pocket/content/panels/img/pocketsignup_devices@2x.png Binary files differnew file mode 100644 index 0000000000..8a539070ad --- /dev/null +++ b/browser/components/pocket/content/panels/img/pocketsignup_devices@2x.png diff --git a/browser/components/pocket/content/panels/img/pocketsignup_hero@1x.png b/browser/components/pocket/content/panels/img/pocketsignup_hero@1x.png Binary files differnew file mode 100644 index 0000000000..6659c0843c --- /dev/null +++ b/browser/components/pocket/content/panels/img/pocketsignup_hero@1x.png diff --git a/browser/components/pocket/content/panels/img/pocketsignup_hero@2x.png b/browser/components/pocket/content/panels/img/pocketsignup_hero@2x.png Binary files differnew file mode 100644 index 0000000000..d31d610f54 --- /dev/null +++ b/browser/components/pocket/content/panels/img/pocketsignup_hero@2x.png diff --git a/browser/components/pocket/content/panels/img/rainbow-reader.svg b/browser/components/pocket/content/panels/img/rainbow-reader.svg new file mode 100644 index 0000000000..ce3cf54fb4 --- /dev/null +++ b/browser/components/pocket/content/panels/img/rainbow-reader.svg @@ -0,0 +1,53 @@ +<svg width="1938" height="1582" viewBox="0 0 1938 1582" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M1461.32 1426.8C1454.1 1422.3 1146.65 1471.97 1074.52 1436.32C1015.76 1407.28 1200.23 1296.48 1119.97 1258.75C940.505 1174.37 731.498 1081.71 601.243 1040.93C216.007 920.323 165.122 735.534 192.019 595.482C218.917 455.43 303.451 546.425 410.72 449.639C517.99 352.852 859.97 149.024 1160.64 159.921C1461.32 170.817 1608.61 177.547 1621.74 291.319C1634.87 405.091 1555.14 473.675 1383.51 441.627C1211.88 409.578 996.699 379.773 1029.36 339.713C1062.02 299.332 1068.35 285.871 1125.02 291.319C1149.54 293.676 1092.9 317.3 1130.37 303.839C1167.83 290.379 1106.54 268.848 1074.52 265.964C1042.5 263.4 1130.37 281.915 962.451 339.713C786.017 428.166 678.413 454.446 654.398 562.129C630.382 669.811 791.126 879.408 1008.87 991.257C1226.61 1103.11 1542.01 1265.91 1528.24 1293.15C1514.79 1320.39 1461.32 1426.8 1461.32 1426.8Z" fill="#F9BFD1"/> +<path d="M1514.79 1320.39C1516.08 1318.15 772.876 1018.5 525.997 935.492C279.118 852.487 179.808 685.256 217.272 551.294C254.736 417.331 345.401 340.674 632.626 231.709C919.851 122.744 1420.33 80.7608 1527.92 172.74C1635.51 264.719 1752.71 401.566 1621.74 455.087C1621.74 455.087 1176.02 450.279 1117.74 415.026C1059.46 380.093 977.475 337.976 1010.14 313.939C1042.8 289.903 1227.57 345.16 1352.45 353.173C1477.33 361.185 1574.03 319.201 1421.29 274.333C1268.56 229.466 1097.25 232.029 959.557 274.333C856.45 306.061 767.113 363.748 670.731 425.602C574.348 487.455 480.528 556.68 496.538 672.054C512.548 787.429 798.493 787.749 978.449 855.051C1158.4 922.353 1563.47 1223.61 1563.47 1223.61L1514.79 1320.39Z" fill="#EF4056"/> +<path d="M1531.44 1257.58C1517.99 1239.95 1118.7 1010.81 719.079 900.56C319.461 790.634 170.866 677.503 237.469 476.559C287.101 326.893 249.656 465.983 364.93 377.53C480.204 289.076 719.719 71.1465 1111.33 87.8117C1502.94 104.477 1659.52 133.32 1707.88 211.198C1756.23 289.076 1817.71 401.566 1707.88 423.038C1598.05 444.511 1366.54 461.176 1236.85 433.614C1086.68 401.886 920.219 326.098 939.432 315.202C939.432 315.202 1220.73 368.923 1275.92 377.413C1331.11 385.903 1538.81 412.142 1573.71 358.621C1608.61 305.1 1517.35 227.222 1364.61 211.198C1211.88 195.174 1029.68 167.612 802.332 264.078C656.318 325.611 547.448 412.142 453.627 476.559C338.033 556.039 348.92 676.862 496.535 672.055C644.15 667.247 1122.86 884.536 1237.17 919.469C1351.49 954.401 1593.88 1143.17 1593.88 1143.17L1531.44 1257.58Z" fill="#FCB643"/> +<path d="M1561.54 1161.11C1561.54 1161.11 1209.64 916.584 949.63 863.063C689.622 809.542 308.897 774.93 252.861 602.189C192.982 417.59 319.784 530.08 319.784 530.08C339.316 519.504 319.784 455.728 464.837 339.071C616.295 217.287 793.369 143.576 1062.34 138.448C1331.32 133.32 1542.33 149.024 1626.23 218.89C1690.91 272.731 1744.06 417.59 1540.41 425.602C1336.76 433.614 1046.14 358.973 978.573 324.04C910.689 289.107 888.933 356.865 1189.14 463.099C1342.2 500.595 1680.34 546.425 1755.27 455.087C1830.2 363.749 1910.57 167.933 1594.21 100.951C1277.84 33.9703 876.303 15.0617 633.586 100.951C390.87 186.841 298.01 337.148 287.443 447.075C276.876 557.001 363.332 664.042 454.271 681.349C545.529 698.655 965.961 701.86 1084.12 736.792C1202.27 771.725 1469.65 977.476 1509.35 1029.72C1549.06 1081.95 1593.89 1143.17 1593.89 1143.17L1561.54 1161.11Z" fill="#1CB0A8"/> +<path d="M1491.76 970.721C1409.14 887.075 1254.16 686.451 976.225 609.856C703.409 534.862 516.408 553.771 437.958 550.886C107.825 538.067 198.764 354.43 242.312 293.217C285.86 232.005 467.737 59.584 1011.77 30.4199C1558.68 0.935356 1949.97 124.322 1933.96 324.945C1917.95 525.568 1553.24 593.831 1322.69 542.874C976.225 466.297 859.662 340.103 874.072 321.515C888.161 302.606 963.711 342.977 1074.81 397.266C1185.91 451.554 1759.77 572.359 1797.23 357.634C1834.7 142.91 1464.86 89.389 1135.37 83.9408C831.812 79.1335 534.66 201.879 384.483 312.126C318.521 360.519 127.037 643.827 534.66 714.654C942.283 785.481 1068.44 728.114 1274.34 864.961C1480.23 1001.81 1576.15 1134.07 1584.3 1123.59C1592.45 1113.12 1574.37 1054.37 1491.76 970.721Z" fill="#95D2FF"/> +<path d="M420.905 288.277C420.905 288.277 80.9147 480.592 697.039 565.48C820.319 619.001 477.902 698.099 410.338 679.511C346.297 661.884 182.991 540.499 198.041 426.727C221.736 244.371 420.905 288.277 420.905 288.277Z" fill="#A5CFEE"/> +<path d="M1071.99 317.727C987.153 322.777 848.949 386.324 790.452 417.466C790.452 403.579 798.532 369.238 830.853 342.977C871.254 310.152 957.105 255.863 1071.99 258.389C1186.88 260.914 1178.05 311.414 1071.99 317.727Z" fill="#FFC0D1"/> +<path d="M661.199 1326.31C661.199 1326.31 593.272 1229.47 417.811 1292.06C417.811 1292.06 321.114 1287.8 276.352 1313.71C276.352 1313.71 317.078 1254.55 336.682 1214.55C356.285 1174.54 384.234 1125.5 384.234 1125.5L288.856 1051.34L276.352 1059.83L250.222 1026.26L238.066 1044.99L186.828 1157.4C186.828 1157.4 84.8746 1291.86 40.1127 1345.1C-4.64912 1398.33 -21.4379 1454.27 40.1127 1490.66C101.663 1527.03 192.283 1533.46 299.443 1529.75C680.778 1516.6 680.778 1516.6 680.778 1516.6L661.199 1326.31Z" fill="#95D2FF"/> +<path d="M1438.72 1379.35L1395 1291.04L1515.09 1023.52L1582.96 1106.17L1438.72 1379.35ZM1286.25 1409.98L1294.74 1314.46L1373.68 1309.57L1405.31 1391.7L1286.25 1409.98ZM1265.15 1395.04L1237.13 1402.76L1251.27 1322.43H1274.41L1265.15 1395.04ZM1515.34 981.022L1374.7 1287.41H1237.15L1211.69 1449.09L1456.23 1428.49L1620 1102.78L1515.34 981.022Z" fill="white"/> +<path d="M1399.38 1291.02L1438.99 1370.83L1578.36 1106.66L1516.13 1030.72L1399.38 1291.02ZM1438.72 1383.21C1437.17 1383.21 1435.88 1382.43 1435.38 1381.14L1391.66 1292.83C1391.14 1291.81 1391.14 1290.52 1391.66 1289.5L1511.75 1021.97C1512.27 1020.68 1513.54 1019.9 1514.84 1019.66C1516.13 1019.41 1517.4 1019.9 1518.45 1020.95L1586.33 1103.6C1587.35 1104.89 1587.35 1106.44 1586.85 1107.98L1442.6 1381.16C1441.53 1382.43 1440.26 1383.21 1438.72 1383.21ZM1254.36 1326.31L1242.03 1397.38L1261.83 1391.97L1270.05 1326.31H1254.36ZM1236.88 1406.62C1235.85 1406.62 1235.08 1406.37 1234.31 1405.6C1233.29 1404.83 1232.77 1403.28 1233.01 1401.99L1247.16 1321.65C1247.41 1319.86 1248.96 1318.57 1251.02 1318.57H1274.16C1275.19 1318.57 1276.23 1319.09 1277 1319.86C1277.78 1320.63 1278.03 1321.93 1278.03 1322.95L1268.76 1395.56C1268.51 1397.1 1267.46 1398.4 1265.92 1398.9L1237.9 1406.62C1237.65 1406.62 1237.37 1406.62 1236.88 1406.62ZM1298.33 1318.32L1290.61 1405.6L1400.13 1388.86L1371.09 1313.68L1298.33 1318.32ZM1286.25 1413.84C1285.22 1413.84 1284.45 1413.59 1283.68 1412.82C1282.91 1412.05 1282.39 1410.76 1282.39 1409.73L1290.88 1314.21C1291.13 1312.41 1292.67 1310.87 1294.49 1310.6L1373.43 1305.71C1374.97 1305.71 1376.77 1306.48 1377.29 1308.28L1408.92 1390.4C1409.45 1391.43 1409.17 1392.72 1408.67 1393.74C1408.18 1394.76 1407.13 1395.54 1405.84 1395.54L1286.79 1413.82C1286.5 1413.84 1286.5 1413.84 1286.25 1413.84ZM1240.21 1291.29L1216.05 1445.01L1453.64 1424.93L1615.1 1103.35L1516.36 987.996L1378.04 1288.97C1377.51 1290.27 1375.97 1291.29 1374.42 1291.29H1240.21ZM1211.67 1452.98C1210.65 1452.98 1209.6 1452.45 1208.83 1451.68C1208.06 1450.91 1207.53 1449.61 1207.81 1448.34L1233.26 1286.66C1233.51 1284.86 1235.06 1283.32 1237.12 1283.32H1372.38L1512.25 978.979C1512.77 977.683 1513.79 976.911 1515.34 976.662C1516.63 976.413 1517.9 976.911 1518.67 977.957L1623.07 1099.74C1624.09 1101.03 1624.36 1102.58 1623.59 1104.12L1459.81 1429.84C1459.29 1431.13 1458.02 1431.9 1456.72 1431.9L1212.19 1452.5C1211.67 1452.98 1211.67 1452.98 1211.67 1452.98Z" fill="white"/> +<path d="M1296.78 1345.1C1294.72 1345.1 1293.17 1343.55 1292.92 1341.48C1292.67 1339.42 1294.22 1337.62 1296.53 1337.37L1380.35 1330.42C1382.42 1330.17 1384.21 1331.72 1384.46 1334.04C1384.71 1336.1 1383.17 1337.9 1380.85 1338.15L1297.03 1345.1H1296.78Z" fill="white"/> +<path d="M1326.87 1403.03C1324.81 1403.03 1323.26 1401.49 1323.01 1399.7L1314.79 1319.89C1314.54 1317.82 1316.09 1315.78 1318.13 1315.78C1320.2 1315.53 1322.24 1317.07 1322.24 1319.12L1330.46 1398.92C1330.71 1400.99 1329.16 1403.03 1327.12 1403.03C1327.37 1403.03 1327.12 1403.03 1326.87 1403.03Z" fill="white"/> +<path d="M1361.57 1401.99C1359.78 1401.99 1358.23 1400.69 1357.71 1398.9L1340.22 1316.5C1339.7 1314.43 1341 1312.39 1343.31 1311.87C1345.38 1311.34 1347.42 1312.64 1347.95 1314.95L1365.43 1397.35C1365.96 1399.42 1364.66 1401.46 1362.34 1401.99C1362.09 1401.99 1361.85 1401.99 1361.57 1401.99Z" fill="white"/> +<path d="M1293.94 1383.21C1291.88 1383.21 1290.33 1381.66 1290.08 1379.87C1289.83 1377.8 1291.38 1375.76 1293.42 1375.76L1388.82 1365.72C1390.89 1365.47 1392.93 1367.02 1392.93 1369.06C1393.18 1371.13 1391.64 1373.17 1389.59 1373.17L1294.19 1383.21C1294.22 1383.21 1294.22 1383.21 1293.94 1383.21Z" fill="white"/> +<path d="M1211.67 1125.47C1211.67 1125.47 1205.24 1153.54 1231.47 1171.83C1245.62 1181.62 1236.6 1195.27 1219.14 1188.04C1188.8 1175.69 1194.46 1151.48 1194.46 1151.48" fill="white"/> +<path d="M1228.13 1193.97C1225.04 1193.97 1221.46 1193.2 1217.6 1191.66C1184.69 1178.28 1190.35 1150.98 1190.59 1150.73L1198.04 1152.52C1197.79 1153.29 1193.68 1173.65 1220.41 1184.71C1227.61 1187.55 1232.74 1186.5 1234.04 1183.93C1235.06 1181.87 1234.04 1178.53 1229.15 1175.19C1200.88 1155.61 1207.56 1124.97 1207.81 1124.72L1215.25 1126.52L1211.39 1125.75L1215.25 1126.52C1215.01 1127.54 1209.85 1152.27 1233.51 1169.01C1243.03 1175.44 1243.28 1183.19 1240.71 1187.82C1238.92 1191.13 1234.56 1193.97 1228.13 1193.97Z" fill="white"/> +<path d="M1141.75 965.578C1090.83 951.928 1057.93 981.022 1025.27 1052.09C1009.58 1085.81 1007.79 1122.63 1021.16 1148.14C1035.81 1176.21 1071.06 1198.85 1085.45 1208.64C1112.95 1226.93 1185.46 1201.69 1205.54 1145.3C1225.57 1088.41 1236.35 991.06 1141.75 965.578Z" fill="white"/> +<path d="M1118.86 966.1C1083.63 966.1 1056.63 993.127 1028.86 1053.63C1013.44 1086.59 1011.9 1122.13 1024.5 1146.32C1037.88 1171.8 1069.24 1192.92 1084.41 1203.21L1087.5 1205.28C1097.53 1211.98 1116.04 1212.23 1135.32 1205.8C1159.76 1197.56 1190.1 1177.23 1201.65 1143.75C1208.08 1125.47 1227.36 1062.13 1202.95 1015.52C1190.87 992.604 1170.04 976.911 1140.73 968.915C1133.25 967.371 1125.81 966.1 1118.86 966.1ZM1108.57 1218.41C1098.53 1218.41 1089.54 1216.09 1083.11 1211.98L1080.02 1209.91C1064.33 1199.35 1031.67 1177.21 1017.55 1150.18C1003.68 1123.92 1005.47 1085.81 1021.66 1050.79C1056.88 974.071 1091.85 948.315 1142.5 961.965C1173.86 970.459 1196.5 987.447 1209.6 1012.43C1234.81 1060.58 1217.32 1122.38 1208.58 1146.84C1195.98 1182.64 1163.59 1204.78 1137.36 1213.52C1127.6 1216.86 1117.56 1218.41 1108.57 1218.41Z" fill="white"/> +<path d="M1108.82 895.036C1137.86 887.837 1176.17 891.424 1189.05 913.32C1201.65 935.215 1181.85 978.98 1132.73 991.858C1083.61 1004.74 1059.45 977.187 1059.97 941.915C1060.22 915.885 1108.82 895.036 1108.82 895.036Z" fill="#010101"/> +<path d="M1188.53 1139.12C1191.37 1139.12 1193.41 1136.8 1193.41 1134.24C1193.41 1131.4 1191.09 1129.36 1188.53 1129.36C1185.69 1129.36 1183.65 1131.67 1183.65 1134.24C1183.65 1136.8 1185.71 1139.12 1188.53 1139.12Z" fill="#010101"/> +<path d="M1141.75 965.578C1078.23 957.856 1057.93 981.022 1025.27 1052.09C1009.58 1085.81 1007.79 1122.63 1021.16 1148.11C1026.29 1158.15 1034.54 1167.69 1043.01 1175.91C1059.2 1174.89 1074.64 1166.64 1079.77 1163.81C1089.54 1158.15 1089.04 1147.59 1088.27 1134.19C1087.5 1120.81 1091.88 1110.25 1099.08 1100.98C1106.28 1091.47 1120.92 1087.61 1137.91 1098.67C1154.88 1109.48 1171.86 1116.95 1196.27 1110C1203.72 1107.93 1210.67 1103.57 1217.1 1098.17C1224.52 1045.39 1215.28 974.346 1141.75 965.578Z" fill="#010101"/> +<path d="M1119.63 967.896C1075.41 967.896 1057.41 991.061 1028.86 1053.63C1013.44 1086.59 1011.9 1122.11 1024.5 1146.32C1028.61 1154.57 1035.31 1163.06 1044.3 1171.8C1057.93 1170.51 1071.06 1164.08 1077.73 1160.22C1084.93 1156.11 1084.93 1148.11 1084.16 1134.46V1133.94C1083.39 1120.81 1087.25 1109.23 1095.74 1098.15C1103.71 1087.58 1120.43 1082.43 1139.71 1095.06C1157.44 1106.39 1172.88 1112.05 1194.98 1106.12C1201.93 1104.32 1208.36 1099.94 1213.24 1096.08C1220.69 1040.98 1205.27 1011.11 1195.23 997.986C1182.9 981.77 1164.64 971.981 1140.98 969.141C1133.5 968.419 1126.3 967.896 1119.63 967.896ZM1041.46 1180.05L1040.17 1178.75C1029.88 1168.96 1022.43 1159.17 1017.55 1149.91C1003.93 1123.65 1005.47 1085.54 1021.66 1050.52C1055.34 976.888 1077.46 953.697 1142 961.693C1167.7 964.782 1187.51 975.344 1201.38 993.353C1226.59 1026.06 1224.27 1073.44 1220.66 1098.67L1220.41 1100.21L1219.12 1101.23C1213.46 1105.87 1205.74 1111.52 1196.75 1113.59C1169.5 1121.31 1150.72 1111.52 1135.3 1101.76C1119.11 1091.2 1107.02 1095.83 1101.62 1103.05C1094.17 1112.84 1091.08 1122.63 1091.58 1133.94V1134.46C1092.35 1147.84 1092.88 1160.72 1081.04 1167.17C1073.32 1171.55 1058.43 1178.75 1042.48 1179.77L1041.46 1180.05Z" fill="black"/> +<path d="M1147.65 1208.89C1146.36 1208.89 1145.33 1208.37 1144.56 1207.35C1125.78 1181.87 1137.89 1139.64 1138.39 1137.83C1138.91 1135.76 1141.22 1134.74 1143.27 1135.26C1145.34 1135.78 1146.36 1138.1 1145.83 1140.14C1145.83 1140.67 1134.25 1180.3 1150.72 1202.71C1152.01 1204.51 1151.74 1206.82 1149.94 1208.12C1149.2 1208.64 1148.42 1208.89 1147.65 1208.89Z" fill="#010101"/> +<path d="M1219.14 1251.89L1215.03 1252.13C1214.26 1246.98 1213.49 1241.57 1211.69 1236.69C1206.56 1221.25 1194.73 1231.81 1194.73 1231.81C1193.18 1225.38 1191.12 1217.64 1188.55 1208.89C1181.6 1184.43 1171.31 1184.68 1169.02 1203.24C1168.25 1209.66 1169.02 1220.5 1170.32 1232.08C1168.25 1231.31 1166.98 1231.31 1166.98 1231.31C1166.98 1231.31 1152.33 1233.38 1150.02 1258.09C1147.7 1283.32 1160.83 1301.85 1160.83 1301.85L1167.01 1393.25L1218.94 1387.59C1235.9 1359.79 1236.95 1325.29 1236.95 1301.33C1236.63 1277.89 1219.14 1251.89 1219.14 1251.89Z" fill="white"/> +<path d="M1167.21 1235.42C1165.41 1235.94 1155.62 1239.28 1153.83 1258.59C1151.76 1282.03 1163.87 1299.51 1163.87 1299.79L1164.39 1300.56V1301.58L1170.29 1389.11L1216.33 1384.23C1230.72 1359.52 1232.79 1329.9 1232.79 1301.58C1232.79 1282.77 1220.96 1261.92 1217.1 1255.5L1211.44 1256.02L1210.92 1252.41C1210.15 1246.75 1209.13 1241.85 1207.83 1237.74C1207.06 1235.42 1205.76 1232.58 1203.72 1232.08C1201.41 1231.56 1198.07 1233.63 1197.05 1234.4L1192.41 1238.51L1190.87 1232.33C1189.57 1226.68 1187.53 1218.96 1184.69 1209.66C1181.08 1196.54 1176.97 1193.45 1176.2 1193.45C1175.67 1193.7 1173.63 1195.77 1172.59 1203.49C1172.06 1209.14 1172.59 1218.93 1173.88 1231.29L1174.65 1237.21L1169 1235.42C1168.23 1235.67 1167.45 1235.42 1167.21 1235.42ZM1163.34 1397.88L1156.92 1303.4C1154.08 1299.29 1144.06 1281.25 1146.11 1258.09C1148.42 1233.1 1162.82 1228.47 1165.91 1227.97C1165.14 1219.73 1164.37 1209.94 1165.14 1203.26C1166.93 1189.09 1172.59 1186.52 1175.67 1186.27C1180.31 1186.03 1186.98 1189.36 1192.14 1208.17C1194.21 1215.12 1195.75 1221.05 1197.02 1225.93C1199.34 1224.91 1202.43 1224.14 1205.76 1224.91C1210.12 1225.93 1213.21 1229.54 1215.28 1235.47C1216.58 1239.08 1217.6 1243.19 1218.12 1247.83L1220.96 1247.58L1222.25 1249.37C1223.03 1250.39 1240.51 1276.67 1240.51 1301.63C1240.51 1331.74 1238.2 1363.16 1222.01 1389.93L1220.98 1391.48L1163.34 1397.88Z" fill="white"/> +<path d="M1161.03 1307.76C1159.73 1307.76 1158.71 1307.23 1157.94 1306.21C1157.42 1305.44 1144.06 1286.14 1146.36 1259.86C1148.92 1231.78 1165.89 1229.74 1166.66 1229.47C1168.73 1229.22 1170.77 1230.76 1171.02 1232.8C1171.27 1234.87 1169.72 1236.91 1167.68 1237.19C1167.16 1237.19 1156.1 1239.26 1154.05 1260.63C1151.99 1284.07 1164.09 1301.55 1164.09 1301.83C1165.39 1303.62 1164.86 1305.94 1163.07 1307.23C1162.57 1307.51 1161.8 1307.76 1161.03 1307.76Z" fill="white"/> +<path d="M1177.74 1281.25C1175.95 1281.25 1174.4 1279.96 1173.88 1278.16C1173.36 1275.85 1163.07 1222.54 1165.14 1203.24C1166.68 1190.88 1171.04 1187.27 1174.4 1186.5C1176.47 1185.97 1180.58 1185.97 1184.94 1191.65C1187.51 1194.99 1190.07 1200.92 1192.14 1208.39C1194.98 1217.66 1197.02 1225.65 1198.32 1231.31C1201.16 1242.89 1203.2 1252.43 1204.49 1263.74C1204.74 1265.81 1203.2 1267.85 1201.16 1268.12C1199.09 1268.37 1197.05 1266.83 1196.8 1264.79C1195.5 1253.73 1193.46 1244.44 1190.62 1233.38C1189.08 1227.72 1187.28 1220 1184.44 1210.71C1182.13 1201.97 1179.81 1198.1 1178.54 1196.54C1177.24 1194.74 1176.22 1194.22 1175.97 1194.22C1175.45 1194.47 1173.41 1196.78 1172.64 1204.51C1170.84 1222.54 1181.38 1276.59 1181.38 1277.12C1181.9 1279.18 1180.36 1281.23 1178.29 1281.75C1178.24 1281.25 1177.99 1281.25 1177.74 1281.25Z" fill="#010101"/> +<path d="M1219.14 1394.02C1218.37 1394.02 1217.85 1393.77 1217.07 1393.49C1215.28 1392.47 1214.76 1389.88 1215.78 1388.09C1230.95 1363.1 1233.26 1332.74 1233.26 1303.9C1233.26 1281.23 1216.03 1252.13 1215.78 1251.88C1214.76 1250.09 1215.25 1247.77 1217.07 1246.48C1218.87 1245.46 1221.18 1245.96 1222.48 1247.77C1223.25 1249.07 1240.99 1278.94 1240.99 1303.65C1240.99 1333.76 1238.67 1365.17 1222.48 1391.95C1221.71 1393.24 1220.41 1394.02 1219.14 1394.02Z" fill="#010101"/> +<path d="M1211.67 1452.73C1209.6 1452.73 1208.06 1451.18 1207.81 1449.12C1207.56 1447.05 1209.1 1445.01 1211.42 1445.01L1453.89 1424.66L1615.35 1103.08L1512.5 983.364C1511.2 981.82 1511.2 979.254 1513.02 977.959C1514.56 976.663 1517.13 976.664 1518.43 978.482L1622.82 1100.01C1623.84 1101.31 1624.11 1102.85 1623.34 1104.4L1459.56 1430.11C1459.04 1431.41 1457.77 1432.18 1456.48 1432.18L1211.94 1452.78C1211.67 1452.73 1211.67 1452.73 1211.67 1452.73Z" fill="black"/> +<path d="M631.607 1309.05C631.607 1309.05 872.778 1175.16 944.516 1162.04C1016.25 1148.91 1030.4 1166.15 1064.08 1192.67C1150.47 1260.38 1135.57 1293.86 1139.41 1383.45L1161.25 1314.46C1162.27 1311.62 1165.88 1309.82 1168.45 1311.62C1182.08 1318.81 1239.17 1341.73 1244.3 1360.01C1244.3 1360.01 1350.24 1597.67 1110.59 1580.16C1024.52 1573.89 981.407 1512.58 981.407 1512.58C981.407 1512.58 832.375 1567.04 708.452 1557.25C514.509 1522.9 631.607 1309.05 631.607 1309.05Z" fill="#00CB77"/> +<path d="M1117.31 1432.13C1115 1432.13 1113.45 1430.06 1113.45 1428.02C1119.36 1312.66 1079.77 1258.61 1079.25 1258.09C1077.96 1256.29 1078.23 1253.98 1080.02 1252.68C1081.82 1251.39 1084.13 1251.66 1085.43 1253.45C1087.22 1255.77 1127.35 1310.1 1121.17 1428.54C1121.17 1430.58 1119.38 1432.13 1117.31 1432.13Z" fill="#010101"/> +<path d="M1106.5 1475.89C1106.25 1475.89 1106.25 1475.89 1105.98 1475.89C1103.91 1475.64 1102.37 1473.58 1102.64 1471.51C1108.54 1424.13 1155.35 1317.54 1157.42 1312.91C1158.19 1310.84 1160.5 1310.07 1162.55 1310.84C1164.61 1311.62 1165.39 1313.93 1164.61 1316C1164.09 1317.02 1116.27 1426.2 1110.36 1472.55C1110.11 1474.6 1108.57 1475.89 1106.5 1475.89Z" fill="#010101"/> +<path d="M987.211 1516.57C985.916 1516.57 984.894 1516.05 984.122 1515.03C958.416 1481.3 942.972 1425.68 938.862 1349.73C935.774 1293.33 939.884 1246.23 940.158 1245.71C940.407 1243.64 942.225 1242.1 944.268 1242.1C946.335 1242.35 947.879 1244.16 947.879 1246.21C947.63 1248 931.165 1432.63 990.574 1510.12C991.869 1511.91 991.595 1514.23 989.802 1515.52C989.004 1516.32 987.983 1516.57 987.211 1516.57Z" fill="#010101"/> +<path d="M1216.05 1275.33C1213.74 1275.33 1212.19 1273.53 1212.19 1271.22C1212.19 1270.97 1212.96 1251.39 1207.83 1236.96C1203.47 1224.61 1194.73 1224.61 1194.21 1224.61C1192.14 1224.61 1190.35 1222.82 1190.35 1220.75C1190.35 1218.68 1191.89 1216.89 1193.96 1216.89C1194.48 1216.89 1208.6 1216.64 1215.03 1234.4C1220.69 1250.37 1219.91 1270.69 1219.91 1271.46C1219.91 1273.78 1218.09 1275.33 1216.05 1275.33Z" fill="#010101"/> +<path d="M1067.17 987.972C1054.84 987.972 1042.24 982.318 1029.88 971.233C1017.03 959.401 1009.31 945.751 1008.81 945.228C1007.79 943.435 1008.29 941.118 1010.35 940.072C1012.15 939.051 1014.46 939.549 1015.48 941.616C1015.73 942.139 1044.8 992.605 1080.8 977.66C1082.86 976.888 1084.91 977.66 1085.93 979.727C1086.7 981.795 1085.93 983.837 1083.86 984.884C1078.48 986.951 1072.82 987.972 1067.17 987.972Z" fill="#010101"/> +<path d="M1118.08 1021.97C1117.84 1021.97 1117.84 1021.97 1118.08 1021.97C1079.25 1020.68 1041.21 943.709 1039.67 940.346C1038.65 938.552 1039.42 936.236 1041.46 935.19C1043.26 934.168 1045.57 934.94 1046.6 936.983C1046.6 937.232 1056.11 956.562 1069.98 975.592C1087.72 1000.3 1104.43 1013.7 1118.33 1014.2C1120.4 1014.2 1122.19 1016 1121.95 1018.31C1121.67 1020.43 1120.15 1021.97 1118.08 1021.97Z" fill="#010101"/> +<path d="M1215.78 1035.62C1194.7 1026.11 1184.42 1111.84 1184.42 1111.84C1184.42 1111.84 1251 1117 1251.52 1111.84C1254.86 1091.74 1252.29 1051.56 1215.78 1035.62Z" fill="#010101"/> +<path d="M1188.8 1108.21C1214.26 1110 1241.51 1111.05 1248.18 1109.5C1248.96 1103.33 1249.98 1088.65 1245.1 1073.46C1239.69 1057.24 1229.4 1045.91 1214.23 1039.21C1212.94 1038.69 1211.92 1038.69 1210.62 1039.46C1200.61 1044.89 1192.14 1083 1188.8 1108.21ZM1231.99 1118C1221.46 1118 1206.29 1117.22 1184.17 1115.68C1183.15 1115.68 1182.1 1115.16 1181.6 1114.39C1181.1 1113.61 1180.58 1112.59 1180.83 1111.55C1181.6 1104.6 1189.32 1042.8 1207.06 1032.76C1210.4 1030.96 1214.01 1030.69 1217.6 1032.23C1255.38 1048.72 1259.24 1090.42 1255.66 1112.57C1255.13 1114.66 1254.86 1118 1231.99 1118Z" fill="black"/> +<path d="M593.272 1420.37C596.709 1467.18 625.031 1513.86 638.731 1531.42L644.959 1526.56C631.682 1509.57 604.406 1464.36 601.143 1419.8L593.272 1420.37ZM630.187 1299.71C623.288 1310.15 613.224 1328.56 605.328 1350.13C597.432 1371.67 591.553 1396.73 593.272 1420.37L601.143 1419.8C599.524 1397.73 605.029 1373.89 612.726 1352.84C620.423 1331.84 630.187 1313.98 636.763 1304.07L630.187 1299.71ZM638.731 1531.42C640.076 1533.14 642.542 1533.43 644.261 1532.09C645.98 1530.74 646.279 1528.28 644.934 1526.56L638.731 1531.42ZM636.763 1304.07C637.959 1302.25 637.461 1299.81 635.642 1298.59C633.824 1297.4 631.383 1297.89 630.162 1299.71L636.763 1304.07Z" fill="black"/> +<path d="M281.259 952.476C281.259 952.476 280.313 956.536 285.867 962.315C291.397 968.069 306.617 966.5 311.873 972.03C317.128 977.56 318.598 991.434 324.203 999.729C329.807 1008.05 337.081 1011.21 337.081 1011.21L394.148 955.117L321.886 821.628C321.886 821.628 285.593 753.476 281.209 750.786C276.825 748.096 269.901 763.963 270.847 781.649C271.819 799.359 281.06 879.168 281.259 904.127C281.459 929.111 281.259 952.476 281.259 952.476Z" fill="#EF4056"/> +<path d="M273.861 750.015C273.861 750.015 294.536 763.565 319.196 828.255C343.756 892.62 394.521 970.735 389.639 962.316C384.558 953.573 395.393 969.988 394.148 955.117C392.902 940.246 318.175 780.753 296.304 757.014C288.832 748.894 280.387 737.759 280.387 744.46C280.387 751.185 273.861 750.015 273.861 750.015Z" fill="#FCB643"/> +<path d="M356.411 988.17C356.411 988.17 372.901 1000.9 386.551 1024.06C400.201 1047.23 414.325 1064.34 414.325 1064.34L472.537 1000.52L387.124 813.307C387.124 813.307 376.612 803.095 375.043 813.307C374.246 818.414 372.901 849.974 368.467 892.319C367.445 902.034 395.194 933.519 394.248 942.636C391.034 973.449 356.411 988.17 356.411 988.17Z" fill="#EF4056"/> +<path d="M376.213 819.337C376.213 819.337 397.834 863.152 409.691 891.648C421.548 920.144 426.031 938.154 436.867 959.476C447.678 980.798 459.908 1010.51 461.353 1014.05C462.797 1017.59 472.138 1012.26 472.537 1002.97C472.936 993.676 445.71 926.147 436.867 907.341C428.024 888.534 406.378 833.037 399.03 819.312C391.682 805.612 387.123 788.873 380.298 793.63C373.473 798.413 371.804 807.579 376.213 819.337Z" fill="#FCB643"/> +<path d="M314.114 926.221C319.395 913.742 334.889 919.097 336.682 929.186C338.451 939.274 334.316 946.398 325.398 946.398C316.481 946.398 307.588 941.64 314.114 926.221Z" fill="#95D2FF"/> +<path d="M571.825 1310.02C571.825 1310.02 530.326 1307.76 509.751 1316.08C487.432 1325.12 552.321 1355.71 566.843 1361.83" stroke="black" stroke-width="7.47276" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> +<path d="M333.992 990.661C333.992 990.661 372.128 978.555 389.639 962.314C407.15 946.074 376.014 914.339 358.503 877.349C340.991 840.384 323.48 788.149 299.443 757.013C275.405 725.876 268.431 745.853 271.37 792.832C274.309 839.811 280.661 883.203 281.458 929.11C281.458 929.11 270.772 993.202 244.045 1038.71" stroke="black" stroke-width="7.47276" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> +<path d="M194.301 1157.4C194.301 1157.4 256.848 1077.37 306.616 1035.27C356.385 993.178 389.639 962.315 389.639 962.315" stroke="black" stroke-width="7.47276" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> +<path d="M367.47 1113.91C367.47 1113.91 401.695 1075.4 431.238 1045.24C446.507 1029.64 464.168 1016.27 467.506 1011.61C477.245 997.985 475.277 996.79 459.734 958.479C444.166 920.169 416.143 861.757 409.417 846.811C389.216 801.875 381.893 764.486 373.947 822.873C365.228 886.965 368.516 894.786 368.516 894.786" stroke="black" stroke-width="7.47276" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> +<path d="M288.857 1051.31L384.234 1125.47" stroke="black" stroke-width="7.47276" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> +<path d="M274.384 921.987C274.384 921.987 251.069 889.032 241.553 850.124C232.038 811.216 265.616 852.964 281.259 923.332" stroke="black" stroke-width="7.47276" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> +<path d="M281.259 923.308C281.259 923.308 256.151 917.056 222.972 908.96C189.792 900.865 191.412 878.82 214.079 886.592C236.721 894.413 281.259 923.308 281.259 923.308Z" stroke="black" stroke-width="7.47276" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> +</svg>
\ No newline at end of file diff --git a/browser/components/pocket/content/panels/img/signup_firefoxlogo@1x.png b/browser/components/pocket/content/panels/img/signup_firefoxlogo@1x.png Binary files differnew file mode 100644 index 0000000000..d8c9474477 --- /dev/null +++ b/browser/components/pocket/content/panels/img/signup_firefoxlogo@1x.png diff --git a/browser/components/pocket/content/panels/img/signup_firefoxlogo@2x.png b/browser/components/pocket/content/panels/img/signup_firefoxlogo@2x.png Binary files differnew file mode 100644 index 0000000000..c027d53d3f --- /dev/null +++ b/browser/components/pocket/content/panels/img/signup_firefoxlogo@2x.png diff --git a/browser/components/pocket/content/panels/img/signup_help@1x.png b/browser/components/pocket/content/panels/img/signup_help@1x.png Binary files differnew file mode 100644 index 0000000000..e11d56b6a8 --- /dev/null +++ b/browser/components/pocket/content/panels/img/signup_help@1x.png diff --git a/browser/components/pocket/content/panels/img/signup_help@2x.png b/browser/components/pocket/content/panels/img/signup_help@2x.png Binary files differnew file mode 100644 index 0000000000..2b37abf0e0 --- /dev/null +++ b/browser/components/pocket/content/panels/img/signup_help@2x.png diff --git a/browser/components/pocket/content/panels/img/tag_close@1x.png b/browser/components/pocket/content/panels/img/tag_close@1x.png Binary files differnew file mode 100644 index 0000000000..334ad03f70 --- /dev/null +++ b/browser/components/pocket/content/panels/img/tag_close@1x.png diff --git a/browser/components/pocket/content/panels/img/tag_close@2x.png b/browser/components/pocket/content/panels/img/tag_close@2x.png Binary files differnew file mode 100644 index 0000000000..c6834cc305 --- /dev/null +++ b/browser/components/pocket/content/panels/img/tag_close@2x.png diff --git a/browser/components/pocket/content/panels/img/tag_closeactive@1x.png b/browser/components/pocket/content/panels/img/tag_closeactive@1x.png Binary files differnew file mode 100644 index 0000000000..196004b2f8 --- /dev/null +++ b/browser/components/pocket/content/panels/img/tag_closeactive@1x.png diff --git a/browser/components/pocket/content/panels/img/tag_closeactive@2x.png b/browser/components/pocket/content/panels/img/tag_closeactive@2x.png Binary files differnew file mode 100644 index 0000000000..a1512f6ada --- /dev/null +++ b/browser/components/pocket/content/panels/img/tag_closeactive@2x.png diff --git a/browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.jsx b/browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.jsx new file mode 100644 index 0000000000..25679bc638 --- /dev/null +++ b/browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.jsx @@ -0,0 +1,139 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * 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, { useState } from "react"; +import TelemetryLink from "../TelemetryLink/TelemetryLink"; + +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 ( + <div className="stp_article_list_saved_article">{props.children}</div> + ); + } + return ( + <TelemetryLink + className="stp_article_list_link" + href={props.url} + source={props.source} + position={props.position} + model={props.model} + > + {props.children} + </TelemetryLink> + ); +} + +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 [thumbnailLoaded, setThumbnailLoaded] = useState(false); + const [thumbnailLoadFailed, setThumbnailLoadFailed] = useState(false); + + const { + article, + savedArticle, + position, + source, + model, + utmParams, + openInPocketReader, + } = props; + + if (!article.url && !article.resolved_url && !article.given_url) { + return null; + } + const url = new URL(article.url || article.resolved_url || article.given_url); + const urlSearchParams = new URLSearchParams(utmParams); + + if ( + openInPocketReader && + article.item_id && + !url.href.match(/getpocket\.com\/read/) + ) { + url.href = `https://getpocket.com/read/${article.item_id}`; + } + + for (let [key, val] of urlSearchParams.entries()) { + url.searchParams.set(key, val); + } + + // 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 || article.given_title; + // Sometimes domain_metadata is not there, depending on the source. + const publisher = + article.publisher || + article.domain_metadata?.name || + article.resolved_domain; + + return ( + <li className="stp_article_list_item"> + <ArticleUrl + url={url.href} + savedArticle={savedArticle} + position={position} + source={source} + model={model} + utmParams={utmParams} + > + <> + {thumbnail && !thumbnailLoadFailed ? ( + <img + className="stp_article_list_thumb" + src={thumbnail} + alt={alt} + width="40" + height="40" + onLoad={() => { + setThumbnailLoaded(true); + }} + onError={() => { + setThumbnailLoadFailed(true); + }} + style={{ + visibility: thumbnailLoaded ? `visible` : `hidden`, + }} + /> + ) : ( + <div className="stp_article_list_thumb_placeholder" /> + )} + <div className="stp_article_list_meta"> + <header className="stp_article_list_header">{title}</header> + <p className="stp_article_list_publisher">{publisher}</p> + </div> + </> + </ArticleUrl> + </li> + ); +} + +function ArticleList(props) { + return ( + <ul className="stp_article_list"> + {props.articles?.map((article, position) => ( + <Article + article={article} + savedArticle={props.savedArticle} + position={position} + source={props.source} + model={props.model} + utmParams={props.utmParams} + openInPocketReader={props.openInPocketReader} + /> + ))} + </ul> + ); +} + +export default ArticleList; diff --git a/browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.scss b/browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.scss new file mode 100644 index 0000000000..261367433d --- /dev/null +++ b/browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.scss @@ -0,0 +1,65 @@ +.stp_article_list { + padding: 0; + list-style: none; + + .stp_article_list_saved_article, + .stp_article_list_link { + display: flex; + border-radius: 4px; + padding: 8px; + margin: 0 -8px; + } + + .stp_article_list_link { + &:hover, &:focus { + text-decoration: none; + background-color: #ECECEE; + + @include theme_dark { + background-color: #2B2A33; + } + } + } + + .stp_article_list_thumb, + .stp_article_list_thumb_placeholder { + width: 40px; + height: 40px; + border-radius: 4px; + margin-inline-end: 8px; + background-color: #ECECEE; + flex-shrink: 0; + } + + .stp_article_list_header { + font-style: normal; + font-weight: 600; + font-size: 0.95rem; + line-height: 1.18rem; + 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; + } + } + + .stp_article_list_publisher { + font-style: normal; + font-weight: normal; + font-size: 0.95rem; + line-height: 1.18rem; + color: #52525E; + margin: 4px 0 0; + + @include theme_dark { + color: #CFCFD8; + } + } +} diff --git a/browser/components/pocket/content/panels/js/components/Button/Button.jsx b/browser/components/pocket/content/panels/js/components/Button/Button.jsx new file mode 100644 index 0000000000..7f3d2ea7ce --- /dev/null +++ b/browser/components/pocket/content/panels/js/components/Button/Button.jsx @@ -0,0 +1,21 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * 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 TelemetryLink from "../TelemetryLink/TelemetryLink"; + +function Button(props) { + return ( + <TelemetryLink + href={props.url} + onClick={props.onClick} + className={`stp_button${props?.style && ` stp_button_${props.style}`}`} + source={props.source} + > + {props.children} + </TelemetryLink> + ); +} + +export default Button; diff --git a/browser/components/pocket/content/panels/js/components/Button/Button.scss b/browser/components/pocket/content/panels/js/components/Button/Button.scss new file mode 100644 index 0000000000..c6001e19da --- /dev/null +++ b/browser/components/pocket/content/panels/js/components/Button/Button.scss @@ -0,0 +1,142 @@ +.stp_button { + cursor: pointer; + display: inline-block; + margin: 12px 0; + + &:hover { + text-decoration: none; + } + + &.stp_button_text { + color: #0060DF; + font-size: 0.95rem; + line-height: 1.2rem; + font-style: normal; + font-weight: 600; + + &:focus { + text-decoration: underline; + } + + &:hover { + color: #0250BB; + text-decoration: none; + } + + &:active { + color: #054096; + } + + @include theme_dark { + color: #00DDFF; + } + } + + &.stp_button_primary { + align-items: center; + background: #0060DF; + border-radius: 4px; + color: #FBFBFE; + font-size: 0.85rem; + line-height: 1rem; + font-style: normal; + font-weight: 600; + justify-content: center; + padding: 6px 12px; + + &:focus { + text-decoration: none; + background: #0060DF; + outline: 2px solid #0060df; + outline-offset: 2px; + } + + &:hover { + background: #0250BB; + } + + &:active { + background: #054096; + } + + @include theme_dark { + background: #00DDFF; + color: #15141A; + + &:hover { + background: #80ebfe; + } + + &:focus { + outline: 2px solid #00DDFF; + } + } + } + + &.stp_button_secondary { + align-items: center; + background: #F0F0F4; + border-radius: 4px; + color: #15141A; + font-size: 0.85rem; + line-height: 1rem; + font-style: normal; + font-weight: 600; + padding: 6px 12px; + + &:focus { + text-decoration: none; + background: #F0F0F4; + outline: 2px solid #0060df; + outline-offset: 2px; + } + + &:hover { + background: #E0E0E6; + } + + &:active { + background: #CFCFD8; + } + + @include theme_dark { + background: #2B2A33; + color: #FBFBFE; + + &:focus { + outline: 2px solid #00DDFF; + } + + &:hover { + background: #53535d; + } + } + } +} + +.stp_button_wide { + .stp_button { + display: block; + margin: 12px 0; + text-align: center; + padding: 8px 12px; + + &.stp_button_primary { + font-size: 1.1rem; + line-height: 1.35rem; + } + + &.stp_button_secondary { + font-size: 0.85rem; + line-height: 1rem; + } + } +} + +.stp_button_wide { + .stp_button { + display: block; + margin: 12px 0; + text-align: center; + } +} diff --git a/browser/components/pocket/content/panels/js/components/Header/Header.jsx b/browser/components/pocket/content/panels/js/components/Header/Header.jsx new file mode 100644 index 0000000000..be60fe764c --- /dev/null +++ b/browser/components/pocket/content/panels/js/components/Header/Header.jsx @@ -0,0 +1,16 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * 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"; + +function Header(props) { + return ( + <h1 className="stp_header"> + <div className="stp_header_logo" /> + {props.children} + </h1> + ); +} + +export default Header; diff --git a/browser/components/pocket/content/panels/js/components/Header/Header.scss b/browser/components/pocket/content/panels/js/components/Header/Header.scss new file mode 100644 index 0000000000..f6e4eca9d5 --- /dev/null +++ b/browser/components/pocket/content/panels/js/components/Header/Header.scss @@ -0,0 +1,22 @@ +.stp_header { + display: flex; + justify-content: space-between; + align-items: center; + margin: 16px 0 12px; + font-weight: 600; + + .stp_header_logo { + background: url(../img/pocketlogo.svg) bottom center no-repeat; + background-size: contain; + height: 32px; + width: 121px; + + @include theme_dark { + background-image: url(../img/pocketlogo-dark.svg); + } + } + + .stp_button { + margin: 0; + } +} diff --git a/browser/components/pocket/content/panels/js/components/Home/Home.jsx b/browser/components/pocket/content/panels/js/components/Home/Home.jsx new file mode 100644 index 0000000000..b2c4baea09 --- /dev/null +++ b/browser/components/pocket/content/panels/js/components/Home/Home.jsx @@ -0,0 +1,166 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * 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, { useState, useEffect } from "react"; +import Header from "../Header/Header"; +import ArticleList from "../ArticleList/ArticleList"; +import PopularTopics from "../PopularTopics/PopularTopics"; +import Button from "../Button/Button"; +import panelMessaging from "../../messages"; + +function Home(props) { + const { + locale, + topics, + pockethost, + hideRecentSaves, + utmSource, + utmCampaign, + utmContent, + } = props; + const [{ articles, status }, setArticlesState] = useState({ + articles: [], + // Can be success, loading, or error. + status: "", + }); + + const utmParams = `utm_source=${utmSource}${ + utmCampaign && utmContent + ? `&utm_campaign=${utmCampaign}&utm_content=${utmContent}` + : `` + }`; + + useEffect(() => { + if (!hideRecentSaves) { + // We don't display the loading message until instructed. This is because cache + // loads should be fast, so using the loading message for cache just adds loading jank. + panelMessaging.addMessageListener("PKT_loadingRecentSaves", function( + resp + ) { + setArticlesState({ + articles, + status: "loading", + }); + }); + + panelMessaging.addMessageListener("PKT_renderRecentSaves", function( + resp + ) { + const { data } = resp; + + if (data.status === "error") { + setArticlesState({ + articles: [], + status: "error", + }); + return; + } + + setArticlesState({ + articles: data, + status: "success", + }); + }); + } + + // tell back end we're ready + panelMessaging.sendMessage("PKT_show_home"); + }, []); + + let recentSavesSection = null; + + if (status === "error" || hideRecentSaves) { + recentSavesSection = ( + <h3 + className="header_medium" + data-l10n-id="pocket-panel-home-new-user-cta" + /> + ); + } else if (status === "loading") { + recentSavesSection = ( + <span data-l10n-id="pocket-panel-home-most-recent-saves-loading" /> + ); + } else if (status === "success") { + if (articles?.length) { + recentSavesSection = ( + <> + <h3 + className="header_medium" + data-l10n-id="pocket-panel-home-most-recent-saves" + /> + {articles.length > 3 ? ( + <> + <ArticleList + articles={articles.slice(0, 3)} + source="home_recent_save" + utmParams={utmParams} + openInPocketReader={true} + /> + <span className="stp_button_wide"> + <Button + style="secondary" + url={`https://${pockethost}/a?${utmParams}`} + source="home_view_list" + > + <span data-l10n-id="pocket-panel-button-show-all" /> + </Button> + </span> + </> + ) : ( + <ArticleList + articles={articles} + source="home_recent_save" + utmParams={utmParams} + /> + )} + </> + ); + } else { + recentSavesSection = ( + <> + <h3 + className="header_medium" + data-l10n-id="pocket-panel-home-new-user-cta" + /> + <h3 + className="header_medium" + data-l10n-id="pocket-panel-home-new-user-message" + /> + </> + ); + } + } + + return ( + <div className="stp_panel_container"> + <div className="stp_panel stp_panel_home"> + <Header> + <Button + style="primary" + url={`https://${pockethost}/a?${utmParams}`} + source="home_view_list" + > + <span data-l10n-id="pocket-panel-header-my-saves" /> + </Button> + </Header> + <hr /> + {recentSavesSection} + <hr /> + {pockethost && locale?.startsWith("en") && topics?.length && ( + <> + <h3 className="header_medium">Explore popular topics:</h3> + <PopularTopics + topics={topics} + pockethost={pockethost} + utmParams={utmParams} + source="home_popular_topic" + /> + </> + )} + </div> + </div> + ); +} + +export default Home; diff --git a/browser/components/pocket/content/panels/js/components/PopularTopics/PopularTopics.jsx b/browser/components/pocket/content/panels/js/components/PopularTopics/PopularTopics.jsx new file mode 100644 index 0000000000..517bd6d53b --- /dev/null +++ b/browser/components/pocket/content/panels/js/components/PopularTopics/PopularTopics.jsx @@ -0,0 +1,27 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * 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 TelemetryLink from "../TelemetryLink/TelemetryLink"; + +function PopularTopics(props) { + return ( + <ul className="stp_popular_topics"> + {props.topics?.map((topic, position) => ( + <li key={`item-${topic.topic}`} className="stp_popular_topic"> + <TelemetryLink + className="stp_popular_topic_link" + href={`https://${props.pockethost}/explore/${topic.topic}?${props.utmParams}`} + source={props.source} + position={position} + > + {topic.title} + </TelemetryLink> + </li> + ))} + </ul> + ); +} + +export default PopularTopics; diff --git a/browser/components/pocket/content/panels/js/components/PopularTopics/PopularTopics.scss b/browser/components/pocket/content/panels/js/components/PopularTopics/PopularTopics.scss new file mode 100644 index 0000000000..bacd55ee42 --- /dev/null +++ b/browser/components/pocket/content/panels/js/components/PopularTopics/PopularTopics.scss @@ -0,0 +1,54 @@ +.stp_popular_topics { + padding: 0; + + .stp_popular_topic { + display: inline-block; + + .stp_popular_topic_link { + display: inline-block; + background: #F0F0F4; + border-radius: 4px; + font-size: 0.85rem; + line-height: 1rem; + font-style: normal; + font-weight: 600; + margin-inline-end: 8px; + margin-bottom: 8px; + padding: 4px 8px; + color: #000; + + &:focus { + text-decoration: none; + background: #F0F0F4; + outline: 2px solid #0060df; + outline-offset: 2px; + } + + &:hover { + background: #E0E0E6; + text-decoration: none; + } + + &:active { + background: #CFCFD8; + } + + &::after { + content: " >"; + } + + @include theme_dark { + background: #2B2A33; + color: #FBFBFE; + + &:focus { + outline: 2px solid #00DDFF; + } + + &:hover { + background: #53535d; + } + } + } + } +} diff --git a/browser/components/pocket/content/panels/js/components/Saved/Saved.jsx b/browser/components/pocket/content/panels/js/components/Saved/Saved.jsx new file mode 100644 index 0000000000..070df55ba4 --- /dev/null +++ b/browser/components/pocket/content/panels/js/components/Saved/Saved.jsx @@ -0,0 +1,203 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * 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, { useState, useEffect } from "react"; +import Header from "../Header/Header"; +import Button from "../Button/Button"; +import ArticleList from "../ArticleList/ArticleList"; +import TagPicker from "../TagPicker/TagPicker"; +import panelMessaging from "../../messages"; + +function Saved(props) { + const { locale, pockethost, utmSource, utmCampaign, utmContent } = props; + // savedStatus can be success, loading, or error. + const [ + { savedStatus, savedErrorId, itemId, itemUrl }, + setSavedStatusState, + ] = useState({ savedStatus: "loading" }); + // removedStatus can be removed, removing, or error. + const [ + { removedStatus, removedErrorMessage }, + setRemovedStatusState, + ] = useState({}); + const [savedStory, setSavedStoryState] = useState(); + const [articleInfoAttempted, setArticleInfoAttempted] = useState(); + const [{ similarRecs, similarRecsModel }, setSimilarRecsState] = useState({}); + const utmParams = `utm_source=${utmSource}${ + utmCampaign && utmContent + ? `&utm_campaign=${utmCampaign}&utm_content=${utmContent}` + : `` + }`; + + 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, + itemUrl: data.item?.given_url, + savedErrorId: "", + }); + }); + + panelMessaging.addMessageListener("PKT_articleInfoFetched", function(resp) { + setSavedStoryState(resp?.data?.item_preview); + }); + + panelMessaging.addMessageListener("PKT_getArticleInfoAttempted", function( + resp + ) { + setArticleInfoAttempted(true); + }); + + panelMessaging.addMessageListener("PKT_renderItemRecs", function(resp) { + const { data } = resp; + + // This is the ML model used to recommend the story. + // Right now this value is the same for all three items returned together, + // so we can just use the first item's value for all. + const model = data?.recommendations?.[0]?.experiment || ""; + setSimilarRecsState({ + similarRecs: data?.recommendations?.map(rec => rec.item), + similarRecsModel: model, + }); + }); + + // tell back end we're ready + panelMessaging.sendMessage("PKT_show_saved"); + }, []); + + if (savedStatus === "error") { + return ( + <div className="stp_panel_container"> + <div className="stp_panel stp_panel_error"> + <div className="stp_panel_error_icon" /> + <h3 + className="header_large" + data-l10n-id="pocket-panel-saved-error-not-saved" + /> + <p data-l10n-id={savedErrorId} /> + </div> + </div> + ); + } + + return ( + <div className="stp_panel_container"> + <div className="stp_panel stp_panel_saved"> + <Header> + <Button + style="primary" + url={`https://${pockethost}/a?${utmParams}`} + source="view_list" + > + <span data-l10n-id="pocket-panel-header-my-saves"></span> + </Button> + </Header> + <hr /> + {!removedStatus && savedStatus === "success" && ( + <> + <h3 className="header_large header_flex"> + <span data-l10n-id="pocket-panel-saved-page-saved-b" /> + <Button style="text" onClick={removeItem}> + <span data-l10n-id="pocket-panel-button-remove"></span> + </Button> + </h3> + {savedStory && ( + <ArticleList + articles={[savedStory]} + openInPocketReader={true} + utmParams={utmParams} + /> + )} + {articleInfoAttempted && <TagPicker tags={[]} itemUrl={itemUrl} />} + {articleInfoAttempted && + similarRecs?.length && + locale?.startsWith("en") && ( + <> + <hr /> + <h3 className="header_medium">Similar Stories</h3> + <ArticleList + articles={similarRecs} + source="on_save_recs" + model={similarRecsModel} + utmParams={utmParams} + /> + </> + )} + </> + )} + {savedStatus === "loading" && ( + <h3 + className="header_large" + data-l10n-id="pocket-panel-saved-saving-tags" + /> + )} + {removedStatus === "removing" && ( + <h3 + className="header_large header_center" + data-l10n-id="pocket-panel-saved-processing-remove" + /> + )} + {removedStatus === "removed" && ( + <h3 + className="header_large header_center" + data-l10n-id="pocket-panel-saved-removed-updated" + /> + )} + {removedStatus === "error" && ( + <> + <h3 + className="header_large" + data-l10n-id="pocket-panel-saved-error-remove" + /> + {removedErrorMessage && <p>{removedErrorMessage}</p>} + </> + )} + </div> + </div> + ); +} + +export default Saved; 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 0000000000..08003f14e1 --- /dev/null +++ b/browser/components/pocket/content/panels/js/components/Saved/Saved.scss @@ -0,0 +1,17 @@ +body { + &.stp_saved_body { + overflow: hidden; + } +} + +.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/components/Signup/Signup.jsx b/browser/components/pocket/content/panels/js/components/Signup/Signup.jsx new file mode 100644 index 0000000000..7e628c0ad5 --- /dev/null +++ b/browser/components/pocket/content/panels/js/components/Signup/Signup.jsx @@ -0,0 +1,79 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * 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 Header from "../Header/Header"; +import Button from "../Button/Button"; + +function Signup(props) { + const { locale, pockethost, utmSource, utmCampaign, utmContent } = props; + const utmParams = `utm_source=${utmSource}${ + utmCampaign && utmContent + ? `&utm_campaign=${utmCampaign}&utm_content=${utmContent}` + : `` + }`; + return ( + <div className="stp_panel_container"> + <div className="stp_panel stp_panel_signup"> + <Header> + <Button + style="secondary" + url={`https://${pockethost}/login?${utmParams}`} + source="log_in" + > + <span data-l10n-id="pocket-panel-signup-login" /> + </Button> + </Header> + <hr /> + {locale?.startsWith("en") ? ( + <> + <div className="stp_signup_content_wrapper"> + <h3 + className="header_medium" + data-l10n-id="pocket-panel-signup-cta-a-fix" + /> + <p data-l10n-id="pocket-panel-signup-cta-b-updated" /> + </div> + <div className="stp_signup_content_wrapper"> + <hr /> + </div> + <div className="stp_signup_content_wrapper"> + <div className="stp_signup_img_rainbow_reader" /> + <h3 className="header_medium"> + Get thought-provoking article recommendations + </h3> + <p> + Find stories that go deep into a subject or offer a new + perspective. + </p> + </div> + </> + ) : ( + <div className="stp_signup_content_wrapper"> + <h3 + className="header_large" + data-l10n-id="pocket-panel-signup-cta-a-fix" + /> + <p data-l10n-id="pocket-panel-signup-cta-b-short" /> + <strong> + <p data-l10n-id="pocket-panel-signup-cta-c-updated" /> + </strong> + </div> + )} + <hr /> + <span className="stp_button_wide"> + <Button + style="primary" + url={`https://${pockethost}/ff_signup?${utmParams}`} + source="sign_up_1" + > + <span data-l10n-id="pocket-panel-button-activate" /> + </Button> + </span> + </div> + </div> + ); +} + +export default Signup; diff --git a/browser/components/pocket/content/panels/js/components/Signup/Signup.scss b/browser/components/pocket/content/panels/js/components/Signup/Signup.scss new file mode 100644 index 0000000000..21b34ddcb6 --- /dev/null +++ b/browser/components/pocket/content/panels/js/components/Signup/Signup.scss @@ -0,0 +1,19 @@ +body { + &.stp_signup_body { + overflow: hidden; + } +} + +.stp_panel_signup { + .stp_signup_content_wrapper { + margin: 12px 0 20px; + } + .stp_signup_img_rainbow_reader { + background: url(../img/rainbow-reader.svg) bottom center no-repeat; + background-size: contain; + height: 72px; + width: 82px; + float: inline-end; + margin-inline-start: 16px; + } +} diff --git a/browser/components/pocket/content/panels/js/components/TagPicker/TagPicker.jsx b/browser/components/pocket/content/panels/js/components/TagPicker/TagPicker.jsx new file mode 100644 index 0000000000..991b4b582a --- /dev/null +++ b/browser/components/pocket/content/panels/js/components/TagPicker/TagPicker.jsx @@ -0,0 +1,176 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * 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, { useState, useEffect } from "react"; +import panelMessaging from "../../messages"; + +function TagPicker(props) { + const [tags, setTags] = useState(props.tags); + const [duplicateTag, setDuplicateTag] = useState(null); + const [inputValue, setInputValue] = useState(""); + const [usedTags, setUsedTags] = useState([]); + // Status be success, waiting, or error. + const [ + { tagInputStatus, tagInputErrorMessage }, + setTagInputStatus, + ] = useState({ + tagInputStatus: "", + tagInputErrorMessage: "", + }); + + const inputToSubmit = inputValue.trim(); + const tagsToSubmit = [...tags, ...(inputToSubmit ? [inputToSubmit] : [])]; + + let handleKeyDown = e => { + const enterKey = e.keyCode === 13; + const commaKey = e.keyCode === 188; + const tabKey = inputValue && e.keyCode === 9; + + // Submit tags on enter with no input. + // Enter tag on comma, tab, or enter with input. + // Tab to next element with no input. + if (commaKey || enterKey || tabKey) { + e.preventDefault(); + if (inputValue) { + addTag(); + } else if (enterKey) { + submitTags(); + } + } + }; + + let addTag = () => { + let newDuplicateTag = tags.find(item => item === inputToSubmit); + + if (!inputToSubmit?.length) { + return; + } + + setInputValue(``); // Clear out input + if (!newDuplicateTag) { + setTags(tagsToSubmit); + } else { + setDuplicateTag(newDuplicateTag); + + setTimeout(() => { + setDuplicateTag(null); + }, 1000); + } + }; + + let removeTag = index => { + let updatedTags = tags.slice(0); // Shallow copied array + updatedTags.splice(index, 1); + setTags(updatedTags); + }; + + let submitTags = () => { + if (!props.itemUrl || !tagsToSubmit?.length) { + return; + } + setTagInputStatus({ + tagInputStatus: "waiting", + tagInputErrorMessage: "", + }); + panelMessaging.sendMessage( + "PKT_addTags", + { + url: props.itemUrl, + tags: tagsToSubmit, + }, + function(resp) { + const { data } = resp; + + if (data.status === "success") { + setTagInputStatus({ + tagInputStatus: "success", + tagInputErrorMessage: "", + }); + } else if (data.status === "error") { + setTagInputStatus({ + tagInputStatus: "error", + tagInputErrorMessage: data.error.message, + }); + } + } + ); + }; + + useEffect(() => { + panelMessaging.sendMessage("PKT_getTags", {}, resp => + setUsedTags(resp?.data?.tags) + ); + }, []); + + return ( + <div className="stp_tag_picker"> + {!tagInputStatus && ( + <> + <h3 + className="header_small" + data-l10n-id="pocket-panel-signup-add-tags" + /> + <div className="stp_tag_picker_tags"> + {tags.map((tag, i) => ( + <div + className={`stp_tag_picker_tag${ + duplicateTag === tag ? ` stp_tag_picker_tag_duplicate` : `` + }`} + > + {tag} + <button + onClick={() => removeTag(i)} + className={`stp_tag_picker_tag_remove`} + > + X + </button> + </div> + ))} + <div className="stp_tag_picker_input_wrapper"> + <input + className="stp_tag_picker_input" + type="text" + list="tag-list" + value={inputValue} + onChange={e => setInputValue(e.target.value)} + onKeyDown={e => handleKeyDown(e)} + maxlength="25" + /> + <datalist id="tag-list"> + {usedTags + .sort((a, b) => a.search(inputValue) - b.search(inputValue)) + .map(item => ( + <option key={item} value={item} /> + ))} + </datalist> + <button + className="stp_tag_picker_button" + disabled={!tagsToSubmit?.length} + data-l10n-id="pocket-panel-saved-save-tags" + onClick={() => submitTags()} + /> + </div> + </div> + </> + )} + {tagInputStatus === "waiting" && ( + <h3 + className="header_large" + data-l10n-id="pocket-panel-saved-processing-tags" + /> + )} + {tagInputStatus === "success" && ( + <h3 + className="header_large" + data-l10n-id="pocket-panel-saved-tags-saved" + /> + )} + {tagInputStatus === "error" && ( + <h3 className="header_small">{tagInputErrorMessage}</h3> + )} + </div> + ); +} + +export default TagPicker; diff --git a/browser/components/pocket/content/panels/js/components/TagPicker/TagPicker.scss b/browser/components/pocket/content/panels/js/components/TagPicker/TagPicker.scss new file mode 100644 index 0000000000..d3bab4092f --- /dev/null +++ b/browser/components/pocket/content/panels/js/components/TagPicker/TagPicker.scss @@ -0,0 +1,135 @@ +.stp_tag_picker { + .stp_tag_picker_tags { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; + padding: 8px; + border: 1px solid #8F8F9D; + border-radius: 4px; + font-style: normal; + font-weight: normal; + font-size: 1rem; + line-height: 1.2rem; + color: #15141A; + margin-bottom: 10px; + } + + .stp_tag_picker_tag { + background: #F0F0F4; + border-radius: 4px; + color: #15141A; + display: inline-block; + font-size: 0.85rem; + line-height: 1rem; + font-style: normal; + font-weight: 600; + padding: 0 8px; + transition: background-color 200ms ease-in-out; + + @include theme_dark { + background: #2B2A33; + color: #FBFBFB; + } + } + + .stp_tag_picker_tag_remove { + padding: 5px; + color: #5B5B66; + font-weight: 400; + + &:hover { + color: #3E3E44; + } + + &:focus { + color: #3E3E44; + outline: 2px solid #0060df; + outline-offset: -4px; + } + + @include theme_dark { + color: #8F8F9D; + + &:hover { + color: #fff; + } + + &:focus { + outline: 2px solid #00DDFF; + } + } + } + + .stp_tag_picker_tag_duplicate { + background-color: #bbb; + + @include theme_dark { + background-color: #666; + } + } + + .stp_tag_picker_input_wrapper { + display: flex; + flex-grow: 1; + } + + .stp_tag_picker_input { + flex-grow: 1; + border: 1px solid #8F8F9D; + padding: 0 6px; + border-start-start-radius: 4px; + border-end-start-radius: 4px; + + &:focus { + border: 1px solid #0060DF; + outline: 1px solid #0060DF; + } + + @include theme_dark { + background: none; + color: #FBFBFB; + + &:focus { + border: 1px solid #00DDFF; + outline: 1px solid #00DDFF; + } + } + } + + .stp_tag_picker_button { + font-size: 0.95rem; + line-height: 1.1rem; + padding: 4px 6px; + background-color: #F0F0F4; + border: 1px solid #8F8F9D; + border-inline-start: none; + border-start-end-radius: 4px; + border-end-end-radius: 4px; + &:disabled { + color: #8F8F9D; + } + &:hover:enabled { + background-color: #DADADF; + } + &:focus:enabled { + border: 1px solid #0060DF; + outline: 1px solid #0060DF; + } + + @include theme_dark { + background-color: #2B2A33; + color: #FBFBFB; + &:disabled { + color: #666; + } + &:hover:enabled { + background-color: #53535d; + } + &:focus:enabled { + border: 1px solid #00DDFF; + outline: 1px solid #00DDFF; + } + } + } +} diff --git a/browser/components/pocket/content/panels/js/components/TelemetryLink/TelemetryLink.jsx b/browser/components/pocket/content/panels/js/components/TelemetryLink/TelemetryLink.jsx new file mode 100644 index 0000000000..c23a24897f --- /dev/null +++ b/browser/components/pocket/content/panels/js/components/TelemetryLink/TelemetryLink.jsx @@ -0,0 +1,35 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * 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 panelMessaging from "../../messages"; + +function TelemetryLink(props) { + function onClick(event) { + if (props.onClick) { + props.onClick(event); + } else { + event.preventDefault(); + panelMessaging.sendMessage("PKT_openTabWithUrl", { + url: event.currentTarget.getAttribute(`href`), + source: props.source, + model: props.model, + position: props.position, + }); + } + } + + return ( + <a + href={props.href} + onClick={onClick} + target="_blank" + className={props.className} + > + {props.children} + </a> + ); +} + +export default TelemetryLink; diff --git a/browser/components/pocket/content/panels/js/home/entry.js b/browser/components/pocket/content/panels/js/home/entry.js new file mode 100644 index 0000000000..56d8134577 --- /dev/null +++ b/browser/components/pocket/content/panels/js/home/entry.js @@ -0,0 +1,17 @@ +/* global PKT_PANEL:false */ + +function onDOMLoaded() { + if (!window.thePKT_PANEL) { + var thePKT_PANEL = new PKT_PANEL(); + /* global thePKT_PANEL */ + window.thePKT_PANEL = thePKT_PANEL; + thePKT_PANEL.initHome(); + } + window.thePKT_PANEL.create(); +} + +if (document.readyState != `loading`) { + onDOMLoaded(); +} else { + document.addEventListener(`DOMContentLoaded`, onDOMLoaded); +} diff --git a/browser/components/pocket/content/panels/js/home/overlay.js b/browser/components/pocket/content/panels/js/home/overlay.js new file mode 100644 index 0000000000..865caca6c5 --- /dev/null +++ b/browser/components/pocket/content/panels/js/home/overlay.js @@ -0,0 +1,62 @@ +/* global Handlebars:false */ + +/* +HomeOverlay is the view itself and contains all of the methods to manipute the overlay and messaging. +It does not contain any logic for saving or communication with the extension or server. +*/ + +import React from "react"; +import ReactDOM from "react-dom"; +import Home from "../components/Home/Home"; + +var HomeOverlay = function(options) { + this.inited = false; + this.active = false; +}; + +HomeOverlay.prototype = { + create({ pockethost }) { + const { searchParams } = new URL(window.location.href); + const locale = searchParams.get(`locale`) || ``; + const hideRecentSaves = searchParams.get(`hiderecentsaves`) === `true`; + const utmSource = searchParams.get(`utmSource`); + const utmCampaign = searchParams.get(`utmCampaign`); + const utmContent = searchParams.get(`utmContent`); + + if (this.active) { + return; + } + + this.active = true; + + ReactDOM.render( + <Home + locale={locale} + hideRecentSaves={hideRecentSaves} + pockethost={pockethost} + utmSource={utmSource} + utmCampaign={utmCampaign} + utmContent={utmContent} + topics={[ + { title: "Technology", topic: "technology" }, + { title: "Self Improvement", topic: "self-improvement" }, + { title: "Food", topic: "food" }, + { title: "Parenting", topic: "parenting" }, + { title: "Science", topic: "science" }, + { title: "Entertainment", topic: "entertainment" }, + { title: "Career", topic: "career" }, + { title: "Health", topic: "health" }, + { title: "Travel", topic: "travel" }, + { title: "Must-Reads", topic: "must-reads" }, + ]} + />, + document.querySelector(`body`) + ); + + if (window?.matchMedia(`(prefers-color-scheme: dark)`).matches) { + document.querySelector(`body`).classList.add(`theme_dark`); + } + }, +}; + +export default HomeOverlay; diff --git a/browser/components/pocket/content/panels/js/main.bundle.js b/browser/components/pocket/content/panels/js/main.bundle.js new file mode 100644 index 0000000000..15f996dfec --- /dev/null +++ b/browser/components/pocket/content/panels/js/main.bundle.js @@ -0,0 +1,1327 @@ +/******/ (() => { // webpackBootstrap +/******/ "use strict"; +/******/ var __webpack_modules__ = ({ + +/***/ 299: +/***/ ((__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) => { + + +// EXTERNAL MODULE: ./node_modules/react/index.js +var react = __webpack_require__(294); +// EXTERNAL MODULE: ./node_modules/react-dom/index.js +var react_dom = __webpack_require__(935); +;// CONCATENATED MODULE: ./content/panels/js/components/Header/Header.jsx +/* This Source Code Form is subject to the terms of the Mozilla Public + * 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/. */ + + +function Header(props) { + return /*#__PURE__*/react.createElement("h1", { + className: "stp_header" + }, /*#__PURE__*/react.createElement("div", { + className: "stp_header_logo" + }), props.children); +} + +/* harmony default export */ const Header_Header = (Header); +;// CONCATENATED MODULE: ./content/panels/js/messages.js +/* global RPMRemoveMessageListener:false, RPMAddMessageListener:false, RPMSendAsyncMessage:false */ +var pktPanelMessaging = { + removeMessageListener(messageId, callback) { + RPMRemoveMessageListener(messageId, callback); + }, + + addMessageListener(messageId, callback = () => {}) { + RPMAddMessageListener(messageId, callback); + }, + + sendMessage(messageId, payload = {}, callback) { + if (callback) { + // If we expect something back, we use RPMSendAsyncMessage and not RPMSendQuery. + // Even though RPMSendQuery returns something, our frame could be closed at any moment, + // and we don't want to close a RPMSendQuery promise loop unexpectedly. + // So instead we setup a response event. + const responseMessageId = `${messageId}_response`; + + var responseListener = responsePayload => { + callback(responsePayload); + this.removeMessageListener(responseMessageId, responseListener); + }; + + this.addMessageListener(responseMessageId, responseListener); + } // Send message + + + RPMSendAsyncMessage(messageId, payload); + }, + + // Click helper to reduce bugs caused by oversight + // from different implementations of similar code. + clickHelper(element, { + source = "", + position + }) { + element?.addEventListener(`click`, event => { + event.preventDefault(); + this.sendMessage("PKT_openTabWithUrl", { + url: event.currentTarget.getAttribute(`href`), + source, + position + }); + }); + }, + + log() { + RPMSendAsyncMessage("PKT_log", arguments); + } + +}; +/* harmony default export */ const messages = (pktPanelMessaging); +;// CONCATENATED MODULE: ./content/panels/js/components/TelemetryLink/TelemetryLink.jsx +/* This Source Code Form is subject to the terms of the Mozilla Public + * 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/. */ + + + +function TelemetryLink(props) { + function onClick(event) { + if (props.onClick) { + props.onClick(event); + } else { + event.preventDefault(); + messages.sendMessage("PKT_openTabWithUrl", { + url: event.currentTarget.getAttribute(`href`), + source: props.source, + model: props.model, + position: props.position + }); + } + } + + return /*#__PURE__*/react.createElement("a", { + href: props.href, + onClick: onClick, + target: "_blank", + className: props.className + }, props.children); +} + +/* harmony default export */ const TelemetryLink_TelemetryLink = (TelemetryLink); +;// CONCATENATED MODULE: ./content/panels/js/components/ArticleList/ArticleList.jsx +/* This Source Code Form is subject to the terms of the Mozilla Public + * 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/. */ + + + +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(TelemetryLink_TelemetryLink, { + className: "stp_article_list_link", + href: props.url, + source: props.source, + position: props.position, + model: props.model + }, 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 [thumbnailLoaded, setThumbnailLoaded] = (0,react.useState)(false); + const [thumbnailLoadFailed, setThumbnailLoadFailed] = (0,react.useState)(false); + const { + article, + savedArticle, + position, + source, + model, + utmParams, + openInPocketReader + } = props; + + if (!article.url && !article.resolved_url && !article.given_url) { + return null; + } + + const url = new URL(article.url || article.resolved_url || article.given_url); + const urlSearchParams = new URLSearchParams(utmParams); + + if (openInPocketReader && article.item_id && !url.href.match(/getpocket\.com\/read/)) { + url.href = `https://getpocket.com/read/${article.item_id}`; + } + + for (let [key, val] of urlSearchParams.entries()) { + url.searchParams.set(key, val); + } // 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 || article.given_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.href, + savedArticle: savedArticle, + position: position, + source: source, + model: model, + utmParams: utmParams + }, /*#__PURE__*/react.createElement(react.Fragment, null, thumbnail && !thumbnailLoadFailed ? /*#__PURE__*/react.createElement("img", { + className: "stp_article_list_thumb", + src: thumbnail, + alt: alt, + width: "40", + height: "40", + onLoad: () => { + setThumbnailLoaded(true); + }, + onError: () => { + setThumbnailLoadFailed(true); + }, + style: { + visibility: thumbnailLoaded ? `visible` : `hidden` + } + }) : /*#__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" + }, title), /*#__PURE__*/react.createElement("p", { + className: "stp_article_list_publisher" + }, publisher))))); +} + +function ArticleList(props) { + return /*#__PURE__*/react.createElement("ul", { + className: "stp_article_list" + }, props.articles?.map((article, position) => /*#__PURE__*/react.createElement(Article, { + article: article, + savedArticle: props.savedArticle, + position: position, + source: props.source, + model: props.model, + utmParams: props.utmParams, + openInPocketReader: props.openInPocketReader + }))); +} + +/* harmony default export */ const ArticleList_ArticleList = (ArticleList); +;// CONCATENATED MODULE: ./content/panels/js/components/PopularTopics/PopularTopics.jsx +/* This Source Code Form is subject to the terms of the Mozilla Public + * 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/. */ + + + +function PopularTopics(props) { + return /*#__PURE__*/react.createElement("ul", { + className: "stp_popular_topics" + }, props.topics?.map((topic, position) => /*#__PURE__*/react.createElement("li", { + key: `item-${topic.topic}`, + className: "stp_popular_topic" + }, /*#__PURE__*/react.createElement(TelemetryLink_TelemetryLink, { + className: "stp_popular_topic_link", + href: `https://${props.pockethost}/explore/${topic.topic}?${props.utmParams}`, + source: props.source, + position: position + }, topic.title)))); +} + +/* harmony default export */ const PopularTopics_PopularTopics = (PopularTopics); +;// CONCATENATED MODULE: ./content/panels/js/components/Button/Button.jsx +/* This Source Code Form is subject to the terms of the Mozilla Public + * 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/. */ + + + +function Button(props) { + return /*#__PURE__*/react.createElement(TelemetryLink_TelemetryLink, { + href: props.url, + onClick: props.onClick, + className: `stp_button${props?.style && ` stp_button_${props.style}`}`, + source: props.source + }, props.children); +} + +/* harmony default export */ const Button_Button = (Button); +;// CONCATENATED MODULE: ./content/panels/js/components/Home/Home.jsx +/* This Source Code Form is subject to the terms of the Mozilla Public + * 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/. */ + + + + + + + +function Home(props) { + const { + locale, + topics, + pockethost, + hideRecentSaves, + utmSource, + utmCampaign, + utmContent + } = props; + const [{ + articles, + status + }, setArticlesState] = (0,react.useState)({ + articles: [], + // Can be success, loading, or error. + status: "" + }); + const utmParams = `utm_source=${utmSource}${utmCampaign && utmContent ? `&utm_campaign=${utmCampaign}&utm_content=${utmContent}` : ``}`; + (0,react.useEffect)(() => { + if (!hideRecentSaves) { + // We don't display the loading message until instructed. This is because cache + // loads should be fast, so using the loading message for cache just adds loading jank. + messages.addMessageListener("PKT_loadingRecentSaves", function (resp) { + setArticlesState({ + articles, + status: "loading" + }); + }); + messages.addMessageListener("PKT_renderRecentSaves", function (resp) { + const { + data + } = resp; + + if (data.status === "error") { + setArticlesState({ + articles: [], + status: "error" + }); + return; + } + + setArticlesState({ + articles: data, + status: "success" + }); + }); + } // tell back end we're ready + + + messages.sendMessage("PKT_show_home"); + }, []); + let recentSavesSection = null; + + if (status === "error" || hideRecentSaves) { + recentSavesSection = /*#__PURE__*/react.createElement("h3", { + className: "header_medium", + "data-l10n-id": "pocket-panel-home-new-user-cta" + }); + } else if (status === "loading") { + recentSavesSection = /*#__PURE__*/react.createElement("span", { + "data-l10n-id": "pocket-panel-home-most-recent-saves-loading" + }); + } else if (status === "success") { + if (articles?.length) { + recentSavesSection = /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("h3", { + className: "header_medium", + "data-l10n-id": "pocket-panel-home-most-recent-saves" + }), articles.length > 3 ? /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(ArticleList_ArticleList, { + articles: articles.slice(0, 3), + source: "home_recent_save", + utmParams: utmParams, + openInPocketReader: true + }), /*#__PURE__*/react.createElement("span", { + className: "stp_button_wide" + }, /*#__PURE__*/react.createElement(Button_Button, { + style: "secondary", + url: `https://${pockethost}/a?${utmParams}`, + source: "home_view_list" + }, /*#__PURE__*/react.createElement("span", { + "data-l10n-id": "pocket-panel-button-show-all" + })))) : /*#__PURE__*/react.createElement(ArticleList_ArticleList, { + articles: articles, + source: "home_recent_save", + utmParams: utmParams + })); + } else { + recentSavesSection = /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("h3", { + className: "header_medium", + "data-l10n-id": "pocket-panel-home-new-user-cta" + }), /*#__PURE__*/react.createElement("h3", { + className: "header_medium", + "data-l10n-id": "pocket-panel-home-new-user-message" + })); + } + } + + 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(Button_Button, { + style: "primary", + url: `https://${pockethost}/a?${utmParams}`, + source: "home_view_list" + }, /*#__PURE__*/react.createElement("span", { + "data-l10n-id": "pocket-panel-header-my-saves" + }))), /*#__PURE__*/react.createElement("hr", null), recentSavesSection, /*#__PURE__*/react.createElement("hr", null), pockethost && locale?.startsWith("en") && topics?.length && /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("h3", { + className: "header_medium" + }, "Explore popular topics:"), /*#__PURE__*/react.createElement(PopularTopics_PopularTopics, { + topics: topics, + pockethost: pockethost, + utmParams: utmParams, + source: "home_popular_topic" + })))); +} + +/* harmony default export */ const Home_Home = (Home); +;// CONCATENATED MODULE: ./content/panels/js/home/overlay.js +/* global Handlebars:false */ + +/* +HomeOverlay is the view itself and contains all of the methods to manipute the overlay and messaging. +It does not contain any logic for saving or communication with the extension or server. +*/ + + + + +var HomeOverlay = function (options) { + this.inited = false; + this.active = false; +}; + +HomeOverlay.prototype = { + create({ + pockethost + }) { + const { + searchParams + } = new URL(window.location.href); + const locale = searchParams.get(`locale`) || ``; + const hideRecentSaves = searchParams.get(`hiderecentsaves`) === `true`; + const utmSource = searchParams.get(`utmSource`); + const utmCampaign = searchParams.get(`utmCampaign`); + const utmContent = searchParams.get(`utmContent`); + + if (this.active) { + return; + } + + this.active = true; + react_dom.render( /*#__PURE__*/react.createElement(Home_Home, { + locale: locale, + hideRecentSaves: hideRecentSaves, + pockethost: pockethost, + utmSource: utmSource, + utmCampaign: utmCampaign, + utmContent: utmContent, + topics: [{ + title: "Technology", + topic: "technology" + }, { + title: "Self Improvement", + topic: "self-improvement" + }, { + title: "Food", + topic: "food" + }, { + title: "Parenting", + topic: "parenting" + }, { + title: "Science", + topic: "science" + }, { + title: "Entertainment", + topic: "entertainment" + }, { + title: "Career", + topic: "career" + }, { + title: "Health", + topic: "health" + }, { + title: "Travel", + topic: "travel" + }, { + title: "Must-Reads", + topic: "must-reads" + }] + }), document.querySelector(`body`)); + + if (window?.matchMedia(`(prefers-color-scheme: dark)`).matches) { + document.querySelector(`body`).classList.add(`theme_dark`); + } + } + +}; +/* harmony default export */ const overlay = (HomeOverlay); +;// CONCATENATED MODULE: ./content/panels/js/components/Signup/Signup.jsx +/* This Source Code Form is subject to the terms of the Mozilla Public + * 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/. */ + + + + +function Signup(props) { + const { + locale, + pockethost, + utmSource, + utmCampaign, + utmContent + } = props; + const utmParams = `utm_source=${utmSource}${utmCampaign && utmContent ? `&utm_campaign=${utmCampaign}&utm_content=${utmContent}` : ``}`; + return /*#__PURE__*/react.createElement("div", { + className: "stp_panel_container" + }, /*#__PURE__*/react.createElement("div", { + className: "stp_panel stp_panel_signup" + }, /*#__PURE__*/react.createElement(Header_Header, null, /*#__PURE__*/react.createElement(Button_Button, { + style: "secondary", + url: `https://${pockethost}/login?${utmParams}`, + source: "log_in" + }, /*#__PURE__*/react.createElement("span", { + "data-l10n-id": "pocket-panel-signup-login" + }))), /*#__PURE__*/react.createElement("hr", null), locale?.startsWith("en") ? /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", { + className: "stp_signup_content_wrapper" + }, /*#__PURE__*/react.createElement("h3", { + className: "header_medium", + "data-l10n-id": "pocket-panel-signup-cta-a-fix" + }), /*#__PURE__*/react.createElement("p", { + "data-l10n-id": "pocket-panel-signup-cta-b-updated" + })), /*#__PURE__*/react.createElement("div", { + className: "stp_signup_content_wrapper" + }, /*#__PURE__*/react.createElement("hr", null)), /*#__PURE__*/react.createElement("div", { + className: "stp_signup_content_wrapper" + }, /*#__PURE__*/react.createElement("div", { + className: "stp_signup_img_rainbow_reader" + }), /*#__PURE__*/react.createElement("h3", { + className: "header_medium" + }, "Get thought-provoking article recommendations"), /*#__PURE__*/react.createElement("p", null, "Find stories that go deep into a subject or offer a new perspective."))) : /*#__PURE__*/react.createElement("div", { + className: "stp_signup_content_wrapper" + }, /*#__PURE__*/react.createElement("h3", { + className: "header_large", + "data-l10n-id": "pocket-panel-signup-cta-a-fix" + }), /*#__PURE__*/react.createElement("p", { + "data-l10n-id": "pocket-panel-signup-cta-b-short" + }), /*#__PURE__*/react.createElement("strong", null, /*#__PURE__*/react.createElement("p", { + "data-l10n-id": "pocket-panel-signup-cta-c-updated" + }))), /*#__PURE__*/react.createElement("hr", null), /*#__PURE__*/react.createElement("span", { + className: "stp_button_wide" + }, /*#__PURE__*/react.createElement(Button_Button, { + style: "primary", + url: `https://${pockethost}/ff_signup?${utmParams}`, + source: "sign_up_1" + }, /*#__PURE__*/react.createElement("span", { + "data-l10n-id": "pocket-panel-button-activate" + }))))); +} + +/* harmony default export */ const Signup_Signup = (Signup); +;// CONCATENATED MODULE: ./content/panels/js/signup/overlay.js +/* +SignupOverlay is the view itself and contains all of the methods to manipute the overlay and messaging. +It does not contain any logic for saving or communication with the extension or server. +*/ + + + + + +var SignupOverlay = function (options) { + this.inited = false; + this.active = false; + + this.create = function ({ + pockethost + }) { + // Extract local variables passed into template via URL query params + const { + searchParams + } = new URL(window.location.href); + const locale = searchParams.get(`locale`) || ``; + const utmSource = searchParams.get(`utmSource`); + const utmCampaign = searchParams.get(`utmCampaign`); + const utmContent = searchParams.get(`utmContent`); + + if (this.active) { + return; + } + + this.active = true; // Create actual content + + react_dom.render( /*#__PURE__*/react.createElement(Signup_Signup, { + pockethost: pockethost, + utmSource: utmSource, + utmCampaign: utmCampaign, + utmContent: utmContent, + locale: locale + }), document.querySelector(`body`)); + + if (window?.matchMedia(`(prefers-color-scheme: dark)`).matches) { + document.querySelector(`body`).classList.add(`theme_dark`); + } // tell back end we're ready + + + messages.sendMessage("PKT_show_signup"); + }; +}; + +/* harmony default export */ const signup_overlay = (SignupOverlay); +;// CONCATENATED MODULE: ./content/panels/js/components/TagPicker/TagPicker.jsx +/* This Source Code Form is subject to the terms of the Mozilla Public + * 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/. */ + + + +function TagPicker(props) { + const [tags, setTags] = (0,react.useState)(props.tags); + const [duplicateTag, setDuplicateTag] = (0,react.useState)(null); + const [inputValue, setInputValue] = (0,react.useState)(""); + const [usedTags, setUsedTags] = (0,react.useState)([]); // Status be success, waiting, or error. + + const [{ + tagInputStatus, + tagInputErrorMessage + }, setTagInputStatus] = (0,react.useState)({ + tagInputStatus: "", + tagInputErrorMessage: "" + }); + const inputToSubmit = inputValue.trim(); + const tagsToSubmit = [...tags, ...(inputToSubmit ? [inputToSubmit] : [])]; + + let handleKeyDown = e => { + const enterKey = e.keyCode === 13; + const commaKey = e.keyCode === 188; + const tabKey = inputValue && e.keyCode === 9; // Submit tags on enter with no input. + // Enter tag on comma, tab, or enter with input. + // Tab to next element with no input. + + if (commaKey || enterKey || tabKey) { + e.preventDefault(); + + if (inputValue) { + addTag(); + } else if (enterKey) { + submitTags(); + } + } + }; + + let addTag = () => { + let newDuplicateTag = tags.find(item => item === inputToSubmit); + + if (!inputToSubmit?.length) { + return; + } + + setInputValue(``); // Clear out input + + if (!newDuplicateTag) { + setTags(tagsToSubmit); + } else { + setDuplicateTag(newDuplicateTag); + setTimeout(() => { + setDuplicateTag(null); + }, 1000); + } + }; + + let removeTag = index => { + let updatedTags = tags.slice(0); // Shallow copied array + + updatedTags.splice(index, 1); + setTags(updatedTags); + }; + + let submitTags = () => { + if (!props.itemUrl || !tagsToSubmit?.length) { + return; + } + + setTagInputStatus({ + tagInputStatus: "waiting", + tagInputErrorMessage: "" + }); + messages.sendMessage("PKT_addTags", { + url: props.itemUrl, + tags: tagsToSubmit + }, function (resp) { + const { + data + } = resp; + + if (data.status === "success") { + setTagInputStatus({ + tagInputStatus: "success", + tagInputErrorMessage: "" + }); + } else if (data.status === "error") { + setTagInputStatus({ + tagInputStatus: "error", + tagInputErrorMessage: data.error.message + }); + } + }); + }; + + (0,react.useEffect)(() => { + messages.sendMessage("PKT_getTags", {}, resp => setUsedTags(resp?.data?.tags)); + }, []); + return /*#__PURE__*/react.createElement("div", { + className: "stp_tag_picker" + }, !tagInputStatus && /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("h3", { + className: "header_small", + "data-l10n-id": "pocket-panel-signup-add-tags" + }), /*#__PURE__*/react.createElement("div", { + className: "stp_tag_picker_tags" + }, tags.map((tag, i) => /*#__PURE__*/react.createElement("div", { + className: `stp_tag_picker_tag${duplicateTag === tag ? ` stp_tag_picker_tag_duplicate` : ``}` + }, tag, /*#__PURE__*/react.createElement("button", { + onClick: () => removeTag(i), + className: `stp_tag_picker_tag_remove` + }, "X"))), /*#__PURE__*/react.createElement("div", { + className: "stp_tag_picker_input_wrapper" + }, /*#__PURE__*/react.createElement("input", { + className: "stp_tag_picker_input", + type: "text", + list: "tag-list", + value: inputValue, + onChange: e => setInputValue(e.target.value), + onKeyDown: e => handleKeyDown(e), + maxlength: "25" + }), /*#__PURE__*/react.createElement("datalist", { + id: "tag-list" + }, usedTags.sort((a, b) => a.search(inputValue) - b.search(inputValue)).map(item => /*#__PURE__*/react.createElement("option", { + key: item, + value: item + }))), /*#__PURE__*/react.createElement("button", { + className: "stp_tag_picker_button", + disabled: !tagsToSubmit?.length, + "data-l10n-id": "pocket-panel-saved-save-tags", + onClick: () => submitTags() + })))), tagInputStatus === "waiting" && /*#__PURE__*/react.createElement("h3", { + className: "header_large", + "data-l10n-id": "pocket-panel-saved-processing-tags" + }), tagInputStatus === "success" && /*#__PURE__*/react.createElement("h3", { + className: "header_large", + "data-l10n-id": "pocket-panel-saved-tags-saved" + }), tagInputStatus === "error" && /*#__PURE__*/react.createElement("h3", { + className: "header_small" + }, tagInputErrorMessage)); +} + +/* harmony default export */ const TagPicker_TagPicker = (TagPicker); +;// CONCATENATED MODULE: ./content/panels/js/components/Saved/Saved.jsx +/* This Source Code Form is subject to the terms of the Mozilla Public + * 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/. */ + + + + + + + +function Saved(props) { + const { + locale, + pockethost, + utmSource, + utmCampaign, + utmContent + } = props; // savedStatus can be success, loading, or error. + + const [{ + savedStatus, + savedErrorId, + itemId, + itemUrl + }, 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 [articleInfoAttempted, setArticleInfoAttempted] = (0,react.useState)(); + const [{ + similarRecs, + similarRecsModel + }, setSimilarRecsState] = (0,react.useState)({}); + const utmParams = `utm_source=${utmSource}${utmCampaign && utmContent ? `&utm_campaign=${utmCampaign}&utm_content=${utmContent}` : ``}`; + + 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, + itemUrl: data.item?.given_url, + savedErrorId: "" + }); + }); + messages.addMessageListener("PKT_articleInfoFetched", function (resp) { + setSavedStoryState(resp?.data?.item_preview); + }); + messages.addMessageListener("PKT_getArticleInfoAttempted", function (resp) { + setArticleInfoAttempted(true); + }); + messages.addMessageListener("PKT_renderItemRecs", function (resp) { + const { + data + } = resp; // This is the ML model used to recommend the story. + // Right now this value is the same for all three items returned together, + // so we can just use the first item's value for all. + + const model = data?.recommendations?.[0]?.experiment || ""; + setSimilarRecsState({ + similarRecs: data?.recommendations?.map(rec => rec.item), + similarRecsModel: model + }); + }); // 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_saved" + }, /*#__PURE__*/react.createElement(Header_Header, null, /*#__PURE__*/react.createElement(Button_Button, { + style: "primary", + url: `https://${pockethost}/a?${utmParams}`, + source: "view_list" + }, /*#__PURE__*/react.createElement("span", { + "data-l10n-id": "pocket-panel-header-my-saves" + }))), /*#__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", + onClick: removeItem + }, /*#__PURE__*/react.createElement("span", { + "data-l10n-id": "pocket-panel-button-remove" + }))), savedStory && /*#__PURE__*/react.createElement(ArticleList_ArticleList, { + articles: [savedStory], + openInPocketReader: true, + utmParams: utmParams + }), articleInfoAttempted && /*#__PURE__*/react.createElement(TagPicker_TagPicker, { + tags: [], + itemUrl: itemUrl + }), articleInfoAttempted && 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, + source: "on_save_recs", + model: similarRecsModel, + utmParams: utmParams + }))), 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-updated" + }), 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); +;// CONCATENATED MODULE: ./content/panels/js/saved/overlay.js +/* +SavedOverlay is the view itself and contains all of the methods to manipute the overlay and messaging. +It does not contain any logic for saving or communication with the extension or server. +*/ + + + + +var SavedOverlay = function (options) { + this.inited = false; + this.active = false; +}; + +SavedOverlay.prototype = { + create({ + pockethost + }) { + if (this.active) { + return; + } + + this.active = true; + const { + searchParams + } = new URL(window.location.href); + const locale = searchParams.get(`locale`) || ``; + const utmSource = searchParams.get(`utmSource`); + const utmCampaign = searchParams.get(`utmCampaign`); + const utmContent = searchParams.get(`utmContent`); + react_dom.render( /*#__PURE__*/react.createElement(Saved_Saved, { + locale: locale, + pockethost: pockethost, + utmSource: utmSource, + utmCampaign: utmCampaign, + utmContent: utmContent + }), document.querySelector(`body`)); + + if (window?.matchMedia(`(prefers-color-scheme: dark)`).matches) { + document.querySelector(`body`).classList.add(`theme_dark`); + } + } + +}; +/* harmony default export */ const saved_overlay = (SavedOverlay); +;// CONCATENATED MODULE: ./content/panels/js/style-guide/overlay.js + + + + + + + + +var StyleGuideOverlay = function (options) {}; + +StyleGuideOverlay.prototype = { + create() { + // TODO: Wrap popular topics component in JSX to work without needing an explicit container hierarchy for styling + react_dom.render( /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("h3", null, "JSX Components:"), /*#__PURE__*/react.createElement("h4", { + className: "stp_styleguide_h4" + }, "Buttons"), /*#__PURE__*/react.createElement("h5", { + className: "stp_styleguide_h5" + }, "text"), /*#__PURE__*/react.createElement(Button_Button, { + style: "text", + url: "https://example.org", + source: "styleguide" + }, "Text Button"), /*#__PURE__*/react.createElement("h5", { + className: "stp_styleguide_h5" + }, "primary"), /*#__PURE__*/react.createElement(Button_Button, { + style: "primary", + url: "https://example.org", + source: "styleguide" + }, "Primary Button"), /*#__PURE__*/react.createElement("h5", { + className: "stp_styleguide_h5" + }, "secondary"), /*#__PURE__*/react.createElement(Button_Button, { + style: "secondary", + url: "https://example.org", + source: "styleguide" + }, "Secondary Button"), /*#__PURE__*/react.createElement("h5", { + className: "stp_styleguide_h5" + }, "primary wide"), /*#__PURE__*/react.createElement("span", { + className: "stp_button_wide" + }, /*#__PURE__*/react.createElement(Button_Button, { + style: "primary", + url: "https://example.org", + source: "styleguide" + }, "Primary Wide Button")), /*#__PURE__*/react.createElement("h5", { + className: "stp_styleguide_h5" + }, "secondary wide"), /*#__PURE__*/react.createElement("span", { + className: "stp_button_wide" + }, /*#__PURE__*/react.createElement(Button_Button, { + style: "secondary", + url: "https://example.org", + source: "styleguide" + }, "Secondary Wide Button")), /*#__PURE__*/react.createElement("h4", { + className: "stp_styleguide_h4" + }, "Header"), /*#__PURE__*/react.createElement(Header_Header, null, /*#__PURE__*/react.createElement(Button_Button, { + style: "primary", + url: "https://example.org", + source: "styleguide" + }, "View My List")), /*#__PURE__*/react.createElement("h4", { + className: "stp_styleguide_h4" + }, "PopularTopics"), /*#__PURE__*/react.createElement(PopularTopics_PopularTopics, { + pockethost: `getpocket.com`, + source: `styleguide`, + utmParams: `utm_source=styleguide`, + topics: [{ + title: "Self Improvement", + topic: "self-improvement" + }, { + title: "Food", + topic: "food" + }, { + title: "Entertainment", + topic: "entertainment" + }, { + title: "Science", + topic: "science" + }] + }), /*#__PURE__*/react.createElement("h4", { + className: "stp_styleguide_h4" + }, "ArticleList"), /*#__PURE__*/react.createElement(ArticleList_ArticleList, { + source: `styleguide`, + articles: [{ + title: "Article Title", + publisher: "Publisher", + thumbnail: "https://img-getpocket.cdn.mozilla.net/80x80/https://www.raritanheadwaters.org/wp-content/uploads/2020/04/red-fox.jpg", + url: "https://example.org", + alt: "Alt Text" + }, { + title: "Article Title (No Publisher)", + thumbnail: "https://img-getpocket.cdn.mozilla.net/80x80/https://www.raritanheadwaters.org/wp-content/uploads/2020/04/red-fox.jpg", + url: "https://example.org", + alt: "Alt Text" + }, { + title: "Article Title (No Thumbnail)", + publisher: "Publisher", + url: "https://example.org", + alt: "Alt Text" + }] + }), /*#__PURE__*/react.createElement("h4", { + className: "stp_styleguide_h4" + }, "TagPicker"), /*#__PURE__*/react.createElement(TagPicker_TagPicker, { + tags: [`futurism`, `politics`, `mozilla`] + }), /*#__PURE__*/react.createElement("h3", null, "Typography:"), /*#__PURE__*/react.createElement("h2", { + className: "header_large" + }, ".header_large"), /*#__PURE__*/react.createElement("h3", { + className: "header_medium" + }, ".header_medium"), /*#__PURE__*/react.createElement("p", null, "paragraph"), /*#__PURE__*/react.createElement("h3", null, "Native Elements:"), /*#__PURE__*/react.createElement("h4", { + className: "stp_styleguide_h4" + }, "Horizontal Rule"), /*#__PURE__*/react.createElement("hr", null)), document.querySelector(`#stp_style_guide_components`)); + } + +}; +/* harmony default export */ const style_guide_overlay = (StyleGuideOverlay); +;// CONCATENATED MODULE: ./content/panels/js/main.js +/* This Source Code Form is subject to the terms of the Mozilla Public + * 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/. */ + +/* global RPMGetStringPref:false */ + + + + + + +var PKT_PANEL = function () {}; + +PKT_PANEL.prototype = { + initHome() { + this.overlay = new overlay(); + this.init(); + }, + + initSignup() { + this.overlay = new signup_overlay(); + this.init(); + }, + + initSaved() { + this.overlay = new saved_overlay(); + this.init(); + }, + + initStyleGuide() { + this.overlay = new style_guide_overlay(); + this.init(); + }, + + setupObservers() { + this.setupMutationObserver(); // Mutation observer isn't always enough for fast loading, static pages. + // Sometimes the mutation observer fires before the page is totally visible. + // In this case, the resize tries to fire with 0 height, + // and because it's a static page, it only does one mutation. + // So in this case, we have a backup intersection observer that fires when + // the page is first visible, and thus, the page is going to guarantee a height. + + this.setupIntersectionObserver(); + }, + + init() { + if (this.inited) { + return; + } + + this.setupObservers(); + this.inited = true; + }, + + resizeParent() { + let clientHeight = document.body.clientHeight; + + if (this.overlay.tagsDropdownOpen) { + clientHeight = Math.max(clientHeight, 252); + } // We can ignore 0 height here. + // We rely on intersection observer to do the + // resize for 0 height loads. + + + if (clientHeight) { + messages.sendMessage("PKT_resizePanel", { + width: document.body.clientWidth, + height: clientHeight + }); + } + }, + + setupIntersectionObserver() { + const observer = new IntersectionObserver(entries => { + if (entries.find(e => e.isIntersecting)) { + this.resizeParent(); + observer.unobserve(document.body); + } + }); + observer.observe(document.body); + }, + + setupMutationObserver() { + // Select the node that will be observed for mutations + const targetNode = document.body; // Options for the observer (which mutations to observe) + + const config = { + attributes: false, + childList: true, + subtree: true + }; // Callback function to execute when mutations are observed + + const callback = (mutationList, observer) => { + mutationList.forEach(mutation => { + switch (mutation.type) { + case "childList": + { + /* One or more children have been added to and/or removed + from the tree. + (See mutation.addedNodes and mutation.removedNodes.) */ + this.resizeParent(); + break; + } + } + }); + }; // Create an observer instance linked to the callback function + + + const observer = new MutationObserver(callback); // Start observing the target node for configured mutations + + observer.observe(targetNode, config); + }, + + create() { + const pockethost = RPMGetStringPref("extensions.pocket.site") || "getpocket.com"; + this.overlay.create({ + pockethost + }); + } + +}; +window.PKT_PANEL = PKT_PANEL; +window.pktPanelMessaging = messages; + +/***/ }) + +/******/ }); +/************************************************************************/ +/******/ // The module cache +/******/ var __webpack_module_cache__ = {}; +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ // Check if module is in cache +/******/ var cachedModule = __webpack_module_cache__[moduleId]; +/******/ if (cachedModule !== undefined) { +/******/ return cachedModule.exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = __webpack_module_cache__[moduleId] = { +/******/ // no module.id needed +/******/ // no module.loaded needed +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = __webpack_modules__; +/******/ +/************************************************************************/ +/******/ /* webpack/runtime/chunk loaded */ +/******/ (() => { +/******/ var deferred = []; +/******/ __webpack_require__.O = (result, chunkIds, fn, priority) => { +/******/ if(chunkIds) { +/******/ priority = priority || 0; +/******/ for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1]; +/******/ deferred[i] = [chunkIds, fn, priority]; +/******/ return; +/******/ } +/******/ var notFulfilled = Infinity; +/******/ for (var i = 0; i < deferred.length; i++) { +/******/ var [chunkIds, fn, priority] = deferred[i]; +/******/ var fulfilled = true; +/******/ for (var j = 0; j < chunkIds.length; j++) { +/******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) { +/******/ chunkIds.splice(j--, 1); +/******/ } else { +/******/ fulfilled = false; +/******/ if(priority < notFulfilled) notFulfilled = priority; +/******/ } +/******/ } +/******/ if(fulfilled) { +/******/ deferred.splice(i--, 1) +/******/ var r = fn(); +/******/ if (r !== undefined) result = r; +/******/ } +/******/ } +/******/ return result; +/******/ }; +/******/ })(); +/******/ +/******/ /* webpack/runtime/hasOwnProperty shorthand */ +/******/ (() => { +/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) +/******/ })(); +/******/ +/******/ /* webpack/runtime/jsonp chunk loading */ +/******/ (() => { +/******/ // no baseURI +/******/ +/******/ // object to store loaded and loading chunks +/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched +/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded +/******/ var installedChunks = { +/******/ 179: 0 +/******/ }; +/******/ +/******/ // no chunk on demand loading +/******/ +/******/ // no prefetching +/******/ +/******/ // no preloaded +/******/ +/******/ // no HMR +/******/ +/******/ // no HMR manifest +/******/ +/******/ __webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0); +/******/ +/******/ // install a JSONP callback for chunk loading +/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => { +/******/ var [chunkIds, moreModules, runtime] = data; +/******/ // add "moreModules" to the modules object, +/******/ // then flag all "chunkIds" as loaded and fire callback +/******/ var moduleId, chunkId, i = 0; +/******/ if(chunkIds.some((id) => (installedChunks[id] !== 0))) { +/******/ for(moduleId in moreModules) { +/******/ if(__webpack_require__.o(moreModules, moduleId)) { +/******/ __webpack_require__.m[moduleId] = moreModules[moduleId]; +/******/ } +/******/ } +/******/ if(runtime) var result = runtime(__webpack_require__); +/******/ } +/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data); +/******/ for(;i < chunkIds.length; i++) { +/******/ chunkId = chunkIds[i]; +/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) { +/******/ installedChunks[chunkId][0](); +/******/ } +/******/ installedChunks[chunkId] = 0; +/******/ } +/******/ return __webpack_require__.O(result); +/******/ } +/******/ +/******/ var chunkLoadingGlobal = self["webpackChunksave_to_pocket_ff"] = self["webpackChunksave_to_pocket_ff"] || []; +/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0)); +/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal)); +/******/ })(); +/******/ +/************************************************************************/ +/******/ +/******/ // startup +/******/ // Load entry module and return exports +/******/ // This entry module depends on other loaded chunks and execution need to be delayed +/******/ var __webpack_exports__ = __webpack_require__.O(undefined, [736], () => (__webpack_require__(299))) +/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__); +/******/ +/******/ })() +;
\ No newline at end of file diff --git a/browser/components/pocket/content/panels/js/main.bundle.js.LICENSE.txt b/browser/components/pocket/content/panels/js/main.bundle.js.LICENSE.txt new file mode 100644 index 0000000000..f42811bde3 --- /dev/null +++ b/browser/components/pocket/content/panels/js/main.bundle.js.LICENSE.txt @@ -0,0 +1,23 @@ +/*!***********************************!*\ + !*** ./content/panels/js/main.js ***! + \***********************************/ + +/*!***************************************!*\ + !*** ./content/panels/js/messages.js ***! + \***************************************/ + +/*!*******************************************!*\ + !*** ./content/panels/js/home/overlay.js ***! + \*******************************************/ + +/*!********************************************!*\ + !*** ./content/panels/js/saved/overlay.js ***! + \********************************************/ + +/*!*********************************************!*\ + !*** ./content/panels/js/signup/overlay.js ***! + \*********************************************/ + +/*!********************************************************!*\ + !*** ./content/panels/js/components/PopularTopics.jsx ***! + \********************************************************/ diff --git a/browser/components/pocket/content/panels/js/main.js b/browser/components/pocket/content/panels/js/main.js new file mode 100644 index 0000000000..e358df0ca9 --- /dev/null +++ b/browser/components/pocket/content/panels/js/main.js @@ -0,0 +1,118 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * 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/. */ +/* global RPMGetStringPref:false */ + +import HomeOverlay from "./home/overlay.js"; +import SignupOverlay from "./signup/overlay.js"; +import SavedOverlay from "./saved/overlay.js"; +import StyleGuideOverlay from "./style-guide/overlay.js"; +import pktPanelMessaging from "./messages.js"; + +var PKT_PANEL = function() {}; + +PKT_PANEL.prototype = { + initHome() { + this.overlay = new HomeOverlay(); + this.init(); + }, + + initSignup() { + this.overlay = new SignupOverlay(); + this.init(); + }, + + initSaved() { + this.overlay = new SavedOverlay(); + this.init(); + }, + + initStyleGuide() { + this.overlay = new StyleGuideOverlay(); + this.init(); + }, + + setupObservers() { + this.setupMutationObserver(); + // Mutation observer isn't always enough for fast loading, static pages. + // Sometimes the mutation observer fires before the page is totally visible. + // In this case, the resize tries to fire with 0 height, + // and because it's a static page, it only does one mutation. + // So in this case, we have a backup intersection observer that fires when + // the page is first visible, and thus, the page is going to guarantee a height. + this.setupIntersectionObserver(); + }, + + init() { + if (this.inited) { + return; + } + this.setupObservers(); + this.inited = true; + }, + + resizeParent() { + let clientHeight = document.body.clientHeight; + if (this.overlay.tagsDropdownOpen) { + clientHeight = Math.max(clientHeight, 252); + } + + // We can ignore 0 height here. + // We rely on intersection observer to do the + // resize for 0 height loads. + if (clientHeight) { + pktPanelMessaging.sendMessage("PKT_resizePanel", { + width: document.body.clientWidth, + height: clientHeight, + }); + } + }, + + setupIntersectionObserver() { + const observer = new IntersectionObserver(entries => { + if (entries.find(e => e.isIntersecting)) { + this.resizeParent(); + observer.unobserve(document.body); + } + }); + observer.observe(document.body); + }, + + setupMutationObserver() { + // Select the node that will be observed for mutations + const targetNode = document.body; + + // Options for the observer (which mutations to observe) + const config = { attributes: false, childList: true, subtree: true }; + + // Callback function to execute when mutations are observed + const callback = (mutationList, observer) => { + mutationList.forEach(mutation => { + switch (mutation.type) { + case "childList": { + /* One or more children have been added to and/or removed + from the tree. + (See mutation.addedNodes and mutation.removedNodes.) */ + this.resizeParent(); + break; + } + } + }); + }; + + // Create an observer instance linked to the callback function + const observer = new MutationObserver(callback); + + // Start observing the target node for configured mutations + observer.observe(targetNode, config); + }, + + create() { + const pockethost = + RPMGetStringPref("extensions.pocket.site") || "getpocket.com"; + this.overlay.create({ pockethost }); + }, +}; + +window.PKT_PANEL = PKT_PANEL; +window.pktPanelMessaging = pktPanelMessaging; diff --git a/browser/components/pocket/content/panels/js/messages.js b/browser/components/pocket/content/panels/js/messages.js new file mode 100644 index 0000000000..c91511be43 --- /dev/null +++ b/browser/components/pocket/content/panels/js/messages.js @@ -0,0 +1,50 @@ +/* global RPMRemoveMessageListener:false, RPMAddMessageListener:false, RPMSendAsyncMessage:false */ + +var pktPanelMessaging = { + removeMessageListener(messageId, callback) { + RPMRemoveMessageListener(messageId, callback); + }, + + addMessageListener(messageId, callback = () => {}) { + RPMAddMessageListener(messageId, callback); + }, + + sendMessage(messageId, payload = {}, callback) { + if (callback) { + // If we expect something back, we use RPMSendAsyncMessage and not RPMSendQuery. + // Even though RPMSendQuery returns something, our frame could be closed at any moment, + // and we don't want to close a RPMSendQuery promise loop unexpectedly. + // So instead we setup a response event. + const responseMessageId = `${messageId}_response`; + var responseListener = responsePayload => { + callback(responsePayload); + this.removeMessageListener(responseMessageId, responseListener); + }; + + this.addMessageListener(responseMessageId, responseListener); + } + + // Send message + RPMSendAsyncMessage(messageId, payload); + }, + + // Click helper to reduce bugs caused by oversight + // from different implementations of similar code. + clickHelper(element, { source = "", position }) { + element?.addEventListener(`click`, event => { + event.preventDefault(); + + this.sendMessage("PKT_openTabWithUrl", { + url: event.currentTarget.getAttribute(`href`), + source, + position, + }); + }); + }, + + log() { + RPMSendAsyncMessage("PKT_log", arguments); + }, +}; + +export default pktPanelMessaging; diff --git a/browser/components/pocket/content/panels/js/saved/entry.js b/browser/components/pocket/content/panels/js/saved/entry.js new file mode 100644 index 0000000000..b022c7a5e9 --- /dev/null +++ b/browser/components/pocket/content/panels/js/saved/entry.js @@ -0,0 +1,17 @@ +/* global PKT_PANEL:false */ + +function onDOMLoaded() { + if (!window.thePKT_PANEL) { + var thePKT_PANEL = new PKT_PANEL(); + /* global thePKT_PANEL */ + window.thePKT_PANEL = thePKT_PANEL; + thePKT_PANEL.initSaved(); + } + window.thePKT_PANEL.create(); +} + +if (document.readyState != `loading`) { + onDOMLoaded(); +} else { + document.addEventListener(`DOMContentLoaded`, onDOMLoaded); +} diff --git a/browser/components/pocket/content/panels/js/saved/overlay.js b/browser/components/pocket/content/panels/js/saved/overlay.js new file mode 100644 index 0000000000..defdf5217d --- /dev/null +++ b/browser/components/pocket/content/panels/js/saved/overlay.js @@ -0,0 +1,46 @@ +/* +SavedOverlay is the view itself and contains all of the methods to manipute the overlay and messaging. +It does not contain any logic for saving or communication with the extension or server. +*/ + +import React from "react"; +import ReactDOM from "react-dom"; +import Saved from "../components/Saved/Saved"; + +var SavedOverlay = function(options) { + this.inited = false; + this.active = false; +}; + +SavedOverlay.prototype = { + create({ pockethost }) { + if (this.active) { + return; + } + + this.active = true; + + const { searchParams } = new URL(window.location.href); + const locale = searchParams.get(`locale`) || ``; + const utmSource = searchParams.get(`utmSource`); + const utmCampaign = searchParams.get(`utmCampaign`); + const utmContent = searchParams.get(`utmContent`); + + ReactDOM.render( + <Saved + locale={locale} + pockethost={pockethost} + utmSource={utmSource} + utmCampaign={utmCampaign} + utmContent={utmContent} + />, + document.querySelector(`body`) + ); + + if (window?.matchMedia(`(prefers-color-scheme: dark)`).matches) { + document.querySelector(`body`).classList.add(`theme_dark`); + } + }, +}; + +export default SavedOverlay; diff --git a/browser/components/pocket/content/panels/js/signup/entry.js b/browser/components/pocket/content/panels/js/signup/entry.js new file mode 100644 index 0000000000..4beae984bb --- /dev/null +++ b/browser/components/pocket/content/panels/js/signup/entry.js @@ -0,0 +1,17 @@ +/* global PKT_PANEL:false */ + +function onDOMLoaded() { + if (!window.thePKT_PANEL) { + var thePKT_PANEL = new PKT_PANEL(); + /* global thePKT_PANEL */ + window.thePKT_PANEL = thePKT_PANEL; + thePKT_PANEL.initSignup(); + } + window.thePKT_PANEL.create(); +} + +if (document.readyState != `loading`) { + onDOMLoaded(); +} else { + document.addEventListener(`DOMContentLoaded`, onDOMLoaded); +} diff --git a/browser/components/pocket/content/panels/js/signup/overlay.js b/browser/components/pocket/content/panels/js/signup/overlay.js new file mode 100644 index 0000000000..319ff18938 --- /dev/null +++ b/browser/components/pocket/content/panels/js/signup/overlay.js @@ -0,0 +1,50 @@ +/* +SignupOverlay is the view itself and contains all of the methods to manipute the overlay and messaging. +It does not contain any logic for saving or communication with the extension or server. +*/ + +import React from "react"; +import ReactDOM from "react-dom"; +import pktPanelMessaging from "../messages.js"; +import Signup from "../components/Signup/Signup"; + +var SignupOverlay = function(options) { + this.inited = false; + this.active = false; + + this.create = function({ pockethost }) { + // Extract local variables passed into template via URL query params + const { searchParams } = new URL(window.location.href); + const locale = searchParams.get(`locale`) || ``; + const utmSource = searchParams.get(`utmSource`); + const utmCampaign = searchParams.get(`utmCampaign`); + const utmContent = searchParams.get(`utmContent`); + + if (this.active) { + return; + } + + this.active = true; + + // Create actual content + ReactDOM.render( + <Signup + pockethost={pockethost} + utmSource={utmSource} + utmCampaign={utmCampaign} + utmContent={utmContent} + locale={locale} + />, + document.querySelector(`body`) + ); + + if (window?.matchMedia(`(prefers-color-scheme: dark)`).matches) { + document.querySelector(`body`).classList.add(`theme_dark`); + } + + // tell back end we're ready + pktPanelMessaging.sendMessage("PKT_show_signup"); + }; +}; + +export default SignupOverlay; diff --git a/browser/components/pocket/content/panels/js/style-guide/entry.js b/browser/components/pocket/content/panels/js/style-guide/entry.js new file mode 100644 index 0000000000..09de4afba5 --- /dev/null +++ b/browser/components/pocket/content/panels/js/style-guide/entry.js @@ -0,0 +1,44 @@ +/* global PKT_PANEL:false */ + +function onDOMLoaded() { + if (!window.thePKT_PANEL) { + var thePKT_PANEL = new PKT_PANEL(); + /* global thePKT_PANEL */ + window.thePKT_PANEL = thePKT_PANEL; + thePKT_PANEL.initStyleGuide(); + } + window.thePKT_PANEL.overlay.create(); + + setupDarkModeUI(); +} + +function setupDarkModeUI() { + let isDarkModeEnabled = window?.matchMedia(`(prefers-color-scheme: dark)`) + .matches; + let elDarkModeToggle = document.querySelector(`#dark_mode_toggle input`); + let elBody = document.querySelector(`body`); + + function setTheme() { + if (isDarkModeEnabled) { + elBody.classList.add(`theme_dark`); + elDarkModeToggle.checked = true; + } else { + elBody.classList.remove(`theme_dark`); + elDarkModeToggle.checked = false; + } + } + + setTheme(); + + elDarkModeToggle.addEventListener(`click`, function(e) { + e.preventDefault; + isDarkModeEnabled = !isDarkModeEnabled; + setTheme(); + }); +} + +if (document.readyState != `loading`) { + onDOMLoaded(); +} else { + document.addEventListener(`DOMContentLoaded`, onDOMLoaded); +} diff --git a/browser/components/pocket/content/panels/js/style-guide/overlay.js b/browser/components/pocket/content/panels/js/style-guide/overlay.js new file mode 100644 index 0000000000..c6e9f67e20 --- /dev/null +++ b/browser/components/pocket/content/panels/js/style-guide/overlay.js @@ -0,0 +1,106 @@ +import React from "react"; +import ReactDOM from "react-dom"; +import Header from "../components/Header/Header"; +import ArticleList from "../components/ArticleList/ArticleList"; +import Button from "../components/Button/Button"; +import PopularTopics from "../components/PopularTopics/PopularTopics"; +import TagPicker from "../components/TagPicker/TagPicker"; + +var StyleGuideOverlay = function(options) {}; + +StyleGuideOverlay.prototype = { + create() { + // TODO: Wrap popular topics component in JSX to work without needing an explicit container hierarchy for styling + ReactDOM.render( + <div> + <h3>JSX Components:</h3> + <h4 className="stp_styleguide_h4">Buttons</h4> + <h5 className="stp_styleguide_h5">text</h5> + <Button style="text" url="https://example.org" source="styleguide"> + Text Button + </Button> + <h5 className="stp_styleguide_h5">primary</h5> + <Button style="primary" url="https://example.org" source="styleguide"> + Primary Button + </Button> + <h5 className="stp_styleguide_h5">secondary</h5> + <Button style="secondary" url="https://example.org" source="styleguide"> + Secondary Button + </Button> + <h5 className="stp_styleguide_h5">primary wide</h5> + <span className="stp_button_wide"> + <Button style="primary" url="https://example.org" source="styleguide"> + Primary Wide Button + </Button> + </span> + <h5 className="stp_styleguide_h5">secondary wide</h5> + <span className="stp_button_wide"> + <Button + style="secondary" + url="https://example.org" + source="styleguide" + > + Secondary Wide Button + </Button> + </span> + <h4 className="stp_styleguide_h4">Header</h4> + <Header> + <Button style="primary" url="https://example.org" source="styleguide"> + View My List + </Button> + </Header> + <h4 className="stp_styleguide_h4">PopularTopics</h4> + <PopularTopics + pockethost={`getpocket.com`} + source={`styleguide`} + utmParams={`utm_source=styleguide`} + topics={[ + { title: "Self Improvement", topic: "self-improvement" }, + { title: "Food", topic: "food" }, + { title: "Entertainment", topic: "entertainment" }, + { title: "Science", topic: "science" }, + ]} + /> + <h4 className="stp_styleguide_h4">ArticleList</h4> + <ArticleList + source={`styleguide`} + articles={[ + { + title: "Article Title", + publisher: "Publisher", + thumbnail: + "https://img-getpocket.cdn.mozilla.net/80x80/https://www.raritanheadwaters.org/wp-content/uploads/2020/04/red-fox.jpg", + url: "https://example.org", + alt: "Alt Text", + }, + { + title: "Article Title (No Publisher)", + thumbnail: + "https://img-getpocket.cdn.mozilla.net/80x80/https://www.raritanheadwaters.org/wp-content/uploads/2020/04/red-fox.jpg", + url: "https://example.org", + alt: "Alt Text", + }, + { + title: "Article Title (No Thumbnail)", + publisher: "Publisher", + url: "https://example.org", + alt: "Alt Text", + }, + ]} + /> + <h4 className="stp_styleguide_h4">TagPicker</h4> + <TagPicker tags={[`futurism`, `politics`, `mozilla`]} /> + <h3>Typography:</h3> + <h2 className="header_large">.header_large</h2> + <h3 className="header_medium">.header_medium</h3> + <p>paragraph</p> + <h3>Native Elements:</h3> + <h4 className="stp_styleguide_h4">Horizontal Rule</h4> + <hr /> + </div>, + document.querySelector(`#stp_style_guide_components`) + ); + }, +}; + +export default StyleGuideOverlay; diff --git a/browser/components/pocket/content/panels/js/vendor.bundle.js b/browser/components/pocket/content/panels/js/vendor.bundle.js new file mode 100644 index 0000000000..5da4d17f6d --- /dev/null +++ b/browser/components/pocket/content/panels/js/vendor.bundle.js @@ -0,0 +1,451 @@ +"use strict"; +(self["webpackChunksave_to_pocket_ff"] = self["webpackChunksave_to_pocket_ff"] || []).push([[736],{ + +/***/ 448: +/***/ ((__unused_webpack_module, exports, __webpack_require__) => { + +/** + * @license React + * react-dom.production.min.js + * + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +/* + Modernizr 3.0.0pre (Custom Build) | MIT +*/ +var aa=__webpack_require__(294),ca=__webpack_require__(840);function p(a){for(var b="https://reactjs.org/docs/error-decoder.html?invariant="+a,c=1;c<arguments.length;c++)b+="&args[]="+encodeURIComponent(arguments[c]);return"Minified React error #"+a+"; visit "+b+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}var da=new Set,ea={};function fa(a,b){ha(a,b);ha(a+"Capture",b)} +function ha(a,b){ea[a]=b;for(a=0;a<b.length;a++)da.add(b[a])} +var ia=!("undefined"===typeof window||"undefined"===typeof window.document||"undefined"===typeof window.document.createElement),ja=Object.prototype.hasOwnProperty,ka=/^[:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD][:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\-.0-9\u00B7\u0300-\u036F\u203F-\u2040]*$/,la= +{},ma={};function oa(a){if(ja.call(ma,a))return!0;if(ja.call(la,a))return!1;if(ka.test(a))return ma[a]=!0;la[a]=!0;return!1}function pa(a,b,c,d){if(null!==c&&0===c.type)return!1;switch(typeof b){case "function":case "symbol":return!0;case "boolean":if(d)return!1;if(null!==c)return!c.acceptsBooleans;a=a.toLowerCase().slice(0,5);return"data-"!==a&&"aria-"!==a;default:return!1}} +function qa(a,b,c,d){if(null===b||"undefined"===typeof b||pa(a,b,c,d))return!0;if(d)return!1;if(null!==c)switch(c.type){case 3:return!b;case 4:return!1===b;case 5:return isNaN(b);case 6:return isNaN(b)||1>b}return!1}function v(a,b,c,d,e,f,g){this.acceptsBooleans=2===b||3===b||4===b;this.attributeName=d;this.attributeNamespace=e;this.mustUseProperty=c;this.propertyName=a;this.type=b;this.sanitizeURL=f;this.removeEmptyString=g}var z={}; +"children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style".split(" ").forEach(function(a){z[a]=new v(a,0,!1,a,null,!1,!1)});[["acceptCharset","accept-charset"],["className","class"],["htmlFor","for"],["httpEquiv","http-equiv"]].forEach(function(a){var b=a[0];z[b]=new v(b,1,!1,a[1],null,!1,!1)});["contentEditable","draggable","spellCheck","value"].forEach(function(a){z[a]=new v(a,2,!1,a.toLowerCase(),null,!1,!1)}); +["autoReverse","externalResourcesRequired","focusable","preserveAlpha"].forEach(function(a){z[a]=new v(a,2,!1,a,null,!1,!1)});"allowFullScreen async autoFocus autoPlay controls default defer disabled disablePictureInPicture disableRemotePlayback formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope".split(" ").forEach(function(a){z[a]=new v(a,3,!1,a.toLowerCase(),null,!1,!1)}); +["checked","multiple","muted","selected"].forEach(function(a){z[a]=new v(a,3,!0,a,null,!1,!1)});["capture","download"].forEach(function(a){z[a]=new v(a,4,!1,a,null,!1,!1)});["cols","rows","size","span"].forEach(function(a){z[a]=new v(a,6,!1,a,null,!1,!1)});["rowSpan","start"].forEach(function(a){z[a]=new v(a,5,!1,a.toLowerCase(),null,!1,!1)});var ra=/[\-:]([a-z])/g;function sa(a){return a[1].toUpperCase()} +"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach(function(a){var b=a.replace(ra, +sa);z[b]=new v(b,1,!1,a,null,!1,!1)});"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type".split(" ").forEach(function(a){var b=a.replace(ra,sa);z[b]=new v(b,1,!1,a,"http://www.w3.org/1999/xlink",!1,!1)});["xml:base","xml:lang","xml:space"].forEach(function(a){var b=a.replace(ra,sa);z[b]=new v(b,1,!1,a,"http://www.w3.org/XML/1998/namespace",!1,!1)});["tabIndex","crossOrigin"].forEach(function(a){z[a]=new v(a,1,!1,a.toLowerCase(),null,!1,!1)}); +z.xlinkHref=new v("xlinkHref",1,!1,"xlink:href","http://www.w3.org/1999/xlink",!0,!1);["src","href","action","formAction"].forEach(function(a){z[a]=new v(a,1,!1,a.toLowerCase(),null,!0,!0)}); +function ta(a,b,c,d){var e=z.hasOwnProperty(b)?z[b]:null;if(null!==e?0!==e.type:d||!(2<b.length)||"o"!==b[0]&&"O"!==b[0]||"n"!==b[1]&&"N"!==b[1])qa(b,c,e,d)&&(c=null),d||null===e?oa(b)&&(null===c?a.removeAttribute(b):a.setAttribute(b,""+c)):e.mustUseProperty?a[e.propertyName]=null===c?3===e.type?!1:"":c:(b=e.attributeName,d=e.attributeNamespace,null===c?a.removeAttribute(b):(e=e.type,c=3===e||4===e&&!0===c?"":""+c,d?a.setAttributeNS(d,b,c):a.setAttribute(b,c)))} +var ua=aa.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,va=Symbol.for("react.element"),wa=Symbol.for("react.portal"),ya=Symbol.for("react.fragment"),za=Symbol.for("react.strict_mode"),Aa=Symbol.for("react.profiler"),Ba=Symbol.for("react.provider"),Ca=Symbol.for("react.context"),Da=Symbol.for("react.forward_ref"),Ea=Symbol.for("react.suspense"),Fa=Symbol.for("react.suspense_list"),Ga=Symbol.for("react.memo"),Ha=Symbol.for("react.lazy");Symbol.for("react.scope");Symbol.for("react.debug_trace_mode"); +var Ia=Symbol.for("react.offscreen");Symbol.for("react.legacy_hidden");Symbol.for("react.cache");Symbol.for("react.tracing_marker");var Ja=Symbol.iterator;function Ka(a){if(null===a||"object"!==typeof a)return null;a=Ja&&a[Ja]||a["@@iterator"];return"function"===typeof a?a:null}var A=Object.assign,La;function Ma(a){if(void 0===La)try{throw Error();}catch(c){var b=c.stack.trim().match(/\n( *(at )?)/);La=b&&b[1]||""}return"\n"+La+a}var Na=!1; +function Oa(a,b){if(!a||Na)return"";Na=!0;var c=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{if(b)if(b=function(){throw Error();},Object.defineProperty(b.prototype,"props",{set:function(){throw Error();}}),"object"===typeof Reflect&&Reflect.construct){try{Reflect.construct(b,[])}catch(l){var d=l}Reflect.construct(a,[],b)}else{try{b.call()}catch(l){d=l}a.call(b.prototype)}else{try{throw Error();}catch(l){d=l}a()}}catch(l){if(l&&d&&"string"===typeof l.stack){for(var e=l.stack.split("\n"), +f=d.stack.split("\n"),g=e.length-1,h=f.length-1;1<=g&&0<=h&&e[g]!==f[h];)h--;for(;1<=g&&0<=h;g--,h--)if(e[g]!==f[h]){if(1!==g||1!==h){do if(g--,h--,0>h||e[g]!==f[h]){var k="\n"+e[g].replace(" at new "," at ");a.displayName&&k.includes("<anonymous>")&&(k=k.replace("<anonymous>",a.displayName));return k}while(1<=g&&0<=h)}break}}}finally{Na=!1,Error.prepareStackTrace=c}return(a=a?a.displayName||a.name:"")?Ma(a):""} +function Pa(a){switch(a.tag){case 5:return Ma(a.type);case 16:return Ma("Lazy");case 13:return Ma("Suspense");case 19:return Ma("SuspenseList");case 0:case 2:case 15:return a=Oa(a.type,!1),a;case 11:return a=Oa(a.type.render,!1),a;case 1:return a=Oa(a.type,!0),a;default:return""}} +function Qa(a){if(null==a)return null;if("function"===typeof a)return a.displayName||a.name||null;if("string"===typeof a)return a;switch(a){case ya:return"Fragment";case wa:return"Portal";case Aa:return"Profiler";case za:return"StrictMode";case Ea:return"Suspense";case Fa:return"SuspenseList"}if("object"===typeof a)switch(a.$$typeof){case Ca:return(a.displayName||"Context")+".Consumer";case Ba:return(a._context.displayName||"Context")+".Provider";case Da:var b=a.render;a=a.displayName;a||(a=b.displayName|| +b.name||"",a=""!==a?"ForwardRef("+a+")":"ForwardRef");return a;case Ga:return b=a.displayName||null,null!==b?b:Qa(a.type)||"Memo";case Ha:b=a._payload;a=a._init;try{return Qa(a(b))}catch(c){}}return null} +function Ra(a){var b=a.type;switch(a.tag){case 24:return"Cache";case 9:return(b.displayName||"Context")+".Consumer";case 10:return(b._context.displayName||"Context")+".Provider";case 18:return"DehydratedFragment";case 11:return a=b.render,a=a.displayName||a.name||"",b.displayName||(""!==a?"ForwardRef("+a+")":"ForwardRef");case 7:return"Fragment";case 5:return b;case 4:return"Portal";case 3:return"Root";case 6:return"Text";case 16:return Qa(b);case 8:return b===za?"StrictMode":"Mode";case 22:return"Offscreen"; +case 12:return"Profiler";case 21:return"Scope";case 13:return"Suspense";case 19:return"SuspenseList";case 25:return"TracingMarker";case 1:case 0:case 17:case 2:case 14:case 15:if("function"===typeof b)return b.displayName||b.name||null;if("string"===typeof b)return b}return null}function Sa(a){switch(typeof a){case "boolean":case "number":case "string":case "undefined":return a;case "object":return a;default:return""}} +function Ta(a){var b=a.type;return(a=a.nodeName)&&"input"===a.toLowerCase()&&("checkbox"===b||"radio"===b)} +function Ua(a){var b=Ta(a)?"checked":"value",c=Object.getOwnPropertyDescriptor(a.constructor.prototype,b),d=""+a[b];if(!a.hasOwnProperty(b)&&"undefined"!==typeof c&&"function"===typeof c.get&&"function"===typeof c.set){var e=c.get,f=c.set;Object.defineProperty(a,b,{configurable:!0,get:function(){return e.call(this)},set:function(a){d=""+a;f.call(this,a)}});Object.defineProperty(a,b,{enumerable:c.enumerable});return{getValue:function(){return d},setValue:function(a){d=""+a},stopTracking:function(){a._valueTracker= +null;delete a[b]}}}}function Va(a){a._valueTracker||(a._valueTracker=Ua(a))}function Wa(a){if(!a)return!1;var b=a._valueTracker;if(!b)return!0;var c=b.getValue();var d="";a&&(d=Ta(a)?a.checked?"true":"false":a.value);a=d;return a!==c?(b.setValue(a),!0):!1}function Xa(a){a=a||("undefined"!==typeof document?document:void 0);if("undefined"===typeof a)return null;try{return a.activeElement||a.body}catch(b){return a.body}} +function Ya(a,b){var c=b.checked;return A({},b,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:null!=c?c:a._wrapperState.initialChecked})}function Za(a,b){var c=null==b.defaultValue?"":b.defaultValue,d=null!=b.checked?b.checked:b.defaultChecked;c=Sa(null!=b.value?b.value:c);a._wrapperState={initialChecked:d,initialValue:c,controlled:"checkbox"===b.type||"radio"===b.type?null!=b.checked:null!=b.value}}function ab(a,b){b=b.checked;null!=b&&ta(a,"checked",b,!1)} +function bb(a,b){ab(a,b);var c=Sa(b.value),d=b.type;if(null!=c)if("number"===d){if(0===c&&""===a.value||a.value!=c)a.value=""+c}else a.value!==""+c&&(a.value=""+c);else if("submit"===d||"reset"===d){a.removeAttribute("value");return}b.hasOwnProperty("value")?cb(a,b.type,c):b.hasOwnProperty("defaultValue")&&cb(a,b.type,Sa(b.defaultValue));null==b.checked&&null!=b.defaultChecked&&(a.defaultChecked=!!b.defaultChecked)} +function db(a,b,c){if(b.hasOwnProperty("value")||b.hasOwnProperty("defaultValue")){var d=b.type;if(!("submit"!==d&&"reset"!==d||void 0!==b.value&&null!==b.value))return;b=""+a._wrapperState.initialValue;c||b===a.value||(a.value=b);a.defaultValue=b}c=a.name;""!==c&&(a.name="");a.defaultChecked=!!a._wrapperState.initialChecked;""!==c&&(a.name=c)} +function cb(a,b,c){if("number"!==b||Xa(a.ownerDocument)!==a)null==c?a.defaultValue=""+a._wrapperState.initialValue:a.defaultValue!==""+c&&(a.defaultValue=""+c)}var eb=Array.isArray; +function fb(a,b,c,d){a=a.options;if(b){b={};for(var e=0;e<c.length;e++)b["$"+c[e]]=!0;for(c=0;c<a.length;c++)e=b.hasOwnProperty("$"+a[c].value),a[c].selected!==e&&(a[c].selected=e),e&&d&&(a[c].defaultSelected=!0)}else{c=""+Sa(c);b=null;for(e=0;e<a.length;e++){if(a[e].value===c){a[e].selected=!0;d&&(a[e].defaultSelected=!0);return}null!==b||a[e].disabled||(b=a[e])}null!==b&&(b.selected=!0)}} +function gb(a,b){if(null!=b.dangerouslySetInnerHTML)throw Error(p(91));return A({},b,{value:void 0,defaultValue:void 0,children:""+a._wrapperState.initialValue})}function hb(a,b){var c=b.value;if(null==c){c=b.children;b=b.defaultValue;if(null!=c){if(null!=b)throw Error(p(92));if(eb(c)){if(1<c.length)throw Error(p(93));c=c[0]}b=c}null==b&&(b="");c=b}a._wrapperState={initialValue:Sa(c)}} +function ib(a,b){var c=Sa(b.value),d=Sa(b.defaultValue);null!=c&&(c=""+c,c!==a.value&&(a.value=c),null==b.defaultValue&&a.defaultValue!==c&&(a.defaultValue=c));null!=d&&(a.defaultValue=""+d)}function jb(a){var b=a.textContent;b===a._wrapperState.initialValue&&""!==b&&null!==b&&(a.value=b)}function kb(a){switch(a){case "svg":return"http://www.w3.org/2000/svg";case "math":return"http://www.w3.org/1998/Math/MathML";default:return"http://www.w3.org/1999/xhtml"}} +function lb(a,b){return null==a||"http://www.w3.org/1999/xhtml"===a?kb(b):"http://www.w3.org/2000/svg"===a&&"foreignObject"===b?"http://www.w3.org/1999/xhtml":a} +var mb,nb=function(a){return"undefined"!==typeof MSApp&&MSApp.execUnsafeLocalFunction?function(b,c,d,e){MSApp.execUnsafeLocalFunction(function(){return a(b,c,d,e)})}:a}(function(a,b){if("http://www.w3.org/2000/svg"!==a.namespaceURI||"innerHTML"in a)a.innerHTML=b;else{mb=mb||document.createElement("div");mb.innerHTML="<svg>"+b.valueOf().toString()+"</svg>";for(b=mb.firstChild;a.firstChild;)a.removeChild(a.firstChild);for(;b.firstChild;)a.appendChild(b.firstChild)}}); +function ob(a,b){if(b){var c=a.firstChild;if(c&&c===a.lastChild&&3===c.nodeType){c.nodeValue=b;return}}a.textContent=b} +var pb={animationIterationCount:!0,aspectRatio:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0, +zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},qb=["Webkit","ms","Moz","O"];Object.keys(pb).forEach(function(a){qb.forEach(function(b){b=b+a.charAt(0).toUpperCase()+a.substring(1);pb[b]=pb[a]})});function rb(a,b,c){return null==b||"boolean"===typeof b||""===b?"":c||"number"!==typeof b||0===b||pb.hasOwnProperty(a)&&pb[a]?(""+b).trim():b+"px"} +function sb(a,b){a=a.style;for(var c in b)if(b.hasOwnProperty(c)){var d=0===c.indexOf("--"),e=rb(c,b[c],d);"float"===c&&(c="cssFloat");d?a.setProperty(c,e):a[c]=e}}var tb=A({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0}); +function ub(a,b){if(b){if(tb[a]&&(null!=b.children||null!=b.dangerouslySetInnerHTML))throw Error(p(137,a));if(null!=b.dangerouslySetInnerHTML){if(null!=b.children)throw Error(p(60));if("object"!==typeof b.dangerouslySetInnerHTML||!("__html"in b.dangerouslySetInnerHTML))throw Error(p(61));}if(null!=b.style&&"object"!==typeof b.style)throw Error(p(62));}} +function vb(a,b){if(-1===a.indexOf("-"))return"string"===typeof b.is;switch(a){case "annotation-xml":case "color-profile":case "font-face":case "font-face-src":case "font-face-uri":case "font-face-format":case "font-face-name":case "missing-glyph":return!1;default:return!0}}var wb=null;function xb(a){a=a.target||a.srcElement||window;a.correspondingUseElement&&(a=a.correspondingUseElement);return 3===a.nodeType?a.parentNode:a}var yb=null,zb=null,Ab=null; +function Bb(a){if(a=Cb(a)){if("function"!==typeof yb)throw Error(p(280));var b=a.stateNode;b&&(b=Db(b),yb(a.stateNode,a.type,b))}}function Eb(a){zb?Ab?Ab.push(a):Ab=[a]:zb=a}function Fb(){if(zb){var a=zb,b=Ab;Ab=zb=null;Bb(a);if(b)for(a=0;a<b.length;a++)Bb(b[a])}}function Gb(a,b){return a(b)}function Hb(){}var Ib=!1;function Jb(a,b,c){if(Ib)return a(b,c);Ib=!0;try{return Gb(a,b,c)}finally{if(Ib=!1,null!==zb||null!==Ab)Hb(),Fb()}} +function Kb(a,b){var c=a.stateNode;if(null===c)return null;var d=Db(c);if(null===d)return null;c=d[b];a:switch(b){case "onClick":case "onClickCapture":case "onDoubleClick":case "onDoubleClickCapture":case "onMouseDown":case "onMouseDownCapture":case "onMouseMove":case "onMouseMoveCapture":case "onMouseUp":case "onMouseUpCapture":case "onMouseEnter":(d=!d.disabled)||(a=a.type,d=!("button"===a||"input"===a||"select"===a||"textarea"===a));a=!d;break a;default:a=!1}if(a)return null;if(c&&"function"!== +typeof c)throw Error(p(231,b,typeof c));return c}var Lb=!1;if(ia)try{var Mb={};Object.defineProperty(Mb,"passive",{get:function(){Lb=!0}});window.addEventListener("test",Mb,Mb);window.removeEventListener("test",Mb,Mb)}catch(a){Lb=!1}function Nb(a,b,c,d,e,f,g,h,k){var l=Array.prototype.slice.call(arguments,3);try{b.apply(c,l)}catch(m){this.onError(m)}}var Ob=!1,Pb=null,Qb=!1,Rb=null,Sb={onError:function(a){Ob=!0;Pb=a}};function Tb(a,b,c,d,e,f,g,h,k){Ob=!1;Pb=null;Nb.apply(Sb,arguments)} +function Ub(a,b,c,d,e,f,g,h,k){Tb.apply(this,arguments);if(Ob){if(Ob){var l=Pb;Ob=!1;Pb=null}else throw Error(p(198));Qb||(Qb=!0,Rb=l)}}function Vb(a){var b=a,c=a;if(a.alternate)for(;b.return;)b=b.return;else{a=b;do b=a,0!==(b.flags&4098)&&(c=b.return),a=b.return;while(a)}return 3===b.tag?c:null}function Wb(a){if(13===a.tag){var b=a.memoizedState;null===b&&(a=a.alternate,null!==a&&(b=a.memoizedState));if(null!==b)return b.dehydrated}return null}function Xb(a){if(Vb(a)!==a)throw Error(p(188));} +function Yb(a){var b=a.alternate;if(!b){b=Vb(a);if(null===b)throw Error(p(188));return b!==a?null:a}for(var c=a,d=b;;){var e=c.return;if(null===e)break;var f=e.alternate;if(null===f){d=e.return;if(null!==d){c=d;continue}break}if(e.child===f.child){for(f=e.child;f;){if(f===c)return Xb(e),a;if(f===d)return Xb(e),b;f=f.sibling}throw Error(p(188));}if(c.return!==d.return)c=e,d=f;else{for(var g=!1,h=e.child;h;){if(h===c){g=!0;c=e;d=f;break}if(h===d){g=!0;d=e;c=f;break}h=h.sibling}if(!g){for(h=f.child;h;){if(h=== +c){g=!0;c=f;d=e;break}if(h===d){g=!0;d=f;c=e;break}h=h.sibling}if(!g)throw Error(p(189));}}if(c.alternate!==d)throw Error(p(190));}if(3!==c.tag)throw Error(p(188));return c.stateNode.current===c?a:b}function Zb(a){a=Yb(a);return null!==a?$b(a):null}function $b(a){if(5===a.tag||6===a.tag)return a;for(a=a.child;null!==a;){var b=$b(a);if(null!==b)return b;a=a.sibling}return null} +var ac=ca.unstable_scheduleCallback,bc=ca.unstable_cancelCallback,cc=ca.unstable_shouldYield,dc=ca.unstable_requestPaint,B=ca.unstable_now,ec=ca.unstable_getCurrentPriorityLevel,fc=ca.unstable_ImmediatePriority,gc=ca.unstable_UserBlockingPriority,hc=ca.unstable_NormalPriority,ic=ca.unstable_LowPriority,jc=ca.unstable_IdlePriority,kc=null,lc=null;function mc(a){if(lc&&"function"===typeof lc.onCommitFiberRoot)try{lc.onCommitFiberRoot(kc,a,void 0,128===(a.current.flags&128))}catch(b){}} +var oc=Math.clz32?Math.clz32:nc,pc=Math.log,qc=Math.LN2;function nc(a){a>>>=0;return 0===a?32:31-(pc(a)/qc|0)|0}var rc=64,sc=4194304; +function tc(a){switch(a&-a){case 1:return 1;case 2:return 2;case 4:return 4;case 8:return 8;case 16:return 16;case 32:return 32;case 64:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:return a&4194240;case 4194304:case 8388608:case 16777216:case 33554432:case 67108864:return a&130023424;case 134217728:return 134217728;case 268435456:return 268435456;case 536870912:return 536870912;case 1073741824:return 1073741824; +default:return a}}function uc(a,b){var c=a.pendingLanes;if(0===c)return 0;var d=0,e=a.suspendedLanes,f=a.pingedLanes,g=c&268435455;if(0!==g){var h=g&~e;0!==h?d=tc(h):(f&=g,0!==f&&(d=tc(f)))}else g=c&~e,0!==g?d=tc(g):0!==f&&(d=tc(f));if(0===d)return 0;if(0!==b&&b!==d&&0===(b&e)&&(e=d&-d,f=b&-b,e>=f||16===e&&0!==(f&4194240)))return b;0!==(d&4)&&(d|=c&16);b=a.entangledLanes;if(0!==b)for(a=a.entanglements,b&=d;0<b;)c=31-oc(b),e=1<<c,d|=a[c],b&=~e;return d} +function vc(a,b){switch(a){case 1:case 2:case 4:return b+250;case 8:case 16:case 32:case 64:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:return b+5E3;case 4194304:case 8388608:case 16777216:case 33554432:case 67108864:return-1;case 134217728:case 268435456:case 536870912:case 1073741824:return-1;default:return-1}} +function wc(a,b){for(var c=a.suspendedLanes,d=a.pingedLanes,e=a.expirationTimes,f=a.pendingLanes;0<f;){var g=31-oc(f),h=1<<g,k=e[g];if(-1===k){if(0===(h&c)||0!==(h&d))e[g]=vc(h,b)}else k<=b&&(a.expiredLanes|=h);f&=~h}}function xc(a){a=a.pendingLanes&-1073741825;return 0!==a?a:a&1073741824?1073741824:0}function yc(){var a=rc;rc<<=1;0===(rc&4194240)&&(rc=64);return a}function zc(a){for(var b=[],c=0;31>c;c++)b.push(a);return b} +function Ac(a,b,c){a.pendingLanes|=b;536870912!==b&&(a.suspendedLanes=0,a.pingedLanes=0);a=a.eventTimes;b=31-oc(b);a[b]=c}function Bc(a,b){var c=a.pendingLanes&~b;a.pendingLanes=b;a.suspendedLanes=0;a.pingedLanes=0;a.expiredLanes&=b;a.mutableReadLanes&=b;a.entangledLanes&=b;b=a.entanglements;var d=a.eventTimes;for(a=a.expirationTimes;0<c;){var e=31-oc(c),f=1<<e;b[e]=0;d[e]=-1;a[e]=-1;c&=~f}} +function Cc(a,b){var c=a.entangledLanes|=b;for(a=a.entanglements;c;){var d=31-oc(c),e=1<<d;e&b|a[d]&b&&(a[d]|=b);c&=~e}}var C=0;function Dc(a){a&=-a;return 1<a?4<a?0!==(a&268435455)?16:536870912:4:1}var Ec,Fc,Gc,Hc,Ic,Jc=!1,Kc=[],Lc=null,Mc=null,Nc=null,Oc=new Map,Pc=new Map,Qc=[],Rc="mousedown mouseup touchcancel touchend touchstart auxclick dblclick pointercancel pointerdown pointerup dragend dragstart drop compositionend compositionstart keydown keypress keyup input textInput copy cut paste click change contextmenu reset submit".split(" "); +function Sc(a,b){switch(a){case "focusin":case "focusout":Lc=null;break;case "dragenter":case "dragleave":Mc=null;break;case "mouseover":case "mouseout":Nc=null;break;case "pointerover":case "pointerout":Oc.delete(b.pointerId);break;case "gotpointercapture":case "lostpointercapture":Pc.delete(b.pointerId)}} +function Tc(a,b,c,d,e,f){if(null===a||a.nativeEvent!==f)return a={blockedOn:b,domEventName:c,eventSystemFlags:d,nativeEvent:f,targetContainers:[e]},null!==b&&(b=Cb(b),null!==b&&Fc(b)),a;a.eventSystemFlags|=d;b=a.targetContainers;null!==e&&-1===b.indexOf(e)&&b.push(e);return a} +function Uc(a,b,c,d,e){switch(b){case "focusin":return Lc=Tc(Lc,a,b,c,d,e),!0;case "dragenter":return Mc=Tc(Mc,a,b,c,d,e),!0;case "mouseover":return Nc=Tc(Nc,a,b,c,d,e),!0;case "pointerover":var f=e.pointerId;Oc.set(f,Tc(Oc.get(f)||null,a,b,c,d,e));return!0;case "gotpointercapture":return f=e.pointerId,Pc.set(f,Tc(Pc.get(f)||null,a,b,c,d,e)),!0}return!1} +function Vc(a){var b=Wc(a.target);if(null!==b){var c=Vb(b);if(null!==c)if(b=c.tag,13===b){if(b=Wb(c),null!==b){a.blockedOn=b;Ic(a.priority,function(){Gc(c)});return}}else if(3===b&&c.stateNode.current.memoizedState.isDehydrated){a.blockedOn=3===c.tag?c.stateNode.containerInfo:null;return}}a.blockedOn=null} +function Xc(a){if(null!==a.blockedOn)return!1;for(var b=a.targetContainers;0<b.length;){var c=Yc(a.domEventName,a.eventSystemFlags,b[0],a.nativeEvent);if(null===c){c=a.nativeEvent;var d=new c.constructor(c.type,c);wb=d;c.target.dispatchEvent(d);wb=null}else return b=Cb(c),null!==b&&Fc(b),a.blockedOn=c,!1;b.shift()}return!0}function Zc(a,b,c){Xc(a)&&c.delete(b)}function $c(){Jc=!1;null!==Lc&&Xc(Lc)&&(Lc=null);null!==Mc&&Xc(Mc)&&(Mc=null);null!==Nc&&Xc(Nc)&&(Nc=null);Oc.forEach(Zc);Pc.forEach(Zc)} +function ad(a,b){a.blockedOn===b&&(a.blockedOn=null,Jc||(Jc=!0,ca.unstable_scheduleCallback(ca.unstable_NormalPriority,$c)))} +function bd(a){function b(b){return ad(b,a)}if(0<Kc.length){ad(Kc[0],a);for(var c=1;c<Kc.length;c++){var d=Kc[c];d.blockedOn===a&&(d.blockedOn=null)}}null!==Lc&&ad(Lc,a);null!==Mc&&ad(Mc,a);null!==Nc&&ad(Nc,a);Oc.forEach(b);Pc.forEach(b);for(c=0;c<Qc.length;c++)d=Qc[c],d.blockedOn===a&&(d.blockedOn=null);for(;0<Qc.length&&(c=Qc[0],null===c.blockedOn);)Vc(c),null===c.blockedOn&&Qc.shift()}var cd=ua.ReactCurrentBatchConfig,dd=!0; +function ed(a,b,c,d){var e=C,f=cd.transition;cd.transition=null;try{C=1,fd(a,b,c,d)}finally{C=e,cd.transition=f}}function gd(a,b,c,d){var e=C,f=cd.transition;cd.transition=null;try{C=4,fd(a,b,c,d)}finally{C=e,cd.transition=f}} +function fd(a,b,c,d){if(dd){var e=Yc(a,b,c,d);if(null===e)hd(a,b,d,id,c),Sc(a,d);else if(Uc(e,a,b,c,d))d.stopPropagation();else if(Sc(a,d),b&4&&-1<Rc.indexOf(a)){for(;null!==e;){var f=Cb(e);null!==f&&Ec(f);f=Yc(a,b,c,d);null===f&&hd(a,b,d,id,c);if(f===e)break;e=f}null!==e&&d.stopPropagation()}else hd(a,b,d,null,c)}}var id=null; +function Yc(a,b,c,d){id=null;a=xb(d);a=Wc(a);if(null!==a)if(b=Vb(a),null===b)a=null;else if(c=b.tag,13===c){a=Wb(b);if(null!==a)return a;a=null}else if(3===c){if(b.stateNode.current.memoizedState.isDehydrated)return 3===b.tag?b.stateNode.containerInfo:null;a=null}else b!==a&&(a=null);id=a;return null} +function jd(a){switch(a){case "cancel":case "click":case "close":case "contextmenu":case "copy":case "cut":case "auxclick":case "dblclick":case "dragend":case "dragstart":case "drop":case "focusin":case "focusout":case "input":case "invalid":case "keydown":case "keypress":case "keyup":case "mousedown":case "mouseup":case "paste":case "pause":case "play":case "pointercancel":case "pointerdown":case "pointerup":case "ratechange":case "reset":case "resize":case "seeked":case "submit":case "touchcancel":case "touchend":case "touchstart":case "volumechange":case "change":case "selectionchange":case "textInput":case "compositionstart":case "compositionend":case "compositionupdate":case "beforeblur":case "afterblur":case "beforeinput":case "blur":case "fullscreenchange":case "focus":case "hashchange":case "popstate":case "select":case "selectstart":return 1;case "drag":case "dragenter":case "dragexit":case "dragleave":case "dragover":case "mousemove":case "mouseout":case "mouseover":case "pointermove":case "pointerout":case "pointerover":case "scroll":case "toggle":case "touchmove":case "wheel":case "mouseenter":case "mouseleave":case "pointerenter":case "pointerleave":return 4; +case "message":switch(ec()){case fc:return 1;case gc:return 4;case hc:case ic:return 16;case jc:return 536870912;default:return 16}default:return 16}}var kd=null,ld=null,md=null;function nd(){if(md)return md;var a,b=ld,c=b.length,d,e="value"in kd?kd.value:kd.textContent,f=e.length;for(a=0;a<c&&b[a]===e[a];a++);var g=c-a;for(d=1;d<=g&&b[c-d]===e[f-d];d++);return md=e.slice(a,1<d?1-d:void 0)} +function od(a){var b=a.keyCode;"charCode"in a?(a=a.charCode,0===a&&13===b&&(a=13)):a=b;10===a&&(a=13);return 32<=a||13===a?a:0}function pd(){return!0}function qd(){return!1} +function rd(a){function b(b,d,e,f,g){this._reactName=b;this._targetInst=e;this.type=d;this.nativeEvent=f;this.target=g;this.currentTarget=null;for(var c in a)a.hasOwnProperty(c)&&(b=a[c],this[c]=b?b(f):f[c]);this.isDefaultPrevented=(null!=f.defaultPrevented?f.defaultPrevented:!1===f.returnValue)?pd:qd;this.isPropagationStopped=qd;return this}A(b.prototype,{preventDefault:function(){this.defaultPrevented=!0;var a=this.nativeEvent;a&&(a.preventDefault?a.preventDefault():"unknown"!==typeof a.returnValue&& +(a.returnValue=!1),this.isDefaultPrevented=pd)},stopPropagation:function(){var a=this.nativeEvent;a&&(a.stopPropagation?a.stopPropagation():"unknown"!==typeof a.cancelBubble&&(a.cancelBubble=!0),this.isPropagationStopped=pd)},persist:function(){},isPersistent:pd});return b} +var sd={eventPhase:0,bubbles:0,cancelable:0,timeStamp:function(a){return a.timeStamp||Date.now()},defaultPrevented:0,isTrusted:0},td=rd(sd),ud=A({},sd,{view:0,detail:0}),vd=rd(ud),wd,xd,yd,Ad=A({},ud,{screenX:0,screenY:0,clientX:0,clientY:0,pageX:0,pageY:0,ctrlKey:0,shiftKey:0,altKey:0,metaKey:0,getModifierState:zd,button:0,buttons:0,relatedTarget:function(a){return void 0===a.relatedTarget?a.fromElement===a.srcElement?a.toElement:a.fromElement:a.relatedTarget},movementX:function(a){if("movementX"in +a)return a.movementX;a!==yd&&(yd&&"mousemove"===a.type?(wd=a.screenX-yd.screenX,xd=a.screenY-yd.screenY):xd=wd=0,yd=a);return wd},movementY:function(a){return"movementY"in a?a.movementY:xd}}),Bd=rd(Ad),Cd=A({},Ad,{dataTransfer:0}),Dd=rd(Cd),Ed=A({},ud,{relatedTarget:0}),Fd=rd(Ed),Gd=A({},sd,{animationName:0,elapsedTime:0,pseudoElement:0}),Hd=rd(Gd),Id=A({},sd,{clipboardData:function(a){return"clipboardData"in a?a.clipboardData:window.clipboardData}}),Jd=rd(Id),Kd=A({},sd,{data:0}),Ld=rd(Kd),Md={Esc:"Escape", +Spacebar:" ",Left:"ArrowLeft",Up:"ArrowUp",Right:"ArrowRight",Down:"ArrowDown",Del:"Delete",Win:"OS",Menu:"ContextMenu",Apps:"ContextMenu",Scroll:"ScrollLock",MozPrintableKey:"Unidentified"},Nd={8:"Backspace",9:"Tab",12:"Clear",13:"Enter",16:"Shift",17:"Control",18:"Alt",19:"Pause",20:"CapsLock",27:"Escape",32:" ",33:"PageUp",34:"PageDown",35:"End",36:"Home",37:"ArrowLeft",38:"ArrowUp",39:"ArrowRight",40:"ArrowDown",45:"Insert",46:"Delete",112:"F1",113:"F2",114:"F3",115:"F4",116:"F5",117:"F6",118:"F7", +119:"F8",120:"F9",121:"F10",122:"F11",123:"F12",144:"NumLock",145:"ScrollLock",224:"Meta"},Od={Alt:"altKey",Control:"ctrlKey",Meta:"metaKey",Shift:"shiftKey"};function Pd(a){var b=this.nativeEvent;return b.getModifierState?b.getModifierState(a):(a=Od[a])?!!b[a]:!1}function zd(){return Pd} +var Qd=A({},ud,{key:function(a){if(a.key){var b=Md[a.key]||a.key;if("Unidentified"!==b)return b}return"keypress"===a.type?(a=od(a),13===a?"Enter":String.fromCharCode(a)):"keydown"===a.type||"keyup"===a.type?Nd[a.keyCode]||"Unidentified":""},code:0,location:0,ctrlKey:0,shiftKey:0,altKey:0,metaKey:0,repeat:0,locale:0,getModifierState:zd,charCode:function(a){return"keypress"===a.type?od(a):0},keyCode:function(a){return"keydown"===a.type||"keyup"===a.type?a.keyCode:0},which:function(a){return"keypress"=== +a.type?od(a):"keydown"===a.type||"keyup"===a.type?a.keyCode:0}}),Rd=rd(Qd),Sd=A({},Ad,{pointerId:0,width:0,height:0,pressure:0,tangentialPressure:0,tiltX:0,tiltY:0,twist:0,pointerType:0,isPrimary:0}),Td=rd(Sd),Ud=A({},ud,{touches:0,targetTouches:0,changedTouches:0,altKey:0,metaKey:0,ctrlKey:0,shiftKey:0,getModifierState:zd}),Vd=rd(Ud),Wd=A({},sd,{propertyName:0,elapsedTime:0,pseudoElement:0}),Xd=rd(Wd),Yd=A({},Ad,{deltaX:function(a){return"deltaX"in a?a.deltaX:"wheelDeltaX"in a?-a.wheelDeltaX:0}, +deltaY:function(a){return"deltaY"in a?a.deltaY:"wheelDeltaY"in a?-a.wheelDeltaY:"wheelDelta"in a?-a.wheelDelta:0},deltaZ:0,deltaMode:0}),Zd=rd(Yd),$d=[9,13,27,32],ae=ia&&"CompositionEvent"in window,be=null;ia&&"documentMode"in document&&(be=document.documentMode);var ce=ia&&"TextEvent"in window&&!be,de=ia&&(!ae||be&&8<be&&11>=be),ee=String.fromCharCode(32),fe=!1; +function ge(a,b){switch(a){case "keyup":return-1!==$d.indexOf(b.keyCode);case "keydown":return 229!==b.keyCode;case "keypress":case "mousedown":case "focusout":return!0;default:return!1}}function he(a){a=a.detail;return"object"===typeof a&&"data"in a?a.data:null}var ie=!1;function je(a,b){switch(a){case "compositionend":return he(b);case "keypress":if(32!==b.which)return null;fe=!0;return ee;case "textInput":return a=b.data,a===ee&&fe?null:a;default:return null}} +function ke(a,b){if(ie)return"compositionend"===a||!ae&&ge(a,b)?(a=nd(),md=ld=kd=null,ie=!1,a):null;switch(a){case "paste":return null;case "keypress":if(!(b.ctrlKey||b.altKey||b.metaKey)||b.ctrlKey&&b.altKey){if(b.char&&1<b.char.length)return b.char;if(b.which)return String.fromCharCode(b.which)}return null;case "compositionend":return de&&"ko"!==b.locale?null:b.data;default:return null}} +var le={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};function me(a){var b=a&&a.nodeName&&a.nodeName.toLowerCase();return"input"===b?!!le[a.type]:"textarea"===b?!0:!1}function ne(a,b,c,d){Eb(d);b=oe(b,"onChange");0<b.length&&(c=new td("onChange","change",null,c,d),a.push({event:c,listeners:b}))}var pe=null,qe=null;function re(a){se(a,0)}function te(a){var b=ue(a);if(Wa(b))return a} +function ve(a,b){if("change"===a)return b}var we=!1;if(ia){var xe;if(ia){var ye="oninput"in document;if(!ye){var ze=document.createElement("div");ze.setAttribute("oninput","return;");ye="function"===typeof ze.oninput}xe=ye}else xe=!1;we=xe&&(!document.documentMode||9<document.documentMode)}function Ae(){pe&&(pe.detachEvent("onpropertychange",Be),qe=pe=null)}function Be(a){if("value"===a.propertyName&&te(qe)){var b=[];ne(b,qe,a,xb(a));Jb(re,b)}} +function Ce(a,b,c){"focusin"===a?(Ae(),pe=b,qe=c,pe.attachEvent("onpropertychange",Be)):"focusout"===a&&Ae()}function De(a){if("selectionchange"===a||"keyup"===a||"keydown"===a)return te(qe)}function Ee(a,b){if("click"===a)return te(b)}function Fe(a,b){if("input"===a||"change"===a)return te(b)}function Ge(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var He="function"===typeof Object.is?Object.is:Ge; +function Ie(a,b){if(He(a,b))return!0;if("object"!==typeof a||null===a||"object"!==typeof b||null===b)return!1;var c=Object.keys(a),d=Object.keys(b);if(c.length!==d.length)return!1;for(d=0;d<c.length;d++){var e=c[d];if(!ja.call(b,e)||!He(a[e],b[e]))return!1}return!0}function Je(a){for(;a&&a.firstChild;)a=a.firstChild;return a} +function Ke(a,b){var c=Je(a);a=0;for(var d;c;){if(3===c.nodeType){d=a+c.textContent.length;if(a<=b&&d>=b)return{node:c,offset:b-a};a=d}a:{for(;c;){if(c.nextSibling){c=c.nextSibling;break a}c=c.parentNode}c=void 0}c=Je(c)}}function Le(a,b){return a&&b?a===b?!0:a&&3===a.nodeType?!1:b&&3===b.nodeType?Le(a,b.parentNode):"contains"in a?a.contains(b):a.compareDocumentPosition?!!(a.compareDocumentPosition(b)&16):!1:!1} +function Me(){for(var a=window,b=Xa();b instanceof a.HTMLIFrameElement;){try{var c="string"===typeof b.contentWindow.location.href}catch(d){c=!1}if(c)a=b.contentWindow;else break;b=Xa(a.document)}return b}function Ne(a){var b=a&&a.nodeName&&a.nodeName.toLowerCase();return b&&("input"===b&&("text"===a.type||"search"===a.type||"tel"===a.type||"url"===a.type||"password"===a.type)||"textarea"===b||"true"===a.contentEditable)} +function Oe(a){var b=Me(),c=a.focusedElem,d=a.selectionRange;if(b!==c&&c&&c.ownerDocument&&Le(c.ownerDocument.documentElement,c)){if(null!==d&&Ne(c))if(b=d.start,a=d.end,void 0===a&&(a=b),"selectionStart"in c)c.selectionStart=b,c.selectionEnd=Math.min(a,c.value.length);else if(a=(b=c.ownerDocument||document)&&b.defaultView||window,a.getSelection){a=a.getSelection();var e=c.textContent.length,f=Math.min(d.start,e);d=void 0===d.end?f:Math.min(d.end,e);!a.extend&&f>d&&(e=d,d=f,f=e);e=Ke(c,f);var g=Ke(c, +d);e&&g&&(1!==a.rangeCount||a.anchorNode!==e.node||a.anchorOffset!==e.offset||a.focusNode!==g.node||a.focusOffset!==g.offset)&&(b=b.createRange(),b.setStart(e.node,e.offset),a.removeAllRanges(),f>d?(a.addRange(b),a.extend(g.node,g.offset)):(b.setEnd(g.node,g.offset),a.addRange(b)))}b=[];for(a=c;a=a.parentNode;)1===a.nodeType&&b.push({element:a,left:a.scrollLeft,top:a.scrollTop});"function"===typeof c.focus&&c.focus();for(c=0;c<b.length;c++)a=b[c],a.element.scrollLeft=a.left,a.element.scrollTop=a.top}} +var Pe=ia&&"documentMode"in document&&11>=document.documentMode,Qe=null,Re=null,Se=null,Te=!1; +function Ue(a,b,c){var d=c.window===c?c.document:9===c.nodeType?c:c.ownerDocument;Te||null==Qe||Qe!==Xa(d)||(d=Qe,"selectionStart"in d&&Ne(d)?d={start:d.selectionStart,end:d.selectionEnd}:(d=(d.ownerDocument&&d.ownerDocument.defaultView||window).getSelection(),d={anchorNode:d.anchorNode,anchorOffset:d.anchorOffset,focusNode:d.focusNode,focusOffset:d.focusOffset}),Se&&Ie(Se,d)||(Se=d,d=oe(Re,"onSelect"),0<d.length&&(b=new td("onSelect","select",null,b,c),a.push({event:b,listeners:d}),b.target=Qe)))} +function Ve(a,b){var c={};c[a.toLowerCase()]=b.toLowerCase();c["Webkit"+a]="webkit"+b;c["Moz"+a]="moz"+b;return c}var We={animationend:Ve("Animation","AnimationEnd"),animationiteration:Ve("Animation","AnimationIteration"),animationstart:Ve("Animation","AnimationStart"),transitionend:Ve("Transition","TransitionEnd")},Xe={},Ye={}; +ia&&(Ye=document.createElement("div").style,"AnimationEvent"in window||(delete We.animationend.animation,delete We.animationiteration.animation,delete We.animationstart.animation),"TransitionEvent"in window||delete We.transitionend.transition);function Ze(a){if(Xe[a])return Xe[a];if(!We[a])return a;var b=We[a],c;for(c in b)if(b.hasOwnProperty(c)&&c in Ye)return Xe[a]=b[c];return a}var $e=Ze("animationend"),af=Ze("animationiteration"),bf=Ze("animationstart"),cf=Ze("transitionend"),df=new Map,ef="abort auxClick cancel canPlay canPlayThrough click close contextMenu copy cut drag dragEnd dragEnter dragExit dragLeave dragOver dragStart drop durationChange emptied encrypted ended error gotPointerCapture input invalid keyDown keyPress keyUp load loadedData loadedMetadata loadStart lostPointerCapture mouseDown mouseMove mouseOut mouseOver mouseUp paste pause play playing pointerCancel pointerDown pointerMove pointerOut pointerOver pointerUp progress rateChange reset resize seeked seeking stalled submit suspend timeUpdate touchCancel touchEnd touchStart volumeChange scroll toggle touchMove waiting wheel".split(" "); +function ff(a,b){df.set(a,b);fa(b,[a])}for(var gf=0;gf<ef.length;gf++){var hf=ef[gf],jf=hf.toLowerCase(),kf=hf[0].toUpperCase()+hf.slice(1);ff(jf,"on"+kf)}ff($e,"onAnimationEnd");ff(af,"onAnimationIteration");ff(bf,"onAnimationStart");ff("dblclick","onDoubleClick");ff("focusin","onFocus");ff("focusout","onBlur");ff(cf,"onTransitionEnd");ha("onMouseEnter",["mouseout","mouseover"]);ha("onMouseLeave",["mouseout","mouseover"]);ha("onPointerEnter",["pointerout","pointerover"]); +ha("onPointerLeave",["pointerout","pointerover"]);fa("onChange","change click focusin focusout input keydown keyup selectionchange".split(" "));fa("onSelect","focusout contextmenu dragend focusin keydown keyup mousedown mouseup selectionchange".split(" "));fa("onBeforeInput",["compositionend","keypress","textInput","paste"]);fa("onCompositionEnd","compositionend focusout keydown keypress keyup mousedown".split(" "));fa("onCompositionStart","compositionstart focusout keydown keypress keyup mousedown".split(" ")); +fa("onCompositionUpdate","compositionupdate focusout keydown keypress keyup mousedown".split(" "));var lf="abort canplay canplaythrough durationchange emptied encrypted ended error loadeddata loadedmetadata loadstart pause play playing progress ratechange resize seeked seeking stalled suspend timeupdate volumechange waiting".split(" "),mf=new Set("cancel close invalid load scroll toggle".split(" ").concat(lf)); +function nf(a,b,c){var d=a.type||"unknown-event";a.currentTarget=c;Ub(d,b,void 0,a);a.currentTarget=null} +function se(a,b){b=0!==(b&4);for(var c=0;c<a.length;c++){var d=a[c],e=d.event;d=d.listeners;a:{var f=void 0;if(b)for(var g=d.length-1;0<=g;g--){var h=d[g],k=h.instance,l=h.currentTarget;h=h.listener;if(k!==f&&e.isPropagationStopped())break a;nf(e,h,l);f=k}else for(g=0;g<d.length;g++){h=d[g];k=h.instance;l=h.currentTarget;h=h.listener;if(k!==f&&e.isPropagationStopped())break a;nf(e,h,l);f=k}}}if(Qb)throw a=Rb,Qb=!1,Rb=null,a;} +function D(a,b){var c=b[of];void 0===c&&(c=b[of]=new Set);var d=a+"__bubble";c.has(d)||(pf(b,a,2,!1),c.add(d))}function qf(a,b,c){var d=0;b&&(d|=4);pf(c,a,d,b)}var rf="_reactListening"+Math.random().toString(36).slice(2);function sf(a){if(!a[rf]){a[rf]=!0;da.forEach(function(b){"selectionchange"!==b&&(mf.has(b)||qf(b,!1,a),qf(b,!0,a))});var b=9===a.nodeType?a:a.ownerDocument;null===b||b[rf]||(b[rf]=!0,qf("selectionchange",!1,b))}} +function pf(a,b,c,d){switch(jd(b)){case 1:var e=ed;break;case 4:e=gd;break;default:e=fd}c=e.bind(null,b,c,a);e=void 0;!Lb||"touchstart"!==b&&"touchmove"!==b&&"wheel"!==b||(e=!0);d?void 0!==e?a.addEventListener(b,c,{capture:!0,passive:e}):a.addEventListener(b,c,!0):void 0!==e?a.addEventListener(b,c,{passive:e}):a.addEventListener(b,c,!1)} +function hd(a,b,c,d,e){var f=d;if(0===(b&1)&&0===(b&2)&&null!==d)a:for(;;){if(null===d)return;var g=d.tag;if(3===g||4===g){var h=d.stateNode.containerInfo;if(h===e||8===h.nodeType&&h.parentNode===e)break;if(4===g)for(g=d.return;null!==g;){var k=g.tag;if(3===k||4===k)if(k=g.stateNode.containerInfo,k===e||8===k.nodeType&&k.parentNode===e)return;g=g.return}for(;null!==h;){g=Wc(h);if(null===g)return;k=g.tag;if(5===k||6===k){d=f=g;continue a}h=h.parentNode}}d=d.return}Jb(function(){var d=f,e=xb(c),g=[]; +a:{var h=df.get(a);if(void 0!==h){var k=td,n=a;switch(a){case "keypress":if(0===od(c))break a;case "keydown":case "keyup":k=Rd;break;case "focusin":n="focus";k=Fd;break;case "focusout":n="blur";k=Fd;break;case "beforeblur":case "afterblur":k=Fd;break;case "click":if(2===c.button)break a;case "auxclick":case "dblclick":case "mousedown":case "mousemove":case "mouseup":case "mouseout":case "mouseover":case "contextmenu":k=Bd;break;case "drag":case "dragend":case "dragenter":case "dragexit":case "dragleave":case "dragover":case "dragstart":case "drop":k= +Dd;break;case "touchcancel":case "touchend":case "touchmove":case "touchstart":k=Vd;break;case $e:case af:case bf:k=Hd;break;case cf:k=Xd;break;case "scroll":k=vd;break;case "wheel":k=Zd;break;case "copy":case "cut":case "paste":k=Jd;break;case "gotpointercapture":case "lostpointercapture":case "pointercancel":case "pointerdown":case "pointermove":case "pointerout":case "pointerover":case "pointerup":k=Td}var t=0!==(b&4),J=!t&&"scroll"===a,x=t?null!==h?h+"Capture":null:h;t=[];for(var w=d,u;null!== +w;){u=w;var F=u.stateNode;5===u.tag&&null!==F&&(u=F,null!==x&&(F=Kb(w,x),null!=F&&t.push(tf(w,F,u))));if(J)break;w=w.return}0<t.length&&(h=new k(h,n,null,c,e),g.push({event:h,listeners:t}))}}if(0===(b&7)){a:{h="mouseover"===a||"pointerover"===a;k="mouseout"===a||"pointerout"===a;if(h&&c!==wb&&(n=c.relatedTarget||c.fromElement)&&(Wc(n)||n[uf]))break a;if(k||h){h=e.window===e?e:(h=e.ownerDocument)?h.defaultView||h.parentWindow:window;if(k){if(n=c.relatedTarget||c.toElement,k=d,n=n?Wc(n):null,null!== +n&&(J=Vb(n),n!==J||5!==n.tag&&6!==n.tag))n=null}else k=null,n=d;if(k!==n){t=Bd;F="onMouseLeave";x="onMouseEnter";w="mouse";if("pointerout"===a||"pointerover"===a)t=Td,F="onPointerLeave",x="onPointerEnter",w="pointer";J=null==k?h:ue(k);u=null==n?h:ue(n);h=new t(F,w+"leave",k,c,e);h.target=J;h.relatedTarget=u;F=null;Wc(e)===d&&(t=new t(x,w+"enter",n,c,e),t.target=u,t.relatedTarget=J,F=t);J=F;if(k&&n)b:{t=k;x=n;w=0;for(u=t;u;u=vf(u))w++;u=0;for(F=x;F;F=vf(F))u++;for(;0<w-u;)t=vf(t),w--;for(;0<u-w;)x= +vf(x),u--;for(;w--;){if(t===x||null!==x&&t===x.alternate)break b;t=vf(t);x=vf(x)}t=null}else t=null;null!==k&&wf(g,h,k,t,!1);null!==n&&null!==J&&wf(g,J,n,t,!0)}}}a:{h=d?ue(d):window;k=h.nodeName&&h.nodeName.toLowerCase();if("select"===k||"input"===k&&"file"===h.type)var na=ve;else if(me(h))if(we)na=Fe;else{na=De;var xa=Ce}else(k=h.nodeName)&&"input"===k.toLowerCase()&&("checkbox"===h.type||"radio"===h.type)&&(na=Ee);if(na&&(na=na(a,d))){ne(g,na,c,e);break a}xa&&xa(a,h,d);"focusout"===a&&(xa=h._wrapperState)&& +xa.controlled&&"number"===h.type&&cb(h,"number",h.value)}xa=d?ue(d):window;switch(a){case "focusin":if(me(xa)||"true"===xa.contentEditable)Qe=xa,Re=d,Se=null;break;case "focusout":Se=Re=Qe=null;break;case "mousedown":Te=!0;break;case "contextmenu":case "mouseup":case "dragend":Te=!1;Ue(g,c,e);break;case "selectionchange":if(Pe)break;case "keydown":case "keyup":Ue(g,c,e)}var $a;if(ae)b:{switch(a){case "compositionstart":var ba="onCompositionStart";break b;case "compositionend":ba="onCompositionEnd"; +break b;case "compositionupdate":ba="onCompositionUpdate";break b}ba=void 0}else ie?ge(a,c)&&(ba="onCompositionEnd"):"keydown"===a&&229===c.keyCode&&(ba="onCompositionStart");ba&&(de&&"ko"!==c.locale&&(ie||"onCompositionStart"!==ba?"onCompositionEnd"===ba&&ie&&($a=nd()):(kd=e,ld="value"in kd?kd.value:kd.textContent,ie=!0)),xa=oe(d,ba),0<xa.length&&(ba=new Ld(ba,a,null,c,e),g.push({event:ba,listeners:xa}),$a?ba.data=$a:($a=he(c),null!==$a&&(ba.data=$a))));if($a=ce?je(a,c):ke(a,c))d=oe(d,"onBeforeInput"), +0<d.length&&(e=new Ld("onBeforeInput","beforeinput",null,c,e),g.push({event:e,listeners:d}),e.data=$a)}se(g,b)})}function tf(a,b,c){return{instance:a,listener:b,currentTarget:c}}function oe(a,b){for(var c=b+"Capture",d=[];null!==a;){var e=a,f=e.stateNode;5===e.tag&&null!==f&&(e=f,f=Kb(a,c),null!=f&&d.unshift(tf(a,f,e)),f=Kb(a,b),null!=f&&d.push(tf(a,f,e)));a=a.return}return d}function vf(a){if(null===a)return null;do a=a.return;while(a&&5!==a.tag);return a?a:null} +function wf(a,b,c,d,e){for(var f=b._reactName,g=[];null!==c&&c!==d;){var h=c,k=h.alternate,l=h.stateNode;if(null!==k&&k===d)break;5===h.tag&&null!==l&&(h=l,e?(k=Kb(c,f),null!=k&&g.unshift(tf(c,k,h))):e||(k=Kb(c,f),null!=k&&g.push(tf(c,k,h))));c=c.return}0!==g.length&&a.push({event:b,listeners:g})}var xf=/\r\n?/g,yf=/\u0000|\uFFFD/g;function zf(a){return("string"===typeof a?a:""+a).replace(xf,"\n").replace(yf,"")}function Af(a,b,c){b=zf(b);if(zf(a)!==b&&c)throw Error(p(425));}function Bf(){} +var Cf=null,Df=null;function Ef(a,b){return"textarea"===a||"noscript"===a||"string"===typeof b.children||"number"===typeof b.children||"object"===typeof b.dangerouslySetInnerHTML&&null!==b.dangerouslySetInnerHTML&&null!=b.dangerouslySetInnerHTML.__html} +var Ff="function"===typeof setTimeout?setTimeout:void 0,Gf="function"===typeof clearTimeout?clearTimeout:void 0,Hf="function"===typeof Promise?Promise:void 0,Jf="function"===typeof queueMicrotask?queueMicrotask:"undefined"!==typeof Hf?function(a){return Hf.resolve(null).then(a).catch(If)}:Ff;function If(a){setTimeout(function(){throw a;})} +function Kf(a,b){var c=b,d=0;do{var e=c.nextSibling;a.removeChild(c);if(e&&8===e.nodeType)if(c=e.data,"/$"===c){if(0===d){a.removeChild(e);bd(b);return}d--}else"$"!==c&&"$?"!==c&&"$!"!==c||d++;c=e}while(c);bd(b)}function Lf(a){for(;null!=a;a=a.nextSibling){var b=a.nodeType;if(1===b||3===b)break;if(8===b){b=a.data;if("$"===b||"$!"===b||"$?"===b)break;if("/$"===b)return null}}return a} +function Mf(a){a=a.previousSibling;for(var b=0;a;){if(8===a.nodeType){var c=a.data;if("$"===c||"$!"===c||"$?"===c){if(0===b)return a;b--}else"/$"===c&&b++}a=a.previousSibling}return null}var Nf=Math.random().toString(36).slice(2),Of="__reactFiber$"+Nf,Pf="__reactProps$"+Nf,uf="__reactContainer$"+Nf,of="__reactEvents$"+Nf,Qf="__reactListeners$"+Nf,Rf="__reactHandles$"+Nf; +function Wc(a){var b=a[Of];if(b)return b;for(var c=a.parentNode;c;){if(b=c[uf]||c[Of]){c=b.alternate;if(null!==b.child||null!==c&&null!==c.child)for(a=Mf(a);null!==a;){if(c=a[Of])return c;a=Mf(a)}return b}a=c;c=a.parentNode}return null}function Cb(a){a=a[Of]||a[uf];return!a||5!==a.tag&&6!==a.tag&&13!==a.tag&&3!==a.tag?null:a}function ue(a){if(5===a.tag||6===a.tag)return a.stateNode;throw Error(p(33));}function Db(a){return a[Pf]||null}var Sf=[],Tf=-1;function Uf(a){return{current:a}} +function E(a){0>Tf||(a.current=Sf[Tf],Sf[Tf]=null,Tf--)}function G(a,b){Tf++;Sf[Tf]=a.current;a.current=b}var Vf={},H=Uf(Vf),Wf=Uf(!1),Xf=Vf;function Yf(a,b){var c=a.type.contextTypes;if(!c)return Vf;var d=a.stateNode;if(d&&d.__reactInternalMemoizedUnmaskedChildContext===b)return d.__reactInternalMemoizedMaskedChildContext;var e={},f;for(f in c)e[f]=b[f];d&&(a=a.stateNode,a.__reactInternalMemoizedUnmaskedChildContext=b,a.__reactInternalMemoizedMaskedChildContext=e);return e} +function Zf(a){a=a.childContextTypes;return null!==a&&void 0!==a}function $f(){E(Wf);E(H)}function ag(a,b,c){if(H.current!==Vf)throw Error(p(168));G(H,b);G(Wf,c)}function bg(a,b,c){var d=a.stateNode;b=b.childContextTypes;if("function"!==typeof d.getChildContext)return c;d=d.getChildContext();for(var e in d)if(!(e in b))throw Error(p(108,Ra(a)||"Unknown",e));return A({},c,d)} +function cg(a){a=(a=a.stateNode)&&a.__reactInternalMemoizedMergedChildContext||Vf;Xf=H.current;G(H,a);G(Wf,Wf.current);return!0}function dg(a,b,c){var d=a.stateNode;if(!d)throw Error(p(169));c?(a=bg(a,b,Xf),d.__reactInternalMemoizedMergedChildContext=a,E(Wf),E(H),G(H,a)):E(Wf);G(Wf,c)}var eg=null,fg=!1,gg=!1;function hg(a){null===eg?eg=[a]:eg.push(a)}function ig(a){fg=!0;hg(a)} +function jg(){if(!gg&&null!==eg){gg=!0;var a=0,b=C;try{var c=eg;for(C=1;a<c.length;a++){var d=c[a];do d=d(!0);while(null!==d)}eg=null;fg=!1}catch(e){throw null!==eg&&(eg=eg.slice(a+1)),ac(fc,jg),e;}finally{C=b,gg=!1}}return null}var kg=[],lg=0,mg=null,ng=0,og=[],pg=0,qg=null,rg=1,sg="";function tg(a,b){kg[lg++]=ng;kg[lg++]=mg;mg=a;ng=b} +function ug(a,b,c){og[pg++]=rg;og[pg++]=sg;og[pg++]=qg;qg=a;var d=rg;a=sg;var e=32-oc(d)-1;d&=~(1<<e);c+=1;var f=32-oc(b)+e;if(30<f){var g=e-e%5;f=(d&(1<<g)-1).toString(32);d>>=g;e-=g;rg=1<<32-oc(b)+e|c<<e|d;sg=f+a}else rg=1<<f|c<<e|d,sg=a}function vg(a){null!==a.return&&(tg(a,1),ug(a,1,0))}function wg(a){for(;a===mg;)mg=kg[--lg],kg[lg]=null,ng=kg[--lg],kg[lg]=null;for(;a===qg;)qg=og[--pg],og[pg]=null,sg=og[--pg],og[pg]=null,rg=og[--pg],og[pg]=null}var xg=null,yg=null,I=!1,zg=null; +function Ag(a,b){var c=Bg(5,null,null,0);c.elementType="DELETED";c.stateNode=b;c.return=a;b=a.deletions;null===b?(a.deletions=[c],a.flags|=16):b.push(c)} +function Cg(a,b){switch(a.tag){case 5:var c=a.type;b=1!==b.nodeType||c.toLowerCase()!==b.nodeName.toLowerCase()?null:b;return null!==b?(a.stateNode=b,xg=a,yg=Lf(b.firstChild),!0):!1;case 6:return b=""===a.pendingProps||3!==b.nodeType?null:b,null!==b?(a.stateNode=b,xg=a,yg=null,!0):!1;case 13:return b=8!==b.nodeType?null:b,null!==b?(c=null!==qg?{id:rg,overflow:sg}:null,a.memoizedState={dehydrated:b,treeContext:c,retryLane:1073741824},c=Bg(18,null,null,0),c.stateNode=b,c.return=a,a.child=c,xg=a,yg= +null,!0):!1;default:return!1}}function Dg(a){return 0!==(a.mode&1)&&0===(a.flags&128)}function Eg(a){if(I){var b=yg;if(b){var c=b;if(!Cg(a,b)){if(Dg(a))throw Error(p(418));b=Lf(c.nextSibling);var d=xg;b&&Cg(a,b)?Ag(d,c):(a.flags=a.flags&-4097|2,I=!1,xg=a)}}else{if(Dg(a))throw Error(p(418));a.flags=a.flags&-4097|2;I=!1;xg=a}}}function Fg(a){for(a=a.return;null!==a&&5!==a.tag&&3!==a.tag&&13!==a.tag;)a=a.return;xg=a} +function Gg(a){if(a!==xg)return!1;if(!I)return Fg(a),I=!0,!1;var b;(b=3!==a.tag)&&!(b=5!==a.tag)&&(b=a.type,b="head"!==b&&"body"!==b&&!Ef(a.type,a.memoizedProps));if(b&&(b=yg)){if(Dg(a))throw Hg(),Error(p(418));for(;b;)Ag(a,b),b=Lf(b.nextSibling)}Fg(a);if(13===a.tag){a=a.memoizedState;a=null!==a?a.dehydrated:null;if(!a)throw Error(p(317));a:{a=a.nextSibling;for(b=0;a;){if(8===a.nodeType){var c=a.data;if("/$"===c){if(0===b){yg=Lf(a.nextSibling);break a}b--}else"$"!==c&&"$!"!==c&&"$?"!==c||b++}a=a.nextSibling}yg= +null}}else yg=xg?Lf(a.stateNode.nextSibling):null;return!0}function Hg(){for(var a=yg;a;)a=Lf(a.nextSibling)}function Ig(){yg=xg=null;I=!1}function Jg(a){null===zg?zg=[a]:zg.push(a)}var Kg=ua.ReactCurrentBatchConfig;function Lg(a,b){if(a&&a.defaultProps){b=A({},b);a=a.defaultProps;for(var c in a)void 0===b[c]&&(b[c]=a[c]);return b}return b}var Mg=Uf(null),Ng=null,Og=null,Pg=null;function Qg(){Pg=Og=Ng=null}function Rg(a){var b=Mg.current;E(Mg);a._currentValue=b} +function Sg(a,b,c){for(;null!==a;){var d=a.alternate;(a.childLanes&b)!==b?(a.childLanes|=b,null!==d&&(d.childLanes|=b)):null!==d&&(d.childLanes&b)!==b&&(d.childLanes|=b);if(a===c)break;a=a.return}}function Tg(a,b){Ng=a;Pg=Og=null;a=a.dependencies;null!==a&&null!==a.firstContext&&(0!==(a.lanes&b)&&(Ug=!0),a.firstContext=null)} +function Vg(a){var b=a._currentValue;if(Pg!==a)if(a={context:a,memoizedValue:b,next:null},null===Og){if(null===Ng)throw Error(p(308));Og=a;Ng.dependencies={lanes:0,firstContext:a}}else Og=Og.next=a;return b}var Wg=null;function Xg(a){null===Wg?Wg=[a]:Wg.push(a)}function Yg(a,b,c,d){var e=b.interleaved;null===e?(c.next=c,Xg(b)):(c.next=e.next,e.next=c);b.interleaved=c;return Zg(a,d)} +function Zg(a,b){a.lanes|=b;var c=a.alternate;null!==c&&(c.lanes|=b);c=a;for(a=a.return;null!==a;)a.childLanes|=b,c=a.alternate,null!==c&&(c.childLanes|=b),c=a,a=a.return;return 3===c.tag?c.stateNode:null}var $g=!1;function ah(a){a.updateQueue={baseState:a.memoizedState,firstBaseUpdate:null,lastBaseUpdate:null,shared:{pending:null,interleaved:null,lanes:0},effects:null}} +function bh(a,b){a=a.updateQueue;b.updateQueue===a&&(b.updateQueue={baseState:a.baseState,firstBaseUpdate:a.firstBaseUpdate,lastBaseUpdate:a.lastBaseUpdate,shared:a.shared,effects:a.effects})}function ch(a,b){return{eventTime:a,lane:b,tag:0,payload:null,callback:null,next:null}} +function dh(a,b,c){var d=a.updateQueue;if(null===d)return null;d=d.shared;if(0!==(K&2)){var e=d.pending;null===e?b.next=b:(b.next=e.next,e.next=b);d.pending=b;return Zg(a,c)}e=d.interleaved;null===e?(b.next=b,Xg(d)):(b.next=e.next,e.next=b);d.interleaved=b;return Zg(a,c)}function eh(a,b,c){b=b.updateQueue;if(null!==b&&(b=b.shared,0!==(c&4194240))){var d=b.lanes;d&=a.pendingLanes;c|=d;b.lanes=c;Cc(a,c)}} +function fh(a,b){var c=a.updateQueue,d=a.alternate;if(null!==d&&(d=d.updateQueue,c===d)){var e=null,f=null;c=c.firstBaseUpdate;if(null!==c){do{var g={eventTime:c.eventTime,lane:c.lane,tag:c.tag,payload:c.payload,callback:c.callback,next:null};null===f?e=f=g:f=f.next=g;c=c.next}while(null!==c);null===f?e=f=b:f=f.next=b}else e=f=b;c={baseState:d.baseState,firstBaseUpdate:e,lastBaseUpdate:f,shared:d.shared,effects:d.effects};a.updateQueue=c;return}a=c.lastBaseUpdate;null===a?c.firstBaseUpdate=b:a.next= +b;c.lastBaseUpdate=b} +function gh(a,b,c,d){var e=a.updateQueue;$g=!1;var f=e.firstBaseUpdate,g=e.lastBaseUpdate,h=e.shared.pending;if(null!==h){e.shared.pending=null;var k=h,l=k.next;k.next=null;null===g?f=l:g.next=l;g=k;var m=a.alternate;null!==m&&(m=m.updateQueue,h=m.lastBaseUpdate,h!==g&&(null===h?m.firstBaseUpdate=l:h.next=l,m.lastBaseUpdate=k))}if(null!==f){var q=e.baseState;g=0;m=l=k=null;h=f;do{var r=h.lane,y=h.eventTime;if((d&r)===r){null!==m&&(m=m.next={eventTime:y,lane:0,tag:h.tag,payload:h.payload,callback:h.callback, +next:null});a:{var n=a,t=h;r=b;y=c;switch(t.tag){case 1:n=t.payload;if("function"===typeof n){q=n.call(y,q,r);break a}q=n;break a;case 3:n.flags=n.flags&-65537|128;case 0:n=t.payload;r="function"===typeof n?n.call(y,q,r):n;if(null===r||void 0===r)break a;q=A({},q,r);break a;case 2:$g=!0}}null!==h.callback&&0!==h.lane&&(a.flags|=64,r=e.effects,null===r?e.effects=[h]:r.push(h))}else y={eventTime:y,lane:r,tag:h.tag,payload:h.payload,callback:h.callback,next:null},null===m?(l=m=y,k=q):m=m.next=y,g|=r; +h=h.next;if(null===h)if(h=e.shared.pending,null===h)break;else r=h,h=r.next,r.next=null,e.lastBaseUpdate=r,e.shared.pending=null}while(1);null===m&&(k=q);e.baseState=k;e.firstBaseUpdate=l;e.lastBaseUpdate=m;b=e.shared.interleaved;if(null!==b){e=b;do g|=e.lane,e=e.next;while(e!==b)}else null===f&&(e.shared.lanes=0);hh|=g;a.lanes=g;a.memoizedState=q}} +function ih(a,b,c){a=b.effects;b.effects=null;if(null!==a)for(b=0;b<a.length;b++){var d=a[b],e=d.callback;if(null!==e){d.callback=null;d=c;if("function"!==typeof e)throw Error(p(191,e));e.call(d)}}}var jh=(new aa.Component).refs;function kh(a,b,c,d){b=a.memoizedState;c=c(d,b);c=null===c||void 0===c?b:A({},b,c);a.memoizedState=c;0===a.lanes&&(a.updateQueue.baseState=c)} +var nh={isMounted:function(a){return(a=a._reactInternals)?Vb(a)===a:!1},enqueueSetState:function(a,b,c){a=a._reactInternals;var d=L(),e=lh(a),f=ch(d,e);f.payload=b;void 0!==c&&null!==c&&(f.callback=c);b=dh(a,f,e);null!==b&&(mh(b,a,e,d),eh(b,a,e))},enqueueReplaceState:function(a,b,c){a=a._reactInternals;var d=L(),e=lh(a),f=ch(d,e);f.tag=1;f.payload=b;void 0!==c&&null!==c&&(f.callback=c);b=dh(a,f,e);null!==b&&(mh(b,a,e,d),eh(b,a,e))},enqueueForceUpdate:function(a,b){a=a._reactInternals;var c=L(),d= +lh(a),e=ch(c,d);e.tag=2;void 0!==b&&null!==b&&(e.callback=b);b=dh(a,e,d);null!==b&&(mh(b,a,d,c),eh(b,a,d))}};function oh(a,b,c,d,e,f,g){a=a.stateNode;return"function"===typeof a.shouldComponentUpdate?a.shouldComponentUpdate(d,f,g):b.prototype&&b.prototype.isPureReactComponent?!Ie(c,d)||!Ie(e,f):!0} +function ph(a,b,c){var d=!1,e=Vf;var f=b.contextType;"object"===typeof f&&null!==f?f=Vg(f):(e=Zf(b)?Xf:H.current,d=b.contextTypes,f=(d=null!==d&&void 0!==d)?Yf(a,e):Vf);b=new b(c,f);a.memoizedState=null!==b.state&&void 0!==b.state?b.state:null;b.updater=nh;a.stateNode=b;b._reactInternals=a;d&&(a=a.stateNode,a.__reactInternalMemoizedUnmaskedChildContext=e,a.__reactInternalMemoizedMaskedChildContext=f);return b} +function qh(a,b,c,d){a=b.state;"function"===typeof b.componentWillReceiveProps&&b.componentWillReceiveProps(c,d);"function"===typeof b.UNSAFE_componentWillReceiveProps&&b.UNSAFE_componentWillReceiveProps(c,d);b.state!==a&&nh.enqueueReplaceState(b,b.state,null)} +function rh(a,b,c,d){var e=a.stateNode;e.props=c;e.state=a.memoizedState;e.refs=jh;ah(a);var f=b.contextType;"object"===typeof f&&null!==f?e.context=Vg(f):(f=Zf(b)?Xf:H.current,e.context=Yf(a,f));e.state=a.memoizedState;f=b.getDerivedStateFromProps;"function"===typeof f&&(kh(a,b,f,c),e.state=a.memoizedState);"function"===typeof b.getDerivedStateFromProps||"function"===typeof e.getSnapshotBeforeUpdate||"function"!==typeof e.UNSAFE_componentWillMount&&"function"!==typeof e.componentWillMount||(b=e.state, +"function"===typeof e.componentWillMount&&e.componentWillMount(),"function"===typeof e.UNSAFE_componentWillMount&&e.UNSAFE_componentWillMount(),b!==e.state&&nh.enqueueReplaceState(e,e.state,null),gh(a,c,e,d),e.state=a.memoizedState);"function"===typeof e.componentDidMount&&(a.flags|=4194308)} +function sh(a,b,c){a=c.ref;if(null!==a&&"function"!==typeof a&&"object"!==typeof a){if(c._owner){c=c._owner;if(c){if(1!==c.tag)throw Error(p(309));var d=c.stateNode}if(!d)throw Error(p(147,a));var e=d,f=""+a;if(null!==b&&null!==b.ref&&"function"===typeof b.ref&&b.ref._stringRef===f)return b.ref;b=function(a){var b=e.refs;b===jh&&(b=e.refs={});null===a?delete b[f]:b[f]=a};b._stringRef=f;return b}if("string"!==typeof a)throw Error(p(284));if(!c._owner)throw Error(p(290,a));}return a} +function th(a,b){a=Object.prototype.toString.call(b);throw Error(p(31,"[object Object]"===a?"object with keys {"+Object.keys(b).join(", ")+"}":a));}function uh(a){var b=a._init;return b(a._payload)} +function vh(a){function b(b,c){if(a){var d=b.deletions;null===d?(b.deletions=[c],b.flags|=16):d.push(c)}}function c(c,d){if(!a)return null;for(;null!==d;)b(c,d),d=d.sibling;return null}function d(a,b){for(a=new Map;null!==b;)null!==b.key?a.set(b.key,b):a.set(b.index,b),b=b.sibling;return a}function e(a,b){a=wh(a,b);a.index=0;a.sibling=null;return a}function f(b,c,d){b.index=d;if(!a)return b.flags|=1048576,c;d=b.alternate;if(null!==d)return d=d.index,d<c?(b.flags|=2,c):d;b.flags|=2;return c}function g(b){a&& +null===b.alternate&&(b.flags|=2);return b}function h(a,b,c,d){if(null===b||6!==b.tag)return b=xh(c,a.mode,d),b.return=a,b;b=e(b,c);b.return=a;return b}function k(a,b,c,d){var f=c.type;if(f===ya)return m(a,b,c.props.children,d,c.key);if(null!==b&&(b.elementType===f||"object"===typeof f&&null!==f&&f.$$typeof===Ha&&uh(f)===b.type))return d=e(b,c.props),d.ref=sh(a,b,c),d.return=a,d;d=yh(c.type,c.key,c.props,null,a.mode,d);d.ref=sh(a,b,c);d.return=a;return d}function l(a,b,c,d){if(null===b||4!==b.tag|| +b.stateNode.containerInfo!==c.containerInfo||b.stateNode.implementation!==c.implementation)return b=zh(c,a.mode,d),b.return=a,b;b=e(b,c.children||[]);b.return=a;return b}function m(a,b,c,d,f){if(null===b||7!==b.tag)return b=Ah(c,a.mode,d,f),b.return=a,b;b=e(b,c);b.return=a;return b}function q(a,b,c){if("string"===typeof b&&""!==b||"number"===typeof b)return b=xh(""+b,a.mode,c),b.return=a,b;if("object"===typeof b&&null!==b){switch(b.$$typeof){case va:return c=yh(b.type,b.key,b.props,null,a.mode,c), +c.ref=sh(a,null,b),c.return=a,c;case wa:return b=zh(b,a.mode,c),b.return=a,b;case Ha:var d=b._init;return q(a,d(b._payload),c)}if(eb(b)||Ka(b))return b=Ah(b,a.mode,c,null),b.return=a,b;th(a,b)}return null}function r(a,b,c,d){var e=null!==b?b.key:null;if("string"===typeof c&&""!==c||"number"===typeof c)return null!==e?null:h(a,b,""+c,d);if("object"===typeof c&&null!==c){switch(c.$$typeof){case va:return c.key===e?k(a,b,c,d):null;case wa:return c.key===e?l(a,b,c,d):null;case Ha:return e=c._init,r(a, +b,e(c._payload),d)}if(eb(c)||Ka(c))return null!==e?null:m(a,b,c,d,null);th(a,c)}return null}function y(a,b,c,d,e){if("string"===typeof d&&""!==d||"number"===typeof d)return a=a.get(c)||null,h(b,a,""+d,e);if("object"===typeof d&&null!==d){switch(d.$$typeof){case va:return a=a.get(null===d.key?c:d.key)||null,k(b,a,d,e);case wa:return a=a.get(null===d.key?c:d.key)||null,l(b,a,d,e);case Ha:var f=d._init;return y(a,b,c,f(d._payload),e)}if(eb(d)||Ka(d))return a=a.get(c)||null,m(b,a,d,e,null);th(b,d)}return null} +function n(e,g,h,k){for(var l=null,m=null,u=g,w=g=0,x=null;null!==u&&w<h.length;w++){u.index>w?(x=u,u=null):x=u.sibling;var n=r(e,u,h[w],k);if(null===n){null===u&&(u=x);break}a&&u&&null===n.alternate&&b(e,u);g=f(n,g,w);null===m?l=n:m.sibling=n;m=n;u=x}if(w===h.length)return c(e,u),I&&tg(e,w),l;if(null===u){for(;w<h.length;w++)u=q(e,h[w],k),null!==u&&(g=f(u,g,w),null===m?l=u:m.sibling=u,m=u);I&&tg(e,w);return l}for(u=d(e,u);w<h.length;w++)x=y(u,e,w,h[w],k),null!==x&&(a&&null!==x.alternate&&u.delete(null=== +x.key?w:x.key),g=f(x,g,w),null===m?l=x:m.sibling=x,m=x);a&&u.forEach(function(a){return b(e,a)});I&&tg(e,w);return l}function t(e,g,h,k){var l=Ka(h);if("function"!==typeof l)throw Error(p(150));h=l.call(h);if(null==h)throw Error(p(151));for(var u=l=null,m=g,w=g=0,x=null,n=h.next();null!==m&&!n.done;w++,n=h.next()){m.index>w?(x=m,m=null):x=m.sibling;var t=r(e,m,n.value,k);if(null===t){null===m&&(m=x);break}a&&m&&null===t.alternate&&b(e,m);g=f(t,g,w);null===u?l=t:u.sibling=t;u=t;m=x}if(n.done)return c(e, +m),I&&tg(e,w),l;if(null===m){for(;!n.done;w++,n=h.next())n=q(e,n.value,k),null!==n&&(g=f(n,g,w),null===u?l=n:u.sibling=n,u=n);I&&tg(e,w);return l}for(m=d(e,m);!n.done;w++,n=h.next())n=y(m,e,w,n.value,k),null!==n&&(a&&null!==n.alternate&&m.delete(null===n.key?w:n.key),g=f(n,g,w),null===u?l=n:u.sibling=n,u=n);a&&m.forEach(function(a){return b(e,a)});I&&tg(e,w);return l}function J(a,d,f,h){"object"===typeof f&&null!==f&&f.type===ya&&null===f.key&&(f=f.props.children);if("object"===typeof f&&null!==f){switch(f.$$typeof){case va:a:{for(var k= +f.key,l=d;null!==l;){if(l.key===k){k=f.type;if(k===ya){if(7===l.tag){c(a,l.sibling);d=e(l,f.props.children);d.return=a;a=d;break a}}else if(l.elementType===k||"object"===typeof k&&null!==k&&k.$$typeof===Ha&&uh(k)===l.type){c(a,l.sibling);d=e(l,f.props);d.ref=sh(a,l,f);d.return=a;a=d;break a}c(a,l);break}else b(a,l);l=l.sibling}f.type===ya?(d=Ah(f.props.children,a.mode,h,f.key),d.return=a,a=d):(h=yh(f.type,f.key,f.props,null,a.mode,h),h.ref=sh(a,d,f),h.return=a,a=h)}return g(a);case wa:a:{for(l=f.key;null!== +d;){if(d.key===l)if(4===d.tag&&d.stateNode.containerInfo===f.containerInfo&&d.stateNode.implementation===f.implementation){c(a,d.sibling);d=e(d,f.children||[]);d.return=a;a=d;break a}else{c(a,d);break}else b(a,d);d=d.sibling}d=zh(f,a.mode,h);d.return=a;a=d}return g(a);case Ha:return l=f._init,J(a,d,l(f._payload),h)}if(eb(f))return n(a,d,f,h);if(Ka(f))return t(a,d,f,h);th(a,f)}return"string"===typeof f&&""!==f||"number"===typeof f?(f=""+f,null!==d&&6===d.tag?(c(a,d.sibling),d=e(d,f),d.return=a,a=d): +(c(a,d),d=xh(f,a.mode,h),d.return=a,a=d),g(a)):c(a,d)}return J}var Bh=vh(!0),Ch=vh(!1),Dh={},Eh=Uf(Dh),Fh=Uf(Dh),Gh=Uf(Dh);function Hh(a){if(a===Dh)throw Error(p(174));return a}function Ih(a,b){G(Gh,b);G(Fh,a);G(Eh,Dh);a=b.nodeType;switch(a){case 9:case 11:b=(b=b.documentElement)?b.namespaceURI:lb(null,"");break;default:a=8===a?b.parentNode:b,b=a.namespaceURI||null,a=a.tagName,b=lb(b,a)}E(Eh);G(Eh,b)}function Jh(){E(Eh);E(Fh);E(Gh)} +function Kh(a){Hh(Gh.current);var b=Hh(Eh.current);var c=lb(b,a.type);b!==c&&(G(Fh,a),G(Eh,c))}function Lh(a){Fh.current===a&&(E(Eh),E(Fh))}var M=Uf(0); +function Mh(a){for(var b=a;null!==b;){if(13===b.tag){var c=b.memoizedState;if(null!==c&&(c=c.dehydrated,null===c||"$?"===c.data||"$!"===c.data))return b}else if(19===b.tag&&void 0!==b.memoizedProps.revealOrder){if(0!==(b.flags&128))return b}else if(null!==b.child){b.child.return=b;b=b.child;continue}if(b===a)break;for(;null===b.sibling;){if(null===b.return||b.return===a)return null;b=b.return}b.sibling.return=b.return;b=b.sibling}return null}var Nh=[]; +function Oh(){for(var a=0;a<Nh.length;a++)Nh[a]._workInProgressVersionPrimary=null;Nh.length=0}var Ph=ua.ReactCurrentDispatcher,Qh=ua.ReactCurrentBatchConfig,Rh=0,N=null,O=null,P=null,Sh=!1,Th=!1,Uh=0,Vh=0;function Q(){throw Error(p(321));}function Wh(a,b){if(null===b)return!1;for(var c=0;c<b.length&&c<a.length;c++)if(!He(a[c],b[c]))return!1;return!0} +function Xh(a,b,c,d,e,f){Rh=f;N=b;b.memoizedState=null;b.updateQueue=null;b.lanes=0;Ph.current=null===a||null===a.memoizedState?Yh:Zh;a=c(d,e);if(Th){f=0;do{Th=!1;Uh=0;if(25<=f)throw Error(p(301));f+=1;P=O=null;b.updateQueue=null;Ph.current=$h;a=c(d,e)}while(Th)}Ph.current=ai;b=null!==O&&null!==O.next;Rh=0;P=O=N=null;Sh=!1;if(b)throw Error(p(300));return a}function bi(){var a=0!==Uh;Uh=0;return a} +function ci(){var a={memoizedState:null,baseState:null,baseQueue:null,queue:null,next:null};null===P?N.memoizedState=P=a:P=P.next=a;return P}function di(){if(null===O){var a=N.alternate;a=null!==a?a.memoizedState:null}else a=O.next;var b=null===P?N.memoizedState:P.next;if(null!==b)P=b,O=a;else{if(null===a)throw Error(p(310));O=a;a={memoizedState:O.memoizedState,baseState:O.baseState,baseQueue:O.baseQueue,queue:O.queue,next:null};null===P?N.memoizedState=P=a:P=P.next=a}return P} +function ei(a,b){return"function"===typeof b?b(a):b} +function fi(a){var b=di(),c=b.queue;if(null===c)throw Error(p(311));c.lastRenderedReducer=a;var d=O,e=d.baseQueue,f=c.pending;if(null!==f){if(null!==e){var g=e.next;e.next=f.next;f.next=g}d.baseQueue=e=f;c.pending=null}if(null!==e){f=e.next;d=d.baseState;var h=g=null,k=null,l=f;do{var m=l.lane;if((Rh&m)===m)null!==k&&(k=k.next={lane:0,action:l.action,hasEagerState:l.hasEagerState,eagerState:l.eagerState,next:null}),d=l.hasEagerState?l.eagerState:a(d,l.action);else{var q={lane:m,action:l.action,hasEagerState:l.hasEagerState, +eagerState:l.eagerState,next:null};null===k?(h=k=q,g=d):k=k.next=q;N.lanes|=m;hh|=m}l=l.next}while(null!==l&&l!==f);null===k?g=d:k.next=h;He(d,b.memoizedState)||(Ug=!0);b.memoizedState=d;b.baseState=g;b.baseQueue=k;c.lastRenderedState=d}a=c.interleaved;if(null!==a){e=a;do f=e.lane,N.lanes|=f,hh|=f,e=e.next;while(e!==a)}else null===e&&(c.lanes=0);return[b.memoizedState,c.dispatch]} +function gi(a){var b=di(),c=b.queue;if(null===c)throw Error(p(311));c.lastRenderedReducer=a;var d=c.dispatch,e=c.pending,f=b.memoizedState;if(null!==e){c.pending=null;var g=e=e.next;do f=a(f,g.action),g=g.next;while(g!==e);He(f,b.memoizedState)||(Ug=!0);b.memoizedState=f;null===b.baseQueue&&(b.baseState=f);c.lastRenderedState=f}return[f,d]}function hi(){} +function ii(a,b){var c=N,d=di(),e=b(),f=!He(d.memoizedState,e);f&&(d.memoizedState=e,Ug=!0);d=d.queue;ji(ki.bind(null,c,d,a),[a]);if(d.getSnapshot!==b||f||null!==P&&P.memoizedState.tag&1){c.flags|=2048;li(9,mi.bind(null,c,d,e,b),void 0,null);if(null===R)throw Error(p(349));0!==(Rh&30)||ni(c,b,e)}return e}function ni(a,b,c){a.flags|=16384;a={getSnapshot:b,value:c};b=N.updateQueue;null===b?(b={lastEffect:null,stores:null},N.updateQueue=b,b.stores=[a]):(c=b.stores,null===c?b.stores=[a]:c.push(a))} +function mi(a,b,c,d){b.value=c;b.getSnapshot=d;oi(b)&&pi(a)}function ki(a,b,c){return c(function(){oi(b)&&pi(a)})}function oi(a){var b=a.getSnapshot;a=a.value;try{var c=b();return!He(a,c)}catch(d){return!0}}function pi(a){var b=Zg(a,1);null!==b&&mh(b,a,1,-1)} +function qi(a){var b=ci();"function"===typeof a&&(a=a());b.memoizedState=b.baseState=a;a={pending:null,interleaved:null,lanes:0,dispatch:null,lastRenderedReducer:ei,lastRenderedState:a};b.queue=a;a=a.dispatch=ri.bind(null,N,a);return[b.memoizedState,a]} +function li(a,b,c,d){a={tag:a,create:b,destroy:c,deps:d,next:null};b=N.updateQueue;null===b?(b={lastEffect:null,stores:null},N.updateQueue=b,b.lastEffect=a.next=a):(c=b.lastEffect,null===c?b.lastEffect=a.next=a:(d=c.next,c.next=a,a.next=d,b.lastEffect=a));return a}function si(){return di().memoizedState}function ti(a,b,c,d){var e=ci();N.flags|=a;e.memoizedState=li(1|b,c,void 0,void 0===d?null:d)} +function ui(a,b,c,d){var e=di();d=void 0===d?null:d;var f=void 0;if(null!==O){var g=O.memoizedState;f=g.destroy;if(null!==d&&Wh(d,g.deps)){e.memoizedState=li(b,c,f,d);return}}N.flags|=a;e.memoizedState=li(1|b,c,f,d)}function vi(a,b){return ti(8390656,8,a,b)}function ji(a,b){return ui(2048,8,a,b)}function wi(a,b){return ui(4,2,a,b)}function xi(a,b){return ui(4,4,a,b)} +function yi(a,b){if("function"===typeof b)return a=a(),b(a),function(){b(null)};if(null!==b&&void 0!==b)return a=a(),b.current=a,function(){b.current=null}}function zi(a,b,c){c=null!==c&&void 0!==c?c.concat([a]):null;return ui(4,4,yi.bind(null,b,a),c)}function Ai(){}function Bi(a,b){var c=di();b=void 0===b?null:b;var d=c.memoizedState;if(null!==d&&null!==b&&Wh(b,d[1]))return d[0];c.memoizedState=[a,b];return a} +function Ci(a,b){var c=di();b=void 0===b?null:b;var d=c.memoizedState;if(null!==d&&null!==b&&Wh(b,d[1]))return d[0];a=a();c.memoizedState=[a,b];return a}function Di(a,b,c){if(0===(Rh&21))return a.baseState&&(a.baseState=!1,Ug=!0),a.memoizedState=c;He(c,b)||(c=yc(),N.lanes|=c,hh|=c,a.baseState=!0);return b}function Ei(a,b){var c=C;C=0!==c&&4>c?c:4;a(!0);var d=Qh.transition;Qh.transition={};try{a(!1),b()}finally{C=c,Qh.transition=d}}function Fi(){return di().memoizedState} +function Gi(a,b,c){var d=lh(a);c={lane:d,action:c,hasEagerState:!1,eagerState:null,next:null};if(Hi(a))Ii(b,c);else if(c=Yg(a,b,c,d),null!==c){var e=L();mh(c,a,d,e);Ji(c,b,d)}} +function ri(a,b,c){var d=lh(a),e={lane:d,action:c,hasEagerState:!1,eagerState:null,next:null};if(Hi(a))Ii(b,e);else{var f=a.alternate;if(0===a.lanes&&(null===f||0===f.lanes)&&(f=b.lastRenderedReducer,null!==f))try{var g=b.lastRenderedState,h=f(g,c);e.hasEagerState=!0;e.eagerState=h;if(He(h,g)){var k=b.interleaved;null===k?(e.next=e,Xg(b)):(e.next=k.next,k.next=e);b.interleaved=e;return}}catch(l){}finally{}c=Yg(a,b,e,d);null!==c&&(e=L(),mh(c,a,d,e),Ji(c,b,d))}} +function Hi(a){var b=a.alternate;return a===N||null!==b&&b===N}function Ii(a,b){Th=Sh=!0;var c=a.pending;null===c?b.next=b:(b.next=c.next,c.next=b);a.pending=b}function Ji(a,b,c){if(0!==(c&4194240)){var d=b.lanes;d&=a.pendingLanes;c|=d;b.lanes=c;Cc(a,c)}} +var ai={readContext:Vg,useCallback:Q,useContext:Q,useEffect:Q,useImperativeHandle:Q,useInsertionEffect:Q,useLayoutEffect:Q,useMemo:Q,useReducer:Q,useRef:Q,useState:Q,useDebugValue:Q,useDeferredValue:Q,useTransition:Q,useMutableSource:Q,useSyncExternalStore:Q,useId:Q,unstable_isNewReconciler:!1},Yh={readContext:Vg,useCallback:function(a,b){ci().memoizedState=[a,void 0===b?null:b];return a},useContext:Vg,useEffect:vi,useImperativeHandle:function(a,b,c){c=null!==c&&void 0!==c?c.concat([a]):null;return ti(4194308, +4,yi.bind(null,b,a),c)},useLayoutEffect:function(a,b){return ti(4194308,4,a,b)},useInsertionEffect:function(a,b){return ti(4,2,a,b)},useMemo:function(a,b){var c=ci();b=void 0===b?null:b;a=a();c.memoizedState=[a,b];return a},useReducer:function(a,b,c){var d=ci();b=void 0!==c?c(b):b;d.memoizedState=d.baseState=b;a={pending:null,interleaved:null,lanes:0,dispatch:null,lastRenderedReducer:a,lastRenderedState:b};d.queue=a;a=a.dispatch=Gi.bind(null,N,a);return[d.memoizedState,a]},useRef:function(a){var b= +ci();a={current:a};return b.memoizedState=a},useState:qi,useDebugValue:Ai,useDeferredValue:function(a){return ci().memoizedState=a},useTransition:function(){var a=qi(!1),b=a[0];a=Ei.bind(null,a[1]);ci().memoizedState=a;return[b,a]},useMutableSource:function(){},useSyncExternalStore:function(a,b,c){var d=N,e=ci();if(I){if(void 0===c)throw Error(p(407));c=c()}else{c=b();if(null===R)throw Error(p(349));0!==(Rh&30)||ni(d,b,c)}e.memoizedState=c;var f={value:c,getSnapshot:b};e.queue=f;vi(ki.bind(null,d, +f,a),[a]);d.flags|=2048;li(9,mi.bind(null,d,f,c,b),void 0,null);return c},useId:function(){var a=ci(),b=R.identifierPrefix;if(I){var c=sg;var d=rg;c=(d&~(1<<32-oc(d)-1)).toString(32)+c;b=":"+b+"R"+c;c=Uh++;0<c&&(b+="H"+c.toString(32));b+=":"}else c=Vh++,b=":"+b+"r"+c.toString(32)+":";return a.memoizedState=b},unstable_isNewReconciler:!1},Zh={readContext:Vg,useCallback:Bi,useContext:Vg,useEffect:ji,useImperativeHandle:zi,useInsertionEffect:wi,useLayoutEffect:xi,useMemo:Ci,useReducer:fi,useRef:si,useState:function(){return fi(ei)}, +useDebugValue:Ai,useDeferredValue:function(a){var b=di();return Di(b,O.memoizedState,a)},useTransition:function(){var a=fi(ei)[0],b=di().memoizedState;return[a,b]},useMutableSource:hi,useSyncExternalStore:ii,useId:Fi,unstable_isNewReconciler:!1},$h={readContext:Vg,useCallback:Bi,useContext:Vg,useEffect:ji,useImperativeHandle:zi,useInsertionEffect:wi,useLayoutEffect:xi,useMemo:Ci,useReducer:gi,useRef:si,useState:function(){return gi(ei)},useDebugValue:Ai,useDeferredValue:function(a){var b=di();return null=== +O?b.memoizedState=a:Di(b,O.memoizedState,a)},useTransition:function(){var a=gi(ei)[0],b=di().memoizedState;return[a,b]},useMutableSource:hi,useSyncExternalStore:ii,useId:Fi,unstable_isNewReconciler:!1};function Ki(a,b){try{var c="",d=b;do c+=Pa(d),d=d.return;while(d);var e=c}catch(f){e="\nError generating stack: "+f.message+"\n"+f.stack}return{value:a,source:b,stack:e,digest:null}}function Li(a,b,c){return{value:a,source:null,stack:null!=c?c:null,digest:null!=b?b:null}} +function Mi(a,b){try{console.error(b.value)}catch(c){setTimeout(function(){throw c;})}}var Ni="function"===typeof WeakMap?WeakMap:Map;function Oi(a,b,c){c=ch(-1,c);c.tag=3;c.payload={element:null};var d=b.value;c.callback=function(){Pi||(Pi=!0,Qi=d);Mi(a,b)};return c} +function Ri(a,b,c){c=ch(-1,c);c.tag=3;var d=a.type.getDerivedStateFromError;if("function"===typeof d){var e=b.value;c.payload=function(){return d(e)};c.callback=function(){Mi(a,b)}}var f=a.stateNode;null!==f&&"function"===typeof f.componentDidCatch&&(c.callback=function(){Mi(a,b);"function"!==typeof d&&(null===Si?Si=new Set([this]):Si.add(this));var c=b.stack;this.componentDidCatch(b.value,{componentStack:null!==c?c:""})});return c} +function Ti(a,b,c){var d=a.pingCache;if(null===d){d=a.pingCache=new Ni;var e=new Set;d.set(b,e)}else e=d.get(b),void 0===e&&(e=new Set,d.set(b,e));e.has(c)||(e.add(c),a=Ui.bind(null,a,b,c),b.then(a,a))}function Vi(a){do{var b;if(b=13===a.tag)b=a.memoizedState,b=null!==b?null!==b.dehydrated?!0:!1:!0;if(b)return a;a=a.return}while(null!==a);return null} +function Wi(a,b,c,d,e){if(0===(a.mode&1))return a===b?a.flags|=65536:(a.flags|=128,c.flags|=131072,c.flags&=-52805,1===c.tag&&(null===c.alternate?c.tag=17:(b=ch(-1,1),b.tag=2,dh(c,b,1))),c.lanes|=1),a;a.flags|=65536;a.lanes=e;return a}var Xi=ua.ReactCurrentOwner,Ug=!1;function Yi(a,b,c,d){b.child=null===a?Ch(b,null,c,d):Bh(b,a.child,c,d)} +function Zi(a,b,c,d,e){c=c.render;var f=b.ref;Tg(b,e);d=Xh(a,b,c,d,f,e);c=bi();if(null!==a&&!Ug)return b.updateQueue=a.updateQueue,b.flags&=-2053,a.lanes&=~e,$i(a,b,e);I&&c&&vg(b);b.flags|=1;Yi(a,b,d,e);return b.child} +function aj(a,b,c,d,e){if(null===a){var f=c.type;if("function"===typeof f&&!bj(f)&&void 0===f.defaultProps&&null===c.compare&&void 0===c.defaultProps)return b.tag=15,b.type=f,cj(a,b,f,d,e);a=yh(c.type,null,d,b,b.mode,e);a.ref=b.ref;a.return=b;return b.child=a}f=a.child;if(0===(a.lanes&e)){var g=f.memoizedProps;c=c.compare;c=null!==c?c:Ie;if(c(g,d)&&a.ref===b.ref)return $i(a,b,e)}b.flags|=1;a=wh(f,d);a.ref=b.ref;a.return=b;return b.child=a} +function cj(a,b,c,d,e){if(null!==a){var f=a.memoizedProps;if(Ie(f,d)&&a.ref===b.ref)if(Ug=!1,b.pendingProps=d=f,0!==(a.lanes&e))0!==(a.flags&131072)&&(Ug=!0);else return b.lanes=a.lanes,$i(a,b,e)}return dj(a,b,c,d,e)} +function ej(a,b,c){var d=b.pendingProps,e=d.children,f=null!==a?a.memoizedState:null;if("hidden"===d.mode)if(0===(b.mode&1))b.memoizedState={baseLanes:0,cachePool:null,transitions:null},G(fj,gj),gj|=c;else{if(0===(c&1073741824))return a=null!==f?f.baseLanes|c:c,b.lanes=b.childLanes=1073741824,b.memoizedState={baseLanes:a,cachePool:null,transitions:null},b.updateQueue=null,G(fj,gj),gj|=a,null;b.memoizedState={baseLanes:0,cachePool:null,transitions:null};d=null!==f?f.baseLanes:c;G(fj,gj);gj|=d}else null!== +f?(d=f.baseLanes|c,b.memoizedState=null):d=c,G(fj,gj),gj|=d;Yi(a,b,e,c);return b.child}function hj(a,b){var c=b.ref;if(null===a&&null!==c||null!==a&&a.ref!==c)b.flags|=512,b.flags|=2097152}function dj(a,b,c,d,e){var f=Zf(c)?Xf:H.current;f=Yf(b,f);Tg(b,e);c=Xh(a,b,c,d,f,e);d=bi();if(null!==a&&!Ug)return b.updateQueue=a.updateQueue,b.flags&=-2053,a.lanes&=~e,$i(a,b,e);I&&d&&vg(b);b.flags|=1;Yi(a,b,c,e);return b.child} +function ij(a,b,c,d,e){if(Zf(c)){var f=!0;cg(b)}else f=!1;Tg(b,e);if(null===b.stateNode)jj(a,b),ph(b,c,d),rh(b,c,d,e),d=!0;else if(null===a){var g=b.stateNode,h=b.memoizedProps;g.props=h;var k=g.context,l=c.contextType;"object"===typeof l&&null!==l?l=Vg(l):(l=Zf(c)?Xf:H.current,l=Yf(b,l));var m=c.getDerivedStateFromProps,q="function"===typeof m||"function"===typeof g.getSnapshotBeforeUpdate;q||"function"!==typeof g.UNSAFE_componentWillReceiveProps&&"function"!==typeof g.componentWillReceiveProps|| +(h!==d||k!==l)&&qh(b,g,d,l);$g=!1;var r=b.memoizedState;g.state=r;gh(b,d,g,e);k=b.memoizedState;h!==d||r!==k||Wf.current||$g?("function"===typeof m&&(kh(b,c,m,d),k=b.memoizedState),(h=$g||oh(b,c,h,d,r,k,l))?(q||"function"!==typeof g.UNSAFE_componentWillMount&&"function"!==typeof g.componentWillMount||("function"===typeof g.componentWillMount&&g.componentWillMount(),"function"===typeof g.UNSAFE_componentWillMount&&g.UNSAFE_componentWillMount()),"function"===typeof g.componentDidMount&&(b.flags|=4194308)): +("function"===typeof g.componentDidMount&&(b.flags|=4194308),b.memoizedProps=d,b.memoizedState=k),g.props=d,g.state=k,g.context=l,d=h):("function"===typeof g.componentDidMount&&(b.flags|=4194308),d=!1)}else{g=b.stateNode;bh(a,b);h=b.memoizedProps;l=b.type===b.elementType?h:Lg(b.type,h);g.props=l;q=b.pendingProps;r=g.context;k=c.contextType;"object"===typeof k&&null!==k?k=Vg(k):(k=Zf(c)?Xf:H.current,k=Yf(b,k));var y=c.getDerivedStateFromProps;(m="function"===typeof y||"function"===typeof g.getSnapshotBeforeUpdate)|| +"function"!==typeof g.UNSAFE_componentWillReceiveProps&&"function"!==typeof g.componentWillReceiveProps||(h!==q||r!==k)&&qh(b,g,d,k);$g=!1;r=b.memoizedState;g.state=r;gh(b,d,g,e);var n=b.memoizedState;h!==q||r!==n||Wf.current||$g?("function"===typeof y&&(kh(b,c,y,d),n=b.memoizedState),(l=$g||oh(b,c,l,d,r,n,k)||!1)?(m||"function"!==typeof g.UNSAFE_componentWillUpdate&&"function"!==typeof g.componentWillUpdate||("function"===typeof g.componentWillUpdate&&g.componentWillUpdate(d,n,k),"function"===typeof g.UNSAFE_componentWillUpdate&& +g.UNSAFE_componentWillUpdate(d,n,k)),"function"===typeof g.componentDidUpdate&&(b.flags|=4),"function"===typeof g.getSnapshotBeforeUpdate&&(b.flags|=1024)):("function"!==typeof g.componentDidUpdate||h===a.memoizedProps&&r===a.memoizedState||(b.flags|=4),"function"!==typeof g.getSnapshotBeforeUpdate||h===a.memoizedProps&&r===a.memoizedState||(b.flags|=1024),b.memoizedProps=d,b.memoizedState=n),g.props=d,g.state=n,g.context=k,d=l):("function"!==typeof g.componentDidUpdate||h===a.memoizedProps&&r=== +a.memoizedState||(b.flags|=4),"function"!==typeof g.getSnapshotBeforeUpdate||h===a.memoizedProps&&r===a.memoizedState||(b.flags|=1024),d=!1)}return kj(a,b,c,d,f,e)} +function kj(a,b,c,d,e,f){hj(a,b);var g=0!==(b.flags&128);if(!d&&!g)return e&&dg(b,c,!1),$i(a,b,f);d=b.stateNode;Xi.current=b;var h=g&&"function"!==typeof c.getDerivedStateFromError?null:d.render();b.flags|=1;null!==a&&g?(b.child=Bh(b,a.child,null,f),b.child=Bh(b,null,h,f)):Yi(a,b,h,f);b.memoizedState=d.state;e&&dg(b,c,!0);return b.child}function lj(a){var b=a.stateNode;b.pendingContext?ag(a,b.pendingContext,b.pendingContext!==b.context):b.context&&ag(a,b.context,!1);Ih(a,b.containerInfo)} +function mj(a,b,c,d,e){Ig();Jg(e);b.flags|=256;Yi(a,b,c,d);return b.child}var nj={dehydrated:null,treeContext:null,retryLane:0};function oj(a){return{baseLanes:a,cachePool:null,transitions:null}} +function pj(a,b,c){var d=b.pendingProps,e=M.current,f=!1,g=0!==(b.flags&128),h;(h=g)||(h=null!==a&&null===a.memoizedState?!1:0!==(e&2));if(h)f=!0,b.flags&=-129;else if(null===a||null!==a.memoizedState)e|=1;G(M,e&1);if(null===a){Eg(b);a=b.memoizedState;if(null!==a&&(a=a.dehydrated,null!==a))return 0===(b.mode&1)?b.lanes=1:"$!"===a.data?b.lanes=8:b.lanes=1073741824,null;g=d.children;a=d.fallback;return f?(d=b.mode,f=b.child,g={mode:"hidden",children:g},0===(d&1)&&null!==f?(f.childLanes=0,f.pendingProps= +g):f=qj(g,d,0,null),a=Ah(a,d,c,null),f.return=b,a.return=b,f.sibling=a,b.child=f,b.child.memoizedState=oj(c),b.memoizedState=nj,a):rj(b,g)}e=a.memoizedState;if(null!==e&&(h=e.dehydrated,null!==h))return sj(a,b,g,d,h,e,c);if(f){f=d.fallback;g=b.mode;e=a.child;h=e.sibling;var k={mode:"hidden",children:d.children};0===(g&1)&&b.child!==e?(d=b.child,d.childLanes=0,d.pendingProps=k,b.deletions=null):(d=wh(e,k),d.subtreeFlags=e.subtreeFlags&14680064);null!==h?f=wh(h,f):(f=Ah(f,g,c,null),f.flags|=2);f.return= +b;d.return=b;d.sibling=f;b.child=d;d=f;f=b.child;g=a.child.memoizedState;g=null===g?oj(c):{baseLanes:g.baseLanes|c,cachePool:null,transitions:g.transitions};f.memoizedState=g;f.childLanes=a.childLanes&~c;b.memoizedState=nj;return d}f=a.child;a=f.sibling;d=wh(f,{mode:"visible",children:d.children});0===(b.mode&1)&&(d.lanes=c);d.return=b;d.sibling=null;null!==a&&(c=b.deletions,null===c?(b.deletions=[a],b.flags|=16):c.push(a));b.child=d;b.memoizedState=null;return d} +function rj(a,b){b=qj({mode:"visible",children:b},a.mode,0,null);b.return=a;return a.child=b}function tj(a,b,c,d){null!==d&&Jg(d);Bh(b,a.child,null,c);a=rj(b,b.pendingProps.children);a.flags|=2;b.memoizedState=null;return a} +function sj(a,b,c,d,e,f,g){if(c){if(b.flags&256)return b.flags&=-257,d=Li(Error(p(422))),tj(a,b,g,d);if(null!==b.memoizedState)return b.child=a.child,b.flags|=128,null;f=d.fallback;e=b.mode;d=qj({mode:"visible",children:d.children},e,0,null);f=Ah(f,e,g,null);f.flags|=2;d.return=b;f.return=b;d.sibling=f;b.child=d;0!==(b.mode&1)&&Bh(b,a.child,null,g);b.child.memoizedState=oj(g);b.memoizedState=nj;return f}if(0===(b.mode&1))return tj(a,b,g,null);if("$!"===e.data){d=e.nextSibling&&e.nextSibling.dataset; +if(d)var h=d.dgst;d=h;f=Error(p(419));d=Li(f,d,void 0);return tj(a,b,g,d)}h=0!==(g&a.childLanes);if(Ug||h){d=R;if(null!==d){switch(g&-g){case 4:e=2;break;case 16:e=8;break;case 64:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:case 4194304:case 8388608:case 16777216:case 33554432:case 67108864:e=32;break;case 536870912:e=268435456;break;default:e=0}e=0!==(e&(d.suspendedLanes|g))?0:e; +0!==e&&e!==f.retryLane&&(f.retryLane=e,Zg(a,e),mh(d,a,e,-1))}uj();d=Li(Error(p(421)));return tj(a,b,g,d)}if("$?"===e.data)return b.flags|=128,b.child=a.child,b=vj.bind(null,a),e._reactRetry=b,null;a=f.treeContext;yg=Lf(e.nextSibling);xg=b;I=!0;zg=null;null!==a&&(og[pg++]=rg,og[pg++]=sg,og[pg++]=qg,rg=a.id,sg=a.overflow,qg=b);b=rj(b,d.children);b.flags|=4096;return b}function wj(a,b,c){a.lanes|=b;var d=a.alternate;null!==d&&(d.lanes|=b);Sg(a.return,b,c)} +function xj(a,b,c,d,e){var f=a.memoizedState;null===f?a.memoizedState={isBackwards:b,rendering:null,renderingStartTime:0,last:d,tail:c,tailMode:e}:(f.isBackwards=b,f.rendering=null,f.renderingStartTime=0,f.last=d,f.tail=c,f.tailMode=e)} +function yj(a,b,c){var d=b.pendingProps,e=d.revealOrder,f=d.tail;Yi(a,b,d.children,c);d=M.current;if(0!==(d&2))d=d&1|2,b.flags|=128;else{if(null!==a&&0!==(a.flags&128))a:for(a=b.child;null!==a;){if(13===a.tag)null!==a.memoizedState&&wj(a,c,b);else if(19===a.tag)wj(a,c,b);else if(null!==a.child){a.child.return=a;a=a.child;continue}if(a===b)break a;for(;null===a.sibling;){if(null===a.return||a.return===b)break a;a=a.return}a.sibling.return=a.return;a=a.sibling}d&=1}G(M,d);if(0===(b.mode&1))b.memoizedState= +null;else switch(e){case "forwards":c=b.child;for(e=null;null!==c;)a=c.alternate,null!==a&&null===Mh(a)&&(e=c),c=c.sibling;c=e;null===c?(e=b.child,b.child=null):(e=c.sibling,c.sibling=null);xj(b,!1,e,c,f);break;case "backwards":c=null;e=b.child;for(b.child=null;null!==e;){a=e.alternate;if(null!==a&&null===Mh(a)){b.child=e;break}a=e.sibling;e.sibling=c;c=e;e=a}xj(b,!0,c,null,f);break;case "together":xj(b,!1,null,null,void 0);break;default:b.memoizedState=null}return b.child} +function jj(a,b){0===(b.mode&1)&&null!==a&&(a.alternate=null,b.alternate=null,b.flags|=2)}function $i(a,b,c){null!==a&&(b.dependencies=a.dependencies);hh|=b.lanes;if(0===(c&b.childLanes))return null;if(null!==a&&b.child!==a.child)throw Error(p(153));if(null!==b.child){a=b.child;c=wh(a,a.pendingProps);b.child=c;for(c.return=b;null!==a.sibling;)a=a.sibling,c=c.sibling=wh(a,a.pendingProps),c.return=b;c.sibling=null}return b.child} +function zj(a,b,c){switch(b.tag){case 3:lj(b);Ig();break;case 5:Kh(b);break;case 1:Zf(b.type)&&cg(b);break;case 4:Ih(b,b.stateNode.containerInfo);break;case 10:var d=b.type._context,e=b.memoizedProps.value;G(Mg,d._currentValue);d._currentValue=e;break;case 13:d=b.memoizedState;if(null!==d){if(null!==d.dehydrated)return G(M,M.current&1),b.flags|=128,null;if(0!==(c&b.child.childLanes))return pj(a,b,c);G(M,M.current&1);a=$i(a,b,c);return null!==a?a.sibling:null}G(M,M.current&1);break;case 19:d=0!==(c& +b.childLanes);if(0!==(a.flags&128)){if(d)return yj(a,b,c);b.flags|=128}e=b.memoizedState;null!==e&&(e.rendering=null,e.tail=null,e.lastEffect=null);G(M,M.current);if(d)break;else return null;case 22:case 23:return b.lanes=0,ej(a,b,c)}return $i(a,b,c)}var Aj,Bj,Cj,Dj; +Aj=function(a,b){for(var c=b.child;null!==c;){if(5===c.tag||6===c.tag)a.appendChild(c.stateNode);else if(4!==c.tag&&null!==c.child){c.child.return=c;c=c.child;continue}if(c===b)break;for(;null===c.sibling;){if(null===c.return||c.return===b)return;c=c.return}c.sibling.return=c.return;c=c.sibling}};Bj=function(){}; +Cj=function(a,b,c,d){var e=a.memoizedProps;if(e!==d){a=b.stateNode;Hh(Eh.current);var f=null;switch(c){case "input":e=Ya(a,e);d=Ya(a,d);f=[];break;case "select":e=A({},e,{value:void 0});d=A({},d,{value:void 0});f=[];break;case "textarea":e=gb(a,e);d=gb(a,d);f=[];break;default:"function"!==typeof e.onClick&&"function"===typeof d.onClick&&(a.onclick=Bf)}ub(c,d);var g;c=null;for(l in e)if(!d.hasOwnProperty(l)&&e.hasOwnProperty(l)&&null!=e[l])if("style"===l){var h=e[l];for(g in h)h.hasOwnProperty(g)&& +(c||(c={}),c[g]="")}else"dangerouslySetInnerHTML"!==l&&"children"!==l&&"suppressContentEditableWarning"!==l&&"suppressHydrationWarning"!==l&&"autoFocus"!==l&&(ea.hasOwnProperty(l)?f||(f=[]):(f=f||[]).push(l,null));for(l in d){var k=d[l];h=null!=e?e[l]:void 0;if(d.hasOwnProperty(l)&&k!==h&&(null!=k||null!=h))if("style"===l)if(h){for(g in h)!h.hasOwnProperty(g)||k&&k.hasOwnProperty(g)||(c||(c={}),c[g]="");for(g in k)k.hasOwnProperty(g)&&h[g]!==k[g]&&(c||(c={}),c[g]=k[g])}else c||(f||(f=[]),f.push(l, +c)),c=k;else"dangerouslySetInnerHTML"===l?(k=k?k.__html:void 0,h=h?h.__html:void 0,null!=k&&h!==k&&(f=f||[]).push(l,k)):"children"===l?"string"!==typeof k&&"number"!==typeof k||(f=f||[]).push(l,""+k):"suppressContentEditableWarning"!==l&&"suppressHydrationWarning"!==l&&(ea.hasOwnProperty(l)?(null!=k&&"onScroll"===l&&D("scroll",a),f||h===k||(f=[])):(f=f||[]).push(l,k))}c&&(f=f||[]).push("style",c);var l=f;if(b.updateQueue=l)b.flags|=4}};Dj=function(a,b,c,d){c!==d&&(b.flags|=4)}; +function Ej(a,b){if(!I)switch(a.tailMode){case "hidden":b=a.tail;for(var c=null;null!==b;)null!==b.alternate&&(c=b),b=b.sibling;null===c?a.tail=null:c.sibling=null;break;case "collapsed":c=a.tail;for(var d=null;null!==c;)null!==c.alternate&&(d=c),c=c.sibling;null===d?b||null===a.tail?a.tail=null:a.tail.sibling=null:d.sibling=null}} +function S(a){var b=null!==a.alternate&&a.alternate.child===a.child,c=0,d=0;if(b)for(var e=a.child;null!==e;)c|=e.lanes|e.childLanes,d|=e.subtreeFlags&14680064,d|=e.flags&14680064,e.return=a,e=e.sibling;else for(e=a.child;null!==e;)c|=e.lanes|e.childLanes,d|=e.subtreeFlags,d|=e.flags,e.return=a,e=e.sibling;a.subtreeFlags|=d;a.childLanes=c;return b} +function Fj(a,b,c){var d=b.pendingProps;wg(b);switch(b.tag){case 2:case 16:case 15:case 0:case 11:case 7:case 8:case 12:case 9:case 14:return S(b),null;case 1:return Zf(b.type)&&$f(),S(b),null;case 3:d=b.stateNode;Jh();E(Wf);E(H);Oh();d.pendingContext&&(d.context=d.pendingContext,d.pendingContext=null);if(null===a||null===a.child)Gg(b)?b.flags|=4:null===a||a.memoizedState.isDehydrated&&0===(b.flags&256)||(b.flags|=1024,null!==zg&&(Gj(zg),zg=null));Bj(a,b);S(b);return null;case 5:Lh(b);var e=Hh(Gh.current); +c=b.type;if(null!==a&&null!=b.stateNode)Cj(a,b,c,d,e),a.ref!==b.ref&&(b.flags|=512,b.flags|=2097152);else{if(!d){if(null===b.stateNode)throw Error(p(166));S(b);return null}a=Hh(Eh.current);if(Gg(b)){d=b.stateNode;c=b.type;var f=b.memoizedProps;d[Of]=b;d[Pf]=f;a=0!==(b.mode&1);switch(c){case "dialog":D("cancel",d);D("close",d);break;case "iframe":case "object":case "embed":D("load",d);break;case "video":case "audio":for(e=0;e<lf.length;e++)D(lf[e],d);break;case "source":D("error",d);break;case "img":case "image":case "link":D("error", +d);D("load",d);break;case "details":D("toggle",d);break;case "input":Za(d,f);D("invalid",d);break;case "select":d._wrapperState={wasMultiple:!!f.multiple};D("invalid",d);break;case "textarea":hb(d,f),D("invalid",d)}ub(c,f);e=null;for(var g in f)if(f.hasOwnProperty(g)){var h=f[g];"children"===g?"string"===typeof h?d.textContent!==h&&(!0!==f.suppressHydrationWarning&&Af(d.textContent,h,a),e=["children",h]):"number"===typeof h&&d.textContent!==""+h&&(!0!==f.suppressHydrationWarning&&Af(d.textContent, +h,a),e=["children",""+h]):ea.hasOwnProperty(g)&&null!=h&&"onScroll"===g&&D("scroll",d)}switch(c){case "input":Va(d);db(d,f,!0);break;case "textarea":Va(d);jb(d);break;case "select":case "option":break;default:"function"===typeof f.onClick&&(d.onclick=Bf)}d=e;b.updateQueue=d;null!==d&&(b.flags|=4)}else{g=9===e.nodeType?e:e.ownerDocument;"http://www.w3.org/1999/xhtml"===a&&(a=kb(c));"http://www.w3.org/1999/xhtml"===a?"script"===c?(a=g.createElement("div"),a.innerHTML="<script>\x3c/script>",a=a.removeChild(a.firstChild)): +"string"===typeof d.is?a=g.createElement(c,{is:d.is}):(a=g.createElement(c),"select"===c&&(g=a,d.multiple?g.multiple=!0:d.size&&(g.size=d.size))):a=g.createElementNS(a,c);a[Of]=b;a[Pf]=d;Aj(a,b,!1,!1);b.stateNode=a;a:{g=vb(c,d);switch(c){case "dialog":D("cancel",a);D("close",a);e=d;break;case "iframe":case "object":case "embed":D("load",a);e=d;break;case "video":case "audio":for(e=0;e<lf.length;e++)D(lf[e],a);e=d;break;case "source":D("error",a);e=d;break;case "img":case "image":case "link":D("error", +a);D("load",a);e=d;break;case "details":D("toggle",a);e=d;break;case "input":Za(a,d);e=Ya(a,d);D("invalid",a);break;case "option":e=d;break;case "select":a._wrapperState={wasMultiple:!!d.multiple};e=A({},d,{value:void 0});D("invalid",a);break;case "textarea":hb(a,d);e=gb(a,d);D("invalid",a);break;default:e=d}ub(c,e);h=e;for(f in h)if(h.hasOwnProperty(f)){var k=h[f];"style"===f?sb(a,k):"dangerouslySetInnerHTML"===f?(k=k?k.__html:void 0,null!=k&&nb(a,k)):"children"===f?"string"===typeof k?("textarea"!== +c||""!==k)&&ob(a,k):"number"===typeof k&&ob(a,""+k):"suppressContentEditableWarning"!==f&&"suppressHydrationWarning"!==f&&"autoFocus"!==f&&(ea.hasOwnProperty(f)?null!=k&&"onScroll"===f&&D("scroll",a):null!=k&&ta(a,f,k,g))}switch(c){case "input":Va(a);db(a,d,!1);break;case "textarea":Va(a);jb(a);break;case "option":null!=d.value&&a.setAttribute("value",""+Sa(d.value));break;case "select":a.multiple=!!d.multiple;f=d.value;null!=f?fb(a,!!d.multiple,f,!1):null!=d.defaultValue&&fb(a,!!d.multiple,d.defaultValue, +!0);break;default:"function"===typeof e.onClick&&(a.onclick=Bf)}switch(c){case "button":case "input":case "select":case "textarea":d=!!d.autoFocus;break a;case "img":d=!0;break a;default:d=!1}}d&&(b.flags|=4)}null!==b.ref&&(b.flags|=512,b.flags|=2097152)}S(b);return null;case 6:if(a&&null!=b.stateNode)Dj(a,b,a.memoizedProps,d);else{if("string"!==typeof d&&null===b.stateNode)throw Error(p(166));c=Hh(Gh.current);Hh(Eh.current);if(Gg(b)){d=b.stateNode;c=b.memoizedProps;d[Of]=b;if(f=d.nodeValue!==c)if(a= +xg,null!==a)switch(a.tag){case 3:Af(d.nodeValue,c,0!==(a.mode&1));break;case 5:!0!==a.memoizedProps.suppressHydrationWarning&&Af(d.nodeValue,c,0!==(a.mode&1))}f&&(b.flags|=4)}else d=(9===c.nodeType?c:c.ownerDocument).createTextNode(d),d[Of]=b,b.stateNode=d}S(b);return null;case 13:E(M);d=b.memoizedState;if(null===a||null!==a.memoizedState&&null!==a.memoizedState.dehydrated){if(I&&null!==yg&&0!==(b.mode&1)&&0===(b.flags&128))Hg(),Ig(),b.flags|=98560,f=!1;else if(f=Gg(b),null!==d&&null!==d.dehydrated){if(null=== +a){if(!f)throw Error(p(318));f=b.memoizedState;f=null!==f?f.dehydrated:null;if(!f)throw Error(p(317));f[Of]=b}else Ig(),0===(b.flags&128)&&(b.memoizedState=null),b.flags|=4;S(b);f=!1}else null!==zg&&(Gj(zg),zg=null),f=!0;if(!f)return b.flags&65536?b:null}if(0!==(b.flags&128))return b.lanes=c,b;d=null!==d;d!==(null!==a&&null!==a.memoizedState)&&d&&(b.child.flags|=8192,0!==(b.mode&1)&&(null===a||0!==(M.current&1)?0===T&&(T=3):uj()));null!==b.updateQueue&&(b.flags|=4);S(b);return null;case 4:return Jh(), +Bj(a,b),null===a&&sf(b.stateNode.containerInfo),S(b),null;case 10:return Rg(b.type._context),S(b),null;case 17:return Zf(b.type)&&$f(),S(b),null;case 19:E(M);f=b.memoizedState;if(null===f)return S(b),null;d=0!==(b.flags&128);g=f.rendering;if(null===g)if(d)Ej(f,!1);else{if(0!==T||null!==a&&0!==(a.flags&128))for(a=b.child;null!==a;){g=Mh(a);if(null!==g){b.flags|=128;Ej(f,!1);d=g.updateQueue;null!==d&&(b.updateQueue=d,b.flags|=4);b.subtreeFlags=0;d=c;for(c=b.child;null!==c;)f=c,a=d,f.flags&=14680066, +g=f.alternate,null===g?(f.childLanes=0,f.lanes=a,f.child=null,f.subtreeFlags=0,f.memoizedProps=null,f.memoizedState=null,f.updateQueue=null,f.dependencies=null,f.stateNode=null):(f.childLanes=g.childLanes,f.lanes=g.lanes,f.child=g.child,f.subtreeFlags=0,f.deletions=null,f.memoizedProps=g.memoizedProps,f.memoizedState=g.memoizedState,f.updateQueue=g.updateQueue,f.type=g.type,a=g.dependencies,f.dependencies=null===a?null:{lanes:a.lanes,firstContext:a.firstContext}),c=c.sibling;G(M,M.current&1|2);return b.child}a= +a.sibling}null!==f.tail&&B()>Hj&&(b.flags|=128,d=!0,Ej(f,!1),b.lanes=4194304)}else{if(!d)if(a=Mh(g),null!==a){if(b.flags|=128,d=!0,c=a.updateQueue,null!==c&&(b.updateQueue=c,b.flags|=4),Ej(f,!0),null===f.tail&&"hidden"===f.tailMode&&!g.alternate&&!I)return S(b),null}else 2*B()-f.renderingStartTime>Hj&&1073741824!==c&&(b.flags|=128,d=!0,Ej(f,!1),b.lanes=4194304);f.isBackwards?(g.sibling=b.child,b.child=g):(c=f.last,null!==c?c.sibling=g:b.child=g,f.last=g)}if(null!==f.tail)return b=f.tail,f.rendering= +b,f.tail=b.sibling,f.renderingStartTime=B(),b.sibling=null,c=M.current,G(M,d?c&1|2:c&1),b;S(b);return null;case 22:case 23:return Ij(),d=null!==b.memoizedState,null!==a&&null!==a.memoizedState!==d&&(b.flags|=8192),d&&0!==(b.mode&1)?0!==(gj&1073741824)&&(S(b),b.subtreeFlags&6&&(b.flags|=8192)):S(b),null;case 24:return null;case 25:return null}throw Error(p(156,b.tag));} +function Jj(a,b){wg(b);switch(b.tag){case 1:return Zf(b.type)&&$f(),a=b.flags,a&65536?(b.flags=a&-65537|128,b):null;case 3:return Jh(),E(Wf),E(H),Oh(),a=b.flags,0!==(a&65536)&&0===(a&128)?(b.flags=a&-65537|128,b):null;case 5:return Lh(b),null;case 13:E(M);a=b.memoizedState;if(null!==a&&null!==a.dehydrated){if(null===b.alternate)throw Error(p(340));Ig()}a=b.flags;return a&65536?(b.flags=a&-65537|128,b):null;case 19:return E(M),null;case 4:return Jh(),null;case 10:return Rg(b.type._context),null;case 22:case 23:return Ij(), +null;case 24:return null;default:return null}}var Kj=!1,U=!1,Lj="function"===typeof WeakSet?WeakSet:Set,V=null;function Mj(a,b){var c=a.ref;if(null!==c)if("function"===typeof c)try{c(null)}catch(d){W(a,b,d)}else c.current=null}function Nj(a,b,c){try{c()}catch(d){W(a,b,d)}}var Oj=!1; +function Pj(a,b){Cf=dd;a=Me();if(Ne(a)){if("selectionStart"in a)var c={start:a.selectionStart,end:a.selectionEnd};else a:{c=(c=a.ownerDocument)&&c.defaultView||window;var d=c.getSelection&&c.getSelection();if(d&&0!==d.rangeCount){c=d.anchorNode;var e=d.anchorOffset,f=d.focusNode;d=d.focusOffset;try{c.nodeType,f.nodeType}catch(F){c=null;break a}var g=0,h=-1,k=-1,l=0,m=0,q=a,r=null;b:for(;;){for(var y;;){q!==c||0!==e&&3!==q.nodeType||(h=g+e);q!==f||0!==d&&3!==q.nodeType||(k=g+d);3===q.nodeType&&(g+= +q.nodeValue.length);if(null===(y=q.firstChild))break;r=q;q=y}for(;;){if(q===a)break b;r===c&&++l===e&&(h=g);r===f&&++m===d&&(k=g);if(null!==(y=q.nextSibling))break;q=r;r=q.parentNode}q=y}c=-1===h||-1===k?null:{start:h,end:k}}else c=null}c=c||{start:0,end:0}}else c=null;Df={focusedElem:a,selectionRange:c};dd=!1;for(V=b;null!==V;)if(b=V,a=b.child,0!==(b.subtreeFlags&1028)&&null!==a)a.return=b,V=a;else for(;null!==V;){b=V;try{var n=b.alternate;if(0!==(b.flags&1024))switch(b.tag){case 0:case 11:case 15:break; +case 1:if(null!==n){var t=n.memoizedProps,J=n.memoizedState,x=b.stateNode,w=x.getSnapshotBeforeUpdate(b.elementType===b.type?t:Lg(b.type,t),J);x.__reactInternalSnapshotBeforeUpdate=w}break;case 3:var u=b.stateNode.containerInfo;1===u.nodeType?u.textContent="":9===u.nodeType&&u.documentElement&&u.removeChild(u.documentElement);break;case 5:case 6:case 4:case 17:break;default:throw Error(p(163));}}catch(F){W(b,b.return,F)}a=b.sibling;if(null!==a){a.return=b.return;V=a;break}V=b.return}n=Oj;Oj=!1;return n} +function Qj(a,b,c){var d=b.updateQueue;d=null!==d?d.lastEffect:null;if(null!==d){var e=d=d.next;do{if((e.tag&a)===a){var f=e.destroy;e.destroy=void 0;void 0!==f&&Nj(b,c,f)}e=e.next}while(e!==d)}}function Rj(a,b){b=b.updateQueue;b=null!==b?b.lastEffect:null;if(null!==b){var c=b=b.next;do{if((c.tag&a)===a){var d=c.create;c.destroy=d()}c=c.next}while(c!==b)}}function Sj(a){var b=a.ref;if(null!==b){var c=a.stateNode;switch(a.tag){case 5:a=c;break;default:a=c}"function"===typeof b?b(a):b.current=a}} +function Tj(a){var b=a.alternate;null!==b&&(a.alternate=null,Tj(b));a.child=null;a.deletions=null;a.sibling=null;5===a.tag&&(b=a.stateNode,null!==b&&(delete b[Of],delete b[Pf],delete b[of],delete b[Qf],delete b[Rf]));a.stateNode=null;a.return=null;a.dependencies=null;a.memoizedProps=null;a.memoizedState=null;a.pendingProps=null;a.stateNode=null;a.updateQueue=null}function Uj(a){return 5===a.tag||3===a.tag||4===a.tag} +function Vj(a){a:for(;;){for(;null===a.sibling;){if(null===a.return||Uj(a.return))return null;a=a.return}a.sibling.return=a.return;for(a=a.sibling;5!==a.tag&&6!==a.tag&&18!==a.tag;){if(a.flags&2)continue a;if(null===a.child||4===a.tag)continue a;else a.child.return=a,a=a.child}if(!(a.flags&2))return a.stateNode}} +function Wj(a,b,c){var d=a.tag;if(5===d||6===d)a=a.stateNode,b?8===c.nodeType?c.parentNode.insertBefore(a,b):c.insertBefore(a,b):(8===c.nodeType?(b=c.parentNode,b.insertBefore(a,c)):(b=c,b.appendChild(a)),c=c._reactRootContainer,null!==c&&void 0!==c||null!==b.onclick||(b.onclick=Bf));else if(4!==d&&(a=a.child,null!==a))for(Wj(a,b,c),a=a.sibling;null!==a;)Wj(a,b,c),a=a.sibling} +function Xj(a,b,c){var d=a.tag;if(5===d||6===d)a=a.stateNode,b?c.insertBefore(a,b):c.appendChild(a);else if(4!==d&&(a=a.child,null!==a))for(Xj(a,b,c),a=a.sibling;null!==a;)Xj(a,b,c),a=a.sibling}var X=null,Yj=!1;function Zj(a,b,c){for(c=c.child;null!==c;)ak(a,b,c),c=c.sibling} +function ak(a,b,c){if(lc&&"function"===typeof lc.onCommitFiberUnmount)try{lc.onCommitFiberUnmount(kc,c)}catch(h){}switch(c.tag){case 5:U||Mj(c,b);case 6:var d=X,e=Yj;X=null;Zj(a,b,c);X=d;Yj=e;null!==X&&(Yj?(a=X,c=c.stateNode,8===a.nodeType?a.parentNode.removeChild(c):a.removeChild(c)):X.removeChild(c.stateNode));break;case 18:null!==X&&(Yj?(a=X,c=c.stateNode,8===a.nodeType?Kf(a.parentNode,c):1===a.nodeType&&Kf(a,c),bd(a)):Kf(X,c.stateNode));break;case 4:d=X;e=Yj;X=c.stateNode.containerInfo;Yj=!0; +Zj(a,b,c);X=d;Yj=e;break;case 0:case 11:case 14:case 15:if(!U&&(d=c.updateQueue,null!==d&&(d=d.lastEffect,null!==d))){e=d=d.next;do{var f=e,g=f.destroy;f=f.tag;void 0!==g&&(0!==(f&2)?Nj(c,b,g):0!==(f&4)&&Nj(c,b,g));e=e.next}while(e!==d)}Zj(a,b,c);break;case 1:if(!U&&(Mj(c,b),d=c.stateNode,"function"===typeof d.componentWillUnmount))try{d.props=c.memoizedProps,d.state=c.memoizedState,d.componentWillUnmount()}catch(h){W(c,b,h)}Zj(a,b,c);break;case 21:Zj(a,b,c);break;case 22:c.mode&1?(U=(d=U)||null!== +c.memoizedState,Zj(a,b,c),U=d):Zj(a,b,c);break;default:Zj(a,b,c)}}function bk(a){var b=a.updateQueue;if(null!==b){a.updateQueue=null;var c=a.stateNode;null===c&&(c=a.stateNode=new Lj);b.forEach(function(b){var d=ck.bind(null,a,b);c.has(b)||(c.add(b),b.then(d,d))})}} +function dk(a,b){var c=b.deletions;if(null!==c)for(var d=0;d<c.length;d++){var e=c[d];try{var f=a,g=b,h=g;a:for(;null!==h;){switch(h.tag){case 5:X=h.stateNode;Yj=!1;break a;case 3:X=h.stateNode.containerInfo;Yj=!0;break a;case 4:X=h.stateNode.containerInfo;Yj=!0;break a}h=h.return}if(null===X)throw Error(p(160));ak(f,g,e);X=null;Yj=!1;var k=e.alternate;null!==k&&(k.return=null);e.return=null}catch(l){W(e,b,l)}}if(b.subtreeFlags&12854)for(b=b.child;null!==b;)ek(b,a),b=b.sibling} +function ek(a,b){var c=a.alternate,d=a.flags;switch(a.tag){case 0:case 11:case 14:case 15:dk(b,a);fk(a);if(d&4){try{Qj(3,a,a.return),Rj(3,a)}catch(t){W(a,a.return,t)}try{Qj(5,a,a.return)}catch(t){W(a,a.return,t)}}break;case 1:dk(b,a);fk(a);d&512&&null!==c&&Mj(c,c.return);break;case 5:dk(b,a);fk(a);d&512&&null!==c&&Mj(c,c.return);if(a.flags&32){var e=a.stateNode;try{ob(e,"")}catch(t){W(a,a.return,t)}}if(d&4&&(e=a.stateNode,null!=e)){var f=a.memoizedProps,g=null!==c?c.memoizedProps:f,h=a.type,k=a.updateQueue; +a.updateQueue=null;if(null!==k)try{"input"===h&&"radio"===f.type&&null!=f.name&&ab(e,f);vb(h,g);var l=vb(h,f);for(g=0;g<k.length;g+=2){var m=k[g],q=k[g+1];"style"===m?sb(e,q):"dangerouslySetInnerHTML"===m?nb(e,q):"children"===m?ob(e,q):ta(e,m,q,l)}switch(h){case "input":bb(e,f);break;case "textarea":ib(e,f);break;case "select":var r=e._wrapperState.wasMultiple;e._wrapperState.wasMultiple=!!f.multiple;var y=f.value;null!=y?fb(e,!!f.multiple,y,!1):r!==!!f.multiple&&(null!=f.defaultValue?fb(e,!!f.multiple, +f.defaultValue,!0):fb(e,!!f.multiple,f.multiple?[]:"",!1))}e[Pf]=f}catch(t){W(a,a.return,t)}}break;case 6:dk(b,a);fk(a);if(d&4){if(null===a.stateNode)throw Error(p(162));e=a.stateNode;f=a.memoizedProps;try{e.nodeValue=f}catch(t){W(a,a.return,t)}}break;case 3:dk(b,a);fk(a);if(d&4&&null!==c&&c.memoizedState.isDehydrated)try{bd(b.containerInfo)}catch(t){W(a,a.return,t)}break;case 4:dk(b,a);fk(a);break;case 13:dk(b,a);fk(a);e=a.child;e.flags&8192&&(f=null!==e.memoizedState,e.stateNode.isHidden=f,!f|| +null!==e.alternate&&null!==e.alternate.memoizedState||(gk=B()));d&4&&bk(a);break;case 22:m=null!==c&&null!==c.memoizedState;a.mode&1?(U=(l=U)||m,dk(b,a),U=l):dk(b,a);fk(a);if(d&8192){l=null!==a.memoizedState;if((a.stateNode.isHidden=l)&&!m&&0!==(a.mode&1))for(V=a,m=a.child;null!==m;){for(q=V=m;null!==V;){r=V;y=r.child;switch(r.tag){case 0:case 11:case 14:case 15:Qj(4,r,r.return);break;case 1:Mj(r,r.return);var n=r.stateNode;if("function"===typeof n.componentWillUnmount){d=r;c=r.return;try{b=d,n.props= +b.memoizedProps,n.state=b.memoizedState,n.componentWillUnmount()}catch(t){W(d,c,t)}}break;case 5:Mj(r,r.return);break;case 22:if(null!==r.memoizedState){hk(q);continue}}null!==y?(y.return=r,V=y):hk(q)}m=m.sibling}a:for(m=null,q=a;;){if(5===q.tag){if(null===m){m=q;try{e=q.stateNode,l?(f=e.style,"function"===typeof f.setProperty?f.setProperty("display","none","important"):f.display="none"):(h=q.stateNode,k=q.memoizedProps.style,g=void 0!==k&&null!==k&&k.hasOwnProperty("display")?k.display:null,h.style.display= +rb("display",g))}catch(t){W(a,a.return,t)}}}else if(6===q.tag){if(null===m)try{q.stateNode.nodeValue=l?"":q.memoizedProps}catch(t){W(a,a.return,t)}}else if((22!==q.tag&&23!==q.tag||null===q.memoizedState||q===a)&&null!==q.child){q.child.return=q;q=q.child;continue}if(q===a)break a;for(;null===q.sibling;){if(null===q.return||q.return===a)break a;m===q&&(m=null);q=q.return}m===q&&(m=null);q.sibling.return=q.return;q=q.sibling}}break;case 19:dk(b,a);fk(a);d&4&&bk(a);break;case 21:break;default:dk(b, +a),fk(a)}}function fk(a){var b=a.flags;if(b&2){try{a:{for(var c=a.return;null!==c;){if(Uj(c)){var d=c;break a}c=c.return}throw Error(p(160));}switch(d.tag){case 5:var e=d.stateNode;d.flags&32&&(ob(e,""),d.flags&=-33);var f=Vj(a);Xj(a,f,e);break;case 3:case 4:var g=d.stateNode.containerInfo,h=Vj(a);Wj(a,h,g);break;default:throw Error(p(161));}}catch(k){W(a,a.return,k)}a.flags&=-3}b&4096&&(a.flags&=-4097)}function ik(a,b,c){V=a;jk(a,b,c)} +function jk(a,b,c){for(var d=0!==(a.mode&1);null!==V;){var e=V,f=e.child;if(22===e.tag&&d){var g=null!==e.memoizedState||Kj;if(!g){var h=e.alternate,k=null!==h&&null!==h.memoizedState||U;h=Kj;var l=U;Kj=g;if((U=k)&&!l)for(V=e;null!==V;)g=V,k=g.child,22===g.tag&&null!==g.memoizedState?kk(e):null!==k?(k.return=g,V=k):kk(e);for(;null!==f;)V=f,jk(f,b,c),f=f.sibling;V=e;Kj=h;U=l}lk(a,b,c)}else 0!==(e.subtreeFlags&8772)&&null!==f?(f.return=e,V=f):lk(a,b,c)}} +function lk(a){for(;null!==V;){var b=V;if(0!==(b.flags&8772)){var c=b.alternate;try{if(0!==(b.flags&8772))switch(b.tag){case 0:case 11:case 15:U||Rj(5,b);break;case 1:var d=b.stateNode;if(b.flags&4&&!U)if(null===c)d.componentDidMount();else{var e=b.elementType===b.type?c.memoizedProps:Lg(b.type,c.memoizedProps);d.componentDidUpdate(e,c.memoizedState,d.__reactInternalSnapshotBeforeUpdate)}var f=b.updateQueue;null!==f&&ih(b,f,d);break;case 3:var g=b.updateQueue;if(null!==g){c=null;if(null!==b.child)switch(b.child.tag){case 5:c= +b.child.stateNode;break;case 1:c=b.child.stateNode}ih(b,g,c)}break;case 5:var h=b.stateNode;if(null===c&&b.flags&4){c=h;var k=b.memoizedProps;switch(b.type){case "button":case "input":case "select":case "textarea":k.autoFocus&&c.focus();break;case "img":k.src&&(c.src=k.src)}}break;case 6:break;case 4:break;case 12:break;case 13:if(null===b.memoizedState){var l=b.alternate;if(null!==l){var m=l.memoizedState;if(null!==m){var q=m.dehydrated;null!==q&&bd(q)}}}break;case 19:case 17:case 21:case 22:case 23:case 25:break; +default:throw Error(p(163));}U||b.flags&512&&Sj(b)}catch(r){W(b,b.return,r)}}if(b===a){V=null;break}c=b.sibling;if(null!==c){c.return=b.return;V=c;break}V=b.return}}function hk(a){for(;null!==V;){var b=V;if(b===a){V=null;break}var c=b.sibling;if(null!==c){c.return=b.return;V=c;break}V=b.return}} +function kk(a){for(;null!==V;){var b=V;try{switch(b.tag){case 0:case 11:case 15:var c=b.return;try{Rj(4,b)}catch(k){W(b,c,k)}break;case 1:var d=b.stateNode;if("function"===typeof d.componentDidMount){var e=b.return;try{d.componentDidMount()}catch(k){W(b,e,k)}}var f=b.return;try{Sj(b)}catch(k){W(b,f,k)}break;case 5:var g=b.return;try{Sj(b)}catch(k){W(b,g,k)}}}catch(k){W(b,b.return,k)}if(b===a){V=null;break}var h=b.sibling;if(null!==h){h.return=b.return;V=h;break}V=b.return}} +var mk=Math.ceil,nk=ua.ReactCurrentDispatcher,ok=ua.ReactCurrentOwner,pk=ua.ReactCurrentBatchConfig,K=0,R=null,Y=null,Z=0,gj=0,fj=Uf(0),T=0,qk=null,hh=0,rk=0,sk=0,tk=null,uk=null,gk=0,Hj=Infinity,vk=null,Pi=!1,Qi=null,Si=null,wk=!1,xk=null,yk=0,zk=0,Ak=null,Bk=-1,Ck=0;function L(){return 0!==(K&6)?B():-1!==Bk?Bk:Bk=B()} +function lh(a){if(0===(a.mode&1))return 1;if(0!==(K&2)&&0!==Z)return Z&-Z;if(null!==Kg.transition)return 0===Ck&&(Ck=yc()),Ck;a=C;if(0!==a)return a;a=window.event;a=void 0===a?16:jd(a.type);return a}function mh(a,b,c,d){if(50<zk)throw zk=0,Ak=null,Error(p(185));Ac(a,c,d);if(0===(K&2)||a!==R)a===R&&(0===(K&2)&&(rk|=c),4===T&&Dk(a,Z)),Ek(a,d),1===c&&0===K&&0===(b.mode&1)&&(Hj=B()+500,fg&&jg())} +function Ek(a,b){var c=a.callbackNode;wc(a,b);var d=uc(a,a===R?Z:0);if(0===d)null!==c&&bc(c),a.callbackNode=null,a.callbackPriority=0;else if(b=d&-d,a.callbackPriority!==b){null!=c&&bc(c);if(1===b)0===a.tag?ig(Fk.bind(null,a)):hg(Fk.bind(null,a)),Jf(function(){0===(K&6)&&jg()}),c=null;else{switch(Dc(d)){case 1:c=fc;break;case 4:c=gc;break;case 16:c=hc;break;case 536870912:c=jc;break;default:c=hc}c=Gk(c,Hk.bind(null,a))}a.callbackPriority=b;a.callbackNode=c}} +function Hk(a,b){Bk=-1;Ck=0;if(0!==(K&6))throw Error(p(327));var c=a.callbackNode;if(Ik()&&a.callbackNode!==c)return null;var d=uc(a,a===R?Z:0);if(0===d)return null;if(0!==(d&30)||0!==(d&a.expiredLanes)||b)b=Jk(a,d);else{b=d;var e=K;K|=2;var f=Kk();if(R!==a||Z!==b)vk=null,Hj=B()+500,Lk(a,b);do try{Mk();break}catch(h){Nk(a,h)}while(1);Qg();nk.current=f;K=e;null!==Y?b=0:(R=null,Z=0,b=T)}if(0!==b){2===b&&(e=xc(a),0!==e&&(d=e,b=Ok(a,e)));if(1===b)throw c=qk,Lk(a,0),Dk(a,d),Ek(a,B()),c;if(6===b)Dk(a,d); +else{e=a.current.alternate;if(0===(d&30)&&!Pk(e)&&(b=Jk(a,d),2===b&&(f=xc(a),0!==f&&(d=f,b=Ok(a,f))),1===b))throw c=qk,Lk(a,0),Dk(a,d),Ek(a,B()),c;a.finishedWork=e;a.finishedLanes=d;switch(b){case 0:case 1:throw Error(p(345));case 2:Qk(a,uk,vk);break;case 3:Dk(a,d);if((d&130023424)===d&&(b=gk+500-B(),10<b)){if(0!==uc(a,0))break;e=a.suspendedLanes;if((e&d)!==d){L();a.pingedLanes|=a.suspendedLanes&e;break}a.timeoutHandle=Ff(Qk.bind(null,a,uk,vk),b);break}Qk(a,uk,vk);break;case 4:Dk(a,d);if((d&4194240)=== +d)break;b=a.eventTimes;for(e=-1;0<d;){var g=31-oc(d);f=1<<g;g=b[g];g>e&&(e=g);d&=~f}d=e;d=B()-d;d=(120>d?120:480>d?480:1080>d?1080:1920>d?1920:3E3>d?3E3:4320>d?4320:1960*mk(d/1960))-d;if(10<d){a.timeoutHandle=Ff(Qk.bind(null,a,uk,vk),d);break}Qk(a,uk,vk);break;case 5:Qk(a,uk,vk);break;default:throw Error(p(329));}}}Ek(a,B());return a.callbackNode===c?Hk.bind(null,a):null} +function Ok(a,b){var c=tk;a.current.memoizedState.isDehydrated&&(Lk(a,b).flags|=256);a=Jk(a,b);2!==a&&(b=uk,uk=c,null!==b&&Gj(b));return a}function Gj(a){null===uk?uk=a:uk.push.apply(uk,a)} +function Pk(a){for(var b=a;;){if(b.flags&16384){var c=b.updateQueue;if(null!==c&&(c=c.stores,null!==c))for(var d=0;d<c.length;d++){var e=c[d],f=e.getSnapshot;e=e.value;try{if(!He(f(),e))return!1}catch(g){return!1}}}c=b.child;if(b.subtreeFlags&16384&&null!==c)c.return=b,b=c;else{if(b===a)break;for(;null===b.sibling;){if(null===b.return||b.return===a)return!0;b=b.return}b.sibling.return=b.return;b=b.sibling}}return!0} +function Dk(a,b){b&=~sk;b&=~rk;a.suspendedLanes|=b;a.pingedLanes&=~b;for(a=a.expirationTimes;0<b;){var c=31-oc(b),d=1<<c;a[c]=-1;b&=~d}}function Fk(a){if(0!==(K&6))throw Error(p(327));Ik();var b=uc(a,0);if(0===(b&1))return Ek(a,B()),null;var c=Jk(a,b);if(0!==a.tag&&2===c){var d=xc(a);0!==d&&(b=d,c=Ok(a,d))}if(1===c)throw c=qk,Lk(a,0),Dk(a,b),Ek(a,B()),c;if(6===c)throw Error(p(345));a.finishedWork=a.current.alternate;a.finishedLanes=b;Qk(a,uk,vk);Ek(a,B());return null} +function Rk(a,b){var c=K;K|=1;try{return a(b)}finally{K=c,0===K&&(Hj=B()+500,fg&&jg())}}function Sk(a){null!==xk&&0===xk.tag&&0===(K&6)&&Ik();var b=K;K|=1;var c=pk.transition,d=C;try{if(pk.transition=null,C=1,a)return a()}finally{C=d,pk.transition=c,K=b,0===(K&6)&&jg()}}function Ij(){gj=fj.current;E(fj)} +function Lk(a,b){a.finishedWork=null;a.finishedLanes=0;var c=a.timeoutHandle;-1!==c&&(a.timeoutHandle=-1,Gf(c));if(null!==Y)for(c=Y.return;null!==c;){var d=c;wg(d);switch(d.tag){case 1:d=d.type.childContextTypes;null!==d&&void 0!==d&&$f();break;case 3:Jh();E(Wf);E(H);Oh();break;case 5:Lh(d);break;case 4:Jh();break;case 13:E(M);break;case 19:E(M);break;case 10:Rg(d.type._context);break;case 22:case 23:Ij()}c=c.return}R=a;Y=a=wh(a.current,null);Z=gj=b;T=0;qk=null;sk=rk=hh=0;uk=tk=null;if(null!==Wg){for(b= +0;b<Wg.length;b++)if(c=Wg[b],d=c.interleaved,null!==d){c.interleaved=null;var e=d.next,f=c.pending;if(null!==f){var g=f.next;f.next=e;d.next=g}c.pending=d}Wg=null}return a} +function Nk(a,b){do{var c=Y;try{Qg();Ph.current=ai;if(Sh){for(var d=N.memoizedState;null!==d;){var e=d.queue;null!==e&&(e.pending=null);d=d.next}Sh=!1}Rh=0;P=O=N=null;Th=!1;Uh=0;ok.current=null;if(null===c||null===c.return){T=1;qk=b;Y=null;break}a:{var f=a,g=c.return,h=c,k=b;b=Z;h.flags|=32768;if(null!==k&&"object"===typeof k&&"function"===typeof k.then){var l=k,m=h,q=m.tag;if(0===(m.mode&1)&&(0===q||11===q||15===q)){var r=m.alternate;r?(m.updateQueue=r.updateQueue,m.memoizedState=r.memoizedState, +m.lanes=r.lanes):(m.updateQueue=null,m.memoizedState=null)}var y=Vi(g);if(null!==y){y.flags&=-257;Wi(y,g,h,f,b);y.mode&1&&Ti(f,l,b);b=y;k=l;var n=b.updateQueue;if(null===n){var t=new Set;t.add(k);b.updateQueue=t}else n.add(k);break a}else{if(0===(b&1)){Ti(f,l,b);uj();break a}k=Error(p(426))}}else if(I&&h.mode&1){var J=Vi(g);if(null!==J){0===(J.flags&65536)&&(J.flags|=256);Wi(J,g,h,f,b);Jg(Ki(k,h));break a}}f=k=Ki(k,h);4!==T&&(T=2);null===tk?tk=[f]:tk.push(f);f=g;do{switch(f.tag){case 3:f.flags|=65536; +b&=-b;f.lanes|=b;var x=Oi(f,k,b);fh(f,x);break a;case 1:h=k;var w=f.type,u=f.stateNode;if(0===(f.flags&128)&&("function"===typeof w.getDerivedStateFromError||null!==u&&"function"===typeof u.componentDidCatch&&(null===Si||!Si.has(u)))){f.flags|=65536;b&=-b;f.lanes|=b;var F=Ri(f,h,b);fh(f,F);break a}}f=f.return}while(null!==f)}Tk(c)}catch(na){b=na;Y===c&&null!==c&&(Y=c=c.return);continue}break}while(1)}function Kk(){var a=nk.current;nk.current=ai;return null===a?ai:a} +function uj(){if(0===T||3===T||2===T)T=4;null===R||0===(hh&268435455)&&0===(rk&268435455)||Dk(R,Z)}function Jk(a,b){var c=K;K|=2;var d=Kk();if(R!==a||Z!==b)vk=null,Lk(a,b);do try{Uk();break}catch(e){Nk(a,e)}while(1);Qg();K=c;nk.current=d;if(null!==Y)throw Error(p(261));R=null;Z=0;return T}function Uk(){for(;null!==Y;)Vk(Y)}function Mk(){for(;null!==Y&&!cc();)Vk(Y)}function Vk(a){var b=Wk(a.alternate,a,gj);a.memoizedProps=a.pendingProps;null===b?Tk(a):Y=b;ok.current=null} +function Tk(a){var b=a;do{var c=b.alternate;a=b.return;if(0===(b.flags&32768)){if(c=Fj(c,b,gj),null!==c){Y=c;return}}else{c=Jj(c,b);if(null!==c){c.flags&=32767;Y=c;return}if(null!==a)a.flags|=32768,a.subtreeFlags=0,a.deletions=null;else{T=6;Y=null;return}}b=b.sibling;if(null!==b){Y=b;return}Y=b=a}while(null!==b);0===T&&(T=5)}function Qk(a,b,c){var d=C,e=pk.transition;try{pk.transition=null,C=1,Xk(a,b,c,d)}finally{pk.transition=e,C=d}return null} +function Xk(a,b,c,d){do Ik();while(null!==xk);if(0!==(K&6))throw Error(p(327));c=a.finishedWork;var e=a.finishedLanes;if(null===c)return null;a.finishedWork=null;a.finishedLanes=0;if(c===a.current)throw Error(p(177));a.callbackNode=null;a.callbackPriority=0;var f=c.lanes|c.childLanes;Bc(a,f);a===R&&(Y=R=null,Z=0);0===(c.subtreeFlags&2064)&&0===(c.flags&2064)||wk||(wk=!0,Gk(hc,function(){Ik();return null}));f=0!==(c.flags&15990);if(0!==(c.subtreeFlags&15990)||f){f=pk.transition;pk.transition=null; +var g=C;C=1;var h=K;K|=4;ok.current=null;Pj(a,c);ek(c,a);Oe(Df);dd=!!Cf;Df=Cf=null;a.current=c;ik(c,a,e);dc();K=h;C=g;pk.transition=f}else a.current=c;wk&&(wk=!1,xk=a,yk=e);f=a.pendingLanes;0===f&&(Si=null);mc(c.stateNode,d);Ek(a,B());if(null!==b)for(d=a.onRecoverableError,c=0;c<b.length;c++)e=b[c],d(e.value,{componentStack:e.stack,digest:e.digest});if(Pi)throw Pi=!1,a=Qi,Qi=null,a;0!==(yk&1)&&0!==a.tag&&Ik();f=a.pendingLanes;0!==(f&1)?a===Ak?zk++:(zk=0,Ak=a):zk=0;jg();return null} +function Ik(){if(null!==xk){var a=Dc(yk),b=pk.transition,c=C;try{pk.transition=null;C=16>a?16:a;if(null===xk)var d=!1;else{a=xk;xk=null;yk=0;if(0!==(K&6))throw Error(p(331));var e=K;K|=4;for(V=a.current;null!==V;){var f=V,g=f.child;if(0!==(V.flags&16)){var h=f.deletions;if(null!==h){for(var k=0;k<h.length;k++){var l=h[k];for(V=l;null!==V;){var m=V;switch(m.tag){case 0:case 11:case 15:Qj(8,m,f)}var q=m.child;if(null!==q)q.return=m,V=q;else for(;null!==V;){m=V;var r=m.sibling,y=m.return;Tj(m);if(m=== +l){V=null;break}if(null!==r){r.return=y;V=r;break}V=y}}}var n=f.alternate;if(null!==n){var t=n.child;if(null!==t){n.child=null;do{var J=t.sibling;t.sibling=null;t=J}while(null!==t)}}V=f}}if(0!==(f.subtreeFlags&2064)&&null!==g)g.return=f,V=g;else b:for(;null!==V;){f=V;if(0!==(f.flags&2048))switch(f.tag){case 0:case 11:case 15:Qj(9,f,f.return)}var x=f.sibling;if(null!==x){x.return=f.return;V=x;break b}V=f.return}}var w=a.current;for(V=w;null!==V;){g=V;var u=g.child;if(0!==(g.subtreeFlags&2064)&&null!== +u)u.return=g,V=u;else b:for(g=w;null!==V;){h=V;if(0!==(h.flags&2048))try{switch(h.tag){case 0:case 11:case 15:Rj(9,h)}}catch(na){W(h,h.return,na)}if(h===g){V=null;break b}var F=h.sibling;if(null!==F){F.return=h.return;V=F;break b}V=h.return}}K=e;jg();if(lc&&"function"===typeof lc.onPostCommitFiberRoot)try{lc.onPostCommitFiberRoot(kc,a)}catch(na){}d=!0}return d}finally{C=c,pk.transition=b}}return!1}function Yk(a,b,c){b=Ki(c,b);b=Oi(a,b,1);a=dh(a,b,1);b=L();null!==a&&(Ac(a,1,b),Ek(a,b))} +function W(a,b,c){if(3===a.tag)Yk(a,a,c);else for(;null!==b;){if(3===b.tag){Yk(b,a,c);break}else if(1===b.tag){var d=b.stateNode;if("function"===typeof b.type.getDerivedStateFromError||"function"===typeof d.componentDidCatch&&(null===Si||!Si.has(d))){a=Ki(c,a);a=Ri(b,a,1);b=dh(b,a,1);a=L();null!==b&&(Ac(b,1,a),Ek(b,a));break}}b=b.return}} +function Ui(a,b,c){var d=a.pingCache;null!==d&&d.delete(b);b=L();a.pingedLanes|=a.suspendedLanes&c;R===a&&(Z&c)===c&&(4===T||3===T&&(Z&130023424)===Z&&500>B()-gk?Lk(a,0):sk|=c);Ek(a,b)}function Zk(a,b){0===b&&(0===(a.mode&1)?b=1:(b=sc,sc<<=1,0===(sc&130023424)&&(sc=4194304)));var c=L();a=Zg(a,b);null!==a&&(Ac(a,b,c),Ek(a,c))}function vj(a){var b=a.memoizedState,c=0;null!==b&&(c=b.retryLane);Zk(a,c)} +function ck(a,b){var c=0;switch(a.tag){case 13:var d=a.stateNode;var e=a.memoizedState;null!==e&&(c=e.retryLane);break;case 19:d=a.stateNode;break;default:throw Error(p(314));}null!==d&&d.delete(b);Zk(a,c)}var Wk; +Wk=function(a,b,c){if(null!==a)if(a.memoizedProps!==b.pendingProps||Wf.current)Ug=!0;else{if(0===(a.lanes&c)&&0===(b.flags&128))return Ug=!1,zj(a,b,c);Ug=0!==(a.flags&131072)?!0:!1}else Ug=!1,I&&0!==(b.flags&1048576)&&ug(b,ng,b.index);b.lanes=0;switch(b.tag){case 2:var d=b.type;jj(a,b);a=b.pendingProps;var e=Yf(b,H.current);Tg(b,c);e=Xh(null,b,d,a,e,c);var f=bi();b.flags|=1;"object"===typeof e&&null!==e&&"function"===typeof e.render&&void 0===e.$$typeof?(b.tag=1,b.memoizedState=null,b.updateQueue= +null,Zf(d)?(f=!0,cg(b)):f=!1,b.memoizedState=null!==e.state&&void 0!==e.state?e.state:null,ah(b),e.updater=nh,b.stateNode=e,e._reactInternals=b,rh(b,d,a,c),b=kj(null,b,d,!0,f,c)):(b.tag=0,I&&f&&vg(b),Yi(null,b,e,c),b=b.child);return b;case 16:d=b.elementType;a:{jj(a,b);a=b.pendingProps;e=d._init;d=e(d._payload);b.type=d;e=b.tag=$k(d);a=Lg(d,a);switch(e){case 0:b=dj(null,b,d,a,c);break a;case 1:b=ij(null,b,d,a,c);break a;case 11:b=Zi(null,b,d,a,c);break a;case 14:b=aj(null,b,d,Lg(d.type,a),c);break a}throw Error(p(306, +d,""));}return b;case 0:return d=b.type,e=b.pendingProps,e=b.elementType===d?e:Lg(d,e),dj(a,b,d,e,c);case 1:return d=b.type,e=b.pendingProps,e=b.elementType===d?e:Lg(d,e),ij(a,b,d,e,c);case 3:a:{lj(b);if(null===a)throw Error(p(387));d=b.pendingProps;f=b.memoizedState;e=f.element;bh(a,b);gh(b,d,null,c);var g=b.memoizedState;d=g.element;if(f.isDehydrated)if(f={element:d,isDehydrated:!1,cache:g.cache,pendingSuspenseBoundaries:g.pendingSuspenseBoundaries,transitions:g.transitions},b.updateQueue.baseState= +f,b.memoizedState=f,b.flags&256){e=Ki(Error(p(423)),b);b=mj(a,b,d,c,e);break a}else if(d!==e){e=Ki(Error(p(424)),b);b=mj(a,b,d,c,e);break a}else for(yg=Lf(b.stateNode.containerInfo.firstChild),xg=b,I=!0,zg=null,c=Ch(b,null,d,c),b.child=c;c;)c.flags=c.flags&-3|4096,c=c.sibling;else{Ig();if(d===e){b=$i(a,b,c);break a}Yi(a,b,d,c)}b=b.child}return b;case 5:return Kh(b),null===a&&Eg(b),d=b.type,e=b.pendingProps,f=null!==a?a.memoizedProps:null,g=e.children,Ef(d,e)?g=null:null!==f&&Ef(d,f)&&(b.flags|=32), +hj(a,b),Yi(a,b,g,c),b.child;case 6:return null===a&&Eg(b),null;case 13:return pj(a,b,c);case 4:return Ih(b,b.stateNode.containerInfo),d=b.pendingProps,null===a?b.child=Bh(b,null,d,c):Yi(a,b,d,c),b.child;case 11:return d=b.type,e=b.pendingProps,e=b.elementType===d?e:Lg(d,e),Zi(a,b,d,e,c);case 7:return Yi(a,b,b.pendingProps,c),b.child;case 8:return Yi(a,b,b.pendingProps.children,c),b.child;case 12:return Yi(a,b,b.pendingProps.children,c),b.child;case 10:a:{d=b.type._context;e=b.pendingProps;f=b.memoizedProps; +g=e.value;G(Mg,d._currentValue);d._currentValue=g;if(null!==f)if(He(f.value,g)){if(f.children===e.children&&!Wf.current){b=$i(a,b,c);break a}}else for(f=b.child,null!==f&&(f.return=b);null!==f;){var h=f.dependencies;if(null!==h){g=f.child;for(var k=h.firstContext;null!==k;){if(k.context===d){if(1===f.tag){k=ch(-1,c&-c);k.tag=2;var l=f.updateQueue;if(null!==l){l=l.shared;var m=l.pending;null===m?k.next=k:(k.next=m.next,m.next=k);l.pending=k}}f.lanes|=c;k=f.alternate;null!==k&&(k.lanes|=c);Sg(f.return, +c,b);h.lanes|=c;break}k=k.next}}else if(10===f.tag)g=f.type===b.type?null:f.child;else if(18===f.tag){g=f.return;if(null===g)throw Error(p(341));g.lanes|=c;h=g.alternate;null!==h&&(h.lanes|=c);Sg(g,c,b);g=f.sibling}else g=f.child;if(null!==g)g.return=f;else for(g=f;null!==g;){if(g===b){g=null;break}f=g.sibling;if(null!==f){f.return=g.return;g=f;break}g=g.return}f=g}Yi(a,b,e.children,c);b=b.child}return b;case 9:return e=b.type,d=b.pendingProps.children,Tg(b,c),e=Vg(e),d=d(e),b.flags|=1,Yi(a,b,d,c), +b.child;case 14:return d=b.type,e=Lg(d,b.pendingProps),e=Lg(d.type,e),aj(a,b,d,e,c);case 15:return cj(a,b,b.type,b.pendingProps,c);case 17:return d=b.type,e=b.pendingProps,e=b.elementType===d?e:Lg(d,e),jj(a,b),b.tag=1,Zf(d)?(a=!0,cg(b)):a=!1,Tg(b,c),ph(b,d,e),rh(b,d,e,c),kj(null,b,d,!0,a,c);case 19:return yj(a,b,c);case 22:return ej(a,b,c)}throw Error(p(156,b.tag));};function Gk(a,b){return ac(a,b)} +function al(a,b,c,d){this.tag=a;this.key=c;this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null;this.index=0;this.ref=null;this.pendingProps=b;this.dependencies=this.memoizedState=this.updateQueue=this.memoizedProps=null;this.mode=d;this.subtreeFlags=this.flags=0;this.deletions=null;this.childLanes=this.lanes=0;this.alternate=null}function Bg(a,b,c,d){return new al(a,b,c,d)}function bj(a){a=a.prototype;return!(!a||!a.isReactComponent)} +function $k(a){if("function"===typeof a)return bj(a)?1:0;if(void 0!==a&&null!==a){a=a.$$typeof;if(a===Da)return 11;if(a===Ga)return 14}return 2} +function wh(a,b){var c=a.alternate;null===c?(c=Bg(a.tag,b,a.key,a.mode),c.elementType=a.elementType,c.type=a.type,c.stateNode=a.stateNode,c.alternate=a,a.alternate=c):(c.pendingProps=b,c.type=a.type,c.flags=0,c.subtreeFlags=0,c.deletions=null);c.flags=a.flags&14680064;c.childLanes=a.childLanes;c.lanes=a.lanes;c.child=a.child;c.memoizedProps=a.memoizedProps;c.memoizedState=a.memoizedState;c.updateQueue=a.updateQueue;b=a.dependencies;c.dependencies=null===b?null:{lanes:b.lanes,firstContext:b.firstContext}; +c.sibling=a.sibling;c.index=a.index;c.ref=a.ref;return c} +function yh(a,b,c,d,e,f){var g=2;d=a;if("function"===typeof a)bj(a)&&(g=1);else if("string"===typeof a)g=5;else a:switch(a){case ya:return Ah(c.children,e,f,b);case za:g=8;e|=8;break;case Aa:return a=Bg(12,c,b,e|2),a.elementType=Aa,a.lanes=f,a;case Ea:return a=Bg(13,c,b,e),a.elementType=Ea,a.lanes=f,a;case Fa:return a=Bg(19,c,b,e),a.elementType=Fa,a.lanes=f,a;case Ia:return qj(c,e,f,b);default:if("object"===typeof a&&null!==a)switch(a.$$typeof){case Ba:g=10;break a;case Ca:g=9;break a;case Da:g=11; +break a;case Ga:g=14;break a;case Ha:g=16;d=null;break a}throw Error(p(130,null==a?a:typeof a,""));}b=Bg(g,c,b,e);b.elementType=a;b.type=d;b.lanes=f;return b}function Ah(a,b,c,d){a=Bg(7,a,d,b);a.lanes=c;return a}function qj(a,b,c,d){a=Bg(22,a,d,b);a.elementType=Ia;a.lanes=c;a.stateNode={isHidden:!1};return a}function xh(a,b,c){a=Bg(6,a,null,b);a.lanes=c;return a} +function zh(a,b,c){b=Bg(4,null!==a.children?a.children:[],a.key,b);b.lanes=c;b.stateNode={containerInfo:a.containerInfo,pendingChildren:null,implementation:a.implementation};return b} +function bl(a,b,c,d,e){this.tag=b;this.containerInfo=a;this.finishedWork=this.pingCache=this.current=this.pendingChildren=null;this.timeoutHandle=-1;this.callbackNode=this.pendingContext=this.context=null;this.callbackPriority=0;this.eventTimes=zc(0);this.expirationTimes=zc(-1);this.entangledLanes=this.finishedLanes=this.mutableReadLanes=this.expiredLanes=this.pingedLanes=this.suspendedLanes=this.pendingLanes=0;this.entanglements=zc(0);this.identifierPrefix=d;this.onRecoverableError=e;this.mutableSourceEagerHydrationData= +null}function cl(a,b,c,d,e,f,g,h,k){a=new bl(a,b,c,h,k);1===b?(b=1,!0===f&&(b|=8)):b=0;f=Bg(3,null,null,b);a.current=f;f.stateNode=a;f.memoizedState={element:d,isDehydrated:c,cache:null,transitions:null,pendingSuspenseBoundaries:null};ah(f);return a}function dl(a,b,c){var d=3<arguments.length&&void 0!==arguments[3]?arguments[3]:null;return{$$typeof:wa,key:null==d?null:""+d,children:a,containerInfo:b,implementation:c}} +function el(a){if(!a)return Vf;a=a._reactInternals;a:{if(Vb(a)!==a||1!==a.tag)throw Error(p(170));var b=a;do{switch(b.tag){case 3:b=b.stateNode.context;break a;case 1:if(Zf(b.type)){b=b.stateNode.__reactInternalMemoizedMergedChildContext;break a}}b=b.return}while(null!==b);throw Error(p(171));}if(1===a.tag){var c=a.type;if(Zf(c))return bg(a,c,b)}return b} +function fl(a,b,c,d,e,f,g,h,k){a=cl(c,d,!0,a,e,f,g,h,k);a.context=el(null);c=a.current;d=L();e=lh(c);f=ch(d,e);f.callback=void 0!==b&&null!==b?b:null;dh(c,f,e);a.current.lanes=e;Ac(a,e,d);Ek(a,d);return a}function gl(a,b,c,d){var e=b.current,f=L(),g=lh(e);c=el(c);null===b.context?b.context=c:b.pendingContext=c;b=ch(f,g);b.payload={element:a};d=void 0===d?null:d;null!==d&&(b.callback=d);a=dh(e,b,g);null!==a&&(mh(a,e,g,f),eh(a,e,g));return g} +function hl(a){a=a.current;if(!a.child)return null;switch(a.child.tag){case 5:return a.child.stateNode;default:return a.child.stateNode}}function il(a,b){a=a.memoizedState;if(null!==a&&null!==a.dehydrated){var c=a.retryLane;a.retryLane=0!==c&&c<b?c:b}}function jl(a,b){il(a,b);(a=a.alternate)&&il(a,b)}function kl(){return null}var ll="function"===typeof reportError?reportError:function(a){console.error(a)};function ml(a){this._internalRoot=a} +nl.prototype.render=ml.prototype.render=function(a){var b=this._internalRoot;if(null===b)throw Error(p(409));gl(a,b,null,null)};nl.prototype.unmount=ml.prototype.unmount=function(){var a=this._internalRoot;if(null!==a){this._internalRoot=null;var b=a.containerInfo;Sk(function(){gl(null,a,null,null)});b[uf]=null}};function nl(a){this._internalRoot=a} +nl.prototype.unstable_scheduleHydration=function(a){if(a){var b=Hc();a={blockedOn:null,target:a,priority:b};for(var c=0;c<Qc.length&&0!==b&&b<Qc[c].priority;c++);Qc.splice(c,0,a);0===c&&Vc(a)}};function ol(a){return!(!a||1!==a.nodeType&&9!==a.nodeType&&11!==a.nodeType)}function pl(a){return!(!a||1!==a.nodeType&&9!==a.nodeType&&11!==a.nodeType&&(8!==a.nodeType||" react-mount-point-unstable "!==a.nodeValue))}function ql(){} +function rl(a,b,c,d,e){if(e){if("function"===typeof d){var f=d;d=function(){var a=hl(g);f.call(a)}}var g=fl(b,d,a,0,null,!1,!1,"",ql);a._reactRootContainer=g;a[uf]=g.current;sf(8===a.nodeType?a.parentNode:a);Sk();return g}for(;e=a.lastChild;)a.removeChild(e);if("function"===typeof d){var h=d;d=function(){var a=hl(k);h.call(a)}}var k=cl(a,0,!1,null,null,!1,!1,"",ql);a._reactRootContainer=k;a[uf]=k.current;sf(8===a.nodeType?a.parentNode:a);Sk(function(){gl(b,k,c,d)});return k} +function sl(a,b,c,d,e){var f=c._reactRootContainer;if(f){var g=f;if("function"===typeof e){var h=e;e=function(){var a=hl(g);h.call(a)}}gl(b,g,a,e)}else g=rl(c,b,a,e,d);return hl(g)}Ec=function(a){switch(a.tag){case 3:var b=a.stateNode;if(b.current.memoizedState.isDehydrated){var c=tc(b.pendingLanes);0!==c&&(Cc(b,c|1),Ek(b,B()),0===(K&6)&&(Hj=B()+500,jg()))}break;case 13:Sk(function(){var b=Zg(a,1);if(null!==b){var c=L();mh(b,a,1,c)}}),jl(a,1)}}; +Fc=function(a){if(13===a.tag){var b=Zg(a,134217728);if(null!==b){var c=L();mh(b,a,134217728,c)}jl(a,134217728)}};Gc=function(a){if(13===a.tag){var b=lh(a),c=Zg(a,b);if(null!==c){var d=L();mh(c,a,b,d)}jl(a,b)}};Hc=function(){return C};Ic=function(a,b){var c=C;try{return C=a,b()}finally{C=c}}; +yb=function(a,b,c){switch(b){case "input":bb(a,c);b=c.name;if("radio"===c.type&&null!=b){for(c=a;c.parentNode;)c=c.parentNode;c=c.querySelectorAll("input[name="+JSON.stringify(""+b)+'][type="radio"]');for(b=0;b<c.length;b++){var d=c[b];if(d!==a&&d.form===a.form){var e=Db(d);if(!e)throw Error(p(90));Wa(d);bb(d,e)}}}break;case "textarea":ib(a,c);break;case "select":b=c.value,null!=b&&fb(a,!!c.multiple,b,!1)}};Gb=Rk;Hb=Sk; +var tl={usingClientEntryPoint:!1,Events:[Cb,ue,Db,Eb,Fb,Rk]},ul={findFiberByHostInstance:Wc,bundleType:0,version:"18.2.0",rendererPackageName:"react-dom"}; +var vl={bundleType:ul.bundleType,version:ul.version,rendererPackageName:ul.rendererPackageName,rendererConfig:ul.rendererConfig,overrideHookState:null,overrideHookStateDeletePath:null,overrideHookStateRenamePath:null,overrideProps:null,overridePropsDeletePath:null,overridePropsRenamePath:null,setErrorHandler:null,setSuspenseHandler:null,scheduleUpdate:null,currentDispatcherRef:ua.ReactCurrentDispatcher,findHostInstanceByFiber:function(a){a=Zb(a);return null===a?null:a.stateNode},findFiberByHostInstance:ul.findFiberByHostInstance|| +kl,findHostInstancesForRefresh:null,scheduleRefresh:null,scheduleRoot:null,setRefreshHandler:null,getCurrentFiber:null,reconcilerVersion:"18.2.0-next-9e3b772b8-20220608"};if("undefined"!==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__){var wl=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!wl.isDisabled&&wl.supportsFiber)try{kc=wl.inject(vl),lc=wl}catch(a){}}exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=tl; +exports.createPortal=function(a,b){var c=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;if(!ol(b))throw Error(p(200));return dl(a,b,null,c)};exports.createRoot=function(a,b){if(!ol(a))throw Error(p(299));var c=!1,d="",e=ll;null!==b&&void 0!==b&&(!0===b.unstable_strictMode&&(c=!0),void 0!==b.identifierPrefix&&(d=b.identifierPrefix),void 0!==b.onRecoverableError&&(e=b.onRecoverableError));b=cl(a,1,!1,null,null,c,!1,d,e);a[uf]=b.current;sf(8===a.nodeType?a.parentNode:a);return new ml(b)}; +exports.findDOMNode=function(a){if(null==a)return null;if(1===a.nodeType)return a;var b=a._reactInternals;if(void 0===b){if("function"===typeof a.render)throw Error(p(188));a=Object.keys(a).join(",");throw Error(p(268,a));}a=Zb(b);a=null===a?null:a.stateNode;return a};exports.flushSync=function(a){return Sk(a)};exports.hydrate=function(a,b,c){if(!pl(b))throw Error(p(200));return sl(null,a,b,!0,c)}; +exports.hydrateRoot=function(a,b,c){if(!ol(a))throw Error(p(405));var d=null!=c&&c.hydratedSources||null,e=!1,f="",g=ll;null!==c&&void 0!==c&&(!0===c.unstable_strictMode&&(e=!0),void 0!==c.identifierPrefix&&(f=c.identifierPrefix),void 0!==c.onRecoverableError&&(g=c.onRecoverableError));b=fl(b,null,a,1,null!=c?c:null,e,!1,f,g);a[uf]=b.current;sf(a);if(d)for(a=0;a<d.length;a++)c=d[a],e=c._getVersion,e=e(c._source),null==b.mutableSourceEagerHydrationData?b.mutableSourceEagerHydrationData=[c,e]:b.mutableSourceEagerHydrationData.push(c, +e);return new nl(b)};exports.render=function(a,b,c){if(!pl(b))throw Error(p(200));return sl(null,a,b,!1,c)};exports.unmountComponentAtNode=function(a){if(!pl(a))throw Error(p(40));return a._reactRootContainer?(Sk(function(){sl(null,null,a,!1,function(){a._reactRootContainer=null;a[uf]=null})}),!0):!1};exports.unstable_batchedUpdates=Rk; +exports.unstable_renderSubtreeIntoContainer=function(a,b,c,d){if(!pl(c))throw Error(p(200));if(null==a||void 0===a._reactInternals)throw Error(p(38));return sl(a,b,c,!1,d)};exports.version="18.2.0-next-9e3b772b8-20220608"; + + +/***/ }), + +/***/ 935: +/***/ ((module, __unused_webpack_exports, __webpack_require__) => { + + + +function checkDCE() { + /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ + if ( + typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined' || + typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE !== 'function' + ) { + return; + } + if (false) {} + try { + // Verify that the code above has been dead code eliminated (DCE'd). + __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(checkDCE); + } catch (err) { + // DevTools shouldn't crash React, no matter what. + // We should still report in case we break this code. + console.error(err); + } +} + +if (true) { + // DCE check should happen before ReactDOM bundle executes so that + // DevTools can report bad minification during injection. + checkDCE(); + module.exports = __webpack_require__(448); +} else {} + + +/***/ }), + +/***/ 408: +/***/ ((__unused_webpack_module, exports) => { + +/** + * @license React + * react.production.min.js + * + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +var l=Symbol.for("react.element"),n=Symbol.for("react.portal"),p=Symbol.for("react.fragment"),q=Symbol.for("react.strict_mode"),r=Symbol.for("react.profiler"),t=Symbol.for("react.provider"),u=Symbol.for("react.context"),v=Symbol.for("react.forward_ref"),w=Symbol.for("react.suspense"),x=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),z=Symbol.iterator;function A(a){if(null===a||"object"!==typeof a)return null;a=z&&a[z]||a["@@iterator"];return"function"===typeof a?a:null} +var B={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},C=Object.assign,D={};function E(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B}E.prototype.isReactComponent={}; +E.prototype.setState=function(a,b){if("object"!==typeof a&&"function"!==typeof a&&null!=a)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,a,b,"setState")};E.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,"forceUpdate")};function F(){}F.prototype=E.prototype;function G(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B}var H=G.prototype=new F; +H.constructor=G;C(H,E.prototype);H.isPureReactComponent=!0;var I=Array.isArray,J=Object.prototype.hasOwnProperty,K={current:null},L={key:!0,ref:!0,__self:!0,__source:!0}; +function M(a,b,e){var d,c={},k=null,h=null;if(null!=b)for(d in void 0!==b.ref&&(h=b.ref),void 0!==b.key&&(k=""+b.key),b)J.call(b,d)&&!L.hasOwnProperty(d)&&(c[d]=b[d]);var g=arguments.length-2;if(1===g)c.children=e;else if(1<g){for(var f=Array(g),m=0;m<g;m++)f[m]=arguments[m+2];c.children=f}if(a&&a.defaultProps)for(d in g=a.defaultProps,g)void 0===c[d]&&(c[d]=g[d]);return{$$typeof:l,type:a,key:k,ref:h,props:c,_owner:K.current}} +function N(a,b){return{$$typeof:l,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}function O(a){return"object"===typeof a&&null!==a&&a.$$typeof===l}function escape(a){var b={"=":"=0",":":"=2"};return"$"+a.replace(/[=:]/g,function(a){return b[a]})}var P=/\/+/g;function Q(a,b){return"object"===typeof a&&null!==a&&null!=a.key?escape(""+a.key):b.toString(36)} +function R(a,b,e,d,c){var k=typeof a;if("undefined"===k||"boolean"===k)a=null;var h=!1;if(null===a)h=!0;else switch(k){case "string":case "number":h=!0;break;case "object":switch(a.$$typeof){case l:case n:h=!0}}if(h)return h=a,c=c(h),a=""===d?"."+Q(h,0):d,I(c)?(e="",null!=a&&(e=a.replace(P,"$&/")+"/"),R(c,b,e,"",function(a){return a})):null!=c&&(O(c)&&(c=N(c,e+(!c.key||h&&h.key===c.key?"":(""+c.key).replace(P,"$&/")+"/")+a)),b.push(c)),1;h=0;d=""===d?".":d+":";if(I(a))for(var g=0;g<a.length;g++){k= +a[g];var f=d+Q(k,g);h+=R(k,b,e,f,c)}else if(f=A(a),"function"===typeof f)for(a=f.call(a),g=0;!(k=a.next()).done;)k=k.value,f=d+Q(k,g++),h+=R(k,b,e,f,c);else if("object"===k)throw b=String(a),Error("Objects are not valid as a React child (found: "+("[object Object]"===b?"object with keys {"+Object.keys(a).join(", ")+"}":b)+"). If you meant to render a collection of children, use an array instead.");return h} +function S(a,b,e){if(null==a)return a;var d=[],c=0;R(a,d,"","",function(a){return b.call(e,a,c++)});return d}function T(a){if(-1===a._status){var b=a._result;b=b();b.then(function(b){if(0===a._status||-1===a._status)a._status=1,a._result=b},function(b){if(0===a._status||-1===a._status)a._status=2,a._result=b});-1===a._status&&(a._status=0,a._result=b)}if(1===a._status)return a._result.default;throw a._result;} +var U={current:null},V={transition:null},W={ReactCurrentDispatcher:U,ReactCurrentBatchConfig:V,ReactCurrentOwner:K};exports.Children={map:S,forEach:function(a,b,e){S(a,function(){b.apply(this,arguments)},e)},count:function(a){var b=0;S(a,function(){b++});return b},toArray:function(a){return S(a,function(a){return a})||[]},only:function(a){if(!O(a))throw Error("React.Children.only expected to receive a single React element child.");return a}};exports.Component=E;exports.Fragment=p; +exports.Profiler=r;exports.PureComponent=G;exports.StrictMode=q;exports.Suspense=w;exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=W; +exports.cloneElement=function(a,b,e){if(null===a||void 0===a)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+a+".");var d=C({},a.props),c=a.key,k=a.ref,h=a._owner;if(null!=b){void 0!==b.ref&&(k=b.ref,h=K.current);void 0!==b.key&&(c=""+b.key);if(a.type&&a.type.defaultProps)var g=a.type.defaultProps;for(f in b)J.call(b,f)&&!L.hasOwnProperty(f)&&(d[f]=void 0===b[f]&&void 0!==g?g[f]:b[f])}var f=arguments.length-2;if(1===f)d.children=e;else if(1<f){g=Array(f); +for(var m=0;m<f;m++)g[m]=arguments[m+2];d.children=g}return{$$typeof:l,type:a.type,key:c,ref:k,props:d,_owner:h}};exports.createContext=function(a){a={$$typeof:u,_currentValue:a,_currentValue2:a,_threadCount:0,Provider:null,Consumer:null,_defaultValue:null,_globalName:null};a.Provider={$$typeof:t,_context:a};return a.Consumer=a};exports.createElement=M;exports.createFactory=function(a){var b=M.bind(null,a);b.type=a;return b};exports.createRef=function(){return{current:null}}; +exports.forwardRef=function(a){return{$$typeof:v,render:a}};exports.isValidElement=O;exports.lazy=function(a){return{$$typeof:y,_payload:{_status:-1,_result:a},_init:T}};exports.memo=function(a,b){return{$$typeof:x,type:a,compare:void 0===b?null:b}};exports.startTransition=function(a){var b=V.transition;V.transition={};try{a()}finally{V.transition=b}};exports.unstable_act=function(){throw Error("act(...) is not supported in production builds of React.");}; +exports.useCallback=function(a,b){return U.current.useCallback(a,b)};exports.useContext=function(a){return U.current.useContext(a)};exports.useDebugValue=function(){};exports.useDeferredValue=function(a){return U.current.useDeferredValue(a)};exports.useEffect=function(a,b){return U.current.useEffect(a,b)};exports.useId=function(){return U.current.useId()};exports.useImperativeHandle=function(a,b,e){return U.current.useImperativeHandle(a,b,e)}; +exports.useInsertionEffect=function(a,b){return U.current.useInsertionEffect(a,b)};exports.useLayoutEffect=function(a,b){return U.current.useLayoutEffect(a,b)};exports.useMemo=function(a,b){return U.current.useMemo(a,b)};exports.useReducer=function(a,b,e){return U.current.useReducer(a,b,e)};exports.useRef=function(a){return U.current.useRef(a)};exports.useState=function(a){return U.current.useState(a)};exports.useSyncExternalStore=function(a,b,e){return U.current.useSyncExternalStore(a,b,e)}; +exports.useTransition=function(){return U.current.useTransition()};exports.version="18.2.0"; + + +/***/ }), + +/***/ 294: +/***/ ((module, __unused_webpack_exports, __webpack_require__) => { + + + +if (true) { + module.exports = __webpack_require__(408); +} else {} + + +/***/ }), + +/***/ 53: +/***/ ((__unused_webpack_module, exports) => { + +/** + * @license React + * scheduler.production.min.js + * + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +function f(a,b){var c=a.length;a.push(b);a:for(;0<c;){var d=c-1>>>1,e=a[d];if(0<g(e,b))a[d]=b,a[c]=e,c=d;else break a}}function h(a){return 0===a.length?null:a[0]}function k(a){if(0===a.length)return null;var b=a[0],c=a.pop();if(c!==b){a[0]=c;a:for(var d=0,e=a.length,w=e>>>1;d<w;){var m=2*(d+1)-1,C=a[m],n=m+1,x=a[n];if(0>g(C,c))n<e&&0>g(x,C)?(a[d]=x,a[n]=c,d=n):(a[d]=C,a[m]=c,d=m);else if(n<e&&0>g(x,c))a[d]=x,a[n]=c,d=n;else break a}}return b} +function g(a,b){var c=a.sortIndex-b.sortIndex;return 0!==c?c:a.id-b.id}if("object"===typeof performance&&"function"===typeof performance.now){var l=performance;exports.unstable_now=function(){return l.now()}}else{var p=Date,q=p.now();exports.unstable_now=function(){return p.now()-q}}var r=[],t=[],u=1,v=null,y=3,z=!1,A=!1,B=!1,D="function"===typeof setTimeout?setTimeout:null,E="function"===typeof clearTimeout?clearTimeout:null,F="undefined"!==typeof setImmediate?setImmediate:null; +"undefined"!==typeof navigator&&void 0!==navigator.scheduling&&void 0!==navigator.scheduling.isInputPending&&navigator.scheduling.isInputPending.bind(navigator.scheduling);function G(a){for(var b=h(t);null!==b;){if(null===b.callback)k(t);else if(b.startTime<=a)k(t),b.sortIndex=b.expirationTime,f(r,b);else break;b=h(t)}}function H(a){B=!1;G(a);if(!A)if(null!==h(r))A=!0,I(J);else{var b=h(t);null!==b&&K(H,b.startTime-a)}} +function J(a,b){A=!1;B&&(B=!1,E(L),L=-1);z=!0;var c=y;try{G(b);for(v=h(r);null!==v&&(!(v.expirationTime>b)||a&&!M());){var d=v.callback;if("function"===typeof d){v.callback=null;y=v.priorityLevel;var e=d(v.expirationTime<=b);b=exports.unstable_now();"function"===typeof e?v.callback=e:v===h(r)&&k(r);G(b)}else k(r);v=h(r)}if(null!==v)var w=!0;else{var m=h(t);null!==m&&K(H,m.startTime-b);w=!1}return w}finally{v=null,y=c,z=!1}}var N=!1,O=null,L=-1,P=5,Q=-1; +function M(){return exports.unstable_now()-Q<P?!1:!0}function R(){if(null!==O){var a=exports.unstable_now();Q=a;var b=!0;try{b=O(!0,a)}finally{b?S():(N=!1,O=null)}}else N=!1}var S;if("function"===typeof F)S=function(){F(R)};else if("undefined"!==typeof MessageChannel){var T=new MessageChannel,U=T.port2;T.port1.onmessage=R;S=function(){U.postMessage(null)}}else S=function(){D(R,0)};function I(a){O=a;N||(N=!0,S())}function K(a,b){L=D(function(){a(exports.unstable_now())},b)} +exports.unstable_IdlePriority=5;exports.unstable_ImmediatePriority=1;exports.unstable_LowPriority=4;exports.unstable_NormalPriority=3;exports.unstable_Profiling=null;exports.unstable_UserBlockingPriority=2;exports.unstable_cancelCallback=function(a){a.callback=null};exports.unstable_continueExecution=function(){A||z||(A=!0,I(J))}; +exports.unstable_forceFrameRate=function(a){0>a||125<a?console.error("forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported"):P=0<a?Math.floor(1E3/a):5};exports.unstable_getCurrentPriorityLevel=function(){return y};exports.unstable_getFirstCallbackNode=function(){return h(r)};exports.unstable_next=function(a){switch(y){case 1:case 2:case 3:var b=3;break;default:b=y}var c=y;y=b;try{return a()}finally{y=c}};exports.unstable_pauseExecution=function(){}; +exports.unstable_requestPaint=function(){};exports.unstable_runWithPriority=function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=3}var c=y;y=a;try{return b()}finally{y=c}}; +exports.unstable_scheduleCallback=function(a,b,c){var d=exports.unstable_now();"object"===typeof c&&null!==c?(c=c.delay,c="number"===typeof c&&0<c?d+c:d):c=d;switch(a){case 1:var e=-1;break;case 2:e=250;break;case 5:e=1073741823;break;case 4:e=1E4;break;default:e=5E3}e=c+e;a={id:u++,callback:b,priorityLevel:a,startTime:c,expirationTime:e,sortIndex:-1};c>d?(a.sortIndex=c,f(t,a),null===h(r)&&a===h(t)&&(B?(E(L),L=-1):B=!0,K(H,c-d))):(a.sortIndex=e,f(r,a),A||z||(A=!0,I(J)));return a}; +exports.unstable_shouldYield=M;exports.unstable_wrapCallback=function(a){var b=y;return function(){var c=y;y=b;try{return a.apply(this,arguments)}finally{y=c}}}; + + +/***/ }), + +/***/ 840: +/***/ ((module, __unused_webpack_exports, __webpack_require__) => { + + + +if (true) { + module.exports = __webpack_require__(53); +} else {} + + +/***/ }) + +}]);
\ No newline at end of file diff --git a/browser/components/pocket/content/panels/js/vendor.bundle.js.LICENSE.txt b/browser/components/pocket/content/panels/js/vendor.bundle.js.LICENSE.txt new file mode 100644 index 0000000000..d5075bd9ca --- /dev/null +++ b/browser/components/pocket/content/panels/js/vendor.bundle.js.LICENSE.txt @@ -0,0 +1,32 @@ +/* +object-assign +(c) Sindre Sorhus +@license MIT +*/ + +/** @license React v0.20.2 + * scheduler.production.min.js + * + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +/** @license React v17.0.2 + * react-dom.production.min.js + * + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +/** @license React v17.0.2 + * react.production.min.js + * + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ diff --git a/browser/components/pocket/content/panels/license.txt b/browser/components/pocket/content/panels/license.txt new file mode 100644 index 0000000000..7f3f806bab --- /dev/null +++ b/browser/components/pocket/content/panels/license.txt @@ -0,0 +1,35 @@ +
+Unless where otherwise noted, the following license applies to the files
+within this directory and descendents of this directory.
+
+POCKET MARKS
+
+Notwithstanding the permitted uses of the Software (as defined below) pursuant
+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
+rights to use the Pocket Marks except as they are embodied in the Software.
+
+---
+
+SOFTWARE
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/browser/components/pocket/content/panels/saved.html b/browser/components/pocket/content/panels/saved.html new file mode 100644 index 0000000000..16cdb5e5cf --- /dev/null +++ b/browser/components/pocket/content/panels/saved.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta http-equiv="Content-Security-Policy" content="default-src chrome:; img-src https://img-getpocket.cdn.mozilla.net; object-src 'none'" /> + <base href="chrome://pocket/content/panels/"> + <link rel="localization" href="browser/branding/brandings.ftl" /> + <link rel="localization" href="browser/aboutPocket.ftl" /> + <title>Pocket: Page Saved</title> + <link rel="stylesheet" href="css/main.compiled.css"> + </head> + <body class="stp_saved_body" aria-live="polite"> + <script src="js/vendor.bundle.js"></script> + <script src="js/main.bundle.js"></script> + <script src="js/saved/entry.js"></script> + </body> +</html> diff --git a/browser/components/pocket/content/panels/signup.html b/browser/components/pocket/content/panels/signup.html new file mode 100644 index 0000000000..d4eaef873a --- /dev/null +++ b/browser/components/pocket/content/panels/signup.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta http-equiv="Content-Security-Policy" content="default-src chrome:; object-src 'none'" /> + <base href="chrome://pocket/content/panels/"> + <link rel="localization" href="branding/brand.ftl"/> + <link rel="localization" href="browser/branding/brandings.ftl" /> + <link rel="localization" href="browser/aboutPocket.ftl" /> + <title>Pocket: Sign Up</title> + <link rel="stylesheet" href="css/main.compiled.css"> + </head> + <body class="stp_signup_body" aria-live="polite"> + <script src="js/vendor.bundle.js"></script> + <script src="js/main.bundle.js"></script> + <script src="js/signup/entry.js"></script> + </body> +</html> diff --git a/browser/components/pocket/content/panels/style-guide.html b/browser/components/pocket/content/panels/style-guide.html new file mode 100644 index 0000000000..ccb2329ad1 --- /dev/null +++ b/browser/components/pocket/content/panels/style-guide.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta http-equiv="Content-Security-Policy" content="default-src chrome:; object-src 'none'; img-src https://img-getpocket.cdn.mozilla.net;" /> + <base href="chrome://pocket/content/panels/"> + <link rel="localization" href="browser/branding/brandings.ftl" /> + <link rel="localization" href="browser/aboutPocket.ftl" /> + <title>Pocket: Style Guide</title> + <link rel="stylesheet" href="css/main.compiled.css"> + </head> + <body> + <script src="js/vendor.bundle.js"></script> + <script src="js/main.bundle.js"></script> + <script src="js/style-guide/entry.js"></script> + + <div id="stp_style_guide"> + <div id="dark_mode_toggle"> + <form autocomplete="off"> + <label for="dark_mode_checkbox"><strong>Dark Mode: </strong></label> + <input id="dark_mode_checkbox" type="checkbox"/> + </form> + </div> + <h1>Save To Pocket:<br/> Style Guide</h1> + <div id="stp_style_guide_components"></div> + </div> + </body> +</html> diff --git a/browser/components/pocket/content/pktApi.jsm b/browser/components/pocket/content/pktApi.jsm new file mode 100644 index 0000000000..7ef1c92547 --- /dev/null +++ b/browser/components/pocket/content/pktApi.jsm @@ -0,0 +1,794 @@ +/* + * LICENSE + * + * POCKET MARKS + * + * Notwithstanding the permitted uses of the Software (as defined below) pursuant 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 rights to use the Pocket Marks except as they are embodied in the Software. + * + * --- + * + * SOFTWARE + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + */ + +/* + * Pocket API module + * + * Public API Documentation: http://getpocket.com/developer/ + * + * + * Definition of keys stored in preferences to preserve user state: + * premium_status: Current premium status for logged in user if available + * Can be 0 for no premium and 1 for premium + * latestSince: Last timestamp a save happened + * tags: All tags for logged in user + * usedTags: All used tags from within the extension sorted by recency + */ + +var EXPORTED_SYMBOLS = ["pktApi"]; + +const { XPCOMUtils } = ChromeUtils.importESModule( + "resource://gre/modules/XPCOMUtils.sys.mjs" +); +const lazy = {}; +ChromeUtils.defineESModuleGetters(lazy, { + IndexedDB: "resource://gre/modules/IndexedDB.sys.mjs", + PrivateBrowsingUtils: "resource://gre/modules/PrivateBrowsingUtils.sys.mjs", +}); + +XPCOMUtils.defineLazyPreferenceGetter( + lazy, + "gCookieFirstPartyIsolate", + "privacy.firstparty.isolate", + false +); + +const DB_NAME = "SaveToPocket"; +const STORE_NAME = "pktAPI"; +const DB_VERSION = 1; +const RECENT_SAVES_UPDATE_TIME = 5 * 60 * 1000; // 30 minutes + +/** + * Create a new connection to the database. + */ +function openDatabase() { + return lazy.IndexedDB.open(DB_NAME, DB_VERSION, db => { + db.createObjectStore(STORE_NAME); + }); +} + +/** + * Cache the database connection so that it is shared among multiple operations. + */ +let databasePromise; +function getDatabase() { + if (!databasePromise) { + databasePromise = openDatabase(); + } + return databasePromise; +} + +var pktApi = (function() { + /** + * Configuration + */ + + // Base url for all api calls + var pocketAPIhost = Services.prefs.getCharPref("extensions.pocket.api"); // api.getpocket.com + var pocketSiteHost = Services.prefs.getCharPref("extensions.pocket.site"); // getpocket.com + var baseAPIUrl = "https://" + pocketAPIhost + "/v3"; + + /** + * Auth keys for the API requests + */ + var oAuthConsumerKey = Services.prefs.getCharPref( + "extensions.pocket.oAuthConsumerKey" + ); + + /** + * + */ + var prefBranch = Services.prefs.getBranch("extensions.pocket.settings."); + + /** + * Helper + */ + + var extend = function(out) { + out = out || {}; + + for (var i = 1; i < arguments.length; i++) { + if (!arguments[i]) { + continue; + } + + for (var key in arguments[i]) { + if (arguments[i].hasOwnProperty(key)) { + out[key] = arguments[i][key]; + } + } + } + return out; + }; + + var parseJSON = function(jsonString) { + try { + var o = JSON.parse(jsonString); + + // Handle non-exception-throwing cases: + // Neither JSON.parse(false) or JSON.parse(1234) throw errors, hence the type-checking, + // but... JSON.parse(null) returns 'null', and typeof null === "object", + // so we must check for that, too. + if (o && typeof o === "object" && o !== null) { + return o; + } + } catch (e) {} + + return undefined; + }; + + /** + * Settings + */ + + /** + * Wrapper for different plattforms to get settings for a given key + * @param {string} key A string containing the name of the key you want to + * retrieve the value of + * @return {string} String containing the value of the key. If the key + * does not exist, null is returned + */ + function getSetting(key) { + // TODO : Move this to sqlite or a local file so it's not editable (and is safer) + // https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions/XUL_School/Local_Storage + + if (!prefBranch.prefHasUserValue(key)) { + return undefined; + } + + return prefBranch.getStringPref(key); + } + + /** + * Wrapper for different plattforms to set a value for a given key in settings + * @param {string} key A string containing the name of the key you want + * to create/update. + * @param {string} value String containing the value you want to give + * the key you are creating/updating. + */ + function setSetting(key, value) { + // TODO : Move this to sqlite or a local file so it's not editable (and is safer) + // https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions/XUL_School/Local_Storage + + if (!value) { + prefBranch.clearUserPref(key); + } else { + // We use complexValue as tags can have utf-8 characters in them + prefBranch.setStringPref(key, value); + } + } + + /** + * Auth + */ + + /* + * All cookies from the Pocket domain + * The return format: { cookieName:cookieValue, cookieName:cookieValue, ... } + */ + function getCookiesFromPocket() { + var cookies = {}; + let oa = {}; + if (lazy.gCookieFirstPartyIsolate) { + oa.firstPartyDomain = pocketSiteHost; + } + oa.privateBrowsingId = lazy.PrivateBrowsingUtils.permanentPrivateBrowsing + ? 1 + : 0; + for (let cookie of Services.cookies.getCookiesFromHost( + pocketSiteHost, + oa + )) { + if (cookie.host === pocketSiteHost) { + cookies[cookie.name] = cookie.value; + } + } + return cookies; + } + + /** + * Returns access token or undefined if no logged in user was found + * @return {string | undefined} Access token for logged in user user + */ + function getAccessToken() { + var pocketCookies = getCookiesFromPocket(); + + // If no cookie was found just return undefined + if (typeof pocketCookies.ftv1 === "undefined") { + return undefined; + } + + // Check if a new user logged in in the meantime and clearUserData if so + var sessionId = pocketCookies.fsv1; + var lastSessionId = getSetting("fsv1"); + if (sessionId !== lastSessionId) { + clearUserData(); + setSetting("fsv1", sessionId); + } + + // Return access token + return pocketCookies.ftv1; + } + + /** + * Get the current premium status of the user + * @return {number | undefined} Premium status of user + */ + function getPremiumStatus() { + var premiumStatus = getSetting("premium_status"); + if (typeof premiumStatus === "undefined") { + // Premium status is not in settings try get it from cookie + var pocketCookies = getCookiesFromPocket(); + premiumStatus = pocketCookies.ps; + } + return premiumStatus; + } + + /** + * Helper method to check if a user is premium or not + * @return {Boolean} Boolean if user is premium or not + */ + function isPremiumUser() { + return getPremiumStatus() == 1; + } + + /** + * Returns users logged in status + * @return {Boolean} Users logged in status + */ + function isUserLoggedIn() { + return typeof getAccessToken() !== "undefined"; + } + + /** + * API + */ + + /** + * Helper function for executing api requests. It mainly configures the + * ajax call with default values like type, headers or dataType for an api call. + * This function is for internal usage only. + * @param {Object} options + * Possible keys: + * - {string} path: This should be the Pocket API + * endpoint to call. For example providing the path + * "/get" would result in a call to getpocket.com/v3/get + * - {Object|undefined} data: Gets passed on to the jQuery ajax + * call as data parameter + * - {function(Object data, XMLHttpRequest xhr) | undefined} success: + * A function to be called if the request succeeds. + * - {function(Error errorThrown, XMLHttpRequest xhr) | undefined} error: + * A function to be called if the request fails. + * @return {Boolean} Returns Boolean whether the api call started sucessfully + * + */ + function apiRequest(options) { + if (typeof options === "undefined" || typeof options.path === "undefined") { + return false; + } + + var url = baseAPIUrl + options.path; + var data = options.data || {}; + data.locale_lang = Services.locale.appLocaleAsBCP47; + data.consumer_key = oAuthConsumerKey; + + var request = new XMLHttpRequest(); + request.open("POST", url, true); + request.onreadystatechange = function(e) { + if (request.readyState == 4) { + // "done" is a completed XHR regardless of success/error: + if (options.done) { + options.done(); + } + + if (request.status === 200) { + // There could still be an error if the response is no valid json + // or does not have status = 1 + var response = parseJSON(request.response); + if (options.success && response && response.status == 1) { + options.success(response, request); + return; + } + } + + // Handle error case + 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(); + } + + // Handle error message + var errorMessage; + if (request.status !== 200) { + errorMessage = + request.getResponseHeader("X-Error") || request.statusText; + errorMessage = JSON.parse('"' + errorMessage + '"'); + } + var error = { message: errorMessage }; + options.error(error, request); + } + } + }; + + // Set headers + request.setRequestHeader( + "Content-Type", + "application/x-www-form-urlencoded; charset=UTF-8" + ); + request.setRequestHeader("X-Accept", " application/json"); + + // Serialize and Fire off the request + var str = []; + for (var p in data) { + if (data.hasOwnProperty(p)) { + str.push(encodeURIComponent(p) + "=" + encodeURIComponent(data[p])); + } + } + + request.send(str.join("&")); + + return true; + } + + /** + * Cleans all settings for the previously logged in user + */ + function clearUserData() { + // Clear stored information + setSetting("premium_status", undefined); + setSetting("latestSince", undefined); + setSetting("tags", undefined); + // An old pref that is no longer used, + // but the user data may still exist on some profiles. + // So best to clean it up just in case. + // Can probably remove this line in the future. + setSetting("usedTags", undefined); + + setSetting("fsv1", undefined); + + _clearRecentSavesCache(); + } + + /** + * Add a new link to Pocket + * @param {string} url URL of the link + * @param {Object | undefined} options Can provide a string-based title, a + * `success` callback and an `error` callback. + * @return {Boolean} Returns Boolean whether the api call started sucessfully + */ + function addLink(url, options) { + var since = getSetting("latestSince"); + var accessToken = getAccessToken(); + + var sendData = { + access_token: accessToken, + url, + since: since ? since : 0, + }; + + if (options.title) { + sendData.title = options.title; + } + + return apiRequest({ + path: "/firefox/save", + data: sendData, + success(data) { + // Update premium status, tags and since + var tags = data.tags; + if (typeof tags !== "undefined" && Array.isArray(tags)) { + // If a tagslist is in the response replace the tags + setSetting("tags", JSON.stringify(data.tags)); + } + + // Update premium status + var premiumStatus = data.premium_status; + if (typeof premiumStatus !== "undefined") { + // If a premium_status is in the response replace the premium_status + setSetting("premium_status", premiumStatus); + } + + // Save since value for further requests + setSetting("latestSince", data.since); + + // Define variant for ho2 + if (data.flags) { + var showHo2 = + Services.locale.appLocaleAsBCP47 === "en-US" + ? data.flags.show_ffx_mobile_prompt + : "control"; + setSetting("test.ho2", showHo2); + } + data.ho2 = getSetting("test.ho2"); + + _expireRecentSavesCache(); + if (options.success) { + options.success.apply(options, Array.apply(null, arguments)); + } + }, + error: options.error, + }); + } + + /** + * Gets a list of related recommendations for the item + * @param {string} itemId Item id of item + * @param {Object | undefined} options Can provide a string-based title, a + * `success` callback and an `error` callback. + * @return {Boolean} Returns Boolean whether the api call started sucessfully + */ + function getRecsForItem(itemId, options) { + return apiRequest({ + path: "/discover/recIt", + data: { + item_id: itemId, + module: "ff_plugin", + count: 3, + }, + success(data) { + if (options.success) { + options.success.apply(options, Array.apply(null, arguments)); + } + }, + error: options.error, + }); + } + + /** + * Get a preview for saved URL + * @param {string} url URL of the link + * @param {Object | undefined} options Can provide a `success` callback and an `error` callback. + * @return {Boolean} Returns Boolean whether the api call started sucessfully + */ + function getArticleInfo(url, options) { + return apiRequest({ + path: "/getItemPreview", + data: { + access_token: getAccessToken(), + url, + }, + success(data) { + if (options.success) { + options.success.apply(options, Array.apply(null, arguments)); + } + }, + error: options.error, + done: options.done, + }); + } + + /** + * Request a email for mobile apps + * @param {Object | undefined} options Can provide a `success` callback and an `error` callback. + * @return {Boolean} Returns Boolean whether the api call started sucessfully + */ + function getMobileDownload(options) { + return apiRequest({ + path: "/firefox/get-app", + data: { + access_token: getAccessToken(), + }, + success(data) { + if (options.success) { + options.success.apply(options, Array.apply(null, arguments)); + } + }, + error: options.error, + }); + } + + /** + * Delete an item identified by item id from the users list + * @param {string} itemId The id from the item we want to remove + * @param {Object | undefined} options Can provide an actionInfo object with + * further data to send to the API. Can + * have success and error callbacks + * @return {Boolean} Returns Boolean whether the api call started sucessfully + */ + function deleteItem(itemId, options) { + var action = { + action: "delete", + item_id: itemId, + }; + return sendAction(action, options); + } + + /** + * Archive an item identified by item id from the users list + * @param {string} itemId The id from the item we want to archive + * @param {Object | undefined} options Can provide an actionInfo object with + * further data to send to the API. Can + * have success and error callbacks + * @return {Boolean} Returns Boolean whether the api call started sucessfully + */ + function archiveItem(itemId, options) { + var action = { + action: "archive", + item_id: itemId, + }; + return sendAction(action, options); + } + + /** + * General function to send all kinds of actions like adding of links or + * removing of items via the API + * @param {Object} action Action object + * @param {Object | undefined} options Can provide an actionInfo object + * with further data to send to the + * API. Can have success and error + * callbacks + * @return {Boolean} Returns Boolean whether the api call started sucessfully + */ + function sendAction(action, options) { + // Options can have an 'actionInfo' object. This actionInfo object gets + // passed through to the action object that will be send to the API endpoint + if (typeof options.actionInfo !== "undefined") { + action = extend(action, options.actionInfo); + } + return sendActions([action], options); + } + + /** + * General function to send all kinds of actions like adding of links or + * removing of items via the API + * @param {Array} actions Array of action objects + * @param {Object | undefined} options Can have success and error callbacks + * @return {Boolean} Returns Boolean whether the api call started sucessfully + */ + function sendActions(actions, options) { + return apiRequest({ + path: "/send", + data: { + access_token: getAccessToken(), + actions: JSON.stringify(actions), + }, + success: options.success, + error: options.error, + }); + } + + /** + * Handling Tags + */ + + /** + * Add tags to the item identified by the url. Also updates the used tags + * list + * @param {string} itemId The item identifier by item id + * @param {Array} tags Tags adding to the item + * @param {Object | undefined} options Can provide an actionInfo object with + * further data to send to the API. Can + * have success and error callbacks + * @return {Boolean} Returns Boolean whether the api call started sucessfully + */ + function addTagsToItem(itemId, tags, options) { + return addTags({ item_id: itemId }, tags, options); + } + + /** + * Add tags to the item identified by the url. Also updates the used tags + * list + * @param {string} url The item identifier by url + * @param {Array} tags Tags adding to the item + * @param {Object} options Can provide an actionInfo object with further + * data to send to the API. Can have success and error + * callbacks + * @return {Boolean} Returns Boolean whether the api call started sucessfully + */ + function addTagsToURL(url, tags, options) { + return addTags({ url }, tags, options); + } + + /** + * Helper function to execute the add tags api call. Will be used from addTagsToURL + * and addTagsToItem but not exposed outside + * @param {string} actionPart Specific action part to add to action + * @param {Array} tags Tags adding to the item + * @param {Object | undefined} options Can provide an actionInfo object with + * further data to send to the API. Can + * have success and error callbacks + * @return {Boolean} Returns Boolean whether the api call started sucessfully + */ + function addTags(actionPart, tags, options) { + // Tags add action + var action = { + action: "tags_add", + tags, + }; + action = extend(action, actionPart); + + // Execute the action + return sendAction(action, options); + } + + /** + * Return all cached tags and used tags. + */ + function getTags() { + var tagsFromSettings = function() { + var tagsJSON = getSetting("tags"); + if (typeof tagsJSON !== "undefined") { + return JSON.parse(tagsJSON); + } + return []; + }; + + return { + tags: tagsFromSettings(), + }; + } + + /** + * Fetch suggested tags for a given item id + * @param {string} itemId Item id of + * @param {Object | undefined} options Can provide an actionInfo object + * with further data to send to the API. + * Can have success and error callbacks + * @return {Boolean} Returns Boolean whether the api call started sucessfully + */ + function getSuggestedTagsForItem(itemId, options) { + return getSuggestedTags({ item_id: itemId }, options); + } + + /** + * Fetch suggested tags for a given URL + * @param {string} url (required) The item identifier by url + * @param {Object} options Can provide an actionInfo object with further + * data to send to the API. Can have success and error + * callbacks + * @return {Boolean} Returns Boolean whether the api call started sucessfully + */ + function getSuggestedTagsForURL(url, options) { + return getSuggestedTags({ url }, options); + } + + /** + * Helper function to get suggested tags + * @return {Boolean} Returns Boolean whether the api call started sucessfully + */ + function getSuggestedTags(data, options) { + data = data || {}; + options = options || {}; + + data.access_token = getAccessToken(); + + return apiRequest({ + path: "/getSuggestedTags", + data, + success: options.success, + error: options.error, + }); + } + + /** + * Helper function to get a user's pocket stories + * @return {Boolean} Returns Boolean whether the api call started sucessfully + */ + function retrieve(data = {}, options = {}) { + const requestData = Object.assign({}, data, { + access_token: getAccessToken(), + }); + return apiRequest({ + path: "/firefox/get", + data: requestData, + success: options.success, + error: options.error, + }); + } + + async function _getRecentSavesCache() { + const db = await getDatabase(); + return db.objectStore(STORE_NAME, "readonly").get("recentSaves"); + } + async function _setRecentSavesCache(data) { + const db = await getDatabase(); + db.objectStore(STORE_NAME, "readwrite").put(data, "recentSaves"); + } + // Clears the cache time, so the next get forces an update. + async function _expireRecentSavesCache() { + const cache = await _getRecentSavesCache(); + _setRecentSavesCache({ + ...cache, + lastUpdated: 0, + }); + } + // Clears the cache, for when a new user logs in. + async function _clearRecentSavesCache() { + const db = await getDatabase(); + db.objectStore(STORE_NAME, "readwrite").delete("recentSaves"); + } + + async function getRecentSavesCache() { + // Get cache + const cache = await _getRecentSavesCache(); + // Check age + if ( + cache?.lastUpdated && + Date.now() - cache.lastUpdated < RECENT_SAVES_UPDATE_TIME + ) { + // Return cache if it's not too old. + return cache.list; + } + return null; + } + + async function getRecentSaves(options = {}) { + pktApi.retrieve( + { count: 4 }, + { + success(data) { + // Cache results + const results = { + lastUpdated: Date.now(), + // We want these to show up in the same order as they saved, + // so we need to do some work and sort. + list: Object.values(data.list) + .map(item => ({ + ...item, + id: parseInt(item.item_id || item.resolved_id, 10), + time_added: parseInt(item.time_added), + })) + .sort((a, b) => b.time_added - a.time_added), + }; + _setRecentSavesCache(results); + options.success?.(results.list); + }, + error(error) { + options.error?.(error); + }, + } + ); + } + + /** + * Public functions + */ + return { + isUserLoggedIn, + clearUserData, + addLink, + getRecsForItem, + deleteItem, + archiveItem, + addTagsToItem, + addTagsToURL, + getTags, + isPremiumUser, + getSuggestedTagsForItem, + getSuggestedTagsForURL, + retrieve, + getRecentSavesCache, + getRecentSaves, + getArticleInfo, + getMobileDownload, + }; +})(); diff --git a/browser/components/pocket/content/pktTelemetry.jsm b/browser/components/pocket/content/pktTelemetry.jsm new file mode 100644 index 0000000000..1c14ff821e --- /dev/null +++ b/browser/components/pocket/content/pktTelemetry.jsm @@ -0,0 +1,125 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * 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/. */ + +"use strict"; + +var EXPORTED_SYMBOLS = ["pktTelemetry"]; + +const { XPCOMUtils } = ChromeUtils.importESModule( + "resource://gre/modules/XPCOMUtils.sys.mjs" +); +const lazy = {}; +ChromeUtils.defineModuleGetter( + lazy, + "PingCentre", + "resource:///modules/PingCentre.jsm" +); +ChromeUtils.defineModuleGetter( + lazy, + "pktApi", + "chrome://pocket/content/pktApi.jsm" +); +ChromeUtils.defineESModuleGetters(lazy, { + TelemetryEnvironment: "resource://gre/modules/TelemetryEnvironment.sys.mjs", +}); + +// List of namespaces for the structured ingestion system. +// They are defined in https://github.com/mozilla-services/mozilla-pipeline-schemas +const STRUCTURED_INGESTION_NAMESPACE_AS = "activity-stream"; +const STRUCTURED_INGESTION_ENDPOINT_PREF = + "browser.newtabpage.activity-stream.telemetry.structuredIngestion.endpoint"; +// This is the topic for telemetry pings, used inside PingCentre. +const POCKET_TELEMETRY_TOPIC = "pocket"; +const PREF_IMPRESSION_ID = "browser.newtabpage.activity-stream.impressionId"; + +XPCOMUtils.defineLazyGetter(lazy, "pingCentre", () => { + return new lazy.PingCentre({ topic: POCKET_TELEMETRY_TOPIC }); +}); + +var pktTelemetry = { + get structuredIngestionEndpointBase() { + if (!this._structuredIngestionEndpointBase) { + this._structuredIngestionEndpointBase = Services.prefs.getStringPref( + STRUCTURED_INGESTION_ENDPOINT_PREF, + "" + ); + } + return this._structuredIngestionEndpointBase; + }, + + get impressionId() { + if (!this._impressionId) { + this._impressionId = this.getOrCreateImpressionId(); + } + return this._impressionId; + }, + + // Sets or gets the impression id that's use for Pocket impressions. + // The impression id cannot be tied to a client id. + // This is the same impression id used in newtab pocket impressions. + getOrCreateImpressionId() { + let impressionId = Services.prefs.getStringPref(PREF_IMPRESSION_ID, ""); + + if (!impressionId) { + impressionId = String(Services.uuid.generateUUID()); + Services.prefs.setStringPref(PREF_IMPRESSION_ID, impressionId); + } + return impressionId; + }, + + /** + * createPingPayload - Create a ping for an impression stats + * + * @param {ob} data The data object to be included in the ping. + * @return {obj} A telemetry ping + */ + createPingPayload(data) { + // experiments, locale, version, and release_channel are provided by pingCentre. + // model and events is provided in the data param. + return { + ...data, + impression_id: this.impressionId, + pocket_logged_in_status: lazy.pktApi.isUserLoggedIn(), + profile_creation_date: this._profileCreationDate(), + }; + }, + + _profileCreationDate() { + return ( + lazy.TelemetryEnvironment.currentEnvironment.profile.resetDate || + lazy.TelemetryEnvironment.currentEnvironment.profile.creationDate + ); + }, + + _generateUUID() { + return String(Services.uuid.generateUUID()); + }, + + /** + * Generates an endpoint for Structured Ingestion telemetry pipeline. Note that + * Structured Ingestion requires a different endpoint for each ping. See more + * details about endpoint schema at: + * https://github.com/mozilla/gcp-ingestion/blob/master/docs/edge.md#postput-request + */ + _generateStructuredIngestionEndpoint() { + const uuid = this._generateUUID(); + // Structured Ingestion does not support the UUID generated by gUUIDGenerator, + // because it contains leading and trailing braces. Need to trim them first. + const docID = uuid.slice(1, -1); + const extension = `${STRUCTURED_INGESTION_NAMESPACE_AS}/pocket-button/1/${docID}`; + return `${this.structuredIngestionEndpointBase}/${extension}`; + }, + + /** + * sendStructuredIngestionEvent - Sent a ping for an impression stats + * + * @param {ob} eventObject The data object to be included in the ping. + */ + sendStructuredIngestionEvent(eventObject) { + lazy.pingCentre.sendStructuredIngestionPing( + eventObject, + this._generateStructuredIngestionEndpoint() + ); + }, +}; diff --git a/browser/components/pocket/content/pktUI.js b/browser/components/pocket/content/pktUI.js new file mode 100644 index 0000000000..d3299e26e0 --- /dev/null +++ b/browser/components/pocket/content/pktUI.js @@ -0,0 +1,691 @@ +/* + * LICENSE + * + * POCKET MARKS + * + * Notwithstanding the permitted uses of the Software (as defined below) pursuant 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 rights to use the Pocket Marks except as they are embodied in the Software. + * + * --- + * + * SOFTWARE + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + */ + +/* + * Pocket UI module + * + * Handles interactions with Pocket buttons, panels and menus. + * + */ + +// TODO : Get the toolbar icons from Firefox's build (Nikki needs to give us a red saved icon) +// TODO : [needs clarificaiton from Fx] Firefox's plan was to hide Pocket from context menus until the user logs in. Now that it's an extension I'm wondering if we still need to do this. +// TODO : [needs clarificaiton from Fx] Reader mode (might be a something they need to do since it's in html, need to investigate their code) +// TODO : [needs clarificaiton from Fx] Move prefs within pktApi.s to sqlite or a local file so it's not editable (and is safer) +// TODO : [nice to have] - Immediately save, buffer the actions in a local queue and send (so it works offline, works like our native extensions) + +/* eslint-disable no-shadow */ +/* eslint-env mozilla/browser-window */ + +ChromeUtils.defineESModuleGetters(this, { + PrivateBrowsingUtils: "resource://gre/modules/PrivateBrowsingUtils.sys.mjs", +}); +ChromeUtils.defineModuleGetter( + this, + "ReaderMode", + "resource://gre/modules/ReaderMode.jsm" +); +ChromeUtils.defineModuleGetter( + this, + "pktApi", + "chrome://pocket/content/pktApi.jsm" +); +ChromeUtils.defineModuleGetter( + this, + "SaveToPocket", + "chrome://pocket/content/SaveToPocket.jsm" +); +ChromeUtils.defineModuleGetter( + this, + "pktTelemetry", + "chrome://pocket/content/pktTelemetry.jsm" +); +ChromeUtils.defineModuleGetter( + this, + "ExperimentAPI", + "resource://nimbus/ExperimentAPI.jsm" +); +XPCOMUtils.defineLazyModuleGetters(this, { + NimbusFeatures: "resource://nimbus/ExperimentAPI.jsm", +}); + +const POCKET_ONSAVERECS_PREF = "extensions.pocket.onSaveRecs"; +const POCKET_ONSAVERECS_LOCLES_PREF = "extensions.pocket.onSaveRecs.locales"; +const POCKET_HOME_PREF = "extensions.pocket.showHome"; + +var pktUI = (function() { + let _titleToSave = ""; + let _urlToSave = ""; + + // Initial sizes are only here to help visual load jank before the panel is ready. + const initialPanelSize = { + signup: { + height: 315, + width: 328, + }, + saved: { + height: 110, + width: 350, + }, + home: { + height: 251, + width: 328, + }, + // This is for non English sizes, this is not for an AB experiment. + home_no_topics: { + height: 86, + width: 328, + }, + }; + + var onSaveRecsEnabledPref; + var onSaveRecsLocalesPref; + var pocketHomePref; + + function initPrefs() { + onSaveRecsEnabledPref = Services.prefs.getBoolPref( + POCKET_ONSAVERECS_PREF, + false + ); + onSaveRecsLocalesPref = Services.prefs.getStringPref( + POCKET_ONSAVERECS_LOCLES_PREF, + "" + ); + + pocketHomePref = Services.prefs.getBoolPref(POCKET_HOME_PREF); + } + initPrefs(); + + // -- Communication to API -- // + + /** + * Either save or attempt to log the user in + */ + function tryToSaveCurrentPage() { + tryToSaveUrl(getCurrentUrl(), getCurrentTitle()); + } + + function tryToSaveUrl(url, title) { + // Validate input parameter + if (typeof url !== "undefined" && url.startsWith("about:reader?url=")) { + url = ReaderMode.getOriginalUrl(url); + } + + // If the user is not logged in, show the logged-out state to prompt them to authenticate + if (!pktApi.isUserLoggedIn()) { + showSignUp(); + return; + } + + _titleToSave = title; + _urlToSave = url; + // If the user is logged in, and the url is valid, go ahead and save the current page + if (!pocketHomePref || isValidURL()) { + saveAndShowConfirmation(); + return; + } + showPocketHome(); + } + + // -- Panel UI -- // + + /** + * Show the sign-up panel + */ + function showSignUp() { + getFirefoxAccountSignedInUser(function(userdata) { + showPanel( + "about:pocket-signup?" + + "emailButton=" + + NimbusFeatures.saveToPocket.getVariable("emailButton"), + `signup` + ); + }); + } + + /** + * Get a list of recs for item and show them in the panel. + */ + function getAndShowRecsForItem(item, options) { + var onSaveRecsEnabled = + onSaveRecsEnabledPref && onSaveRecsLocalesPref.includes(getUILocale()); + + if ( + onSaveRecsEnabled && + item && + item.resolved_id && + item.resolved_id !== "0" + ) { + pktApi.getRecsForItem(item.resolved_id, options); + } + } + + /** + * Show the logged-out state / sign-up panel + */ + function saveAndShowConfirmation() { + getFirefoxAccountSignedInUser(function(userdata) { + showPanel( + "about:pocket-saved?premiumStatus=" + + (pktApi.isPremiumUser() ? "1" : "0") + + "&fxasignedin=" + + (typeof userdata == "object" && userdata !== null ? "1" : "0"), + `saved` + ); + }); + } + + /** + * Show the Pocket home panel state + */ + function showPocketHome() { + const hideRecentSaves = NimbusFeatures.saveToPocket.getVariable( + "hideRecentSaves" + ); + const locale = getUILocale(); + let panel = `home_no_topics`; + if (locale.startsWith("en-")) { + panel = `home`; + } + showPanel(`about:pocket-home?hiderecentsaves=${hideRecentSaves}`, panel); + } + + /** + * Open a generic panel + */ + function showPanel(urlString, panel) { + const locale = getUILocale(); + const options = initialPanelSize[panel]; + + resizePanel({ + width: options.width, + height: options.height, + }); + + const saveToPocketExperiment = ExperimentAPI.getExperimentMetaData({ + featureId: "saveToPocket", + }); + + const saveToPocketRollout = ExperimentAPI.getRolloutMetaData({ + featureId: "saveToPocket", + }); + + const pocketNewtabExperiment = ExperimentAPI.getExperimentMetaData({ + featureId: "pocketNewtab", + }); + + const pocketNewtabRollout = ExperimentAPI.getRolloutMetaData({ + featureId: "pocketNewtab", + }); + + // We want to know if the user is in a Pocket related experiment or rollout, + // but we have 2 Pocket related features, so we prioritize the saveToPocket feature, + // and experiments over rollouts. + const experimentMetaData = + saveToPocketExperiment || + pocketNewtabExperiment || + saveToPocketRollout || + pocketNewtabRollout; + + let utmSource = "firefox_pocket_save_button"; + let utmCampaign = experimentMetaData?.slug; + let utmContent = experimentMetaData?.branch?.slug; + + const url = new URL(urlString); + // A set of params shared across all panels. + url.searchParams.append("utmSource", utmSource); + if (utmCampaign && utmContent) { + url.searchParams.append("utmCampaign", utmCampaign); + url.searchParams.append("utmContent", utmContent); + } + url.searchParams.append("locale", locale); + + // We don't have to hide and show the panel again if it's already shown + // as if the user tries to click again on the toolbar button the overlay + // will close instead of the button will be clicked + var frame = getPanelFrame(); + + // Load the frame + frame.setAttribute("src", url.href); + } + + function onShowSignup() { + // Ensure opening the signup panel clears the icon state from any previous sessions. + SaveToPocket.itemDeleted(); + // A successful button click, for logged out users. + pktTelemetry.sendStructuredIngestionEvent( + pktTelemetry.createPingPayload({ + events: [ + { + action: "click", + source: "save_button", + }, + ], + }) + ); + } + + async function onShowHome() { + // A successful home button click. + pktTelemetry.sendStructuredIngestionEvent( + pktTelemetry.createPingPayload({ + events: [ + { + action: "click", + source: "home_button", + }, + ], + }) + ); + + if (!NimbusFeatures.saveToPocket.getVariable("hideRecentSaves")) { + let recentSaves = await pktApi.getRecentSavesCache(); + if (recentSaves) { + // We have cache, so we can use those. + pktUIMessaging.sendMessageToPanel("PKT_renderRecentSaves", recentSaves); + } else { + // Let the client know we're loading fresh recs. + pktUIMessaging.sendMessageToPanel( + "PKT_loadingRecentSaves", + recentSaves + ); + // We don't have cache, so fetch fresh stories. + pktApi.getRecentSaves({ + success(data) { + pktUIMessaging.sendMessageToPanel("PKT_renderRecentSaves", data); + }, + error(error) { + pktUIMessaging.sendErrorMessageToPanel( + "PKT_renderRecentSaves", + error + ); + }, + }); + } + } + } + + function onShowSaved() { + var saveLinkMessageId = "PKT_saveLink"; + + // Send error message for invalid url + if (!isValidURL()) { + let errorData = { + localizedKey: "pocket-panel-saved-error-only-links", + }; + pktUIMessaging.sendErrorMessageToPanel(saveLinkMessageId, errorData); + return; + } + + // Check online state + if (!navigator.onLine) { + let errorData = { + localizedKey: "pocket-panel-saved-error-no-internet", + }; + pktUIMessaging.sendErrorMessageToPanel(saveLinkMessageId, errorData); + return; + } + + // A successful button click, for logged in users. + pktTelemetry.sendStructuredIngestionEvent( + pktTelemetry.createPingPayload({ + events: [ + { + action: "click", + source: "save_button", + }, + ], + }) + ); + + // Add url + var options = { + success(data, request) { + var item = data.item; + var ho2 = data.ho2; + var accountState = data.account_state; + var displayName = data.display_name; + var successResponse = { + status: "success", + accountState, + displayName, + item, + ho2, + }; + pktUIMessaging.sendMessageToPanel(saveLinkMessageId, successResponse); + SaveToPocket.itemSaved(); + + if (!NimbusFeatures.saveToPocket.getVariable("hideRecentSaves")) { + // Articles saved for the first time (by anyone) won't have a resolved_id + if (item?.resolved_id && item?.resolved_id !== "0") { + pktApi.getArticleInfo(item.resolved_url, { + success(data) { + pktUIMessaging.sendMessageToPanel( + "PKT_articleInfoFetched", + data + ); + }, + done() { + pktUIMessaging.sendMessageToPanel( + "PKT_getArticleInfoAttempted" + ); + }, + }); + } else { + pktUIMessaging.sendMessageToPanel("PKT_getArticleInfoAttempted"); + } + } + + getAndShowRecsForItem(item, { + success(data) { + pktUIMessaging.sendMessageToPanel("PKT_renderItemRecs", data); + if (data?.recommendations?.[0]?.experiment) { + const payload = pktTelemetry.createPingPayload({ + // This is the ML model used to recommend the story. + // Right now this value is the same for all three items returned together, + // so we can just use the first item's value for all. + model: data.recommendations[0].experiment, + // Create an impression event for each item rendered. + events: data.recommendations.map((item, index) => ({ + action: "impression", + position: index, + source: "on_save_recs", + })), + }); + // Send view impression ping. + pktTelemetry.sendStructuredIngestionEvent(payload); + } + }, + }); + }, + error(error, request) { + // If user is not authorized show singup page + if (request.status === 401) { + showSignUp(); + return; + } + + // For unknown server errors, use a generic catch-all error message + let errorData = { + localizedKey: "pocket-panel-saved-error-generic", + }; + + // Send error message to panel + pktUIMessaging.sendErrorMessageToPanel(saveLinkMessageId, errorData); + }, + }; + + // Add title if given + if (typeof _titleToSave !== "undefined") { + options.title = _titleToSave; + } + + // Send the link + pktApi.addLink(_urlToSave, options); + } + + /** + * Resize the panel + * options = { + * width: , + * height: , + * } + */ + function resizePanel(options = {}) { + var frame = getPanelFrame(); + + // Set an explicit size, panel will adapt. + frame.style.width = options.width + "px"; + frame.style.height = options.height + "px"; + } + + // -- Browser Navigation -- // + + /** + * Open a new tab with a given url and notify the frame panel that it was opened + */ + + function openTabWithUrl(url, aTriggeringPrincipal, aCsp) { + let recentWindow = Services.wm.getMostRecentWindow("navigator:browser"); + if (!recentWindow) { + Cu.reportError("Pocket: No open browser windows to openTabWithUrl"); + return; + } + closePanel(); + + // If the user is in permanent private browsing than this is not an issue, + // since the current window will always share the same cookie jar as the other + // windows. + if ( + !PrivateBrowsingUtils.isWindowPrivate(recentWindow) || + PrivateBrowsingUtils.permanentPrivateBrowsing + ) { + recentWindow.openWebLinkIn(url, "tab", { + triggeringPrincipal: aTriggeringPrincipal, + csp: aCsp, + }); + return; + } + + for (let win of Services.wm.getEnumerator("navigator:browser")) { + if (!PrivateBrowsingUtils.isWindowPrivate(win)) { + win.openWebLinkIn(url, "tab", { + triggeringPrincipal: aTriggeringPrincipal, + csp: aCsp, + }); + return; + } + } + + // If there were no non-private windows opened already. + recentWindow.openWebLinkIn(url, "window", { + triggeringPrincipal: aTriggeringPrincipal, + csp: aCsp, + }); + } + + // Open a new tab with a given url + function onOpenTabWithUrl(data, contentPrincipal, csp) { + try { + urlSecurityCheck( + data.url, + contentPrincipal, + Services.scriptSecurityManager.DISALLOW_INHERIT_PRINCIPAL + ); + } catch (ex) { + return; + } + + // We don't track every click, only clicks with a known source. + if (data.source) { + const { position, source, model } = data; + const payload = pktTelemetry.createPingPayload({ + ...(model ? { model } : {}), + events: [ + { + action: "click", + source, + // Add in position if needed, for example, topic links have a position. + ...(position || position === 0 ? { position } : {}), + }, + ], + }); + // Send click event ping. + pktTelemetry.sendStructuredIngestionEvent(payload); + } + + var url = data.url; + openTabWithUrl(url, contentPrincipal, csp); + } + + // Open a new tab with a Pocket story url + function onOpenTabWithPocketUrl(data, contentPrincipal, csp) { + try { + urlSecurityCheck( + data.url, + contentPrincipal, + Services.scriptSecurityManager.DISALLOW_INHERIT_PRINCIPAL + ); + } catch (ex) { + return; + } + + const { url, position, model } = data; + // Check to see if we need to and can fire valid telemetry. + if (model && (position || position === 0)) { + const payload = pktTelemetry.createPingPayload({ + model, + events: [ + { + action: "click", + position, + source: "on_save_recs", + }, + ], + }); + // Send click event ping. + pktTelemetry.sendStructuredIngestionEvent(payload); + } + + openTabWithUrl(url, contentPrincipal, csp); + } + + // -- Helper Functions -- // + + function getCurrentUrl() { + return gBrowser.currentURI.spec; + } + + function getCurrentTitle() { + return gBrowser.contentTitle; + } + + function closePanel() { + // The panel frame doesn't exist until the Pocket panel is showing. + // So we ensure it is open before attempting to hide it. + getPanelFrame() + ?.closest("panel") + ?.hidePopup(); + } + + var toolbarPanelFrame; + + function setToolbarPanelFrame(frame) { + toolbarPanelFrame = frame; + } + + function getPanelFrame() { + return toolbarPanelFrame; + } + + function isValidURL() { + return ( + typeof _urlToSave !== "undefined" && + (_urlToSave.startsWith("http") || _urlToSave.startsWith("https")) + ); + } + + function getFirefoxAccountSignedInUser(callback) { + fxAccounts + .getSignedInUser() + .then(userData => { + callback(userData); + }) + .then(null, error => { + callback(); + }); + } + + function getUILocale() { + return Services.locale.appLocaleAsBCP47; + } + + /** + * Public functions + */ + return { + setToolbarPanelFrame, + getPanelFrame, + initPrefs, + showPanel, + getUILocale, + + openTabWithUrl, + onOpenTabWithUrl, + onOpenTabWithPocketUrl, + onShowSaved, + onShowSignup, + onShowHome, + + getAndShowRecsForItem, + tryToSaveUrl, + tryToSaveCurrentPage, + resizePanel, + closePanel, + }; +})(); + +// -- Communication to Background -- // +var pktUIMessaging = (function() { + /** + * Send a message to the panel's frame + */ + function sendMessageToPanel(messageId, payload) { + var panelFrame = pktUI.getPanelFrame(); + if (!panelFrame) { + console.warn("Pocket panel frame is undefined"); + return; + } + + const aboutPocketActor = panelFrame?.browsingContext?.currentWindowGlobal?.getActor( + "AboutPocket" + ); + + // Send message to panel + aboutPocketActor?.sendAsyncMessage(messageId, payload); + } + + /** + * Helper function to package an error object and send it to the panel + * frame as a message response + */ + function sendErrorMessageToPanel(messageId, error) { + var errorResponse = { status: "error", error }; + sendMessageToPanel(messageId, errorResponse); + } + + /** + * Public + */ + return { + sendMessageToPanel, + sendErrorMessageToPanel, + }; +})(); |
