diff --git a/README.md b/README.md index c6c7013..10b8d4b 100644 --- a/README.md +++ b/README.md @@ -101,4 +101,18 @@ Whether to show the language switcher button even if no languages are available * Type: `Boolean` * Default: `true` +#### $wgMinervaABSamplingRate + +On a scale of 0 to 1, determines the chance a user has of entering an AB test. +A test is divided into 3 buckets, "control" "A" and "B". Users that are selected for the +test have an equal chance of entering bucket "A" or "B", the remaining users fall into the +"control" bucket and are excluded from the test. + +1 - would run test on 100% of users (50% in A and 50% in B, 0 in control). +0.5 - would run test on 50% of users (25% in A, 25% in B, 50% in control). +0.05 - would run test on 5% of users (2.5% in A, 2.5% in B, 95% in control). +0 would disable the test and place all users in "control". + +* Type: `Number` +* Default: `0` diff --git a/i18n/en.json b/i18n/en.json index 7ff6548..9f74fb0 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -56,6 +56,7 @@ "mobile-frontend-user-page-uploads": "Uploads", "skinname-minerva": "MinervaNeue", "minerva-skin-desc": "A responsive mobile first skin", + "skin-minerva-issue-learn-more": "Learn more", "skin-minerva-mobile-option-MinervaShowCategoriesButton": "Categories", "skin-minerva-mobile-option-MinervaShowCategoriesButton-description": "View categories of pages", "skin-minerva-mobile-option-MinervaEnableBackToTop": "Jump to top", diff --git a/i18n/qqq.json b/i18n/qqq.json index fe1a92f..d4f89ed 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -66,6 +66,7 @@ "skinname-minerva": "{{name}}", "minerva-skin-desc": "{{desc|name=Minerva Neue|url=https://www.mediawiki.org/wiki/Skin:Minerva_Neue|what=skin}}", "skin-minerva-mobile-option-MinervaShowCategoriesButton": "Label for categories mobile web beta feature.\n{{Identical|Category}}", + "skin-minerva-issue-learn-more": "Label for link that allows expanding of ambox issue templates.", "skin-minerva-mobile-option-MinervaShowCategoriesButton-description": "Description label for categories mobile web beta feature.", "skin-minerva-mobile-option-MinervaEnableBackToTop": "Label for jump to top mobile web beta feature", "skin-minerva-mobile-option-MinervaEnableBackToTop-description": "Description label for jump to top mobile web beta feature", diff --git a/includes/skins/SkinMinerva.php b/includes/skins/SkinMinerva.php index d6ebb0f..254afe7 100644 --- a/includes/skins/SkinMinerva.php +++ b/includes/skins/SkinMinerva.php @@ -1271,6 +1271,7 @@ class SkinMinerva extends SkinTemplate implements ICustomizableSkin { 'wgMinervaDownloadNamespaces' => $this->getConfig()->get( 'MinervaDownloadNamespaces' ), 'wgMinervaMenuData' => $this->getMenuData(), 'wgMFDescription' => $out->getProperty( 'wgMFDescription' ), + 'wgMinervaABSamplingRate' => $this->getConfig()->get( 'MinervaABSamplingRate' ) ]; if ( $this->isAuthenticatedUser() ) { diff --git a/resources/skins.minerva.content.styles/hacks.less b/resources/skins.minerva.content.styles/hacks.less index 772a513..51b13bd 100644 --- a/resources/skins.minerva.content.styles/hacks.less +++ b/resources/skins.minerva.content.styles/hacks.less @@ -11,6 +11,7 @@ FIXME: Review all of these hacks to see if they still apply. */ @import '../../minerva.less/minerva.variables'; @import '../../minerva.less/minerva.mixins'; +@import 'templates/ambox.less'; .collapsible td { width: auto !important; @@ -27,11 +28,9 @@ FIXME: Review all of these hacks to see if they still apply. .action-edit .fmbox, // Talk page informational boxes .tmbox, - // Note not in issues.less as that is only loaded via JavaScript - .ambox, #coordinates, // Hide article badges, clean-up notices, stub notices, and navigation boxes - .topicon, .metadata { + .topicon { // It's important as some of these are tables which become display: table on larger screens display: none !important; } diff --git a/resources/skins.minerva.content.styles/templates/ambox.less b/resources/skins.minerva.content.styles/templates/ambox.less new file mode 100644 index 0000000..f0f6787 --- /dev/null +++ b/resources/skins.minerva.content.styles/templates/ambox.less @@ -0,0 +1,92 @@ +/** + * Ambox classes are nested in a top-level class + * for the page issues A/B test. + * This class is appended to the DOM via JS + **/ + +// Since group-b is display none, this will not impact group-b but will avoid FOUC for group a +@min-height-ambox: 40px; + +.ambox, +// Be more specific than .content table styles in Minerva +table.ambox { + display: none; +} + +// Will show FOUC on mobile +.issues-group-B { + .ambox { + display: block; + } +} + +.client-js .ambox { + cursor: pointer; + // Avoid the height changing when the learn more link is inserted. + min-height: @min-height-ambox; + margin: 0 !important; + font-size: 0.8em; + width: 100%; + background: @colorGray15; + color: @colorGray5; + + // Certain templates e.g. Template:Expand Russian wrap content in this element + // We'll want to apply min-height here too. + .mbox-text-span { + min-height: @min-height-ambox; + } + + // Wrestle with inline styles that editors may place on elements inside the ambox + div { + // e.g. on mw-collapsible inside Multiple issues template + margin: 0 !important; + // e.g. on Template:Expand Russian + padding: 0 !important; + } + + td { + position: relative; + padding: 8px 8px 8px 32px; + } + + // All text should be treated the same + b { + font-weight: inherit; + } + + // Hide links in new treatment + a { + color: inherit !important; + &:hover { + text-decoration: none; + } + } + + small, + .hide-when-compact, + // Template:Expand Russian + .mw-collapsible-content, + // Remove empty leftmost column when present (.mbox-empty-cell) + // and .verbose and any hr tags that might be present in the ambox + // See https://en.wikipedia.org/w/index.php? + // title=Special:WhatLinksHere/Template:Proposed_deletion_notify + // (https://phabricator.wikimedia.org/T197265) + .mbox-empty-cell, + hr, + .verbose, + // nested amboxes (multiple issues) + table, + .mbox-image { + display: none; + } + + .mw-ui-icon { + position: absolute; + left: -8px; + } + + .ambox-learn-more { + color: @linkColor; + display: inline-block; + } +} diff --git a/resources/skins.minerva.icons.images/warning.svg b/resources/skins.minerva.icons.images/warning.svg new file mode 100644 index 0000000..53c5d5b --- /dev/null +++ b/resources/skins.minerva.icons.images/warning.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/skins.minerva.scripts/cleanuptemplates.js b/resources/skins.minerva.scripts/cleanuptemplates.js index c9a934c..8f9c87f 100644 --- a/resources/skins.minerva.scripts/cleanuptemplates.js +++ b/resources/skins.minerva.scripts/cleanuptemplates.js @@ -1,4 +1,11 @@ ( function ( M, $ ) { + var AB = M.require( 'skins.minerva.scripts/AB' ), + isInGroupB = new AB( + 'WME.PageIssuesAB', + mw.config.get( 'wgMinervaABSamplingRate', 0 ), + mw.user.sessionId() + ).getBucket() === 'B', + Icon = M.require( 'mobile.startup/Icon' ); ( function () { var action = mw.config.get( 'wgAction' ), @@ -60,14 +67,14 @@ * @ignore */ function createBanner( $container, labelText, headingText ) { - var selector = 'table.ambox, table.tmbox, table.cmbox, table.fmbox', + var $learnMore, + selector = 'table.ambox, table.tmbox, table.cmbox, table.fmbox', $metadata = $container.find( selector ), issues = [], $link; // clean it up a little $metadata.find( '.NavFrame' ).remove(); - $metadata.each( function () { var issue, $this = $( this ); @@ -78,8 +85,33 @@ } } ); - $link = createLinkElement( labelText ); - $link.attr( 'href', '#/issues' ); + if ( isInGroupB ) { + new Icon( { + glyphPrefix: 'minerva', + name: 'warning', + isSmall: true + } ).prependTo( '.mbox-text' ); + $learnMore = $( '' ) + .addClass( 'ambox-learn-more' ) + .text( mw.msg( 'skin-minerva-issue-learn-more' ) ); + if ( $( '.mw-collapsible-content' ).length ) { + // e.g. Template:Multiple issues + $learnMore.insertBefore( '.mw-collapsible-content' ); + } else { + // e.g. Template:merge from + $learnMore.appendTo( '.mbox-text-span' ); + } + $( '.mbox-text' ).click( function () { + overlayManager.router.navigate( '#/issues' ); + } ); + } else { + $link = createLinkElement( labelText ); + $link.attr( 'href', '#/issues' ); + if ( $metadata.length ) { + $link.insertAfter( $( 'h1#section_0' ) ); + $metadata.remove(); + } + } overlayManager.add( /^\/issues$/, function () { return new CleanupOverlay( { @@ -87,12 +119,6 @@ headingText: headingText } ); } ); - - if ( $metadata.length ) { - $link.insertAfter( $( 'h1#section_0' ) ); - - $metadata.remove(); - } } /** @@ -103,9 +129,11 @@ function initPageIssues() { var ns = mw.config.get( 'wgNamespaceNumber' ), // Categories have no lead section - $container = ns === 14 ? $( '#bodyContent' ) : + $container = ns === 14 || isInGroupB ? $( '#bodyContent' ) : page.getLeadSectionElement(); + // set A-B test class. + $( 'html' ).addClass( isInGroupB ? 'issues-group-B' : 'issues-group-A' ); if ( action === 'edit' ) { $container = $( '#mw-content-text' ); } else if ( $container === null ) { diff --git a/skin.json b/skin.json index 695ce28..7fbd9f1 100644 --- a/skin.json +++ b/skin.json @@ -33,7 +33,8 @@ "prefix": "skin-minerva-", "base": false, "beta": true - } + }, + "MinervaABSamplingRate": 0 }, "ValidSkinNames": { "minerva": "MinervaNeue" @@ -217,6 +218,7 @@ "class": "ResourceLoaderImageModule", "selector": ".mw-ui-icon-minerva-{name}:before", "images": { + "warning": "resources/skins.minerva.icons.images/warning.svg", "mainmenu": "resources/skins.minerva.icons.images/hamburger.svg", "edit": "resources/skins.minerva.icons.images/editLocked.svg", "edit-enabled": "resources/skins.minerva.icons.images/edit.svg", @@ -359,6 +361,7 @@ "mediawiki.experiments" ], "messages": [ + "skin-minerva-issue-learn-more", "edithelp", "mobile-frontend-language-change", "mobile-frontend-meta-data-issues",