Page MenuHomePhabricator

Reduce copy-pasted <textarea> CSS to a maintainable subset
Open, Needs TriagePublic5 Story Points

Description

Our CSS currently contains this large block, probably copy-pasted from multiple web resources:

display: block;
word-wrap: break-word;
overflow-wrap: break-word;
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
-webkit-user-select: text;
font: medium '-moz-fixed';
font: '-webkit-small-control';
font-size: medium;
line-height: normal;
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0;
text-shadow: none;
text-align: start;

The intended effect of this code is to make a <div> appear like a <textarea>, but without the border.

Following the same arguments @Volker_E gave in https://gerrit.wikimedia.org/r/433150 we find it critical to reduce this code to the smallest subset actually needed by our supported browsers. Code comments should explain which subset is required for which browser.

This came up (again) while working on T205431.

Event Timeline

Restricted Application added a project: TCB-Team. · View Herald TranscriptOct 9 2018, 11:06 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Lea_WMDE set the point value for this task to 5.Oct 16 2018, 2:03 PM

This needs to be tested on all the relevant browsers (at least ie, chrome, firefox, safari)

Change 470556 had a related patch set uploaded (by Thiemo Kreuz (WMDE); owner: Thiemo Kreuz (WMDE)):
[mediawiki/extensions/TwoColConflict@master] Remove CSS resets that don't have any effect

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

I guess the styles had their source in explanations like https://stackoverflow.com/questions/8956567/how-do-i-make-an-editable-div-look-like-a-text-field#comment63333399_8957518

A related question is, do you want that div to look like a normal browser textarea or like a Wikimedia MultilineTextInputWidget – for user-interface consistency I'd suggest latter.

Excellent point – I'm sure we will look into this again and fine-tune it later. At the moment it's a bit of both: We use the mw-editfont-monospace class as specified in mediawiki.editfont.less, but add the CSS shown above on top of it. The current goal is to make it look a bit like Flow in wikitext source editing mode.

Change 470556 merged by jenkins-bot:
[mediawiki/extensions/TwoColConflict@master] Remove CSS resets that don't have any effect

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