Page MenuHomePhabricator

AMC page/talk toggle v1: Talk tab at the top of page for AMC users
Closed, ResolvedPublic8 Estimated Story Points

Description

Consider a feature branch to speed up development and encourage you to break this work into small progressive easily-reviewable chunks rather than one giant commit
To work out whether you are in AMC mode you will need to collaborate with whoever is working on T211197. You'll define the contract together given this is the first user, so think carefully!

This begins a set of changes to the talk page button which bring it to the top of the UI. For the purpose of this task, the changes here will result in 2 versions

  1. existing version (talk button at bottom of page)
  2. AMC version (talk button is displayed in a tab at the bottom of the page)

For the larger scope of the project and follow up changes please discuss on T210658: [EPIC] AMC Navigation - page/talk toggle.

Design notes

The treatment of the Article/Talk tabs will look like this:

article-talk-tabs.png (1×2 px, 757 KB)

The initial behavior of tapping on Talk will open the Talk overlay:

behavior.png (1×1 px, 428 KB)

If the talk page doesn't exist, the Talk tab will be rendered in Base30, #72777d:

no-talk.png (1×2 px, 766 KB)

For colors, spacing, font-styling, and any other styling details please reference the prototypes:
Without Wikidata description: https://mobile-contributions.firebaseapp.com/nav4.html
With Wikidata description: https://mobile-contributions.firebaseapp.com/nav4-subtitle.html

QA instructions

Environment: staging
Browser & device: mobile (iOS/Safari, Android/Chrome), desktop (MacOS/Safari, Windows/Chrome)
Skin: mobile/default, desktop/Minerva
Other: try a few different languages (work with @Jdlrobson to enable other languages on staging)
Steps:

    • visit the following pages... trying them both in AMC mode AND stable mode. We are most worried about UI regressions so it would be useful to compare pages with en.wikipedia.org side by side.
  • Article page: visit an article page, evaluate relevant acceptance criteria, tap the "Talk" tab, tap "Read as wiki page" (link at bottom), tap on "Article"
    • User page: repeat steps from bullet above
    • Main page: evaluate relevant acceptance criteria
  • Special pages: Special:MobileOptions, Special:Contributions: check for UI regressions comparing to production.
  • CACHED html page: http://reading-web-staging.wmflabs.org/w/skins/MinervaNeue/Singapore.html - we are changing the HTML as part of this change so it's important we consider implications on pages cached in Varnish. Check for UI regressions comparing to production.
  • AMC mode should be available in some configurations and unavailable in others. An easy way to check if AMC is available is to go to Minerva's settings page and look for a big "advanced mobile contributions" toggle. If the toggle is present, AMC is available. If the toggle is not present, AMC is unavailable. When the toggle is on, AMC is active. When the toggle is off, AMC is inactive. Another check that AMC is both available AND active are the new talk tabs.
    • AMC is both available AND active when logged in, the AMC toggle is on, AND JavaScript is disabled (server) OR enabled (client) on the mobile Minerva skin.
    • AMC is both unavailable AND inactive (identical to today's production) when not logged in AND JavaScript is disabled (server) OR enabled (client) on both the mobile Minerva skin AND desktop Vector skin.
    • AMC is both available AND inactive when logged in, the AMC toggle is off, AND JavaScript is disabled (server) OR enabled (client) on the mobile Minerva skin.

Acceptance criteria

  • For any page that has a talk page, the navigation will display two tabs: primary and talk/discussion
    • For pages that have an empty talk page, the talk page tab will still be displayed (no red link)
  • The new talk tab will behave exactly like the existing "Talk" button at the bottom of the page. The new link should be a link to the talk page and open the talk overlay when clicked. ie. No changes will be made to the existing behaviour of the button
  • Naming - the text on each tab will be the text appearing on the desktop versions of the page based on project, language, and namespace.
    • For example, the WP namespace will have tabs that read “project page” and “talk”
  • For pages that do not have a talk page, no second tab will be displayed.
    • For example, Special:SpecialPages will only have the default tab “Special page”
  • Make sure Return to "Sandwich" page. is removed from the bottom of the Talk:Sandwich page for advanced mobile contribution users (now we have a tab at the top of the page this is redundant). It should continue to display in non-AMC mode.
  • the tabs will appear under wikidata descriptions
  • The new functionality is present for logged in enabled client Minerva, logged in enabled server Minerva; the old functionality is maintained for logged in disabled client Minerva, logged in disabled server Minerva, logged out client, logged out server.
  • For pages that do not exist, the landing page will be the main (article) page and the talk page tab will display as in all other cases above.
  • verify that Wikipedia:New_user_landing_page flow still works properly

Developer notes

  • The tabs in Vector are generated in SkinTemplate ::buildContentNavigationUrls (in core). It would be wise to use the urls generated here rather than generating our own so labels are consistent with desktop. An opportunistic refactor here might be helpful but not mandatory.
  • Those tabs needs to be rendered in PHP inside SkinMinerva/MinervaTemplate. Make sure to check the config flag to work out if you are in AMC mode
  • Remember to drop the talk button at the bottom of the page if you are in AMC mode.
  • For the JS talk overlay to continue to function - all that is needed is to ensure it is marked up with the class "talk" and has a data-title attribute (see https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/b73f5c7520835cdbb3d0789f6201163a75fbefb9/includes/skins/user_page_links.mustache)

QA Results

ACStatusDetails))
1✅ PassedT212216#4983576
2✅ PassedT212216#4983576
3✅ PassedT212216#4983576
4✅ PassedT212216#4983576
5✅ PassedT212216#4986734
6✅ PassedT212216#4989565
7✅ PassedT212216#5008524
8✅ PassedT212216#4983576
9✅ PassedT212216#5008816

