Discuss solution for clipped placeholder text in ULS when screen width decreased
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To

Authored By

	• alexhollender_WMF
	Mar 2 2021, 6:33 PM

Description

Currently when the ULS is displaying the list in a single column the placeholder text is clipped (view on patchdemo) at lower resolutions (decrease browser width to see this in action):

This is also a problem in production for the compact languages link feature.

Given that the length of the string "Search for a language" varies per language, what might be a reasonable solution here? Min-width for the menu?

language	string	screenshot
de	Nach einer Sprache suchen
fr	Rechercher une langue

QA Results - Beta

AC	Status	Details
1	✅	T276255#6973091

Details

	Subject	Repo	Branch	Lines +/-
	Fix ULS dialog positioning in some cases	mediawiki/extensions/UniversalLanguageSelector	master	+1 -1

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	ovasileva	T275766 Log sessionID, isAnon, editBucketCount, and selectedLanguage properties in the UniversalLanguageSelector instrument
Resolved	ovasileva	T275794 Log time on page before switching language as part of the UniversalLanguageSelector instrument
Resolved	ovasileva	T256023 [EPIC] Improve language switching capabilities
Resolved	ovasileva	T268241 Style language button and menu
Resolved	Edtadros	T276255 Discuss solution for clipped placeholder text in ULS when screen width decreased

Event Timeline

• alexhollender_WMF created this task.Mar 2 2021, 6:33 PM

cc @santhosh - any ideas how to fix this one? Would T276248 fix this?
@ovasileva let's add this to our next sync with the language team.

ovasileva triaged this task as Medium priority.Mar 3 2021, 8:48 AM

Jdlrobson renamed this task from Discuss solution for clipped placeholder text in ULS to Discuss solution for clipped placeholder text in ULS when screen width decreased.Mar 3 2021, 6:46 PM

Jdlrobson updated the task description. (Show Details)

Nikerabbit subscribed.Mar 8 2021, 3:39 PM

ovasileva raised the priority of this task from Medium to High.Mar 9 2021, 2:50 PM

Nikerabbit added a project: Language-Team (Language-2021-January-March).Mar 15 2021, 3:53 PM

Pginer-WMF moved this task from Quarter Backlog to Priority Backlog on the Language-Team (Language-2021-January-March) board.Mar 15 2021, 3:55 PM

As well as min-width, something else we can do is add ellipses to the input placeholder:

::placeholder{
    text-overflow:ellipsis;
}

I am not sure about using ellipsis, since it actually makes less text visible. Once T276248: Position language menu below language button is fixed there is more space available horizontally. Currently the narrow view gets too narrow at times, so it can definitely use more width in my opinion.

Another option is to make the placeholder shorter. https://translatewiki.net/w/i.php?title=Special:Translations&message=Wikimedia%3AUls-uls-search-placeholder is the list of current translations.

Nikerabbit claimed this task.Mar 16 2021, 3:36 PM

Nikerabbit moved this task from Priority Backlog to In Progress on the Language-Team (Language-2021-January-March) board.

PR to review at https://github.com/wikimedia/jquery.uls/pull/383 but I created https://gerrit.wikimedia.org/r/c/mediawiki/extensions/UniversalLanguageSelector/+/672743 to make testing easier.

After removing explicit percentage based width statements, the menu widths appear more natural to me. For common case now the narrow and medium width look the same, since the input & display setting buttons define make the menu wider. They only wrap if there isn't enough horizontal space.

ovasileva moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Mar 16 2021, 5:24 PM

ovasileva set the point value for this task to 3.Mar 16 2021, 5:34 PM

Jdlrobson moved this task from Upcoming to Ready for Development on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Mar 16 2021, 6:18 PM

Jdlrobson moved this task from Ready for Development to Code Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Mar 16 2021, 6:50 PM

We need to do a release of jquery.uls inside ULS extension.

In T276255#6923026, @Jdlrobson wrote:

We need to do a release of jquery.uls inside ULS extension.

That has been done.

In T276255#6924833, @Nikerabbit wrote:

In T276255#6923026, @Jdlrobson wrote:

We need to do a release of jquery.uls inside ULS extension.

That has been done.

