Page MenuHomePhabricator

Expand/collapse button is in the wrong place when the wiki's use of RTL or LTR is different from the display language
Closed, ResolvedPublic2 Estimated Story Points

Description

When viewing Special:GlobalWatchlist?uselang=he, the collapse button is on the left always, smooshed next to the mark site as seen button for LTR wikis but correctly placed for RTL wikis. For viewing with uselang=en, the collapse button is always on the right, which is correct for the wikis that are LTR but wrong for RTL

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
DannyS712 triaged this task as Medium priority.Feb 11 2021, 11:12 PM
DannyS712 set the point value for this task to 2.
DannyS712 moved this task from Backlog to Other on the RTL board.
DannyS712 moved this task from Untriaged to RTL on the I18n board.
DannyS712 moved this task from Unsorted to Next on the User-DannyS712 board.

Probably a better solution to T274313 would have been adding .mw-content-ltr and .mw-content-rtl, which jquery.makeCollapsible.styles.less takes into account when choosing which side to float on.

Will need to add similar handling to the collapsible wrapper Vue component

Trying to test this out in a browser manipulating the CSS proved complicated, since we need to delete the existing rules. I figured it out, but for future reference:

1) get current CSS: mw.loader.moduleRegistry['ext.globalwatchlist.specialglobalwatchlist'].style.css[0]
2) set CSS rules to an updated version that does not include the rule we want to eliminate: mw.loader.moduleRegistry['ext.globalwatchlist.specialglobalwatchlist'].style.css[0] = `...`;
3) delete stored version: delete mw.loader.store.items['ext.globalwatchlist.specialglobalwatchlist@1msei']
4) tell store to save a new copy, now with the updated css: mw.loader.store.add( 'ext.globalwatchlist.specialglobalwatchlist' )
5) refresh the tab, or open in a new window, and verify that the cached version of the module that we manually changed is used
(would probably also work for manually testing out javascript changes...)

after removing the existing rules, which set (with @noflip annotations) .ext-globalwatchlist-feed-site to be text-align left and direction ltr, and then the custom overrides based on language codes, I then ran

$( '.ext-globalwatchlist-feed-site' ).addClass( 'mw-content-ltr' )
$( '.ext-globalwatchlist-feed-site[id^=ext-globalwatchlist-feed-site-ar]' ).removeClass( 'mw-content-ltr' ).addClass( 'mw-content-rtl' )

to set mw-content-rtl on the arabic wikipedia entry (only rtl wiki I was testing with) and mw-content-ltr on the rest. Viewing the page in English, this produced the intended result.

Switching to uselang=he, I repeated the css changes, and ran the same command, and it also rendered correctly. Will send a patch to do this.
This does not apply to the Vue version, which will be handled separately in T274603 and currently has no rtl handling

Just a thought. Can you put the collapse button on the line center, nevermind what is the uselang and what is the wiki? It should be much easier.

Just a thought. Can you put the collapse button on the line center, nevermind what is the uselang and what is the wiki? It should be much easier.

The collapsible wrapper location is based on jquery.makeCollapsible.styles.less and is either on the left or right, I think it would look odd in the middle

Change 665171 had a related patch set uploaded (by DannyS712; owner: DannyS712):
[mediawiki/extensions/GlobalWatchlist@master] Clean up RTL handling for SiteDisplay

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

As you wish. For me, it will look wierd if it "jumps" from side to side on the same page.

As you wish. For me, it will look wierd if it "jumps" from side to side on the same page.

It would match the "jumps" of the content for the side being shown (enwiki is on the left, arwiki jumps to the right)...

Change 665171 merged by jenkins-bot:
[mediawiki/extensions/GlobalWatchlist@master] Clean up RTL handling for SiteDisplay

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

DannyS712 moved this task from In progress to Done on the MediaWiki-extensions-GlobalWatchlist board.
DannyS712 set Final Story Points to 3.