Page MenuHomePhabricator

Add yellow talk page message banner to non-main namespace pages on mobile
Closed, ResolvedPublic3 Estimated Story Points

Assigned To
Authored By
ovasileva
Jun 9 2021, 11:51 AM
Referenced Files
F34743424: Screen Shot 2021-11-12 at 7.46.41 AM.png
Nov 12 2021, 3:46 PM
F34743422: Screen Shot 2021-11-12 at 7.45.44 AM.png
Nov 12 2021, 3:46 PM
F34741891: Screen Shot 2021-11-11 at 11.05.55 AM.png
Nov 11 2021, 10:09 AM
F34741893: Screen Shot 2021-11-11 at 11.06.13 AM.png
Nov 11 2021, 10:09 AM
F34741895: Screen Shot 2021-11-11 at 11.06.30 AM.png
Nov 11 2021, 10:09 AM
F34741471: IMG_3456.jpg
Nov 11 2021, 1:31 AM
F34741472: IMG_3455.jpg
Nov 11 2021, 1:31 AM
F34741474: IMG_3453.jpg
Nov 11 2021, 1:31 AM
Tokens
"Love" token, awarded by ToBeFree."Like" token, awarded by Lomrjyo."Love" token, awarded by TheSandDoctor.

Description

Background

In T240889: Mobile IP editors not given any indication that they have new messages there was a request to create a notification for anonymous editors when a message is left on their talk page.

Designs

non-main namespace pagesnot logged-in editor page
image.png (1×766 px, 237 KB)
image.png (1×750 px, 100 KB)

Acceptance criteria

Add the yellow banner to the following:

  • All non-main namespaces
  • The "You are not logged in" Screen

Developer notes

  • For contributions page, this can be done inside Minerva:

Should be as simple as adding the template variable {{{html-user-message}}} to skin.mustache unconditionally and use CSS to hide and show (display: none by default, display: block with ns-special).

  • For talk page a MobileFrontend change is needed. Based on whether the message is present in the Minerva HTML we can copy it across.

QA steps

Note: this test could reveal your IP address to other users. You may want to ask @Jdlrobson to make sure it is hidden after the test is complete.

In the incognito window:

  1. In normal window
  2. In a new window, login and load the user talk page from the last step.
  3. Using the logged in user, click add topic and add topic with a heading and body.

In the incognito window:

  • Wait five minutes and then refresh the page. You should see a yellow box like so:

Screen Shot 2021-10-25 at 2.22.21 PM.png (302×1 px, 55 KB)

Test 1: Switch to mobile site, the user message should be hidden.
Test 2: Click main menu and click settings, confirm you see the yellow bar:
Screen Shot 2021-10-25 at 2.24.02 PM.png (274×1 px, 40 KB)

QA Results - Beta

ACStatusDetails
1T284642#7467234
2T284642#7467234
3T284642#7467234

QA Results - Prod

ACStatusDetails
1T284642#7497624
2T284642#7497624
3T284642#7497624

Event Timeline

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

^ This should clearly be visually treated as warning message box as well. Agreed @ovasileva.

In T284642#7393627, @alexhollender wrote:

@alexhollender This looks great, is the message clickable (does it contain a link)?

yes, the message is clickable, it takes you to your Talk page. Are there any related styling changes for that?

We've discussed having different content types besides just plain text, like links, being part of the design examples on Style Guide. From those conversations (not yet materialized on DSG) they should be visually treated like links, not Base10 text.

@alexhollender - after some discussion we've decided to explore adding the banner to the "you are not logged in" screen

do you mean in addition to other places, or only there? maybe makes sense to update the task description with the latest plans for this?

In T284642#7398861, @alexhollender wrote:

@alexhollender - after some discussion we've decided to explore adding the banner to the "you are not logged in" screen

do you mean in addition to other places, or only there? maybe makes sense to update the task description with the latest plans for this?

@alexhollender - it would be in addition to. Task updated

alexhollender_WMF renamed this task from [Design Spike] Explore adding yellow talk page message banner to non-main namespace pages on mobile to Add yellow talk page message banner to non-main namespace pages on mobile.Oct 14 2021, 10:11 PM
alexhollender_WMF removed alexhollender_WMF as the assignee of this task.
alexhollender_WMF updated the task description. (Show Details)
Jdlrobson removed the point value for this task.Oct 15 2021, 10:55 PM

Change 734399 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/MinervaNeue@master] WIP: Add yellow talk page message warning to non-main namespace pages

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

Talk message is not present on main page articles:

Screen Shot 2021-10-26 at 9.03.37 AM.png (920×2 px, 216 KB)

Screen Shot 2021-10-26 at 9.03.53 AM.png (866×1 px, 163 KB)

On settings page:

Screen Shot 2021-10-26 at 9.04.39 AM.png (1×1 px, 183 KB)