QA Results : Production

ACECARIDDetails))
1.1T212216#5047451
1.2T212216#5047451
2.1T212216#5047451
2.2T212216#5047451
3.1T212216#5047451
4T212216#5047451
5.1T212216#5047451
5.2T212216#5047451
6T212216#5047451
7.1T212216#5047451
7.2T212216#5047451
7.3T212216#5047451
8.1T212216#5047451
8.2T212216#5047451
9T212216#5047451

Event Timeline

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

Change 489010 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] page actions is no longer position absolute

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

I'll follow up with @alexhollender on the remaining design issues when the initial patch is merged. After reviewing and merging please throw back to me in doing. I'll respond to initial patch feedback today.

Change 483637 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Talk tabs in AMC mode

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

Change 489011 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Remove backwards compatible CSS

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

Change 490396 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Talk tab select should sit on top of page actions

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

This has been design reviewed. As long as no code changes it can go straight to QA.

Change 490396 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Talk tab select should sit on top of page actions

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

Test Result

OS: macOS Mojave
Browser: Chrome DevTools Device Emulator (iPhone X)

Test Artifact(s):

AC1: ✅ PASS
For any page that has a talk page, the navigation will display two tabs: primary and talk/discussion
AMC Off:

AC1_noAMC.png (2×1 px, 164 KB)

AMC On:
AC1_AMC.png (2×1 px, 163 KB)

AC2: ✅ PASS
For pages that have an empty talk page, the talk page tab will still be displayed (no red link)
AMC Off:

AC2_noAMC.png (2×1 px, 165 KB)

AMC On:
AC2_AMC.png (2×1 px, 165 KB)

AC3: ✅ PASS
The new talk tab will behave exactly like the existing "Talk" button at the bottom of the page. The new link should be a link to the talk page and open the talk overlay when clicked. ie. No changes will be made to the existing behaviour of the button
AMC on/off with no Talk page:

AC3_Both.png (2×1 px, 91 KB)

AMC on/off with Talk page:
AC3_BothTalk.png (2×1 px, 95 KB)

AC4: ✅ PASS
Naming - the text on each tab will be the text appearing on the desktop versions of the page based on project, language, and namespace.
For example, the WP namespace will have tabs that read “project page” and “talk”
For pages that do not have a talk page, no second tab will be displayed.
For example, Special:SpecialPages will only have the default tab “Special page”
Verified a number of pages. This artifact is representative of the sample:

AC4_Both.png (2×1 px, 262 KB)

AC4_BothDesktop.png (2×1 px, 464 KB)

AC5: ❌ FAIL
Make sure Return to "Sandwich" page. is removed from the bottom of https://en.m.wikipedia.org/wiki/Talk:Sandwich for advanced mobile contribution users (now we have a tab at the top of the page this is redundant). It should continue to display in non-AMC mode.
This was the same in staging at the URL above:

AC5_noAMC.png (2×1 px, 262 KB)

AC6: ⬜ Unable to test
the tabs will appear under wikidata descriptions
//Note: Could not find a page on staging with wikidata descriptions.

AC7: ⬜ Unable to test
The new functionality is present for logged in enabled client Minerva, logged in enabled server Minerva; the old functionality is maintained for logged in disabled client Minerva, logged in disabled server Minerva, logged out client, logged out server.

