diff --git a/pages/search/modules/dom.js b/pages/search/modules/dom.js index 9acf086..95ee657 100644 --- a/pages/search/modules/dom.js +++ b/pages/search/modules/dom.js @@ -1,5 +1,22 @@ -const tabView = (tab) => - `${tab.displayName}` +const fuzzysort = window.fuzzysort + +/* https://png-pixel.com/ */ +const defaultFavicon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII=' + +const tabView = (result) => { + const tab = result.obj + const [label, title, url] = + result.map((field) => fuzzysort.highlight(field)) + + return ` + + ${label ?? tab.label} + + ${title ?? tab.title} + ${url ?? tab.url} + + ` +} export const updateSearchResults = (state) => { const container = document.getElementById('searchResults') diff --git a/pages/search/modules/store.js b/pages/search/modules/store.js index e50d245..3f799c3 100644 --- a/pages/search/modules/store.js +++ b/pages/search/modules/store.js @@ -27,17 +27,9 @@ export const init = ({ 'url', ].reduce((acc, x) => (acc[x] = tab[x], acc), {}) - const addDisplayName = (tab) => ({ - displayName: ` - ${tab.label} - ${tab.title} / ${tab.url}`, - ...tab, - }) - const shapeTabs = (tabs) => tabs .map(addLabel(tabs)) .map(pickFields) - .map(addDisplayName) const fetchTabs = () => browserTabs.query({ currentWindow: true, active: false }) @@ -51,7 +43,7 @@ export const init = ({ state.results = fuzzysort.go(state.query, state.tabs, { keys: ['label', 'title', 'url'], all: true, - }).map(({obj}) => obj) + }) } /* */ diff --git a/pages/search/search.css b/pages/search/search.css index cdb0988..69c0281 100644 --- a/pages/search/search.css +++ b/pages/search/search.css @@ -35,6 +35,7 @@ main { .tab { appearance: none; text-align: unset; + align-items: center; background: inherit; font: inherit; @@ -49,14 +50,35 @@ main { overflow: hidden; } -.tab > span:first-child { +.tab:focus-visible { + outline: none; + background-color: var(--gray-light-30); +} + +.tab > .favicon { + width: calc(2 * var(--step)); + height: calc(2 * var(--step)); +} + +.tab > .label { font-family: monospace; - color: var(--gray-dark-05); + color: var(--gray-dark-10); flex-shrink: 0; } -.tab > span:last-child { +.tab > .url { + color: var(--gray-dark-10); +} + +.tab > .title, +.tab > .url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + +.tab b { + font-weight: normal; + text-shadow: 0px 0px 1px currentColor; + text-decoration: underline; +} diff --git a/pages/search/search.html b/pages/search/search.html index 4743718..0197a20 100644 --- a/pages/search/search.html +++ b/pages/search/search.html @@ -11,26 +11,7 @@ - - - jk - - Color - Firefox Design Systems - - - https://acorn.firefox.com/latest/styles/color-MZHBVuZc#section-background-c2 - - - - kjqww - - Color - Firefox Design Systems - - - https://acorn.firefox.com/latest/styles/color-MZHBVuZc#section-background-c2 - - - +