Page MenuHomePhabricator

Move mobile language switcher to top of the page and align article actions
Closed, ResolvedPublic5 Story Points

Description

Problem
This is intended to improve the reading experience of users who speak more than 1 language, primarily for those users whose primary language has limited content. It is quite common for such a user to want to see if the article in another language has more content or is more understandable.

User story
As a user I want to see what other languages an article is available in without scrolling to the bottom of the article.

Community feedback
https://www.mediawiki.org/wiki/Reading/Web/Projects/Improve_in-article_language_switching_on_mobile_web

Final solution

Regular

Desktop will just have another article action and save vertical space

Acceptance criteria

  • Implement treatment of button and its placement
  • It works in ResourceLoader impaired and <noscript> UAs.
  • When in force sampled in Schema:MobileWebLanguageSwitcher logging should result in the button's tap having a languageButtonVersion distinct from the existing 'bottom-of-article' value.
  • It has ATDD tests.
  • It works on localhost.
  • it is deployed at 100% in beta on the prod cluster and beta cluster.

Per Nirzar:

  • Show an opaque language switcher button (rather than hiding it) when no languages are available.
  • Align the leftmost icon with the left of the page, and rightmost icon with the right of the page (no spaces) on a small screen.

Details

Related Gerrit Patches:

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

@Volker_E

what language icon is this

did not quite understand your question here.

Hopefully we're not repeating the issues tackled in

文 - The word is "wén" in noun format, it means "language" in most context. the upper stroke is often drawn 90deg. it's more of a typeface's stylistic value. some draw it tilted, some draw upright.

@Nirzar Being unfamiliar with Chinese and seeing the differences between the standard language icon agreed upon over at the other tasks and the one here resulted in my comment.

@Volker_E i didnt know we fixed the BIG issue in the standard language icon. I will delete the one I provided here.

Nirzar updated the task description. (Show Details)Feb 29 2016, 9:32 PM

Updated mocks to use the standardized icons.

Nirzar updated the task description. (Show Details)Feb 29 2016, 9:34 PM

@Nirzar Looks good to me

It's mid sprint and no one had time to pick this card up yet?

Nirzar removed Nirzar as the assignee of this task.Mar 7 2016, 5:47 PM
bmansurov moved this task from To Do to Doing on the Reading-Web-Sprint-67-If, Then, Else...? board.

@Nirzar I wonder if the icon color and size need tweaking. Take a look at

.

Change 275881 had a related patch set uploaded (by Bmansurov):
WIP: Add an alternative language switcher button to the top of the page

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

bmansurov reassigned this task from bmansurov to jhobs.Mar 8 2016, 6:54 PM
bmansurov added a subscriber: jhobs.

@jhobs, the patch is ready for tests.

@bmansurov here's the one that will match

bmansurov added a comment.EditedMar 9 2016, 1:42 PM

Thanks!
This is how the button looks on Opera Mini beta 15.0.2125.101191 Android version:


Clicking on the link take the user to Special:MobileLanguages.

You can also see this in action at http://reading-web-staging.wmflabs.org/wiki/Lang?mobileaction=beta

iphone 6s plus iOS 9.2
https://gfycat.com/InstructiveWelcomeBronco

iPad Air iOS 8.1
https://gfycat.com/ReasonableEssentialArrowana

Also tested on iPhone 4s iOS 8.1 and Amazon Kindle PaperWhite and it looked and worked great.

jhobs added a comment.EditedMar 9 2016, 5:31 PM

After thinking about it for a while and chatting a bit with @bmansurov, I don't see the value of unit tests for this change. We're effectively just moving a link and changing some CSS. It's not a module, so QUnit tests are kind of out of the question, and a PHPUnit suite would basically just be testing one method that reads a boolean config variable. I have, however, added browser tests to the patch which should prove to be a more apt substitute.

Thoughts on removing unit tests from the AC, @dr0ptp4kt?

jhobs reassigned this task from jhobs to bmansurov.Mar 9 2016, 5:33 PM

