Page MenuHomePhabricator
Create Task
Maniphest T343509

Buttons appear with an unexpected grey border
Closed, ResolvedPublic
Actions

Assigned To
abi_
Authored By
Pginer-WMF
Aug 4 2023, 8:47 AM
Tags
Referenced Files
F42205737: image.png
Feb 28 2024, 8:56 AM
F42205634: image.png
Feb 28 2024, 8:56 AM
F41545650: image.png
Nov 29 2023, 10:19 AM
F41482896: image.png
Nov 10 2023, 1:39 PM
F41482890: image.png
Nov 10 2023, 1:39 PM
F41482893: image.png
Nov 10 2023, 1:39 PM
F37922265: image.png
Oct 3 2023, 2:27 AM
F37805274: image.png
Sep 26 2023, 8:07 AM
View All 14 Files
Subscribers
abi_
Aklapper
ngkountas
Nikerabbit
Pginer-WMF
Wangombe

Description

Several buttons in Section Translation appear with a grey border when they are not expected to:

ig.m.wikipedia.org_w_index.php_title=Special_ContentTranslation&from=en&to=ig(Wiki Mobile) (1).png (568×320 px, 179 KB)
ig.m.wikipedia.org_w_index.php_title=Special_ContentTranslation&from=en&to=ig(Wiki Mobile).png (568×320 px, 61 KB)

This was tested when translating Sushi from English to Igbo.

Details

SubjectRepoBranchLines +/-
SXSentenceSelector: Use CdxIcon componentmediawiki/extensions/ContentTranslationmaster+14 -12
SX: Fix missing borders on MWButton.vuemediawiki/extensions/ContentTranslationmaster+4 -1
CX3 Build 0.2.0+20230929mediawiki/extensions/ContentTranslationmaster+7 K -6 K
SX: Set border-color:transparent in .mw-ui-button in MWButton.vuemediawiki/extensions/ContentTranslationmaster+4 -0
Customize query in gerrit

Event Timeline

Pginer-WMF created this task.Aug 4 2023, 8:47 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 4 2023, 8:47 AM
Pginer-WMF triaged this task as Medium priority.Aug 4 2023, 8:47 AM
Pginer-WMF moved this task from Quarter Backlog to Priority: Translation on the Language-Team (Language-2023-July-September) board.
Nikerabbit moved this task from Backlog to General infrastructure on the SectionTranslation board.Aug 14 2023, 11:18 AM
Wangombe claimed this task.Aug 22 2023, 7:34 AM
Wangombe moved this task from Priority: Translation to In Progress on the Language-Team (Language-2023-July-September) board.
gerritbot added a comment.Aug 22 2023, 12:23 PM

Change 951463 had a related patch set uploaded (by Wangombe; author: Wangombe):

[mediawiki/extensions/ContentTranslation@master] SX: Set border:none in .mw-ui-button in MWButton.vue

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

gerritbot added a project: Patch-For-Review.Aug 22 2023, 12:23 PM
Wangombe added a comment.Sep 5 2023, 12:28 PM

@Pginer-WMF as of CX3 Build 0.2.0+20230814, this issue seems to have disappeared from both firefox and chrome

image.png (405×720 px, 96 KB)
. Could there be more information you could possibly gather from your end in regard to this isshue?

Pginer-WMF added a comment.Sep 5 2023, 1:23 PM

Tried Section Translation on Igbo Wikipedia and the issue was not manifesting initially, but after taping on "New translation" the issues shows and it happens even when returning to the dashboard (where it was not occurring initially). The screencast illustrates this better:

Wangombe added a comment.Sep 12 2023, 8:50 AM

This seems to be happening when the jQueryIME selector is loaded. It's feasible to also investigate that, as it's possible the fix provided here may not be entirely sufficient in covering other elements in pages where the IME is loaded (assuming other input elements). The patch posted covers the MWButton.vue, which is a component used across SX.

abi_ subscribed.EditedSep 22 2023, 8:01 AM

I'm still having trouble reproducing the issue locally:

sx-button-border-issue.gif (426×354 px, 558 KB)

abi_ added a comment.EditedSep 26 2023, 8:07 AM

I was able to reproduce the issue by loading the SX dashboard on desktop.

Patchset 3 fixes the issue, but also removes the border bottom that's present on the New translation screen.

image.png (375×630 px, 16 KB)

gerritbot added a comment.Sep 26 2023, 6:54 PM

Change 951463 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] SX: Set border-color:transparent in .mw-ui-button in MWButton.vue

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

ReleaseTaggerBot added a project: MW-1.41-notes (1.41.0-wmf.29; 2023-10-03).Sep 26 2023, 7:00 PM
Maintenance_bot removed a project: Patch-For-Review.Sep 26 2023, 7:10 PM
Wangombe moved this task from In Progress to Check after deployment on the Language-Team (Language-2023-July-September) board.Sep 27 2023, 1:29 PM
gerritbot added a comment.Sep 29 2023, 3:56 PM

Change 962059 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] CX3 Build 0.2.0+20230929

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

