Page MenuHomePhabricator
Create Task
Maniphest T300008

Label of hide unused fields is overflowing
Closed, ResolvedPublic3 Estimated Story PointsBUG REPORT
Actions

Assigned To
WMDE-Fisch
Authored By
lilients_WMDE
Jan 25 2022, 9:56 AM
Tags
Referenced Files
F35071821: wrap label2.png
Apr 28 2022, 10:30 AM
F35071819: wrap label1.png
Apr 28 2022, 10:30 AM
F35031830: Screen Shot 2022-03-31 at 15.20.07.png
Mar 31 2022, 1:33 PM
F35027398: Screen Shot 2022-03-28 at 18.38.42.png
Mar 28 2022, 4:39 PM
F34942234: Screenshot from 2022-02-04 12-13-00.png
Feb 4 2022, 11:17 AM
F34929939: Screenshot from 2022-01-25 10-46-53.png
Jan 25 2022, 9:56 AM
Subscribers
Aklapper
awight
ECohen_WMDE
lilients_WMDE
Pols12

Description

List of steps to reproduce (step by step, including full links if applicable):

  • go to german wikipedia (live or beta)
  • add or edit a template with more than 3 parameters
  • check out the label for unused fields

What happens?
The text of the label is overflowing in 18 of the current 27 translations, see: https://translatewiki.net/wiki/Special:Translations?message=MediaWiki%3AVisualeditor-dialog-transclusion-filter-hide-unused&namespace=8

Screenshot from 2022-01-25 10-46-53.png (427×1 px, 81 KB)

Requirements

  • Adjust label to "Hide unused" (remove "field" or "parameter"). Note: Translations will be updated via translatewiki.net.
  • Make the button label wrap if the button would be longer than the search field above it

German example with shorter label:

Screen Shot 2022-03-28 at 18.38.42.png (182×310 px, 15 KB)

Design follow-up ticket: investigate if expanding sidebar width makes sense and determine how that affects the responsive behavior/ ratios

Details

SubjectRepoBranchLines +/-
Update CSS to force word wrap in unused parameters buttonmediawiki/extensions/VisualEditormaster+2 -0
Nudge translators to make unused toggle button label shortmediawiki/extensions/VisualEditormaster+2 -2
Stop hide unused label from overflowingmediawiki/extensions/VisualEditormaster+11 -7
Customize query in gerrit

Related Objects

Event Timeline

lilients_WMDE created this task.Jan 25 2022, 9:56 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 25 2022, 9:56 AM
Aklapper added a project: WMDE-TechWish.Feb 1 2022, 3:10 PM
Aklapper removed a subscriber: WMDE-TechWish.

