Skip to content

Commit

Permalink
[MPP-1708] Popup Refactor (Epic PR to Main) (#456)
Browse files Browse the repository at this point in the history 
* [MPP-1714] Popup Refactor - Panel Navigation and Header Bar (#453)

* 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

* [MPP-1714] Popup Refactor - Settings Panel (#455)

* 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

* [MPP-1714] Popup Refactor - Report Issue Panel (#457)

* 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

* [MPP-1714] Popup Refactor - Stats Panel (#458)

* 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

* [MPP-1708] Popup Refactor - News Panel (#461)

* 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

* [MPP-1708] Popup Refactor - Masks Panel (#463)

* 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

* Add login screen, additional CSS refinements (#464)

* [MPP-1708] Popup Refactor - Register Subdomain / Create Custom Masks (#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

* [MPP-1708] Popup Refactor - Search Premium Masks (#467)

* 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)

* Fix issue where masks do not work if not syncing labels

* Remove all previous popup HTML/CSS/JS code

* [MPP-1708] Popup Refactor - Add-on QA Fixes (#472)

* 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

* mpp 1714 staging qa fixes (#474)

* 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) Review Fixes for Add-on Refactor (#477)

* 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

* Fix return error code for makeDomainAddress

* DRY logic fix from @lloan, better quailify bg function to get getCurrentPageHostname

* Bump version number for next release
  • Loading branch information
@maxxcrawford
maxxcrawford authored Mar 14, 2023
1 parent aa75356 commit beed5cf
Show file tree
Hide file tree
Showing 31 changed files with 2,885 additions and 1,758 deletions.
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "fx-private-relay-add-on",
"version": "2.6.1",
"version": "2.7.0",
"description": "Firefox Relay",
"main": "index.js",
"devDependencies": {
Expand Down
58 changes: 54 additions & 4 deletions src/css/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
--layoutLg: 64px;
--layoutXl: 96px;
--layout2xl: 192px;
--layout3xl: 256px;

/* Border Radius */
--borderRadiusXs: 2px;
Expand All @@ -23,6 +24,7 @@
--borderRadiusLg: 16px;

/* Width Tokens */
--content2xs: 256px;
--contentXs: 304px;
--contentSm: 432px;
--contentMd: 688px;
Expand All @@ -35,6 +37,21 @@
--screenLg: 1024px;
--screenXl: 1312px;

/* Typography Tokens */
--fontSizeTitle2xl: 64px;
--fontSizeTitleXl: 56px;
--fontSizeTitleLg: 48px;
--fontSizeTitleMd: 40px;
--fontSizeTitleSm: 32px;
--fontSizeTitleXs: 24px;
--fontSizeTitle2xs: 20px;
--fontSizeTitle3xs: 16px;
--fontSizeBodyXl: 21px;
--fontSizeBodyLg: 18px;
--fontSizeBodyMd: 16px;
--fontSizeBodySm: 14px;
--fontSizeBodyXs: 12px;

/* Box Shadow Tokens */
--boxShadowSm: 0 8px 12px 1px rgba(29, 17, 51, .04), 0 3px 16px 2px rgba(9, 32, 77, .12), 0 5px 10px -3px rgba(29, 17, 51, .12);
--boxShadowMd: 0 16px 24px 2px rgba(29, 17, 51, .04), 0 6px 32px 4px rgba(9, 32, 77, .12), 0 8px 12px -5px rgba(29, 17, 51, .12);
Expand All @@ -43,16 +60,22 @@
/* Primary Nebula Colors */
--colorInformational: #0060df;
--colorInformationalActive: #054096;
--colorInformationalHover: #bcd0ec;
--colorInformationalHover: #0250bb;
--colorInformationalFocus: rgba(0, 96, 223, 0.4); /* This is the RGB value of #0060df @ 40% opacity */
--colorInformationalDisabled: #C9D9F3;

/* Nebula Colors: Button: Error */
--colorError: #FF4F5E;
--colorErrorActive: #C50042;
--colorErrorHover: #E22850;
--colorError: #E22850;
--colorErrorActive: #810220;
--colorErrorHover: #C50042;
--colorErrorFocus: #FFBDC5 ;

/* Nebula Colors: Button: Warning */
--colorWarning: #ffa436;
--colorWarningActive: #c45a27;
--colorWarningHover: #e27f2e;
--colorWarningFocus: #ffd5b2;

/* Nebula Colors: Blues */
--colorBlue90: #09204d;
--colorBlue80: #073072;
Expand All @@ -65,6 +88,18 @@
--colorBlue10: #80ebff;
--colorBlue05: #aaf2ff;

/* Nebula Colors: Green */
--colorGreen90: #00736c;
--colorGreen80: #00a49a;
--colorGreen70: #1cc4a0;
--colorGreen60: #3ad4b3;
--colorGreen50: #3fe1b0;
--colorGreen40: #54ffbd;
--colorGreen30: #88ffd1;
--colorGreen20: #b3ffe3;
--colorGreen10: #d1ffee;
--colorGreen05: #e3fff3;

/* Nebula Colors: Grays */
--colorBlack: #000000;
--colorGrey60: #0c0c0d;
Expand All @@ -87,6 +122,18 @@
--colorViolet10: #f6b8ff;
--colorViolet05: #f7e2ff;

/* Nebula Colors: Purple */
--colorPurple90: #321c64;
--colorPurple80: #45278d;
--colorPurple70: #592acb;
--colorPurple60: #7542e5;
--colorPurple50: #9059ff;
--colorPurple40: #ab71ff;
--colorPurple30: #c689ff;
--colorPurple20: #cb9eff;
--colorPurple10: #d9bfff;
--colorPurple05: #e7dfff;

/* Nebula Colors: Whites */
--colorWhite: #ffffff;

Expand Down Expand Up @@ -155,6 +202,7 @@
color: var(--colorInformational);
font-family: var(--fontStackFirefox);
font-weight: 400;
background-color: transparent;
}

.fx-relay-c-button.t-secondary:hover {
Expand Down Expand Up @@ -258,13 +306,15 @@
background-color: var(--colorWhite);
border: 2px solid transparent;
outline: 1px solid var(--colorGrey30);
position: relative;
}

.fx-relay-c-search-input:focus {
outline: 4px solid var(--colorInformationalFocus);
border: 2px solid var(--colorInformational);
}

.fx-relay-c-search-input.is-active + .fx-relay-c-search-controls,
.fx-relay-c-search-input:focus + .fx-relay-c-search-controls {
opacity: 1;
}
Expand Down
Loading

0 comments on commit beed5cf

Please sign in to comment.