1917267 - [WebCompat Reporter] Implement the UI for the Android WebCompat Reporter

Status: NEW

(Fenix :: General, task, P1)

Description

[Titouan Thibaud [:titouan]]

Implement the UI provided on Figma

Comment 1

[Noah Bond [:007]]

A redux layer will also be constructed for this feature

Comment 2

[Noah Bond [:007]]

Distilling all of the UI behavior from the Figma

Behavior of the url textfield:

• The URL field is prepopulated.
• Show an error and error icon when an invalid URl is entered

Behavior of "Send more info" link text button

• Close the form and navigate to "www.webcompat.com"
• Persist the currently-entered form data

Behavior of the cancel button:

• Clears the form, clear the persisted data, and close the panel

Behavior of the optional description textfield:

• Max 6 lines should be displayed.
• As more text is entered and lines are added, the content above this textfield should scroll up

Behavior of the back button:

• Closes the form but persists the currently-entered data.
• Return to the webpage (with the menu closed).

Behavior of the "Send" button:

• Perform the "send" action and show a Snackbar (both are handled in Bug 1925090).
• Clears-out any persisted data.
• Return to the webpage (with the menu closed).
• The send should only be enabled when a valid URL is entered.

As part of this work we will need to:

• Add the form data to AppState
• Add a navigation middleware for handling navigation side effects and navigating away from the form to the webcompat site.

Data persistence

• Hitting the back button or the "send more info" button should retain the currently-entered form data.
• We only need to persist the data for one tab. If a user navigates to a new tab and opens the form, the form is reset.
• Data is NOT persisted between app launches