Page MenuHomePhabricator
Create Task
Maniphest T253819

Regression: Dancing Search Bar in MediaWiki when menu is hidden
Closed, ResolvedPublicBUG REPORT
Actions

Description

NOTE: impacts users resizing the window to 500px, 720-760px, 1170px - 1240px (T253819#6174864), possibly more (no systematic test done). The bug is triggered at different window widths depending on the size of the tabs (which in turn depends on font-size, language, page, login status, ...). A SWAT would be appreciated but is not critical. This can ride the train if necessary.

Not to be confused with the similar bug from 2014: T71729
This one is caused by a regression in T249372: [Dev] DRY up the menu templating code
The distinctive difference is: the "More" menu is not visible in this bug, but it's visible in the old bug.
Related regression that was fixed by reverting the CSS: T253912: gadget regression: addPortletLink doesn't reveal hidden menus in Vector any more [causes disappearance of merge datas on Wikidata]
This bug is caused by not reverting the JS.

Reddit video:
https://www.reddit.com/r/softwaregore/comments/gtbdwu/cant_fit_all_the_buttons_in_the_frame_wikipedia/

Steps to reproduce

  1. Technology used: Chrome Version 81.0.4044.129 (Official Build) (64-bit) on MacOS Mojave 10.14.6 (18G4032)
  2. Navigate to a page on Mediawiki (e.g. https://www.mediawiki.org/wiki/Readers/Web/Team, or https://www.mediawiki.org/wiki/User:KZimmerman_(WMF) as in the attached gif.
  3. Reduce the browser window size, until you reach a point where the search bar area starts alternating its location and expanding & contracting automatically, as seen below in the animated gif.

Expected results

  • The links and search bar should contract to fit, but should not jump around

Actual results

funnybug.gif (389×611 px, 388 KB)

wiki.gif (390×1 px, 304 KB)

(click on image to see animation)

Popular reddit video.

Environments observed

  • Browser version: Chrome Version 81.0.4044.129 (Official Build) (64-bit)
  • OS version: MacOS Mojave 10.14.6 (18G4032)
  • Device model: MacBook Pro
  • Device language: English

Check any additional observations

Stack trace

Console output





QA Steps





Sign off steps



    

  •  Make sure a task has been created regarding the long term plan for this code in legacy and whether it should be dropped from the codebase.
    • 






QA Results - Beta





ACStatusDetails


1✅T253819#6189686









QA Results - enwiki





ACStatusDetails


1✅T253819#6200462


Details
SubjectRepoBranchLines  /-
  [legacy] Drop the collapsibleTabs codemediawiki/skins/Vectormaster 1 -234
Fix bug: "dancing vector tabs"mediawiki/skins/Vectormaster 4 -4
Customize query in gerrit
Related Objects
Search...
Event Timeline
kzimmerman created this task.May 27 2020, 11:48 PM
Restricted Application added subscribers: Masumrezarock100, Aklapper.  ·  View Herald TranscriptMay 27 2020, 11:48 PM
MBinder_WMF added subscribers: ovasileva, JTannerWMF, Jdlrobson.May 28 2020, 3:09 PM
Aklapper closed this task as a duplicate of T71729: [collapsibleTabs] If a tab's width changes after initial page load, endless animation loop can happen.May 28 2020, 5:14 PM
Aklapper added a project: Vector (legacy skin).
• Demian subscribed.May 28 2020, 10:34 PM
I've reproduced the effect at 1170px - 1240px width, default (16px) browser font-size.

This is caused by the Vector tab hiding JS.
Aklapper added a comment.May 29 2020, 7:01 AM
@Demian: This task is closed as a duplicate - please refer to  T71729 instead. Thanks!
• Demian mentioned this in T71729: [collapsibleTabs] If a tab's width changes after initial page load, endless animation loop can happen.May 30 2020, 10:13 PM
• Demian mentioned this in T254089: CSS Rendering Top Menu is jumping up and down.May 31 2020, 7:14 AM
Peachey88 merged a task: T254089: CSS Rendering Top Menu is jumping up and down.May 31 2020, 8:12 AM
Peachey88 added a subscriber: Liquididea.
• Demian mentioned this in T249372: [Dev] DRY up the menu templating code.May 31 2020, 8:31 AM
gerritbot added a comment.Jun 1 2020, 1:13 PM
Change 600358 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):

[mediawiki/skins/Vector@master] Hotfix: Stop the "dancing vector tabs" issue.



https://gerrit.wikimedia.org/r/600358
gerritbot added a project: Patch-For-Review.Jun 1 2020, 1:13 PM
• Demian reopened this task as Open.Jun 1 2020, 1:57 PM
• Demian triaged this task as Unbreak Now! priority.
• Demian added a subscriber: • Niedzielski.
Reopening. Turns out this is a brand new regression caused by T249372, that looks like the bug reported years ago (T71729). The distinctive difference is: the "More" menu is not visible with this bug, but it's visible with the old bug. To avoid confusing the two bugs which require completely different solutions, the fix for the new bug is uploaded on this ticket.



This is a high-visibility bug as demonstrated by the reddit video which accumulated 21k upvotes in 2 days (IIRC >10k means that it made its way to the front page), therefore setting it to "Unbreak Now". The patch is ready to be merged and SWATed, hopefully the image of Wikipedia will be restored very soon.



cc @Niedzielski  (reviewer of the sibling hotfix)
Restricted Application added a subscriber: Liuxinyu970226.  ·  View Herald TranscriptJun 1 2020, 1:57 PM
ovasileva lowered the priority of this task from Unbreak Now! to High.Jun 1 2020, 2:26 PM
@Demian - while this will be looked at urgently, I don't think it necessarily meets our unbreak now criteria.  Dropping this back to high
• Demian renamed this task from [Bug] Dancing Search Bar in MediaWiki to Regression: Dancing Search Bar in MediaWiki.Jun 1 2020, 2:37 PM
• Demian claimed this task.
• Demian added projects: Desktop Improvements (Vector 2022), Regression.
• Demian updated the task description. (Show Details)
gerritbot added a comment.Jun 1 2020, 4:28 PM
Change 601368 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):

[mediawiki/skins/Vector@master] Drop the collapsibleTabs code



https://gerrit.wikimedia.org/r/601368
Jdlrobson edited projects, added Web-Team-Backlog (Kanbanana-2019-20-Q4); removed Web-Team-Backlog.Jun 1 2020, 4:32 PM
• Demian added a comment.Jun 1 2020, 4:39 PM


In T253819#6181888, @ovasileva wrote:


@Demian - while this will be looked at urgently, I don't think it necessarily meets our unbreak now criteria.  Dropping this back to high





@ovasileva You might be right, I'm used to a demanding work environment, where such public facing and highly visible bugs are unacceptable, thus the day does not end until it's fixed. Not to say that that's bad, the adrenaline rush and the intense team work is a great experience, absolutely worth it for me. What I want to say is that I'm sorry that I cannot wrap my mind around the fact that it's still not fixed and I don't see people being interested in fixing it.
• Demian added a parent task: T71729: [collapsibleTabs] If a tab's width changes after initial page load, endless animation loop can happen.Jun 1 2020, 6:34 PM
• Demian updated the task description. (Show Details)Jun 1 2020, 6:39 PM
• Demian mentioned this in T253938: Future proof addPortletLink and work towards a standard mw-portlet class for all menus across all skins.Jun 1 2020, 7:18 PM
Jdlrobson added a subtask: T254079: phan-seccheck typeerror.Jun 1 2020, 7:21 PM
Jdlrobson renamed this task from Regression: Dancing Search Bar in MediaWiki to Regression: Dancing Search Bar in MediaWiki when menu is hidden.Jun 1 2020, 7:24 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-2019-20-Q4) board.
• Demian updated the task description. (Show Details)Jun 1 2020, 7:32 PM
• Demian added a comment.Jun 1 2020, 7:36 PM
I've corrected the prevalence of the bug. It takes just a few seconds of window resizing to find a few ranges where it triggers. That's of course only one page, one language, one font-size, each of which alters the trigger ranges. A day of testing might reveal that 500px - 1?00px there's a configuration in which the bug triggers.
Jdlrobson lowered the priority of this task from High to Medium.Jun 1 2020, 7:39 PM
gerritbot added a comment.Jun 1 2020, 8:46 PM
Change 600358 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fix bug: "dancing vector tabs"



https://gerrit.wikimedia.org/r/600358
ReleaseTaggerBot added a project: MW-1.35-notes (1.35.0-wmf.35; 2020-06-02).Jun 1 2020, 9:00 PM
Jdlrobson reassigned this task from • Demian to Edtadros.Jun 1 2020, 9:04 PM
Jdlrobson moved this task from Upcoming to Needs QA on the Web-Team-Backlog (Kanbanana-2019-20-Q4) board.
@Edtadros could you please test this on https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page ? We'll want to test this in production later once the fix goes out as well.
• Demian mentioned this in T254277: Proposal: Stop collapsing Vector menu items under more menu and removal associated code.Jun 3 2020, 6:54 AM
Edtadros added a comment.Jun 3 2020, 4:46 PM
Test Result - Beta



Status: ✅ PASS

Environment: beta

OS: macOS Catalina

Browser: Chrome, Safari, Firefox

Device: MBP

Emulated Device: NA



Test Artifact(s):



QA steps



load https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page as an anonymous user visit with a window width > 800px

Resize the window width resized to 500px

✅  AC1: The menu should not dance.

I tried this on Safari, Chrome, and Firefox.  I saw no dancing
Edtadros updated the task description. (Show Details)Jun 3 2020, 4:49 PM
ovasileva moved this task from Needs QA to Needs QA in Prod on the Web-Team-Backlog (Kanbanana-2019-20-Q4) board.Jun 3 2020, 5:15 PM
Mainframe98 merged a task: T254398: Unintentional "moving" tabs on Dutch Wikipedia (see movie).Jun 3 2020, 8:44 PM
Mainframe98 added a subscriber: Ciell.
gerritbot added a comment.Jun 4 2020, 5:23 PM
Change 601368 abandoned by Jdlrobson:

[legacy] Drop the collapsibleTabs code



Reason:

To be reconsidered at a later date.



https://gerrit.wikimedia.org/r/601368
Maintenance_bot removed a project: Patch-For-Review.Jun 4 2020, 6:10 PM
Umherirrender closed subtask T254079: phan-seccheck typeerror as Resolved.Jun 4 2020, 8:32 PM
Edtadros reassigned this task from Edtadros to ovasileva.Jun 8 2020, 6:25 AM
Edtadros moved this task from Needs QA in Prod to Ready for Signoff on the Web-Team-Backlog (Kanbanana-2019-20-Q4) board.
Edtadros subscribed.
Test Result - Prod



Status: ✅ PASS

Environment: enwiki

OS: macOS Catalina

Browser: Chrome, Safari, Firefox

Device: MBP

Emulated Device: NA



Test Artifact(s):



QA steps



Visit https://en.wikipedia.org/wiki/Candeal as an anonymous user visit with a window width > 800px

Resize the window width resized to 500px

✅  AC1: The menu should not dance.

I tried this on Safari, Chrome, and Firefox.  I saw no dancing
Edtadros updated the task description. (Show Details)Jun 8 2020, 6:25 AM
ovasileva closed this task as Resolved.Jun 8 2020, 9:37 AM
No more dancing.  Looks good!
He7d3r subscribed.Jun 18 2020, 10:37 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 · Credits