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",