Page MenuHomePhabricator

MediaWikiChat public messages are rendering as squished
Closed, ResolvedPublic

Description

I've recently started running MediaWikiChat at my Wiki-based site. We're really loving it, but have discovered that sometimes the formatting in the chatroom goes a bit wonky.


The site is http://www.childrenofstarclan.com, in case the configuration details will help you understand why it's acting up.

Event Timeline

SamanthaNguyen added a comment.EditedMay 27 2017, 12:11 AM

@Kitsufox:

Very odd, I haven't encountered this before.. Just wondering, what browser are you using, and what version of the browser is it? (each browser has different levels of support for parts of the HTML, CSS, and JS languages) Somehow by chance that Hawke could be using the same browser as you. This could also be an issue in MediaWikiChat's CSS, although I don't recall any of the stylesheets changing in the most recent versions.

I'm going to be busy this weekend because of final exams and a few days after that but I should have more time to figure this bug around June 1st.

@SamanthaNguyen :

Hawke uses Chrome (latest version). I know Kyndzee has had it happen, too (also using Chrome's latest). And I've had it show up on the latest version of Safari with extreme regularity.

Completely understand able finals! Best of luck on your tests! You've reminded me why I'm so happy to be done with college...

SamanthaNguyen added a comment.EditedMay 27 2017, 10:53 PM

Completely understand able finals! Best of luck on your tests! You've reminded me why I'm so happy to be done with college...

haha, thanks :)

Hawke uses Chrome (latest version). I know Kyndzee has had it happen, too (also using Chrome's latest). And I've had it show up on the latest version of Safari with extreme regularity.

and thanks for the info! Here's some other research I've done on the side, which I've divided into it's own section:


Research

I've tried to reproduce this bug by using the same + important site environment characteristics:

  • MediaWiki: v1.28.2
  • Foreground: v2.1.0-alpha
  • MediaWikiChat: v2.20.4

I was unable to reproduce this as on my localhost, screenshot below:

I'll try to update https://social-tools.wmflabs.org (official testing environment for social tool extensions) to match the environment up above later this week so I can attempt to reproduce it on there. Right now for some reason (even though I'm a system administrator) I can't connect to the WMF labs instance.


This might mean that it could be the custom CSS/JS that's enabled for all users on that site that's causing this issue, so I've written down below some suspects + a few notes I jotted down after looking through them:

  • MediaWiki:Foreground.css - Nothing particularly stuck out to me here
  • MediaWiki:Foreground.js - Nothing really here, just appending some FontAwesome icons to some selectors unrelated to MWC
  • MediaWiki:Common.js - This is empty, so this isn't affecting it.
  • MediaWiki:Common.css - Nothing here..

Here I was looking for the following CSS inside these that could possibly be affecting it: left, right, top, bottom, position, margin (and if not using the shorthand version, then two other longhanded version of it which could be: a margin-left with a really large value, or a margin-right with a negative value, which instead of pushing space to the right, will pull the object to the right), as well as the padding (most likely a value for padding-left), clear, display, and position attached to MWC-specific selectors, but this didn't appear anywhere. I didn't see any JS that could affect it either (e.g custom inline CSS, adding an element into MWC)


So, here's another question for you. Whenever this bug pops up for you, could you do these following steps for me please? :) Thank you in advance! (Could you also ask Hawke and Kyndzee to do these steps too when they can? That'd be very helpful!)

  1. right click the message(s) that gets affected by it and open up your developer tools (cmd + option + I for Safari, ctrl + shift + I for Chrome users). Make sure that the styles tab is showing in your developer tools, which shows the CSS that applies to whatever selector is being viewed specifically.
  2. take a screenshot of the entire developer tools window, then link the screenshots in your comment.

Edit: In case you're wondering, I've also been looking at the stylesheets in https://github.com/thingles/foreground. Can't say anything much yet, but I've looked around and saw some table-related selectors in there.

The Rowspan is somehow setting itself to double what it should be...

@SamanthaNguyen asked me to look into this a bit. To summarize how I went about this:

I registered on your wiki ("Testuser 20170605") and tried out the chat functionality, since I never used this extension before. It worked at first, but funnily, it stopped loading entirely after I reloaded the page… Okay, whatever.

