diff --git a/edit/edit.css b/edit/edit.css
index 80bc4874..3e01ee86 100644
--- a/edit/edit.css
+++ b/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;
diff --git a/edit/edit.js b/edit/edit.js
index 3d4196da..8f0f25ec 100644
--- a/edit/edit.js
+++ b/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') {
- 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) {
+ showHelp.close = showHelp.close || (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) {
diff --git a/edit/regexp-tester.js b/edit/regexp-tester.js
index 8da9854c..09c4125d 100644
--- a/edit/regexp-tester.js
+++ b/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';
-
- report.onclick = event => {
- const target = event.target.closest('a, .regexp-report div');
- if (target) {
- openURL({
- url: target.href || target.textContent,
- currentWindow: null,
- });
- event.preventDefault();
- }
- };
+ adjustNote(report, note);
});
+
+ function onClick(event) {
+ const a = event.target.closest('a');
+ if (a) {
+ event.preventDefault();
+ openURL({
+ url: a.href && a.getAttribute('href') !== '#' && a.href || a.textContent,
+ currentWindow: null,
+ });
+ } else if (event.target.closest('details')) {
+ setTimeout(adjustNote);
+ }
+ }
+
+ function adjustNote(report, note) {
+ report.style.paddingBottom = note.offsetHeight + 'px';
+ }
}
return {toggle, update};