A promise of desktop improvements was that we will maintain support for existing user gadgets and styles.

When we make the technical change to break Vector into 2 separate skins we introduce a new skin key.

To restore this support we will introduce a Vector ResourceLoader module which looks for existing wiki pages and adds them to the experience if present.

Acceptance criteria

• Introduce skins.vector.user.styles and skins.vector.user for maintaining the loading of legacy gadgets associated with the vector key.
• mw.config.get( 'skin' ) === 'vector' must be true for legacy and modern Vector. 3000+ gadgets check this value. https://global-search.toolforge.org/?q=%27vector%27&regex=1&namespaces=&title=

QA

To be done by a developer.

Setup

• Login as admin into a local instance and edit the following files: https://en.wikipedia.beta.wmflabs.org/wiki/MediaWiki:Vector.css

// for modern, the user menu dropdown button shows a red border while for legacy, the entire personal menu shows a red border
#firstHeading {border: 1px solid red;}

2. Edit https://en.wikipedia.beta.wmflabs.org/wiki/MediaWiki:Vector.js

if ( mw.config.get('skin') === 'vector' && document.body.classList.contains('skin-vector-legacy') ) {
  console.log('Legacy works!')
}

if ( mw.config.get('skin') === 'vector' && !document.body.classList.contains('skin-vector-legacy') ) {
 console.log('Modern works!')
}

Tests

1. Test one. Visit https://en.wikipedia.beta.wmflabs.org/?useskin=vector&useskinversion=1

Expected:

• console.log saying "Legacy works"
• a red border around the user menu

2. Test two. Visit https://en.wikipedia.beta.wmflabs.org/?useskin=vector&useskinversion=2

Expected:

• console.log saying "Modern works"
• a red border around the user menu

3. Test. Visit https://en.wikipedia.beta.wmflabs.org/?useskin=vector-2022

Expected:

• console.log saying "Modern works"
• a red border around the user menu

Note: please undo the changes afterwards.

To be done by Edward:

Setup:

1. Login as a new user

2. Edit the page User:(username)/vector.css with the following

/* T297758 */
#pt-notifications-alert {border: 1px solid blue;}
#p-personal {border: 1px solid red;}

3. Edit the page User:(username)/vector.js (substituting username with your username, with the following:

if ( mw.config.get('skin') === 'vector' && document.body.classList.contains('skin-vector-legacy') ) {
  alert('Legacy works!')
}

if ( mw.config.get('skin') === 'vector' && !document.body.classList.contains('skin-vector-legacy') ) {
  alert('Modern works!')
}

Tests:

1. Test one. Visit https://en.wikipedia.beta.wmflabs.org/?useskin=vector&useskinversion=1

Expected:

• An alert saying "Legacy works"
• a red border around the user menu
• a blue border around the Echo notfiication

2. Test two. Visit https://en.wikipedia.beta.wmflabs.org/?useskin=vector&useskinversion=2

Expected:

• An alert saying "Modern works"
• a red border around the user menu
• a blue border around the Echo notfiication

3. Test three. Visit https://en.wikipedia.beta.wmflabs.org/?useskin=vector-2022

Expected:

• An alert saying "Modern works"
• a red border around the user menu
• a blue border around the Echo notfiication

QA Results - Beta

QA Results - Prod