Going by the comment by @Kitsufox above, I searched the code of the extension for 'rowspan'. There are only three results:

MediaWikiChat\MediaWikiChat.js
312: 			lastParent.children( '.mwchat-rowspan' ).attr( 'rowspan', Number( lastParent.children( '.mwchat-rowspan' ).attr( 'rowspan' ) ) + 1 ); // increment the rowspan
318: 			html += '<td rowspan=1 class="mwchat-item-user mwchat-rowspan">';
326: 			html += '</td><td rowspan=1 class="mwchat-item-avatar mwchat-rowspan">';

The latter two are trivial, so I looked carefully at the first. I didn't see any obvious mistakes in the increment code. This code is in the function addMessage, so let's look at when this is called. Could it be incrementing too many times?

A quick search reveals that addMessage is called only by getNewReply, which is called in two places: from getNew (which is called in a bunch of places, but in particular, called regularly to poll for new messages) and from the event handler for '#mwchat-type input' (which runs after you write and send a message). Could it be that if the poll runs while you're posting a message, the message would be received twice?

It's interesting that the message itself is not duplicated, only the rowspan adjustment… apparently there is a check for duplicates in the addGeneralMessage function (which addMessage calls to actually insert the message into the chat log):

		$( '.mwchat-item-timestamp.pretty' ).each( function( index, value ) {
			if ( $( value ).attr( 'data-timestamp' ) == timestamp ) {
				post = false;
			}
		} );

So I think that's just the issue. If the timing is just right (this is probably more likely if either your network or the wiki is slow), a message you post can be loaded twice, and the duplicate detection is in the wrong place, causing the incomplete update and broken rendering.

The fix would be to either move the duplicate detection from addGeneralMessage into addMessage (it might need to be duplicated into other callers of addGeneralMessage), or move the rowspan adjustment from addMessage into addGeneralMessage (but I don't know if that's correct for all possible callers).

Gonna work on a patch and submit it tomorrow. :) Thanks @matmarex, @Kitsufox, Kyndzee and Hawke for helping out!

Change 357518 had a related patch set uploaded (by SamanthaNguyen; owner: SamanthaNguyen):
[mediawiki/extensions/MediaWikiChat@master] [WIP] Fix rendering of main chat messages

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

cheers for your work on this guys

MtMNC added a subscriber: MtMNC.Jun 20 2017, 2:43 AM

Is this patch in use on https://social-tools.wmflabs.org? The rowspans are still being incremented twice as much as they should be on there, and that still seems to be the cause of the broken formatting.

Yeah, the patch is on social-tools.wmflabs currently. The thing is that I've already tried moving the duplicate detection and then undo that and move the rowspan adjustment instead, but neither seem to fix the issue.

MtMNC added a comment.EditedJun 20 2017, 3:15 AM

Actually it looks like the rowspan is only being incremented twice the very first time a user posts. I think that's because the default rowspan is 1, not 0. So when the user posts the first time, the rowspan starts at 1 (the default) but gets incremented to 2. It's not actually being incremented twice, it just looks that way because we've been thinking of the initial rowspan as 0, not 1. From then on, every time the user submits another "child message," the rowspan of the "parent message" is incremented by 1 as expected. This means the rowspan is always 1 greater than it should be. This throws off the formatting once another user posts. Thanks to that extra bit of rowspan, the (now) previous user's username and avatar occupy the first columns of the new user's first message, where the new user's username and avatar would normally go. This pushes the new user's username and avatar over to the right, which in turn pushes the new user's messages over to the right. This compounds as more and more users post.

If I'm thinking this through correctly, the solution would be to increment the rowspan of the "parent message" only when subsequent "child messages" are being sent.

(edits for clarity)

@MtMNC Thanks for helping out and giving details! This gives me something to work from.

Change 357518 merged by jenkins-bot:
[mediawiki/extensions/MediaWikiChat@master] Fix rendering of main chat messages

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

SamanthaNguyen closed this task as Resolved.Sep 26 2017, 10:56 PM
SamanthaNguyen removed a project: Patch-For-Review.
SamanthaNguyen removed a subscriber: gerritbot.

Thanks everyone! This bug should be squashed now (full pun intended) :P