Fix debugger tabs (encode/decode) on mobile screens.

Author: sebadoom

src/website/dom-elements.js

@@ -15,6 +15,12 @@ export const codeElements = document.querySelectorAll('.plain-text pre code');
 
 export const debuggerSection = document.getElementById('debugger-io');
 
+export const encodedTabLink = 
+  document.querySelector('.tab-link a[href="#encoded-jwt"]');
+export const decodedTabLink = 
+  document.querySelector('.tab-link a[href="#decoded-jwt"]');
+export const encodedTabElement = document.getElementById('encoded-jwt');
+export const decodedTabElement = document.getElementById('decoded-jwt');
 export const editorElement = document.querySelector('#encoded-jwt .input');
 export const decodedElement = document.querySelector('#decoded-jwt .output');
 export const headerElement = document.querySelector('.js-header');

src/website/editor/index.js

@@ -27,7 +27,11 @@ import {
   rsaShaTextSpan,
   keyEditorContainer,
   secretEditorContainer,
-  secretBase64Checkbox
+  secretBase64Checkbox,
+  encodedTabLink,
+  decodedTabLink,
+  encodedTabElement,
+  decodedTabElement
 } from '../dom-elements.js';
 
 // The event manager lets us enable/disable events as needed without
@@ -273,6 +277,28 @@ function verifyToken() {
   }
 }
 
+function setupTabEvents() {
+  // These are relevant for portrait or mobile screens.
+  
+  encodedTabLink.addEventListener('click', event => {
+    event.preventDefault();
+
+    decodedTabLink.parentNode.classList.remove('current');
+    encodedTabLink.parentNode.classList.add('current');
+    decodedTabElement.classList.remove('current');
+    encodedTabElement.classList.add('current');
+  });
+
+  decodedTabLink.addEventListener('click', event => {
+    event.preventDefault();
+
+    encodedTabLink.parentNode.classList.remove('current');
+    decodedTabLink.parentNode.classList.add('current');
+    encodedTabElement.classList.remove('current');
+    decodedTabElement.classList.add('current');
+  });
+}
+
 function setupEvents() {
   // The event manager lets us enable/disable events as needed without
   // manually tracking them. Events that need to be disabled should be
@@ -301,6 +327,8 @@ function setupEvents() {
   payloadElement.addEventListener('mousemove', tooltipHandler);
   // Temporary (share button not ready yet)
   signatureStatusElement.addEventListener('click', copyTokenLink);
+
+  setupTabEvents();
 }
 
 export function setTokenEditorValue(value) {