(Fix #475) Review Fixes for Add-on Refactor

[maxxcrawford]

Summary

This PR answers questions/comments from the review of https://github.com/mozilla/fx-private-relay-add-on/pull/456

Links:

• Main PR: https://github.com/mozilla/fx-private-relay-add-on/pull/456
• BLOCKING L10N PR: https://github.com/mozilla-l10n/fx-private-relay-add-on-l10n/pull/48
• Jira ticket (Epic): https://mozilla-hub.atlassian.net/browse/MPP-1708

Global/features:

• [ ] ~Analytics review~
• [x] News item count

HTML

src/popup.html

• [x] Localize Navigation items
• [x] Update navigation elements to <button> instead of <a>
• [x] Add alt-tag to Close button (.fx-relay-masks-error-message-icon)
• [x] Comment on dynamically populated markup in HTML
• [x] Custom elements <content>, <panel>, etc should all contain a hyphen

Javascript

src/js/popup/popup.js

• [x] Question: Use local storage for state mgmt for persistent items (newsItemCount?)
• [x] State object: remove unused data
• [x] Use lloan suggestion f ([400,409].includes(newRelayAddressResponse.status)) {
• [x] masks.custom.init: Remove commented code
• [x] Use lloan suggestion: matchesSearchFilter
• [x] Check on TODO: Add toggle button back
• [x] Question about destructing: `const { emailsForwardedVal } = await ...
• [x] Use lloan suggestion: domainList === null (or Kaitlyn ?? operator)
• [x] Fix line-breaks: panel.init function
• [x] Consider re-ordering noMasksPanelCreated panel to show by default
• [x] isPremiumSubdomainSet is defined and used multiple times
• [x] Remove extra line-breaks in setRemainingMaskCount
• [x] Rename storyData to something more legible.
• [x] News item issue: isPhoneMaskingAvailable and logicCheck may be unnecessary / duplicate

src/js/background/background.js

• [x] Remove console log
• [x] Add comment on apiBody.used_on = description + ",";
• [x] Investigate FIXME
• [x] Investigate // TODO: Update the domain attribute to be "label"
• [x] Add comment for const localRelayAddresses = Object.keys(localStorageRelayAddresses).
• [x] Use lloan suggestion: return { status: 402 };
• [x] Add comment for return { status: 402 };

CSS

src/css/global.css

• [x] font / font-size rev. Revert

src/css/popup.css

• [x] Double width attributes .fx-relay-panel-header-btn-back img
• [x] right value should be variable .fx-relay-settings-toggle::after
• [x] Add z-index comment fx-relay-panel-custom-mask-promo-blocking-tooltip

[maxxcrawford]

• I see a negative count for premium users, and I tested this with both a pre-existing premium account and an account

Ahh! Good catches all around. Fixes incoming.

[maxxcrawford]

The "upgrade now" CTA should go directly to the pricing section (anchor link). Minor error.

Revised in 9796646843d5199cc76c6f47a4ef264d2a9450dd

slight misalignment of the checkboxes

Revised in 0b2b495670329d6ec3a6735792bad4797f233ed1