Change 644370 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/DiscussionTools@master] Tweak colors of the highlight on posted comments

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

Change 644371 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/DiscussionTools@master] Add postEdit notification

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

layered on top of the text, which fades the text a bit

@matmarex fixed this is in https://gerrit.wikimedia.org/r/c/mediawiki/extensions/DiscussionTools/+/644370 using CSS mix-blend-mode which I hadn't heard off. This basically makes the highlight overlay look like an underlay by mixing the colours differently. Neat.

One alternative would be to use the success green, maybe with the border too for contrast.

sidenote: I really don't like this green, but have filed T269138 for that, here it is with a "better" green:

Thanks @Esanders - originally I was thinking that this is more success than a diff (which is what green is used for). However I can't see it at all so we should use Green90 for this iteration. No border because it looks too much like a message box. This corresponds with the feedback T267595#6659814

More detail on the animation: the highlight "holds" for 500ms, then fades out for 500ms. I think this is too quick. (We don't want it to be too long though, or users will think their comment is permanently green)

Update, I just learned that we can use this yellow instead: #ffe29e - which I've indicated also in T267595

Regarding the animation speed, can you try the following sequence of speeds @matmarex

• Pause for 500ms
• Fade in for 100ms
• Show for 1000ms
• Fade out for 500ms

Change 644371 merged by jenkins-bot:
[mediawiki/extensions/DiscussionTools@master] Add postEdit notification

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

In T268994#6660422, @iamjessklein wrote:

Update, I just learned that we can use this yellow instead: #ffe29e - which I've indicated also in T267595

Done

In T268994#6660685, @iamjessklein wrote:

Regarding the animation speed, can you try the following sequence of speeds @matmarex (…)

Done

Test wiki created on Patch Demo by Matma Rex using patch(es) linked to this task:

http://patchdemo.wmflabs.org/wikis/f6c284e009aa861712491b41d84fe464/w/

I believe this can be closed now.

Change 644370 merged by jenkins-bot:
[mediawiki/extensions/DiscussionTools@master] Tweak colors and timing of the highlight on posted comments

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

This came up again in usability tests (see: T243249#6684112)
I recommend that we try to extend the time a little longer for both the highlight and the success message.

Hey @iamjessklein can you review this and see if any additional changes need to be made to the patch below:
https://patchdemo.wmflabs.org/wikis/4884f813d884db60572b999e92029d17/w/index.php/Talk:Main_Page

I already dislike how slow the animation is.

If people are having trouble with this, then I wonder if we should change how it works more drastically. Maybe wait for the user to click on the page before we fade it out, or something.

Re: "it's too slow" complaints that were made-but-not-commented-here, maybe change the easing on it? It seems to be apparently full-opacity for a while, then rapidly vanishes. If it was on a different curve it might feel more responsive.

I need to take a look at the following parts of the animation and sequence them as well as the easing:

• Click “Add topic”
• Loading animation start
• Page scroll
• Highlight animation start
• Loading animation stop
• Highlight animation stop

Is it possible for someone to write out the current animation sequence (in bullet points like I did here) so that I can then go in and propose tweaks?

cc @matmarex

@Esanders copied this into Slack for me which was a comment on @matmarex last patch

• Pause for 500ms
• Fade in for 100ms
• Show for 1000ms
• Fade out for 500ms

0. Scroll, 1. Pause...

When we did usability testing, we actually saw that some testers missed the notification and highlight completely. So with this in mind, I recommend we slow it down a little bit.

1. Click “Add topic”
2. diagonal loading - mysterious amount of time (wait for server response)
3. redraws the page with new topic visible
4. "your topic added" message triggered ---change this to be the same pause as the typical postedit notification
5. immediately scrolls into view

everything from here down should be synced up with the postedit notification animation

6. Pause 500ms
7. Fade in highlight animation for 100ms
8. Pause 1000ms
9. Fade out highlight animation for 100ms

Can you post a gif of what this looks like so we can compare? Thanks

In T268994#6792167, @iamjessklein wrote:

Is it possible for someone to write out the current animation sequence (in bullet points like I did here) so that I can then go in and propose tweaks?

Several things happen independently:

• Page contents are redrawn (sometimes also the page is scrolled)
  • This happens instantly, with no animation
• Highlight is shown. The timings are as you wrote earlier: [source code for reference: 1 2]
  • Pause for 500ms
  • Fade in for 100ms
  • Show for 1000ms
  • Fade out for 500ms
• Post-edit message is shown. Timings: [source code for reference: 3 4]
  • Appears instantly (no fade in)
  • Show for 3000ms
  • Fade out for 250ms

Video for reference:

If I understand correctly, your proposal is to change the timings of the highlight to match the timings of the post-edit message. I made a patch for that, and a demo you can try: https://patchdemo.wmflabs.org/wikis/5d97f5e687d34c075325dc55178bb40b/w/index.php/Talk:Main_Page

Video for reference:

That looks right to me (thanks for taking the time to do the screencasts @matmarex )

Change 661781 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/DiscussionTools@master] Adjust new comment highlight timings

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

Change 661781 merged by jenkins-bot:
[mediawiki/extensions/DiscussionTools@master] Adjust new comment highlight timings

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