From b8f6f5db8d159fd808db7126eb3d4dd0f24b352d Mon Sep 17 00:00:00 2001 From: tophf Date: Sat, 27 Feb 2021 20:42:49 +0300 Subject: [PATCH] switch from dummy links to dummy buttons (#1192) The reason is that dummy links like cause the built-in tooltip pop up on hover which is just useless noise --- edit.html | 54 +++++++++++++++++++------------------- edit/edit.css | 2 +- edit/moz-section-widget.js | 2 +- edit/regexp-tester.js | 16 ++++------- global.css | 24 ++++++++++++----- js/dlg/config-dialog.js | 7 +++-- js/dom.js | 8 ------ manage.html | 43 +++++++++++++++--------------- manage/updater-ui.js | 2 +- options.html | 33 ++++++++++------------- popup.html | 14 +++++----- popup/events.js | 10 ++----- popup/popup.js | 10 +++---- 13 files changed, 104 insertions(+), 121 deletions(-) diff --git a/edit.html b/edit.html index e7a2cf07..5279bc91 100644 --- a/edit.html +++ b/edit.html @@ -86,21 +86,21 @@
- + +
@@ -113,9 +113,9 @@
@@ -136,16 +136,16 @@
- Aa - + + + +
@@ -257,12 +257,12 @@
@@ -289,10 +289,10 @@
- - +
@@ -342,9 +342,9 @@ - +
- +
@@ -396,9 +396,9 @@
- + @@ -410,9 +410,9 @@

: - +

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 @@

- - + +

- ... +
@@ -93,27 +93,27 @@