Assigning back to Baha now that tests are on the patch (I'll keep an eye on reviews though).

@jhobs, sure no unit test is okay. Browser tests, good though.

dr0ptp4kt updated the task description. (Show Details)Mar 9 2016, 6:06 PM

I just tried again and can't replicate the failing test issue locally with the latest patch set. Can anyone else? I'm going to guess that it's a race issue, but if the next PS doesn't do the trick then I'm at a loss.

bmansurov added a comment.EditedMar 10 2016, 4:27 PM

Judging by the screenshot switching to beta isn't working. The screencast confirms my guess.

dr0ptp4kt updated the task description. (Show Details)Mar 14 2016, 4:23 PM
dr0ptp4kt updated the task description. (Show Details)

@bmansurov we descoped the A/B test aspects of this card

@bmansurov

While, we're at it, the watchlist icon is not standard icon from mw-ui.

phuedx added a subscriber: phuedx.Mar 15 2016, 9:33 AM

Judging by the screenshot switching to beta isn't working. The screencast confirms my guess.

Those links are dead now. Here's a link to the test failure screencast: https://integration.wikimedia.org/ci/job/mwext-mw-selenium/4662/artifact/log/Language%20selection%20via%20language%20switcher%20icon%3A%20Language%20icon.mp4.

It's clear that the "I am in beta mode" step isn't working.

Judging by the screenshot switching to beta isn't working. The screencast confirms my guess.

Those links are dead now. Here's a link to the test failure screencast: https://integration.wikimedia.org/ci/job/mwext-mw-selenium/4662/artifact/log/Language%20selection%20via%20language%20switcher%20icon%3A%20Language%20icon.mp4.
It's clear that the "I am in beta mode" step isn't working.

Anyone have an idea of how to fix? It works locally. I checked the cookies being set by that step definition against production; option: beta is correct but mf_useformat: true is not present in production.

I can only assume that the domain that the cookie is being set on is incorrect, possibly due to the host being 'localhost'. I don't usually run the integration tests against localhost – domain would be nil – but it's worth a shot.

It's weird because switching to a mobile view works (which also sets a cookie).

@Nirzar, you can see the language button and new watchstar icons at http://reading-web-staging.wmflabs.org/wiki/Lang?mobileaction=beta

@bmansurov i dont see both the changes we talked about? opacity for disabled button if languages dont exist and the left right alignment of buttons?

bmansurov added a comment.EditedMar 16 2016, 9:07 PM

@Nirzar, you're right. I forgot about it. So many moving parts. Could you remind me the left right alignment again? I'm working on the opacity now.

Edit: nm, I remembered

bmansurov updated the task description. (Show Details)Mar 16 2016, 9:16 PM

@Nirzar @bmansurov can you confirm that the current version is good to go (do a hangout if necessary to get design sign off)

Looks great. Design - Signed Off.

Change 275881 merged by jenkins-bot:
Beta: add an alternative language switcher button to the top of the page

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

bmansurov removed bmansurov as the assignee of this task.Mar 17 2016, 12:23 PM

Off to you whoever is doing the analysis (if there is any).

Merged. @dr0ptp4kt please review on the beta cluster when it has fully merged and sign off.

I think this has caused a CSS regression in stable which should be fixed asap:
T130745

@dr0ptp4kt this change is going live Thursday so could you please prioritise sign off for this card and the other in case there are any other regressions?

bmansurov added a comment.EditedMar 23 2016, 5:40 PM

It cannot have caused a problem in stable as the patch was designed for beta. Here is how it looks like with the patch: http://reading-web-staging.wmflabs.org/wiki/1?mobileaction=stable

Changes were made to code that runs in stable here, here, here and here.
Any of these changes could have unintentionally impacted stable.

Anyway, it doesn't matter how it broke, or who broke it just that it did break since last deployment, so somewhere something went wrong so let's investigate it and get it fixed and SWATed. I can handle a SWAT if necessary.

Do the needful...

This doesn't block the page actions bar with the lang switcher in beta.

https://en.m.wikipedia.org/wiki/Main_Page beta doesn't show an option to change languages for both RL and grade C.

There's some sort of glitch in the EL, but @bmansurov is already doing a review to double check that EL will be in working order on overlay-related work.

The UX otherwise seems to be working.

dr0ptp4kt updated the task description. (Show Details)Mar 25 2016, 7:24 PM

Okay to check the checkbox for ATDD tests?

https://en.m.wikipedia.org/wiki/Main_Page beta doesn't show an option to change languages for both RL and grade C.
There's some sort of glitch in the EL, but @bmansurov is already doing a review to double check that EL will be in working order on overlay-related work.
The UX otherwise seems to be working.

Good catch. We currently do not show page actions on the main page, so similar to the last modified bar we may need some special casing (e.g. show the default button). Can you open a new bug Adam?

Good catch. We currently do not show page actions on the main page, so similar to the last modified bar we may need some special casing (e.g. show the default button). Can you open a new bug Adam?

Done: T130956: No language switcher on Main Page in mobile web beta

Moving back to sign off. -1 column should only be used for code review. If there are explict tasks blocking sign off for this please add those blocking task to the to do column and make them block this card so it's clear to everyone what is left to do.

Note the task description made no reference to the main page situation so I think it's unfair to add T130956 to the acceptance criteria.

@bmansurov which URL(s) can I use to confirm?

dr0ptp4kt updated the task description. (Show Details)Mar 28 2016, 8:08 PM
dr0ptp4kt updated the task description. (Show Details)

Signing off. The following covered about an hour of data.

mysql:research@analytics-store.eqiad.wmnet [log]> select event_mobileMode, event_event, event_languageButtonVersion, count(*) from MobileWebLanguageSwitcher_15302503 where timestamp > '2016032819' group by event_mobileMode, event_event, event_languageButtonVersion;
event_mobileMode	event_event	event_languageButtonVersion	count(*)
beta	exitModal	NULL	4
beta	languageButtonImpression	NULL	194
beta	languageButtonTap	top-of-article	6
beta	languageListLoaded	NULL	5
beta	pageLoaded	NULL	233
stable	exitModal	NULL	22
stable	languageButtonImpression	NULL	3431
stable	languageButtonTap	bottom-of-article	36
stable	languageListLoaded	NULL	44
stable	pageLoaded	NULL	9741
stable	startLanguageSearch	NULL	1
dr0ptp4kt closed this task as Resolved.Mar 28 2016, 8:11 PM