[mediawik.special.changeslist] Remove ugly arrow swapping hack

* Use CSS and change the background image, instead of displaying 2 <img> tags and hiding one based on the parent element's class
* touches bug 17616 a bit, although it doesn't address the focus issue yet, but does improve the overal structure of this module
* Also speeds up by:
- Outputting less markup
- Having 1 embedded images in the CSS file instead of (N changes)*<img> tags
* jquery.makeCollapsible:

diff --git a/includes/ChangesList.php b/includes/ChangesList.php
index 4611611..686ee09 100644 (file)
--- a/includes/ChangesList.php
+++ b/includes/ChangesList.php
@@ -860,16 +860,7 @@ class EnhancedChangesList extends ChangesList {
                $users = ' <span class="changedby">[' .
                        implode( $this->message['semicolon-separator'], $users ) . ']</span>';
 
-               # Title for <a> tags
-               $expandTitle = htmlspecialchars( wfMsg( 'rc-enhanced-expand' ) );
-               $closeTitle = htmlspecialchars( wfMsg( 'rc-enhanced-hide' ) );
-
-               $tl = "<span class='mw-collapsible-toggle'>"
-                       . "<span class='mw-rc-openarrow'>"
-                       . "<a href='#' title='$expandTitle'>{$this->sideArrow()}</a>"
-                       . "</span><span class='mw-rc-closearrow'>"
-                       . "<a href='#' title='$closeTitle'>{$this->downArrow()}</a>"
-                       . "</span></span>";
+               $tl = '<span class="mw-collapsible-toggle mw-enhancedchanges-arrow"></span>';
                $r .= "<td>$tl</td>";
 
                # Main line
@@ -974,7 +965,6 @@ class EnhancedChangesList extends ChangesList {
                        $classes = array();
                        $type = $rcObj->mAttribs['rc_type'];
 
-                       #$r .= '<tr><td valign="top">'.$this->spacerArrow();
                        $r .= '<tr><td></td><td class="mw-enhanced-rc">';
                        $r .= $this->recentChangesFlags( array(
                                'newpage' => $rcObj->mAttribs['rc_new'],
@@ -1119,7 +1109,7 @@ class EnhancedChangesList extends ChangesList {
                $r = Html::openElement( 'table', array( 'class' => $classes ) ) .
                        Html::openElement( 'tr' );
 
-               $r .= '<td class="mw-enhanced-rc">' . $this->spacerArrow();
+               $r .= '<td class="mw-enhanced-rc"><span class="mw-enhancedchanges-arrow mw-enhancedchanges-arrow-space"></span>';
                # Flag and Timestamp
                if( $type == RC_MOVE || $type == RC_MOVE_OVER_REDIRECT ) {
                        $r .= '&#160;&#160;&#160;&#160;'; // 4 flags -> 4 spaces

diff --git a/resources/mediawiki.special/images/arrow-collapsed-ltr.png b/resources/mediawiki.special/images/arrow-collapsed-ltr.png
new file mode 100644 (file)
index 0000000..467a555
Binary files /dev/null and b/resources/mediawiki.special/images/arrow-collapsed-ltr.png differ

diff --git a/resources/mediawiki.special/images/arrow-collapsed-rtl.png b/resources/mediawiki.special/images/arrow-collapsed-rtl.png
new file mode 100644 (file)
index 0000000..f49e20a
Binary files /dev/null and b/resources/mediawiki.special/images/arrow-collapsed-rtl.png differ

diff --git a/resources/mediawiki.special/images/arrow-expanded.png b/resources/mediawiki.special/images/arrow-expanded.png
new file mode 100644 (file)
index 0000000..58a9fc6
Binary files /dev/null and b/resources/mediawiki.special/images/arrow-expanded.png differ

diff --git a/resources/mediawiki.special/mediawiki.special.changeslist.css b/resources/mediawiki.special/mediawiki.special.changeslist.css
index 42afbcd..cdc9704 100644 (file)
--- a/resources/mediawiki.special/mediawiki.special.changeslist.css
+++ b/resources/mediawiki.special/mediawiki.special.changeslist.css
@@ -31,20 +31,29 @@ table.mw-enhanced-rc td.mw-enhanced-rc-nested {
        float: none;
 }
 
-/**
- * If JS is disabled, the arrow is still needed
- * for spacing, but ideally shouldn't be shown
- */
-.mw-enhanced-rc .mw-rc-openarrow {
-       visibility: hidden;
+/* If JS is disabled, the arrow shouldn't be shown */
+.client-nojs .mw-enhancedchanges-arrow.mw-collapsible-toggle {
+       display: none;
 }
 
-.mw-enhanced-rc.mw-made-collapsible .mw-rc-openarrow,
-.mw-enhanced-rc .mw-rc-closearrow {
-       visibility: visible;
-       display: none;
+.mw-enhancedchanges-arrow {
+       display: inline-block;
+       *display: inline; /* IE7 and below */
+       zoom: 1;
+       width: 15px;
+       height: 15px;
 }
-.mw-enhanced-rc.mw-made-collapsible .mw-collapsible-toggle-collapsed .mw-rc-openarrow,
-.mw-enhanced-rc.mw-made-collapsible .mw-collapsible-toggle-expanded .mw-rc-closearrow {
-       display: inline;
+
+.mw-enhancedchanges-arrow.mw-enhancedchanges-arrow-space {
+       background: none;
+}
+
+.mw-enhancedchanges-arrow.mw-collapsible-toggle-collapsed {
+       /* @embed */
+       background: url(images/arrow-collapsed-ltr.png) no-repeat left center;
+}
+
+.mw-enhancedchanges-arrow.mw-collapsible-toggle-expanded {
+       /* @embed */
+       background: url(images/arrow-expanded.png) no-repeat left center;
 }