jenkins-bot has submitted this change and it was merged.
Change subject: Avoid repaints for table of contents.
......................................................................
Avoid repaints for table of contents.
Using MobileFormatter always add a table of contents placeholder
Hide table of contents in mobile mode
In tablet mode use visibility to leave space for a
table of contents to load.
Table of contents starts collapsed
Bug: T126836
Change-Id: I86e054eadc5f5f7bcc87b7de977785e629245b29
---
M includes/MobileFormatter.php
M minerva.less/minerva.variables.less
M resources/mobile.toc/toc.less
M resources/mobile.toggle/toggle.js
M resources/skins.minerva.base.styles/common.less
M resources/skins.minerva.tablet.scripts/toc.js
M resources/skins.minerva.tablet.styles/common.less
M resources/skins.minerva.tablet.styles/hacks.less
M tests/phpunit/MobileFormatterTest.php
9 files changed, 67 insertions(+), 41 deletions(-)
Approvals:
Bmansurov: Looks good to me, approved
jenkins-bot: Verified
diff --git a/includes/MobileFormatter.php b/includes/MobileFormatter.php
index eed34b8..fddf9a7 100644
--- a/includes/MobileFormatter.php
+++ b/includes/MobileFormatter.php
@@ -394,6 +394,16 @@
}
// Insert the previous section body and reset
it for the new section
$body->insertBefore( $sectionBody, $node );
+
+ if ( $sectionNumber === 0 ) {
+ // Insert table of content placeholder
which will be progressively enhanced via JS
+ $toc = $doc->createElement( 'div' );
+ $toc->setAttribute( 'id', 'toc' );
+ $toc->setAttribute( 'class',
'toc-mobile' );
+ $tocHeading = $doc->createElement(
'h2', wfMessage( 'toc' )->text() );
+ $toc->appendChild( $tocHeading );
+ $sectionBody->appendChild( $toc );
+ }
$sectionNumber += 1;
$sectionBody = $doc->createElement( 'div' );
$sectionBody->setAttribute( 'class',
'mf-section-' . $sectionNumber );
diff --git a/minerva.less/minerva.variables.less
b/minerva.less/minerva.variables.less
index dcc7813..213ebf3 100644
--- a/minerva.less/minerva.variables.less
+++ b/minerva.less/minerva.variables.less
@@ -109,5 +109,7 @@
@z-indexOverlay: 1;
@z-indexOverOverlay: 2;
+// table of contents
+@tocFontSize: .8em;
// indicators
@indicatorFontSize: .4em;
diff --git a/resources/mobile.toc/toc.less b/resources/mobile.toc/toc.less
index 209f0dc..1d437ed 100644
--- a/resources/mobile.toc/toc.less
+++ b/resources/mobile.toc/toc.less
@@ -4,19 +4,11 @@
@paddingHorizontal: 24px;
@iconSize: 16px;
@iconHeadingGap: 12px;
-@paddingVertical: 1.4em;
-@fontSize: .8em;
-
+@fontSize: @tocFontSize;
.client-js .toc-mobile {
- position: relative;
- // FIXME: Use predefined colors?
background-color: @colorGray15;
border: solid 1px @grayLightest;
- font-size: 1.3em;
- float: left;
- clear: left;
- margin: 1em 0;
.toc-button {
float: left;
@@ -25,12 +17,8 @@
}
.collapsible-heading {
- font-family: @fontFamily;
- font-size: @fontSize;
+ visibility: visible;
background-position: right center;
- font-weight: bold;
- padding: @paddingVertical / 2 0;
- border-bottom: none;
// Override rules for section toggler
// In table of contents the collapsing caret is on the right
diff --git a/resources/mobile.toggle/toggle.js
b/resources/mobile.toggle/toggle.js
index 6772b7d..72f02af 100644
--- a/resources/mobile.toggle/toggle.js
+++ b/resources/mobile.toggle/toggle.js
@@ -13,14 +13,11 @@
* A class for enabling toggling
*
* @class
- * @param {jQuery.Object} $container to apply toggling to
- * @param {String} prefix a prefix to use for the id.
- * @param {Page} [page] to allow storage of session for future visits
* @extends OO.EventEmitter
*/
- function Toggler( $container, prefix, page ) {
+ function Toggler() {
OO.EventEmitter.call( this );
- this._enable( $container, prefix, page );
+ this._enable.apply( this, arguments );
}
OO.mixinClass( Toggler, OO.EventEmitter );
@@ -213,9 +210,11 @@
* @param {jQuery.Object} $container to apply toggling to
* @param {String} prefix a prefix to use for the id.
* @param {Page} [page] to allow storage of session for future visits
+ * @param {Page} [isClosed] whether the element should begin closed
* @private
+ * @constructor
*/
- Toggler.prototype._enable = function ( $container, prefix, page ) {
+ Toggler.prototype._enable = function ( $container, prefix, page,
isClosed ) {
var tagName, expandSections, indicator,
$firstHeading,
self = this,
@@ -279,7 +278,7 @@
} );
enableKeyboardActions( self, $heading );
- if ( browser.isWideScreen() || expandSections )
{
+ if ( !isClosed && browser.isWideScreen() ||
expandSections ) {
// Expand sections by default on wide
screen devices or if the expand sections setting is set
self.toggle.call( self, $heading );
}
diff --git a/resources/skins.minerva.base.styles/common.less
b/resources/skins.minerva.base.styles/common.less
index 82f593b..8c1d416 100644
--- a/resources/skins.minerva.base.styles/common.less
+++ b/resources/skins.minerva.base.styles/common.less
@@ -51,8 +51,10 @@
resize: none;
}
-// For Minerva desktop
-#toc,
+
+// We hide the table of contents unless the user is viewing in tablet
resolution or higher
+.client-nojs .toc-mobile,
+.toc-mobile,
.client-js .no-js-only,
// FIXME: Use generic rule for print stylesheets
.printfooter,
diff --git a/resources/skins.minerva.tablet.scripts/toc.js
b/resources/skins.minerva.tablet.scripts/toc.js
index 4035965..328e9a8 100644
--- a/resources/skins.minerva.tablet.scripts/toc.js
+++ b/resources/skins.minerva.tablet.scripts/toc.js
@@ -22,6 +22,7 @@
sections: sections
} );
+ toggle = new Toggler( toc.$el, 'toc-', null, true );
// if there is a toc already, replace it
if ( $toc.length > 0 ) {
// don't show toc at end of page, when no
sections there
@@ -30,7 +31,6 @@
// otherwise append it to the lead section
toc.appendTo( page.getLeadSectionElement() );
}
- toggle = new Toggler( toc.$el, 'toc-' );
}
}
diff --git a/resources/skins.minerva.tablet.styles/common.less
b/resources/skins.minerva.tablet.styles/common.less
index bacc6da..8892cda 100644
--- a/resources/skins.minerva.tablet.styles/common.less
+++ b/resources/skins.minerva.tablet.styles/common.less
@@ -4,9 +4,30 @@
@import "minerva.variables";
@import "minerva.mixins";
-
+@paddingVertical: 1.4em;
@media all and (min-width: @deviceWidthTablet) {
+ .toc-mobile {
+ // Reset the rule for mobile mode (but not for .client-nojs)
+ display: block;
+ visibility: visible;
+ position: relative;
+ font-size: 1.3em;
+ float: left;
+ clear: left;
+ margin: 1em 0 0 0;
+ border: solid 1px transparent;
+
+ > h2 {
+ visibility: hidden;
+ font-family: @fontFamily;
+ font-size: @tocFontSize;
+ font-weight: bold;
+ border-bottom: none;
+ padding: @paddingVertical / 2 0;
+ }
+ }
+
.content_block {
width: auto;
clear: none;
diff --git a/resources/skins.minerva.tablet.styles/hacks.less
b/resources/skins.minerva.tablet.styles/hacks.less
index b335383..0b4e1f3 100644
--- a/resources/skins.minerva.tablet.styles/hacks.less
+++ b/resources/skins.minerva.tablet.styles/hacks.less
@@ -11,7 +11,6 @@
@import "minerva.variables";
@import "minerva.mixins";
-
/* Tablet specific styling */
@media all and (min-width: @deviceWidthTablet) {
// Float infoboxes to the right of the page
diff --git a/tests/phpunit/MobileFormatterTest.php
b/tests/phpunit/MobileFormatterTest.php
index d731e90..4b073a2 100644
--- a/tests/phpunit/MobileFormatterTest.php
+++ b/tests/phpunit/MobileFormatterTest.php
@@ -1,10 +1,10 @@
<?php
-
/**
* @group MobileFrontend
*/
class MobileFormatterTest extends MediaWikiTestCase {
const SECTION_INDICATOR = '<div class="mw-ui-icon mw-ui-icon-element
indicator"></div>';
+ const TOC_HTML = '<div id="toc"
class="toc-mobile"><h2>Contents</h2></div>';
/**
* @dataProvider provideHtmlTransform
@@ -58,7 +58,7 @@
array(
'<p>' . $originalImage . '</p><h2>heading
1</h2><p>text</p>'
. '<h2>heading 2</h2>abc',
- '<div class="mf-section-0"><p>' .
$originalImage . '</p></div>'
+ '<div class="mf-section-0"><p>' .
$originalImage . '</p>' . self::TOC_HTML . '</div>'
. '<h2 class="section-heading">' .
self::SECTION_INDICATOR
. 'heading 1</h2>'
. '<div
class="mf-section-1"><p>text</p>'
@@ -72,7 +72,7 @@
array(
'<p>text</p><h2>heading 1</h2><p>text</p>' .
$originalImage
. '<h2>heading 2</h2>abc',
- '<div class="mf-section-0"><p>text</p></div>'
+ '<div class="mf-section-0"><p>text</p>' .
self::TOC_HTML . '</div>'
. '<h2 class="section-heading">' .
self::SECTION_INDICATOR
. 'heading 1</h2>'
. '<div
class="mf-section-1"><p>text</p>'
@@ -88,7 +88,7 @@
array(
'<p>text</p><h2>heading 1</h2><p>text</p>' .
$originalImage
.'<h2>heading 2</h2>' . $originalImage,
- '<div class="mf-section-0"><p>text</p></div>'
+ '<div class="mf-section-0"><p>text</p>' .
self::TOC_HTML . '</div>'
. '<h2 class="section-heading">' .
self::SECTION_INDICATOR . 'heading 1</h2>'
. '<div
class="mf-section-1"><p>text</p>'
. $noscript
@@ -142,7 +142,7 @@
'<h2><span class="mw-headline"
id="Forty-niners">Forty-niners</span>'
. '<a class="edit-page"
href="#editor/2">Edit</a></h2>'
. $longLine,
- '<div class="mf-section-0"></div>'
+ '<div class="mf-section-0">' . self::TOC_HTML .
'</div>'
. '<h2 class="section-heading">' .
self::SECTION_INDICATOR
. '<span class="mw-headline"
id="Forty-niners">Forty-niners</span>'
. '<a class="edit-page"
href="#editor/2">Edit</a></h2>'
@@ -155,7 +155,7 @@
. $longLine
. '<h4><span>h4</span></h4>'
. 'h4 text.',
- '<div class="mf-section-0"></div>'
+ '<div class="mf-section-0">' . self::TOC_HTML .
'</div>'
. '<h3 class="section-heading">' .
self::SECTION_INDICATOR
. '<span>h3</span></h3>'
. '<div class="mf-section-1">'
@@ -169,7 +169,7 @@
array(
'<h6><span>h6</span></h6>'
. $longLine,
- '<div class="mf-section-0"></div>'
+ '<div class="mf-section-0">' . self::TOC_HTML .
'</div>'
. '<h6 class="section-heading">' .
self::SECTION_INDICATOR
. '<span>h6</span></h6>'
. '<div class="mf-section-1">' .
$longLine . '</div>',
@@ -180,7 +180,7 @@
'<h2><span class="mw-headline"
id="History"><span id="Overview"></span>'
. 'History</span><a class="edit-page"
href="#editor/2">Edit</a></h2>'
. $longLine,
- '<div class="mf-section-0"></div><h2
class="section-heading">'
+ '<div class="mf-section-0">' . self::TOC_HTML .
'</div><h2 class="section-heading">'
. self::SECTION_INDICATOR
. '<span class="mw-headline" id="History"><span
id="Overview"></span>'
. 'History</span><a class="edit-page"
href="#editor/2">Edit</a></h2>'
@@ -253,7 +253,8 @@
array(
array( 'h1', 'h2' ),
'<h1>Foo</h1><h2>Bar</h2>',
- '<div class="mf-section-0"></div><h1
class="section-heading">' . self::SECTION_INDICATOR
+ '<div class="mf-section-0">' . self::TOC_HTML
+ . '</div><h1 class="section-heading">'
. self::SECTION_INDICATOR
. 'Foo</h1>'
. '<div class="mf-section-1"><h2
class="in-block">Bar</h2></div>',
),
@@ -263,7 +264,8 @@
array(
array( 'h1', 'h2' ),
'<h1>Foo</h1><h2 class="baz">Bar</h2>',
- '<div class="mf-section-0"></div><h1
class="section-heading">' . self::SECTION_INDICATOR
+ '<div class="mf-section-0">' . self::TOC_HTML
+ . '</div><h1 class="section-heading">'
. self::SECTION_INDICATOR
. 'Foo</h1><div class="mf-section-1">'
. '<h2 class="baz
in-block">Bar</h2></div>',
),
@@ -272,7 +274,8 @@
array(
array( 'h1', 'h2', 'h3' ),
'<h1>Foo</h1><h2>Bar</h2><h3>Qux</h3>',
- '<div class="mf-section-0"></div><h1
class="section-heading">' . self::SECTION_INDICATOR
+ '<div class="mf-section-0">' . self::TOC_HTML
+ . '</div><h1 class="section-heading">'
. self::SECTION_INDICATOR
. 'Foo</h1><div class="mf-section-1">'
. '<h2 class="in-block">Bar</h2><h3
class="in-block">Qux</h3></div>',
),
@@ -282,7 +285,8 @@
array(
array( 'h1', 'h2', 'h3' ),
'<h2>Bar</h2><h3>Qux</h3>',
- '<div class="mf-section-0"></div><h2
class="section-heading">' . self::SECTION_INDICATOR
+ '<div class="mf-section-0">' . self::TOC_HTML
+ . '</div><h2 class="section-heading">'
. self::SECTION_INDICATOR
. 'Bar</h2><div class="mf-section-1">'
. '<h3 class="in-block">Qux</h3></div>',
),
@@ -291,7 +295,8 @@
array(
array( 'h1', 'h2' ),
'<h1>Foo</h1><h2>Bar</h2>A',
- '<div class="mf-section-0"></div><h1
class="section-heading">' . self::SECTION_INDICATOR
+ '<div class="mf-section-0">' . self::TOC_HTML
+ . '</div><h1 class="section-heading">'
. self::SECTION_INDICATOR
. 'Foo</h1><div class="mf-section-1">'
. '<h2
class="in-block">Bar</h2>A</div>',
),
@@ -303,7 +308,7 @@
array(
array( 'h1', 'h2' ),
'A<h1>Foo</h1><h2>Bar</h2>',
- '<div class="mf-section-0"><p>A</p></div>'
+ '<div class="mf-section-0"><p>A</p>' .
self::TOC_HTML . '</div>'
. '<h1 class="section-heading">' .
self::SECTION_INDICATOR
. 'Foo</h1><div class="mf-section-1">'
. '<h2 class="in-block">Bar</h2></div>',
@@ -313,7 +318,7 @@
array(
array( 'h1', 'h2' ),
'<h1>Foo</h1><h2>Bar</h2>Baz<h1>Qux</h1>Quux',
- '<div class="mf-section-0"></div>'
+ '<div class="mf-section-0">' . self::TOC_HTML .
'</div>'
. '<h1 class="section-heading">' .
self::SECTION_INDICATOR
.'Foo</h1><div class="mf-section-1">'
. '<h2
class="in-block">Bar</h2>Baz</div>'
--
To view, visit https://gerrit.wikimedia.org/r/279562
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I86e054eadc5f5f7bcc87b7de977785e629245b29
Gerrit-PatchSet: 11
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
Gerrit-Reviewer: Bmansurov <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
