also search tab.url, added options: "Tab Property Prefixes" and "Hide Header" (#2)

Author: NiklasGollenstede

README.md

@@ -1,18 +1,19 @@
 
 # TST Tab Search -- filter Tree Style Tab's sidebar
 
-This is an extension for the browser extension [Tree Style Tabs](https://github.com/piroor/treestyletab#readme) (TST). It adds a search box at the bottom of TST's sidebar, allowing to search the titles of the tabs in the current window/sidebar, optionally case sensitive, as whole word, or by regular expression.
-Matching tabs will be highlighted in the tree, and/or non-matches will be suppressed.
+This is an extension for the browser extension [Tree Style Tabs](https://github.com/piroor/treestyletab#readme) (TST). It adds a search box at the bottom of TST's sidebar, allowing to search the titles and URLs (or whatever) of the tabs in the current window/sidebar, optionally case sensitive, as whole word, or by regular expression.
+Matching tabs will be highlighted in the tree, and/or non-matches will be suppressed (see extension preferences).
+Should the search bar not show up after installing this extension, then have a look at `about:addons` > "Extensions" > "TST Tab Search".
 
 ![Searching for Cats](./resources/screenshot.png)
 
-Thats pretty much all there is to say. Might add a few more highlight options.
-Many thanks to TST's author [piroor](https://github.com/piroor), who has not only developed TST as a great standalone extension, but also designed a very good API for other extensions to interact and integrate with TST. With that, writing the initial version of this extension from scratch took only about to long afternoons.
+Thats pretty much all there is to say.
+Many thanks to TST's author [piroor](https://github.com/piroor), who has not only developed TST as a great standalone extension, but also designed a very good API for other extensions to interact and integrate with TST. With that, writing the initial version of this extension from scratch took only about two long afternoons.
 
 <b>Permissions used</b>:
 
+- "Access to browser tabs": Get titles of tabs to be searched.
 - "Display notifications to you": Tell you when something goes wrong, (so you should never see this ;) ).
-- "Access to browser tabs" (manually granted via TST): Search titles of tabs.
 
 <!-- NOTE: AMO keeps line breaks within paragraphs ... -->
 

src/background/index.js

@@ -27,7 +27,9 @@ async function register() {
 		name: manifest.name,
 		icons: manifest.icons,
 		listeningTypes: [ 'wait-for-shutdown', ],
-		style: [ 'hit', 'child', 'miss', ].map(name => Object.values(options.result.children[name].children.styles.children).map(_=>_.value).join('')).join(''),
+		style: [ 'hit', 'child', 'miss', ].map(
+			name => Object.values(options.result.children[name].children.styles.children).map(_=>_.value).join('\n')
+		).join('\n') +'\n'+ options.advanced.children.hideHeader.value,
 		subPanel: {
 			title: manifest.name,
 			url: Runtime.getURL('src/content/embed.html'),
@@ -62,30 +64,53 @@ const classes = {
 	failed: [ 'tst-search:not-matching', ],
 };
 
-messages.addHandler(onSubmit); async function onSubmit({
-	term, matchCase, wholeWord, regExp,
+/**
+ * Does the actual search on the tabs in a window. Called from the panel via messaging.
+ * @param {string}   options.term          The term to search for.
+ * @param {boolean}  options.matchCase     See `../common.options.js#model.panel.children.matchCase.input.suffix`.
+ * @param {boolean}  options.wholeWord     See `../common.options.js#model.panel.children.wholeWord.input.suffix`.
+ * @param {boolean}  options.regExp        See `../common.options.js#model.panel.children.regExp.input.suffix`.
+ * @param {boolean}  options.fieldsPrefix  See `../common.options.js#model.search.children.fieldsPrefix.description`.
+ * @param {number?}  options.windowId      Optional. The ID of the window to search.
+ *                                         Defaults to `this?.windowId` (which may be set to the message `sender`) or `Windows.getCurrent().id`.
+ * @returns
+ */
+async function onSubmit({
+	term, matchCase, wholeWord, regExp, fieldsPrefix = options.search.children.fieldsPrefix.value,
 	windowId = this?.windowId, // eslint-disable-line no-invalid-this
 }) { try {
 	windowId || (windowId = (await Windows.getCurrent()).id);
 	console.info('TST Search: onSubmit', windowId, this, ...arguments); // eslint-disable-line no-invalid-this
 
+	// save search flags
 	Object.entries({ matchCase, wholeWord, regExp, }).forEach(([ name, value, ]) => {
-		options.search.children[name].value = value;
+		options.panel.children[name].value = value;
 	});
 
-	TST.removeTabState({ tabs: '*', state: [].concat(Object.values(classes)), }).catch(onError);
-	if (!term) { return -1; }
+	// clear previous search on empty term
+	if (!term) { TST.removeTabState({ tabs: '*', state: [].concat(Object.values(classes)), }).catch(onError); return -1; }
 
+	// pick tab properties to search
+	const fields = [ 'title', 'url', ];
+	if (fieldsPrefix) {
+		const match = (/^(\w+(?:[|]\w+)*): ?(.*)/).exec(term);
+		if (match) { fields.splice(0, Infinity, ...match[1].split('|')); term = match[2]; }
+	}
+
+	// decide how to search tab properties
 	let matches; if (regExp) {
 		if (wholeWord) { term = String.raw`\b(?:${term})\b`; }
 		const exp = new RegExp(term, matchCase ? '' : 'i');
-		matches = tab => exp.test(tab.title);
+		matches = tab => fields.some(key => exp.test(toString(tab[key])));
 	} else {
 		const _map = matchCase ? _=>_ :_=>_.toLowerCase();
 		const map = wholeWord ? _=> ' '+_map(_)+' ' :_=>_map(_);
 		term = map(term);
-		matches = tab => typeof tab.title === 'string' && map(tab.title).includes(term);
+		matches = tab => fields.some(key => map(toString(tab[key])).includes(term));
 	}
+	function toString(prop) { return prop == null ? '' : typeof prop === 'string' ? prop : JSON.stringify(prop); }
+
+	// get tabs
 	const [ nativeTabs, treeItems, ] = await Promise.all([
 		Tabs.query({ windowId, }),
 		TST.getTree({ window: windowId, }),
@@ -95,13 +120,14 @@ messages.addHandler(onSubmit); async function onSubmit({
 		return { ...nativeTabs[treeItem.index], ...treeItem, };
 	};
 	const tabs = treeItems.map(mergeTabs);
+
+	// find search results
 	const result = {
 		matching: new Set,
 		hasChild: new Set,
 		hidden: new Set,
 		failed: new Set,
 	};
-
 	(function search(tabs) { return tabs.map(tab => {
 		if (tab.collapsed || tab.hidden) { result.hidden.add(tab); return false; }
 		let ret = false; {
@@ -110,14 +136,19 @@ messages.addHandler(onSubmit); async function onSubmit({
 		} !ret && result.failed.add(tab); return ret;
 	}).some(_=>_); })(tabs);
 
-	(await Object.keys(result).map(state => classes[state].length && TST.addTabState({ tabs: Array.from(result[state], _=>_.id), state: classes[state], })));
+	// apply findings
+	(await TST.removeTabState({ tabs: '*', state: [].concat(Object.values(classes)), }).catch(error => void onError(error)));
+	(await Promise.all(Object.keys(result).map(
+		state => classes[state].length && result[state].size
+		&& TST.addTabState({ tabs: Array.from(result[state], _=>_.id), state: classes[state], })
+	)));
 
 	return result.matching.size;
 
-} catch (error) { notify.error('Error in onSubmit', error); return -2; } }
-
+} catch (error) { notify.error('Search failed!', error); return -2; } }
+messages.addHandler(onSubmit);
 messages.addHandler(function getOptions() {
-	return Object.fromEntries(Object.entries(options.search.children).map(pair => {
+	return Object.fromEntries(Object.entries(options.panel.children).map(pair => {
 		pair[1] = pair[1].value; return pair;
 	}));
 });

src/common/options.js

@@ -13,8 +13,8 @@ const model = {
 		default: true,
 		input: { type: 'control', label: `(re-)register with TST`, id: `register`, },
 	},
-	search: {
-		title: 'Search Options',
+	panel: {
+		title: 'Search Box Options',
 		expanded: true,
 		description: `<small>These are only loaded when the TST sidebar (or a window) is first opened.</small>`,
 		default: true, children: {
@@ -37,7 +37,8 @@ const model = {
 		},
 	},
 	result: {
-		title: 'Highlight Results',
+		title: 'Result Highlighting',
+		description: `Choose which styles to apply to tabs of the different search result classes.<br>No styles leaves that class unchanged.`,
 		expanded: true,
 		default: true, children: {
 			hit: {
@@ -68,6 +69,9 @@ const model = {
 						[ 'red', false, 'Red Text', String.raw`
 							.tab:not(.pinned).tst-search\:child-matching .label { color: red; }
 						`, ],
+						[ 'hide', false, 'Hide Completely', String.raw`
+							.tab.tst-search\:child-matching:not(.tst-search\:matching) { display: none; }
+						`, ],
 					]),
 				},
 			},
@@ -88,14 +92,55 @@ const model = {
 								margin-bottom: -13.3px;
 								transform: scaleY(50%); transform-origin: top;
 							}
-						`, ],[ 'hide', false, 'Hide Completely', String.raw`
+						`, ],
+						[ 'hide', false, 'Hide Completely', String.raw`
 							.tab.tst-search\:not-matching { display: none; }
 						`, ],
 					]),
 				},
 			},
 		},
 	},
+	search: {
+		title: 'Search Options',
+		expanded: true,
+		description: ``,
+		default: true, children: {
+			fieldsPrefix: {
+				title: 'Tab Property Prefixes',
+				description: String.raw`By default ${manifest.name} will look for the search term, according to the flags set, in the tab's title (the text displayed in the tooltip when holding the mouse cursor the tab) and the URL (the web address displayed at the center top of the window when the tab is active). This should do for most users most of the time.<br>
+				<details><summary>Most users? Go on ...</summary>
+					With this option active, the search term can be prefixed with a pipe separated list of tab property names, followed by a colon and an optional space (i.e. matching <code>/^\w+([|]\w+)*: ?/</code>). If such a prefix is found, it is removed from the search term, and the listed properties (converted to strings: empty if <code>null</code>ish, otherwise as JSON (w/o spaces) if not a <code>string</code>) are searched, instead of the default <code>title</code> and <code>url</code>.<br>
+					This is probably mostly useful for developers. But if one knows what to search for, there is some interesting stuff to be found:<ul>
+						<li>tabs playing audio: <code>audible: true</code></li>
+						<li>muted tabs: <code>mutedInfo: "muted":true</code></li>
+						<li>tabs with SVG favicons: <code>favIconUrl: [./]svg\b</code> (<code>.*</code>)</li>
+						<li>tabs by container (ID): <code>cookieStoreId: firefox-container-1</code></li>
+						<li>loaded tabs: <code>discarded: false</code></li>
+						<li>tabs by ID: <code>id: ^42$</code> (<code>.*</code>)</li>
+					</ul>
+				</details>`,
+				default: false,
+				input: { type: 'boolean', suffix: `enable field prefixes`, },
+			},
+		},
+	},
+	advanced: {
+		title: 'Experimental/Advanced Options',
+		expanded: false,
+		description: `Advanced and/or experimental options, that may break and/or disappear at any time. These may also require a reload of TST, this extension or the sidebars to apply.`,
+		default: true, children: {
+			hideHeader: {
+				title: 'Hide Header',
+				description: `Hides the header above the search, that says something like "${manifest.name}".<br>NOTE: That header is not part of this extension, but of TST itself, and from a UX perspective, should absolutely be there (by default). It may (in the future?) also be used to switch sub panels or do any number of other things. Please DO NOT raise issues about anything loke that with TST while this option is active!`,
+				default: '',
+				input: { type: 'boolInt', suffix: `I vow to have read the above and not to annoy TST's authors about it.`, off: '', on: `
+					#subpanel-container { height: 35px !important; }
+					#subpanel-header { display: none !important; }
+				`, },
+			},
+		},
+	},
 	debug: {
 		title: 'Debug Level',
 		expanded: false,

src/views/options.js

@@ -5,6 +5,15 @@
 	'background/': { register, },
 }) => async (window, location) => { const { document, } = window;
 
+document.head.insertAdjacentHTML('beforeend', `<style>
+	/* details in checkbox descriptions */
+	.checkbox-wrapper { vertical-align: top !important; }
+	.value-suffix details[open] { max-width: calc(100% - 40px); }
+
+	/* fix lists in descriptions */
+	.pref-description li:not(#not) { list-style: unset; margin-left: 6px; }
+</style>`);
+
 async function onCommand({ name, }, _buttonId) { try { switch (name) {
 	case 'register': {
 		(await register()); notify.info('Registered', `${manifest.name} should now work!`);