Page MenuHomePhabricator

Tabs misformatted/merged in web browser at certain window sizes
Open, Needs TriagePublic

Description

MacOS 10.12.6 (16G1212)
Chrome Version 64.0.3282.186 (Official Build) (64-bit)
Also reproducible with Safari Version 11.0.3 (12604.5.6.1.1)

When the window isn't wide enough to fit all the tabs, some of the tabs get merged in a weird way. See the left pane in the attached screenshot. The right pane is exactly the same page, but with the window stretched wider so all the tabs fit.

When I check "Temporarily disable the visual editor while it is in beta" under Special:Preferences#mw-prefsection-editing, I can't reproduce the problem.

WP CSS Screenshot Crop.png (754×4 px, 805 KB)

Event Timeline

Deskana changed the task status from Open to Stalled.Mar 13 2018, 7:51 PM
Deskana subscribed.

Thanks for the bug report. Sadly, there's a few problems with this report which are making it hard for me to understand.

When the window isn't wide enough to fit all the tabs, some of the tabs get merged in a weird way. See the left pane in the attached screenshot. The right pane is exactly the same page, but with the window stretched wider so all the tabs fit.

"get merged in a weird way" isn't very specific. What, specifically, is the problem? Are you talking about the misaligned hearts? The fact that some tabs added by gadgets and user scripts remain separate? The more specific you can be, the better.

When I check "Temporarily disable the visual editor while it is in beta" under Special:Preferences#mw-prefsection-editing, I can't reproduce the problem.

How, exactly? The visual editor doesn't work on talk pages, so that preference should have no effect at all. A screenshot of this would be helpful.

I think I just figured out part of it. I never noticed this before, but I'm guessing the "More" tab is a general-purpose overflow menu, for all items that didn't fit onto the tab bar?

With that in mind, the rest of this starts to fall into place. When I have the VisualEditor enabled, the "Edit" tab turns into "Edit source", even on pages where the visual editor doesn't work (i.e. talk pages). That makes the tab wider, so this behavior happens with the window size I happened to pick. When I disable the visual editor, it goes back to just "edit", which is narrow enough for all the tabs to fit on that width window.

I'm still not groking how it decides which tabs to combine into "More", but it's obvious that the <star> tab maps to "Watch", and the <heart> tab maps to the funky array of hearts. Some sort of sprite issue?

I'm attaching another screenshot, showing what I assume is a different symptom of this same problem. I can't quite reproduce this behavior, but it's got "View history" inserted many times into the Page tab.

Page View History Crop.png (2×1 px, 1 MB)

In any case, it's obviously not a Visual Editor issue per-se. But, I don't know where to reassign it.

matmarex added subscribers: MusikAnimal, matmarex.

When in doubt, WMF-General-or-Unknown. ;)

I played with the tabs on English Wikipedia and I think there are a few separate issues here:

  1. With the WikiLove extension: (You have to enable "Enable showing appreciation for other users with the WikiLove tab" in Preferences → Editing to see this.)
    • The WikiLove heart tab displays wrong when it is collapsed into the "More" menu. This is indeed a sprite issue, as you guessed. I think the best fix here is to simply change it to text when it is collapsed, like we do with the watch star.
  2. With the MoreMenu gadget: (You have to enable "MoreMenu: add Page and User dropdown menus to the toolbar with links to common tasks, analytic tools and logs" in Preferences → Gadgets to see this.)
    • The "More" tab becomes much wider than it should be.
    • The "View history" menu item is duplicated under the "Page" menu every time any tabs are collapsed.

I think these appeared because we recently allowed all tabs to collapse into the "More" menu – previously some of them, like "Read" and the watch star, would never be collapsed (T56919). I'm not sure if the "More" menu is even supposed to appear with the MoreMenu gadget, looks like its two menus might be supposed to replace it entirely?

I can do the WikiLove part, but I'm not familiar with MoreMenu. Looks like @MusikAnimal maintains it, perhaps he can help.

It looks like part of the problem is created by gadgets (which would be out of scope for this task and Phabricator). See mw:Help:Locating_broken_scripts for more info.

Page View History Crop.png (2×1 px, 1 MB)

Wooooahhah!! That's probably me. I will look into a fix. MoreMenu indeed is supposed to move "View history" under "Page" if there isn't enough room for a tab, but obviously it should only add it once!

I don't know what's going on with the oversized "More" menu in the first screenshot in the task description. That may or may not be MoreMenu... but I'll look into it. Also sorry for the nomenclature -- there is the Vector "More" menu and then there is MoreMenu (which is a play on words). I probably should have come up with a better name.

The other thing I should bring up here is that the Vector skin should not be considered super reliable as a responsive layout. I'm not saying VisualEditor, WikiLove or MoreMenu are at fault, it's just the way it is =P If you make the window small enough, things will break.

matmarex changed the task status from Stalled to Open.Mar 16 2018, 9:33 PM
matmarex removed a project: Patch-For-Review.

WikiLove patch was merged. (This should have been reported by @gerritbot, not sure if I did something wrong or if it just hates me.)