Click to copy

_locales/en/messages.json

@@ -242,6 +242,10 @@
     "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"
+  },
   "dateInstalled": {
     "message": "Date installed",
     "description": "Option text for the user to sort the style by install date"

popup/popup.css

@@ -712,6 +712,33 @@ body.blocked .actions > .main-controls {
   margin: 0;
 }
 
+.blocked-info strong {
+  position: relative;
+  cursor: copy;
+  transition: all .1s;
+}
+
+.blocked-info strong.copied {
+  background: rgb(145, 208, 198);
+  color: #000;
+}
+
+.blocked-info strong.copied:after {
+  position: absolute;
+  content: attr(title);
+  text-align: center;
+  padding: 4px;
+  border-radius: 2px;
+  width: auto;
+  min-width: 100px;
+  top: -4em;
+  left: 50%;
+  background: #fff;
+  color: #000;
+  transform: translate(-50%, 0);
+  z-index: 10;
+}
+
 /******************************************/
 
 #hotkey-info {

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,13 @@ 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', s.slice(1, -1)) : s;
+          const renderToken = s => s[0] === '<'
+            ? $create('strong', {
+              textContent: s.slice(1, -1),
+              onclick: handleEvent.copyContent,
+              tabIndex: -1,
+            })
+            : s;
           const renderLine = line => $create('p', line.split(/(<.*?>)/).map(renderToken));
           const noteNode = $create('fragment', note.split('\n').map(renderLine));
           info.appendChild(noteNode);
@@ -581,6 +587,19 @@ Object.assign(handleEvent, {
       handleEvent.openURLandHide.call(this, event);
     }
   },
+
+  copyContent(event) {
+    const target = event.target;
+    navigator.clipboard.writeText(target.textContent);
+    target.classList.add('copied');
+    target.title = t('copied');
+    setTimeout(() => {
+      target.classList.remove('copied');
+    }, 1000);
+    setTimeout(() => {
+      target.title = '';
+    }, 2000);
+  },
 });