Page MenuHomePhabricator

Onboarding message for first time creating a new collection
Closed, ResolvedPublic5 Estimated Story Points

Assigned To
Authored By
KHammerstein
May 14 2015, 6:34 PM
Referenced Files
F188083: OptionsFix.diff
Jul 1 2015, 10:47 PM
F183766: Screen Shot 2015-06-26 at 1.49.39 PM.png
Jun 26 2015, 8:52 PM
F183615: Screenshot 2015-06-25 17.38.58.png
Jun 26 2015, 12:42 AM
F174136: 7-2nd-onboard-01.png
Jun 3 2015, 11:17 PM
F173474: 3-onboard-01.png
Jun 3 2015, 12:44 AM
F164863: onboarding-2nd article-01.png
Jun 2 2015, 7:13 PM
F173201: 3-onboard-01.png
Jun 2 2015, 7:13 PM
F173203: 7-2nd-onboard-01.png
Jun 2 2015, 7:13 PM

Description

Quick message to explain how to start a new collection, and purpose of watchlist. This is shown to users who have seen the blue pointer overlay (if they've dismissed it they do not see this).

Prototype http://invis.io/EA33UAF7K

3-onboard-01.png (1×641 px, 72 KB)

Clicking okay takes user to creation screen with Collection Name field highlighted

7-2nd-onboard-01.png (1×641 px, 65 KB)

Quick message to prompt users to add a 2nd article.
This will only show when you have 0 collections (excluding watchlist).

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
KHammerstein updated the task description. (Show Details)
KHammerstein updated the task description. (Show Details)
KHammerstein updated the task description. (Show Details)

I think both of those overlays should have the close button for the not interested.

@bmansurov I'd work on the basis they do not have a close button. We will probably be able to borrow whatever comes out of T98293

Change 219506 had a related patch set uploaded (by Robmoen):
WIP: Onboarding tutorial for first time gatherers

https://gerrit.wikimedia.org/r/219506

@Jdlrobson I self -1 as I was stuck on optional third parameter in route. Right now it is not merge-ready as the third parameter is required.
I got close with the regex. Please advise if you can. Thanks.

https://gerrit.wikimedia.org/r/220983 needs a quick review (simple patch)
@rmoen needs to make a minor fix up and I'll +2 his change.
Almost there

Change 219506 merged by jenkins-bot:
Onboarding tutorial for first time gatherers

https://gerrit.wikimedia.org/r/219506

@rmoen there are a few bugs I see here

-1st tippy (the original) is now pointing at the wrong thing (can't replicate)
-weird text field width bug has reappeared (can't replicate)
-2nd onboarding (the one on edit page) covers up search and extends to the bottom of the page--should be minimum height required to fit content

Screenshot 2015-06-25 17.38.58.png (685×385 px, 35 KB)

@JKatzWMF I'm unable to replicate the issue with the pointer being over the searchbox. It seems the search icon is missing and it had issues positioning itself? We just changed the search icon in MF and I had a similar issue when writing this change. Perhaps a hard refresh and test again ?

1st tippy is working 100% of the time now for me. Not sure what I'm trying to replicate here.
Making a patch now for the min height on the edit overlay tutorial. Will continue to test these locally but I'm still unable to reproduce bugs yet.

@JKatzWMF by "-1st tippy" Are you talking about ?

Screen Shot 2015-06-26 at 1.49.39 PM.png (738×2 px, 234 KB)
This is the only "Tippy" I see out out place.

This has been discussed in IRC. @KHammerstein agreed this should be hiding the lower portion of the overlay content as to keep eyes focused on the search input. Positioning issues were ruled to be cache related. Moving to ready for sign off.

@JKatzWMF: I'm also unable to replicate the pointer issue.

In the first step, "watchlist" isn't emphasised as in the mock – I feel a little twinge of guilt bringing this up.

In the second step, when the user starts searching by tapping the search box, shouldn't the overlay close as if they'd hit the Okay button? /cc @KHammerstein

@phuedx

In the second step, when the user starts searching by tapping the search box, shouldn't the overlay close as if they'd hit the Okay button?

Yes the overlay closes - they jump directly into search.
If they tap Okay, the overlay just closes.

Correcting the above issues. In a followup patch. It seems that <b> and <i> tags are no longer supported even with mediawiki.jqueryMsg loaded as a dependency. Seems as if default allowed html characters are no longer supported. As of this patch https://phabricator.wikimedia.org/rMW2dd9ec21dc5d5f2c25658b58a2dc9f564331e6e2

Either that or i just don't know how to whitelist them locally. Can't find any documentation on this either. @Krinkle can you advise?

We have message parsing support
Simply change the module class and add 'key'=>"parse" in messages array

@Jdlrobson After much investigation, this doesn't seem to work very well when configuring an extension with extension.json. Since MF isn't yet doing this, hard to replicate expected behavior without a working example.

Updating the RL module with the following seems to make it not break, but still does not correctly parse the messages. Additionally, if I don't include the ["parsed"] after every message in the module it will not correctly register that particular message. I've tried multiple variations here with no luck.

"class": "MFResourceLoaderParsedMessageModule",
"messages": {
	"gather-collection-content-tutorial-heading": ["parse"],
	"gather-collection-content-tutorial-subheading": ["parse"],
	"gather-tutorial-dismiss-button-label": ["parse"],
	"gather-remove-from-collection-failed-toast": ["parse"],
	"gather-add-to-collection-failed-toast": ["parse"],
	"gather-new-collection-failed-toast": ["parse"],
	"gather-add-to-existing": ["parse"],
	"gather-watchlist-title": ["parse"],
	"gather-add-toast": ["parse"],
	"gather-add-failed-toast": ["parse"],
	"gather-add-title-invalid-toast": ["parse"],
	"gather-remove-toast": ["parse"],
	"gather-collection-member": ["parse"],
	"gather-create-new-button-label": ["parse"],
	"gather-add-to-new": ["parse"],
	"gather-collection-non-member": ["parse"],
	"gather-add-new-placeholder": ["parse"],
	"gather-add-to-another": ["parse"],
	"gather-view-collection": ["parse"]
},

Change 221972 had a related patch set uploaded (by Phuedx):
Close tutorial when clicking in to search input

https://gerrit.wikimedia.org/r/221972

Change 222033 had a related patch set uploaded (by Phuedx):
WIP: Make watchlist bold in first onboarding screen

https://gerrit.wikimedia.org/r/222033

Looks like some upstream changes broke the 2nd tutorial at http://localhost:8888/w/index.php/Headings#/edit-collection-tutorial/394

There are now issues with the positioning due to appendToElement now being an option:

Let's get some browser tests in asap so this doesn't break again.

I've started a patch to add browser tests for the onboarding tutorial here.

Change 221972 merged by jenkins-bot:
Close tutorial when clicking in to search input * Includes upstream fixes for PointerOverlay in MF

https://gerrit.wikimedia.org/r/221972

Change 222033 merged by jenkins-bot:
Make watchlist bold in first onboarding screen

https://gerrit.wikimedia.org/r/222033

Verified on BC.