diff --git a/web-extension/details.js b/web-extension/details.js index 1f6adf2..5652977 100644 --- a/web-extension/details.js +++ b/web-extension/details.js @@ -64,8 +64,11 @@ function _createURLValueElement(value) { function _createSimpleValueElement(value) { const valueElement = document.createElement('span'); - valueElement.innerText = value; + valueElement.innerHTML = `${value}`; valueElement.addEventListener('click', _copyElementToClipboard); + valueElement.addEventListener('dragstart', function (e) { + e.dataTransfer.setData('text', value); + }); return valueElement; } @@ -80,6 +83,7 @@ function _isURL(value) { function _createFlatValueElement(value) { const valueElement = _isURL(value) ? _createURLValueElement(value) : _createSimpleValueElement(value); valueElement.classList.add('detail-clickable-value'); + valueElement.setAttribute('draggable', 'true'); return valueElement; } diff --git a/web-extension/search.js b/web-extension/search.js index 65f533f..0513293 100644 --- a/web-extension/search.js +++ b/web-extension/search.js @@ -10,6 +10,7 @@ function initSearch() { setTimeout(() => { input.focus(); + _onSearchInputEvent(); }, 200); } @@ -29,8 +30,13 @@ function _onSearchInputEvent() { if (input.value.length) { search(input.value); } else { - const currentHost = urlDomain(currentPageUrl); - searchHost(currentHost); + // covers both chrome and ff + browser.tabs.query({ currentWindow: true, active: true }).then((tabs) => { + const url = new URL(tabs[0].url); + const host = url.host; + document.getElementById('search_input').value = host; + searchHost(host); + }, console.error); } } @@ -85,7 +91,7 @@ function search(term) { function searchHost(host) { browser.storage.local.remove(LAST_DOMAIN_SEARCH_PREFIX + host); - document.getElementById('search_input').value = ''; + // document.getElementById('search_input').value = ''; console.log('Searching for host ' + host); return _doSearch(host, true); diff --git a/web-extension/styles.css b/web-extension/styles.css index b2da0bd..ba892e6 100644 --- a/web-extension/styles.css +++ b/web-extension/styles.css @@ -76,15 +76,38 @@ input { } .detail-clickable-value:hover { - background: rgba(96, 109, 197, 0.41); + background: rgba(245, 167, 0, 0.548); } .detail-clickable-value:active { - background-color: rgba(0, 0, 0, 0.1); + background-color: rgba(252, 133, 22, 0.1); +} + +.gripper { + content: '....'; + width: 10px; + height: 20px; + display: inline-block; + overflow: hidden; + line-height: 5px; + padding: 3px 4px; + cursor: move; + vertical-align: middle; + margin-top: -0.7em; + margin-right: 0.3em; + font-size: 12px; + font-family: sans-serif; + letter-spacing: 2px; + color: #cccccc; + text-shadow: 1px 0 1px black; +} +.gripper::after { + content: '.. .. .. ..'; } .entry { position: relative; + background-color: #f8f8f8; } .detail-view { @@ -94,12 +117,23 @@ input { -moz-appearance: none; border: 0; width: 100%; - padding: 10px 7px 10px 32px; + padding: 10px 7px; border-bottom: 1px dotted #6bd6e4; text-align: left; line-height: 1.2; - font-size: 12px; + font-size: 14px; min-height: 32px; + list-style-type: none; +} + +.detail-view li { + padding: 0.7em 0; + color: gray; +} + +.detail-view .detail-key, +.detail-view .detail-clickable-value { + display: block; } .detail-key { @@ -108,7 +142,14 @@ input { } .detail-clickable-value { - cursor: pointer; + cursor: move; + border: solid 1px #ccc; + padding: 1em; + transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1); + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + background: #fff; + border-radius: 4px; + -webkit-user-drag: element; } .detail-nested {