Change 418716 had a related patch set uploaded (by Matěj Suchánek; owner: Matěj Suchánek):
[mediawiki/extensions/AbuseFilter@master] Convert Special:AbuseFilter to OOUI

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

Change 419801 had a related patch set uploaded (by Daimona Eaytoy; owner: Daimona Eaytoy):
[mediawiki/extensions/AbuseFilter@master] Switch /test to OOUI

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

Change 418267 had a related patch set uploaded (by Huji; owner: Huji):
[mediawiki/extensions/AbuseFilter@master] Convert Special:AbuseFilter/tools to use OOUI

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

Change 419986 had a related patch set uploaded (by Daimona Eaytoy; owner: Daimona Eaytoy):
[mediawiki/extensions/AbuseFilter@master] Switch footer of editor to OOUI

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

This is the best I could do with the "load filter" button. The other fields are acceptable, but I'd rather leave it alone as the only element not to use OOUI (buttons and dropdown above are in review as well) than submit such a filth. I literally found no way to decrease its dimension (probably there isn't), and adding custom classes is not the way to solve this. All you can do is set a maxlength (maybe also min and max), but this won't affect width.

In T132284#4057385, @Daimona wrote:

I literally found no way to decrease its dimension (probably there isn't)

I don't think there is. Hence the creation of T189425: Special:AbuseFilter: OOUI widgets take up more vertical space

P.S. BTW, does an input of type=user accept anonymous users as well?

I don't think it provides autocomplete for IPs, but you can still type them and there will be no issue.

Indeed, nor I could find a smaller suitable input type. So either we hack the CSS (temporary) or we keep it as it is.
As for user input, yeah, that was the sense of my question, many thanks.

Right now, counting as done what's under review, we're only missing the filter editing interface. It may be a bit harder, and we'd better take into account T154749.

@Daimona Coming from T189425#4058250, you're referring to the “Load Filter ID” FieldLayout, correct?

@Volker_E yes, to the whole field including text input + button for loading a filter with given ID. I managed to put them inline sticking to OOUI methods, but in order to make it smaller I had to wrap it inside a div with custom CSS. You may check it on gerrit at lines 2158-2196.

@Daimona Are you aware of HorizontalLayout? It would resolve the general aligning issue for you. We could still apply shorter width in a special CSS file, but should also not rely on inline styles as in your current patch.

@Volker_E Yes, I am. But in the very special case of this "load" field, is it different from ActionLayout? Anyway, the main problem here is the width. I may move the style to a dedicated class for AF, but is there a nicer way to reduce the width?

@Daimona Just to emphasize my point above, a HorizontalLayout would provide future-proof security for such layout need in case anything else changes library-wide (widths/paddings/[younameit).
And no, currently we don't provide any flexible handle class for input widths as it wasn't requested widely.
Having an input with with only a few, hard-stopped letters or numbers as values is still the exception. Therefore no such dedicated class exists, but it's noted for possible future extension.

@Volker_E, ok, now I understand, many thanks. I'll change it later, together with adding the style to a custom class.

@Volker_E As discussed on gerrit, here is a sample of bad alignment. Using it localization (longer label), the button is lowered further. I may have failed to correctly use OOUI widget and to nest them properly, but this seems to be the only result close enough to the wanted one.
Code snippet: https://pastebin.com/3urtrqnS
Result:

Change 421487 had a related patch set uploaded (by Daimona Eaytoy; owner: Daimona Eaytoy):
[mediawiki/extensions/AbuseFilter@master] Switch editing interface to OOUI

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

Change 421607 had a related patch set uploaded (by Daimona Eaytoy; owner: Daimona Eaytoy):
[mediawiki/extensions/AbuseFilter@master] Add reasons dropdown to hidelog form and convert it to OOUI

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

Change 421791 had a related patch set uploaded (by Daimona Eaytoy; owner: Daimona Eaytoy):
[mediawiki/extensions/AbuseFilter@master] Convert /revert to use OOUI

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

Change 418716 merged by jenkins-bot:
[mediawiki/extensions/AbuseFilter@master] Convert Special:AbuseFilter to OOUI

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

@Daimona I know OOUI is still not optimal for compact views like this, but I decided to merge these because that can further mobilize people to work on a compact view for OOUI.

@Huji Yeah, true. There's still time to improve compact views in OOUI, but now at least we're using the standard.

Change 421791 merged by jenkins-bot:
[mediawiki/extensions/AbuseFilter@master] Convert /revert to use OOUI

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

@Daimona See below. The spacing between the checkboxes is undesirably wide in the Flags section, but normal in the Actions to take section. Can you fix it?

Strange, I don't remember noticing a thing like this. I'll try to find a reason in the next days.

Change 419986 merged by jenkins-bot:
[mediawiki/extensions/AbuseFilter@master] Switch footer of editor to OOUI

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

Change 419801 merged by jenkins-bot:
[mediawiki/extensions/AbuseFilter@master] Switch /test and /examine/# to OOUI

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

@Daimona there is a little form at the end of Special:AbuseFilter/# which asks you for the reason to see the private details. That needs to be OOUIfied.

@Huji: right! I'm sorry, I couldn't see it in deployment wiki (not enough rights) and thus the removal :-)

@Huji I'm investigating the wider space between checkboxes. The reason (as you can see by inspecting the elements) is this CSS rule:

.oo-ui-fieldLayout:after {
    content: ' ';
    display: table;
}

That produces whitespace only with the first checkboxes. Probably, this is because the flags are inside a form table, while the others aren't, thus the different display. Now, my question is: do we want to really fix this? It may be good for the flags checkboxes to have higher visibility, while a fix would require either overriding the CSS or completely changing the way the page is being generated.

Can we modify the form such that flags are part of a MultiselectCheckbox?

@Huji I gave it a look but I'm quite concerned, since I don't know how to assign checkboxes a name and gather their value from web request.

Shouldn't be too hard. Let me take a look at it.

After all, multiselect is the correct Widget to use anyway, since the checkboxes are all options from the same family.

Change 423504 had a related patch set uploaded (by Daimona Eaytoy; owner: Daimona Eaytoy):
[mediawiki/extensions/AbuseFilter@master] Convert Special:AbuseLog/# to OOUI

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

Change 423504 merged by jenkins-bot:
[mediawiki/extensions/AbuseFilter@master] Convert Special:AbuseLog/# to OOUI

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

Change 421607 merged by jenkins-bot:
[mediawiki/extensions/AbuseFilter@master] Add reasons dropdown to hidelog form and convert it to OOUI

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

@Daimona: In Special:AbuseFilter/history/1 on the top of the page there is a link that reads "Back to filter editor". I think that should be turned into a button (just like the "Create a new filter" link on Special:AbuseFilter which is now a OOUI button).

Change 428587 had a related patch set uploaded (by Daimona Eaytoy; owner: Daimona Eaytoy):
[mediawiki/extensions/AbuseFilter@master] Switch plain links to OOUI buttons in /history and diffs

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

Please see T181770 - did this get pushed out without verifying layout in all the skins??

@Xaosflux we're converting interfaces since OOUI is the new standard. The problem of the increased vertical space is known, tracked in T189425 and totally dependent on OOUI.

Change 428587 merged by jenkins-bot:
[mediawiki/extensions/AbuseFilter@master] Switch plain links to OOUI buttons in /history and diffs

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

Change 418267 merged by jenkins-bot:
[mediawiki/extensions/AbuseFilter@master] Convert Special:AbuseFilter/tools to use OOUI

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

Change 430063 had a related patch set uploaded (by Daimona Eaytoy; owner: Daimona Eaytoy):
[mediawiki/extensions/AbuseFilter@master] Use OOUI buttons instead of plain links in ViewDiff

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

Change 430063 merged by jenkins-bot:
[mediawiki/extensions/AbuseFilter@master] Use OOUI buttons instead of plain links and Html::errorbox for errors

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

@Volker_E here at lines 468-484 I'm using listeners on infused checkboxes to selectively disable and uncheck them. It seems to work, but there's a problem: when I remove the 'disabled' flag from a checkbox, its label remains grayed, although the checkbox is actually clickable. Is there a separate way to un-disable the label, or is it a bug? The checkbox is defined here at lines 594-607.

The problem above is now solved, I had to separately infuse the entire field as well. Now no more blockers for this :-)

@Daimona Awesome!

Change 421487 merged by jenkins-bot:
[mediawiki/extensions/AbuseFilter@master] Switch editing interface to OOUI & improve NoJS usability

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