diff --git a/edit/edit.css b/edit/edit.css
index aee7065b..55f04eea 100644
--- a/edit/edit.css
+++ b/edit/edit.css
@@ -735,7 +735,7 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high
#help-popup .rules p {
margin: .25em 0;
}
-#help-popup button {
+#help-popup .buttons button {
margin-right: 3px;
}
diff --git a/edit/moz-section-widget.js b/edit/moz-section-widget.js
index e1f79a12..d53d4257 100644
--- a/edit/moz-section-widget.js
+++ b/edit/moz-section-widget.js
@@ -202,7 +202,7 @@ function MozSectionWidget(cm, finder = MozSectionFinder(cm)) {
color: ${fore};
}
${C_CONTAINER} input,
- ${C_CONTAINER} button,
+ ${C_CONTAINER} button:not(.fake),
${C_CONTAINER} select {
background: rgba(255, 255, 255, ${
Math.max(MIN_LUMA, Math.pow(Math.max(0, color.gutter.bgLuma - MIN_LUMA * 2), 2)).toFixed(2)
diff --git a/edit/regexp-tester.js b/edit/regexp-tester.js
index 621eb724..328e2be8 100644
--- a/edit/regexp-tester.js
+++ b/edit/regexp-tester.js
@@ -96,12 +96,12 @@ const regexpTester = (() => {
: GET_FAVICON_URL + new URL(url).hostname;
const icon = $create('img', {src: faviconUrl});
if (match.text.length === url.length) {
- full.push($create('a', {href: '#'}, [
+ full.push($create('button.fake', [
icon,
url,
]));
} else {
- partial.push($create('a', {href: '#'}, [
+ partial.push($create('button.fake', [
icon,
url.substr(0, match.pos),
$create('mark', match.text),
@@ -154,24 +154,18 @@ const regexpTester = (() => {
.split(/(\\+)/)
.map(s => (s.startsWith('\\') ? $create('code', s) : s)));
report.appendChild(note);
- adjustNote(report, note);
+ report.style.paddingBottom = note.offsetHeight + 'px';
},
};
- function adjustNote(report, note) {
- report.style.paddingBottom = note.offsetHeight + 'px';
- }
-
function onClick(event) {
- const a = event.target.closest('a');
+ const a = event.target.closest('a, button');
if (a) {
event.preventDefault();
openURL({
- url: a.href && a.getAttribute('href') !== '#' && a.href || a.textContent,
+ url: a.href || a.textContent,
currentWindow: null,
});
- } else if (event.target.closest('details')) {
- setTimeout(adjustNote);
}
}
diff --git a/global.css b/global.css
index 77489a74..46999524 100644
--- a/global.css
+++ b/global.css
@@ -15,7 +15,7 @@ body:lang(zh-HK) {
font-family: Arial, 'Microsoft JhengHei UI', 'Microsoft JhengHei', system-ui, sans-serif;
}
-button {
+button:not(.fake) {
-webkit-appearance: none;
-moz-appearance: none;
user-select: none;
@@ -35,12 +35,12 @@ button {
transition: background-color .25s, border-color .25s;
}
-button:not(:disabled):hover {
+button:not(.fake):not(:disabled):hover {
background-color: hsl(0, 0%, 95%);
border-color: hsl(0, 0%, 52%);
}
-button:active {
+button:not(.fake):active {
background-color: hsl(0, 0%, 95%);
border-color: hsl(0, 0%, 52%);
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QwJARIWJNZvuQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAMElEQVQI12NoaGgIZmJgYPjLxMDA8I+JgYHhP5z1Dy7xH5X7jxQCzWQ0A9DEILYBABm5HtJk2jPHAAAAAElFTkSuQmCC');
@@ -48,8 +48,20 @@ button:active {
background-size: 100% 100%;
}
+.fake { /* must be a single simple selector so its specificity loses to anything declared afterwards */
+ all: unset;
+ cursor: pointer;
+ box-sizing: border-box;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+}
+.fake[hidden] {
+ display: none;
+}
+
/* For some odd reason these hovers appear lighter than all other button hovers in every browser */
-#message-box-buttons button:not(:disabled):hover {
+#message-box-buttons button:not(.fake):not(:disabled):hover {
background-color: hsl(0, 0%, 90%);
border-color: hsl(0, 0%, 50%);
}
@@ -274,12 +286,12 @@ input[type="number"][data-focused-via-click]:focus {
}
/* Firefox cannot handle fractions in font-size */
- .firefox button:not(.install) {
+ .firefox button:not(.fake):not(.install) {
line-height: 13px;
padding: 3px 7px;
}
- .firefox.moz-appearance-bug button:not(.install) {
+ .firefox.moz-appearance-bug button:not(.fake):not(.install) {
padding: 2px 4px;
}
}
diff --git a/js/dlg/config-dialog.js b/js/dlg/config-dialog.js
index acd5c5e2..2a84a73f 100644
--- a/js/dlg/config-dialog.js
+++ b/js/dlg/config-dialog.js
@@ -71,7 +71,7 @@ async function configDialog(style) {
}
function onshow(box) {
- $('button', box).insertAdjacentElement('afterend',
+ $('#message-box-buttons button').after(
$create('label#config-autosave-wrapper', {
title: t('configOnChangeTooltip'),
}, [
@@ -215,7 +215,7 @@ async function configDialog(style) {
function buildConfigForm() {
let resetter =
- $create('a.config-reset-icon', {href: '#'}, [
+ $create('button.fake.config-reset-icon', [
$create('SVG:svg.svg-icon', {viewBox: '0 0 20 20'}, [
$create('SVG:title', t('genericResetLabel')),
$create('SVG:polygon', {
@@ -230,9 +230,8 @@ async function configDialog(style) {
case 'color':
children = [
$create('.colorview-swatch.config-value', [
- va.input = $create('a.color-swatch', {
+ va.input = $create('button.fake.color-swatch', {
va,
- href: '#',
onclick: showColorpicker,
}),
]),
diff --git a/js/dom.js b/js/dom.js
index 355335c7..38f44e78 100644
--- a/js/dom.js
+++ b/js/dom.js
@@ -422,7 +422,6 @@ async function waitForSheet({
}
// set language for a) CSS :lang pseudo and b) hyphenation
document.documentElement.setAttribute('lang', chrome.i18n.getUILanguage());
- document.on('click', keepAddressOnDummyClick);
document.on('wheel', changeFocusedInputOnWheel, {capture: true, passive: false});
Promise.resolve().then(async () => {
@@ -488,13 +487,6 @@ async function waitForSheet({
}
}
- function keepAddressOnDummyClick(e) {
- // avoid adding # to the page URL when clicking dummy links
- if (e.target.closest('a[href="#"]')) {
- e.preventDefault();
- }
- }
-
function keepFocusRingOnTabbing(event) {
if (event.key === 'Tab' && !event.ctrlKey && !event.altKey && !event.metaKey) {
focusAccessibility.lastFocusedViaClick = false;
diff --git a/manage.html b/manage.html
index 5ae4ae34..751f7e80 100644
--- a/manage.html
+++ b/manage.html
@@ -63,18 +63,18 @@
-
-
+
+