From c8dc2f999aa5b25faf7eec88037f1c0e9e5b4c6d Mon Sep 17 00:00:00 2001 From: Simon Heimler Date: Sat, 24 Aug 2024 22:36:28 +0200 Subject: [PATCH] Add right-click -> copy to clipboard feature (#125) * Add right-click -> copy to clipboard feature * undo prettier length increase * Changelog for v1.10.0 * Cleanup now unnecessary SCSS files and format CSS with prettier * Improving cypress tests further --------- Co-authored-by: Simon Heimler --- .prettierignore | 1 - .prettierrc | 2 +- CHANGELOG.md | 11 + README.md | 1 + cypress/e2e/folders.cy.js | 11 +- cypress/e2e/options.cy.js | 4 +- cypress/e2e/search.cy.js | 64 +-- cypress/e2e/tags.cy.js | 16 +- package-lock.json | 4 +- package.json | 2 +- popup/css/style.css | 941 ++++++++++++++++++++---------------- popup/js/model/options.js | 2 +- popup/js/search/common.js | 2 - popup/js/view/searchView.js | 11 +- sass/style.scss | 506 ------------------- 15 files changed, 574 insertions(+), 1004 deletions(-) delete mode 100644 sass/style.scss diff --git a/.prettierignore b/.prettierignore index 41a82ee9..0a17de82 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,6 +1,5 @@ # Ignore artifacts: dist/ popup/lib/ -popup/css/ node_modules/ cypress/ diff --git a/.prettierrc b/.prettierrc index 28ae3c1b..f5165754 100644 --- a/.prettierrc +++ b/.prettierrc @@ -5,4 +5,4 @@ "quoteProps": "consistent", "printWidth": 120, "tabWidth": 2 -} +} \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index b20fe05a..92694b76 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,17 @@ ## [unreleased] +## [v1.10.0] + +- **NEW**: Right-click result to copy URL to clipboard +- **IMPROVED**: Improved initial loading time by caching browser history in local storage + - The browser API to fetch history tends to be slow + - The default history size (`historyMaxItems`) to load has been increased to 1024 +- **IMPROVED**: Simplified options for calculating score of recently visited pages + - now only `scoreRecentBonusScoreMaximum` (which defaults to +20) +- **CHORE**: Minor refactoring and cleanups, maybe with a little bit performance improvements. +- **CHORE**: Removed SCSS build step, now it's just vanilla CSS + ## [v1.9.7] - **FIXED**: Fixed missing CSS font style for tagging view diff --git a/README.md b/README.md index b5a04b52..407f776c 100644 --- a/README.md +++ b/README.md @@ -37,6 +37,7 @@ For a list of recent changes, see [CHANGELOG.md](./CHANGELOG.md). - **Open selected results**: By default, the extension will open the selected result in a new active tab, or switch to an existing tab with the target url. - Hold `Shift` or `Alt` to open the result in the current tab - Hold `Ctrl` to open the result without closing the popup. + - Right-click to copy URL to clipboard - **Search Modes**: In case you want to be more selective -> use a search mode: - Start your query with `#`: only **bookmarks with the tag** will be returned (exact "starts with" search) - Supports AND search, e.g. search for `#github #pr` to only get results which have both tags diff --git a/cypress/e2e/folders.cy.js b/cypress/e2e/folders.cy.js index e7d68c5e..0f6a88fd 100644 --- a/cypress/e2e/folders.cy.js +++ b/cypress/e2e/folders.cy.js @@ -15,14 +15,11 @@ describe('Folder View', () => { .find('#folders-list') .find('[x-folder=Tools]') .click() - cy.get('#search-input') - .should('have.value', '~Tools') - cy.get('#result-list') - .should('not.have.length', 0) + cy.get('#search-input').should('have.value', '~Tools') + cy.get('#result-list').should('not.have.length', 0) .find('[x-original-id=6]') - cy.get('#result-list') - .find('li.bookmark') - .checkNoErrors() + cy.get('#result-list').find('li.bookmark') + cy.checkNoErrors() }) }) }) diff --git a/cypress/e2e/options.cy.js b/cypress/e2e/options.cy.js index 082b7454..37fc3d9c 100644 --- a/cypress/e2e/options.cy.js +++ b/cypress/e2e/options.cy.js @@ -29,7 +29,7 @@ describe('Options View', () => { cy.visit('/options.html') cy.get('#user-config') .should('include.value', 'displayVisitCounter') - .checkNoErrors() + cy.checkNoErrors() }) it('can save a new user config in YAML format', () => { const newConfig = `displayVisitCounter: true\n` @@ -43,7 +43,7 @@ describe('Options View', () => { cy.visit('/options.html') cy.get('#user-config') .should('include.value', 'displayVisitCounter') - .checkNoErrors() + cy.checkNoErrors() }) }) }) diff --git a/cypress/e2e/search.cy.js b/cypress/e2e/search.cy.js index 918076c9..7ccab67f 100644 --- a/cypress/e2e/search.cy.js +++ b/cypress/e2e/search.cy.js @@ -39,7 +39,7 @@ describe('Search View', () => { }) cy.get('#search-input') .type('{uparrow}') - // eslint-disable-next-line cypress/unsafe-to-chain-command + cy.get('#result-list li') .each((el, index) => { if (index === 0) { @@ -48,7 +48,7 @@ describe('Search View', () => { expect(el[0].id).to.not.equal('selected-result') } }) - .checkNoErrors() + cy.checkNoErrors() }) }) @@ -89,7 +89,7 @@ describe('Search View', () => { cy.get('[x-original-id=7]') .find('span.score') - .checkNoErrors() + cy.checkNoErrors() }) }) @@ -110,7 +110,7 @@ describe('Search View', () => { .find('li.tab') cy.get('#result-list') .find('li.bookmark') - .checkNoErrors() + cy.checkNoErrors() }) it('can execute a precise search with non-ASCII chars successfully', () => { cy.get('#search-approach-toggle') @@ -119,31 +119,24 @@ describe('Search View', () => { // Only make sure that search doesn't crash cy.get('#result-list') .should('not.have.length', 0) - .checkNoErrors() + cy.checkNoErrors() }) }) describe('Fuzzy search', () => { it('can switch to fuzzy search successfully', () => { - cy.get('#search-approach-toggle') - .contains('PRECISE') - cy.get('#search-approach-toggle') - .click() - cy.get('#search-approach-toggle') - .contains('FUZZY') - cy.get('#search-input') - .type(`JSON`) - cy.get('li.bookmark') - .checkNoErrors() + cy.get('#search-approach-toggle').should('have.text', 'PRECISE') // wait for initial value + cy.get('#search-approach-toggle').click() + cy.get('#search-approach-toggle').should('not.have.text', 'PRECISE') + cy.get('#search-approach-toggle').should('have.text', 'FUZZY') + cy.get('#search-input').type(`JSON`) + cy.get('li.bookmark').checkNoErrors() }) it('can execute a fuzzy search successfully', () => { - cy.get('#search-approach-toggle') - .contains('PRECISE') - cy.get('#search-approach-toggle') - .click() - cy.get('#search-approach-toggle') - .contains('FUZZY') + cy.get('#search-approach-toggle').should('have.text', 'PRECISE') + cy.get('#search-approach-toggle').click() + cy.get('#search-approach-toggle').should('have.text', 'FUZZY') cy.get('#search-input') .type(`JSON`) cy.get('li.bookmark') @@ -159,23 +152,17 @@ describe('Search View', () => { .find('li.tab') cy.get('#result-list') .find('li.bookmark') - .checkNoErrors() + cy.checkNoErrors() }) }) it('can execute a precise search with non-ASCII chars successfully', () => { - cy.get('#search-approach-toggle') - .contains('PRECISE') - cy.get('#search-approach-toggle') - .click() - cy.get('#search-approach-toggle') - .contains('FUZZY') - cy.get('#search-input') - .type(`äe指事字₽`) + cy.get('#search-approach-toggle').should('have.text', 'PRECISE') + cy.get('#search-input').type(`äe指事字₽`) // Only make sure that search doesn't crash cy.get('#result-list') .should('not.have.length', 0) - .checkNoErrors() + cy.checkNoErrors() }) describe('Bookmark search', () => { @@ -190,7 +177,7 @@ describe('Search View', () => { .should('not.exist') cy.get('.history') .should('not.exist') - .checkNoErrors() + cy.checkNoErrors() }) it('returns only bookmark results', () => { cy.get('#search-input') @@ -201,9 +188,8 @@ describe('Search View', () => { .should('not.exist') cy.get('.history') .should('not.exist') - cy.get('#result-counter') - .contains('(5)') - .checkNoErrors() + cy.get('#result-counter').should('have.text', '(5)') + cy.checkNoErrors() }) }) @@ -219,7 +205,7 @@ describe('Search View', () => { .should('not.exist') cy.get('.bookmark') .should('not.exist') - .checkNoErrors() + cy.checkNoErrors() }) it('only the history and tab results', () => { cy.get('#search-input') @@ -232,7 +218,7 @@ describe('Search View', () => { .should('not.exist') cy.get('#result-counter') .contains('(4)') - .checkNoErrors() + cy.checkNoErrors() }) }) @@ -248,7 +234,7 @@ describe('Search View', () => { .should('not.exist') cy.get('.history') .should('not.exist') - .checkNoErrors() + cy.checkNoErrors() }) it('returns only the tab results', () => { cy.get('#search-input') @@ -263,7 +249,7 @@ describe('Search View', () => { .should('not.exist') cy.get('#result-counter') .contains('(1)') - .checkNoErrors() + cy.checkNoErrors() }) }) }) diff --git a/cypress/e2e/tags.cy.js b/cypress/e2e/tags.cy.js index aa0050f8..7c6a3905 100644 --- a/cypress/e2e/tags.cy.js +++ b/cypress/e2e/tags.cy.js @@ -11,18 +11,12 @@ describe('Tag View', () => { cy.get('#tags-overview').find('#tags-list').find('[x-tag=json]').checkNoErrors() }) it('can use tags for navigation', () => { - cy.get('#tags-overview') - .find('#tags-list') - .find('[x-tag=json]') - .click() - cy.get('#search-input') - .should('have.value', '#json') - cy.get('#result-list') - .should('not.have.length', 0) + cy.get('#tags-overview').find('#tags-list').find('[x-tag=json]').click() + cy.get('#search-input').should('have.value', '#json') + cy.get('#result-list').should('not.have.length', 0) .find('[x-original-id=7]') - cy.get('#result-list') - .find('li.bookmark') - .checkNoErrors() + cy.get('#result-list').find('li.bookmark') + cy.checkNoErrors() }) }) }) diff --git a/package-lock.json b/package-lock.json index 221c560a..d4ca7d03 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "search-bookmarks-history-and-tabs", - "version": "1.9.8", + "version": "1.10.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "search-bookmarks-history-and-tabs", - "version": "1.9.8", + "version": "1.10.0", "license": "MIT", "dependencies": { "@leeoniya/ufuzzy": "^1.0.14", diff --git a/package.json b/package.json index 767714c9..b9548300 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "search-bookmarks-history-and-tabs", - "version": "1.9.8", + "version": "1.10.0", "description": "Browser extension to (fuzzy) search and navigate bookmarks, history and open tabs.", "main": "index.js", "type": "module", diff --git a/popup/css/style.css b/popup/css/style.css index b1996994..b6c8074e 100644 --- a/popup/css/style.css +++ b/popup/css/style.css @@ -1,441 +1,522 @@ @charset "utf-8"; - html, body, #container, #search { - width: 500px; - height: 600px; - overflow: hidden; -} - body { - background: #eee; - color: #898989; - padding: 0; - font-size: 1.1em; -} - body a { - color: #4494c9; - text-decoration: none; -} - body mark { - font-weight: bold; - color: #356ba9; - background: none; -} - body small { - color: #aaa; -} - body, textarea { - font-family: -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; -} - .input, .input:active, .input:focus { - width: 100%; - max-width: 500px; - min-width: 500px; - height: 55px; - padding: 4px 8px; - font-size: 24px; - border-radius: 0; - border: none; - outline: none; - background: #fff; - border-bottom: 1px solid #ccc; -} - #search-input { - max-width: 473px; - min-width: 473px; -} - .input-description { - margin: 2px 4px; -} - #search-approach-toggle { - float: right; - height: 55px; - width: 26px; - padding: 0 3px 0 0; - writing-mode: vertical-rl; - font-size: 12px; - font-weight: 500; - text-align: center; - background: #fff; - border-bottom: 1px solid #ccc; - cursor: pointer; -} - #search-approach-toggle.fuzzy { - color: #8667cd; -} - #search-approach-toggle.precise { - color: #9dcd1b; -} - #search-approach-toggle.precise { - color: #54c4d3; -} - code { - background-color: #d5d5d5; - color: #676767; - border-radius: 3px; - font-size: 0.75em; - padding: 1px 4px; -} - .badge { - color: #fff; - font-size: 11px; - border-radius: 3px; - padding: 1px 3px 2px 3px; - margin-right: 4px; - white-space: nowrap; - display: inline-block; - position: relative; - top: -3px; -} - .tags { - background: #557292; -} - .tags .divider:before { - content: ' '; -} - .tags mark { - color: #7cb3f6; -} - .tags small { - color: #a2bbd6; -} - .folder { - background: #559292; -} - .folder .divider:before { - content: ' \276F \0020'; -} - .folder mark { - color: #85dbdb; -} - .folder small { - color: #a3d0d0; -} - .window { - background: #8061ca; - color: #efe8ff; -} - .score { - background: #747474; - color: #ddd; -} - .last-visited { - background: #8ebb26; - color: #fff; -} - .visit-counter { - background: #bbac26; - color: #fff; -} - .date-added { - background: #bb8c26; - color: #fff; -} - .url { - font-size: 13px; - margin: 0; - overflow: hidden; - white-space: nowrap; -} - .controls { - text-align: right; - position: absolute; - bottom: 8px; - right: 8px; - width: 100%; - padding-left: 8px; -} - .controls .button { - height: 28px; - border-radius: 3px; -} - .controls .reset-button, .controls .delete-button { - background: #ee4343 !important; - color: #fff !important; - float: left; -} - .controls .cancel-button { - background: #929292 !important; - color: #fff !important; -} - .controls .help-button { - background: #4494c9 !important; - color: #fff !important; - float: left; -} - .controls .save-button { - background: #5fc944 !important; - color: #fff !important; -} - .controls a, .controls a:hover { - background: #777; - color: #fff; - margin: 0 0 0 8px; - padding: 2px 12px 4px 12px; - border: none; - font-size: 16px; -} - #result-list, #error-list { - padding: 4px 6px 0 4px; - height: 523px; - overflow-x: hidden; - overflow-y: scroll; -} - #result-list a, #error-list a { - color: #888; -} - #result-list li, #error-list li { - background-color: #fff; - margin: 0 0 4px 0; - padding: 4px 0px 4px 6px; - border-radius: 3px; - overflow: hidden; - cursor: pointer; - border-left: 6px solid #ccc; -} - #result-list #selected-result, #error-list #selected-result { - background-color: #dadada; -} - #result-list li.error, #error-list li.error { - color: #cc5858; - border-left: 6px solid #cc5858; -} - #result-list .edit-button, #error-list .edit-button, #result-list .close-button, #error-list .close-button { - float: right; -} - #result-list .edit-button:hover, #error-list .edit-button:hover, #result-list .close-button:hover, #error-list .close-button:hover { - background: rgba(255, 255, 255, 0.12); - border-radius: 3px; -} - #result-list .title, #error-list .title { - font-size: 18px; - margin: 0; - font-weight: 400; - color: #333; -} - #result-list .title-text, #error-list .title-text { - line-break: auto; -} - #error-list { - position: fixed; - width: 494px; - top: 55px; - overflow-y: hidden; - display: none; -} - #links { - height: 22px; - width: 500px; - position: absolute; - top: 579px; - left: 0; - background: #fff; - border-top: #595959; - padding: 0 6px; - font-size: 14px; -} - #links a { - color: #888; -} - #links #result-counter { - float: right; -} - #tags-overview, #folders-overview { - position: fixed; - top: 55px; - left: 0; - width: 500px; - height: 524px; - background: #eee; - padding: 4px 8px; - overflow-x: hidden; - overflow-y: scroll; -} - #tags-overview .input-description, #folders-overview .input-description { - margin: 4px 0px; -} - #tags-overview #tags-list, #folders-overview #tags-list, #tags-overview #folders-list, #folders-overview #folders-list { - width: 100%; -} - #tags-overview #tags-list a, #folders-overview #tags-list a, #tags-overview #folders-list a, #folders-overview #folders-list a, #tags-overview #tags-list a:hover, #folders-overview #tags-list a:hover, #tags-overview #folders-list a:hover, #folders-overview #folders-list a:hover { - color: #fff; - font-size: 15px; - margin: 4px 4px 0 0; +html, +body, +#container, +#search { + width: 500px; + height: 600px; + overflow: hidden; +} +body { + background: #eee; + color: #898989; + padding: 0; + font-size: 1.1em; +} +body a { + color: #4494c9; + text-decoration: none; +} +body mark { + font-weight: bold; + color: #356ba9; + background: none; +} +body small { + color: #aaa; +} +body, +textarea { + font-family: -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', + 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; +} +.input, +.input:active, +.input:focus { + width: 100%; + max-width: 500px; + min-width: 500px; + height: 55px; + padding: 4px 8px; + font-size: 24px; + border-radius: 0; + border: none; + outline: none; + background: #fff; + border-bottom: 1px solid #ccc; +} +#search-input { + width: 474px; + min-width: 474px; +} +.input-description { + margin: 2px 4px; +} +#search-approach-toggle { + float: right; + height: 55px; + width: 25px; + padding: 0 4px 0 0; + writing-mode: vertical-rl; + font-size: 12px; + font-weight: 500; + text-align: center; + background: #fff; + border-bottom: 1px solid #ccc; + cursor: pointer; +} +#search-approach-toggle.fuzzy { + color: #8667cd; +} +#search-approach-toggle.precise { + color: #9dcd1b; +} +#search-approach-toggle.precise { + color: #54c4d3; +} +code { + background-color: #d5d5d5; + color: #676767; + border-radius: 3px; + font-size: 0.75em; + padding: 1px 4px; +} +.badge { + color: #fff; + font-size: 11px; + border-radius: 3px; + padding: 1px 3px 2px 3px; + margin-right: 4px; + white-space: nowrap; + display: inline-block; + position: relative; + top: -3px; +} +.tags { + background: #557292; +} +.tags .divider:before { + content: ' '; +} +.tags mark { + color: #7cb3f6; +} +.tags small { + color: #a2bbd6; +} +.folder { + background: #559292; +} +.folder .divider:before { + content: ' \276F \0020'; +} +.folder mark { + color: #85dbdb; +} +.folder small { + color: #a3d0d0; +} +.window { + background: #8061ca; + color: #efe8ff; +} +.score { + background: #747474; + color: #ddd; +} +.last-visited { + background: #8ebb26; + color: #fff; +} +.visit-counter { + background: #bbac26; + color: #fff; +} +.date-added { + background: #bb8c26; + color: #fff; +} +.url { + font-size: 13px; + margin: 0; + overflow: hidden; + white-space: nowrap; +} +.controls { + text-align: right; + position: absolute; + bottom: 8px; + right: 8px; + width: 100%; + padding-left: 8px; +} +.controls .button { + height: 28px; + border-radius: 3px; +} +.controls .reset-button, +.controls .delete-button { + background: #ee4343 !important; + color: #fff !important; + float: left; +} +.controls .cancel-button { + background: #929292 !important; + color: #fff !important; +} +.controls .help-button { + background: #4494c9 !important; + color: #fff !important; + float: left; +} +.controls .save-button { + background: #5fc944 !important; + color: #fff !important; +} +.controls a, +.controls a:hover { + background: #777; + color: #fff; + margin: 0 0 0 8px; + padding: 2px 12px 4px 12px; + border: none; + font-size: 16px; +} +#result-list, +#error-list { + padding: 4px 6px 0 4px; + height: 523px; + overflow-x: hidden; + overflow-y: scroll; +} +#result-list a, +#error-list a { + color: #888; +} +#result-list li, +#error-list li { + background-color: #fff; + margin: 0 0 4px 0; + padding: 4px 0px 4px 6px; + border-radius: 3px; + overflow: hidden; + cursor: pointer; + border-left: 5px solid #ccc; +} +#result-list #selected-result, +#error-list #selected-result { + background-color: #dadada; +} +#result-list li.error, +#error-list li.error { + color: #cc5858; + border-left: 5px solid #cc5858; +} +#result-list .edit-button, +#error-list .edit-button, +#result-list .close-button, +#error-list .close-button { + float: right; +} +#result-list .edit-button:hover, +#error-list .edit-button:hover, +#result-list .close-button:hover, +#error-list .close-button:hover { + background: rgba(255, 255, 255, 0.12); + border-radius: 3px; +} +#result-list .title, +#error-list .title { + font-size: 18px; + margin: 0; + font-weight: 400; + color: #333; +} +#result-list .title-text, +#error-list .title-text { + line-break: auto; +} +#error-list { + position: fixed; + width: 494px; + top: 55px; + overflow-y: hidden; + display: none; +} +#links { + height: 22px; + width: 500px; + position: absolute; + top: 579px; + left: 0; + background: #fff; + border-top: #595959; + padding: 0 6px; + font-size: 14px; +} +#links a { + color: #888; +} +#links #result-counter { + float: right; +} +#tags-overview, +#folders-overview { + position: fixed; + top: 55px; + left: 0; + width: 500px; + height: 524px; + background: #eee; + padding: 4px 8px; + overflow-x: hidden; + overflow-y: scroll; +} +#tags-overview .input-description, +#folders-overview .input-description { + margin: 4px 0px; +} +#tags-overview #tags-list, +#folders-overview #tags-list, +#tags-overview #folders-list, +#folders-overview #folders-list { + width: 100%; +} +#tags-overview #tags-list a, +#folders-overview #tags-list a, +#tags-overview #folders-list a, +#folders-overview #folders-list a, +#tags-overview #tags-list a:hover, +#folders-overview #tags-list a:hover, +#tags-overview #folders-list a:hover, +#folders-overview #folders-list a:hover { + color: #fff; + font-size: 15px; + margin: 4px 4px 0 0; } /** EDIT BOOKMARK */ - #edit-bookmark { - padding: 0; - overflow: none; - position: fixed; - top: 0; - left: 0; - width: 500px; - height: 578px; - background: #eee; -} - #edit-bookmark #bookmark-title { - height: 112px; - resize: none; - font-size: 1.2em; -} - #edit-bookmark #bookmark-url { - height: 62px; - resize: none; - font-size: 0.85em; -} - #edit-bookmark #bookmark-tags, #edit-bookmark .tagify { - height: 85px; - font-size: 18px; - border: none; - padding: 4px 2px; - overflow-x: hidden; +#edit-bookmark { + padding: 0; + overflow: none; + position: fixed; + top: 0; + left: 0; + width: 500px; + height: 578px; + background: #eee; +} +#edit-bookmark #bookmark-title { + height: 112px; + resize: none; + font-size: 1.2em; +} +#edit-bookmark #bookmark-url { + height: 62px; + resize: none; + font-size: 0.85em; +} +#edit-bookmark #bookmark-tags, +#edit-bookmark .tagify { + height: 85px; + font-size: 18px; + border: none; + padding: 4px 2px; + overflow-x: hidden; } /** EDIT Options */ - #options { - width: 500px; - height: 580px; - position: fixed; -} - #options textarea { - height: 426px; - font-size: 18px; - font-family: Consolas, monospace, monospace; - resize: none; - padding: 6px 8px; -} - #options .help { - padding: 2px 6px; - background: #fff; - border-left: 4px solid #4494c9; -} - #tips { - font-size: 0.9em; -} - #tips .tip { - margin: 4px; - padding: 2px 4px; - background: #fff; - border-radius: 3px; -} - #tips .fuzzy { - color: #d593ea; -} - #tips .precise { - color: #b1d354; +#options { + width: 500px; + height: 580px; + position: fixed; +} +#options textarea { + height: 426px; + font-size: 18px; + font-family: Consolas, monospace, monospace; + resize: none; + padding: 6px 8px; +} +#options .help { + padding: 2px 6px; + background: #fff; + border-left: 4px solid #4494c9; +} +#tips { + font-size: 0.9em; +} +#tips .tip { + margin: 4px; + padding: 2px 4px; + background: #fff; + border-radius: 3px; +} +#tips .fuzzy { + color: #d593ea; +} +#tips .precise { + color: #b1d354; } /** CUSTOMIZE TAGIFY STYLE */ - .tagify { - height: 90px; - border: none; - --tag-bg: #557292; - --tag-hover: #5c84af; - --tagify-dd-color-primary: #557292; - --tag-text-color: #fff; - --tag-text-color--edit: #111; - --tag-remove-bg: var(--tag-hover); - --tag-pad: 2px 8px 4px 8px; - --tag-inset-shadow-size: 1.35em; - --tag-remove-btn-bg--hover: black; -} - .tagify__tag { - margin: 6px 0 5px 6px; -} - .tagify__tag > div { - font-size: 15px; -} - .tagify__dropdown { - max-height: 235px; - border: none; -} - .tagify__dropdown__wrapper { - border: none; -} - .tagify__dropdown__item { - padding: 3px 8px 3px 8px; - background: #fff; -} - .tagify__dropdown__item--active { - background: #557292 !important; +.tagify { + height: 90px; + border: none; + --tag-bg: #557292; + --tag-hover: #5c84af; + --tagify-dd-color-primary: #557292; + --tag-text-color: #fff; + --tag-text-color--edit: #111; + --tag-remove-bg: var(--tag-hover); + --tag-pad: 2px 8px 4px 8px; + --tag-inset-shadow-size: 1.35em; + --tag-remove-btn-bg--hover: black; +} +.tagify__tag { + margin: 6px 0 5px 6px; +} +.tagify__tag > div { + font-size: 15px; +} +.tagify__dropdown { + max-height: 235px; + border: none; +} +.tagify__dropdown__wrapper { + border: none; +} +.tagify__dropdown__item { + padding: 3px 8px 3px 8px; + background: #fff; +} +.tagify__dropdown__item--active { + background: #557292 !important; } /** SCROLLBAR */ - #result-list::-webkit-scrollbar, #tags-overview::-webkit-scrollbar, #folders-overview::-webkit-scrollbar, #tips::-webkit-scrollbar, .tagify__dropdown__wrapper::-webkit-scrollbar { - width: 8px; - margin-left: 4px; - padding-left: 0px; -} - #result-list::-webkit-scrollbar-track, #tags-overview::-webkit-scrollbar-track, #folders-overview::-webkit-scrollbar-track, #tip::-webkit-scrollbar-track, .tagify__dropdown__wrapper::-webkit-scrollbar-track { - background: #ddd; - padding-left: 2px; -} - #result-list::-webkit-scrollbar-thumb, #tags-overview::-webkit-scrollbar-thumb, #folders-overview::-webkit-scrollbar-thumb, #tips::-webkit-scrollbar-thumb, .tagify__dropdown__wrapper::-webkit-scrollbar-thumb { - background-color: #999; +#result-list::-webkit-scrollbar, +#tags-overview::-webkit-scrollbar, +#folders-overview::-webkit-scrollbar, +#tips::-webkit-scrollbar, +.tagify__dropdown__wrapper::-webkit-scrollbar { + width: 8px; + margin-left: 4px; + padding-left: 0px; +} +#result-list::-webkit-scrollbar-track, +#tags-overview::-webkit-scrollbar-track, +#folders-overview::-webkit-scrollbar-track, +#tip::-webkit-scrollbar-track, +.tagify__dropdown__wrapper::-webkit-scrollbar-track { + background: #ddd; + padding-left: 2px; +} +#result-list::-webkit-scrollbar-thumb, +#tags-overview::-webkit-scrollbar-thumb, +#folders-overview::-webkit-scrollbar-thumb, +#tips::-webkit-scrollbar-thumb, +.tagify__dropdown__wrapper::-webkit-scrollbar-thumb { + background-color: #999; } /** DARK MODE **/ - @media screen and (prefers-color-scheme: dark) { - html, body, #edit-bookmark, #tags-overview, #folders-overview { - background: #222; - } - html a, body a, #edit-bookmark a, #tags-overview a, #folders-overview a, html a:visited, body a:visited, #edit-bookmark a:visited, #tags-overview a:visited, #folders-overview a:visited { - color: #999; - } - html a:hover, body a:hover, #edit-bookmark a:hover, #tags-overview a:hover, #folders-overview a:hover { - color: #bbb; - } - html mark, body mark, #edit-bookmark mark, #tags-overview mark, #folders-overview mark { - color: #6b92c0; - } - strong { - color: #898989; - } - code { - color: #898989; - background-color: #333; - } - #options .help { - background: #000; - } - #tips .tip { - background: #000; - } - .input, .input:active, .input:focus, #search-approach-toggle { - background-color: #000; - border-bottom: 1px solid #444; - color: #ddd; - } - #search-approach-toggle.fuzzy { - color: #d593ea; - } - #search-approach-toggle.precise { - color: #b1d354; - } - #result-list li, #error-list li { - background: #111; - } - #result-list #selected-result, #error-list #selected-result { - background-color: #333; - } - #result-list .title, #error-list .title { - color: #e7e7e7; - } - #links { - background: #000; - } - #result-list::-webkit-scrollbar-track, #tags-overview::-webkit-scrollbar-track, #folders-overview::-webkit-scrollbar-track, #tips::-webkit-scrollbar-track, .tagify__dropdown__wrapper::-webkit-scrollbar-track { - background: #414141; - } - #result-list::-webkit-scrollbar-thumb, #tags-overview::-webkit-scrollbar-thumb, #folders-overview::-webkit-scrollbar-thumb, #tips::-webkit-scrollbar-thumb, .tagify__dropdown__wrapper::-webkit-scrollbar-thumb { - background-color: #5f5f5f; - } - .input-description { - color: #777; - } - .tagify__dropdown__wrapper { - background: #111; - } - .tagify__dropdown__item { - color: #ccc; - background: #000; - } - .tagify__tag > div > [contenteditable] { - color: #eee; - } -} - \ No newline at end of file +@media screen and (prefers-color-scheme: dark) { + html, + body, + #edit-bookmark, + #tags-overview, + #folders-overview { + background: #222; + } + html a, + body a, + #edit-bookmark a, + #tags-overview a, + #folders-overview a, + html a:visited, + body a:visited, + #edit-bookmark a:visited, + #tags-overview a:visited, + #folders-overview a:visited { + color: #999; + } + html a:hover, + body a:hover, + #edit-bookmark a:hover, + #tags-overview a:hover, + #folders-overview a:hover { + color: #bbb; + } + html mark, + body mark, + #edit-bookmark mark, + #tags-overview mark, + #folders-overview mark { + color: #6b92c0; + } + strong { + color: #898989; + } + code { + color: #898989; + background-color: #333; + } + #options .help { + background: #000; + } + #tips .tip { + background: #000; + } + .input, + .input:active, + .input:focus, + #search-approach-toggle { + background-color: #000; + border-bottom: 1px solid #444; + color: #ddd; + } + #search-approach-toggle.fuzzy { + color: #d593ea; + } + #search-approach-toggle.precise { + color: #b1d354; + } + #result-list li, + #error-list li { + background: #111; + } + #result-list #selected-result, + #error-list #selected-result { + background-color: #333; + } + #result-list .title, + #error-list .title { + color: #e7e7e7; + } + #links { + background: #000; + } + #result-list::-webkit-scrollbar-track, + #tags-overview::-webkit-scrollbar-track, + #folders-overview::-webkit-scrollbar-track, + #tips::-webkit-scrollbar-track, + .tagify__dropdown__wrapper::-webkit-scrollbar-track { + background: #414141; + } + #result-list::-webkit-scrollbar-thumb, + #tags-overview::-webkit-scrollbar-thumb, + #folders-overview::-webkit-scrollbar-thumb, + #tips::-webkit-scrollbar-thumb, + .tagify__dropdown__wrapper::-webkit-scrollbar-thumb { + background-color: #5f5f5f; + } + .input-description { + color: #777; + } + .tagify__dropdown__wrapper { + background: #111; + } + .tagify__dropdown__item { + color: #ccc; + background: #000; + } + .tagify__tag > div > [contenteditable] { + color: #eee; + } +} diff --git a/popup/js/model/options.js b/popup/js/model/options.js index 731ae6d1..c64d02b1 100644 --- a/popup/js/model/options.js +++ b/popup/js/model/options.js @@ -60,7 +60,7 @@ export const defaultOptions = { /** * Width of the left color marker in search results in pixels */ - colorStripeWidth: 6, + colorStripeWidth: 5, /** * Color for bookmark results, expressed as CSS color diff --git a/popup/js/search/common.js b/popup/js/search/common.js index f8afc9e5..99c5bb91 100644 --- a/popup/js/search/common.js +++ b/popup/js/search/common.js @@ -315,8 +315,6 @@ export function calculateFinalScore(results, searchTerm) { el.score = score } - console.log(results) - return results } diff --git a/popup/js/view/searchView.js b/popup/js/view/searchView.js index 27c848a7..c7afe914 100644 --- a/popup/js/view/searchView.js +++ b/popup/js/view/searchView.js @@ -154,6 +154,9 @@ export function renderSearchResults(result) { resultListItem.appendChild(urlDiv) resultListItem.addEventListener('mouseenter', hoverResultItem) resultListItem.addEventListener('mouseup', openResultItem) + document.addEventListener('contextmenu', (e) => { + e.preventDefault() // Disable right mouse context menu + }) if (ext.opts.displaySearchMatchHighlight && ext.model.searchTerm) { // Use mark.js to highlight search results, if we don't have already done before in fuzzy search @@ -287,11 +290,17 @@ export function openResultItem(event) { // Render search results again to avoid display bugs renderSearchResults() - return } } + // Right click mouse -> copy URL of result to clipboard + if (event.button === 2) { + navigator.clipboard.writeText(url) + event.preventDefault() + return + } + // If we press SHIFT or ALT while selecting an entry: // -> Open it in current tab if (event.shiftKey || event.altKey) { diff --git a/sass/style.scss b/sass/style.scss deleted file mode 100644 index f9e5ec23..00000000 --- a/sass/style.scss +++ /dev/null @@ -1,506 +0,0 @@ -@charset "utf-8"; -@import '../node_modules/minireset.css/minireset.sass'; -@import '../node_modules/@yaireo/tagify/dist/tagify'; - -html, -body, -#container, -#search { - width: 500px; - height: 600px; - overflow: hidden; -} -body { - background: #eee; - color: #898989; - padding: 0; - font-size: 1.1em; - a { - color: #4494c9; - text-decoration: none; - } - mark { - font-weight: bold; - color: #356ba9; - background: none; - } - small { - color: #aaa; - } -} -body, -textarea { - font-family: -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', - 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; -} -.input, -.input:active, -.input:focus { - width: 100%; - max-width: 500px; - min-width: 500px; - height: 55px; - padding: 4px 8px; - font-size: 24px; - border-radius: 0; - border: none; - outline: none; - background: #fff; - border-bottom: 1px solid #ccc; -} -#search-input { - max-width: 473px; - min-width: 473px; -} -.input-description { - margin: 2px 4px; -} -#search-approach-toggle { - float: right; - height: 55px; - width: 26px; - padding: 0 3px 0 0; - writing-mode: vertical-rl; - font-size: 12px; - font-weight: 500; - text-align: center; - background: #fff; - border-bottom: 1px solid #ccc; - cursor: pointer; -} -#search-approach-toggle.fuzzy { - color: #8667cd; -} -#search-approach-toggle.precise { - color: #9dcd1b; -} -#search-approach-toggle.precise { - color: #54c4d3; -} -code { - background-color: #d5d5d5; - color: #676767; - border-radius: 3px; - font-size: 0.75em; - padding: 1px 4px; -} -.badge { - color: #fff; - font-size: 11px; - border-radius: 3px; - padding: 1px 3px 2px 3px; - margin-right: 4px; - white-space: nowrap; - display: inline-block; - position: relative; - top: -3px; -} -.tags { - background: #557292; - .divider:before { - content: ' '; - } - mark { - color: #7cb3f6; - } - small { - color: #a2bbd6; - } -} -.folder { - background: #559292; - .divider:before { - content: ' \276F \0020'; - } - mark { - color: #85dbdb; - } - small { - color: #a3d0d0; - } -} -.window { - background: #8061ca; - color: #efe8ff; -} -.score { - background: rgb(116, 116, 116); - color: #ddd; -} -.last-visited { - background: rgb(142, 187, 38); - color: #fff; -} -.visit-counter { - background: rgb(187, 172, 38); - color: #fff; -} -.date-added { - background: rgb(187, 140, 38); - color: #fff; -} -.url { - font-size: 13px; - margin: 0; - overflow: hidden; - white-space: nowrap; -} -.controls { - text-align: right; - position: absolute; - bottom: 8px; - right: 8px; - width: 100%; - padding-left: 8px; - .button { - height: 28px; - border-radius: 3px; - } - .reset-button, - .delete-button { - background: rgb(238, 67, 67) !important; - color: #fff !important; - float: left; - } - .cancel-button { - background: rgb(146, 146, 146) !important; - color: #fff !important; - } - .help-button { - background: rgb(68, 148, 201) !important; - color: #fff !important; - float: left; - } - .save-button { - background: rgb(95, 201, 68) !important; - color: #fff !important; - } - a, - a:hover { - background: #777; - color: #fff; - margin: 0 0 0 8px; - padding: 2px 12px 4px 12px; - border: none; - font-size: 16px; - } -} -#result-list, -#error-list { - padding: 4px 6px 0 4px; - height: 523px; - overflow-x: hidden; - overflow-y: scroll; - a { - color: #888; - } - li { - background-color: #fff; - margin: 0 0 4px 0; - padding: 4px 0px 4px 6px; - border-radius: 3px; - overflow: hidden; - cursor: pointer; - border-left: 6px solid #ccc; - } - #selected-result { - background-color: #dadada; - } - li.error { - color: rgb(204, 88, 88); - border-left: 6px solid rgb(204, 88, 88); - } - .edit-button, - .close-button { - float: right; - } - .edit-button:hover, - .close-button:hover { - background: rgba(255, 255, 255, 0.12); - border-radius: 3px; - } - .title { - font-size: 18px; - margin: 0; - font-weight: 400; - color: #333; - } - .title-text { - line-break: auto; - } -} -#error-list { - position: fixed; - width: 494px; - top: 55px; - overflow-y: hidden; - display: none; -} -#links { - height: 22px; - width: 500px; - position: absolute; - top: 579px; - left: 0; - background: #fff; - border-top: #595959; - padding: 0 6px; - font-size: 14px; - a { - color: #888; - } - - #result-counter { - float: right; - } -} - -#tags-overview, -#folders-overview { - position: fixed; - top: 55px; - left: 0; - width: 500px; - height: 524px; - background: #eee; - padding: 4px 8px; - overflow-x: hidden; - overflow-y: scroll; - - .input-description { - margin: 4px 0px; - } - - #tags-list, - #folders-list { - width: 100%; - a, - a:hover { - color: #fff; - font-size: 15px; - margin: 4px 4px 0 0; - } - } -} - -/** EDIT BOOKMARK */ -#edit-bookmark { - padding: 0; - overflow: none; - position: fixed; - top: 0; - left: 0; - width: 500px; - height: 578px; - background: #eee; - - #bookmark-title { - height: 112px; - resize: none; - font-size: 1.2em; - } - #bookmark-url { - height: 62px; - resize: none; - font-size: 0.85em; - } - #bookmark-tags, - .tagify { - height: 85px; - font-size: 18px; - border: none; - padding: 4px 2px; - overflow-x: hidden; - } -} -/** EDIT Options */ -#options { - width: 500px; - height: 580px; - position: fixed; - textarea { - height: 426px; - font-size: 18px; - font-family: Consolas, monospace, monospace; - resize: none; - padding: 4px; - } - .help { - padding: 2px 6px; - background: #fff; - border-left: 4px solid #4494c9; - } -} - -#tips { - font-size: 0.9em; - .tip { - margin: 4px; - padding: 2px 4px; - background: #fff; - border-radius: 3px; - } - .fuzzy { - color: #d593ea; - } - .precise { - color: #b1d354; - } -} - -/** CUSTOMIZE TAGIFY STYLE */ - -.tagify { - height: 90px; - border: none; - --tag-bg: #557292; - --tag-hover: #5c84af; - --tagify-dd-color-primary: #557292; - --tag-text-color: #fff; - --tag-text-color--edit: #111; - --tag-remove-bg: var(--tag-hover); - --tag-pad: 2px 8px 4px 8px; - --tag-inset-shadow-size: 1.35em; - --tag-remove-btn-bg--hover: black; -} -.tagify__tag { - margin: 6px 0 5px 6px; -} -.tagify__tag > div { - font-size: 15px; -} -.tagify__dropdown { - max-height: 235px; - border: none; -} -.tagify__dropdown__wrapper { - border: none; -} -.tagify__dropdown__item { - padding: 3px 8px 3px 8px; - background: #fff; -} -.tagify__dropdown__item--active { - background: #557292 !important; -} - -/** SCROLLBAR */ -#result-list::-webkit-scrollbar, -#tags-overview::-webkit-scrollbar, -#folders-overview::-webkit-scrollbar, -#tips::-webkit-scrollbar, -.tagify__dropdown__wrapper::-webkit-scrollbar { - width: 8px; - margin-left: 4px; - padding-left: 0px; -} -#result-list::-webkit-scrollbar-track, -#tags-overview::-webkit-scrollbar-track, -#folders-overview::-webkit-scrollbar-track, -#tip::-webkit-scrollbar-track, -.tagify__dropdown__wrapper::-webkit-scrollbar-track { - background: #ddd; - padding-left: 2px; -} -#result-list::-webkit-scrollbar-thumb, -#tags-overview::-webkit-scrollbar-thumb, -#folders-overview::-webkit-scrollbar-thumb, -#tips::-webkit-scrollbar-thumb, -.tagify__dropdown__wrapper::-webkit-scrollbar-thumb { - background-color: #999; -} - -/** DARK MODE **/ -@media screen and (prefers-color-scheme: dark) { - html, - body, - #edit-bookmark, - #tags-overview, - #folders-overview { - background: #222; - a, - a:visited { - color: #999; - } - a:hover { - color: #bbb; - } - mark { - color: #6b92c0; - } - } - strong { - color: #898989; - } - code { - color: #898989; - background-color: #333333; - } - #options { - .help { - background: #000000; - } - } - #tips { - .tip { - background: #000; - } - } - - .input, - .input:active, - .input:focus, - #search-approach-toggle { - background-color: #000; - border-bottom: 1px solid #444; - color: #ddd; - } - #search-approach-toggle.fuzzy { - color: #d593ea; - } - #search-approach-toggle.precise { - color: #b1d354; - } - #result-list, - #error-list { - li { - background: #111; - } - #selected-result { - background-color: #333; - } - .title { - color: #e7e7e7; - } - } - #links { - background: #000; - } - #result-list::-webkit-scrollbar-track, - #tags-overview::-webkit-scrollbar-track, - #folders-overview::-webkit-scrollbar-track, - #tips::-webkit-scrollbar-track, - .tagify__dropdown__wrapper::-webkit-scrollbar-track { - background: rgb(65, 65, 65); - } - #result-list::-webkit-scrollbar-thumb, - #tags-overview::-webkit-scrollbar-thumb, - #folders-overview::-webkit-scrollbar-thumb, - #tips::-webkit-scrollbar-thumb, - .tagify__dropdown__wrapper::-webkit-scrollbar-thumb { - background-color: rgb(95, 95, 95); - } - .input-description { - color: #777; - } - .tagify__dropdown__wrapper { - background: #111; - } - .tagify__dropdown__item { - color: #ccc; - background: #000; - } - .tagify__tag > div > [contenteditable] { - color: #eee; - } -}