Page MenuHomePhabricator

Bolding causes CategoryTree to not render
Closed, DeclinedPublic

Description

Author: titoxd.wikimedia

Description:
Adding <categorytree>Category</categorytree> to a page causes the category tree
to render, as expected, but typing '''<categorytree>Category</categorytree>''',
to try to make the region bold, causes the tree to not open. The tree also fails
to open when the [+] to its left is clicked.


Version: unspecified
Severity: normal

Details

Reference
bz7205

Event Timeline

bzimport raised the priority of this task from to Lowest.Nov 21 2014, 9:28 PM
bzimport set Reference to bz7205.
bzimport added a subscriber: Unknown Object (MLST).

Hm, I'm afraid this can't really be fixed: the core of the problem is that
'''<categorytree>Category</categorytree>''' will produce invalid HTML. The '''
creates <b> tags, which are "inline elements", <categorytree> produces a <div>,
which is a block element - the result is something like <b><div>....</div></b>.
HTML block elements are not allowed inside inline elements (it doesn't make sense).

MediaWiki uses the "tidy" tool to clean up HTML before output, which tries to
fix this "smartly" by moving the <b>...</b> tags inside the <div>. This however
changes the tag structure of the categorytree output, which the JS code relies
on - the JS code can't find the <div> tag to fill with results from the AJAX
call, triggering a JS error (div has no properties). I tried to turn off tidy,
but then my firefox tried to "fix" the broken HTML structure (DOM) itself, with
similar results as with tidy enabled.

Basically, this problem always exists if you try to apply inline formating like
''' to block elements. Usually, tidy fixes it more or less, but sometimes it
screws things up even more - especially in conjunction with JS code. I don't see
a way to change that - IMHO tidy (and the browser) should just dicard the <b>
tags instead of moving them around and second guessing the user.

The solution to get the tree bold is simple though: <categorytree
style="font-weight:bold">Category</categorytree>. You can apply any CSS style to
the tree this way. If someone has a great idea on how to avoid breakage due to
inline elements wrapping the tree's div, please let me know.

no feedback in a year, simple workaround provided. closing as WONTFIX