[MPP-1708] Popup Refactor (Epic PR to Main) #456
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
maxxcrawford
changed the title
This was referenced Jan 24, 2023
This was referenced Jan 24, 2023
maxxcrawford
changed the title
This was referenced Feb 6, 2023
maxxcrawford
force-pushed
the
mpp-1714-staging
branch
from
6d79cee to
cfe5d99
Compare
maxxcrawford
changed the title
maxxcrawford
force-pushed
the
mpp-1714-staging
branch
from
67edc81 to
57a427f
Compare
This was referenced Feb 15, 2023
maxxcrawford
force-pushed
the
mpp-1714-staging
branch
from
b3f55a8 to
11f4513
Compare
lloan
approved these changes
Mar 13, 2023
codemist
approved these changes
Mar 14, 2023
* Stub new work area for toolbar * Add new navigation icons * Add hard-coded (EN) labels for navigation * Start popup javascript logic (including init, panel switching, and login detection) * Remove commented out code * FOLD SVG name update * Add logic to handle external link clicks in popup, update HTML with data attrs to set URLs correctly with telemetry data * Add back button support for main panels
* Stub new work area for toolbar * Add new navigation icons * Add hard-coded (EN) labels for navigation * Start popup javascript logic (including init, panel switching, and login detection) * Remove commented out code * FOLD SVG name update * Add logic to handle external link clicks in popup, update HTML with data attrs to set URLs correctly with telemetry data * Add back button support for main panels * Create settings page content, style toggle buttons to match Nebula * Stub Issue Report page, add remaining Settings page external link * Add logic to handle child panel navigation * Fix issue where external links where not opening to correct URL * Remove global namespace * Revise spacer layout on settings/toggle wrapper
* Stub new work area for toolbar * Add new navigation icons * Add hard-coded (EN) labels for navigation * Start popup javascript logic (including init, panel switching, and login detection) * Remove commented out code * FOLD SVG name update * Add logic to handle external link clicks in popup, update HTML with data attrs to set URLs correctly with telemetry data * Add back button support for main panels * Create settings page content, style toggle buttons to match Nebula * Stub Issue Report page, add remaining Settings page external link * Add logic to handle child panel navigation * Fix issue where external links where not opening to correct URL * Move getBrowser function to shared utils * Optimize Report Issue success image * Add Report Issue panel content/logic from previous popup file
* Port stats from previous popup to new stats panel * Add second stats column, add new strings from L10N PR * Add logic to calculate mask stats used on the current website * Add additional logic to query custom masks for premium users * Remove commented code, and comment for magic number * Spelling fix
* Add news feature This feature has two panels: the news panel and the news story panel. - The news panel lists all news stories - The news story panel is the detail view when you click on a news item Both sections are built dynamically from the newsContent object. There are a few attributes you can add here to will limit who the news items is shown to (via waffle flags, etc) Optional data wise, you can also include (or not include) a CTA for the detailed view * Add Firefox Inegration panel * Add additional news content * Add swith/check to conditionally show/hide banners based on locale/subscribed status * WIP Number * Add UI and logic to show notification count for unread news items * Remove unlocalized strings
* New icons * WIP: Add mask UI/logic to display and create new masks for free users * Add copy to clipboard functionality * Add loading state This loading state is copied from the in-page content UI * Improve logic to show/hide elements based on mask count and account level * Add styles for premium masks to display past the main viewport * Add Mask Created label to new masks made from the panel * CSS Review comments
…466) * Add prompt for premium users to register subdomain if not yet set * Add new icons * Add revised Nebula error colors * Refactor how hostnames are requested from bg.js script * Add new bg function to create custom masks for premium users * Add PSL library for custom-mask prepopulate mask name feature * Add custom mask creation panel, including JS logic and styles * Add localized promo blocking tooltip strings * Review revisions: Migrate font-size to use global variables, remove comments, add aria role
* Add search feature for premium users * Add additional data (website usage/generated for) to filter by in panel * Add logic to handle premium users with no masks created * Remove mask expand/manage button (P2 item), update CSS to center copy button vertically in mask card list (#468)
* Move news annoucements for geo-specific items behind correct logic gates * WIP: Add additional logged in/out loggic, and add focus states * Add additional logic to focus on correct element * Move news items to state * Add logic to remove the news panel all together if user is ineligible for any news items * Refactor news list building logic inside the core popup function * Move Firefox Integration news item into logic check * Remove 'report issue' link if not logged in
* Fix issue where news item would not open correctly * Fix issue where 'Mask created' label is covered up by mask cards * Fix issue where some masks were too long and breaking the display panel
* Fix #475 - Localize navigation items * Update anchor elements to buttons if they are internal navigation items, update styles * Add localized alt-tag info to navigation images (back button, close/dismiss) * Add comments for dynamically generated content within the HTML * Update all custom elements to contain a hyphen, rename news items variables to be more readable * Remove line-breaks, commented code * Update state object name to represent its context (now sessionState) * Save `isPremiumSubdomainSet` query to reduce localStorage calls * Update storyData to match other newsItem variable naming pattern * Remove console log, add code comments, move local storage function (TODO) into seperate function * Revert CSS attribute name, add CSS comments, update values to use vars * CSS fix for button HTML swap on Settings page * Remove logicCheck fields/logic as populateNewsFeed covers this functionality * Remove TODO * DRY Logic loop fix, add comments for mask creation error codes * Fix news system to show notification bug but store read count * Update premium links to open in correct anchored aarea * Fix alignment of checkboxes on web compat form * Add logic to only allow web compat submissions with necessary info * Refactor how totals are calculated for mask/forward/blocked counts * Updated strings
…entPageHostname
maxxcrawford
force-pushed
the
mpp-1714-staging
branch
from
e20b4dd to
6184ed0
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Refactor the add-on panel to generate masks and better manage/leverage the Relay experience. This is an epic PR, comprised of other reviewed PRs. Please follow the commits and look at past PRs for specific feature testing steps.
Links:
L10N PR: Add-on Refactor mozilla-l10n/fx-private-relay-add-on-l10n#44Caveats:
There are two missing features from this release:
Review notes:
Testing Scenarios: