@@ -236,6 +239,10 @@
+
+
+
+
diff --git a/options/options.css b/options/options.css
index 22dfb38d..b4df060e 100644
--- a/options/options.css
+++ b/options/options.css
@@ -80,12 +80,18 @@ h1 {
width: 70%;
}
-label {
+label,
+.label {
display: flex;
margin: .25ex 0;
align-items: center;
}
+.label {
+ flex-grow: 1;
+ justify-content: space-between;
+}
+
label > :first-child {
margin-right: 8px;
flex-grow: 1;
@@ -109,6 +115,10 @@ select,
flex-shrink: 0;
}
+select.cloud-name {
+ width: auto;
+}
+
button {
text-align: center;
}
@@ -354,6 +364,9 @@ input[type="radio"].radio:checked::after {
}
.sync-status {
+ flex-grow: 1;
+ padding-right: 8px;
+ box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -361,3 +374,7 @@ input[type="radio"].radio:checked::after {
.sync-status::first-letter {
text-transform: uppercase;
}
+
+.sync-options .actions {
+ padding-top: 6px;
+}
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 2c5228b8..e9b9127b 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 capitalize */
'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);
@@ -582,6 +589,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);
+ },
});