AC8: ✅ PASS
For pages that do not exist, the landing page will be the main (article) page and the talk page tab will display as in all other cases above.
AMC Off:

AC8_noAMC.png (2×1 px, 138 KB)

AMC On:
AC8_Both.png (2×1 px, 139 KB)

AC9:⬜ Unable to test
verify that Wikipedia:New_user_landing_page flow still works properly
//Need more info.

NOTE: Could not test Article as referenced in the QA steps. Could not find Article.

@Jdlrobson please see my comments on the items that were Unable to test. There is one Fail that I didn't catch in my first pass until I delved into the Acceptance Criteria a bit more.

@Jdlrobson please see my comments on the items that were Unable to test. There is one Fail that I didn't catch in my first pass until I delved into the Acceptance Criteria a bit more.

Not sure why but the test link was on production. Either way, I was able to reproduce on staging:

Screen Shot 2019-02-26 at 10.41.24 AM.png (723×408 px, 62 KB)

Thanks @ovasileva. I was curious why the link was for production. I did test it in Staging as well but only made a reference to that above the image of prod.

Change 493089 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Return to link is not needed in AMC mode on talk pages

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

Change 493089 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Return to link is not needed in AMC mode on talk pages

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

Back to you! This should now be behaving correctly!

AC5: ✅ PASS
Make sure Return to "Sandwich" page. is removed from the bottom of the Talk:Sandwich page for advanced mobile contribution users (now we have a tab at the top of the page this is redundant). It should continue to display in non-AMC mode.

Non-AMC:

AC5_noAMC2.png (2×1 px, 266 KB)

AMC:

AC5_AMC2.png (2×1 px, 277 KB)

