[bug 969667] Merge desktop and mobile forms #221

willkg · 2014-02-19T22:17:27Z

This is a work in progress. It sort of works, but has a bunch of issues that I can't figure out. To access it, go to http://127.0.0.1/en-US/feedback/generic .

Problems:

On big screens, I find the text hard to read and cluttered. It's also all bunched up at the top in the middle. Media queries can probably help fix this, but my media query fu sux0rz.
The browser's back button goes back a page in history--it doesn't go back a card. That's not a big deal with a mobile browser where you can see the web page back button, but hugely problematic on desktop where it's really far away from the form and it's very likely someone will try to use their browser back button. I don't know how to fix this offhand, but I think I have to use push state (or whatever it's called).

Beyond that, I think the privacy messaging and the labeling is better. This includes the url field that the mobile form doesn't have currently (win!) and it's easier to read than the desktop form (win!).

Also, I'm creating new .css and .js files and duplicating some things right now. I'll fix some of the duplication (duplicate images, duplicating in .less and .css files between this new form and the Firefox OS form, etc) in a later refactoring pass.

Anyhow, work in progress.

Feedback?

rlr · 2014-02-20T20:18:45Z

fjord/base/templates/base.html

-        </a></h1>
-
+    {% block body %}
+      <nav id="nav-access">


yay for <nav/>!

oh, it's the same as before :)

(I wish github did a smarter diff when just indentation changes)

willkg · 2014-02-24T17:40:44Z

^^^ That fixes problem 2 regarding the browser's back button.

This is still a WIP--there are outstanding things that need fixing first.

willkg · 2014-02-24T20:48:44Z

^^^ That rebases against master and then fixes some display issues. This looks good to me on my phone and looks decent enough to me on desktop.

I also cleaned up some weird CSS, JS and HTML, so theoretically this is good to go now.

r?

willkg · 2014-02-24T20:51:52Z

fjord/feedback/templates/feedback/generic_feedback.html

+          </label>
+          <label class="sad" for="description">
+            {{ _('Please describe your problem below.') }}
+            {{ _('Please be as specific as you can.') }}


This is goofy and we should combine these two strings, however, if I do that, then this is a new string and then I'm blocked from landing it for a while. So I left it goofy for now.

willkg · 2014-02-24T20:54:49Z

One important thing to test here is that I didn't introduce any new strings. You should be able to get the latest strings, compile them and then go through the whole form in some locale that's fully translated:

      it: ================================================== 100
      cs: ================================================== 100
      es: ================================================== 100
      nl: ================================================== 100
      tr: ================================================== 100
      lt: ================================================== 100
      pl: ================================================== 100
      fr: ================================================== 100
   pt_BR: ================================================== 100
      hr: ================================================== 100
      fy: ================================================== 100
   zh_TW: ================================================== 100
      hu: ================================================== 100
      ja: ================================================== 100
      sr: ================================================== 100
      sq: ================================================== 100
      ko: ================================================== 100
      sk: ================================================== 100
      de: ================================================== 100
   nb_NO: ================================================== 100

rlr · 2014-02-24T21:47:16Z

OK, so what's the next step? This looks very similar to the existing mobile form but very different from the desktop version. I don't see any "responsiveness"?

It all works based on my testing. I do think it will need CSS love, whether it be a brand new design or applying the old style to this form when viewed in bigger screen sizes.

* create new generic form that merges desktop and mobile forms * move around instructions so important instructions come before the fields they apply to--this is better for privacy-related information * add pushstate support so going back and forth in the form works with form controls and browser controls * this doesn't support jumping into the middle of the form * rework infrastructure so it's possible to add additional cards and measure drop-off rates * makes this structurally like the firefox os feedback form so all forms now have a similar structure This looks a little worse on Desktop, though. This form could definitely use better strings and better design, but that's out of the scope of this change and would require a lot more work.

willkg · 2014-02-24T22:34:22Z

^^^ That rebases all the changes into one with a better commit message.

I still need to look at the Thank You page and make sure you get to the right one depending on whether you're using desktop or mobile because we're not changing that in this round.

willkg · 2014-02-25T00:37:15Z

@rlr I can't reproduce the problem with the thank you page you're seeing. The thanks view is marked with a @mobile_template decorator and I see the desktop thanks (which looks awful) with desktop and the mobile thanks (which looks a little better) on my phone.

How'd you end up seeing the desktop thanks page on a device that shouldn't be seeing it?

rlr · 2014-02-25T00:41:05Z

oh, I see. I did the old android form from desktop browser. carry on

* nixes desktop and mobile form routing (yay!) * replaces that with new generic form * update tests to denote that we now essentially ignore validation errors with email addresses and descriptions--Thanks! * update ancient android form post handling to also ignore errors * clean up code after all that

This cleans up some of the CSS and JS after removing the desktop and mobile feedback forms.

willkg · 2014-02-25T20:06:37Z

^^^ Matt gave me the ok, so I nixed the desktop and mobile forms and related bits.

I probably missed some things, but I'm not seeing any errors, so it's probably mostly right.

Quick r?

rlr · 2014-02-25T22:27:16Z

The old URLs /feedback/firefox.desktop.stable/ and /feedback/firefox.android.stable/ no longer work. Is that ok? They aren't linked from anywhere?

rlr · 2014-02-25T22:29:47Z

or /feedback/firefox.fxos.stable/ for that matter. I thought those URLs would still work but just use the generic form. Or am I lost 😕

rlr · 2014-02-25T22:33:46Z

Ah, I see. You can do things like /feedback/firefox/ and /feedback/android/26.0/stable/. I had forgot about that...

But you still dropped support for certain URLs, I'm cool with that if you are but I don't know if that breaks anything out in the wild.

rlr · 2014-02-25T22:53:41Z

I tested the form with different user agents and it all WFM.

So, I think this is good to go assuming it's OK for those URLs to no longer work.

willkg · 2014-02-26T00:29:50Z

Those feedback form urls were created solely for testing. If someone was using them in the wild, I would be:

surprised
annoyed

When a person using those old urls shows up, I will waggle my finger at them.

We have product urls. It's kind of irritating now since they're db-driven and not written down somewhere, but it'll get easier when I add a product picker.

Firefox OS is a special case--we have a special form that asks additional questions, so all Firefox OS things get shunted to that form. At some point we might want to merge that one with this one, but not in this pass. Maybe it makes sense to generalize it so that we can specify which cards each product gets and generate the cards automatically. I'm not thinking that far ahead right now, though.

rlr · 2014-02-26T00:31:55Z

b:smiley:d

willkg · 2014-02-26T03:36:20Z

Landed in master in:

cfc3814 [bug 969667] Clean up CSS/JS
600f02c [bug 969667] Replace mobile/desktop forms with generic
e708164 [bug 969667] Merge desktop and mobile forms

rlr reviewed Feb 20, 2014
View reviewed changes

willkg reviewed Feb 24, 2014
View reviewed changes

willkg added 2 commits February 25, 2014 10:39

[bug 969667] Clean up CSS/JS

cfc3814

This cleans up some of the CSS and JS after removing the desktop and mobile feedback forms.

willkg merged commit cfc3814 into mozilla:master Feb 26, 2014

willkg deleted the 969667-merge-forms branch March 14, 2014 19:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[bug 969667] Merge desktop and mobile forms #221

[bug 969667] Merge desktop and mobile forms #221

willkg commented Feb 19, 2014

rlr Feb 20, 2014

rlr Feb 20, 2014

rlr Feb 20, 2014

willkg commented Feb 24, 2014

willkg commented Feb 24, 2014

willkg Feb 24, 2014

willkg commented Feb 24, 2014

rlr commented Feb 24, 2014

willkg commented Feb 24, 2014

willkg commented Feb 25, 2014

rlr commented Feb 25, 2014

willkg commented Feb 25, 2014

rlr commented Feb 25, 2014

rlr commented Feb 25, 2014

rlr commented Feb 25, 2014

rlr commented Feb 25, 2014

willkg commented Feb 26, 2014

rlr commented Feb 26, 2014

willkg commented Feb 26, 2014

[bug 969667] Merge desktop and mobile forms #221

[bug 969667] Merge desktop and mobile forms #221

Conversation

willkg commented Feb 19, 2014

rlr Feb 20, 2014

Choose a reason for hiding this comment

rlr Feb 20, 2014

Choose a reason for hiding this comment

rlr Feb 20, 2014

Choose a reason for hiding this comment

willkg commented Feb 24, 2014

willkg commented Feb 24, 2014

willkg Feb 24, 2014

Choose a reason for hiding this comment

willkg commented Feb 24, 2014

rlr commented Feb 24, 2014

willkg commented Feb 24, 2014

willkg commented Feb 25, 2014

rlr commented Feb 25, 2014

willkg commented Feb 25, 2014

rlr commented Feb 25, 2014

rlr commented Feb 25, 2014

rlr commented Feb 25, 2014

rlr commented Feb 25, 2014

willkg commented Feb 26, 2014

rlr commented Feb 26, 2014

willkg commented Feb 26, 2014