https://gerrit.wikimedia.org/r/c/mediawiki/extensions/UniversalLanguageSelector/+/673197

@Jdlrobson, can you clarify the acceptance criteria please If I shrink the width enough, the "Search for language" gets masked by what would be the clear search button if I put any text in the field.

@Edtadros is this on patchdemo or beta cluster? If you need to use patchdemo to QA you can use https://patchdemo.wmflabs.org/wikis/8e7e015a1d/wiki/Main_Page instead.

@Nikerabbit - I am noticing some weird behaviour on https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein -ULS is loading at bottom of page. Any ideas what's going on there?

Screen Shot 2021-03-23 at 12.01.56 PM.png (1×2 px, 230 KB)

Change 674541 had a related patch set uploaded (by Nikerabbit; owner: Nikerabbit):
[mediawiki/extensions/UniversalLanguageSelector@master] Fix ULS dialog positioning in some cases

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

gerritbot added a project: Patch-For-Review.Mar 24 2021, 9:34 AM

My patch should fix it, though I cannot verify locally. Does the fix (if confirmed) need backporting?

Jdlrobson moved this task from QA to Needs More Work on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Mar 24 2021, 5:04 PM

Jdlrobson moved this task from Needs More Work to Code Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.

Change 674541 merged by jenkins-bot:
[mediawiki/extensions/UniversalLanguageSelector@master] Fix ULS dialog positioning in some cases

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

ReleaseTaggerBot added a project: MW-1.36-notes (1.36.0-wmf.37; 2021-03-30).Mar 24 2021, 8:00 PM

I don't think it needs backporting, since the language button is not deployed anywhere yet but I can confirm it's now working on beta cluster :)

In T276255#6939037, @Jdlrobson wrote:

@Edtadros is this on patchdemo or beta cluster? If you need to use patchdemo to QA you can use https://patchdemo.wmflabs.org/wikis/8e7e015a1d/wiki/Main_Page instead.

@Jdlrobson That image was in Beta. I haven't found that truncation in Patch Demo. I'm not sure what functionality I should be validating here. Here's what I see in Patch demo:

en
de
fr

Pginer-WMF edited projects, added Language-Team (Language-2021-April-June); removed Language-Team (Language-2021-January-March).Apr 1 2021, 11:20 AM

Pginer-WMF moved this task from Quarter Backlog to In Review on the Language-Team (Language-2021-April-June) board.

@Edtadros can you try https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein and https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein?uselang=de again? I think this is working now. Not sure what happened there.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1: Verify "Search for language" is not truncated

Screen Recording 2021-04-05 at 10.40.55 AM.mov.gif (748×1 px, 298 KB)

Screen Recording 2021-04-05 at 10.44.48 AM.mov.gif (748×1 px, 350 KB)

Edtadros updated the task description. (Show Details)Apr 5 2021, 5:52 PM

Will QA once new language switcher is in production

	F34256983: Screen Recording 2021-04-05 at 10.44.48 AM.mov.gif
	Apr 5 2021, 5:47 PM

	F34256982: Screen Recording 2021-04-05 at 10.40.55 AM.mov.gif
	Apr 5 2021, 5:47 PM

	F34195120: Screen Shot 2021-03-28 at 5.18.31 PM.png
	Mar 29 2021, 12:20 AM

	F34195117: Screen Shot 2021-03-28 at 5.17.54 PM.png
	Mar 29 2021, 12:20 AM

	F34195113: Screen Shot 2021-03-28 at 5.16.15 PM.png
	Mar 29 2021, 12:20 AM

	F34183282: Screen Shot 2021-03-23 at 12.01.56 PM.png
	Mar 23 2021, 7:02 PM

	F34182986: Screen Shot 2021-03-23 at 9.30.31 AM.png
	Mar 23 2021, 4:33 PM

Discuss solution for clipped placeholder text in ULS when screen width decreasedClosed, ResolvedPublic3 Estimated Story PointsActions

Description

Description

QA Results - Beta

Details

Related ObjectsSearch...

Event Timeline

Test Result - Beta

QA Steps

Discuss solution for clipped placeholder text in ULS when screen width decreased
Closed, ResolvedPublic3 Estimated Story Points
Actions

Related Objects
Search...