From f770a5b9a20fc1873291d07c38e8eabfba0f6a30 Mon Sep 17 00:00:00 2001 From: Sarah Schneider Date: Thu, 29 Apr 2021 12:16:12 -0400 Subject: [PATCH 1/3] Revert "Image toggle button AB test" --- javascripts/experiment.js | 25 ++++++------------------- javascripts/index.js | 2 +- javascripts/toggle-images.js | 26 +++++++++++--------------- 3 files changed, 18 insertions(+), 35 deletions(-) diff --git a/javascripts/experiment.js b/javascripts/experiment.js index fed4befb5c..9a090665bb 100644 --- a/javascripts/experiment.js +++ b/javascripts/experiment.js @@ -1,6 +1,5 @@ import murmur from 'imurmurhash' import { getUserEventsId, sendEvent } from './events' -import toggleImages from './toggle-images' // import h from './hyperscript' const TREATMENT = 'TREATMENT' @@ -21,23 +20,11 @@ export function sendSuccess (test) { }) } -function applyTreatment () { - // Treatment-specific options. - const hideImagesByDefault = true - const focusButtonByDefault = true - - // Run toggleImages a second time on each page, but with treatment defaults. - toggleImages(hideImagesByDefault, focusButtonByDefault) -} - export default function () { - const testName = 'toggle-images' - const xbucket = bucket(testName) - - const toggleImagesBtn = document.getElementById('js-toggle-images') - if (!toggleImagesBtn) return - - toggleImagesBtn.addEventListener('click', () => { sendSuccess(testName) }) - - if (xbucket === TREATMENT) applyTreatment() + // *** Example test code *** + // const testName = '$test-name$' + // const xbucket = bucket(testName) + // const x = document.querySelector(...) + // x.addEventListener('click', () => { sendSuccess(testName) }) + // if (xbucket === TREATMENT) applyTreatment(x) } diff --git a/javascripts/index.js b/javascripts/index.js index 2a53cc4e34..d0ef8efce6 100644 --- a/javascripts/index.js +++ b/javascripts/index.js @@ -41,7 +41,7 @@ document.addEventListener('DOMContentLoaded', async () => { airgapLinks() releaseNotes() initializeEvents() + experiment() helpfulness() toggleImages() - experiment() }) diff --git a/javascripts/toggle-images.js b/javascripts/toggle-images.js index b47d6d72c3..2c40d505b7 100644 --- a/javascripts/toggle-images.js +++ b/javascripts/toggle-images.js @@ -1,5 +1,9 @@ +// import { sendEvent } from './events' import Cookies from 'js-cookie' +// Determines whether images are hidden or displayed on first visit. +const hideImagesByDefault = false + // Set the image placeholder icon here. const placeholderImagePath = '/assets/images/octicons/image.svg' @@ -7,7 +11,7 @@ const placeholderImagePath = '/assets/images/octicons/image.svg' * This module adds a new icon button in the margin to toggle all images on the page. * It uses cookies to keep track of a user's selected image preference. */ -export default function (hideImagesByDefault = false, focusButtonByDefault = false) { +export default function () { const toggleImagesBtn = document.getElementById('js-toggle-images') if (!toggleImagesBtn) return @@ -21,9 +25,7 @@ export default function (hideImagesByDefault = false, focusButtonByDefault = fal toggleImagesBtn.removeAttribute('hidden') // Look for a cookie with image visibility preference; otherwise, use the default. - const hideImagesPreferred = Cookies.get('hideImagesPreferred') === 'false' - ? false - : Cookies.get('hideImagesPreferred') === 'true' || hideImagesByDefault + const hideImagesPreferred = (Cookies.get('hideImagesPreferred') === 'true') || hideImagesByDefault // Hide the images if that is the preference. if (hideImagesPreferred) { @@ -40,18 +42,10 @@ export default function (hideImagesByDefault = false, focusButtonByDefault = fal // Set the starting state depending on user preferences. if (hideImagesPreferred) { - onIcon.setAttribute('hidden', true) offIcon.removeAttribute('hidden') toggleImagesBtn.setAttribute('aria-label', tooltipImagesOff) - - // Show the tooltip if images are hidden by default to help users see the toggle button. - // Downside: the button will begin with focus whenever the user goes to a new page. - if (focusButtonByDefault) { - toggleImagesBtn.focus({ preventScroll: true }) - } } else { onIcon.removeAttribute('hidden') - offIcon.setAttribute('hidden', true) toggleImagesBtn.setAttribute('aria-label', tooltipImagesOn) } @@ -75,14 +69,16 @@ export default function (hideImagesByDefault = false, focusButtonByDefault = fal } // Remove focus from the button after click so the tooltip does not stay displayed. - // Use settimeout to work around Firefox-specific issue. - setTimeout(() => { toggleImagesBtn.blur() }, 100) + toggleImagesBtn.blur() // Save this preference as a cookie. - Cookies.set('hideImagesPreferred', showOnNextClick, { sameSite: 'strict', secure: true }) + Cookies.set('hideImagesPreferred', showOnNextClick) // Toggle the action on every click. showOnNextClick = !showOnNextClick + + // TODO Track image toggle events + // sendEvent({ type: 'imageToggle' }) }) } From cb54ce72efb9ce226a7e5be2ded5ef0bdd12feae Mon Sep 17 00:00:00 2001 From: Sarah Schneider Date: Thu, 29 Apr 2021 15:20:01 -0400 Subject: [PATCH 2/3] Update javascripts/toggle-images.js --- javascripts/toggle-images.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/javascripts/toggle-images.js b/javascripts/toggle-images.js index 2c40d505b7..337c6848fc 100644 --- a/javascripts/toggle-images.js +++ b/javascripts/toggle-images.js @@ -72,7 +72,7 @@ export default function () { toggleImagesBtn.blur() // Save this preference as a cookie. - Cookies.set('hideImagesPreferred', showOnNextClick) + Cookies.set('hideImagesPreferred', showOnNextClick, { sameSite: 'strict', secure: true }) // Toggle the action on every click. showOnNextClick = !showOnNextClick From 9722f2e8ebab2353e4680320e7175fd07c4f72ba Mon Sep 17 00:00:00 2001 From: Sarah Schneider Date: Thu, 29 Apr 2021 15:20:09 -0400 Subject: [PATCH 3/3] Update javascripts/toggle-images.js --- javascripts/toggle-images.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/javascripts/toggle-images.js b/javascripts/toggle-images.js index 337c6848fc..cb309b1f35 100644 --- a/javascripts/toggle-images.js +++ b/javascripts/toggle-images.js @@ -69,7 +69,8 @@ export default function () { } // Remove focus from the button after click so the tooltip does not stay displayed. - toggleImagesBtn.blur() + // Use settimeout to work around Firefox-specific issue. + setTimeout(() => { toggleImagesBtn.blur() }, 100) // Save this preference as a cookie. Cookies.set('hideImagesPreferred', showOnNextClick, { sameSite: 'strict', secure: true })