Merge "Revert "Sticky header edit button A/B test bucketing""

resources/skins.vector.es6/main.js

@@ -71,65 +71,26 @@ const main = () => {
 		allowedAction &&
 		'IntersectionObserver' in window;
 
-	/**
+	const isExperimentEnabled =
-	 * Initialize sticky header AB tests and determine whether to show the sticky header
+		!!ABTestConfig.enabled &&
-	 * based on which buckets the user is in.
+		ABTestConfig.name === stickyHeader.STICKY_HEADER_EXPERIMENT_NAME &&
-	 *
+		!mw.user.isAnon() &&
-	 * @typedef {Object} InitStickyHeaderABTests
+		isStickyHeaderAllowed;
-	 * @property {boolean} disableEditIcons - Should the sticky header have an edit icon
-	 * @property {boolean} showStickyHeader - Should the sticky header be shown
-	 * @return {InitStickyHeaderABTests}
-	 */
-	function initStickyHeaderABTests() {
 
-		let show = isStickyHeaderAllowed,
+	// If necessary, initialize experiment and fire the A/B test enrollment hook.
-			stickyHeaderExperiment,
+	const stickyHeaderExperiment = isExperimentEnabled &&
-			noEditIcons = true;
+		initExperiment( Object.assign( {}, ABTestConfig, { token: mw.user.getId() } ) );
-
-		// Determine if user is eligible for sticky header AB test
-		if (
-			isStickyHeaderAllowed && // The sticky header can be shown on the page
-			ABTestConfig.enabled && // An AB test config is enabled
-			!mw.user.isAnon() && // The user is logged-in
-			( // One of the sticky-header AB tests is specified in the config
-				ABTestConfig.name === stickyHeader.STICKY_HEADER_EXPERIMENT_NAME ||
-				ABTestConfig.name === 'vector.sticky_header_edit'
-			)
-		) {
-			// If eligible, initialize the AB test
-			stickyHeaderExperiment = initExperiment(
-				Object.assign( {}, ABTestConfig, { token: mw.user.getId() } )
-			);
-
-			// If running initial AB test, only show sticky header to treatment group.
-			if ( stickyHeaderExperiment.name === stickyHeader.STICKY_HEADER_EXPERIMENT_NAME ) {
-				show = stickyHeaderExperiment.isInTreatmentBucket();
-			}
-
-			// If running edit-button AB test, show sticky header to all buckets
-			// and show edit button for treatment group
-			if ( stickyHeaderExperiment.name === 'vector.sticky_header_edit' ) {
-				show = true;
-				if ( stickyHeaderExperiment.isInTreatmentBucket() ) {
-					noEditIcons = false;
-				}
-			}
-		}
-
-		return {
-			showStickyHeader: show,
-			disableEditIcons: noEditIcons
-		};
-	}
-
-	const { showStickyHeader, disableEditIcons } = initStickyHeaderABTests();
 
 	// Remove class if present on the html element so that scroll padding isn't undesirably
 	// applied to users who don't experience the new treatment.
-	if ( !showStickyHeader ) {
+	if ( stickyHeaderExperiment && !stickyHeaderExperiment.isInTreatmentBucket() ) {
 		document.documentElement.classList.remove( 'vector-sticky-header-enabled' );
 	}
 
+	const isStickyHeaderEnabled = stickyHeaderExperiment ?
+		stickyHeaderExperiment.isInTreatmentBucket() :
+		isStickyHeaderAllowed;
+
 	// Table of contents
 	const tocElement = document.getElementById( TOC_ID );
 	const tocElementLegacy = document.getElementById( TOC_ID_LEGACY );
@@ -138,26 +99,25 @@ const main = () => {
 	// Set up intersection observer for page title, used by sticky header
 	const observer = scrollObserver.initScrollObserver(
 		() => {
-			if ( isStickyHeaderAllowed && showStickyHeader ) {
+			if ( isStickyHeaderAllowed && isStickyHeaderEnabled ) {
 				stickyHeader.show();
 			}
 			scrollObserver.fireScrollHook( 'down', PAGE_TITLE_SCROLL_HOOK );
 		},
 		() => {
-			if ( isStickyHeaderAllowed && showStickyHeader ) {
+			if ( isStickyHeaderAllowed && isStickyHeaderEnabled ) {
 				stickyHeader.hide();
 			}
 			scrollObserver.fireScrollHook( 'up', PAGE_TITLE_SCROLL_HOOK );
 		}
 	);
 
-	if ( isStickyHeaderAllowed && showStickyHeader ) {
+	if ( isStickyHeaderAllowed && isStickyHeaderEnabled ) {
 		stickyHeader.initStickyHeader( {
 			header,
 			userMenu,
 			observer,
-			stickyIntersection,
+			stickyIntersection
-			disableEditIcons
 		} );
 	} else if ( stickyIntersection ) {
 		observer.observe( stickyIntersection );

resources/skins.vector.es6/stickyHeader.js

@@ -212,7 +212,6 @@ function prepareEditIcons(
 	if ( !primaryEditSticky || !wikitextSticky || !protectedSticky ) {
 		return;
 	}
-
 	if ( !primaryEdit ) {
 		removeNode( protectedSticky );
 		removeNode( wikitextSticky );
@@ -344,15 +343,13 @@ function prepareUserMenu( userMenu ) {
  * @param {Element} userMenuStickyContainer
  * @param {IntersectionObserver} stickyObserver
  * @param {Element} stickyIntersection
- * @param {boolean} disableEditIcons
  */
 function makeStickyHeaderFunctional(
 	header,
 	userMenu,
 	userMenuStickyContainer,
 	stickyObserver,
-	stickyIntersection,
+	stickyIntersection
-	disableEditIcons
 ) {
 	const
 		userMenuStickyContainerInner = userMenuStickyContainer
@@ -373,9 +370,7 @@ function makeStickyHeaderFunctional(
 	const ceEdit = document.querySelector( '#ca-edit a' );
 	const protectedEdit = document.querySelector( '#ca-viewsource a' );
 	const isProtected = !!protectedEdit;
-	// For sticky header edit A/B test, conditionally remove the edit icon by setting null.
+	const primaryEdit = protectedEdit || ( veEdit || ceEdit );
-	// Otherwise, use either protected, ve, or source edit (in that order).
-	const primaryEdit = disableEditIcons ? null : protectedEdit || veEdit || ceEdit;
 	const secondaryEdit = veEdit ? ceEdit : null;
 	const disableStickyHeader = () => {
 		document.body.classList.remove( STICKY_HEADER_VISIBLE_CLASS );
@@ -439,7 +434,6 @@ function isAllowedAction( action ) {
  * @property {Element} userMenu
  * @property {IntersectionObserver} observer
  * @property {Element} stickyIntersection
- * @property {boolean} disableEditIcons
  */
 
 /**
@@ -455,8 +449,7 @@ function initStickyHeader( props ) {
 		props.userMenu,
 		userMenuStickyContainer,
 		props.observer,
-		props.stickyIntersection,
+		props.stickyIntersection
-		props.disableEditIcons
 	);
 
 	setupSearchIfNeeded( props.header );