[MPP-1714] Popup Refactor - Settings Panel

[maxxcrawford]

Related: https://github.com/mozilla/fx-private-relay-add-on/pull/453

Summary

Add "Settings" panel to add-on toolbar

Caveat: The "Report Issue" panel is not completed and will be added in a future PR.

Links:

• Jira Epic: https://mozilla-hub.atlassian.net/browse/MPP-1708
• Figma designs

Work completed so far:

• Style "Settings" panel
• Stub "Report Issue" panel

TODO:

• [x] Add logic refactor for parent/child panel item for panel updates
• [x] Add click event for Mozilla Interaction Data

Tests

1. Show Settings when logged out

   • Run add-on
   • Do not log in
   • Open pop-up
   • Expected: Only two links should be visible: Manage and Settings (Stats and News are hidden)

2. All settings links work

   • Run add-on
   • Log in
   • Open pop-up > Click Gear icon
   • Expected: Settings panel opens
   • Click Toggles
   • Expected: Toggles should flip to grey/inactive
   • Click links
   • Expected: Links should open in new tab (and popup should close)

3. Report Issue (webcompat) panel should open

   • Run add-on
   • Log-in
   • Open pop-up > Click Gear icon
   • Click "Report Issue"
   • Expected: Report Issue panel should open, and the gear icon should stay "active"
   • Click back button
   • Expected: Settings panel should re-open, and the gear icon should stay "active"

Screenshots

Logged in:

Logged out: