From: Timo Tijhof <krinklemail@gmail.com>
Date: Tue, 5 Dec 2017 00:09:06 +0000 (+0000)
Subject: ImagePage: Make metadata table's initial collapse CSS-only
X-Git-Tag: 1.31.0-rc.0~1288^2
X-Git-Url: http://git.cyclocoop.org/?a=commitdiff_plain;h=6400972eeacf17a1172e56c0ad73cdbdb4449344;p=lhc%2Fweb%2Fwiklou.git

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 c774eb5b58..1dcdc65ff2 100644
--- 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 0e6939b272..7d89f1ce19 100644
--- 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 d4662161fc..b643d767c3 100644
--- 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 b9f50acea5..f21b1115b7 100644
--- 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 7217d36822..bbe3032fc5 100644
--- 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' );
 	} );