cmd/present: use unique key for destSlide in local store

We use a 'destSlide' entry in the local storage to keep presentation
and notes in sync while using '-notes' flag. This caused a name
collision if we had different presentations open at the same time.

This changes the 'destSlide' key in local storage to
'destSlide:<presentation-url>' to avoid collisions between different
presentations.

Fixes golang/go#24688

Change-Id: I4833fa83856a96b5978c09ed7e4360484ba4f109
Reviewed-on: https://go-review.googlesource.com/c/tools/+/178659
Reviewed-by: Andrew Bonventre <andybons@golang.org>

cmd/present/static/notes.js

@@ -26,22 +26,24 @@ function toggleNotesWindow() {
   initNotes();
 };
 
+// Create an unique key for the local storage so we don't mix the
+// destSlide of different presentations. For golang.org/issue/24688.
+function destSlideKey() {
+  var key = '';
+  if (notesWindow) {
+    var slides = notesWindow.document.getElementById('presenter-slides');
+    key = slides.src.split('#')[0];
+  } else {
+    key = window.location.href.split('#')[0];
+  }
+  return 'destSlide:' + key;
+}
+
 function initNotes() {
   notesWindow = window.open('', '', 'width=1000,height=700');
   var w = notesWindow;
   var slidesUrl = window.location.href;
 
-  var curSlide = parseInt(localStorage.getItem('destSlide'), 10);
-  var formattedNotes = '';
-  var section = sections[curSlide - 1];
-  // curSlide is 0 when initialized from the first page of slides.
-  // Check if section is valid before retrieving Notes.
-  if (section) {
-    formattedNotes = formatNotes(section.Notes);
-  } else if (curSlide == 0) {
-    formattedNotes = formatNotes(titleNotes);
-  }
-
   // Hack to apply css. Requires existing html on notesWindow.
   w.document.write("<div style='display:none;'></div>");
 
@@ -51,6 +53,18 @@ function initNotes() {
   slides.id = 'presenter-slides';
   slides.src = slidesUrl;
   w.document.body.appendChild(slides);
+
+  var curSlide = parseInt(localStorage.getItem(getDestSlideKey()), 10);
+  var formattedNotes = '';
+  var section = sections[curSlide - 1];
+  // curSlide is 0 when initialized from the first page of slides.
+  // Check if section is valid before retrieving Notes.
+  if (section) {
+    formattedNotes = formatNotes(section.Notes);
+  } else if (curSlide == 0) {
+    formattedNotes = formatNotes(titleNotes);
+  }
+
   // setTimeout needed for Firefox
   setTimeout(function() {
     slides.focus();
@@ -93,7 +107,7 @@ function updateNotes() {
   // When triggered from parent window, notesWindow is null
   // The storage event listener on notesWindow will update notes
   if (!notesWindow) return;
-  var destSlide = parseInt(localStorage.getItem('destSlide'), 10);
+  var destSlide = parseInt(localStorage.getItem(getDestSlideKey()), 10);
   var section = sections[destSlide - 1];
   var el = notesWindow.document.getElementById('presenter-notes');
 
@@ -103,7 +117,7 @@ function updateNotes() {
     el.innerHTML = formatNotes(section.Notes);
   } else if (destSlide == 0) {
     el.innerHTML = formatNotes(titleNotes);
-  }  else {
+  } else {
     el.innerHTML = '';
   }
 };
@@ -115,47 +129,47 @@ function updateNotes() {
 var playgroundHandlers = {onRun: [], onKill: [], onClose: []};
 
 function updatePlay(e) {
-	var i = localStorage.getItem('play-index');
+  var i = localStorage.getItem('play-index');
 
-	switch (e.key) {
+  switch (e.key) {
-		case 'play-index':
+    case 'play-index':
-			return;
+      return;
-		case 'play-action':
+    case 'play-action':
-			// Sync 'run', 'kill', 'close' actions
+      // Sync 'run', 'kill', 'close' actions
-			var action = localStorage.getItem('play-action');
+      var action = localStorage.getItem('play-action');
-			playgroundHandlers[action][i](e);
+      playgroundHandlers[action][i](e);
-			return;
+      return;
-		case 'play-code':
+    case 'play-code':
-			// Sync code editing
+      // Sync code editing
-			var play = document.querySelectorAll('div.playground')[i];
+      var play = document.querySelectorAll('div.playground')[i];
-			play.innerHTML = localStorage.getItem('play-code');
+      play.innerHTML = localStorage.getItem('play-code');
-			return;
+      return;
-		case 'output-style':
+    case 'output-style':
-			// Sync resizing of playground output
+      // Sync resizing of playground output
-			var out = document.querySelectorAll('.output')[i];
+      var out = document.querySelectorAll('.output')[i];
-			out.style = localStorage.getItem('output-style');
+      out.style = localStorage.getItem('output-style');
-			return;
+      return;
-	}
+  }
 };
 
 // Reset 'run', 'kill', 'close' storage items when synced
 // so that successive actions can be synced correctly
 function updatePlayStorage(action, index, e) {
-	localStorage.setItem('play-index', index);
+  localStorage.setItem('play-index', index);
 
-	if (localStorage.getItem('play-action') === action) {
+  if (localStorage.getItem('play-action') === action) {
-		// We're the receiving window, and the message has been received
+    // We're the receiving window, and the message has been received
-		localStorage.removeItem('play-action');
+    localStorage.removeItem('play-action');
-	} else {
+  } else {
-		// We're the triggering window, send the message
+    // We're the triggering window, send the message
-		localStorage.setItem('play-action', action);
+    localStorage.setItem('play-action', action);
-	}
+  }
 
-	if (action === 'onRun') {
+  if (action === 'onRun') {
-		if (localStorage.getItem('play-shiftKey') === 'true') {
+    if (localStorage.getItem('play-shiftKey') === 'true') {
-			localStorage.removeItem('play-shiftKey');
+      localStorage.removeItem('play-shiftKey');
-		} else if (e.shiftKey) {
+    } else if (e.shiftKey) {
-			localStorage.setItem('play-shiftKey', e.shiftKey);
+      localStorage.setItem('play-shiftKey', e.shiftKey);
-		}
+    }
-	}
+  }
 };

cmd/present/static/slides.js

@@ -212,7 +212,7 @@ function prevSlide() {
     updateSlides();
   }
 
-  if (notesEnabled) localStorage.setItem('destSlide', curSlide);
+  if (notesEnabled) localStorage.setItem(destSlideKey(), curSlide);
 };
 
 function nextSlide() {
@@ -223,7 +223,7 @@ function nextSlide() {
     updateSlides();
   }
 
-  if (notesEnabled) localStorage.setItem('destSlide', curSlide);
+  if (notesEnabled) localStorage.setItem(destSlideKey(), curSlide);
 };
 
 /* Slide events */
@@ -602,7 +602,7 @@ function setupNotesSync() {
 
   setupPlayCodeSync();
   setupPlayResizeSync();
-  localStorage.setItem('destSlide', curSlide);
+  localStorage.setItem(destSlideKey(), curSlide);
   window.addEventListener('storage', updateOtherWindow, false);
 }
 
@@ -613,7 +613,7 @@ function updateOtherWindow(e) {
   var isRemoveStorageEvent = !e.newValue;
   if (isRemoveStorageEvent) return;
 
-  var destSlide = localStorage.getItem('destSlide');
+  var destSlide = localStorage.getItem(destSlideKey());
   while (destSlide > curSlide) {
     nextSlide();
   }