Change Details

# Background ResourceLoader is the name for the feature that allows us to add JavaScript and CSS to a page. This task will provide an introduction to ResourceLoader and its complexities that will aid you in any change you make in future. It will also introduce you to how caching works in Wikimedia sites. The goal of this ticket is to consolidate how we load code on pages. It should have no visual changes. Minerva has 2 modules for shipping styles - skins.minerva.base.styles, skins.minerva.mainMenu.styles and skins.minerva.content.styles that are loaded on page load and 2 modules for icons - skins.minerva.mainMenu.icons and skins.minerva.icons.wikimedia. Every ResourceLoader module we create increases the amount of render blocking JS we ship as ResourceLoader needs to build a dependency tree of how modules relate to one another. As a result, ideally we minimize the amount of modules we ship in production. # Acceptance criteria [x] The contents of skins.minerva.base.styles and skins.minerva.mainMenu.styles are merged (as demonstrated in this patch https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/+/1077998) [x] A new module skins.minerva.styles is the only styles module in Minerva (ignoring icons) and combines the contents of skins.minerva.base.styles and skins.minerva.mainMenu.styles [x] Newly generated HTML will add the skins.minerva.styles module. [x] For cached HTML, keep skins.minerva.base.styles and skins.minerva.mainMenu.styles but mark them as a deprecated. New HTML should not add them to the page. [x] The bundlesize definitions in bundlesize.config.json are updated [x] Merge the skins.minerva.icons.wikimedia and skins.minerva.mainMenu.icons modules. [x] Drop `.minerva-icon--{name}-base20` and `.minerva-icon--{name}-disabled` variants since these are no longer utilized and only serve cached HTML. The change in [[ https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/+/1078492 | 1078492 ]] means this can be safely done after the 1.43.0-wmf.27 release has happened (Tuesday 22nd at earliest). [x] Run [[ https://github.com/wikimedia/pixel | Pixel ]] and make sure there are no visual changes with your work. [x] Drop the skins.minerva.base.styles and skins.minerva.mainMenu.styles modules. In the process reorganize the files in the resources/skins.minerva.styles folder (we should aim to merge this patch on 19th at the earliest given we know caching can be a problem for a 2 week period) # Developer notes For cached HTML the 2 modules are retained for a week referencing the files in the new skin.minerva.styles module. # QA We can use Pixel to test this. No need for manual testing.

# Background ResourceLoader is the name for the feature that allows us to add JavaScript and CSS to a page. This task will provide an introduction to ResourceLoader and its complexities that will aid you in any change you make in future. It will also introduce you to how caching works in Wikimedia sites. The goal of this ticket is to consolidate how we load code on pages. It should have no visual changes. Minerva has 2 modules for shipping styles - skins.minerva.base.styles, skins.minerva.mainMenu.styles and skins.minerva.content.styles that are loaded on page load and 2 modules for icons - skins.minerva.mainMenu.icons and skins.minerva.icons.wikimedia. Every ResourceLoader module we create increases the amount of render blocking JS we ship as ResourceLoader needs to build a dependency tree of how modules relate to one another. As a result, ideally we minimize the amount of modules we ship in production. # Acceptance criteria [x] The contents of skins.minerva.base.styles and skins.minerva.mainMenu.styles are merged (as demonstrated in this patch https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/+/1077998) [x] A new module skins.minerva.styles is the only styles module in Minerva (ignoring icons) and combines the contents of skins.minerva.base.styles and skins.minerva.mainMenu.styles [x] Newly generated HTML will add the skins.minerva.styles module. [x] For cached HTML, keep skins.minerva.base.styles and skins.minerva.mainMenu.styles but mark them as a deprecated. New HTML should not add them to the page. [x] The bundlesize definitions in bundlesize.config.json are updated [x] Merge the skins.minerva.icons.wikimedia and skins.minerva.mainMenu.icons modules. [x] Drop `.minerva-icon--{name}-base20` and `.minerva-icon--{name}-disabled` variants since these are no longer utilized and only serve cached HTML. The change in [[ https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/+/1078492 | 1078492 ]] means this can be safely done after the 1.43.0-wmf.27 release has happened (Tuesday 22nd at earliest). [x] Run [[ https://github.com/wikimedia/pixel | Pixel ]] and make sure there are no visual changes with your work. [x] Drop the skins.minerva.base.styles and skins.minerva.mainMenu.styles modules. In the process reorganize the files in the resources/skins.minerva.styles folder (we should aim to merge this patch on 19th at the earliest given we know caching can be a problem for a 2 week period) # Developer notes For cached HTML the 2 modules are retained for a week referencing the files in the new skin.minerva.styles module. # QA We can use Pixel to test this. No need for manual testing. Description Text == Requirement Consolidate ResourceLoader modules in the Minerva skin to reduce complexity and improve performance without introducing visual changes. == BDD ``` Feature: Consolidate ResourceLoader Modules in Minerva Scenario: Verify consolidated ResourceLoader modules in Minerva Given the Minerva skin uses consolidated modules When the page loads on mobile Then the contents of skins.minerva.base.styles and skins.minerva.mainMenu.styles are combined into a single module skins.minerva.styles And cached HTML retains skins.minerva.base.styles and skins.minerva.mainMenu.styles but marks them deprecated And skins.minerva.icons.wikimedia and skins.minerva.mainMenu.icons are merged into one module And .minerva-icon--{name}-base20 and .minerva-icon--{name}-disabled classes are removed And there are no visual changes after these updates ``` == Test Steps __**Test Case 1: Verify Consolidation of ResourceLoader Modules in Minerva**__ 1. Visit the Pixel report for mobile skin. 2. **AC1**: Confirm that there are no errors reported in the Pixel report related to this change.

