For .mw-collapsible-toggle, padding-left: 0.2em; is defined in https://en.wikipedia.org/wiki/MediaWiki:Common.css
So that specific example would be on-wiki CSS and hence invalid for Phabricator.

However, if you wanted to change the default in MediaWiki core, that would be in resources/src/jquery/jquery.makeCollapsible.css (I think).

As I already said, enwiki in safemode only.

If this is still a valid task, maybe we can push it to Google-Code-in-2017?

@D3r1ck01 This sounds like a good task for Google-Code-in-2017 to me (just verified on hewiki one more time).

In T178998#3717335, @Volker_E wrote:

@D3r1ck01 This sounds like a good task for Google-Code-in-2017 to me (just verified on hewiki one more time).

Okay! If you like, I can mentor this along side with you :), will import to GCI site at once: https://codein.withgoogle.com/dashboard/tasks/5158707136561152/

@D3r1ck01 Sounds good. The task should not only be about adding the rules to core, but also remove the MediaWiki:Common.css rules afterwards from current understanding. Latter should probably be done by an experienced Wikipedia contributor though as it involves social interaction there.

With wiki code

{| class="wikitable mw-collapsible"
|+name
|-
|aaaaaaaaaa||bbbbbbbbbb||cccccccccc
|}

it seems that the HTML produced is:

<table class="wikitable mw-collapsible">
<caption>name
</caption>
<tr>
<td>aaaaaaaaaa</td>
<td>bbbbbbbbbb</td>
<td>cccccccccc
</td></tr></table>

There is an extra return line inside caption tag, meaning that if we simply add padding-left: 0.2em; to the mw-collapsible-toggle tag, an extra space will be produced (see image).

However, using the same wiki code on English Wikipedia, the extra return line is not produced. Any idea on what's the difference inside?

I tried something like this:

It should be working fine now, but I'm not sure if it's the best solution. Any suggestions?

@eflyjason, it would be good to use Gerrit Code Review(recommended) system to submit your patch. Here is a link to the Gerrit Tutorials: https://www.mediawiki.org/wiki/Gerrit/Tutorial#Prepare_to_work_with_Gerrit. Looking forward to it.

In T178998#3805423, @eflyjason wrote:

With wiki code

{| class="wikitable mw-collapsible"
|+name
|-
|aaaaaaaaaa||bbbbbbbbbb||cccccccccc
|}

it seems that the HTML produced is:

<table class="wikitable mw-collapsible">
<caption>name
</caption>
<tr>
<td>aaaaaaaaaa</td>
<td>bbbbbbbbbb</td>
<td>cccccccccc
</td></tr></table>

There is an extra return line inside caption tag, meaning that if we simply add padding-left: 0.2em; to the mw-collapsible-toggle tag, an extra space will be produced (see image).

However, using the same wiki code on English Wikipedia, the extra return line is not produced. Any idea on what's the difference inside?

Not yet sure of why this behavior but this calls for some investigation. Thanks.

Change 394847 had a related patch set uploaded (by Eflyjason; owner: Eflyjason):
[mediawiki/core@master] Component: Add some CSS spacing before table collapsing button

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

The whitespace before </caption> and </td> should removed from the parser. This whitespace gets also copied into clipboard when selecting the caption or the table element with a triple click.

In T178998#3807341, @Fomafix wrote:

The whitespace before </caption> and </td> should removed from the parser. This whitespace gets also copied into clipboard when selecting the caption or the table element with a triple click.

Done in my patch set 5. :D

I'd consider using a little different margin-left value as well, 0.5em seems preferable looking at various other elements in Vector (and MinervaNeue, which is using a different UI logic AFAIK).
0.2em seems like a magic number invented with no other element carrying it. .mw-content-ltr .mw-editsection uses 1em but that applies to a heading.

In T178998#3811034, @Volker_E wrote:

I'd consider using a little different margin-left value as well, 0.5em seems preferable looking at various other elements in Vector (and MinervaNeue, which is using a different UI logic AFAIK).
0.2em seems like a magic number invented with no other element carrying it. .mw-content-ltr .mw-editsection uses 1em but that applies to a heading.

I guess 0.2em is to simulate a regular space's width. Setting to 0.5em seems somehow weird, especially after the table is collapsed.

0.2em:

0.5em:

A follow-up change regarding parser is added here: https://gerrit.wikimedia.org/r/395477 (T182074)

0.3em is a pretty frequent value on mediawiki, and it fits great here.