gerritbot added a project: Patch-For-Review.Sep 29 2023, 3:56 PM
Pginer-WMF edited projects, added Language-Team (Language-2023-October-December); removed Language-Team (Language-2023-July-September).Oct 2 2023, 8:58 AM
Pginer-WMF moved this task from Quarter Backlog to Check after deployment on the Language-Team (Language-2023-October-December) board.
gerritbot added a comment.Oct 2 2023, 2:37 PM

Change 962059 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] CX3 Build 0.2.0+20230929

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

Maintenance_bot removed a project: Patch-For-Review.Oct 2 2023, 3:12 PM
abi_ added a comment.Oct 3 2023, 2:27 AM

Potential regression from this fix, borders from the button in the screenshot below are gone:

image.png (720×356 px, 128 KB)

Wangombe moved this task from Check after deployment to In Progress on the Language-Team (Language-2023-October-December) board.Oct 10 2023, 7:23 AM

I think adding a conditional class to the button might help. The patch that was approved for this task set the border on all the MWButton.vue instances to transparent. That is why it has detrimental effects on other parts of SX.

gerritbot added a comment.Nov 2 2023, 7:57 AM

Change 970787 had a related patch set uploaded (by Wangombe; author: Wangombe):

[mediawiki/extensions/ContentTranslation@master] SX: Fix missing borders on MWButton.vue

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

gerritbot added a project: Patch-For-Review.Nov 2 2023, 7:57 AM
abi_ added a comment.Nov 10 2023, 1:39 PM

I'm able to reproduce this issue by opening the unified dashboard on desktop, and then clicking on the new translation button. Coming back to the dashboard after that causes the issue to be replicated on the dashboard as well

Note that I had to remove the changes made by Eugene in this patch: https://gerrit.wikimedia.org/r/951463

image.png (487×487 px, 48 KB)

image.png (448×986 px, 32 KB)

This is happening because there are some extra styles loaded on the New translation page that removes the border-color: transparent (See 1 in the image below) added by .mw-ui-button.mw-ui-button--text (See 2 in the image below)

I'm not able to figure out where the .mw-ui-button:not(:disabled) styles are applied from.

image.png (830×613 px, 89 KB)

Nikerabbit subscribed.Nov 11 2023, 3:43 PM

I'm not able to figure out where the .mw-ui-button:not(:disabled) styles are applied from.

Can you try with debug=true? the <style> in the top right corner will show a link to the module then.

Nikerabbit changed the task status from Open to In Progress.Nov 23 2023, 8:46 AM
abi_ added a comment.Nov 29 2023, 10:19 AM
In T343509#9324535, @Nikerabbit wrote:

I'm not able to figure out where the .mw-ui-button:not(:disabled) styles are applied from.

Can you try with debug=true? the <style> in the top right corner will show a link to the module then.

Thanks but that doesn't help. I just get load.php

image.png (720×1 px, 147 KB)

Nikerabbit added a comment.Nov 29 2023, 1:26 PM

What does it show if you click it? Alternatively, if there are steps to reproduce, I can try to have a look.

abi_ claimed this task.Nov 30 2023, 7:04 AM
abi_ added a subscriber: Wangombe.
ngkountas added a comment.Dec 15 2023, 6:20 PM

@abi_ can we just increase the specificity of the .mw-ui-button.mw-ui-button--text selector to forcefully apply the border-color: transparent style?

Pginer-WMF edited projects, added Language-Team (Language-2024-January-March); removed Language-Team (Language-2023-October-December).Jan 8 2024, 10:37 AM
Pginer-WMF moved this task from Quarter Backlog to In Progress on the Language-Team (Language-2024-January-March) board.
gerritbot added a comment.Jan 30 2024, 10:44 AM

Change 970787 abandoned by Wangombe:

[mediawiki/extensions/ContentTranslation@master] SX: Fix missing borders on MWButton.vue

Reason:

MwButton is now replaced with CdxButton vue component in SX

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

Maintenance_bot removed a project: Patch-For-Review.Jan 30 2024, 11:31 AM
gerritbot added a comment.Feb 19 2024, 2:51 PM

Change 1004667 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] SXSentenceSelector: Use CdxIcon component

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

gerritbot added a project: Patch-For-Review.Feb 19 2024, 2:52 PM
gerritbot added a comment.Feb 19 2024, 4:21 PM

Change 1004667 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] SXSentenceSelector: Use CdxIcon component

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

Maintenance_bot removed a project: Patch-For-Review.Feb 19 2024, 4:31 PM
ReleaseTaggerBot added a project: MW-1.42-notes (1.42.0-wmf.20; 2024-02-27).Feb 22 2024, 1:00 AM
Wangombe closed this task as Resolved.Feb 28 2024, 8:56 AM
Wangombe moved this task from In Progress to Done on the Language-Team (Language-2024-January-March) board.

This issue was fixed in this patch. Additional side effects such as fixing this border issue resulted in a border disappearing in the pick a sentence step 'Done' button is also no longer an issue.

image.png (1×820 px, 105 KB)
image.png (2×1 px, 514 KB)
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 · Credits