[Please avoid adding project tags as subscribers, as it won't make tasks show up on those boards. Thanks!]

thiemowmde added a project: WMDE-Design.Feb 1 2022, 4:48 PM
Maintenance_bot added a project: Design.Feb 1 2022, 5:45 PM
lilients_WMDE updated the task description. (Show Details)Feb 4 2022, 11:17 AM
Pols12 added projects: VisualEditor-MediaWiki-Templates, I18n.Mar 16 2022, 10:43 PM
Pols12 subscribed.

I18n issue, since English version is fine.

Other possibility: allow line break with white-space: pre-wrap; CSS rule.

Related issue: having only a link-style text, without any icon, seems me a strange design for a switch button.

Maintenance_bot added a project: VisualEditor.Mar 16 2022, 10:45 PM
ECohen_WMDE moved this task from Backlog to In preparation on the WMDE-Templates-FocusArea board.Mar 24 2022, 10:14 AM
matmarex moved this task from To Triage to Triaged on the VisualEditor board.Mar 24 2022, 3:55 PM
ECohen_WMDE updated the task description. (Show Details)Mar 28 2022, 4:39 PM
Pols12 added a comment.Mar 28 2022, 8:06 PM

Editing German label is clearly not a solution for this bug: about 18 languages in 27 available ones seem to be affected.

ECohen_WMDE moved this task from In preparation to Ready for story time on the WMDE-Templates-FocusArea board.Mar 29 2022, 9:23 AM
gerritbot added a comment.Mar 30 2022, 1:14 PM

Change 775299 had a related patch set uploaded (by Awight; author: Awight):

[mediawiki/extensions/VisualEditor@master] Nudge translators to make this message short

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

gerritbot added a project: Patch-For-Review.Mar 30 2022, 1:14 PM
Pols12 added a comment.Mar 30 2022, 1:57 PM

Sorry for insisting, but you can’t just ask to translators to find another way to phrase. Languages do not have the same concision: “Messages are often longer than you think!”.

Based on KDE translation stats, we probably need to allow 32 characters to cover 90% of usual cases.
In 28 current translations, 32 characters limit would already exclude 5 languages (Greek, Indonesian, Twi, Ukrainian, and Uzbek).

white-space: pre-wrap; CSS rule is a minimal requirement to enhance this issue.

ECohen_WMDE subscribed.Mar 30 2022, 1:59 PM

Thanks @Pols12 - very helpful. Will take another look to come up with a more universal solution!

ECohen_WMDE moved this task from Ready for story time to In preparation on the WMDE-Templates-FocusArea board.Mar 30 2022, 2:01 PM
ECohen_WMDE updated the task description. (Show Details)Mar 30 2022, 3:27 PM
ECohen_WMDE updated the task description. (Show Details)Mar 31 2022, 1:33 PM
ECohen_WMDE updated the task description. (Show Details)Apr 6 2022, 8:59 AM
ECohen_WMDE moved this task from In preparation to Ready for pickup on the WMDE-Templates-FocusArea board.
thiemowmde set the point value for this task to 3.Apr 6 2022, 2:19 PM
thiemowmde updated the task description. (Show Details)
WMDE-Fisch added a project: WMDE-TechWish-Sprint-2022-04-27.Apr 27 2022, 9:30 AM
WMDE-Fisch moved this task from Ready for pickup to In sprint on the WMDE-Templates-FocusArea board.
WMDE-Fisch claimed this task.Apr 27 2022, 10:47 AM
WMDE-Fisch moved this task from Sprint Backlog to Doing on the WMDE-TechWish-Sprint-2022-04-27 board.
gerritbot added a comment.Apr 27 2022, 12:58 PM

Change 786946 had a related patch set uploaded (by WMDE-Fisch; author: WMDE-Fisch):

[mediawiki/extensions/VisualEditor@master] Stop hide unused label from overflowing

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

WMDE-Fisch moved this task from Doing to Tech Review on the WMDE-TechWish-Sprint-2022-04-27 board.Apr 27 2022, 12:58 PM
WMDE-Fisch added a comment.Apr 28 2022, 10:30 AM

@ECohen_WMDE One question to the exact margin/width because it showed up during code review:

We can either align the buttons border with the search field's border:

wrap label1.png (550×908 px, 88 KB)

Or we align the buttons text with the search field's border:
wrap label2.png (550×900 px, 88 KB)

Also note, that too long words will break in the middle of the word. I guess that's also what we want 🤔

WMDE-Fisch moved this task from Tech Review to UX/PM Review on the WMDE-TechWish-Sprint-2022-04-27 board.Apr 28 2022, 10:43 AM
WMDE-Fisch moved this task from UX/PM Review to Tech Review on the WMDE-TechWish-Sprint-2022-04-27 board.Apr 28 2022, 12:05 PM
WMDE-Fisch moved this task from Tech Review to UX/PM Review on the WMDE-TechWish-Sprint-2022-04-27 board.
ECohen_WMDE added a comment.Apr 28 2022, 12:29 PM

@WMDE-Fisch Good catch! Let's align the border with the search border (option 1).

Also note, that too long words will break in the middle of the word. I guess that's also what we want 🤔

Agree, this is ideal

WMDE-Fisch moved this task from UX/PM Review to Tech Review on the WMDE-TechWish-Sprint-2022-04-27 board.Apr 28 2022, 12:31 PM
gerritbot added a comment.Apr 29 2022, 8:45 AM

Change 786946 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Stop hide unused label from overflowing

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

gerritbot added a comment.Apr 29 2022, 8:51 AM

Change 775299 abandoned by Thiemo Kreuz (WMDE):

[mediawiki/extensions/VisualEditor@master] Nudge translators to make this message short

Reason:

Obsolete via I37505af.

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

thiemowmde moved this task from Tech Review to Demo on the WMDE-TechWish-Sprint-2022-04-27 board.Apr 29 2022, 8:51 AM
ReleaseTaggerBot added a project: MW-1.39-notes (1.39.0-wmf.10; 2022-05-02).Apr 29 2022, 9:01 AM
Maintenance_bot removed a project: Patch-For-Review.Apr 29 2022, 9:31 AM
ECohen_WMDE added a comment.Apr 29 2022, 9:53 AM
In T300008#7890276, @gerritbot wrote:

Change 775299 abandoned by Thiemo Kreuz (WMDE):

[mediawiki/extensions/VisualEditor@master] Nudge translators to make this message short

Reason:

Obsolete via I37505af.

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

While it's true that the burden should not be on translators to fix a UI issue, ideally wrapped text shows up as little as possible and if there are two different options for translation, I think it's still helpful to have a note mentioning that the space is small and shorter is better. I'm not sure if this message has now been removed?

WMDE-Fisch added a comment.Apr 29 2022, 10:28 AM
In T300008#7890522, @ECohen_WMDE wrote:

While it's true that the burden should not be on translators to fix a UI issue, ideally wrapped text shows up as little as possible and if there are two different options for translation, I think it's still helpful to have a note mentioning that the space is small and shorter is better. I'm not sure if this message has now been removed?

The message never made it in, so just the patch got abandoned. But I think we can add a little hint still.

gerritbot added a comment.Apr 29 2022, 11:48 AM

Change 775299 restored by WMDE-Fisch:

[mediawiki/extensions/VisualEditor@master] Nudge translators to make this message short

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

gerritbot added a project: Patch-For-Review.Apr 29 2022, 11:48 AM
gerritbot added a comment.Apr 29 2022, 1:07 PM

Change 775299 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Nudge translators to make unused toggle button label short

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

awight subscribed.May 10 2022, 8:06 AM

In demo, we found that extremely long words are not hyphenated.

awight moved this task from Demo to Sprint Backlog on the WMDE-TechWish-Sprint-2022-04-27 board.May 10 2022, 8:07 AM
gerritbot added a comment.May 10 2022, 8:20 AM

Change 790619 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Update CSS to force word wrap in unused parameters button

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

gerritbot added a comment.May 10 2022, 8:48 AM

Change 790619 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Update CSS to force word wrap in unused parameters button

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

ReleaseTaggerBot edited projects, added MW-1.39-notes (1.39.0-wmf.12; 2022-05-16); removed MW-1.39-notes (1.39.0-wmf.10; 2022-05-02).May 10 2022, 9:01 AM
WMDE-Fisch moved this task from Sprint Backlog to Demo on the WMDE-TechWish-Sprint-2022-04-27 board.May 10 2022, 10:05 AM
thiemowmde added a project: WMDE-TechWish-Sprint-2022-05-11.May 11 2022, 12:09 PM
thiemowmde moved this task from Sprint Backlog to Demo on the WMDE-TechWish-Sprint-2022-05-11 board.May 11 2022, 12:10 PM
Lena_WMDE moved this task from Demo to Done on the WMDE-TechWish-Sprint-2022-05-11 board.May 24 2022, 8:38 AM
Lena_WMDE closed this task as Resolved.May 24 2022, 8:44 AM
ECohen_WMDE mentioned this in T309604: Wrap "add undocumented parameter" button when screen is too small.May 31 2022, 11:58 AM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL