Add Report Issue Panel

[codemist]

trafficstars

This adds the Report issues feature on the add on where users can submit reports directly from the site where they are experiencing issues.

Inputs accepted:

• Accepts non-formatted URLs: eg. test.com, test.co.uk, jane.app, www.jane.app, 見.香港
• Disables submit button if the URL field is empty / does not contain a valid URL

Demo:

https://user-images.githubusercontent.com/13066134/196756228-178ae784-69f1-48b8-bd8a-98db7dd13283.mov

[codemist]

@say-yawn Added you as a reviewer just in case you wanted to spot check.

[jwhitlock]

@maxxcrawford asked:

Is there any way for us to parse if the user reported from Chrome vs Firefox?

I could see two ways:

1. The Add-on could report that it was from the Chrome store or Firefox Add-ons. Is this information available in the add-on?
2. The backend could look at the User-Agent header. Looking at /metrics-event, we get the user agent, but we'll need to do additional parsing (and probably bring in a new library) to turn this into "Chrome", "Firefox", and "Something else"

[Vinnl]

The add-on has access to runtime.getBrowserInfo and runtime.getPlatformInfo, but I think the backend will need an update to accept that data.

[codemist]

@jwhitlock Se Yeon mentioned that ideally we should collect that data on the frontend and pass it. https://mozilla-hub.atlassian.net/jira/software/c/projects/MPP/boards/198?modal=detail&selectedIssue=MPP-2478

[codemist]

@maxxcrawford Thanks for catching the errors in popup.html, that was a complete oversight. The differences now should be more clear, I reformatted the entire file with prettier and I thought that was what was causing the huge change and thought little of it. It should not have any bad rebase artifacts now.