Work around T87871 to avoid double-loading OOjs UI PHP styles

Use a <meta> tag added when enabling OOUI, and a skipFunction that
looks for it, to avoid double-loading the modules: oojs-ui.styles,
oojs-ui.styles.icons, oojs-ui.styles.indicators, oojs-ui.styles.textures.

This saves us loading of around 200K of CSS (20K when gzipped) on pages
that both use OOjs UI PHP server-side and load OOjs UI client-side.
(For example, all MediaWiki special pages using OOUIHTMLForm.)

Interesting caveat: this causes the aforementioned modules to no
longer appear in the output of `mw.loader.inspect()` on such pages.

Bug: T125292
Change-Id: Ia7e2256cd239841e1f78c4a6bf666dd939c0d2c7

diff --git a/includes/OutputPage.php b/includes/OutputPage.php
index 3b8d741..494e857 100644 (file)
--- a/includes/OutputPage.php
+++ b/includes/OutputPage.php
@@ -4051,5 +4051,8 @@ class OutputPage extends ContextSource {
                        'oojs-ui.styles.textures',
                        'mediawiki.widgets.styles',
                ) );
+               // Used by 'skipFunction' of the four 'oojs-ui.styles.*' modules. Please don't treat this as a
+               // public API or you'll be severely disappointed when T87871 is fixed and it disappears.
+               $this->addMeta( 'X-OOUI-PHP', '1' );
        }
 }

diff --git a/resources/ResourcesOOUI.php b/resources/ResourcesOOUI.php
index 647efa2..851b1c7 100644 (file)
--- a/resources/ResourcesOOUI.php
+++ b/resources/ResourcesOOUI.php
@@ -68,9 +68,6 @@ return call_user_func( function () {
                        'es5-shim',
                        'oojs',
                        'oojs-ui.styles',
-                       'oojs-ui.styles.icons',
-                       'oojs-ui.styles.indicators',
-                       'oojs-ui.styles.textures',
                        'mediawiki.language',
                ),
                'targets' => array( 'desktop', 'mobile' ),
@@ -81,6 +78,14 @@ return call_user_func( function () {
                'styles' => 'resources/src/oojs-ui-local.css', // HACK, see inside the file
                'skinStyles' => $getSkinSpecific( 'core' ),
                'targets' => array( 'desktop', 'mobile' ),
+               // ResourceLoaderImageModule doesn't support 'skipFunction', so instead we set this up so that
+               // this module is skipped together with its dependencies. Nothing else depends on these modules.
+               'dependencies' => array(
+                       'oojs-ui.styles.icons',
+                       'oojs-ui.styles.indicators',
+                       'oojs-ui.styles.textures',
+               ),
+               'skipFunction' => 'resources/src/oojs-ui-styles-skip.js',
        );
 
        // Deprecated old name for the module 'oojs-ui-core.styles'.

diff --git a/resources/src/oojs-ui-styles-skip.js b/resources/src/oojs-ui-styles-skip.js
new file mode 100644 (file)
index 0000000..57c905a
--- /dev/null
+++ b/resources/src/oojs-ui-styles-skip.js
@@ -0,0 +1,9 @@
+/*!
+ * Skip function for OOjs UI PHP style modules.
+ *
+ * The `<meta name="X-OOUI-PHP" />` is added to pages by OutputPage::enableOOUI().
+ *
+ * Looking for elements in the DOM might be expensive, but it's probably better than double-loading
+ * 200 KB of CSS with embedded images because of bug T87871.
+ */
+return !!jQuery( 'meta[name="X-OOUI-PHP"]' ).length;