"Switch editor" and "Check syntax" buttons are misaligned
Open, Needs TriagePublic
Actions

Assigned To

None

Authored By

	Od1n
	Oct 28 2024, 3:47 AM

Description

When editing a filter:

"Switch editor" button (#mw-abusefilter-switcheditor element) has a display: inline; CSS.
"Check syntax" button (#mw-abusefilter-syntaxcheck element) has a display: inline-block; CSS.

As a result, these buttons are not vertically aligned.

Explanation:

#mw-abusefilter-switcheditor is initially hidden: ext.abuseFilter.less#147. Then it is showed using jQuery: ext.abuseFilter.edit.js#517. Problem: the element being a <span>, jQuery adds it a display: inline; inline CSS.

Meanwhile, #mw-abusefilter-syntaxcheck has the initial display: inline-block; from OOUI:

.oo-ui-horizontalLayout > .oo-ui-widget {
    display: inline-block;
    vertical-align: middle;
}

Screenshot attached.

Details

Related Changes in Gerrit:

	Subject	Repo	Branch	Lines +/-
	Hide/show "Switch editor" button using OOUI methods to fix erroneous CSS	mediawiki/extensions/AbuseFilter	master	+8 -7

Customize query in gerrit

Related Objects

Mentioned In: T378577: Fix Selenium tests, probably because of faulty switchEditor()
Mentioned Here: T378577: Fix Selenium tests, probably because of faulty switchEditor()

Event Timeline

Od1n created this task.Oct 28 2024, 3:47 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 28 2024, 3:47 AM

The "Switch editor" button is created here: AceEditBoxBuilder.php#65.

When creating a ButtonWidget (or any other Element), we cannot add inline CSS to it. Otherwise, we would have been able to create it with a display: none; inline CSS, then remove this CSS using removeProperty().

Remaining options I can think of:

When creating the button, add a class to it (using a classes item in the config array), and apply a display: none; CSS on that class. Then remove the class to show the button.
Replace .show() with .css( 'display', 'inline-block' ).

Ideally, there should be OOUI methods to show/hide the element, don't you think?

Update – They exist. See toggle() method here: Element.php#L125 (PHP) and Element.js#L892 (JavaScript). So, we should be able to cleanly fix the issue at hand. 😀

Change #1083587 had a related patch set uploaded (by Gerrit Patch Uploader; author: Anne Haunime):

[mediawiki/extensions/AbuseFilter@master] Hide/show "Switch editor" button using OOUI methods to fix erroneous CSS

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

gerritbot added a project: Patch-For-Review.Oct 28 2024, 6:26 AM

I'm sure this was pointed out before, but surprisingly I can't find the task. I even made a patch a couple years ago but it wouldn't pass CI for some reason. I think the toggle approach is cleaner, so let's go with that.

Change #1083587 had a related patch set uploaded (by Gerrit Patch Uploader; author: Anne Haunime):

[mediawiki/extensions/AbuseFilter@master] Hide/show "Switch editor" button using OOUI methods to fix erroneous CSS

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

Od1n mentioned this in T378577: Fix Selenium tests, probably because of faulty switchEditor().Nov 10 2024, 11:37 AM

The patch currently fails tests.

An attempt at fixing tests has been made in T378577 (gerrit 1084722), but it did not fix the tests for this patch.

matej_suchanek moved this task from Backlog to Management UI on the AbuseFilter board.Jan 2 2026, 2:03 PM

"Switch editor" and "Check syntax" buttons are misalignedOpen, Needs TriagePublicActions

Description

Details

Related Objects

Event Timeline

"Switch editor" and "Check syntax" buttons are misaligned
Open, Needs TriagePublic
Actions