Fix word breaks in popup (#805)

* Fix word breaks in popup. See #312

* Click to copy

* Copy styling

* Copy message

* Copy styling

* cleanup

* cleanup

_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"

popup.html

@@ -106,6 +106,7 @@
 
   <template data-id="unreachableInfo">
     <div class="blocked-info">
+      <div class="copy-message" i18n-text="copied"></div>
       <label i18n-text="unreachableContentScript"></label>
     </div>
   </template>

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 {

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);
+  },
 });