Page MenuHomePhabricator

Improve Page Issue modal
Closed, ResolvedPublic3 Story Points

Description

Problem

  • The modal window for Page Issues does not give enough information, specially considering the upcoming work around exposing these issues on article as part of T159262
  • The iconography should be accessible and indicative of type of the issue
  • Repetitive link to the "How to fix" issues in case of multiple issues

Design changes proposed

  1. show the hidden information from DOM (.hide-when-compact)
  2. format the hidden information differently from non-hidden information
  3. move the icon to the left/right based on LTR/RTL
  4. Use ambox type for icon type
  5. change the modal title to "Page Issues"

6. style the date in tag
7. add permanent list item at the bottom that takes the user to Help:Maintenance_template_removal

most of these are css changes. a little change to html here

Mock
Single issue

Multiple issues stack as list items

Format changes

  • Show .hide-when-compact
  • make .hide-when-compact block element, reduce the font size
  • make small > i block elements should have their own lines. this will put the date and "learn how to rmeove this message" anchor tag on different lines

Acceptance criteria

  • All remaining changes proposed above
  • Create task to account for remaining changes (the ones currently struck through)
  • Add to release timeline

Note on ambox type (for future iteration)

Design will provide icons for different types of issues
the classnames from original template has things like "mw-ui-icon-mf-cleanup-gray mw-ui-icon-before issue-notice"

Types and iconography

Ambox class => Icons

ClassIcon
.ambox-speedy
.ambox-delete
.ambox-content
.ambox-content.ambox-pov
.ambox-style
.ambox-move
.ambox-protection
if no class matches from above - default issue icon

The icons are purpofuly kept very similar to desktop as editors are used to identifying type of issue with the icons.
here's a comparison

open questions

  1. do all "help remove page issues" link to the same help namespace? how does it work on different languages
  2. how does this work on large screens
  3. is date tag easily scrap-able. we should be careful about touching unstructured html. might break something somewhere we wont even know
  4. should we do this work before we structure page issues semantically
  5. need more examples of multiple issues, multiple types of issues together.

closed questions

q. have we thought of issues with looong description
a: yes, this modal window is supposed to give more information about the issue. being a modal, it takes the user out from reading article context.

q. why are the icons different than vector
a: a lot of vector UI assets come from commons. mobilefrontend controls most of the UI for us. we need to update the icons to match wikimedia style guide iconography and MF is the first place we should do it. changing anything on vector is not a page issue specific task. it's a wider problem to solve.

Testing

Test articles can be found here: https://en.wikipedia.org/wiki/Category:Articles_with_multiple_maintenance_issues

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 21 2018, 5:32 PM
Nirzar updated the task description. (Show Details)Feb 21 2018, 5:38 PM

I will add more examples of how issues will look inside modals

ovasileva triaged this task as Normal priority.Feb 21 2018, 6:34 PM
Niedzielski added a subscriber: Niedzielski.

For responsive web only, not desktop.

The link Learn more about fixing this issues comes from the inside of the issue template HTML.

If it is the same for all the page issues, it should be uniquely extracted and shown in the footer of the list of issues.

@Nirzar will provide more mocks with multiple issues to clarify.

Also on what happens if the links are different on the different issue templates.

Nirzar updated the task description. (Show Details)Feb 21 2018, 6:44 PM

