Page MenuHomePhabricator

Regression wmf.16: New vector no longer aligns sites correctly
Closed, ResolvedPublicBUG REPORT

Description

Hi. Tonight, aftermath the new deployment, all the direction CSS that I wrote for the extension is broken.
Was:

  1. LTR special page, LTR wiki watchlist - LTR result.
  2. LTR special page, RTL wiki watchlist - RTL result.
  3. RTL special page, LTR wiki watchlist - LTR result.
  4. RTL special page, RTL wiki watchlist - RTL result.

Now:

  1. LTR special page, LTR wiki watchlist - LTR result.
  2. LTR special page, RTL wiki watchlist - LTR result !!!
  3. RTL special page, LTR wiki watchlist - RTL result !!! (see on screenshot)
  4. RTL special page, RTL wiki watchlist - RTL result.

Screenshot_20210729-025745_Samsung Internet.jpg (471×1 px, 228 KB)

Please unbreak now. Thank you.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
IKhitron changed the subtype of this task from "Task" to "Bug Report".Jul 29 2021, 12:01 AM

@IKhitron would you mind clarifying what changed? I assume the problem is with the text you highlighted - how is it supposed to be displayed? Don't those links translate to "diff" and "2 changes" ?

@IKhitron would you mind clarifying what changed? I assume the problem is with the text you highlighted - how is it supposed to be displayed? Don't those links translate to "diff" and "2 changes" ?

Ignore highlighting, it's my personal CSS.

I already wrote exactly what changed. In the screenshot all ltr wikis, meta, enwiki, and so on, should be adjusted to the left, and all rtl wikis, such as arwiki, should be adjusted to the right. Nevermind if we use ?uselang=en or ?uselang=ar. For now, ?uselang=en shows all wikis adjusted to the left, including rtl wikis, and ?uselang=ar shows all wikis adjusted to the right, including ltr wikis. Actually for any uselang a half of wikis became unreadable. My guess is thar css file is not loaded prolerly.

@IKhitron would you mind clarifying what changed? I assume the problem is with the text you highlighted - how is it supposed to be displayed? Don't those links translate to "diff" and "2 changes" ?

Ignore highlighting, it's my personal CSS.

I already wrote exactly what changed. In the screenshot all ltr wikis, meta, enwiki, and so on, should be adjusted to the left, and all rtl wikis, such as arwiki, should be adjusted to the right. Nevermind if we use ?uselang=en or ?uselang=ar. For now, ?uselang=en shows all wikis adjusted to the left, including rtl wikis, and ?uselang=ar shows all wikis adjusted to the right, including ltr wikis. Actually for any uselang a half of wikis became unreadable. My guess is thar css file is not loaded prolerly.

I cannot reproduce this. I have a bunch of ltr wikis in my global watchlist, plus ar.wikipedia

At https://meta.wikimedia.org/wiki/Special:GlobalWatchlist?uselang=ar I see all of the ltr wikis adjusted to the left, and arwiki adjusted to the right
At https://meta.wikimedia.org/wiki/Special:GlobalWatchlist?uselang=en I also see all of the ltr wikis adjusted to the left, and arwiki adjusted to the right

I logged out and back in in case my css was cached, but it still works fine. Maybe its due to personal CSS you have installed? Can you please try it with safemode and see if its still an issue? (Add &safemode=1 to the end of the url)

I logged out and back in in case my css was cached, but it still works fine. Maybe its due to personal CSS you have installed? Can you please try it with safemode and see if its still an issue? (Add &safemode=1 to the end of the url)

The safe mode does not help. And anyway, I did not change anything on my personal js and css meta files in the last 5 hours, or last week even.
Maybe it's a Chrome problem? It happens sometimes. Did you try on this particular browser?

I logged out and back in in case my css was cached, but it still works fine. Maybe its due to personal CSS you have installed? Can you please try it with safemode and see if its still an issue? (Add &safemode=1 to the end of the url)

