diff --git a/METRICS.md b/METRICS.md
index 778fbdcd9..7f450f77e 100644
--- a/METRICS.md
+++ b/METRICS.md
@@ -1,6 +1,6 @@
-### Panel events
+The Relay Extension uses a background listener to send interaction events to
+the Relay API server. The API server forwards the events to Google Analytics.
+Events are reported using the [Universal Measurement Protocol][].
+Google [replaced Universal Analytics with Google Analytics 4][] (GA4) on July 1, 2024,
+and these events are no longer recorded. Relay is in the process of switching
+to [GA4][].
-- When the panel is opened
+The Relay Extension generates a [random UUID][] for the Google Analytics
+identifier that is [stored locally in the browser][]. This ID is different from
+the GA identifier on the Relay webpage. A different ID will be generated for
+each browser and machine.
-- A ping describing which panel was viewed (unauthenticated user panel, authenticated user panel, or the "High Five!" panel)
+[Chrome Extension]: https://chromewebstore.google.com/detail/firefox-relay/lknpoadjjkjcmjhbjpcljdednccbldeb "The Firefox Relay extension on the Chrome Web Store"
+[Firefox Extension]: https://addons.mozilla.org/en-US/firefox/addon/private-relay/ "The Firefox Relay extension on Firefox Browser Add-Ons"
+[stored locally in the browser]: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage/local
+[random UUID]: https://en.wikipedia.org/wiki/Universally_unique_identifier#Version_4_(random)
-- When outbound links and buttons in the panel are clicked (Join the Waitlist, Leave Feedback, Manage All Aliases)
+Here is an index of the event categories and actions:
-- When extension settings are changed via the settings panel
+| Category | Action | Label | Context |
+| ----------------------- | ------------------- | ------------------------------------------------ | ----------------------- |
+| Extension: CSAT Survey | click | dismissed-CSAT | [Panel, Survey][] |
+| Extension: CSAT Survey | click | panel-survey-external-link | [Panel, Survey][] |
+| Extension: CSAT Survey | submitted | very dissatisfied, dissatisfied, _3 others_ | [Panel, Survey][] |
+| Extension: Context Menu | click | context-menu-generate-alias | [Context Menu][] |
+| Extension: Context Menu | click | context-menu-get-unlimited-aliases | [Context Menu][] |
+| Extension: Context Menu | click | context-menu-insert-phone-mask | [Context Menu][] |
+| Extension: Context Menu | click | context-menu-relay-manage-aliases | [Context Menu][] |
+| Extension: Context Menu | click | context-menu-use-existing-aliases | [Context Menu][] |
+| Extension: Context Menu | click | context-menu-use-existing-aliases-from-this-site | [Context Menu][] |
+| Extension: First Run | click | first-run-sign-in | [First Run][] |
+| Extension: In-page | click | input-menu-get-premium-btn | [In Page Menu][] |
+| Extension: In-page | click | input-menu-join-waitlist-btn | [In Page Menu][] |
+| Extension: In-page | click | input-menu-manage-all-aliases-btn | [In Page Menu][] |
+| Extension: In-page | click | input-menu-reuse-alias | [In Page Menu][] |
+| Extension: In-page | click | input-menu-reuse-previous-alias | [In Page Menu][] |
+| Extension: In-page | click | input-menu-sign-up-btn | [In Page Menu][] |
+| Extension: In-page | input-icon-clicked | input-icon | [In Page Menu][] |
+| Extension: In-page | input-icon-injected | input-icon | [In Page][] |
+| Extension: In-page | viewed-menu | authenticated-user-input-menu | [In Page Menu][] |
+| Extension: In-page | viewed-menu | input-menu-max-aliases-message | [In Page Menu][] |
+| Extension: In-page | viewed-menu | unauthenticated-user-input-menu | [In Page Menu][] |
+| Extension: Panel | click | closed-report-issue | [Panel, Report Issue][] |
+| Extension: Panel | click | hide-input-icons | [Panel, Settings][] |
+| Extension: Panel | click | opened-CSAT | [Panel, Survey][] |
+| Extension: Panel | click | opened-news | [Panel, News][] |
+| Extension: Panel | click | opened-news-item | [Panel, News][] |
+| Extension: Panel | click | opened-report-issue | [Panel, Report Issue][] |
+| Extension: Panel | click | opened-settings | [Panel, Settings][] |
+| Extension: Panel | click | opened-stats | [Panel, Stats][] |
+| Extension: Panel | click | panel-continue-btn | [Panel, Sign In][] |
+| Extension: Panel | click | panel-leave-feedback-link | [Panel][] |
+| Extension: Panel | click | panel-manage-btn | [Panel][] |
+| Extension: Panel | click | panel-news-eu-country-expansion-cta, _etc._ | [Panel, News][] |
+| Extension: Panel | click | panel-privacy-link | [Panel][] |
+| Extension: Panel | click | panel-terms-of-service | [Panel][] |
+| Extension: Panel | click | panel-upgrade-mask-limit-cta | [Panel][] |
+| Extension: Panel | click | popup-generate-random-mask | [Panel, Masks][] |
+| Extension: Panel | click | show-input-icons | [Panel, Settings][] |
-- When the settings icon is clicked
+[Context Menu]: #ctx-ext-context-menu
+[First Run]: #ctx-ext-first-run
+[In Page Menu]: #ctx-ext-in-page-menu
+[In Page]: #ctx-ext-in-page
+[Panel, Masks]: #ctx-ext-panel-masks
+[Panel, News]: #ctx-ext-panel-news
+[Panel, Report Issue]: #ctx-ext-panel-report-issue
+[Panel, Settings]: #ctx-ext-panel-settings
+[Panel, Sign In]: #ctx-ext-panel-sign-in
+[Panel, Stats]: #ctx-ext-panel-stats
+[Panel, Survey]: #ctx-ext-panel-survey
+[Panel]: #ctx-ext-panel
-- When panel navigation arrow icons are clicked
+### The First Run Page
-### In-page events
+When a user first installs the Relay extension, the First Run page is shown:
-- When the Relay icon is injected into an email input
+[
+](./docs/img/extension-first-run.png)
-- When the Relay icon is clicked
+The Google Analytics events:
-- When "Generate new alias" is clicked
+- The user clicks the "Sign Up / In" on the first-run page
+ - `eventCategory`: `Extension: First Run`
+ - `eventAction`: `click`
+ - `eventLabel`: `first-run-sign-in`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
-- When "Manage All Aliases" is clicked
+### The Extension Panel
-- When the Relay icon is clicked by an unauthenticated user
+The extension panel appears when clicking the Relay icon in the browser toolbar.
+In this image, the Relay icon is the second-to-last icon, and the only icon in color:
-- When the Relay icon is clicked by a user who has already reached the maximum number of allowed aliases
+[
+](./docs/img/extension-icon.png)
-### Post-install page events
+#### Sign In Page
-- When the user clicks an outbound link or button
+When a user opens the extension panel and is not signed in, they are prompted
+to sign in.
-### Context Menu events
+[
+](./docs/img/extension-panel-signin.png)
-- When an alias is generated via the context menu
+The Google Analytics events:
-### Modal events
+- The user clicks the "Sign in" button on the extension panel
+ - `eventCategory`: `Extension: Panel`
+ - `eventAction`: `click`
+ - `eventLabel`: `panel-continue-btn`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
-- When the modal opens
+#### Masks Page
-- When the modal is closed
+After signing in, the default page is the email masks page.
-- When "Manage All Aliases" is clicked
+[
+](./docs/img/extension-panel-masks.png)
+
+When a free user reaches their 5-mask limit, the page shows a warning and
+changes the button to "Get unlimited masks".
+
+[
+](./docs/img/extension-panel-masks-limit.png)
+
+A premium user will see an additional button "Generate custom mask". There are
+no related events.
+
+The Google Analytics events:
+
+- The user clicks the "Generate new mask" button
+ - `eventCategory`: `Extension: Panel`
+ - `eventAction`: `click`
+ - `eventLabel`: `popup-generate-random-mask`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+- The user clicks the "Get unlimited masks" button
+ - `eventCategory`: `Extension: Panel`
+ - `eventAction`: `click`
+ - `eventLabel`: `panel-upgrade-mask-limit-cta`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+
+#### Survey Page
+
+When running a survey, select users are prompted to take the survey.
+
+[
+](./docs/img/extension-panel-survey-prompt.png)
+
+The survey asks "How satisfied are you with your Firefox Relay experience?"
+
+[
+](./docs/img/extension-panel-survey-start.png)
+
+When completed, the user can opt-in to a longer survey.
+
+[
+](./docs/img/extension-panel-survey-done.png)
+
+The Google Analytics events:
+
+- The user clicks "Help us improve Relay" to start the survey
+ - `eventCategory`: `Extension: Panel`
+ - `eventAction`: `click`
+ - `eventLabel`: `opened-CSAT`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+- The user clicks a button to indicate how satisfied they are.
+ - `eventCategory`: `Extension: CSAT Survey`
+ - `eventAction`: `submitted`
+ - `eventLabel`: _one of_:
+ - `very dissatisfied`
+ - `dissatisfied`
+ - `neutral`
+ - `satisfied`
+ - `very satisfied`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+- The user clicks the "Dismiss" link
+ - `eventCategory`: `Extension: CSAT Survey`
+ - `eventAction`: `click`
+ - `eventLabel`: `dismissed-CSAT`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+- The user clicks the "Take the survey" link for the two-minute survey
+ - `eventCategory`: `Extension: CSAT Survey`
+ - `eventAction`: `click`
+ - `eventLabel`: `panel-survey-external-link`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+
+#### Launch Relay Icon
+
+Clicking the "Launch Relay" icon goes to the [Email masks dashboard][]. The
+icon is a box with an arrow pointing to the upper right.
+
+[
+](./docs/img/extension-panel-launch-relay.png)
+
+The Google Analytics event:
+
+- The user clicks on the "Launch Relay" icon
+ - `eventCategory`: `Extension: Panel`
+ - `eventAction`: `click`
+ - `eventLabel`: `panel-manage-btn`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+
+#### Settings Page
+
+Clicking the gear icon opens the Settings page.
+
+[
+](./docs/img/extension-panel-settings.png)
+
+The Google Analytics events:
+
+- The user clicks on the gear icon to view the Settings page, or clicks the
+ back button on the [Report Issue page][].
+ - `eventCategory`: `Extension: Panel`
+ - `eventAction`: `click`
+ - `eventLabel`: `opened-settings`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+- The user clicks the toggle off for "Show Relay icon in email fields on websites"
+ - `eventCategory`: `Extension: Panel`
+ - `eventAction`: `click`
+ - `eventLabel`: `hide-input-icons`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+- The user clicks the toggle on for "Show Relay icon in email fields on websites"
+ - `eventCategory`: `Extension: Panel`
+ - `eventAction`: `click`
+ - `eventLabel`: `show-input-icons`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+- The user clicks the "Leave Feedback" link to visit the [Firefox extension page][] or
+ the [Chrome extension page][]
+ - `eventCategory`: `Extension: Panel`
+ - `eventAction`: `click`
+ - `eventLabel`: `panel-leave-feedback-link`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+- The user clicks the "Privacy" link to visit the [Firefox Relay privacy page][]
+ - `eventCategory`: `Extension: Panel`
+ - `eventAction`: `click`
+ - `eventLabel`: `panel-privacy-link`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+- The user clicks the "Terms of Service" link to visit the [Mozilla Subscription Services Terms of Service][]
+ - `eventCategory`: `Extension: Panel`
+ - `eventAction`: `click`
+ - `eventLabel`: `panel-terms-of-service`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+
+[Report Issue page]: #ctx-ext-panel-report-issue
+[Firefox extension page]: https://addons.mozilla.org/en-US/firefox/addon/private-relay/
+[Chrome extension page]: https://chromewebstore.google.com/detail/firefox-relay/lknpoadjjkjcmjhbjpcljdednccbldeb
+[Firefox Relay privacy page]: https://www.mozilla.org/en-US/privacy/subscription-services/#relay
+[Mozilla Subscription Services Terms of Service]: https://www.mozilla.org/en-US/about/legal/terms/subscription-services/
+
+#### Report Issue Page
+
+The last link on the [Settings page][] opens the Report Issue page.
+
+[
+](./docs/img/extension-panel-report-issue.png)
+
+After the report is submitted, the user sees a confirmation page.
+
+The Google Analytics events:
+
+- The user clicks the link to open the Report Issue page
+ - `eventCategory`: `Extension: Panel`
+ - `eventAction`: `click`
+ - `eventLabel`: `opened-report-issue`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+- The user clicks the back arrow or the "Continue" link to close the Report Issue page
+ - `eventCategory`: `Extension: Panel`
+ - `eventAction`: `click`
+ - `eventLabel`: `closed-report-issue`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+
+[Settings page]: #ctx-ext-panel-settings
+
+#### Stats Page
+
+Clicking the bar graph icon opens the Stats page.
+
+[
+](./docs/img/extension-panel-stats.png)
+
+The Google Analytics event:
+
+- The user clicks on the stats icon
+ - `eventCategory`: `Extension: Panel`
+ - `eventAction`: `click`
+ - `eventLabel`: `opened-stats`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+
+#### News Page
+
+Clicking the present icon opens the What's new in Relay (news) page:
+
+[
+](./docs/img/extension-news.png)
+
+Clicking a news summary opens the full news item:
+
+[
+](./docs/img/extension-news-item.png)
+
+The Google Analytics events:
+
+- The user clicks on the present icon, or clicks the back arrow from a news item
+ - `eventCategory`: `Extension: Panel`
+ - `eventAction`: `click`
+ - `eventLabel`: `opened-stats`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+- The user clicks on a news item
+ - `eventCategory`: `Extension: Panel`
+ - `eventAction`: `click`
+ - `eventLabel`: _One of_:
+ - `panel-news-eu-country-expansion-cta`
+ - `panel-news-phone-masking-cta`
+ - `panel-news-bundle-cta`
+ - `panel-news-holiday-promo-2023-cta`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+
+### In-page events
+
+The Relay extension scans the loaded webpage. When it finds an email input, it
+adds the Relay icon.
+
+[
+](./docs/img/extension-in-page.png)
+
+The Google Analytics event:
+
+- The extension adds the icon to an input field
+ - `eventCategory`: `Extension: In-page`
+ - `eventAction`: `input-icon-injected`
+ - `eventLabel`: `input-icon`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+
+#### The In-Page Menu
+
+When a user clicks the Relay icon in an email input, the in-page Relay menu
+opens. If the user is not logged in, they are prompted to go to the webpage.
+
+[
+](./docs/img/extension-in-page-menu-signup.png)
+
+If the user is signed in, they see their masks. A button at the top right takes them to the [Email masks dashboard][].
+
+[
+](./docs/img/extension-in-page-menu.png)
+
+If a free user is at their mask limit, and in a permitted region, they are prompted to upgrade:
+
+[
+](./docs/img/extension-in-page-menu-at-limit.png)
+
+The Google Analytics events:
+
+- The user clicks the Relay icon to open the in-page menu
+ - `eventCategory`: `Extension: In-page`
+ - `eventAction`: `input-icon-clicked`
+ - `eventLabel`: `input-icon`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+- The logged-out user views the in-page menu
+ - `eventCategory`: `Extension: In-page`
+ - `eventAction`: `unauthenticated-user-input-menu`
+ - `eventLabel`: `authenticated-user-input-menu`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+- The logged-out user clicks the 'Go to Firefox Relay' button in the in-page
+ menu, to go to the [Relay website][].
+ - `eventCategory`: `Extension: In-page`
+ - `eventAction`: `click`
+ - `eventLabel`: `input-menu-sign-up-btn`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+- The logged-in user views the in-page menu
+ - `eventCategory`: `Extension: In-page`
+ - `eventAction`: `viewed-menu`
+ - `eventLabel`: `authenticated-user-input-menu`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+- The user at the free plan limit sees the "You have no more free masks" version of the in-page menu
+ - `eventCategory`: `Extension: In-page`
+ - `eventAction`: `viewed-menu`
+ - `eventLabel`: `input-menu-max-aliases-message`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+- The user clicks the upper-right icon to go to the [Email masks dashboard][].
+ - `eventCategory`: `Extension: In-page`
+ - `eventAction`: `click`
+ - `eventLabel`: `input-menu-manage-all-aliases-btn`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+- The user clicks the "Get unlimited masks" link (has more masks) or button (at mask limit)
+ - `eventCategory`: `Extension: In-page`
+ - `eventAction`: `click`
+ - `eventLabel`: `input-menu-get-premium-btn`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+- The user in a non-eligible region clicks "Join Premium waiting list" link or button
+ - `eventCategory`: `Extension: In-page`
+ - `eventAction`: `click`
+ - `eventLabel`: `input-menu-join-waitlist-btn`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+- The user selects an email mask previously used on the website
+ - `eventCategory`: `Extension: In-page`
+ - `eventAction`: `click`
+ - `eventLabel`: `input-menu-reuse-alias`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+- The user selects the "Generate new mask" button
+ - `eventCategory`: `Extension: In-page`
+ - `eventAction`: `click`
+ - `eventLabel`: `input-menu-reuse-previous-alias`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+
+[Email masks dashboard]: https://relay.firefox.com/accounts/profile/
+[Relay website]: https://relay.firefox.com/
+
+### The Context Menu
+
+A user can open the context menu by right-clicking on the browser window. The
+Relay extension adds items to the context menu.
+
+The context menu for an input field:
+
+[
+](./docs/img/extension-context-input.png)
+
+A user on the phone plan will also see an entry "Use phone number mask".
+
+The context menu for other parts of a webpage:
+
+[
+](./docs/img/extension-context-other.png)
+
+The context menu for the Relay extension in the toolbar:
+
+[
+](./docs/img/extension-context-toolbar.png)
+
+The Google Analytics events:
+
+- The user selects "Manage all masks" from the context menu
+ - `eventCategory`: `Extension: Context Menu`
+ - `eventAction`: `click`
+ - `eventLabel`: `context-menu-relay-manage-aliases`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+- The free user selects "Get unlimited masks" from the context menu
+ - `eventCategory`: `Extension: Context Menu`
+ - `eventAction`: `click`
+ - `eventLabel`: `context-menu-get-unlimited-aliases`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+- The user selects "Generate new mask" from the context menu
+ - `eventCategory`: `Extension: Context Menu`
+ - `eventAction`: `click`
+ - `eventLabel`: `context-menu-generate-alias`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+- The user selects a mask associated with this site
+ - `eventCategory`: `Extension: Context Menu`
+ - `eventAction`: `click`
+ - `eventLabel`: `context-menu-use-existing-aliases-from-this-site`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+- The user selects a mask not associated with this site
+ - `eventCategory`: `Extension: Context Menu`
+ - `eventAction`: `click`
+ - `eventLabel`: `context-menu-use-existing-aliases`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
+- The user with the phone plan selects "Use phone number mask" from the context menu
+ - `eventCategory`: `Extension: Context Menu`
+ - `eventAction`: `click`
+ - `eventLabel`: `context-menu-insert-phone-mask`
+ - `dimension5`: `Firefox` or `Chrome`
+ - `dimension7`: `add-on`
diff --git a/docs/img/README.md b/docs/img/README.md
index 393f1df0e..85488a006 100644
--- a/docs/img/README.md
+++ b/docs/img/README.md
@@ -4,6 +4,8 @@ These are images for documentation purposes.
- The PNG images prefixed with `website-` are for the website (aka dashboard),
and were taken in June 2024
+- The PNG images prefixed with `extension-` are for the extension (aka add-on), and
+ were taken in July 2024.
Some tips for new screenshots:
@@ -17,10 +19,15 @@ Some tips for new screenshots:
can be set to block or can be deleted.
- Take screenshots on a local development environment to capture UI elements like
surveys that are targeted at a subset of users and require database changes.
+- Use [extension debugging techniques][] to help take screenshots of the extension.
+ Delete the Extension Storage to see sign up menus. Disable popup auto-hide to make
+ it easier to capture screenshots and to use the debugger. Use the debugger to change
+ data to get UI elements targeted at a subset of users.
The screenshot size is minimized with [pngquant][], a lossy PNG compressor. To
generate the minimized versions, run [compress_images.bash][]. This runs on all PNG
files in the folder. You may want to revert changes to re-compress a compressed PNG.
[compress_images.bash]: ./compress_images.bash
+[extension debugging techniques]: https://extensionworkshop.com/documentation/develop/debugging/
[pngquant]: https://pngquant.org/
diff --git a/docs/img/extension-context-input.png b/docs/img/extension-context-input.png
new file mode 100644
index 000000000..2970bec13
Binary files /dev/null and b/docs/img/extension-context-input.png differ
diff --git a/docs/img/extension-context-other.png b/docs/img/extension-context-other.png
new file mode 100644
index 000000000..ea95b4bd6
Binary files /dev/null and b/docs/img/extension-context-other.png differ
diff --git a/docs/img/extension-context-toolbar.png b/docs/img/extension-context-toolbar.png
new file mode 100644
index 000000000..eec4f5843
Binary files /dev/null and b/docs/img/extension-context-toolbar.png differ
diff --git a/docs/img/extension-first-run.png b/docs/img/extension-first-run.png
new file mode 100644
index 000000000..f609a17ea
Binary files /dev/null and b/docs/img/extension-first-run.png differ
diff --git a/docs/img/extension-icon.png b/docs/img/extension-icon.png
new file mode 100644
index 000000000..06b7a0224
Binary files /dev/null and b/docs/img/extension-icon.png differ
diff --git a/docs/img/extension-in-page-menu-at-limit.png b/docs/img/extension-in-page-menu-at-limit.png
new file mode 100644
index 000000000..73a7afdae
Binary files /dev/null and b/docs/img/extension-in-page-menu-at-limit.png differ
diff --git a/docs/img/extension-in-page-menu-signup.png b/docs/img/extension-in-page-menu-signup.png
new file mode 100644
index 000000000..53fcb62f2
Binary files /dev/null and b/docs/img/extension-in-page-menu-signup.png differ
diff --git a/docs/img/extension-in-page-menu.png b/docs/img/extension-in-page-menu.png
new file mode 100644
index 000000000..0767f4c5d
Binary files /dev/null and b/docs/img/extension-in-page-menu.png differ
diff --git a/docs/img/extension-in-page.png b/docs/img/extension-in-page.png
new file mode 100644
index 000000000..56b1e23f1
Binary files /dev/null and b/docs/img/extension-in-page.png differ
diff --git a/docs/img/extension-panel-launch-relay.png b/docs/img/extension-panel-launch-relay.png
new file mode 100644
index 000000000..fddb72d56
Binary files /dev/null and b/docs/img/extension-panel-launch-relay.png differ
diff --git a/docs/img/extension-panel-masks-limit.png b/docs/img/extension-panel-masks-limit.png
new file mode 100644
index 000000000..b599f8f9c
Binary files /dev/null and b/docs/img/extension-panel-masks-limit.png differ
diff --git a/docs/img/extension-panel-masks.png b/docs/img/extension-panel-masks.png
new file mode 100644
index 000000000..8b4886f7b
Binary files /dev/null and b/docs/img/extension-panel-masks.png differ
diff --git a/docs/img/extension-panel-news-item.png b/docs/img/extension-panel-news-item.png
new file mode 100644
index 000000000..5b4244958
Binary files /dev/null and b/docs/img/extension-panel-news-item.png differ
diff --git a/docs/img/extension-panel-news.png b/docs/img/extension-panel-news.png
new file mode 100644
index 000000000..2adc3a7ce
Binary files /dev/null and b/docs/img/extension-panel-news.png differ
diff --git a/docs/img/extension-panel-report-issue-sent.png b/docs/img/extension-panel-report-issue-sent.png
new file mode 100644
index 000000000..d5416b882
Binary files /dev/null and b/docs/img/extension-panel-report-issue-sent.png differ
diff --git a/docs/img/extension-panel-report-issue.png b/docs/img/extension-panel-report-issue.png
new file mode 100644
index 000000000..58ba56259
Binary files /dev/null and b/docs/img/extension-panel-report-issue.png differ
diff --git a/docs/img/extension-panel-settings.png b/docs/img/extension-panel-settings.png
new file mode 100644
index 000000000..bfa4d69db
Binary files /dev/null and b/docs/img/extension-panel-settings.png differ
diff --git a/docs/img/extension-panel-signin.png b/docs/img/extension-panel-signin.png
new file mode 100644
index 000000000..c3d0488ba
Binary files /dev/null and b/docs/img/extension-panel-signin.png differ
diff --git a/docs/img/extension-panel-stats.png b/docs/img/extension-panel-stats.png
new file mode 100644
index 000000000..415714877
Binary files /dev/null and b/docs/img/extension-panel-stats.png differ
diff --git a/docs/img/extension-panel-survey-done.png b/docs/img/extension-panel-survey-done.png
new file mode 100644
index 000000000..48100ba59
Binary files /dev/null and b/docs/img/extension-panel-survey-done.png differ
diff --git a/docs/img/extension-panel-survey-prompt.png b/docs/img/extension-panel-survey-prompt.png
new file mode 100644
index 000000000..2e9c23690
Binary files /dev/null and b/docs/img/extension-panel-survey-prompt.png differ
diff --git a/docs/img/extension-panel-survey-start.png b/docs/img/extension-panel-survey-start.png
new file mode 100644
index 000000000..2828f1be2
Binary files /dev/null and b/docs/img/extension-panel-survey-start.png differ
diff --git a/docs/img/website-emails-banner-bundle.png b/docs/img/website-emails-banner-bundle.png
index 657510ce9..42d33d544 100644
Binary files a/docs/img/website-emails-banner-bundle.png and b/docs/img/website-emails-banner-bundle.png differ