Greatest hits radio select

[calexity]

For bug reporting, populate a short list of most-submitted issues so it's easier to select what's going wrong.

As a mobile bug reporter
When I report a bug
Then I want it to be easier to select what's wrong
So I can report it faster.

[miketaylr]

Jotting down some ideas for possible choices:

• Getting a Desktop site
• Video doesn't work
• Layout appears broken

Other ideas @karlcow @hallvors? Maybe something about touch events?

[karlcow]

Rephrasing @miketaylr (playing 🐦).
Let's put a shopping list, then let's select the ones we really think we need.

• Desktop site instead of mobile site
• Simplified mobile site instead of shiny one
• Video doesn't work
• Presentation is messed up (or broken)
• Click or Touch doesn't work
• Blocking message (when we receive a best viewed or upgrade to blah browser)
• Others

[tagawa]

• Text not visible
  (thinking of -webkit- gradient backgrounds on mobile)

[calexity]

I removed a few fields and swapped out "What seems to be the trouble" for some of these issues. I think once you get this list finalized, if it can be no more than 5 reasons with a 6th "other", it will be simpler for people reporting bugs.

Small

Large

[karlcow]

Let's do that and if it's not working well. we will tweak again. Step by step. day by day. :)

[miketaylr]

This looks great, but we probably still want a textarea if people want to write in some more detail. Or maybe have a button that says "Give more details" or something that shows a hidden textarea?

[hallvors]

Let me just agree with both last speakers..

[calexity]

Ignore the font change, I used a screenshot.

Here is the text field back. I think we should leave the field in and expanded, because we'll get more comments that way. We could say "Additional comments" instead of Give more details, or just Comments.

A button to open the field competes with the button to submit and the link (as shown here) may be confusing or just not inspire action.

[miketaylr]

Looks great @calexity.

[miketaylr]

Looking at @magsout's commit, I wonder what about the case where the issue is "none of the above"? The current proposed design doesn't give an option for a user to write in their own summary. Would an option like "None of these, I'll write my own" that shows the "Problem in 5 words*" input be possible?

[calexity]

@miketaylr @magsout I think that's fine, what about just moving "Add more details" up to right below this to make it more clear that they should just add it there?

[miketaylr]

That could work @calexity. Would be cool to see a small mockup when you get a chance.

Would just need to come up with a nice generic bug title "bloop.com - [something generic here]"

[calexity]

How about something like this?

Small

---

Large

For the bug title - maybe "bloop.com - something's wrong"

[miketaylr]

Cool. I just realized "Don't know but something wrong" can probably be replaced entirely with "Other - I'll add details below."

[miketaylr]

"bloop.com - something's wrong"

That sounds good. Maybe we take the first few words from the description if it exists, and use that as a default.

[magsout]

@miketaylr my PR it' ok with proposal from @calexity ? Just need to manage form.pyto pupulate radio ?

[miketaylr]

/o, sorry for not looking at this for a while @magsout. I'll check out that PR either at some point today or tomorrow. It would be good to finish this feature soon to be able to tackle image uploading.

[miketaylr]

OK, for people not following #524, I screwed up rebasing the branch and ended up closing the PR. Let me see if I can get this guy working and we'll pick it up from there.

edit: issues/432/2 is the branch we can work on.

[miketaylr]

Here's what I see @magsout: https://cldup.com/ZxLn-ZfVnM-2000x2000.png

Looks good to me. So to finish the first parts of this bug (minus image upload etc.), there's two parts for me:

1. mess with the form.py stuff to add the "greatest hits" options. @karlcow - Greatest hits radio select #432 (comment) looks like a reasonable place to start.
2. detect when to show the greatest hits version OR... do we just show this to everyone?

Looking at the form with this patch applied on desktop, I think we could just swap the position of the columns putting the inputs on the left and the radios on the right and then we wouldn't need to try any form factor detection.

3. make sure any changes in form stuff is properly reflected in our importer tool.

[miketaylr]

Alright, let's start with these:

• Desktop site instead of mobile site
• Mobile site is not usable
• Video doesn't work
• Layout is messed up
• Text not visible
• Other - I'll add details below

[miketaylr]

Making a TODO list:

• add new problem_choices to form.py
• remove owner_choices from form.py and related owner code
• remove summary input (this is being replaced by the choices, and users can still write a custom summary in the textarea)
• come up with bug title based on chosen option
• update form validation stuff to work without summary input
• update tests (right now the "validation works" test fails)
• possibly add a Summary line in the textarea when someone chooses the "Other" option, and create title from that
• write tests for radio validation

[miketaylr]

@calexity @karlcow @magsout should we make the radio choice required, now that we're deriving the summary based on the users choice?

[miketaylr]

OK, I think we should probably make the radio choices required so I went ahead and did that. I deployed everything so far to staging.webcompat.com if people wanna check it out. @magsout any CSS tweaks are most welcome. 😄

[miketaylr]

Oops, broke some tests. But I need to update tests for radio validation anyways.

[calexity]

@miketaylr late to the party, but yes, I'd make it required. All these fields are required. In fact, we could say that at the top or bottom "All fields are required so we can fix the problem."

[miketaylr]

@calexity cool, I made it required.