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
- existing version (talk button at bottom of page)
- 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:
The initial behavior of tapping on Talk will open the Talk overlay:
If the talk page doesn't exist, the Talk tab will be rendered in Base30, #72777d:
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
AC | Status | Details)) |
1 | ✅ Passed | T212216#4983576 |
2 | ✅ Passed | T212216#4983576 |
3 | ✅ Passed | T212216#4983576 |
4 | ✅ Passed | T212216#4983576 |
5 | ✅ Passed | T212216#4986734 |
6 | ✅ Passed | T212216#4989565 |
7 | ✅ Passed | T212216#5008524 |
8 | ✅ Passed | T212216#4983576 |
9 | ✅ Passed | T212216#5008816 |
QA Results : Production
AC | EC | AR | ID | Details)) |
1.1 | ✅ | ✅ | ✅ | T212216#5047451 |
1.2 | ✅ | ✅ | ✅ | T212216#5047451 |
2.1 | ✅ | ✅ | ✅ | T212216#5047451 |
2.2 | ✅ | ✅ | ✅ | T212216#5047451 |
3.1 | ✅ | ✅ | ✅ | T212216#5047451 |
4 | ✅ | ✅ | ✅ | T212216#5047451 |
5.1 | ✅ | ✅ | ✅ | T212216#5047451 |
5.2 | ✅ | ✅ | ✅ | T212216#5047451 |
6 | ✅ | ✅ | ✅ | T212216#5047451 |
7.1 | ✅ | ✅ | ✅ | T212216#5047451 |
7.2 | ✅ | ✅ | ✅ | T212216#5047451 |
7.3 | ✅ | ✅ | ✅ | T212216#5047451 |
8.1 | ✅ | ✅ | ✅ | T212216#5047451 |
8.2 | ✅ | ✅ | ✅ | T212216#5047451 |
9 | ⬜ | ⬜ | ⬜ | T212216#5047451 |