@alexhollender @bwang the task says this should display for all non-main namespaces however the current solution from @bwang limits to special pages. Is this correct?

Here's what it would look like if displayed on talk pages and MediaWiki namespace pages:

Screen Shot 2021-10-26 at 9.06.26 AM.png (660×1 px, 77 KB)

Screen Shot 2021-10-26 at 9.06.53 AM.png (1×1 px, 124 KB)

Talk message is not present on main page articles:

Screen Shot 2021-10-26 at 9.03.37 AM.png (920×2 px, 216 KB)

Screen Shot 2021-10-26 at 9.03.53 AM.png (866×1 px, 163 KB)

On settings page:

Screen Shot 2021-10-26 at 9.04.39 AM.png (1×1 px, 183 KB)

@alexhollender @bwang the task says this should display for all non-main namespaces however the current solution from @bwang limits to special pages. Is this correct?

Here's what it would look like if displayed on talk pages and MediaWiki namespace pages:

Screen Shot 2021-10-26 at 9.06.26 AM.png (660×1 px, 77 KB)

Screen Shot 2021-10-26 at 9.06.53 AM.png (1×1 px, 124 KB)

I think the expectation would be to display across all pages outside the main namespace. Note: also on the log-in modal that appears before making an edit.

^ This should clearly be visually treated as warning message box as well.

I think @Volker_E is right, the existing warning on the "not logged-in editor page" even has the "warningbox" class (https://jmp.sh/coMLQh3), I think it's a bug that its not being styled as such.
Considering that, @alexhollender should the "not logged-in editor page" have two warning boxes then? One for the "You have a new Talk message" message and one for the existing one?

Change 734399 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Add yellow talk page message warning to non-main namespace pages

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

@alexhollender should the "not logged-in editor page" have two warning boxes then? One for the "You have a new Talk message" message and one for the existing one?

yea I think that makes sense. maybe we could use gray for the not logged-in notice so that it's not too overwhelming, and so that the notices don't blend together?

image.png (1×750 px, 92 KB)
image.png (1×750 px, 91 KB)

Change 734742 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/MinervaNeue@master] Update anon talk messages to show on non-main namespaces

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

Screenshot_20211027-071042_Chrome.jpg (2×1 px, 194 KB)

I'm seeing the bar when there is no message. We should fix this before Monday

Screenshot_20211027-071042_Chrome.jpg (2×1 px, 194 KB)

I'm seeing the bar when there is no message. We should fix this before Monday

Hiya, it's also showing when logged in as well:

image.png (716×758 px, 64 KB)

@alexhollender, would you want it to only be grey when there are two notices?

@alexhollender, would you want it to only be grey when there are two notices?

I think that the "you are not logged-in" notice can always be gray

Change 734742 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/MinervaNeue@master] Update anon talk messages to show on non-main namespaces

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

Change 735048 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/extensions/MobileFrontend@master] Add anon talk message warning to editing overlay Screenshot: https://jmp.sh/LnWf9l3

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

bwang removed bwang as the assignee of this task.Oct 27 2021, 7:01 PM
bwang added a subscriber: bwang.

Change 734742 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Update anon talk messages to show on non-main namespaces

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

Change 735048 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Add anon talk message warning to editing overlay

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

@alexhollender
Warning on talk page
Editor overlay
Special page with multiple warnings

Specifics on the icon, the yellow talk icon is 20x20, and there is 8px margin on the left of the text

Change 735424 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/MinervaNeue@master] Remove whitespace from anon talk message warning

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

@bwang thanks for those. can you add screenshots at mobile widths?

Change 735424 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Remove whitespace from anon talk message warning

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

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

In the incognito window:

  1. In normal window
  2. In a new window, login and load the user talk page from the last step.
  3. Using the logged in user, click add topic and add topic with a heading and body.

In the incognito window:
✅ AC1: Wait five minutes and then refresh the page. You should see a yellow box.

Screen Shot 2021-10-28 at 6.26.10 PM.png (963×766 px, 201 KB)

✅ AC2: Test 1: Switch to mobile site, the user message should be hidden.

Screen Shot 2021-10-28 at 6.26.57 PM.png (961×771 px, 124 KB)

✅ AC3: Test 2: Click main menu and click settings, confirm you see the yellow bar:

Screen Shot 2021-10-28 at 6.36.06 PM.png (960×772 px, 67 KB)

@ovasileva Re: Tech News -

  1. What wording would you suggest as the content? (1-2 sentences ideally)
  2. When should it be included? (I.e. when will it be 'live' at each wiki? If it's slowly going out with (the week after) next week's deployment train, then we would put it in the "Changes this week" section for that week's edition) -- [Edit: I've corrected this, as there is no train next week]

Thanks!

@Quiddity

@ovasileva Re: Tech News -

  1. What wording would you suggest as the content? (1-2 sentences ideally)

