Discussion tools not working on some pages with videos when using "New video player" beta feature (Uncaught TypeError: startMarker is null)
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To

Authored By

	AntiCompositeNumber
	Feb 9 2022, 11:27 PM

Description

List of steps to reproduce (step by step, including full links if applicable):

Have DiscussionTools enabled
Go to https://commons.wikimedia.org/wiki/User_talk:Spinster

What happens?:
Uncaught TypeError: startMarker is null in https://gerrit.wikimedia.org/g/mediawiki/extensions/DiscussionTools/+/548c0d12c9eef8bd8179e5bb3c1c0740543b4d1b/modules/ThreadItem.js#94

startMarker is set by document.getElementById( item.id );, the offending item.id in this case is "c-EatchaBot-2021-09-22T00:00:00.000Z-MOTD_Notification_3". This happens reliably on every load. I noticed it on another talk page as well but don't remember which one.

What should have happened instead?:

Software version (if not a Wikimedia wiki), browser information, screenshots, other information, etc.:
Likely related to T300747, but it's happening in Wikimedia production now.

Details

	Subject	Repo	Branch	Lines +/-
	Don't insert comment markers inside replaced elements (like `<video>`)	mediawiki/extensions/DiscussionTools	master	+241 -202

Customize query in gerrit

Related Objects

Mentioned In: T302550: [SPIKE] Determine what – if any – issues ought to block the deployment of the Reply Tool as opt-out at en.wiki
T302296: Reply tool fails on some pages with audio
T301661: Discussion tools not working in a specific page
Mentioned Here: T266288: [betalabs] Uncaught TypeError: Cannot read property 'nextSibling' of null - when Reply to WikiLove
T270009: Discussion Tools causes TemplateStyles to be empty in certain cases
T300747: TypeError: null is not an object (evaluating 'startMarker.parentNode')

Event Timeline

AntiCompositeNumber created this task.Feb 9 2022, 11:27 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 9 2022, 11:27 PM

Thanks for the report, I can reproduce. The error only occurs when you have the "New video player" beta feature enabled (I am using it, luckily).

The problem is in this section: https://commons.wikimedia.org/wiki/User_talk:Spinster#MOTD_Notification_3 (there are several with the same title, this is the one with "File:Coney Island at Night (1905).webm").

HTML for reference:

<h2 class="ext-discussiontools-init-section"><span class="mw-headline" id="MOTD_Notification_3" data-mw-comment="{&quot;type&quot;:&quot;heading&quot;,&quot;level&quot;:0,&quot;id&quot;:&quot;h-MOTD_Notification_3-2021-09-22T00:00:00.000Z&quot;,&quot;replies&quot;:[&quot;c-EatchaBot-2021-09-22T00:00:00.000Z-MOTD_Notification_3&quot;],&quot;headingLevel&quot;:2,&quot;placeholderHeading&quot;:false}"><span data-mw-comment-start="" id="h-MOTD_Notification_3-2021-09-22T00:00:00.000Z"></span><a href="/wiki/Template:Motd/2021-09-22" title="Template:Motd/2021-09-22">MOTD Notification</a><span data-mw-comment-end="h-MOTD_Notification_3-2021-09-22T00:00:00.000Z"></span></span><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=User_talk:Spinster&amp;action=edit&amp;section=37" title="Edytuj sekcję: MOTD Notification">edytuj kod</a><span class="mw-editsection-bracket">]</span></span><span class="ext-discussiontools-init-section-subscribe mw-editsection-like"><span class="ext-discussiontools-init-section-subscribe-bracket">[</span><a href="" class="ext-discussiontools-init-section-subscribe-link" role="button" tabindex="0" data-mw-comment-name="h-EatchaBot-2021-09-22T00:00:00.000Z" title="Zapisz się, aby otrzymywać powiadomienia o nowych komentarzach.">subskrybuj</a><span class="ext-discussiontools-init-section-subscribe-bracket">]</span></span></h2>
<table align="center" border="0" cellpadding="4" cellspacing="4" style="border: 2px solid DodgerBlue; border-left: 20px solid MediumSeaGreen; background: none;">