We should be very strict and gracefully bail out when parsing / changing the HTML as the issue template HTML can change at any point or in any wiki and could have very bad consequences if we have an exception in this view (unresponsive JS, so can't get out of modal, etc).

Nirzar updated the task description. (Show Details)Feb 21 2018, 7:18 PM

Open Questions

Q: should we do this work before we structure page issues semantically
A: As a cosmetic update, I think this design can be implemented without having to change much of the existing page issues functionality.
That being said, we should be aware of the limitations of that functionality to determine wether or not to work on this now.
The current limitations are such:

  • The ambox type property, which ultimately results in which icon to show, is language specific. Even if wikis use the English ambox templates, the type property is input by users in their language. So for example on English wikipedia, the deletion ambox uses type=delete which results in class="ambox-delete" in the HTML. Spanish Wikipedia however, uses type=serious (probably just to change the icon) for their deletion templates, which results in class="ambox-serious" in the HTML. French Wikipedia on the other hand, uses entirely different templates with (very pretty) icons that don't use the type property at all. Italian wikipedia uses class names like avviso-contenuto etc... For this task however, the language variety might not be a problem since the languages that don't use the English templates don't show up on page issues anyway.

Q: is date tag easily scrapable.
A: nope. On English at least, it's in html like this

<small>
    <i>(April 2010)</I>
</small>
<small class="hide-when-compact">
    <i>(<a href="/wiki/Help:Maintenance_template_removal" title="Help:Maintenance template removal">Learn how and when to remove this template message</a>)
    </I>
</small>

Which could feasible be targeted with a query like $( ".mbox-text-span small:not('.hide-when-compact') > i" ) but that's far from stable or performant.

Design feedback
We probably don't need the lock or move icons, since protected page show up with the lock icon (beside the download/star icons) on mobile, and the type=move templates currently don't show up on page issues.

Misc

@Jhernandez here are some screenshots of the differences in the HTML output & these are the selectors we're using for scraping.

Jhernandez added a comment.EditedFeb 22 2018, 7:01 PM

Wow, sad news then... From the description changes proposed:

FeasibleWhyChange
show the hidden information from DOM (.hide-when-compact)
format the hidden information differently from non-hidden information
move the icon to the left/right based on LTR/RTL
wiki specificUse ambox type for icon type. red ambox = red stop icon
very brittle to perform, and wiki specificstyle the date in tag
very brittle to perform, and wiki specificadd permanent list item at the bottom that takes the user to Help:Maintenance_template_removal
change the modal title to "Page Issues"

cc/ @ovasileva @Nirzar to update or split task or delay it until page issues HTML is better structured/annotated.

Props to @Jdrewniak for the docs linked and the comment, very useful

Nirzar added a comment.EditedFeb 22 2018, 8:34 PM

@Jhernandez this sounds reasonable. 4 out of 7 :)

The fourth one was an important one but we can wait till we fix the html structure.

this task was meant to be fixing styling (as part of design debt) so these changes seem minimal but also add value by having long descriptions. I will update the card and create subtasks for ambox-type, help-url, date-tag.

thanks for clean way of conveying what is possible and thanks for the work on docs Jan! :)

We should be very strict and gracefully bail out when parsing / changing the HTML as the issue template HTML can change at any point or in any wiki and could have very bad consequences if we have an exception in this view (unresponsive JS, so can't get out of modal, etc).

This. We've already got lots of cases where this doesn't quite work e.g. T184421

Page issues was always a temporary hack, so limiting what we change here is a good idea. Definitely long term, we should provide editors the tools to tag articles in a mobile friendly way.

ovasileva updated the task description. (Show Details)Feb 28 2018, 5:31 PM
ovasileva updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)Feb 28 2018, 5:35 PM
ovasileva updated the task description. (Show Details)Feb 28 2018, 5:35 PM
Jdlrobson updated the task description. (Show Details)Feb 28 2018, 5:36 PM
ovasileva set the point value for this task to 3.Feb 28 2018, 5:40 PM
ovasileva moved this task from Needs Prioritization to Upcoming on the Readers-Web-Backlog board.
Nirzar updated the task description. (Show Details)Feb 28 2018, 6:33 PM
Jdlrobson moved this task from To Do to Doing on the Readers-Web-Kanbanana-Board-Old board.

Change 419328 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] CSS tweaks to issue overlay

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

Change 419330 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Improve issue overlay

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

Okay! I've got some patches up and on staging for design review.
@alexhollender @Nirzar:

To aid discussions with editors, I've revealed the issues boxes in staging. Where issues are long - this suggests we need to update the underlying template. hopefully with this demo, we can aid that conversation.

Right now, it's not possible to get severity from the templates, so the icons is not going to be possible right now.

@Nirzar @alexhollender let me know if any css tweaks are needed to the issue overlay
With your approval engineers can start reviewing https://gerrit.wikimedia.org/r/419328 and https://gerrit.wikimedia.org/r/419330

@Jdlrobson, @Nirzar, @alexhollender - I'm a bit confused. This task is only in reference to the page issues modal, we shouldn't be making any changes to in-article issues yet. Am I missing something?

phuedx added a subscriber: phuedx.Mar 14 2018, 12:20 PM

Perhaps T187916#4048427 will help when it comes to planning for T159262: [EPIC] Improve page issues.

ovasileva added a comment.EditedMar 14 2018, 12:34 PM

@Jdlrobson - also noting that we removed the severity from the acceptance criteria when estimating the task, so we don't have to worry about it for now

Jdlrobson added a comment.EditedMar 14 2018, 2:04 PM

"To aid discussions with editors, I've revealed the issues boxes in staging. Where issues are long - this suggests we need to update the underlying template. hopefully with this demo, we can aid that conversation."

I am aware this card relates only to issues overlay

Change 419330 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Improve issue overlay

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

