TablePager: Modernize style loading
authorBartosz Dziewoński <matma.rex@gmail.com>
Mon, 25 Aug 2014 14:19:45 +0000 (16:19 +0200)
committerBartosz Dziewoński <matma.rex@gmail.com>
Sat, 30 Aug 2014 22:48:43 +0000 (00:48 +0200)
* Create a CSS module for pager styling (table and navigation),
  pulling in existing styles for shared.css. Load it on all pages
  where the pager itself is shown.
* Build a ParserOutput object encapsulating the return HTML and
  required modules, rather than only providing the HTML. Added some
  hacks for backwards-compatibility with old-style calls and
  soft-deprecated them (there are many usages in extensions).

Other cleanup:
* Remove styles in oldshared.css, they were all overwritten by
  shared.css or by styles for .mw-datatable.
* Remove inline styles where possible, explain them where impossible.
* On SpecialListFiles, display navigation bar above the table as well
  as below (this seems to be the convention for other pages).

Change-Id: Iae976f854b96b5c61691918787c4dff7db089c28

RELEASE-NOTES-1.24
includes/pager/TablePager.php
includes/specials/SpecialAllMessages.php
includes/specials/SpecialBlockList.php
includes/specials/SpecialListfiles.php
includes/specials/SpecialProtectedpages.php
resources/Resources.php
resources/src/mediawiki.legacy/oldshared.css
resources/src/mediawiki.legacy/shared.css
resources/src/mediawiki/mediawiki.pager.tablePager.css [new file with mode: 0644]

index 1205ceb..c5b6cd4 100644 (file)
@@ -432,6 +432,8 @@ changes to languages because of Bugzilla reports.
   stylesheet. It was ignored by most browsers these days anyway.
 * SpecialSearchNoResults hook has been removed. SpecialSearchResults is now
   called unconditionally.
+* TablePager::getBody() is now 'final' and can't be overridden in subclasses.
+* TablePager::getBody() is deprecated, use getBodyOutput() or getFullOutput().
 
 ==== Renamed classes ====
 * CLDRPluralRuleConverter_Expression to CLDRPluralRuleConverterExpression
index 19538c6..518540d 100644 (file)
@@ -50,6 +50,62 @@ abstract class TablePager extends IndexPager {
                parent::__construct();
        }
 
+       /**
+        * Get the formatted result list. Calls getStartBody(), formatRow() and getEndBody(), concatenates
+        * the results and returns them.
+        *
+        * Also adds the required styles to our OutputPage object (this means that if context wasn't
+        * passed to constructor or otherwise set up, you will get a pager with missing styles).
+        *
+        * This method has been made 'final' in 1.24. There's no reason to override it, and if there exist
+        * any subclasses that do, the style loading hack is probably broken in them. Let's fail fast
+        * rather than mysteriously render things wrong.
+        *
+        * @deprecated since 1.24, use getBodyOutput() or getFullOutput() instead
+        * @return string
+        */
+       final public function getBody() {
+               $this->getOutput()->addModuleStyles( $this->getModuleStyles() );
+               return parent::getBody();
+       }
+
+       /**
+        * Get the formatted result list.
+        *
+        * Calls getBody() and getModuleStyles() and builds a ParserOutput object. (This is a bit hacky
+        * but works well.)
+        *
+        * @since 1.24
+        * @return ParserOutput
+        */
+       public function getBodyOutput() {
+               $body = parent::getBody();
+
+               $pout = new ParserOutput;
+               $pout->setText( $body );
+               $pout->addModuleStyles( $this->getModuleStyles() );
+               return $pout;
+       }
+
+       /**
+        * Get the formatted result list, with navigation bars.
+        *
+        * Calls getBody(), getNavigationBar() and getModuleStyles() and
+        * builds a ParserOutput object. (This is a bit hacky but works well.)
+        *
+        * @since 1.24
+        * @return ParserOutput
+        */
+       public function getFullOutput() {
+               $navigation = $this->getNavigationBar();
+               $body = parent::getBody();
+
+               $pout = new ParserOutput;
+               $pout->setText( $navigation . $body . $navigation );
+               $pout->addModuleStyles( $this->getModuleStyles() );
+               return $pout;
+       }
+
        /**
         * @protected
         * @return string
@@ -99,7 +155,6 @@ abstract class TablePager extends IndexPager {
 
                $tableClass = $this->getTableClass();
                $ret = Html::openElement( 'table', array(
-                       'style' => 'border:1px;',
                        'class' => "mw-datatable $tableClass" )
                );
                $ret .= Html::rawElement( 'thead', array(), Html::rawElement( 'tr', array(), "\n" . $s . "\n" ) );
@@ -281,12 +336,24 @@ abstract class TablePager extends IndexPager {
                $s .= Html::openElement( 'tr' ) . "\n";
                $width = 100 / count( $links ) . '%';
                foreach ( $labels as $type => $label ) {
-                       $s .= Html::rawElement( 'td', array( 'style' => "width:$width;" ), $links[$type] ) . "\n";
+                       // We want every cell to have the same width. We could use table-layout: fixed; in CSS,
+                       // but it only works if we specify the width of a cell or the table and we don't want to.
+                       // There is no better way. <http://www.w3.org/TR/CSS2/tables.html#fixed-table-layout>
+                       $s .= Html::rawElement( 'td', array( 'style' => "width: $width;" ), $links[$type] ) . "\n";
                }
                $s .= Html::closeElement( 'tr' ) . Html::closeElement( 'table' ) . "\n";
                return $s;
        }
 
+       /**
+        * ResourceLoader modules that must be loaded to provide correct styling for this pager
+        * @since 1.24
+        * @return string[]
+        */
+       public function getModuleStyles() {
+               return array( 'mediawiki.pager.tablePager' );
+       }
+
        /**
         * Get a "<select>" element which has options for each of the allowed limits
         *
index 7096fde..6ecb121 100644 (file)
@@ -68,10 +68,8 @@ class SpecialAllMessages extends SpecialPage {
 
                $this->langcode = $this->table->lang->getCode();
 
-               $out->addHTML( $this->table->buildForm() .
-                       $this->table->getNavigationBar() .
-                       $this->table->getBody() .
-                       $this->table->getNavigationBar() );
+               $out->addHTML( $this->table->buildForm() );
+               $out->addParserOutputContent( $this->table->getFullOutput() );
        }
 
        protected function getGroupName() {
index e2ebdbe..0123972 100644 (file)
@@ -181,11 +181,7 @@ class SpecialBlockList extends SpecialPage {
 
                $pager = new BlockListPager( $this, $conds );
                if ( $pager->getNumRows() ) {
-                       $out->addHTML(
-                               $pager->getNavigationBar() .
-                                       $pager->getBody() .
-                                       $pager->getNavigationBar()
-                       );
+                       $out->addParserOutputContent( $pager->getFullOutput() );
                } elseif ( $this->target ) {
                        $out->addWikiMsg( 'ipblocklist-no-results' );
                } else {
index cea6ff8..3eee43a 100644 (file)
@@ -48,15 +48,13 @@ class SpecialListFiles extends IncludableSpecialPage {
                        $showAll
                );
 
+               $out = $this->getOutput();
                if ( $this->including() ) {
-                       $html = $pager->getBody();
+                       $out->addParserOutputContent( $pager->getBodyOutput() );
                } else {
-                       $form = $pager->getForm();
-                       $body = $pager->getBody();
-                       $nav = $pager->getNavigationBar();
-                       $html = "$form<br />\n$body<br />\n$nav";
+                       $out->addHTML( $pager->getForm() );
+                       $out->addParserOutputContent( $pager->getFullOutput() );
                }
-               $this->getOutput()->addHTML( $html );
        }
 
        protected function getGroupName() {
index 5072e76..0ba7385 100644 (file)
@@ -79,11 +79,7 @@ class SpecialProtectedpages extends SpecialPage {
                ) );
 
                if ( $pager->getNumRows() ) {
-                       $this->getOutput()->addHTML(
-                               $pager->getNavigationBar() .
-                                       $pager->getBody() .
-                                       $pager->getNavigationBar()
-                       );
+                       $this->getOutput()->addParserOutputContent( $pager->getFullOutput() );
                } else {
                        $this->getOutput()->addWikiMsg( 'protectedpagesempty' );
                }
index 3dc831b..d970572 100644 (file)
@@ -920,6 +920,10 @@ return array(
                'scripts' => 'resources/src/mediawiki/mediawiki.notify.js',
                'targets' => array( 'desktop', 'mobile' ),
        ),
+       'mediawiki.pager.tablePager' => array(
+               'styles' => 'resources/src/mediawiki/mediawiki.pager.tablePager.css',
+               'position' => 'top',
+       ),
        'mediawiki.searchSuggest' => array(
                'scripts' => 'resources/src/mediawiki/mediawiki.searchSuggest.js',
                'styles' => 'resources/src/mediawiki/mediawiki.searchSuggest.css',
index a4e7544..17ad0e8 100644 (file)
@@ -452,41 +452,6 @@ table.multipageimage td {
        text-align: center;
 }
 
-/*
-  Table pager (e.g. Special:Imagelist)
-  - remove underlines from the navigation link
-  - collapse borders
-  - set the borders to outsets (similar to Special:Allmessages)
-  - remove line wrapping for all td and th, set background color
-  - restore line wrapping for the last two table cells (description and size)
-*/
-.TablePager_nav a {
-       text-decoration: none;
-}
-
-.TablePager {
-       border-collapse: collapse;
-}
-
-.TablePager,
-.TablePager td,
-.TablePager th {
-       border: 0.15em solid #777777;
-       padding: 0 0.15em 0 0.15em;
-}
-
-.TablePager th {
-       background-color: #eeeeff;
-}
-
-.TablePager td {
-       background-color: #ffffff;
-}
-
-.TablePager tr:hover td {
-       background-color: #eeeeff;
-}
-
 .templatesUsed {
        margin-top: 1em;
 }
index 34f084a..67f7ca6 100644 (file)
@@ -660,27 +660,6 @@ table.collapsed tr.collapsable {
        background-color: #eeeeff;
 }
 
-/**
- * TablePager tables generated by the TablePager PHP class
- * in MediaWiki (e.g. Special:ListFiles).
- */
-.TablePager {
-       min-width: 80%;
-}
-
-.TablePager_nav {
-       margin: 0 auto;
-}
-
-.TablePager_nav td {
-       padding: 3px;
-       text-align: center;
-}
-
-.TablePager_nav a {
-       text-decoration: none;
-}
-
 /* filetoc */
 ul#filetoc {
        text-align: center;
diff --git a/resources/src/mediawiki/mediawiki.pager.tablePager.css b/resources/src/mediawiki/mediawiki.pager.tablePager.css
new file mode 100644 (file)
index 0000000..fc73a96
--- /dev/null
@@ -0,0 +1,21 @@
+/*!
+ * Structures generated by the TablePager PHP class
+ * in MediaWiki (used e.g. on Special:ListFiles).
+ */
+
+.TablePager {
+       min-width: 80%;
+}
+
+.TablePager_nav {
+       margin: 0 auto;
+}
+
+.TablePager_nav td {
+       padding: 3px;
+       text-align: center;
+}
+
+.TablePager_nav a {
+       text-decoration: none;
+}