Change 575639 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Rename Storybook Files to Reflect Their Respective Component

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

Thank you @Jdlrobson for reviewing several of these patches while I was out. It is much appreciated!

Change 577675 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] Move watchstar import out of VectorTabs.less and into screen.less

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

Change 577676 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] Make a parent component's stylesheet import all of its children's stylesheets

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

Next 2 patches ready for review:

https://gerrit.wikimedia.org/r/577675
https://gerrit.wikimedia.org/r/577676

Change 577675 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Move watchstar import out of VectorTabs.less and into screen.less

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

Change 577676 abandoned by Nray:
Make a parent component's stylesheet import all of its children's stylesheets

Reason:
Abandoning because there are bigger fish to fry (e.g. https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/ /575779/) than this patch, and I'm fine with having the great discussion be the only output of this patch.

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

Change 578660 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] Split content into its own component to increase its reusability

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

Next 2 patches are ready for review:

https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/578660/
https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/575778/

Change 578973 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] Isolate styling of the first portal in sidebar

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

Change 578974 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] Split logo into its own component to increase Sidebar reusability

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

Change 578975 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] Mustache Documentation: Cleanup/Clarify Mustache template params

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

Actually 5 patches are now ready for review:

https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/578660/
https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/575778/
https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/578973/
https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/578974/
https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/578975/

Change 578973 abandoned by Nray:
Isolate styling of the first portal in sidebar

Reason:
Jon has better solution to this in https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/ /579025

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

Change 579293 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] WIP: Add opt-out link to sidebar for Vector Latest/Logged in users

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

Update: I'm planning to focus my energy on https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/579293/ which will be the quickest way to hit the AC in this task and then rebase my other patches (which I still believe are valuable) on top of that

Change 575328 abandoned by Nray:
WIP: Build opt-out link for logged in, vector latest users

Reason:
see https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/ /579293/ instead

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

Okay, I think https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/579293/ is ready for review now and think it hits all of the desired AC with the one caveat that it hasn't been integrated with feature manager yet.

Change 580591 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] Add opt-out link to Sidebar for Vector/Logged-in Users Without Abstractions

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

Change 580592 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] POC: Introduce ISkinDataRepository and IInteractor

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

Ready for review again. I divided the work up even further so it will be easier to discuss. The first patch meets the bare minimum of the AC while the rest are geared more toward answering the question "How do we split Vector from legacy Vector":

https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/580591 (Does not use any abstractions)
https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/579293 (Uses abstractions)
https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/580592 (More of a POC)

@nray I've left a handful of comments on https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/580591. Generally speaking, it's ready to merge.

Change 581109 had a related patch set uploaded (by Jdlrobson; owner: Nray):
[mediawiki/skins/Vector@DIP] Split logo into its own component to increase Sidebar reusability

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

Change 581109 abandoned by Jdlrobson:
Split logo into its own component to increase Sidebar reusability

Reason:
ahh now I'm the owner.

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

Change 578975 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Mustache Documentation: Cleanup/Clarify Mustache template params

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

Change 581799 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] POC: Introduce Component Injection and LegacyView

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

Change 580592 abandoned by Nray:
POC: Introduce IInteractor (and ISkinDataRepository)

Reason:
We probably don't need this right now given the skin is mostly presentation logic

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

Sorry for all the noise everyone. For clarification, the patches for review are:

https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/580591/ (without abstractions)
https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/579293/ (with abstractions)
https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/581799/ (POC that's not ready for merge; just an idea)

Change 580591 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Add opt-out link to Sidebar for Vector/Logged-in Users Without Abstractions

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

Change 584005 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] Add end margin to opt-out link

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

Change 584005 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Add end margin to opt-out link

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

@alexhollender I remembered today that this hasn't gone through design review yet. Although this is on the train now and is visible on the beta cluster, the link shouldn't appear anywhere else unless we edit our config settings to show it. So feel free to lmk if you have any revisions you'd like done.

The link should be visible once you have logged in to the beta cluster assuming legacy vector is NOT enabled:

https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page

One note that might come up as you are reviewing:

