Send feedback button

[Osmose]

The product listing should have a "Send feedback" button at the bottom of the listing. When clicked, it should open a new tab to the feedback form (#59).

Styling of the button TBD. There is an open question about whether we should include information about the user's currently-tracked products with the link.

[Osmose]

Button layout/position is in the design spec:

Hover and active states for the button are in the photon design guidelines: https://design.firefox.com/photon/components/buttons.html

The extra data potentially sent to the feedback form will be filed as a new issue after #59 is resolved and we know what data we want to collect. For now the button can open any page, or about:blank.

[Osmose]

Based on the Test Pilot feedback button guide, I'd like to suggest two changes to the current UX:

1. We should include the "Send feedback" button in all states of the panel, including the onboarding state, rather than only showing it after the user has saved products.
2. We should include their standard feedback icon to the left of the "Send Feedback" string, similar to how "Add This Product" has an icon.

@bryanbell That sound okay?

[bryanbell]

what's the "standard feedback icon?"

[chuckharmston]

@bryanbell https://github.com/mozilla/testpilot/blob/master/docs/examples/feedback-buttons.md

[Osmose]

@bryanbell Specifically this SVG, with the same dark fill as the other icons we have: https://github.com/mozilla/testpilot/blob/master/docs/img/feedback/feedback-icon.svg

[Osmose]

WIP example:

[Osmose]

Chatted on Slack, we've decided to move the icon to the top left of the title bar so that we can have it in every view of the panel without distracting users from the "Watch this Product" button.

[biancadanforth]

@Osmose, @bryanbell , The new location of the "Send Feedback" button is the same location as we were planning to put the loading GIF from issue #93 , is that okay? Would this mean the loading GIF would show on top of the feedback icon in cases where it is displayed?

[bryanbell]

I think superseding the feedback icon is reasonable, considering the loading times should be short.

But alternatively, we can also turn the "Add this product" button into a loader.

the icon can be the spinner, and the label can temporarily change to "Loading…".

[biancadanforth]

Thanks @bryanbell . I would vote for the former, since the loading GIF is supposed to be shown for both the extraction process and loading the tracked products list.

Edit: Also I keep calling it a GIF, when it is in fact a CSS animation of a single image...