gecko-dev/browser/components/pocket
Sandor Molnar 920cabc74a Revert "Bug 1968146 - Remove Pocket globals r=kpatenio,rking" for causing bc failures.
This reverts commit cd77c51e5c0972ff73a0775c95790317e393638b.

Revert "Bug 1967559 - clean up pocket in context menu r=fchasen,rking"

This reverts commit 423574737db4eb9d3ba251188d229a7ae83a467b.

Revert "Bug 1967558 - Remove Pocket icon button in Reader Mode r=kpatenio,rking"

This reverts commit 60fba1fa40f5a8f4094d0e5273ec6087d628b4dd.

Revert "Bug 1968123 - Remove Pocket actors r=frontend-codestyle-reviewers,kpatenio,rking"

This reverts commit b84d3ac2f956e278ca31efaec7c892edddcba33f.

Revert "Bug 1967557 - Remove Pocket icon button in the toolbar - r=fchasen,fluent-reviewers,desktop-theme-reviewers,omc-reviewers,emilio,flod,mimi"

This reverts commit 58ecec91bae638d3ccb47efcd4aa9a78f54aad1a.

Revert "Bug 1967788 - Remove Pocket component tests - r=fchasen"

This reverts commit d9b111ac1be585601e41a61b89651a3d90aaf4ab.
2025-05-29 19:37:51 +00:00
..
content Revert "Bug 1968146 - Remove Pocket globals r=kpatenio,rking" for causing bc failures. 2025-05-29 19:37:51 +00:00
test Revert "Bug 1968146 - Remove Pocket globals r=kpatenio,rking" for causing bc failures. 2025-05-29 19:37:51 +00:00
.eslintrc.mjs Bug 1881701 - Change new .eslintrc.mjs files to modules (browser/), and export as flat config. r=frontend-codestyle-reviewers,extension-reviewers,pip-reviewers,credential-management-reviewers,search-reviewers,places-reviewers,omc-reviewers,migration-reviewers,home-newtab-reviewers,urlbar-reviewers,aminomancer,daisuke,dimi,robwu,jteow,mconley 2025-05-24 17:11:02 +00:00
.nvmrc
jar.mn Revert "Bug 1968146 - Remove Pocket globals r=kpatenio,rking" for causing bc failures. 2025-05-29 19:37:51 +00:00
metrics.yaml
moz.build Revert "Bug 1968146 - Remove Pocket globals r=kpatenio,rking" for causing bc failures. 2025-05-29 19:37:51 +00:00
package-lock.json
package.json Bug 1937739. r=frontend-codestyle-reviewers,perftest-reviewers,mossop,sparky 2024-12-19 17:05:08 +00:00
pings.yaml
README.md
webpack.config.js

Pocket Integration

This is mostly everything related to Pocket in the browser. There are a few exceptions, like newtab, some reader mode integration, and some JSWindowActors, that live in other places.

Primarily though this directory includes code for setting up the save to Pocket button, setting up the panels that are used once the Pocket button is clicked, setting up the Pocket context menu item, and a little scaffolding for the reader mode Pocket integration.

Basic Code Structure

We have three primary areas code wise.

There are some JSMs that handle communication with the browser. This includes some telemetry, some API functions usable by other parts of the browser, like newtab, and some initialization and setup code. These files live in /content

There is also some standard js, html, and css that run inside the panels. Panels are the contents inside the drop downs if you click the save to Pocket button. Panels run in their own browser process, and have their own js. This js also has a build/bundle step. These files live in /content/panels. We have three panels. There is a sign up panel that is displayed if you click the save to Pocket button while not signed in. There is a saved panel, if you click the save to Pocket button while signed in, and on a page that is savable. Finally there is a home panel, if you click the save to Pocket button while signed in, on a page that is not savable, like about:home.

Build Panels

We use webpack and node to build the panel bundle. So if you change anything in /content/panels/js or /content/panels/css, you probably need to build the bundle.

The build step makes changes to the bundle files, that need to be included in your patch.

Prerequisites

You need node.js installed, and a working local build of Firefox. The current or active version of node is probably fine. At the time of this writing, node version 14 and up is active, and is recommended.

How to Build

From /browser/components/pocket

If you're making a patch that's ready for review: run npm install then npm run build

For active development instead of npm run build use npm run watch, which should update bundles as you work.

React and JSX

We use React and JSX for most of the panel html and js. You can find the React components in /content/panels/js/components.

We are trying to keep the React implementation and dependencies as small as possible.