Jdlrobson has uploaded a new change for review. https://gerrit.wikimedia.org/r/279562
Change subject: WIP: Avoid repaints for table of contents. ...................................................................... WIP: 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 an uncollapsed table of contents to load. Bug: T126836 Change-Id: I86e054eadc5f5f7bcc87b7de977785e629245b29 --- M includes/MobileFormatter.php M minerva.less/minerva.variables.less M resources/mobile.toc/TableOfContents.js 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 9 files changed, 51 insertions(+), 24 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend refs/changes/62/279562/1 diff --git a/includes/MobileFormatter.php b/includes/MobileFormatter.php index 913822b..7124ef8 100644 --- a/includes/MobileFormatter.php +++ b/includes/MobileFormatter.php @@ -390,6 +390,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 d04f4ca..d21a4cf 100644 --- a/minerva.less/minerva.variables.less +++ b/minerva.less/minerva.variables.less @@ -111,5 +111,7 @@ @z-indexOverlay: 4; @z-indexOverOverlay: 5; +// table of contents +@tocFontSize: .8em; // indicators @indicatorFontSize: .4em; diff --git a/resources/mobile.toc/TableOfContents.js b/resources/mobile.toc/TableOfContents.js index 2cdd17e..7830449 100644 --- a/resources/mobile.toc/TableOfContents.js +++ b/resources/mobile.toc/TableOfContents.js @@ -33,6 +33,7 @@ contentsMsg: mw.msg( 'toc' ) }, tagName: 'div', + isBorderBox: false, className: 'toc-mobile', template: mw.template.get( 'mobile.toc', 'toc.hogan' ), events: { diff --git a/resources/mobile.toc/toc.less b/resources/mobile.toc/toc.less index 209f0dc..3e1d7cb 100644 --- a/resources/mobile.toc/toc.less +++ b/resources/mobile.toc/toc.less @@ -4,19 +4,10 @@ @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 +16,11 @@ } .collapsible-heading { - font-family: @fontFamily; - font-size: @fontSize; + visibility: visible; + // FIXME: Use predefined colors? + background-color: @colorGray15; + border: solid 1px @grayLightest; 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 32aecf7..52035f4 100644 --- a/resources/mobile.toggle/toggle.js +++ b/resources/mobile.toggle/toggle.js @@ -16,11 +16,12 @@ * @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 {Boolean} [isClosed] whether the element should begin closed * @extends OO.EventEmitter */ - function Toggler( $container, prefix, page ) { + function Toggler( $container, prefix, page, isClosed ) { OO.EventEmitter.call( this ); - this._enable( $container, prefix, page ); + this._enable.apply( this, arguments ); } OO.mixinClass( Toggler, OO.EventEmitter ); @@ -215,7 +216,7 @@ * @param {Page} [page] to allow storage of session for future visits * @private */ - Toggler.prototype._enable = function ( $container, prefix, page ) { + Toggler.prototype._enable = function ( $container, prefix, page, isClosed ) { var tagName, expandSections, indicator, $firstHeading, self = this, @@ -271,7 +272,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..4c11261 100644 --- a/resources/skins.minerva.base.styles/common.less +++ b/resources/skins.minerva.base.styles/common.less @@ -51,8 +51,6 @@ resize: none; } -// For Minerva desktop -#toc, .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..bf3da2a 100644 --- a/resources/skins.minerva.tablet.scripts/toc.js +++ b/resources/skins.minerva.tablet.scripts/toc.js @@ -10,7 +10,7 @@ * @ignore */ function init( page ) { - var toc, toggle, + var toc, sections = page.getSections(), $toc = $( '#toc' ), enableToc = mw.config.get( 'wgMinervaTocEnabled' ); @@ -22,6 +22,9 @@ sections: sections } ); + // setup toggling before appending to DOM + 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 +33,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 1336f94..f13a998 100644 --- a/resources/skins.minerva.tablet.styles/common.less +++ b/resources/skins.minerva.tablet.styles/common.less @@ -4,9 +4,33 @@ @import "minerva.variables"; @import "minerva.mixins"; +@paddingVertical: 1.4em; +.toc-mobile { + display: none; +} @media all and (min-width: @deviceWidthTablet) { + .toc-mobile { + display: block; + visibility: visible; + position: relative; + border-width: 1px; + font-size: 1.3em; + float: left; + clear: left; + margin: 1em 0; + + > 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 -- To view, visit https://gerrit.wikimedia.org/r/279562 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I86e054eadc5f5f7bcc87b7de977785e629245b29 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/MobileFrontend Gerrit-Branch: master Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits