Mobile page issues - allow page issues to display different severity levels
Open, HighPublic3 Story Points

Description

Background

We would like to display issues with different severity (based on ambox type) differently

Precursors

T191303 should be done before tackling this task.

User story

As a reader, I want the ability to distinguish between severe, moderate, and low priority issues on a page, so that I can gauge the overall reliability of the article

Acceptance criteria

Create severity logic by ambox type

Severity - severity will be set according to ambox type(https://en.wikipedia.org/wiki/Template:Ambox#type) as follows:

  • High: type=speedy, type=delete
  • Medium: type=content, type=pov
  • Low: type=style
  • Notice: type=notice, type=move, type=protection

All other templates will display with normal severity

Issues will change position and styling based on severity level (as defined in design criteria below)

Severity logic for multiple issues

  • Issue severity level will be derived from the severity levels of the individual issues. If an article contains the template {{Multiple issues}}, the issue level of the article will be the highest issue level available

Example: if template {{Disputed title}} has level high, the article https://en.wikipedia.org/wiki/Chinese_unification will have issues appear at high level

  • Each multiple issue level will receive unique copy, appearance, and position within the page (as defined below). Individual descriptions for issues will not be used.

Design criteria

Default Icons

Each severity level has a default icon. For cases where we can't identify the severity level see unknown below.

severity leveldefault iconcolorin OOUI?example
high#DD3333yes (alert)
medium#FF5D01yes (notice)
low(in svg)no
notice#54595dyes (alert)
unknown#54595dyes (alert)

Specialized icons

For some templates there are specialized icons which should be used instead of the defaults.

templateseverity leveliconcolorin OOUI?example
povmedium#54595dno
movenotice(multiple, in svg)no

Multiple issues

Use the default icon of the issue with the highest severity level among the multiple issues. For example: if the highest severity level of the multiple issues was medium, the issue would look like this:

Notes and questions

enwikieswikijawikiruwikiitwiki
parameter nametypetipotypetypetipo
Severespeedy, deleteserioSame as enwikiSame as enwikiimportante
MediumcontentcontenidoSame as enwikiSame as enwikicontenuto
LowstyleestiloSame as enwikiSame as enwikistile, struttura
Noticenotice, move, protectiontipo=fusionar, tipo=desarrollo, tipo=avisoSame as enwikiSame as enwikiavviso, generico
https://en.wikipedia.org/wiki/Template:Amboxhttps://es.wikipedia.org/wiki/Plantilla:Metaplantilla_de_avisoshttps://ja.wikipedia.org/wiki/Template:Amboxhttps://ru.wikipedia.org/wiki/%D0%A8%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD:Amboxhttps://it.wikipedia.org/wiki/Template:Avviso
ovasileva created this task.Apr 5 2018, 2:06 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 5 2018, 2:06 PM
ovasileva triaged this task as High priority.Apr 30 2018, 9:44 PM
ovasileva moved this task from To Triage to Needs Analysis on the Readers-Web-Backlog board.
ovasileva added a subscriber: Jdlrobson.
Jdlrobson updated the task description. (Show Details)May 1 2018, 10:42 PM
ovasileva removed alexhollender as the assignee of this task.May 9 2018, 11:30 AM
ovasileva added a subscriber: alexhollender.
Jdlrobson added a comment.EditedJun 13 2018, 9:52 PM

How is this different from T191529 ? Not at all clear... in fact I'm getting muddled up with both of these tasks. It feels like these two tasks can be merged and worked on together, unless I'm misunderstanding something.

ovasileva updated the task description. (Show Details)Jun 14 2018, 4:41 PM

Re-estimated this. Still a 3.

@alexhollender in the description, could you add links to the image assets pls?

@Jdrewniak just added assets in the Design criteria section. I've confused myself a bit — above it looks like notice, move, and protection all use the same icon (gray warning triangle), and content and pov both use the same icon (orange warming circle), but over here I've got them broken out. Does it add a lot of complexity? Totally happy to just use one icon per group.

@Jdrewniak just added a column to the asset table indicating which icons you can get from OOUI and what their OOUI names are

@alexhollender thanks!

After digging around a bit, I realized that @Jdlrobson already included these images in the repo as a ResourceLoader module.
https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/f1a1edcd272bf116b96a264641d7ded56834a39a/skin.json#L242

Loading icons via CSS 🕵️‍

As mentioned in T191303#4282504 I have a deep desire to render these icons via css instead of javascript. I think the benefit of this approach would be that the icons would load on the page sooner. The downside is that they might slow down the page-load time.

I wanted to investigate what the cost of loading these icons up-front would be. On the face of it, these icons are very small. Each SVG weighs less than 0.5kb, together they all weigh about 4kb. That's not the whole story though. ResourceLoader embeds these SVG's as embedded URIs. If we were to load the entire ResourceLoader module on every page, that would add 7kb to every page load.
https://en.m.wikipedia.org/w/load.php?modules=skins.minerva.icons.images.scripts&only=styles (7kb)

That's a pretty large size increase to add to every page, especially considering that most of these icons will probably go unused.

However, the majority of the bytes in this module are the data URIs. If we were to remove the data URIs, and instead just point to the file URLs, then this module would be probably be around 1kb. The benefit of doing that would be that the only the images that are needed would get downloaded. If a CSS selector doesn't match any element on the page, then that image isn't loaded. The downside of this would be that each image would require it's own http request.

I think that occasional extra http request might not be so bad, especially since the browser will probably cache the image. It wouldn't slow down page-load (the image download is non-blocking), and it would make the icons load faster.

The only problem is that I don't know if ResourceLoader can optionally *not* encode the data-uri's. @Jdlrobson, do you?

That's a pretty large size increase to add to every page, especially considering that most of these icons will probably go unused.

Yeh, that's not acceptable, given we currently ship 8kb of css overall, so this would double that.

However, the majority of the bytes in this module are the data URIs. If we were to remove the data URIs, and instead just point to the file URLs, then this module would be probably be around 1kb.

True, but there would still be a delay in loading the image due to the fetch and given the majority of pages don't have issues (I'd guestimate less than 50% of them do), bloated CSS on pages which don't need it.

The only problem is that I don't know if ResourceLoader can optionally *not* encode the data-uri's. @Jdlrobson, do you?

Nope. The SVGs ResourceLoader ships are modified SVGs (since that's how it allows you to change icon colors) and have no file system equivalent resource to link to.

I think the real problem is that this whole project is a hack :) It's worth pointing out that we are unnecessary downloading the icon that editors provide and throwing our own styles on top (e.g. https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Ambox_important.svg/40px-Ambox_important.svg.png is downloaded on https://en.m.wikipedia.org/wiki/Chinese_unification despite never displaying). The real fix here is to get the icons in https://en.wikipedia.org/wiki/Template:Disputed_title refreshed. There's no guarantee editors will want to use them, but we haven't asked them and they might appreciate those icons. To me that seems worth trying before piling on the hacks.

Our solution, is always going to be suboptimal given the approach we are taking and we already have a trail of tech debt in MobileFormatter trying to force it to display how we want.

My advice given the above would be to keep the delay and JavaScript load of the icons for the time being and investigate whether we can have any success refreshing those icons (which would also make mobile and desktop more consistent).

phuedx added a subscriber: phuedx.Wed, Jul 4, 10:57 AM

What about using a sprite? The worst case performance impact would be:

  • A small render-blocking CSS file defining the sprite, which would trigger:
  • A non-render-blocking HTTP request for the sprite image.

Like the ResourceLoader-defined SVGs as data URIs, when the sprite image is loaded (either from the browser cache or otherwise) all icons on the page can be rendered as soon as possible.

https://en.wikipedia.org/wiki/Template:Disputed_title

This particular template does not require templateeditor permissions. However, according to Wikipedia:Template_editor, we should seek discussion before updating these icons. Do we want to start this process?

Need to get severity list for different languages

Do we have this yet?

The only problem is that I don't know if ResourceLoader can optionally *not* encode the data-uri's.

Jan, Sam, and I discussed this briefly out of band. We think we can remove the skin.json ResourceLoader module for the icons and set background-image directly. Using a ResourceLoader module generates data URIs automatically and so does usage of the .background-image-svg LESS mixin. Instead, we can initially use .background-image-svg / ResourceLoader module during development to generate optimized, colored, SVG and fallback PNGs locally and then specify both SVG and PNG fallbacks using CSS's background-image directly and remove the .background-image-svg / module.

ovasileva updated the task description. (Show Details)Thu, Jul 5, 1:55 PM

@Niedzielski

https://en.wikipedia.org/wiki/Template:Disputed_title

This particular template does not require templateeditor permissions. However, according to Wikipedia:Template_editor, we should seek discussion before updating these icons. Do we want to start this process?

The new icons will only be used for mobile so I think we're good to go. We are messaging out to all templates so template editors will be aware changes are coming up.

Need to get severity list for different languages

Do we have this yet?

now in task description

Niedzielski moved this task from To Do to Doing on the Readers-Web-Kanbanana-Board board.

Change 443982 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/skins/MinervaNeue@master] POC: hack out auto-inlining SVGs

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

Change 443982 abandoned by Niedzielski:
POC: hack out auto-inlining SVGs

Reason:
just a demo

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

@alexhollender, I'm struggling a little bit understanding the distinction between type and level so I wanted to jot down my thinking and make sure it matches yours expectations. I'm on holiday tomorrow but maybe we can sync up on it Monday if my comment doesn't make sense?

We have a few specific icons (e.g., point of view, content, delete, ...) and these have severity levels that only matter when there are multiple issues. If there is only one issue, we use the specific icon and severity is an unused concept. However, if there are multiple issues...

  1. Severity is only used to pick the highest priority specific icon?
  2. What do we do when there are multiple issues of the same severity but different iconography? For example, pov and content. Both are high severity but their icons differ.
  3. The task says that "all other templates will display with normal severity." However, we don't have a normal severity icon so I think this means that we use the template's icon, whatever it is?
  4. I think the assets table is ordered from most severe to least but there's no concept of "normal" severity. Should I consider "normal" greater than "low" but lesser than "high" severity?
  5. There's a severity and icon called "multiple". What I do with this asset if I'm only showing the highest severity icon?

Notes and questions

@ovasileva, thanks for recording all these crosslanguage types! It would be super helpful to have the pages / templates you pulled this information from directly (sorry if I missed these in a linked ticket or email!). I know that @Jdrewniak has a massive catalog of page issues (source) but I'm not sure how to map these to types.

I think @alexhollender wants me to show issues by their type, not their severity grouping, so I would need to know how type (technically CSS class) maps to severity level, not severity level maps to type. Or I'm wrong! Either way, I'll be working lots with the templates and articles so having them would be super super helpful and I'm happy to extrapolate whatever info I need from the pages myself


My advice given the above would be to keep the delay and JavaScript load of the icons for the time being and investigate whether we can have any success refreshing those icons (which would also make mobile and desktop more consistent).

@Jdlrobson, I just wanted to confirm that I'm not to touch the existing state. We do have T191528#4399645 as a workaround but it sounds like you're committed to tackling the ResourceLoader image module @phuedx recommended in a future task and in the meantime, template editors can update their assets.

types

@Jdlrobson, I have to map issue types to CSS classes where available (and when they're unavailable, I'll have to punt until template editors can make updates). There's no other way to get the type AFAIK. This is already done (by you, I think) in utils.js for enwiki, which is also used in many other places. I could rewrite the logic to allow the translators to specify the CSS selectors they wish to use but it'll break when using a non-native wiki language (e.g., Italian interface on Russian Wikipedia). I feel weird about hardcoding the selector in for a half-dozen wikis though. Do we have any other options given the current template landscape? I've edited a few templates on enwiki in the past but I don't have templateeditor permissions yet, especially on other wikis.

ovasileva updated the task description. (Show Details)Mon, Jul 9, 8:39 AM

@alexhollender, I'm struggling a little bit understanding the distinction between type and level so I wanted to jot down my thinking and make sure it matches yours expectations. I'm on holiday tomorrow but maybe we can sync up on it Monday if my comment doesn't make sense?

We have a few specific icons (e.g., point of view, content, delete, ...) and these have severity levels that only matter when there are multiple issues. If there is only one issue, we use the specific icon and severity is an unused concept. However, if there are multiple issues...

  1. Severity is only used to pick the highest priority specific icon?
  2. What do we do when there are multiple issues of the same severity but different iconography? For example, pov and content. Both are high severity but their icons differ.
  3. The task says that "all other templates will display with normal severity." However, we don't have a normal severity icon so I think this means that we use the template's icon, whatever it is?
  4. I think the assets table is ordered from most severe to least but there's no concept of "normal" severity. Should I consider "normal" greater than "low" but lesser than "high" severity?
  5. There's a severity and icon called "multiple". What I do with this asset if I'm only showing the highest severity icon?

    ---

Severity should be per issue (not only for multiple issues). @alexhollender - let's sync on this today

Notes and questions

@ovasileva, thanks for recording all these crosslanguage types! It would be super helpful to have the pages / templates you pulled this information from directly (sorry if I missed these in a linked ticket or email!). I know that @Jdrewniak has a massive catalog of page issues (source) but I'm not sure how to map these to types.

Added links to the table above

Here are my notes from the meeting:

  • Severity is derived from the original template coloring. It can be used to apply a new predefined severity color.
  • There are a handful of specific icons that will be used to replace existing template icons. For example, point of view. A generic icon for each severity level will be provided as well in the common case that a specific icon was not provided by Alex. Lastly, an overarching uber-generic icon will be provided in the case that severity cannot be identified.
  • The derivation of severity is independent of icon.
  • The derivation of icon is based based on template and severity.

The steps to build the new UI might be:

  1. Identify the severity level using the existing template color classes like .ambox-content. If the severity is unknown, use "normal."
  2. Identify the template icon to use by classes like .ambox-speedy. If the template is unknown or if the template is for multiple issues, use "generic."
  3. Show with the template icon and severity color.

/cc @ovasileva @alexhollender

alexhollender updated the task description. (Show Details)Mon, Jul 9, 5:44 PM

I've updated the task description to reflect the following:

  1. each severity level has a default icon
  2. if severity can’t be determined use the default icon for severity level notice
  3. if there are multiple issues use the default icon from the issue with the highest severity level
  4. for some templates there are specialized icons which should be used instead of the defaults
alexhollender updated the task description. (Show Details)Mon, Jul 9, 6:03 PM
Tbayer added a subscriber: Tbayer.Tue, Jul 10, 12:15 AM

Change 444951 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/core@master] Update: allow ResourceLoader selectorWithoutVariant to be overridden per image

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

Change 444952 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/skins/MinervaNeue@master] Update: page issue icons

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

Change 444951 abandoned by Niedzielski:
Update: allow ResourceLoader selectorWithoutVariant to be overridden per image

Reason:
Thanks for checking this out, Bartosz. I'm abandoning this patch for the time being until we're certain we need it.

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

Niedzielski removed Niedzielski as the assignee of this task.

@alexhollender / @ovasileva, if you have the time to take a quick peek at this before it's reviewed, I've posted the latest revision up here: http://reading-web-staging.wmflabs.org/.

@Niedzielski looking good. Here are some screenshots of the icon logic working correctly:

highmediumlownoticemultiple (correctly displaying the icon of the higher severity issue)

Regarding the specialty icons, it seems like they are displaying in the modal but not in the banner:

Template:POV, bannerTemplate:POV, modal

