ImagePage: Make metadata table's initial collapse CSS-only

Make the initial collapse of the metadata table not depend on
JavaScript. This eliminates the FOUC, and will also reduce JS
footprint once compat can be removed.

* Move the 'display: none;' styles from metadata.css to
  filepage.css so that they are part of the base styles for
  file pages (metadata.css is only for supporting metadata.js,
  which is loaded dynamically).

* Apply "collapsed" class from the PHP side immediately,
  instead of calling "addClass" in JavaScript.

* Restrict hide-styles to only apply under .client-js to make
  sure the rows remain visible in no-js mode.

* Declare dependency between metadata.js and filepage.css.
  This is just for documentation purposes, as they are both
  already separately loaded on all file pages.

Change-Id: If22bf7acb47b59151dc3b0843a62507c100e548b

diff --git a/includes/page/ImagePage.php b/includes/page/ImagePage.php
index c774eb5..1dcdc65 100644 (file)
--- a/includes/page/ImagePage.php
+++ b/includes/page/ImagePage.php
@@ -251,12 +251,13 @@ class ImagePage extends Article {
        protected function makeMetadataTable( $metadata ) {
                $r = "<div class=\"mw-imagepage-section-metadata\">";
                $r .= $this->getContext()->msg( 'metadata-help' )->plain();
-               $r .= "<table id=\"mw_metadata\" class=\"mw_metadata\">\n";
+               // Intial state is collapsed
+               // see filepage.css and mediawiki.action.view.metadata module.
+               $r .= "<table id=\"mw_metadata\" class=\"mw_metadata collapsed\">\n";
                foreach ( $metadata as $type => $stuff ) {
                        foreach ( $stuff as $v ) {
                                $class = str_replace( ' ', '_', $v['id'] );
                                if ( $type == 'collapsed' ) {
-                                       // Handled by mediawiki.action.view.metadata module.
                                        $class .= ' mw-metadata-collapsible';
                                }
                                $r .= Html::rawElement( 'tr',

diff --git a/resources/Resources.php b/resources/Resources.php
index 0e6939b..7d89f1c 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1498,6 +1498,7 @@ return [
                        'metadata-expand',
                        'metadata-collapse',
                ],
+               'dependencies' => 'mediawiki.action.view.filepage',
        ],
        'mediawiki.action.view.categoryPage.styles' => [
                'styles' => 'resources/src/mediawiki.action/mediawiki.action.view.categoryPage.less',

diff --git a/resources/src/mediawiki.action/mediawiki.action.view.filepage.css b/resources/src/mediawiki.action/mediawiki.action.view.filepage.css
index d466216..b643d76 100644 (file)
--- a/resources/src/mediawiki.action/mediawiki.action.view.filepage.css
+++ b/resources/src/mediawiki.action/mediawiki.action.view.filepage.css
@@ -111,3 +111,9 @@
        padding-left: 5px;
        margin: 0;
 }
+
+.client-js .mw_metadata.collapsed .mw-metadata-collapsible,
+/* Keep tr.collapsible for back-compat with cached HTML */
+.client-js .mw_metadata.collapsed tr.collapsable {
+       display: none;
+}

diff --git a/resources/src/mediawiki.action/mediawiki.action.view.metadata.css b/resources/src/mediawiki.action/mediawiki.action.view.metadata.css
index b9f50ac..f21b111 100644 (file)
--- a/resources/src/mediawiki.action/mediawiki.action.view.metadata.css
+++ b/resources/src/mediawiki.action/mediawiki.action.view.metadata.css
@@ -1,12 +1,7 @@
 /*!
- * Hide collapsable rows in a collapsed table.
+ * Styles for metadata.js.
  */
 
-.mw_metadata.collapsed .mw-metadata-collapsible,
-.mw_metadata.collapsed tr.collapsable {
-       display: none;
-}
-
 /*
  * Exclude user interface elements from selection.
  */

diff --git a/resources/src/mediawiki.action/mediawiki.action.view.metadata.js b/resources/src/mediawiki.action/mediawiki.action.view.metadata.js
index 7217d36..bbe3032 100644 (file)
--- a/resources/src/mediawiki.action/mediawiki.action.view.metadata.js
+++ b/resources/src/mediawiki.action/mediawiki.action.view.metadata.js
@@ -48,7 +48,9 @@
                        );
                } );
 
-               // And collapse!
+               // Initial collapsed state
+               // (For back-compat with cached HTML from before ImagePage.php
+               // did this by default)
                $tables.addClass( 'collapsed' );
        } );