<tbody><tr>
<td><div class="center"><div class="floatnone"><video id="mwe_player_2" poster="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Coney_Island_at_Night_%281905%29.webm/75px--Coney_Island_at_Night_%281905%29.webm.jpg" controls="" preload="none" width="75" height="53" data-durationhint="196.362" data-startoffset="0" data-mwtitle="Coney_Island_at_Night_(1905).webm" data-mwprovider="local"><span data-mw-comment-start="" id="c-EatchaBot-2021-09-22T00:00:00.000Z-MOTD_Notification_3"></span><source src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Coney_Island_at_Night_%281905%29.webm" type="video/webm; codecs=&quot;vp8&quot;" data-title="Oryginalny plik WebM, 626 x 442 (976 kbps)" data-shorttitle="Źródło WebM" data-width="626" data-height="442" data-bandwidth="975650" data-framerate="29.97"/><source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/d/d3/Coney_Island_at_Night_%281905%29.webm/Coney_Island_at_Night_%281905%29.webm.120p.vp9.webm" type="video/webm; codecs=&quot;vp9, opus&quot;" data-title="VP9 o najniższej przepustowości (120P)" data-shorttitle="VP9 120P" data-transcodekey="120p.vp9.webm" data-width="170" data-height="120" data-bandwidth="73624" data-framerate="29.97"/><source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/d/d3/Coney_Island_at_Night_%281905%29.webm/Coney_Island_at_Night_%281905%29.webm.160p.webm" type="video/webm; codecs=&quot;vp8, vorbis&quot;" data-title="WebM o niskiej przepustowości (160P)" data-shorttitle="WebM 160P" data-transcodekey="160p.webm" data-width="226" data-height="160" data-bandwidth="129880" data-framerate="29.97"/><source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/d/d3/Coney_Island_at_Night_%281905%29.webm/Coney_Island_at_Night_%281905%29.webm.180p.vp9.webm" type="video/webm; codecs=&quot;vp9, opus&quot;" data-title="VP9 o niskiej przepustowości (180P)" data-shorttitle="VP9 180P" data-transcodekey="180p.vp9.webm" data-width="254" data-height="180" data-bandwidth="132664" data-framerate="29.97"/><source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/d/d3/Coney_Island_at_Night_%281905%29.webm/Coney_Island_at_Night_%281905%29.webm.240p.vp9.webm" type="video/webm; codecs=&quot;vp9, opus&quot;" data-title="Małe VP9 (240P)" data-shorttitle="VP9 240P" data-transcodekey="240p.vp9.webm" data-width="340" data-height="240" data-bandwidth="201256" data-framerate="29.97"/><source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/d/d3/Coney_Island_at_Night_%281905%29.webm/Coney_Island_at_Night_%281905%29.webm.240p.webm" type="video/webm; codecs=&quot;vp8, vorbis&quot;" data-title="Małe WebM (240P)" data-shorttitle="WebM 240P" data-transcodekey="240p.webm" data-width="340" data-height="240" data-bandwidth="258040" data-framerate="29.97"/><source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/d/d3/Coney_Island_at_Night_%281905%29.webm/Coney_Island_at_Night_%281905%29.webm.360p.vp9.webm" type="video/webm; codecs=&quot;vp9, opus&quot;" data-title="VP9 (360P)" data-shorttitle="VP9 360P" data-transcodekey="360p.vp9.webm" data-width="510" data-height="360" data-bandwidth="397608" data-framerate="29.97"/><source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/d/d3/Coney_Island_at_Night_%281905%29.webm/Coney_Island_at_Night_%281905%29.webm.360p.webm" type="video/webm; codecs=&quot;vp8, vorbis&quot;" data-title="WebM w jakości sieciowej (360P)" data-shorttitle="WebM 360P" data-transcodekey="360p.webm" data-width="510" data-height="360" data-bandwidth="514296" data-framerate="29.97"/></video></div></div>
</td>
<td><div class="center"><span style="color: #c88515;">⭐</span> <b>A file you uploaded is on the main page!</b> <span style="color: #c88515;">⭐</span></div>
<p><b><a href="/wiki/File:Coney_Island_at_Night_(1905).webm" title="File:Coney Island at Night (1905).webm">File:Coney Island at Night (1905).webm</a></b>,
that you uploaded, is on the main page today. Thank you for your contributions to this project.
</p>
</td>
<td><a href="/wiki/File:Motd-logo_02.svg" class="image"><img alt="Motd-logo 02.svg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Motd-logo_02.svg/65px-Motd-logo_02.svg.png" decoding="async" width="65" height="65" srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Motd-logo_02.svg/98px-Motd-logo_02.svg.png 1.5x, https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Motd-logo_02.svg/130px-Motd-logo_02.svg.png 2x" data-file-width="400" data-file-height="400"/></a>
</td></tr></tbody></table><p> //<a href="/wiki/User:EatchaBot" title="User:EatchaBot">EatchaBot</a> (<a href="/wiki/User_talk:EatchaBot" title="User talk:EatchaBot"><span class="signature-talk">dyskusja</span></a>) 00:00, 22 September 2021 (UTC)<span class="ext-discussiontools-init-replylink-buttons"><span class="ext-discussiontools-init-replylink-bracket">[</span><a class="ext-discussiontools-init-replylink-reply" role="button" tabindex="0" data-mw-comment="{&quot;type&quot;:&quot;comment&quot;,&quot;level&quot;:1,&quot;id&quot;:&quot;c-EatchaBot-2021-09-22T00:00:00.000Z-MOTD_Notification_3&quot;,&quot;replies&quot;:[],&quot;timestamp&quot;:&quot;2021-09-22T00:00:00.000Z&quot;,&quot;author&quot;:&quot;EatchaBot&quot;}" href="">odpowiedz</a><span class="ext-discussiontools-init-replylink-bracket">]</span></span><span data-mw-comment-end="c-EatchaBot-2021-09-22T00:00:00.000Z-MOTD_Notification_3"></span>
</p>