I'm realizing that I never gave you a list of which templates to associate with the specialty icons.

  • POV - I searched through Jan's page for all templates that use the Unbalanced scales.svg icon. There are 14 matches that seem appropriate:
    • Template:COI
    • Template:Coverage
    • Template:Criticism section
    • Template:Fringe theories
    • Template:GenderPOV
    • Template:NPOV language
    • Template:Paid contributions
    • Template:POV
    • Template:Pseudo
    • Template:Systemic bias
    • Template:Unbalanced
    • Template:Unbalanced section
    • Template:USgovtPOV
    • Template:Geographical imbalance (this one uses the scale as a secondary icon)
  • Move - I searched for move/moved, there are 7 matches that seem appropriate:
    • Template:Converted
    • Template:Copy to Wikibooks
    • Template:Copy to Wikiversity
    • Template:DabprimaryExpand
    • Template:Dicdef
    • Template:InterTransWiki
    • Template:Not English (questionable)

@ovasileva @Niedzielski do these lists feel appropriate to you?

mw-ui-icon-minerva-issue-severity-medium-mediumColor looks blurry to me when rendered as a small icon


Is that intentional?

mw-ui-icon-minerva-issue-severity-medium-mediumColor looks blurry to me when rendered as a small icon

that's odd, the color also looks off (too dark)

that also reminds me, @Niedzielski would this be the appropriate ticket to talk about minor CSS tweaks to the icon element? Just changed this to 75% and the icons being slightly bigger looks nice:

.mw-ui-icon.mw-ui-icon-small:before {
    background-size: 75% auto;
}

mw-ui-icon-minerva-issue-severity-medium-mediumColor looks blurry to me when rendered as a small icon


Is that intentional?

it looks blurry to me as well, but the color seems fine. Everything else is looking really nice.

Regarding the specialty icons, it seems like they are displaying in the modal but not in the banner

Dang, I think I misunderstood the requirements. Fixed!

I'm realizing that I never gave you a list of which templates to associate with the specialty icons.

Updates below!

POV

  • Template:COI .ambox-COI, already covered.
  • Template:Coverage - Unsupported, no distinguishing CSS class.
  • Template:Criticism section - Unsupported, no distinguishing CSS class.
  • Template:Fringe theories - .ambox-fringe-theories, added. I did not notice any equivalent non-enwiki templates on Jan's chart.
  • Template:GenderPOV - .ambox-POV, already covered.
  • Template:NPOV language - .ambox-npov-language, already present.
  • Template:Paid contributions - .ambox-COI, already covered.
  • Template:POV - .ambox-POV, already covered.
  • Template:Pseudo - Unsupported, no distinguishing CSS class.
  • Template:Systemic bias - .ambox-systemic-bias, added. I did not notice any equivalent non-enwiki templates on Jan's chart.
  • Template:Unbalanced - Unsupported, no distinguishing CSS class.
  • Template:Unbalanced section - Unsupported, no distinguishing CSS class.
  • Template:USgovtPOV - Unsupported, no distinguishing CSS class.
  • Template:Geographical imbalance (this one uses the scale as a secondary icon) - Unsupported, no distinguishing CSS class.

Move

  • Template:Converted - Unsupported, no distinguishing CSS class.
  • Template:Copy to Wikibooks - .ambox-move, already covered.
  • Template:Copy to Wikiversity - .ambox-move, already covered.
  • Template:DabprimaryExpand - Unsupported, no distinguishing CSS class.
  • Template:Dicdef - .ambox-move, already covered.
  • Template:InterTransWiki - .ambox-move, already covered.
  • Template:Not English (questionable) - I can identify this but the CSS class, .ambox-not_English, seems like it's going to differ on most wikis.

CSS tweaks

It seemed like an easy change so I just rolled it in!

blurry

Does "high.svg" need the same special low resolution integer considerations you made for the interwiki icons? See how they look at 75%.

..And I think that's it! The latest and greatest is up on reading-web-staging.wmflabs.org.