The safe mode does not help. And anyway, I did not change anything on my personal js and css meta files in the last 5 hours, or last week even.
Maybe it's a Chrome problem? It happens sometimes. Did you try on this particular browser?

I'm using Chrome version 92.0.4515.107 (can check version at chrome://settings/help) and the vector skin. As far as I can tell, nothing changed in the CSS since last week, so I'm not sure. Maybe there was a change to core or vector that caused it?

I'm using Chrome version 92.0.4515.107 (can check version at chrome://settings/help) and the vector skin. As far as I can tell, nothing changed in the CSS since last week, so I'm not sure. Maybe there was a change to core or vector that caused it?

I'm using the new Vector on Meta.

I'm using Chrome version 92.0.4515.107 (can check version at chrome://settings/help) and the vector skin. As far as I can tell, nothing changed in the CSS since last week, so I'm not sure. Maybe there was a change to core or vector that caused it?

I'm using the new Vector on Meta.

Okay, thats why - I use legacy vector, and legacy vector works fine, but switched to new vector and I can reproduce. Investigating...

This comment was removed by IKhitron.
DannyS712 renamed this task from The direction CSS is broken to Regression wmf.16: New vector no longer aligns sites correctly.Jul 29 2021, 12:40 AM
DannyS712 added a project: Vector.
DannyS712 updated the task description. (Show Details)

Change 708425 had a related patch set uploaded (by DannyS712; author: DannyS712):

[mediawiki/skins/Vector@master] Revert \"[modern/performance] Simplify Vector styles\"

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

Is this the rule that you are missing:
https://gerrit.wikimedia.org/g/mediawiki/core/+/063d8e94814757fbcc8fa15e8bd0946e21274c34/resources/src/mediawiki.skinning/legacy.less#21 ?

If so you'll need to add a dir attribute to the relevant HTML to address this.

I can help with this tomorrow and a backport if necessary

Is this the rule that you are missing:
https://gerrit.wikimedia.org/g/mediawiki/core/+/063d8e94814757fbcc8fa15e8bd0946e21274c34/resources/src/mediawiki.skinning/legacy.less#21 ?

If so you'll need to add a dir attribute to the relevant HTML to address this.

I can help with this tomorrow and a backport if necessary

Yes, thats the rule. Thanks for the offer - I might be able to find time today

Change 708628 had a related patch set uploaded (by DannyS712; author: DannyS712):

[mediawiki/extensions/GlobalWatchlist@master] Use HTML \"dir\" attribute for ltr/rtl

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

Change 708628 merged by jenkins-bot:

[mediawiki/extensions/GlobalWatchlist@master] Display: Use HTML \"dir\" attribute for ltr/rtl

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

Change 708640 had a related patch set uploaded (by Jdlrobson; author: DannyS712):

[mediawiki/extensions/GlobalWatchlist@wmf/1.37.0-wmf.16] Display: Use HTML \"dir\" attribute for ltr/rtl

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

Change 708640 merged by jenkins-bot:

[mediawiki/extensions/GlobalWatchlist@wmf/1.37.0-wmf.16] Display: Use HTML \"dir\" attribute for ltr/rtl

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

Mentioned in SAL (#wikimedia-operations) [2021-07-29T18:15:13Z] <urbanecm@deploy1002> Synchronized php-1.37.0-wmf.16/extensions/GlobalWatchlist/modules/SiteDisplay.js: 9a2383d7ecfe1874c08f38a08d174364a12ad247: Display: Use HTML "dir" attribute for ltr/rtl (T287649) (duration: 01m 25s)

Jdlrobson claimed this task.

Backport completed and confirmed. This should be working now.

Backport completed and confirmed. This should be working now.

It does. Thanks a lot.

Change 708425 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] Revert \"[modern/performance] Simplify Vector styles\"

Reason:

Fixed in GlobalWatchlist extension.

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

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

@Jdlrobson thanks for your help. We've fixed the issue for the OOUI/jQuery version on the display, and I'll tackle the Vue version at T274603