# Background ResourceLoader is the name for the feature that allows us to add JavaScript and CSS to a page. This task will provide an introduction to ResourceLoader and its complexities that will aid you in any change you make in future. It will also introduce you to how caching works in Wikimedia sites. The goal of this ticket is to consolidate how we load code on pages. It should have no visual changes. Minerva has 2 modules for shipping styles - skins.minerva.base.styles, skins.minerva.mainMenu.styles and skins.minerva.content.styles that are loaded on page load and 2 modules for icons - skins.minerva.mainMenu.icons and skins.minerva.icons.wikimedia. Every ResourceLoader module we create increases the amount of render blocking JS we ship as ResourceLoader needs to build a dependency tree of how modules relate to one another. As a result, ideally we minimize the amount of modules we ship in production. # Acceptance criteria [x] The contents of skins.minerva.base.styles and skins.minerva.mainMenu.styles are merged (as demonstrated in this patch https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/+/1077998) [x] A new module skins.minerva.styles is the only styles module in Minerva (ignoring icons) and combines the contents of skins.minerva.base.styles and skins.minerva.mainMenu.styles [x] Newly generated HTML will add the skins.minerva.styles module. [x] For cached HTML, keep skins.minerva.base.styles and skins.minerva.mainMenu.styles but mark them as a deprecated. New HTML should not add them to the page. [x] The bundlesize definitions in bundlesize.config.json are updated [x] Merge the skins.minerva.icons.wikimedia and skins.minerva.mainMenu.icons modules. [x] Drop `.minerva-icon--{name}-base20` and `.minerva-icon--{name}-disabled` variants since these are no longer utilized and only serve cached HTML. The change in [[ https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/+/1078492 | 1078492 ]] means this can be safely done after the 1.43.0-wmf.27 release has happened (Tuesday 22nd at earliest). [x] Run [[ https://github.com/wikimedia/pixel | Pixel ]] and make sure there are no visual changes with your work. [x] Drop the skins.minerva.base.styles and skins.minerva.mainMenu.styles modules. In the process reorganize the files in the resources/skins.minerva.styles folder (we should aim to merge this patch on 19th at the earliest given we know caching can be a problem for a 2 week period) # Developer notes For cached HTML the 2 modules are retained for a week referencing the files in the new skin.minerva.styles module. # QA We can use Pixel to test this. No need for manual testing. Description Text == Requirement Consolidate ResourceLoader modules in the Minerva skin to reduce complexity and improve performance without introducing visual changes. == BDD ``` Feature: Consolidate ResourceLoader Modules in Minerva Scenario: Verify consolidated ResourceLoader modules in Minerva Given the Minerva skin uses consolidated modules When the page loads on mobile Then the contents of skins.minerva.base.styles and skins.minerva.mainMenu.styles are combined into a single module skins.minerva.styles And cached HTML retains skins.minerva.base.styles and skins.minerva.mainMenu.styles but marks them deprecated And skins.minerva.icons.wikimedia and skins.minerva.mainMenu.icons are merged into one module And .minerva-icon--{name}-base20 and .minerva-icon--{name}-disabled classes are removed And there are no visual changes after these updates ``` == Test Steps __**Test Case 1: Verify Consolidation of ResourceLoader Modules in Minerva**__ 1. Visit the Pixel report for mobile skin. 2. **AC1**: Confirm that there are no errors reported in the Pixel report related to this change.