Change Details

The current `mediawiki.special.watchlistlabels` ResourceLoader module only contains styles (and is marked codexStyleOnly), but is being loaded as a JS module with `addModule()`. Instead, it should be loaded with `addModuleStyles()` so that all the styling works even when JS is not available (e.g. before everything has loaded). This will reduce the amount that the layout of the page moves after JS modules have been loaded.

The current `mediawiki.special.watchlistlabels` ResourceLoader module only contains styles (and is marked codexStyleOnly), but is being loaded as a JS module with `addModule()`. Instead, it should be loaded with `addModuleStyles()` so that all the styling works even when JS is not available (e.g. before everything has loaded). This will reduce the amount that the layout of the page moves after JS modules have been loaded. --- **Derived Requirement** Ensure that the `mediawiki.special.watchlistlabels` styles are loaded via `addModuleStyles()` so that the watchlist labels UI is correctly styled even when JavaScript is disabled or not yet loaded, and so that the page layout remains visually stable with minimal movement as JS modules load. ====Test Steps **Test Case 1: Ensure watchlist labels styling works with JavaScript disabled** 1. In Chrome DevTools, disable JavaScript for the wiki origin (for example, using the Command Menu or a JS-blocking extension). 2. In the Minerva mobile skin, navigate to the watchlist labels interface that uses the `mediawiki.special.watchlistlabels` module (for example, the watchlist management page or Special:EditWatchlistLabels on the test wiki where this feature exists). 3. Observe the labels UI: lists, buttons, inputs, and any label badges or tags. 4. ✅❓❌⬜ **AC1:** Confirm that the watchlist labels UI is clearly styled (correct fonts, spacing, borders, alignment) and not shown as raw, unstyled HTML, despite JavaScript being disabled. **Test Case 2: Ensure reduced layout shift when JS loads** 1. Re-enable JavaScript in the browser. 2. In Chrome DevTools, use the Network tab to throttle the connection to a slower speed (for example, “Fast 3G”) so you can see the page progressively render. 3. With Minerva enabled, load the watchlist labels interface in a new tab or via hard refresh. 4. Watch the area where watchlist labels and their controls appear as the page loads and JS modules initialize. 5. ✅❓❌⬜ **AC2:** Confirm that the basic layout and styling of the watchlist labels area is present from the start, and that there is minimal or no visible “jumping” or shifting of the UI when JavaScript finishes loading. **Test Case 3: Regression check with JS enabled (normal behavior preserved)** 1. With JavaScript enabled and network speed back to “Normal”, open the watchlist labels interface in the Minerva skin. 2. Interact with the labels UI as an end user would: view existing labels, add/edit/remove a label if supported, and navigate between relevant watchlist pages. 3. Observe styling, interactivity, and any dynamic behaviors that depend on JS. 4. ✅❓❌⬜ **AC3:** Confirm that all watchlist labels functionality continues to work as before (no JS errors in the console, no broken buttons or dialogs) and that styling remains correct with JS fully enabled.

The current `mediawiki.special.watchlistlabels` ResourceLoader module only contains styles (and is marked codexStyleOnly), but is being loaded as a JS module with `addModule()`. Instead, it should be loaded with `addModuleStyles()` so that all the styling works even when JS is not available (e.g. before everything has loaded). This will reduce the amount that the layout of the page moves after JS modules have been loaded. --- **Derived Requirement** Ensure that the `mediawiki.special.watchlistlabels` styles are loaded via `addModuleStyles()` so that the watchlist labels UI is correctly styled even when JavaScript is disabled or not yet loaded, and so that the page layout remains visually stable with minimal movement as JS modules load. ====Test Steps **Test Case 1: Ensure watchlist labels styling works with JavaScript disabled** 1. In Chrome DevTools, disable JavaScript for the wiki origin (for example, using the Command Menu or a JS-blocking extension). 2. In the Minerva mobile skin, navigate to the watchlist labels interface that uses the `mediawiki.special.watchlistlabels` module (for example, the watchlist management page or Special:EditWatchlistLabels on the test wiki where this feature exists). 3. Observe the labels UI: lists, buttons, inputs, and any label badges or tags. 4. ✅❓❌⬜ **AC1:** Confirm that the watchlist labels UI is clearly styled (correct fonts, spacing, borders, alignment) and not shown as raw, unstyled HTML, despite JavaScript being disabled. **Test Case 2: Ensure reduced layout shift when JS loads** 1. Re-enable JavaScript in the browser. 2. In Chrome DevTools, use the Network tab to throttle the connection to a slower speed (for example, “Fast 3G”) so you can see the page progressively render. 3. With Minerva enabled, load the watchlist labels interface in a new tab or via hard refresh. 4. Watch the area where watchlist labels and their controls appear as the page loads and JS modules initialize. 5. ✅❓❌⬜ **AC2:** Confirm that the basic layout and styling of the watchlist labels area is present from the start, and that there is minimal or no visible “jumping” or shifting of the UI when JavaScript finishes loading. **Test Case 3: Regression check with JS enabled (normal behavior preserved)** 1. With JavaScript enabled and network speed back to “Normal”, open the watchlist labels interface in the Minerva skin. 2. Interact with the labels UI as an end user would: view existing labels, add/edit/remove a label if supported, and navigate between relevant watchlist pages. 3. Observe styling, interactivity, and any dynamic behaviors that depend on JS. 4. ✅❓❌⬜ **AC3:** Confirm that all watchlist labels functionality continues to work as before (no JS errors in the console, no broken buttons or dialogs) and that styling remains correct with JS fully enabled.