simplify/generalize close-on-esc

edit.html

@@ -213,7 +213,7 @@
     </template>
 
     <template data-id="keymapHelp">
-      <table class="keymap-list can-close-on-esc">
+      <table class="keymap-list">
         <thead>
           <tr>
             <th><input i18n="placeholder:helpKeyMapHotkey" type="search"></th>

edit/settings.html

@@ -1,5 +1,5 @@
 <div>
-  <fieldset class="style-settings can-close-on-esc">
+  <fieldset class="style-settings">
     <div class="rel">
       <input id="ss-updatable" type="checkbox">
       <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>

edit/util.js

@@ -29,35 +29,32 @@ const helpPopup = {
     div.style.display = 'block';
     helpPopup.originalFocus = document.activeElement;
     helpPopup.div = div;
+    moveFocus(div, 0);
     return div;
   },
 
   close(event) {
+    let el;
     const canClose =
       !event ||
-      event.type === 'click' || (
-        getEventKeyName(event) === 'Escape' &&
-        !$('.CodeMirror-hints, #message-box') && (
-          !document.activeElement ||
-          !document.activeElement.closest('#search-replace-dialog') && (
-            document.activeElement.tagName !== 'INPUT' ||
-            document.activeElement.closest('.can-close-on-esc')
-          )
-        )
+      event.type === 'click' ||
+      getEventKeyName(event) === 'Escape' && !$('.CodeMirror-hints, #message-box') && (
+        !(el = document.activeElement) ||
+        !el.closest('#search-replace-dialog')
       );
     const {div} = helpPopup;
     if (!canClose || !div) {
       return;
     }
-    if (event && div.codebox && !div.codebox.options.readOnly && !div.codebox.isClean()) {
+    if (event && (el = div.codebox) && !el.options.readOnly && !el.isClean()) {
       setTimeout(async () => {
         const ok = await messageBoxProxy.confirm(t('confirmDiscardChanges'));
         return ok && helpPopup.close();
       });
       return;
     }
-    if (div.contains(document.activeElement) && helpPopup.originalFocus) {
-      helpPopup.originalFocus.focus();
+    if (div.contains(document.activeElement) && (el = helpPopup.originalFocus)) {
+      el.focus();
     }
     const contents = $('.contents', div);
     div.style.display = '';

js/dlg/message-box.js

@@ -64,10 +64,6 @@ messageBox.show = async ({
       /config-dialog/.test(className)) {
     moveFocus(messageBox.element, 1);
   }
-  // suppress focus outline when invoked via click
-  if (focusAccessibility.lastFocusedViaClick && document.activeElement) {
-    document.activeElement.dataset.focusedViaClick = '';
-  }
   if (document.activeElement === messageBox._originalFocus) {
     document.body.focus();
   }

js/dom.js

@@ -268,6 +268,8 @@ function moveFocus(rootElement, step) {
     const el = elements[(activeIndex + i * step + num) % num];
     if (!el.disabled && el.tabIndex >= 0) {
       el.focus();
+      // suppress focus outline when invoked via click
+      toggleDataset(el, 'focusedViaClick', focusAccessibility.lastFocusedViaClick);
       return activeEl !== el && el;
     }
   }