Precursor
T193584 should have been completed before taking on this work. You can work on this in parallel with that task provided you have synced with whoever is implementing T193584.
Background
We will do the page issues work in a series of steps. The first step would be to adopt the new visual styles for all page issues. These styles will not distinguish issues based on type or severity of the issue. They will also only use the long-form version of the issue on issue text (using hide when compact will be implemented in a separate step). This task will reflect the default state for page issues.
User story
As a reader, I want the ability to know details about the issues the page I’m reading has so that I can take them into consideration while reading
Acceptance criteria
Page issues will display the following:
- Issue description capped to a certain height. Use overflown hidden for the time being - it is okay for text to be clipped half way - a follow up will take care of this.
- Learn more on a new line.
- Icon
- Link navigating to issue modal
- Visual changes as defined below
- For all ambox templates containing hidable elements, display the "hide when compact" version of the issue decription
- Apply the changes to the following wikis: English, Chinese, Russian, French, Japanese (inventory of hidable elements can be found here: https://www.mediawiki.org/wiki/Reading/Web/Projects/Mobile_Page_Issues#Inventory_of_mobile-friendly_page_issues)
Design Criteria
Generic page issue treatment (rationale for using the lower severity icon for all issue levels: in terms of keeping users trust, it seems like it'd be worse to raise too high an alarm for a low-level issue, than too raise too low an alarm for a high-level issue)
Developer notes
- Once T193584 is done, this should simply be a case of adding the new CSS. Implementor should be wary of unused CSS and CSS bloat when working on this (but we may need to accept it as part of this change and to support the A/B test). The icon should not be render blocking CSS - reserve space for it in the stylesheet and load it via JavaScript (using last modified bar for inspiration)
Testing steps
The A/B test is setup on staging to turn on the new treatment for 50% of traffic.
http://reading-web-staging.wmflabs.org/wiki/Boi_(slang)?useformat=mobile
TO bucket yourself in the new design, you can either
- Open an incognito window and close it and reopen until you are bucketed correctly - 50% chance!
- Run the following code in the console and refresh the page until you are bucketed
mw.storage.session.remove('mwuser-sessionId')Sign off steps
Ensure we've captured tasks for the following lingering issues:
- [am]box templates on category page/talk page
- truncating text of issues
- concerns around late loading of icon and 'read me' captured in T191528
