diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 1292222b..b903a753 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -242,6 +242,14 @@ "message": "Yes", "description": "'Yes' button in a confirm dialog" }, + "copied": { + "message": "Copied to clipboard", + "description": "Message shown when content has been copied to the clipboard" + }, + "copy": { + "message": "Copy to clipboard", + "description": "Tooltip for elements which can be copied" + }, "dateInstalled": { "message": "Date installed", "description": "Option text for the user to sort the style by install date" diff --git a/popup.html b/popup.html index 73c1aeb5..d925d951 100644 --- a/popup.html +++ b/popup.html @@ -106,6 +106,7 @@ diff --git a/popup/popup.css b/popup/popup.css index a33674f2..1205a58d 100644 --- a/popup/popup.css +++ b/popup/popup.css @@ -697,6 +697,8 @@ body.blocked .actions > .main-controls { .blocked-info { hyphens: none; word-wrap: break-word; + line-height: 16px; + position: relative; } .blocked-info label { @@ -712,6 +714,46 @@ body.blocked .actions > .main-controls { margin: 0; } +.blocked-info strong { + cursor: pointer; + transition: all .1s; + border-bottom: 1px dotted #000; +} + +.blocked-info strong.copied { + background: hsl(170, 40%, 80%); + color: #000; +} + +.copy-message { + white-space: nowrap; + position: absolute; + display: none; + top: 0; + left: calc(var(--outer-padding) * -1); + right: calc(var(--outer-padding) * -1); + font-weight: bold; + font-size: 13px; + text-align: center; + padding: 4px 0; + background: hsl(170, 40%, 80%); + color: #000; + z-index: 10; +} + +.copy-message.show-message { + display: block; +} + +.blocked-info strong:after { + content: ''; + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURQAAAAAAAKVnuc8AAAABdFJOUwBA5thmAAAAIElEQVQI12NgYGCEAgYgkwEMGBFijEhixDMZkUSRLQAACpYALjrE2uIAAAAASUVORK5CYII=)center no-repeat; + height: 10px; + width: 10px; + display: inline-flex; + margin-left: 3px; +} + /******************************************/ #hotkey-info { diff --git a/popup/popup.js b/popup/popup.js index 0704e827..e3ba2f9c 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -1,6 +1,6 @@ /* global configDialog hotkeys onTabReady msg getActiveTab FIREFOX getTabRealURL URLS API onDOMready $ $$ prefs CHROME - setupLivePrefs template t $create tWordBreak animateElement + setupLivePrefs template t $create animateElement tryJSONparse debounce CHROME_HAS_BORDER_BUG */ 'use strict'; @@ -141,7 +141,14 @@ function initPopup() { $('label', info).textContent = t('unreachableAMO'); const note = (FIREFOX < 59 ? t('unreachableAMOHintOldFF') : t('unreachableAMOHint')) + (FIREFOX < 60 ? '' : '\n' + t('unreachableAMOHintNewFF')); - const renderToken = s => s[0] === '<' ? $create('b', tWordBreak(s.slice(1, -1))) : s; + const renderToken = s => s[0] === '<' + ? $create('strong', { + textContent: s.slice(1, -1), + onclick: handleEvent.copyContent, + tabIndex: -1, + title: t('copy'), + }) + : s; const renderLine = line => $create('p', line.split(/(<.*?>)/).map(renderToken)); const noteNode = $create('fragment', note.split('\n').map(renderLine)); info.appendChild(noteNode); @@ -581,6 +588,18 @@ Object.assign(handleEvent, { handleEvent.openURLandHide.call(this, event); } }, + + copyContent(event) { + const target = event.target; + const message = $('.copy-message'); + navigator.clipboard.writeText(target.textContent); + target.classList.add('copied'); + message.classList.add('show-message'); + setTimeout(() => { + target.classList.remove('copied'); + message.classList.remove('show-message'); + }, 1000); + }, });