When using the new video player, the tiny video embed in that section uses the <video> HTML tag, and the start marker can't be found, because DiscussionTools inserts it inside the <video> tag, which is apparently not valid.

This is a very similar issue to older bugs T270009 and T266288, in which we were inserting our markers inside <style> and <br> tags, which is similarly not allowed.

It will be easy to fix, but we'll need to figure out if there are any other HTML tags that would cause the same problem. <audio> seems like an obvious one to check, but there might be more…

• ppelberg added a project: Editing-team (Kanban Board).Feb 10 2022, 4:14 PM

• ppelberg moved this task from Incoming to Ready to Be Worked On on the Editing-team (Kanban Board) board.

• ppelberg moved this task from Backlog to Triaged on the DiscussionTools board.

matmarex renamed this task from Uncaught TypeError: startMarker is null in DiscussionTools on certain talk pages to Discussion tools not working on some pages with videos when using "New video player" beta feature (Uncaught TypeError: startMarker is null).Feb 14 2022, 4:56 PM

matmarex mentioned this in T301661: Discussion tools not working in a specific page.

matmarex merged a task: T301661: Discussion tools not working in a specific page.

matmarex added subscribers: Dyolf77_WMF, • Whatamidoing-WMF, • ppelberg.

In T301427#7700909, @matmarex wrote:

When using the new video player, the tiny video embed in that section uses the <video> HTML tag, and the start marker can't be found, because DiscussionTools inserts it inside the <video> tag, which is apparently not valid.

This is a very similar issue to older bugs T270009 and T266288, in which we were inserting our markers inside <style> and <br> tags, which is similarly not allowed.

It will be easy to fix, but we'll need to figure out if there are any other HTML tags that would cause the same problem. <audio> seems like an obvious one to check, but there might be more…

Small correction: it is actually valid in HTML to insert them inside the <video> HTML tag. The issue here occurs because the TimedMediaHandler extension rebuilds the tag from scratch after it loads: https://github.com/wikimedia/mediawiki-extensions-TimedMediaHandler/blob/e8af3fa286e7ebc38490894b1d728ae93dcf999a/resources/ext.tmh.player.element.js#L85-L90

However, even if that wasn't happening, we'd still have a problem. Contents of the <video> HTML tag are not rendered by the browser (because they're replaced by the video player), and when that happens to our marker, we wouldn't be able to display comment highlights. (Replying and stuff would work though.)

Change 762525 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/extensions/DiscussionTools@master] Don't insert comment markers inside replaced elements (like `<video>`)

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

gerritbot added a project: Patch-For-Review.Feb 14 2022, 7:47 PM