• The vertical margin of the link was set to 8px (top and bottom) per suggestion from @Volker_E that we are trying to use 4px multipliers on box properties in order to make them easier to convert them into variables later.

Change 575779 abandoned by Nray:
WIP: Introduce "children" prop to Sidebar Component and the ITemplate Interface

Reason:
This is really old now, and it's main idea is expressed in https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/ /581799/ so I'm abandoning this one

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

QA beta cluster: confirming all okay. @Edtadros - could you go ahead and check production today before taking a second look at beta?

1. log in to beta cluster
2. Click the link in the sidebar
3. ensure link takes you to skins section of preferences
4. select legacy mode checkbox and save
5. ensure link is no longer present
6. select legacy mode

Change 575778 abandoned by Nray:
Split header placeholder into its own component to increase its reusability

Reason:
This isn't very useful anymore so I'm waving the flag

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

Change 578974 abandoned by Nray:
Split logo into its own component to increase Sidebar reusability

Reason:
abandoning since jon has done more recent work with this

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

Change 581799 abandoned by Nray:
POC: Introduce Component Injection and LegacyView

Reason:
RIP. The POC is dead but the idea lives on lol

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

Change 585625 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Vector@master] Split Content into its own component to allow reuse in legacy and new Vector

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

Did we really need to add an opt out link to the side bar? It looks wrong and out of place

In T243281#6049496, @Reedy wrote:

Did we really need to add an opt out link to the side bar? It looks wrong and out of place

Could you elaborate on what you mean by "wrong and out of place"? While things are in development we want to provide an easy way for people to switch back to "legacy Vector" (i.e. Vector before we started making changes). We considered several other locations for this link/button, however this ended up being the best option.

In T243281#6051999, @alexhollender wrote:

In T243281#6049496, @Reedy wrote:

Did we really need to add an opt out link to the side bar? It looks wrong and out of place

Could you elaborate on what you mean by "wrong and out of place"? While things are in development we want to provide an easy way for people to switch back to "legacy Vector" (i.e. Vector before we started making changes). We considered several other locations for this link/button, however this ended up being the best option.

It's in Preferences like every other user configuration (I'm not arguing against that. Preference bloat is a different issue), I don't see any reason it needs to be anywhere else, and from memory, we don't have any prescedence of doing this like this.

For anyone likely to be annoyed by the changes, chances are they've been around long enough and know full well where they should be able to revert this change.

Document it on the MediaWiki pages, maybe add it to like User-notice and have that sent out, and mail mediawiki-l and wikitech-l that it can be "disabled" via Special:Preferences. I really don't see the need for a link in the side bar

From my dev wiki

It just looks out of place.

It wouldn't surprise me if it ends up being hidden in Site CSS on numerous wikis, or further complaints when this hits the wikis on the normal deployment train.

There's also no alt text/tooltip on it, so it's not exactly obvious what it's for without clicking through

@Reedy thanks for your perspective. Since there have not been structural changes (so to speak) to Vector in quite some time we are treading lightly, and think that an obvious "off" switch will quell some possible discontent, and hopefully be useful to folks who want to quickly switch out without sorting through the bloated preferences page. It also serves, somewhat symbolically perhaps, as a reminder to our commitment to keep the current Vector experience available. We will be listening to feedback and ready to respond to complaints. If, as you expect, people find the link more annoying than the potential value it offers, we will consider removing it. At this point it feels to us like a sensible starting point.

Sure, no problem. Can't expect things to change if you don't voice it.

In T243281#6052028, @Reedy wrote:

There's also no alt text/tooltip on it, so it's not exactly obvious what it's for without clicking through

^ I would however suggest getting that one resolved in the meantime :)

Compare Random page

<li id="n-randompage"><a href="/wiki/Special:Random" title="Load a random page [⌃⌥x]" accesskey="x">Random page</a></li>

with

<a class="vector-emphasized-sidebar-action-link" href="/w/index.php?title=Special:Preferences&amp;wprov=vctw1#mw-prefsection-rendering">Switch to old look</a>

You should add a "title" attribute to the link

@alexhollender Thanks for doing this. I just want to add four things here:

