The other thing to remember for the column heading there is that the select-all box is not visible to non-JS users. So for them, if there's no "Make this setting global" label at the top, they'll just get a column of checkboxes with nothing other than hover-text to tell them what they're for.

Perhaps we could keep the "Make this setting global" for non-JS users, and replace it with the checkbox with JS. Sound okay?

Change 414892 had a related patch set uploaded (by Samwilson; owner: Samwilson):
[mediawiki/extensions/GlobalPreferences@master] Left align checkboxes and improve select-all message(s)

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

• With JS:
  
• Without JS:
  

I'm minorly concerned that moving the column of 'make this global' checkboxes further away from the actual preferences, but am willing to go either route.

The "Make this setting global" label doesn't just apply to 'select all' but the entire column. Combining it with the 'select all' weakens the label, in my opinion. Here's a maybe-good maybe-terrible idea: Could we make the "Select all" checkbox a link instead, that performs the same check all/none action? And it could only appear for JS users?

@TBolliger Hmm, I'm not sure about the link idea. The idea for "select all checkbox checking everything below" is a commonly seen web design pattern. But for links, the intuition is that the link will open up something new/go to a new page.

The reason for combining the "Make this setting global" and "select all" is that the former was really easy to miss. But making them bold, combined and properly aligned should fix that. There are a couple of ideas in T188424: Improve the UI of Global Preferences (aka "fix two vertical rows of checkboxes") too.

Since Sam has already made the changes, I think we should proceed with your initial suggestion (as long as we make it bold!)

We can think of ways to address the columns in the other ticket.

Hmm, I pulled up the patch on commtech wiki and I see the flash of non-JS version before the page fully loads (see recording below). I think that's problematic.

Yeah, that's not great. We should fix this (or come up with a different solution) before release.

Does the non-JS label have to be on two lines? If it were just one one, and positioned similarly to the line that replaces it, the FOUC would at least not result in vertical shifting of the whole form below.

Keeping in mind other skins as well of course, who might style things quite differently.

Or could the two messages be more similar, so the change from

Make this setting global

to

[ ] Select all options below to be global

is less pronounced?

In T188358#4016315, @Samwilson wrote:

Does the non-JS label have to be on two lines? If it were just one one, and positioned similarly to the line that replaces it, the FOUC would at least not result in vertical shifting of the whole form below.

Keeping in mind other skins as well of course, who might style things quite differently.

Let's do away with "Make this setting global" and instead have "Select options below to be global" for both JS and non-JS versions. It'll appear with the checkbox for the JS version. I think it's fairly obvious that checking that checkbox will select all and it's something people can click and get the hang of in a minute.

In T188358#4018770, @Niharika wrote:

In T188358#4016315, @Samwilson wrote:

Does the non-JS label have to be on two lines? If it were just one one, and positioned similarly to the line that replaces it, the FOUC would at least not result in vertical shifting of the whole form below.

Keeping in mind other skins as well of course, who might style things quite differently.

Let's do away with "Make this setting global" and instead have "Select options below to be global" for both JS and non-JS versions. It'll appear with the checkbox for the JS version. I think it's fairly obvious that checking that checkbox will select all and it's something people can click and get the hang of in a minute.

Agreed.

Good idea. Done. Also minimised the FOUC with margins etc. (and found T188968).

https://gerrit.wikimedia.org/r/#/c/414892/ is ready I think.

Change 414892 merged by jenkins-bot:
[mediawiki/extensions/GlobalPreferences@master] Left align checkboxes and improve select-all message(s)

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