Page MenuHomePhabricator

Custom collapsible elements need weird conditions to work now
Closed, ResolvedPublicBUG REPORT

Description

Hi. The customizable collapsible elements are broken now. I was told that maybe it's because of hidden="until-found" introduction patch. I'm starting with more complicated example to show why it's impossible to work this way, the minimal example is later below.

  1. Create a small example. It has interchangeable button "show"/"hide" and hidden line in a table, that can be shown or hidden again. A custom mark is "mark".
<div><span class="mw-customtoggle-mark mw-collapsible" id="mw-customcollapsible-mark">show them </span><span class="mw-customtoggle-mark mw-collapsible mw-collapsed" id="mw-customcollapsible-mark">hide them</span></div>

{| class="wikitable mw-collapsible"
! name
|- 
| A
|- class="mw-collapsible mw-collapsed" id="mw-customcollapsible-mark"
| B
|- 
| C
|}
  1. Expected: You can see a "show" button, click on it and get a "hide" button instead, and vice versa.
  2. Got: You always see a "showhide" compound button, that works like both interchangeably.

To fix this, it's enough to add "mw-collapsible" class to the div in the beginning of the code:

<div class=mw-collapsible><span class="mw-customtoggle-mark mw-collapsible" ...

But it creates a collapsing button to the collapsing button. I needed to add templatestyles to the wanted button with display:none to unwanted button.

The other way to fix it is replacing span by div. For example, the code

<span class="mw-customtoggle-mark mw-collapsible">button</span>
<span class="mw-collapsible mw-collapsed" id="mw-customcollapsible-mark">Text</span>

does not work, but the code

<span class="mw-customtoggle-mark mw-collapsible">button</span>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-mark">Text</div>

does, just like the code

<span class="mw-customtoggle-mark mw-collapsible">button</span>
<span class="mw-collapsible"><span class="mw-collapsible mw-collapsed" id="mw-customcollapsible-mark">Text</span></span>

Thank you.

Event Timeline

matmarex subscribed.

That's a pretty crazy example… Thanks for writing it out, I can reproduce the problem.

it looks like we broke the case where the entire .mw-collapsible element is toggled (there is no .mw-collapsible-content inside of it). I think we can fix it.

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

[mediawiki/core@master] jquery.makeCollapsible: Fix toggling custom collapsible elements

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

Does this solution work for nested custom collapsing with two different marks? So that

<... class="mw-collapsible" hidden="until-found">

hidden comes from outer collapsing, and mw-collapsible from inner one.

Test wiki created on Patch demo by Matma Rex using patch(es) linked to this task:
https://patchdemo.wmcloud.org/wikis/4494d98855/w/

Maybe? I am not sure what you mean. Things get a bit weird when there are multiple togglers for a single collapsible element. If you have a test case, please copy it over to the demo wiki linked above, so that we can see if it works.

I copied the initial test case you provided here: https://patchdemo.wmcloud.org/wikis/4494d98855/wiki/T398754_test_1 and as you can see, it works.

I'll try. For now, my minimal example does not work on that demo patch, there is a redundant button.
Also, I don't know if it's a bug or a feature, if collapsing all the table and than clicking on show, one line appears.
UPD: I've also added a nested example, and it works.

Change #1166477 merged by jenkins-bot:

[mediawiki/core@master] jquery.makeCollapsible: Fix toggling custom collapsible elements

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

@matmarex, how the patch was merged if it didn't fix the problem right?

@IKhitron I thought it did. Can you say which example is not working as expected, and say how it is supposed to work?

I'm sorry, my bad. I forgot to remove "mw-collapsible" fix from the example. It's OK now.

Thanks for checking!