Merge branch 'main' into repo-sync

Author: Octomerger

javascripts/experiment.js

@@ -1,5 +1,6 @@
 import murmur from 'imurmurhash'
 import { getUserEventsId, sendEvent } from './events'
+import toggleImages from './toggle-images'
 // import h from './hyperscript'
 
 const TREATMENT = 'TREATMENT'
@@ -20,11 +21,23 @@ 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 () {
-  // *** 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)
+  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()
 }

javascripts/index.js

@@ -41,7 +41,7 @@ document.addEventListener('DOMContentLoaded', async () => {
   airgapLinks()
   releaseNotes()
   initializeEvents()
-  experiment()
   helpfulness()
   toggleImages()
+  experiment()
 })

javascripts/toggle-images.js

@@ -1,17 +1,13 @@
-// 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'
 
 /*
  * 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 () {
+export default function (hideImagesByDefault = false, focusButtonByDefault = false) {
   const toggleImagesBtn = document.getElementById('js-toggle-images')
   if (!toggleImagesBtn) return
 
@@ -25,7 +21,9 @@ export default function () {
   toggleImagesBtn.removeAttribute('hidden')
 
   // Look for a cookie with image visibility preference; otherwise, use the default.
-  const hideImagesPreferred = (Cookies.get('hideImagesPreferred') === 'true') || hideImagesByDefault
+  const hideImagesPreferred = Cookies.get('hideImagesPreferred') === 'false'
+    ? false
+    : Cookies.get('hideImagesPreferred') === 'true' || hideImagesByDefault
 
   // Hide the images if that is the preference.
   if (hideImagesPreferred) {
@@ -42,10 +40,18 @@ export default function () {
 
   // 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)
   }
 
@@ -69,16 +75,14 @@ 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)
+    Cookies.set('hideImagesPreferred', showOnNextClick, { sameSite: 'strict', secure: true })
 
     // Toggle the action on every click.
     showOnNextClick = !showOnNextClick
-
-    // TODO Track image toggle events
-    // sendEvent({ type: 'imageToggle' })
   })
 }