| • alexhollender_WMF | |
| May 5 2022, 5:26 PM |
| F54667211: simplescreenrecorder-2024-05-29_15.08.24.webm | |
| Wed, May 29, 10:11 PM |
| F35105149: Screen Shot 2022-05-05 at 1.23.47 PM.png | |
| May 5 2022, 5:26 PM |
| F35105148: Screen Shot 2022-05-05 at 1.21.11 PM.png | |
| May 5 2022, 5:26 PM |
In T306229 we introduced a better system for hiding the tabs on narrow screens (specifically screens below 720px). However this change is possibly a functional regression for some community members because in legacy vector some tabs are still visible on narrow screens:
| legacy vector (720px) | vector 2022 (720px) |
|---|---|
 |  |
Specify certain tabs that will never hide (e.g. Edit, History, and Watch)
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | • nray | T302246 [GOAL] Leverage Automated Visual Regression Testing | |||
| Resolved | ovasileva | T306229 Prevent the edit, history, more tabs from dancing at lower resolutions | |||
| Declined | Jdrewniak | T307732 Show Edit, History, and Watch tabs at narrow widths |
+1. I definitely want the [edit/edit source/history/watchlist] tabs to be visible at all times, if there's any space for them.
I quite like the legacy Vector dynamic system (except for the jumping-issue).
At extra-small widths (and for languages with extra-long strings for labels), I wonder if it's possible to convert the words into icons? That way the positions/locations will be familiar, and the links will always remain instantly accessible.
But only when necessary: I vastly prefer having text instead of icons, because it's 1 fewer steps to 'interpret'.
E.g. Minerva always shows both icon + text at larger widths, but it removes the text at 1000px. In modern Vector, I'd prefer to have just the text, until the width becomes too small. (However, I also grok that variable i18n label-lengths might make this more complicated... My overall top priority is performance-speed, and having pages that finish-loading fast so that I can interact with them.)
FWIW it will be easy to not collapse these at lower resolutions but since space is limited, particularly when gadgets are introduced we should be selective about what we add. Perhaps we could be data-driven like we were for the user menu when we decided to pull the watchlist icon out of the dropdown and prioritize this initially based on feedback.
Here's a day worth of data prior to the change to get a sense of how much edit icons are used (counts are the edit source and edit button):
3 720px-999px 0 edits 143 4 720px-999px 1-4 edits 70 5 720px-999px 1000+ edits 582 6 720px-999px 5-99 edits 203 10 720px-999px 100-999 edits 187 15 320px-719px 0 edits 28 16 320px-719px 1-4 edits 5 17 320px-719px 1000+ edits 24 18 320px-719px 5-99 edits 13 28 320px-719px 100-999 edits 17 2 1200px-2000px 100-999 edits 1952 24 1200px-2000px 0 edits 1413 25 1200px-2000px 1-4 edits 632 26 1200px-2000px 1000+ edits 10102 27 1200px-2000px 5-99 edits 2121 1 1000px-1199px 100-999 edits 258 20 1000px-1199px 0 edits 119 21 1000px-1199px 1-4 edits 28 22 1000px-1199px 1000+ edits 882 23 1000px-1199px 5-99 edits 197 7 <320px 0 edits 1 8 <320px 1000+ edits 1 9 <320px 5-99 edits 1 11 >2000px 0 edits 36 12 >2000px 1-4 edits 35 13 >2000px 1000+ edits 235 14 >2000px 5-99 edits 82 19 >2000px 100-999 edits 44
Query: select event.viewportSizeBucket, event.editCountBucket, count(*) from desktopwebuiactionstracking where month = 5 and day = 1 and event.skin = 'vector-2022' and event.name LIKE '%edit%' group by event.viewportSizeBucket, event.editCountBucket
I replied elsewhere but this was only a count of clicks to edits. I ran the same query as before for today [1] and the data is more or less the same as before the change:
Before:
3 720px-999px 0 edits 143 4 720px-999px 1-4 edits 70 5 720px-999px 1000+ edits 582 6 720px-999px 5-99 edits 203 10 720px-999px 100-999 edits 187 15 320px-719px 0 edits 28 16 320px-719px 1-4 edits 5 17 320px-719px 1000+ edits 24 18 320px-719px 5-99 edits 13 28 320px-719px 100-999 edits 17 2 1200px-2000px 100-999 edits 1952 24 1200px-2000px 0 edits 1413 25 1200px-2000px 1-4 edits 632 26 1200px-2000px 1000+ edits 10102 27 1200px-2000px 5-99 edits 2121 1 1000px-1199px 100-999 edits 258 20 1000px-1199px 0 edits 119 21 1000px-1199px 1-4 edits 28 22 1000px-1199px 1000+ edits 882 23 1000px-1199px 5-99 edits 197 7 <320px 0 edits 1 8 <320px 1000+ edits 1 9 <320px 5-99 edits 1 11 >2000px 0 edits 36 12 >2000px 1-4 edits 35 13 >2000px 1000+ edits 235 14 >2000px 5-99 edits 82 19 >2000px 100-999 edits 44
After:
720px-999px 0 edits 179 4 720px-999px 1-4 edits 53 5 720px-999px 1000+ edits 620 6 720px-999px 5-99 edits 184 9 720px-999px 100-999 edits 183 14 320px-719px 0 edits 11 15 320px-719px 1-4 edits 3 16 320px-719px 1000+ edits 14 17 320px-719px 5-99 edits 6 27 320px-719px 100-999 edits 2 2 1200px-2000px 100-999 edits 2196 23 1200px-2000px 0 edits 2131 24 1200px-2000px 1-4 edits 1016 25 1200px-2000px 1000+ edits 9258 26 1200px-2000px 5-99 edits 2724 1 1000px-1199px 100-999 edits 322 19 1000px-1199px 0 edits 172 20 1000px-1199px 1-4 edits 60 21 1000px-1199px 1000+ edits 763 22 1000px-1199px 5-99 edits 202 7 <320px 0 edits 1 8 <320px 1000+ edits 1 10 >2000px 0 edits 34 11 >2000px 1-4 edits 23 12 >2000px 1000+ edits 124 13 >2000px 5-99 edits 43
[1] select event.viewportSizeBucket, event.editCountBucket, count(*) from desktopwebuiactionstracking where month = 5 and day = 12 and event.skin = 'vector-2022' and event.name LIKE '%edit%' group by event.viewportSizeBucket, event.editCountBucket
In addition to the data there has been absolutely no community comment on this change so it may not be as high a priority as we think it is and it might be worth throwing this into the backlog for now given we have a lot of things on our plate.
Looks like there's a small decrease, but agree that it doesn't seem urgent for now. Moving to backlog. cc @alexhollender_WMF
Removing inactive assignee. (Please update such things as part of offboarding - thanks.)
I'm closing this out because the Vector 2022 design has changed since this task was written, and I think it'd be better to revisit this issue if/when we decide Vector 2022 should support responsive/mobile devices. We could draw inspiration from Minerva, but in general this work should be tied to a larger product goal of Vector 2022 supporting mobile devices (which is not currently on our roadmap).
I wonder if it would be possible to simply turn these links into icons, under 720px?
My user-CSS accomplishes it like this (lines 953–1045):
I think that was one of the options I've heard informally for resolving T365631 - you might want to copy that comment over there.