@Jdlrobson That fix worked. There are still 4 things I need more info/assistance to test: I have them listed as AC6, AC7, and AC9 (see T212216#4983576). Also, the QA steps reference testing an Article. I cannot find an Article in staging.

Test Result

OS: iOS 12.1.4
Browser: Safari
Device: iPhone XS Max

Test Artifact(s):*AC6:** ✅ PASS
the tabs will appear under wikidata descriptions

IMG_1677.PNG (2×1 px, 346 KB)

Edtadros added a subscriber: pmiazga.

@Jdlrobson Thanks for helping with AC6

@Niedzielski Can you help out with AC7: "The new functionality is present for logged in enabled client Minerva, logged in enabled server Minerva; the old functionality is maintained for logged in disabled client Minerva, logged in disabled server Minerva, logged out client, logged out server." I need some guidance on how to test this.

@pmiazga Can you help out with AC9 "verify that Wikipedia:New_user_landing_page flow still works properly"

=== Test Result

AC7

Status: ✅ PASS
OS: macOS Mojave
Browser: Chrome DevTools Device Emulator (iPhone X)

Test Artifact(s):
AMC is both available AND active when logged in, the AMC toggle is on, AND JavaScript is disabled (server) OR enabled (client) on the mobile Minerva skin.
JS Disabled:

T212216-LoggedOn-NoJS-Settings-AmcOn.png (2×1 px, 242 KB)

T212216-LoggedOn-NoJS-AmcOn.png (2×1 px, 365 KB)

JS Enabled:
T212216-LoggedOn-JS-AmcON-Setting.png (2×1 px, 271 KB)

T212216-LoggedOn-JS-AmcON-page.png (2×1 px, 237 KB)

AMC is both unavailable AND inactive (identical to today's production) when not logged in AND JavaScript is disabled (server) OR enabled (client) on both the mobile Minerva skin AND desktop Vector skin.
JS Disabled:

T212216-LoggedOff-NoJS.png (2×1 px, 214 KB)

T212216-LoggedOff-NoJS-D.png (2×1 px, 137 KB)

JS Enabled:

T212216-LoggedOff-JS.png (2×1 px, 227 KB)

T212216-LoggedOff-JS-page.png (2×1 px, 218 KB)

T212216-LoggedOff-JS-D.png (2×1 px, 166 KB)

@Niedzielski Is this what is expected?
T212216-LoggedOff-JS-D-page.png (2×1 px, 166 KB)

AMC is both available AND inactive when logged in, the AMC toggle is off, AND JavaScript is disabled (server) OR enabled (client) on the mobile Minerva skin.//**
JS Disabled:

T212216-LoggedOn-NoJS-AmcOFF.png (2×1 px, 165 KB)

JS Enabled:

T212216-LoggedOn-JS-AmcOff-page.png (2×1 px, 230 KB)

AMC is both unavailable AND inactive (identical to today's production) when not logged in AND JavaScript is disabled (server) OR enabled (client) on both the mobile Minerva skin AND desktop Vector skin.
JS Enabled

T212216-LoggedOff-JS-page.png (2×1 px, 218 KB)

This looks like a bug to me. Where is the discussion button?

Test Result

Status: ✅ PASS
Worked with @pmiazga to test this.

Test Artifact(s):
AC9:verify that Wikipedia:New_user_landing_page flow still works properly*

localhost_8080_w_index.php_title=Test_page_two&action=edit&redlink=1(Pixel 2).png (1×1 px, 71 KB)

localhost_8080_w_index.php_title=Wiki_New_user_landing_page&page=Test+page+two(Pixel 2).png (1×1 px, 236 KB)

@Niedzielski the Discussion button does show up when logged in. That screenshot was for the case where the user was logged in, AMC was disabled, and JS was enabled. Should this go back to Needs More Work?

Edtadros updated the task description. (Show Details)

It took some time...but everything is verified and passed! Thanks Everyone!

Thanks all for all your hard work on this. Talk tabs are done!

Test Results: Production

OS: iOS
Browser: Chrome for iOS

Test Artifact(s):

AC1:
For any page that has a talk page, the navigation will display two tabs: primary and talk/discussion
AC1.1 AMC Off:

eswiki: ✅arwiki: ✅idwiki: ✅
IMG_C4AF596F6125-1.jpeg (2×1 px, 703 KB)
IMG_E794E0089718-1.jpeg (2×1 px, 706 KB)
IMG_1A681C15916C-1.jpeg (2×1 px, 593 KB)

AC1.2 AMC On:

eswiki: ✅arwiki: ✅idwiki: ✅
IMG_BC489A920F6C-1.jpeg (2×1 px, 844 KB)
IMG_489AE0109E3F-1.jpeg (2×1 px, 856 KB)
IMG_147767579C2E-1.jpeg (2×1 px, 573 KB)

AC2:
For pages that have an empty talk page, the talk page tab will still be displayed (no red link)
AC2.1 AMC Off:

eswiki: ✅arwiki: ✅idwiki: ✅
IMG_20BF8AA8D763-1.jpeg (2×1 px, 886 KB)
IMG_E794E0089718-1.jpeg (2×1 px, 706 KB)
IMG_1A681C15916C-1.jpeg (2×1 px, 593 KB)

AC2.2 AMC On:

eswiki: ✅arwiki: ✅idwiki: ✅
IMG_375649B245B9-1.jpeg (2×1 px, 842 KB)
IMG_489AE0109E3F-1.jpeg (2×1 px, 856 KB)
IMG_147767579C2E-1.jpeg (2×1 px, 573 KB)

AC3:
The new talk tab will behave exactly like the existing "Talk" button at the bottom of the page. The new link should be a link to the talk page and open the talk overlay when clicked. ie. No changes will be made to the existing behaviour of the button
AC3.1 AMC on/off with no Talk page:

eswiki: ✅arwiki: ✅idwiki: ✅
IMG_63F145954BCB-1.jpeg (2×1 px, 255 KB)
IMG_177C7AD7A807-1.jpeg (2×1 px, 179 KB)
IMG_1A681C15916C-1.jpeg (2×1 px, 593 KB)

AC3.2 AMC on/off with Talk page:

eswiki: ✅arwiki: ✅idwiki: ✅
IMG_594EE77FA211-1.jpeg (2×1 px, 335 KB)
IMG_1A2FE6392570-1.jpeg (2×1 px, 186 KB)
IMG_E63B8EA12DE9-1.jpeg (2×1 px, 508 KB)

AC4:
Naming - the text on each tab will be the text appearing on the desktop versions of the page based on project, language, and namespace.
For example, the WP namespace will have tabs that read “project page” and “talk”
For pages that do not have a talk page, no second tab will be displayed.
For example, Special:SpecialPages will only have the default tab “Special page”
Verified a number of pages. This artifact is representative of the sample:

eswiki: ✅arwiki: ✅idwiki: ✅
IMG_8948FF48EE8D-1.jpeg (2×1 px, 972 KB)
IMG_F441B30D6EB0-1.jpeg (2×1 px, 628 KB)
IMG_644F7FEA3C69-1.jpeg (2×1 px, 955 KB)

AC5:
AC5.1 Make sure Return to "Sandwich" page. is removed from the bottom of https://en.m.wikipedia.org/wiki/Talk:Sandwich for advanced mobile contribution users (now we have a tab at the top of the page this is redundant).

eswiki: ✅arwiki: ✅idwiki: ✅
IMG_1F1AB0867428-1.jpeg (2×1 px, 729 KB)
IMG_6F091EE97388-1.jpeg (2×1 px, 336 KB)
IMG_BE2D7029F952-1.jpeg (2×1 px, 588 KB)

AC5.2 It should continue to display in non-AMC mode.

eswiki: ✅arwiki: ✅idwiki: ✅
IMG_A5B2ED482416-1.jpeg (2×1 px, 656 KB)
IMG_6994936E08FB-1.jpeg (2×1 px, 361 KB)
IMG_83BF4E06D290-1.jpeg (2×1 px, 689 KB)

AC6:
the tabs will appear under wikidata descriptions

eswiki: ✅arwiki: ✅idwiki: ✅
IMG_5771C7FC4452-1.jpeg (2×1 px, 887 KB)
IMG_55580243D899-1.jpeg (2×1 px, 675 KB)
IMG_45B0A9D1538E-1.jpeg (2×1 px, 600 KB)

AC7:
The new functionality is present for logged in enabled client Minerva, logged in enabled server Minerva; the old functionality is maintained for logged in disabled client Minerva, logged in disabled server Minerva, logged out client, logged out server.

AC7.1 Logged In with JS off

eswiki: ✅arwiki: ✅idwiki: ✅
IMG_F665BBB1696F-1.jpeg (2×1 px, 512 KB)
IMG_7A79075A08A8-1.jpeg (2×1 px, 370 KB)
IMG_C314C4D0B842-1.jpeg (2×1 px, 498 KB)

AC7.2 Not Logged in with JS off

eswiki: ✅arwiki: ✅idwiki: ✅
IMG_0A940B5CFE18-1.jpeg (1×1 px, 397 KB)
IMG_B2D37B0E02E2-1.jpeg (1×1 px, 654 KB)
IMG_90759894830F-1.jpeg (1×1 px, 584 KB)
IMG_FAE5B14A0406-1.jpeg (840×1 px, 208 KB)
IMG_211CF3F363FC-1.jpeg (798×1 px, 139 KB)
IMG_84D0230C58D6-1.jpeg (830×1 px, 181 KB)

AC7.3 Logged In with JS off and AMC ON

eswiki: ✅arwiki: ✅idwiki: ✅
IMG_DC6120CBE6EE-1.jpeg (2×1 px, 750 KB)
IMG_10926F237A64-1.jpeg (2×1 px, 1012 KB)
IMG_1D21122ADADF-1.jpeg (2×1 px, 1 MB)

AC8: ✅ PASS
For pages that do not exist, the landing page will be the main (article) page and the talk page tab will display as in all other cases above.
AC8.1 AMC Off:

eswiki: ✅arwiki: ✅idwiki: ✅
IMG_E9DB6B13ADCE-1.jpeg (2×1 px, 981 KB)
IMG_98A852B0D74B-1.jpeg (2×1 px, 327 KB)
IMG_02398705110B-1.jpeg (2×1 px, 668 KB)

AC8.2 AMC On:

eswiki: ✅arwiki: ✅idwiki: ✅
IMG_F6D19A3B835C-1.jpeg (2×1 px, 678 KB)
IMG_8D61E7D6FCD7-1.jpeg (2×1 px, 384 KB)
IMG_2AC2703935EC-1.jpeg (2×1 px, 704 KB)

AC9:⬜ Out of Scope
verify that Wikipedia:New_user_landing_page flow still works properly

eswiki: ⬜arwiki: ⬜idwiki: ⬜

This is not in scope for eswiki, arwiki, or idwiki.

Per @pmiazga:
that page is provided by ArticleCreationWorkflow extension
https://www.mediawiki.org/wiki/Extension:ArticleCreationWorkflow
and
per https://raw.githubusercontent.com/wikimedia/operations-mediawiki-config/master/wmf-config/InitialiseSettings.php it's used

'wmgUseArticleCreationWorkflow' => [
    'default' => false,
    'testwiki' => true,
    'test2wiki' => true, // T175302
    'enwiki' => true, // T192455
],

@Jdlrobson I get a very brief popup from the bottom, but it goes away. I've tried clicking it, it does nothing. Is it possible to get it in production?

Edtadros updated the task description. (Show Details)

@pmiazga please go to the very bottom of T212216#5047451 the only item remaining to test is AC9 for Arabic. You helped me test it before. It appears we are looking for a page with the discussion tab and project page tab, but I'm not entirely sure.

@pmiazga thanks for clarifying this. I have updated T212216#5047451 with the info you provided.