From 50717465b976fa83915a247973492586488bca30 Mon Sep 17 00:00:00 2001 From: tophf Date: Thu, 12 Aug 2021 14:40:03 +0300 Subject: [PATCH 1/6] show config for usercss vars in installer (#1302) * simplify messageBox code * also bind events correctly in case messageBox is called when a messageBox was already shown --- install-usercss.html | 9 +++++++ install-usercss/install-usercss.css | 18 +++++++++++++ install-usercss/install-usercss.js | 39 +++++++++++++++++++++-------- js/dlg/config-dialog.css | 18 ++++++------- js/dlg/config-dialog.js | 15 ++++++----- js/dlg/message-box.js | 22 ++++------------ 6 files changed, 77 insertions(+), 44 deletions(-) diff --git a/install-usercss.html b/install-usercss.html index 9ed75523..98cd0eec 100644 --- a/install-usercss.html +++ b/install-usercss.html @@ -35,6 +35,9 @@

+ + +
@@ -354,7 +362,6 @@ - diff --git a/manage/filters.js b/manage/filters.js index ad53d320..f5fe5f77 100644 --- a/manage/filters.js +++ b/manage/filters.js @@ -36,7 +36,7 @@ function initFilters() { $('#search-help').onclick = event => { event.preventDefault(); messageBoxProxy.show({ - className: 'help-text', + className: 'help-text center-dialog', title: t('search'), contents: $create('ul', diff --git a/manage/manage.css b/manage/manage.css index 6f1042a3..98f28d71 100644 --- a/manage/manage.css +++ b/manage/manage.css @@ -432,33 +432,17 @@ a:hover { #manage-text { display: flex; flex-wrap: wrap; - align-items: baseline; padding-top: .35rem; } - +#manage-text > * { + display: flex; + align-items: center; +} #manage-text > :not(:last-child):after { content: "|"; margin: 0 .5em; } -#link-usw { - display: flex; - align-items: center; - margin-top: .5em; -} - -#link-usw img { - max-width: 2.5em; - max-height: 2.5em; - margin-right: .75em; - filter: grayscale(1); - transition: filter .5s; -} - -#link-usw:hover img { - filter: none; -} - .newUI .entry .svg-icon.checked, .newUI .entry:hover .svg-icon.checked { fill: #000; diff --git a/manage/sorter.js b/manage/sorter.js index 9a181e47..97963e54 100644 --- a/manage/sorter.js +++ b/manage/sorter.js @@ -189,7 +189,7 @@ const sorter = (() => { async function showHelp(event) { event.preventDefault(); messageBoxProxy.show({ - className: 'help-text', + className: 'help-text center-dialog', title: t('sortStylesHelpTitle'), contents: $create('div', diff --git a/options/options.js b/options/options.js index 107c02fc..3c15538f 100644 --- a/options/options.js +++ b/options/options.js @@ -25,7 +25,6 @@ setupLivePrefs(); setupRadioButtons(); $$('input[min], input[max]').forEach(enforceInputRange); -setTimeout(splitLongTooltips); if (CHROME_POPUP_BORDER_BUG) { const borderOption = $('.chrome-no-popup-border'); @@ -87,15 +86,6 @@ document.onclick = e => { .filter(input => prefs.knownKeys.includes(input.id)) .forEach(input => prefs.reset(input.id)); break; - - case 'note': { - e.preventDefault(); - messageBoxProxy.show({ - className: 'note', - contents: target.dataset.title, - buttons: [t('confirmClose')], - }); - } } }; @@ -229,22 +219,6 @@ function setupRadioButtons() { }); } -function splitLongTooltips() { - for (const el of $$('[title]')) { - el.dataset.title = el.title; - el.title = el.title.replace(/<\/?\w+>/g, ''); // strip html tags - if (el.title.length < 50) { - continue; - } - const newTitle = el.title - .split('\n') - .map(s => s.replace(/([^.][.。?!]|.{50,60},)\s+/g, '$1\n')) - .map(s => s.replace(/(.{50,80}(?=.{40,}))\s+/g, '$1\n')) - .join('\n'); - if (newTitle !== el.title) el.title = newTitle; - } -} - function customizeHotkeys() { // command name -> i18n id const hotkeys = new Map([ From 304dcb1489f623bef586911306c12514632fb751 Mon Sep 17 00:00:00 2001 From: tophf Date: Thu, 12 Aug 2021 16:44:02 +0300 Subject: [PATCH 5/6] show installation error inline, allow retrying (#1309) --- popup/search.css | 22 ++++++++++++++++++++++ popup/search.js | 4 +++- 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/popup/search.css b/popup/search.css index 643d4d7f..4ab1f0b8 100644 --- a/popup/search.css +++ b/popup/search.css @@ -229,6 +229,28 @@ search-result-meta [data-type="rating"][data-class="none"] dd { cursor: help; } +[data-error], +[data-error]:hover { + border: calc(var(--pad) / 2) solid red; + border-radius: var(--pad); + padding: calc(var(--pad) / 2); + background: hsl(0, 90%, 85%); +} +[data-error]::after { + content: attr(data-error); + display: block; + color: hsl(0, 100%, 8%); + font-weight: bold; + padding-top: var(--pad); + hyphens: auto; +} +[data-error] .search-result-description { + display: none; +} +[data-error] .search-result-meta { + background: hsla(0, 100%, 90%, .80); +} + .search-results-nav { flex-direction: row; text-align: center; diff --git a/popup/search.js b/popup/search.js index 13e727e0..4842c69d 100644 --- a/popup/search.js +++ b/popup/search.js @@ -421,6 +421,7 @@ saveScrollPosition(entry); installButton.disabled = true; entry.style.setProperty('pointer-events', 'none', 'important'); + delete entry.dataset.error; if (!isUsw) { // FIXME: move this to background page and create an API like installUSOStyle result.pingbackTimer = setTimeout(download, PINGBACK_DELAY, @@ -434,7 +435,8 @@ const style = await API.usercss.install({sourceCode, updateUrl}); renderFullInfo(entry, style); } catch (reason) { - error(`Error while downloading usoID:${id}\nReason: ${reason}`); + entry.dataset.error = `${t('genericError')}: ${reason}`; + entry.scrollIntoView({behavior: 'smooth', block: 'nearest'}); } $remove('.lds-spinner', entry); installButton.disabled = false; From 49af7230783736eaf060b253f1710910f72274d9 Mon Sep 17 00:00:00 2001 From: tophf Date: Thu, 12 Aug 2021 16:56:35 +0300 Subject: [PATCH 6/6] don't let wrapped text flow below the usw icon --- popup/search.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/popup/search.css b/popup/search.css index 4ab1f0b8..dba75ef3 100644 --- a/popup/search.css +++ b/popup/search.css @@ -76,8 +76,9 @@ body.search-results-shown { } .search-result-title { + display: flex; + align-items: center; margin-bottom: .5em; - display: block; color: #555; overflow-wrap: break-word; }