more things made focusable

* mozilla-format (i) icon
* showHelp() restores original focus
* showHelp's nested confirmation is debounced to enable focusing Yes/No
* RegExp tester tab URLs are focusable now

edit.html

@@ -207,8 +207,8 @@
         </div>
         <div id="mozilla-format-container">
           <h2 id="mozilla-format-heading" i18n-text="styleMozillaFormatHeading">
-            <a class="svg-inline-wrapper" href="#">
+            <a id="to-mozilla-help" class="svg-inline-wrapper" href="#">
-              <svg id="to-mozilla-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+              <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
             </a>
           </h2>
           <button id="from-mozilla" i18n-text="importLabel"></button>

edit/edit.css

@@ -377,7 +377,7 @@ html:not(.usercss) .applies-to li:last-child .add-applies-to {
 .has-regexp .test-regexp {
   display: inline-block;
 }
-.regexp-report summary, .regexp-report div {
+.regexp-report summary {
   cursor: pointer;
 }
 .regexp-report mark {
@@ -414,11 +414,17 @@ html:not(.usercss) .applies-to li:last-child .add-applies-to {
   position: absolute;
   margin-top: -1px;
 }
-.regexp-report details div:hover {
+.regexp-report details a {
+  color: inherit;
+  text-decoration: none;
+  display: block;
+  cursor: pointer;
+}
+.regexp-report details a:hover {
   text-decoration: underline;
   text-decoration-skip: ink;
 }
-.regexp-report details div img {
+.regexp-report details a img {
   width: 16px;
   max-height: 16px;
   position: absolute;

edit/edit.js

@@ -516,23 +516,16 @@ function showToggleStyleHelp(event) {
 function showHelp(title = '', body) {
   const div = $('#help-popup');
   div.className = '';
+
   const contents = $('.contents', div);
   contents.textContent = '';
   if (body) {
     contents.appendChild(typeof body === 'string' ? tHTML(body) : body);
   }
+
   $('.title', div).textContent = title;
 
-  if (getComputedStyle(div).display === 'none') {
+  showHelp.close = showHelp.close || (event => {
-    window.addEventListener('keydown', closeHelp, true);
-    // avoid chaining on multiple showHelp() calls
-    $('.dismiss', div).onclick = closeHelp;
-  }
-  // reset any inline styles
-  div.style = 'display: block';
-  return div;
-
-  function closeHelp(event) {
     const canClose =
       !event ||
       event.type === 'click' ||
@@ -549,16 +542,32 @@ function showHelp(title = '', body) {
       return;
     }
     if (event && div.codebox && !div.codebox.options.readOnly && !div.codebox.isClean()) {
-      messageBox.confirm(t('confirmDiscardChanges')).then(ok => ok && closeHelp());
+      setTimeout(() => {
+        messageBox.confirm(t('confirmDiscardChanges'))
+          .then(ok => ok && showHelp.close());
+      });
       return;
     }
+    if (div.contains(document.activeElement) && showHelp.originalFocus) {
+      showHelp.originalFocus.focus();
+    }
     div.style.display = '';
     contents.textContent = '';
     clearTimeout(contents.timer);
-    window.removeEventListener('keydown', closeHelp, true);
+    window.removeEventListener('keydown', showHelp.close, true);
     window.dispatchEvent(new Event('closeHelp'));
-    (editors.lastActive || editors[0]).focus();
+  });
+
+  if (getComputedStyle(div).display === 'none') {
+    window.addEventListener('keydown', showHelp.close, true);
+    $('.dismiss', div).onclick = showHelp.close;
   }
+
+  // reset any inline styles
+  div.style = 'display: block';
+
+  showHelp.originalFocus = document.activeElement;
+  return div;
 }
 
 function showCodeMirrorPopup(title, html, options) {

edit/regexp-tester.js

@@ -110,12 +110,12 @@ var regExpTester = (() => {
             : GET_FAVICON_URL + new URL(url).hostname;
           const icon = $create('img', {src: faviconUrl});
           if (match.text.length === url.length) {
-            full.push($create('div', [
+            full.push($create('a', {href: '#'}, [
               icon,
               url,
             ]));
           } else {
-            partial.push($create('div', [
+            partial.push($create('a', {href: '#'}, [
               icon,
               url.substr(0, match.pos),
               $create('mark', match.text),
@@ -161,25 +161,32 @@ var regExpTester = (() => {
         }
       }
       showHelp(t('styleRegexpTestTitle'), report);
+      report.onclick = onClick;
 
       const note = $create('p.regexp-report-note',
         t('styleRegexpTestNote')
           .split(/(\\+)/)
           .map(s => (s.startsWith('\\') ? $create('code', s) : s)));
       report.appendChild(note);
-      report.style.paddingBottom = note.offsetHeight + 'px';
+      adjustNote(report, note);
+    });
 
-      report.onclick = event => {
+    function onClick(event) {
-        const target = event.target.closest('a, .regexp-report div');
+      const a = event.target.closest('a');
-        if (target) {
+      if (a) {
+        event.preventDefault();
         openURL({
-            url: target.href || target.textContent,
+          url: a.href && a.getAttribute('href') !== '#' && a.href || a.textContent,
           currentWindow: null,
         });
-          event.preventDefault();
+      } else if (event.target.closest('details')) {
+        setTimeout(adjustNote);
+      }
+    }
+
+    function adjustNote(report, note) {
+      report.style.paddingBottom = note.offsetHeight + 'px';
     }
-      };
-    });
   }
 
   return {toggle, update};