• I don't think the default in core (for devs and third parties) should be to show these kill off switch. I think it would be just fine to roll it the changes out to third party installation. Otherwise, the text would been so annoying to devs.
• On top of that, we haven't rolled out any obvious change (I'm sorry If I'm missing anything) showing kill off switch for something that doesn't exist yet sounds weird. Specially for devs with curious minds.
• I really think this should have a "dismiss" bit, I really don't want this to stay there forever. I want to have the new look.
• Are you sure it has to be bold? I feel it's like we are encouraging them not to use the new look. If a community thinks they don't want it, they can make it bold with Mediawiki:Common.css and red flashing lights.

In T243281#6052028, @Reedy wrote:

There's also no alt text/tooltip on it, so it's not exactly obvious what it's for without clicking through

Ah, and I am clearly reading too quickly this morning — totally missed that. Thanks for pointing it out, I've just created T250093 to address that. Feel free to recommend text.

In T243281#6052294, @alexhollender wrote:

In T243281#6052028, @Reedy wrote:

There's also no alt text/tooltip on it, so it's not exactly obvious what it's for without clicking through

Ah, and I am clearly reading too quickly this morning — totally missed that. Thanks for pointing it out, I've just created T250093 to address that. Feel free to recommend text.

No problem, it was easy to miss at the bottom, so thought I'd call it out again :)

Also, regarding prefs-vector-enable-vector-1-help

Over the next few years, we will be gradually updating the Vector skin. Legacy Vector will allow you to view the old version of Vector (as of December 2019). To learn more about the updates, go to our project page.

It feels odd that things are listed as of December 2019, when this only appears in April 2020... Whether that mean changes have been being made for a few months, and only just now that the opt out is being offered etc

(Note the opt in link is currently only enabled on the beta cluster and is not live anywhere in production. This might be adding confusion. When this code hits a production wiki the skin will look very different from how it does now.)

Just wanted to chime in a bit about the use case for the link itself. Mainly, for the beginning of the project, we'll be deploying the changes to the interface to test wikis who have decided they want to try it out. That said, we know that many of the editors on these wikis might not have had a part of that decision and might be confused as to why their interface is changing. While going to preferences might help with this, we wanted to have an extra way to ensure that people can learn about the project as well as turn off the changes. Because the changes will be happening in phases for these wikis, we also think that this would be a good way for people to turn off the smaller changes and then turn it back on when we're all done, if that's something they prefer. A couple of other notes:

• as @Jdlrobson pointed out, we will only be showing this link when the desktop improvements preference is selected (either by default on test wikis or by choice on all other wikis). We will wait until we add the first visual change as well so that turning legacy mode on/off actually does something
• This will be temporary. Once we're confident in the changes and they have been live for a while, we are planning on removing this
• @Reedy - good point on the dates, it is a bit odd. The date there signifies when we stopped working on legacy vector officially and there's a gap between that and when we were actually able to build something for the new vector. We should probably change the date to whenever we actually deploy.
• @Ladsgroup - re:bolding vs not-bolding. I think either could work but bolding makes sure that there's a clear indicator on the page that speaks to why things have changed. I agree that perhaps a positive indicator (rather than something that tells you to turn off the changes) might be better, but I'm not sure if there's many options on what something like that could look like.

Change 579293 abandoned by Nray:
Add opt-out link to Sidebar for Vector/Logged-in Users With Abstractions

Reason:
The concept of this patch (2 presenters/ 2 views) serves mostly as a reference for an approach we could pursue and iterate on if we feel the logic in VectorTemplate is becoming too mixed between legacy and latest. As discussed in the comments below from Stephen and Piotr, one improvement to this patch would be to setup "mini presenters" that would be more granular.

Abandoning for now since this patch is not mergeable in its present state.

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

Change 578660 abandoned by Nray:
Split content into its own component to increase its reusability

Reason:
This patch might still be useful as a reference, but its state has drifted far from the state of master so abandoning

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

FYI Facebook is introducing a new skin (which looks just like Mastodon...), also giving users the option to choose. It's worth taking a look at their opt-in/out mechanism:

• The option to switch to the new skin is added to the user menu, on both the new and old skins.
• There is a popup bubble notifying users of the existence of a new skin.
• The user settings page is not involved in the process.