Anonymous editors are now able to receive warning notices indicating they have a talk page message on the mobile website (similar to the orange banners available on desktop). These notices will be displayed on every page outside of the main namespace and every time the user attempts to edit.

  1. When should it be included? (I.e. when will it be 'live' at each wiki? If it's slowly going out with (the week after) next week's deployment train, then we would put it in the "Changes this week" section for that week's edition) -- [Edit: I've corrected this, as there is no train next week]

Thanks!

It was on this weeks train so should be out already as of yesterday evening.

Hope this is helpful!

@ovasileva Maybe we should add something about changed colour for desktop here too, while we're at it? "To have the same colour system as similar messages the notice on desktop now has a slightly different colour" or something like that.

@ovasileva Maybe we should add something about changed colour for desktop here too, while we're at it? "To have the same colour system as similar messages the notice on desktop now has a slightly different colour" or something like that.

@Johan - just noticed this! Not sure if it's too late, but something like "In order to ensure consistency across other system messages, we have also updated the color of the desktop notice so it matches the style guide"

@Johan - just noticed this! Not sure if it's too late, but something like "In order to ensure consistency across other system messages, we have also updated the color of the desktop notice so it matches the style guide"

I'm afraid this was too late. But I did include a sentence similar to what Johan wrote, and someone else added a link to the related phab task. (cf Tech/News/2021/45 which has now been delivered to 977 wikipages, 1 mailing list, and the Diff blog).
FYI for next time - Generally: We write the edition on Thursdays (or submissions are welcome earlier!), and then *freeze* it on Friday so that translators have the weekend to contribute. It is sent on Monday. (Usually, each of those tasks take place in the *morning* of whoever is in charge that week (myself, Johan, or Trizek), but sometimes it is a little later.) HTH! :-)

Edtadros added a subscriber: Edtadros.

Test Result - Prod

Status: ❌ FAIL
Environment: prod
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

In the incognito window:

  1. In normal window
  2. In a new window, login and load the user talk page from the last step.
  3. Using the logged in user, click add topic and add topic with a heading and body.

In the incognito window:
✅ AC1: Wait five minutes and then refresh the page. You should see a yellow box.

IMG_3453.jpg (1×1 px, 930 KB)

❌ AC2: Test 1: Switch to mobile site, the user message should be hidden.
Initially when I switched to mobile the message was hidden.

IMG_3454.jpg (2×1 px, 723 KB)

But when I couldn't get the message to appear in the next step in Settings, I sent another message. This appeared on mobile when I refreshed. I didn't start from Desktop like I did in the initial test.
IMG_3455.jpg (2×1 px, 689 KB)

❌ AC3: Test 2: Click main menu and click settings, confirm you see the yellow bar:

IMG_3456.jpg (2×1 px, 358 KB)

ovasileva raised the priority of this task from Medium to High.Nov 11 2021, 10:09 AM

Note - did some additional testing. Could confirm the following:

Banner is not appearing on article pages as expected:

Screen Shot 2021-11-11 at 11.05.55 AM.png (716×1 px, 284 KB)

Banner is appearing on other pages as expected:

Screen Shot 2021-11-11 at 11.06.13 AM.png (617×1 px, 67 KB)

BUG:
Banner is not appearing on the edit screen:

Screen Shot 2021-11-11 at 11.06.30 AM.png (472×1 px, 43 KB)

First, @bwang and @ovasileva (and anyone else I've missed) thank you for implementing this! As you might know it's long been a pet peeve of mine.

I came here to report the same issue: The banner is not always appearing on the edit screen. This seems to be caching issue. I tried editing about a dozen pages, and any time x-cache-status is hit-fronton the initial page load (before I click edit), I get no banner. But when it's pass, I get a banner. Now @Tgr said in T295429#7494634:

When an anonymous editor does something like an edit, they are marked as needing to see live pages so the edge cache lets them true.

But that's not true for me (on enwiki at least). I make an edit, and even from the same browser session, minutes later, I still get x-cache-status: hit-front (and no message bar).

On desktop, when you submit text in the editor (via SubmitAction), it ensures the user has a session. The edge cache then sees the session cookie and lets subsequent requests pass through. If nothing equivalent is in place on mobile, which presumably makes edits via the API, that should be fixed.

On desktop, when you submit text in the editor (via SubmitAction), it ensures the user has a session. The edge cache then sees the session cookie and lets subsequent requests pass through. If nothing equivalent is in place on mobile, which presumably makes edits via the API, that should be fixed.

^ most likely this. If so I suggest a new task to take care of this, since it's going to require some further analysis.

I can confirm the presence of the edit mesage with the following steps:

Screen Shot 2021-11-12 at 7.46.41 AM.png (1×2 px, 181 KB)

Moving this one to sign-off, to follow up with the new bug.

@suffusion_of_yellow , @Tgr - Created T295910: Yellow talk page message banner appearing inconsistently on edit page to track follow-up work on the edit screen issue. Resolving this one for now.