make showCodeMirrorPopup modal

closes #437

edit/edit.js

@@ -7,6 +7,7 @@ global setupCodeMirror
 global beautify
 global initWithSectionStyle addSections removeSection getSectionsHashes
 global sectionsToMozFormat
+global moveFocus
 */
 'use strict';
 
@@ -606,16 +607,29 @@ function showCodeMirrorPopup(title, html, options) {
     keyMap: prefs.get('editor.keyMap')
   }, options));
   cm.focus();
-  const rerouteOn = () => cm.rerouteHotkeys(false);
-  const rerouteOff = () => cm.rerouteHotkeys(true);
-  cm.on('focus', rerouteOn);
-  cm.on('blur', rerouteOff);
+  cm.rerouteHotkeys(false);
+
+  document.documentElement.style.pointerEvents = 'none';
+  popup.style.pointerEvents = 'auto';
+
+  const onKeyDown = event => {
+    if (event.which === 9 && !event.ctrlKey && !event.altKey && !event.metaKey) {
+      const search = $('#search-replace-dialog');
+      const area = search && search.contains(document.activeElement) ? search : popup;
+      moveFocus(area, event.shiftKey ? -1 : 1);
+      event.preventDefault();
+    }
+  };
+  window.addEventListener('keydown', onKeyDown, true);
+
   window.addEventListener('closeHelp', function _() {
     window.removeEventListener('closeHelp', _);
-    cm.off('focus', rerouteOn);
-    cm.off('blur', rerouteOff);
+    window.removeEventListener('keydown', onKeyDown, true);
+    document.documentElement.style.removeProperty('pointer-events');
+    cm.rerouteHotkeys(true);
     cm = popup.codebox = null;
   });
+
   return popup;
 }
 

edit/global-search.js

@@ -565,6 +565,7 @@ onDOMready().then(() => {
     Object.assign(dialog, DIALOG_PROPS.dialog);
     dialog.addEventListener('focusout', EVENTS.onfocusout);
     dialog.dataset.type = type;
+    dialog.style.pointerEvents = 'auto';
 
     const content = $('[data-type="content"]', dialog);
     content.parentNode.replaceChild(template[type].cloneNode(true), content);

js/dom.js

@@ -355,3 +355,23 @@ function focusAccessibility() {
     }
   }
 }
+
+/**
+ * Switches to the next/previous keyboard-focusable element
+ * @param {HTMLElement} rootElement
+ * @param {Number} step - for exmaple 1 or -1
+ */
+function moveFocus(rootElement, step) {
+  const elements = [...rootElement.getElementsByTagName('*')];
+  const activeIndex = Math.max(0, elements.indexOf(document.activeElement));
+  const num = elements.length;
+  for (let i = 1; i < num; i++) {
+    const elementIndex = (activeIndex + i * step + num) % num;
+    // we don't use positive tabindex so we stop at any valid value
+    const el = elements[elementIndex];
+    if (!el.disabled && el.tabIndex >= 0) {
+      el.focus();
+      return;
+    }
+  }
+}

msgbox/msgbox.js

@@ -1,4 +1,5 @@
 /* global focusAccessibility */
+/* global moveFocus */
 'use strict';
 
 /**
@@ -33,7 +34,7 @@ function messageBox({
   document.body.appendChild(messageBox.element);
 
   messageBox.originalFocus = document.activeElement;
-  moveFocus(1);
+  moveFocus(messageBox.element, 1);
 
   if (typeof onshow === 'function') {
     onshow(messageBox.element);
@@ -67,7 +68,7 @@ function messageBox({
             event.stopPropagation();
             break;
           case 9:
-            moveFocus(shiftKey ? -1 : 1);
+            moveFocus(messageBox.element, shiftKey ? -1 : 1);
             event.preventDefault();
             return;
           default:
@@ -139,21 +140,6 @@ function messageBox({
     messageBox.element = null;
     messageBox.resolve = null;
   }
-
-  function moveFocus(dir) {
-    const elements = [...messageBox.element.getElementsByTagName('*')];
-    const activeIndex = Math.max(0, elements.indexOf(document.activeElement));
-    const num = elements.length;
-    for (let i = 1; i < num; i++) {
-      const elementIndex = (activeIndex + i * dir + num) % num;
-      // we don't use positive tabindex so we stop at any valid value
-      const el = elements[elementIndex];
-      if (!el.disabled && el.tabIndex >= 0) {
-        el.focus();
-        return;
-      }
-    }
-  }
 }
 
 /**