From 3f4fb0617efa97e30ffa44b081693ee899f89bd9 Mon Sep 17 00:00:00 2001 From: tophf Date: Fri, 19 Mar 2021 22:53:52 +0300 Subject: [PATCH] reimplement #1192 using dummy links as omitting href attribute is sufficient to avoid the useless tooltip --- edit.html | 54 +++++++++++++++++++------------------- edit/moz-section-widget.js | 2 +- edit/regexp-tester.js | 4 +-- global.css | 24 +++++------------ js/dlg/config-dialog.js | 5 ++-- js/dom.js | 9 +++++++ manage.html | 36 ++++++++++++------------- options.html | 33 +++++++++++++---------- popup.html | 14 +++++----- popup/popup.js | 3 ++- 10 files changed, 94 insertions(+), 90 deletions(-) diff --git a/edit.html b/edit.html index 43171866..636aeb3b 100644 --- a/edit.html +++ b/edit.html @@ -74,21 +74,21 @@
- - +
@@ -101,9 +101,9 @@
@@ -124,16 +124,16 @@
- - - - +
@@ -245,12 +245,12 @@
@@ -277,10 +277,10 @@
- +
@@ -330,9 +330,9 @@ - +
- +
@@ -384,9 +384,9 @@
- + @@ -398,9 +398,9 @@

: - +

diff --git a/edit/moz-section-widget.js b/edit/moz-section-widget.js index d53d4257..e1f79a12 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:not(.fake), + ${C_CONTAINER} button, ${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 328e2be8..d0e0cee5 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('button.fake', [ + full.push($create('a', {tabIndex: 0}, [ icon, url, ])); } else { - partial.push($create('button.fake', [ + partial.push($create('a', {tabIndex: 0}, [ icon, url.substr(0, match.pos), $create('mark', match.text), diff --git a/global.css b/global.css index 0bb117f6..5cf9f3a2 100644 --- a/global.css +++ b/global.css @@ -21,7 +21,7 @@ body:lang(zh-HK) { font-family: Arial, 'Microsoft JhengHei UI', 'Microsoft JhengHei', system-ui, sans-serif; } -button:not(.fake) { +button { -webkit-appearance: none; -moz-appearance: none; user-select: none; @@ -41,12 +41,12 @@ button:not(.fake) { transition: background-color .25s, border-color .25s; } -button:not(.fake):not(:disabled):hover { +button:not(:disabled):hover { background-color: hsl(0, 0%, 95%); border-color: hsl(0, 0%, 52%); } -button:not(.fake):active { +button: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'); @@ -54,20 +54,8 @@ button:not(.fake):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(.fake):not(:disabled):hover { +#message-box-buttons button:not(:disabled):hover { background-color: hsl(0, 0%, 90%); border-color: hsl(0, 0%, 50%); } @@ -316,12 +304,12 @@ input[type="number"][data-focused-via-click]:focus { } /* Firefox cannot handle fractions in font-size */ - .firefox button:not(.fake):not(.install) { + .firefox button:not(.install) { line-height: 13px; padding: 3px 7px; } - .firefox.moz-appearance-bug button:not(.fake):not(.install) { + .firefox.moz-appearance-bug button:not(.install) { padding: 2px 4px; } } diff --git a/js/dlg/config-dialog.js b/js/dlg/config-dialog.js index 2a84a73f..c1054299 100644 --- a/js/dlg/config-dialog.js +++ b/js/dlg/config-dialog.js @@ -215,7 +215,7 @@ async function configDialog(style) { function buildConfigForm() { let resetter = - $create('button.fake.config-reset-icon', [ + $create('a.config-reset-icon', {tabIndex: 0}, [ $create('SVG:svg.svg-icon', {viewBox: '0 0 20 20'}, [ $create('SVG:title', t('genericResetLabel')), $create('SVG:polygon', { @@ -230,8 +230,9 @@ async function configDialog(style) { case 'color': children = [ $create('.colorview-swatch.config-value', [ - va.input = $create('button.fake.color-swatch', { + va.input = $create('a.color-swatch', { va, + tabIndex: 0, onclick: showColorpicker, }), ]), diff --git a/js/dom.js b/js/dom.js index e3ab43f1..ada2f408 100644 --- a/js/dom.js +++ b/js/dom.js @@ -423,6 +423,7 @@ async function waitForSheet({ } // set language for a) CSS :lang pseudo and b) hyphenation document.documentElement.setAttribute('lang', chrome.i18n.getUILanguage()); + document.on('keypress', clickDummyLinkOnEnter); document.on('wheel', changeFocusedInputOnWheel, {capture: true, passive: false}); Promise.resolve().then(async () => { @@ -490,6 +491,14 @@ async function waitForSheet({ } } + function clickDummyLinkOnEnter(e) { + if (getEventKeyName(e) === 'Enter') { + const a = e.target.closest('a'); + const isDummy = a && !a.href && a.tabIndex === 0; + if (isDummy) a.dispatchEvent(new MouseEvent('click', {bubbles: true})); + } + } + 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 6b541781..f22b5e47 100644 --- a/manage.html +++ b/manage.html @@ -53,18 +53,18 @@

- - +

- + ...
@@ -83,27 +83,27 @@