QA note: This should be tested on a wiki with legacy media DOM (e.g. https://commons.wikimedia.org/) and a wiki with new media DOM (e.g. https://test.wikipedia.org/), and on each of them with the beta feature enabled and disabled.

matmarex moved this task from Ready to Be Worked On to Code Review on the Editing-team (Kanban Board) board.Feb 14 2022, 7:51 PM

(Reported again at https://en.wikipedia.org/wiki/Wikipedia_talk:Talk_pages_project#Reply_tool)

This also appears to fail even without New Video Player.

Example, follow this link: https://en.wikipedia.org/w/index.php?title=User_talk:Usedtobecool&oldid=1073290824#Merry_Christmas_and_Happy_New_Year

Clicking "Reply" in that section fails, and breaks all reply links on the rest of the page until the page is reloaded

Xaosflux mentioned this in T302296: Reply tool fails on some pages with audio.Feb 22 2022, 2:56 PM

• ppelberg mentioned this in T302550: [SPIKE] Determine what – if any – issues ought to block the deployment of the Reply Tool as opt-out at en.wiki.Feb 25 2022, 1:23 AM

matmarex merged a task: T302712: Cannot add topic (section) on Wikidata Project chat.Feb 28 2022, 3:04 PM

matmarex added a subscriber: LucasWerkmeister.

On https://en.wikipedia.org/w/index.php?title=User_talk:Usedtobecool&oldid=1073290824#Merry_Christmas_and_Happy_New_Year it fails because getCoveredSiblings returns an empty array, and the rest of the function there doesn't expect that to be possible. I'm not sure whether the patch would also cover that, as I haven't dug into why it doesn't find any covered siblings.

Change 762525 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] Don't insert comment markers inside replaced elements (like `<video>`)

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

DLynch moved this task from Code Review to QA on the Editing-team (Kanban Board) board.Feb 28 2022, 5:49 PM

DLynch added a project: Editing QA.

I copied one of those talk pages with the issue onto beta, but I didn't think to do it before the patch merged so I'm not actually sure whether it's complete enough with templates etc to have triggered the bug... https://en.wikipedia.beta.wmflabs.org/wiki/User_talk:UsedToBeCool#Merry_Christmas_and_Happy_New_Year

Maintenance_bot removed a project: Patch-For-Review.Feb 28 2022, 6:11 PM

I get the beta feature as an option in https://commons.wikimedia.org/ but not in https://test.wikipedia.org/. See

Screenshot 2022-02-28 at 23.32.29.png (734×2 px, 112 KB)

for Commons

In T301427#7709026, @matmarex wrote:

QA note: This should be tested on a wiki with legacy media DOM (e.g. https://commons.wikimedia.org/) and a wiki with new media DOM (e.g. https://test.wikipedia.org/), and on each of them with the beta feature enabled and disabled.

Looks like there's no "New video player" beta feature on https://test.wikipedia.org/ (and other test wikis), because it's already enabled for everyone. I think we don't need to test the old player on those wikis then.

In T301427#7743105, @matmarex wrote:

Looks like there's no "New video player" beta feature on https://test.wikipedia.org/ (and other test wikis), because it's already enabled for everyone. I think we don't need to test the old player on those wikis then.

Using https://en.wikipedia.beta.wmflabs.org/wiki/User_talk:UsedToBeCool#Merry_Christmas_and_Happy_New_Year as a minumum test case, the error isn't present and the [reply] links are functional. I'll explore other scenarios using https://commons.wikimedia.org/wiki/User_talk:Spinster as a sample.

EAkinloose edited projects, added Verified; removed Editing QA.Mar 2 2022, 9:51 PM

EAkinloose moved this task from QA to Ready for Sign Off on the Editing-team (Kanban Board) board.

• ppelberg closed this task as Resolved.Mar 18 2022, 2:00 AM

• ppelberg claimed this task.

	F34970497: Screenshot 2022-02-28 at 23.32.29.png
	Feb 28 2022, 10:35 PM

	F34970494: Screenshot 2022-02-28 at 23.29.56.png
	Feb 28 2022, 10:35 PM

	F34947576: image.png
	Feb 10 2022, 3:05 PM

Discussion tools not working on some pages with videos when using "New video player" beta feature (Uncaught TypeError: startMarker is null)Closed, ResolvedPublicBUG REPORTActions

Description

Details

Related Objects

Event Timeline

Discussion tools not working on some pages with videos when using "New video player" beta feature (Uncaught TypeError: startMarker is null)
Closed, ResolvedPublicBUG REPORT
Actions