A distance can also generated by

.mw-collapsible-toggle:before {
	content: ' ';
}

This has a different behavior on wrapping.

In T178998#3812748, @Fomafix wrote:

A distance can also generated by

.mw-collapsible-toggle:before {
	content: ' ';
}

This has a different behavior on wrapping.

That sounds like a good solution too as we won't have to worry about the em number. Would there be any compatibility issue with old browsers? I think since IE 8 they all support :before?

IE 8 supports the :before (not the ::before). But this does not matter because IE 8 is only supported without JavaScript and the collapsing needs JavaScript.

Please have a look at T155347 (and Gerrit patches 9 and 10), also please try your code on https://test.wikipedia.org/wiki/Test_suite_for_mw-collapsible, and especially on https://test.wikipedia.org/wiki/CollapsingTestpageMw (custom toggle).

An em based margin actually gives better layout control than CSS content in case we're unifying distance of such interactive elements together with text treatment, compare [ edit ] vs [Expand] on enwiki

• internal whitespace and
• uppercase action verb start

Also @Od1n, 0.3em is foremost used for top/bottom distance and only in one case .mw-echo-notifications-badge for horizontal distance. Compare

• https://en.wikipedia.org/w/load.php?debug=truee&lang=en&modules=ext.echo.badgeicons%7Cext.echo.styles.alert%2Cbadge%7Cext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediaBadges%7Cmediawiki.legacy.commonPrint%2Cshared%7Cmediawiki.sectionAnchor%7Cmediawiki.skinning.interface%7Cskins.vector.styles%7Cwikibase.client.init&only=styles&skin=vector and
• https://en.wikipedia.org/w/load.php?debug=true&lang=en&modules=site.styles&only=styles&skin=vector

In T178998#3813067, @Od1n wrote:

Please have a look at T155347 (and Gerrit patches 9 and 10), also please try your code on https://test.wikipedia.org/wiki/Test_suite_for_mw-collapsible, and especially on https://test.wikipedia.org/wiki/CollapsingTestpageMw (custom toggle).

I implemented your changes in your patch 10. https://test.wikipedia.org/wiki/Test_suite_for_mw-collapsible should be working correctly. But I think for https://test.wikipedia.org/wiki/CollapsingTestpageMw the only way is to add margin-left: 0; and margin-right: 0; manually to the custom toggle.

Yes, it would require manually adding margin-left: 0; and margin-right: 0; to the custom toggles, in addition to the already needed float: none;.
That's why I'd still bend to favor my patch 9, which has a "whitelist" approach.

The root cause of this, is because regular (automatically created) and custom (manually specified) toggles use the same class, thus aren't distinguished at the CSS level.
I don't know if there is room for improvement about this, but if so, let's keep it for a later, separate ticket.

Just for completion: 0.2em seems reasonable in context for the time being.

In T178998#3854537, @Volker_E wrote:

Just for completion: 0.2em seems reasonable in context for the time being.

I’m quite late to this: maybe 0.25em for parity with edit section links?

What is the current status of this ticket? What kind of patch would be accepted to solve this issue?

I see there's an open patch which should probably be abandoned if it's not being worked on so somebody else can work on this task - https://gerrit.wikimedia.org/r/#/c/mediawiki/core/+/394847/

T155347 is ready and awaiting for more than two years 😭

Change 394847 abandoned by Jdlrobson:
[mediawiki/core@master] Component: Add some CSS spacing before table collapsing button

Reason:
According to https://phabricator.wikimedia.org/T178998#5980303 this is inactive. Am freeing up for the next developer. Apologies to the owner for your experience here, I'll do better to make sure that doesn't happen again next time round.

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

Change #1054027 had a related patch set uploaded (by Pppery; author: GauriGuptaa):

[mediawiki/core@master] Add CSS spacing before table collapsing button

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

Change #1054027 abandoned by GauriGuptaa:

[mediawiki/core@master] Add CSS spacing before table collapsing button

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

Change #1172328 had a related patch set uploaded (by Pppery; author: Atulk02):

[mediawiki/core@master] jquery.makeCollapsible: Adjust spacing for collapsible elements

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

Change #1173893 had a related patch set uploaded (by Atulk02; author: Atulk02):

[mediawiki/core@master] jquery.makeCollapsible: Add spacing next to the toggle button

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

Change #1173893 abandoned by Atulk02:

[mediawiki/core@master] jquery.makeCollapsible: Add spacing next to the toggle button

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