Change 419328 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] CSS tweaks to issue overlay

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

Had a chat with designers. I'm blocked on @Nirzar providing me with some icons and then we can wrap this work up!

Nirzar updated the task description. (Show Details)Mar 14 2018, 10:10 PM

@Jdlrobson

one small style fix with the styles
hide-when-compact computed font size is 14.4 in your change. it should 13px. same for the date and the "learn more" link as well. 16px for the main title and 13px for everything else

Change 419644 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Add icons for all the types of issues

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

Tweak taken care of:
https://gerrit.wikimedia.org/r/419645 CSS tweak: Drop issues font-size for hide-when-compact

Icons are taken care of:
https://gerrit.wikimedia.org/r/419644

Both patches on staging:
http://reading-web-staging.wmflabs.org/wiki/Telecommunications_network?useformat=mobile

Jdlrobson removed Jdlrobson as the assignee of this task.Mar 15 2018, 12:30 AM

Change 419644 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Add icons for all the types of issues

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

ABorbaWMF reassigned this task from ABorbaWMF to ovasileva.Mar 16 2018, 6:38 PM
ABorbaWMF added a subscriber: ABorbaWMF.

Looking good for me on Staging:




  • The icon types are missing on staging. I could see them before i can't now
  • The modal title is issues instead of page issues
  • the alignments are off
  • the font size needs fixin

This is not ready for sign off. I think we need to talk about the process here. few cards have gone through the same thing, where they went to sign off and even to production. also we need a criteria for assigning design for sign off for user facing cards like this one.

@Nirzar can you be more specific?

The icon types are missing on staging. I could see them before i can't now

Looks like staging was running outdated code. Please check again. Not sure what happened there. The icons are showing for me now.

The modal title is issues instead of page issues

Again outdated code.

the alignments are off


Can you elaborate on what you mean?

the font size needs fixin

Can you be more specific? Which font-size? What is it? What should it be?

.overlay-cleanup .issue-details {
padding-left:55px;
}
.overlay-cleanup .cleanup li .issue-notice .mw-ui-icon {
top:3px; 
}

font size for date should be 13px. same as other smaller text on the screen.

.overlay-cleanup .issue-details {
padding-left:55px;
}

Is the purpose to align it with the X (close) icon? In which case it looks like it should be 54px, no (that's it's width)?

.overlay-cleanup .cleanup li .issue-notice .mw-ui-icon {
top:3px; 
}

That would be incurring tech debt which I'd rather avoid. Can this not be fixed in the icon glyph itself? Why is this happening ? cc @Volker_E

font size for date should be 13px. same as other smaller text on the screen.

Looks like the date does not have the hide-when-compact class. Only way to style date right now would be to style all small tags this way.
I'm a little worried about side effects... should we rely on "> small" (I think this makes sense?) or "small". @Jdrewniak did you get a sense of how frequent small tags are used in these templates?

Is the purpose to align it with the X (close) icon? In which case it looks like it should be 54px, no (that's it's width)?

the purpose is to align the Page Issues title to the content.

That would be incurring tech debt which I'd rather avoid. Can this not be fixed in the icon glyph itself? Why is this happening ? cc @Volker_E

the glyph should not have paddings according to our guidelines

let me tinker with it too, the paragraph does not look like it is top aligned for some reason.

Looks like the date does not have the hide-when-compact class. Only way to style date right now would be to style all small tags this way.

smaller font size for <small> tag does make semantic sense. even if it gets applied to non-date elements, it still should not mess things up because <small> tags intended purpose is to make things small, 13px is small :)

Change 420129 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Tweaks to issue overlay

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

^ That fixes 2/3 of the issues and is on staging for you to vet (you'll need to do that today or early Monday). I'm not sure why the paragraph is not top aligned. When I inspect the icon and the paragraph, their elements are aligned. Could be a rendering bug?

ovasileva removed ovasileva as the assignee of this task.Mar 19 2018, 11:20 AM

Change 420129 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Tweaks to issue overlay

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

Tested... Looks great! a minor followup would be the top alignment of icon and the text but not a blocker.

Macro votecat: looks good

QA has already passed this already. do we need QA again after the tweaks?

otherwise we can resolve this!!!

Tested on staging and looks good. As this is a bigger change, let's wait until it hits production and test again.

ovasileva updated the task description. (Show Details)Mar 20 2018, 11:27 AM

@Nirzar - should we set up a separate task for the followup changes?

Nirzar closed this task as Resolved.Mar 22 2018, 9:30 PM

should we set up a separate task for the followup changes?

yes, I will set that up

tested on production, looks good :)