add screenshots to README, fix sync search result

Author: NiklasGollenstede

README.md

@@ -16,7 +16,8 @@ This is an extension for the browser extension <a href="https://github.com/piroo
     <li> search by any tab property </li>
 </ul>
 
-<img alt="Tab searches with different settings " src="./resources/screenshot-merged.png" width="600px"> <!-- remove this for AMO -->
+<img alt="Tab searches with different settings" src="./resources/screenshot-merged.png" width="600px"> <!-- remove this for AMO -->
+<!-- Left to right: global search hotkey, customized filters, and search by tab ID. -->
 
 There are quite a lot of things that can, but don't need to, be changed in the extensions options. The descriptions of the options also explain how some of the more advanced search features work.
 Should the search bar not show up after installing this extension, then have a look at the top of the options page as well.
@@ -34,6 +35,27 @@ This extension doesn't collect any data, nor does it directly or indirectly cont
 This extension only momentarily changes how tabs are displayed in the sidebar, but does no persistent changes to them, and should thus also not be able to cause any (tab) data loss.
 
 
+## Screenshots
+
+![](./resources/screenshot-default.png)
+Default view of search results in Firefox 89 (other screenshots have customized options).
+
+![](./resources/screenshot-visuals.png)
+Highlighting search results in bold orange, the currently selected result in bold blue, and parents of search results in green.
+All other tabs are shrunk and dimmed.
+Pressing Ctrl+Enter will switch to the blue tab.
+
+![](./resources/screenshot-global.png)
+The global hotkey allows searching (and then switching to) tabs without moving the cursor. For technical reasons, the search panel has to open in the little popup at the top.
+
+![](./resources/screenshot-by-id.png)
+There is an option to display the tab IDs while the search panel is focused, to the quickly switch to tabs by id.
+
+![](./resources/screenshot-modes.png)
+Additional search modes: case sensitive, as whole word, or by regular expression.
+By default tab titles and URLs are searched, but there is an option to search all other (tree style) tab properties as well.
+
+
 ## Additional Features
 
 I am happy to receive feedback or contributions on this. This is the list of stuff that should be addressed:

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "tst-search",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"title": "TST Tab Search",
 	"description": "Filter Tree Style Tab's sidebar by search terms.",
 	"author": "Niklas Gollenstede",

src/background/index.esm.js

@@ -161,8 +161,9 @@ async function doSearch({
 	} term += '';
 
 	// pick tab properties to search
-	const fields = fieldsDefault; if (fieldsPrefix) {
-		if (options.search.children.searchByTabIds.value[0] && (/^\s*\d+\s*$/).test(term)) { fields.splice(0, Infinity, 'id'); }
+	const fields = fieldsDefault;
+	if (options.search.children.searchByTabIds.value[0] && (/^\s*\d+\s*$/).test(term)) { fields.splice(0, Infinity, 'id'); }
+	else if (fieldsPrefix) {
 		const match = (/^(\w+(?:[|]\w+)*): ?(.*)/).exec(term);
 		if (match) { fields.splice(0, Infinity, ...match[1].split('|')); term = match[2]; }
 	}

src/content/embed.esm.js

@@ -16,9 +16,9 @@ const port = new Port(Browser.Runtime.connect(), web_ext_Port);
 (async () => {
 	const windowId = +(new globalThis.URL(globalThis.location.href).searchParams.get('windowId') ?? -1);
 
-	const initialTerm = windowId === -1 ? '' : (await RPC.onSearched({ windowId, }, result => setResult(result))).term;
+	const initialTerm = windowId === -1 ? '' : (await RPC.onSearched({ windowId, }, result => { !inputs.term.matches(':focus') && setResult(result); })).term;
 
-	const { setResult, applyOptions, } = (await render(window, { RPC, destructive: true, windowId, initialTerm, }));
+	const { inputs, setResult, applyOptions, } = (await render(window, { RPC, destructive: true, windowId, initialTerm, }));
 
 	applyOptions((await RPC.onOptions(applyOptions)));
 

src/content/form.esm.js

@@ -30,6 +30,7 @@ export default async function render(/**@type{Window}*/window, {
 		setResult((await RPC.doSearch(form)));
 	}
 	function setResult(/**@type{import('../background/index.esm.js').SearchResult}*/result) {
+		!inputs.term.matches(':focus') && (inputs.term.value = result.term);
 		matchIndex.textContent = result.failed ? '??' : result.cleared ? '' : result.index >= 0 ? ((result.index + 1) +' / '+ result.matches) : (result.matches || 'none') +'';
 		document.documentElement.style.setProperty('--count-width', matchIndex.clientWidth +'px');
 	}