Dropdown widgets on Special:Delete only has partial OOUI styling
Closed, DuplicatePublic
Actions

Assigned To

None

Authored By

	TheDJ
	Jul 24 2017, 9:50 AM

Description

I was looking at some reports where people were complaining about the whitespace on dropdowns of the Special:Delete page, when using Firefox (not Chrome or Safari, IE unknown).

I notice that it seems that these do not use the full styling for OOUI dropdowns. Possibly they are not being infused or something ?

I do agree that the styling of the native option element looks weird this way.

FF dropdown of Vector

Screen Shot 2017-07-24 at 11.42.01.png (1×1 px, 495 KB)

FF dropdown of Monobook

Screen Shot 2017-07-24 at 11.42.15.png (1×1 px, 406 KB)

'normal' OOUI DropdownInputWidget

Screen Shot 2017-07-24 at 11.50.01.png (472×1 px, 42 KB)

The styling causing this large whitespace in the native dropdowns is the 0.5em padding of this rule:

.oo-ui-dropdownInputWidget option {
    font-size: inherit;
    font-family: inherit;
    height: 1.5em;
    padding: 0.5em 1em;
}

Related Objects
Search...

Status	Assigned	Task
Open	None	T49145 Formally deprecate jQuery UI after we've stopped using jQuery UI in extensions and core
Open	None	T100270 Replace use of jQuery UI and MW UI with OOUI across all Wikimedia-deployed extensions and core
Open	None	T100161 Convert all of MediaWiki core to OOUI PHP (tracking)
Resolved	Esanders	T113758 Convert DeleteAction.php/SpecialUndelete.php to use OOUI
Duplicate	None	T171455 Dropdown widgets on Special:Delete only has partial OOUI styling

Event Timeline

TheDJ created this task.Jul 24 2017, 9:50 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 24 2017, 9:50 AM

TheDJ updated the task description. (Show Details)Jul 24 2017, 9:51 AM

TheDJ added a parent task: T162849: Support WMF communities in run-up to switching EditPage over to OOUI.

TheDJ updated the task description. (Show Details)Jul 24 2017, 9:56 AM

TheDJ added a project: Browser-Support-Firefox.

TheDJ updated the task description. (Show Details)

It's using the PHP DropdownInputWidget, which is a regular <select> element with some funky styles. We don't "infuse" it, it seems (replace it with a JavaScript DropdownInputWidget, which is a custom design). It's one line of code to infuse it: https://www.mediawiki.org/wiki/OOjs_UI/Using_OOjs_UI_in_MediaWiki#Infusion

Restricted Application added a subscriber: TerraCodes. · View Herald TranscriptJul 24 2017, 10:36 AM

This is honestly good − there are some gadgets for Special:Delete that would completely break if it was turned into a custom <select>. It is the only reason the script for people deleting pages in Russian Wikipedia (https://ru.wikipedia.org/wiki/MediaWiki:Deletepage.js) still works, for example. (Padding is still a problem, yes.)

Xaosflux subscribed.Jul 24 2017, 12:27 PM

TheDJ edited parent tasks, added: T113758: Convert DeleteAction.php/SpecialUndelete.php to use OOUI; removed: T162849: Support WMF communities in run-up to switching EditPage over to OOUI.Jul 24 2017, 3:10 PM

Volker_E subscribed.Jul 24 2017, 3:33 PM

Jdforrester-WMF subscribed.Jul 24 2017, 5:10 PM

Quiddity added a project: OOUI.Jul 24 2017, 6:40 PM

Jdforrester-WMF triaged this task as Medium priority.Jul 24 2017, 7:30 PM

Jdforrester-WMF edited projects, added UI-Standardization, Accessibility; removed OOUI.

The infused OOUI version should keep a hidden <select> tag with the same ID available, but some scripts will need to be updated and this is to be expected.

Infusing keeps the <select> (and hides it), but only to be compatible with the way browsers preserve the value on back/forward navigation. Changing its options or value will not be reflected in the OOjs UI widget's interface.

Volker_E moved this task from Unsorted to OOUI on the UI-Standardization board.Aug 15 2017, 9:44 PM

Volker_E renamed this task from Dropdown widgets on Special:Delete only has partial oojs ui styling to Dropdown widgets on Special:Delete only has partial OOUI styling.Jan 18 2018, 9:40 PM

Volker_E updated the task description. (Show Details)

Volker_E closed this task as a duplicate of T194523: DropdownInputWidget: In non-JS, focus state border is missing on the right side and other interaction visual glitches.May 17 2019, 8:23 PM

	F8828400: Screen Shot 2017-07-24 at 11.42.15.png
	Jul 24 2017, 9:50 AM

	F8828415: Screen Shot 2017-07-24 at 11.50.01.png
	Jul 24 2017, 9:50 AM

	F8828388: Screen Shot 2017-07-24 at 11.42.01.png
	Jul 24 2017, 9:50 AM

Dropdown widgets on Special:Delete only has partial OOUI stylingClosed, DuplicatePublicActions

Description

Related ObjectsSearch...

Event Timeline

Dropdown widgets on Special:Delete only has partial OOUI styling
Closed, DuplicatePublic
Actions

Related Objects
Search...