☰

Habr Comments Filter

Hides comments with low rating.

// ==UserScript==
// @name           Habr Comments Filter
// @name:ru        Хабр Фильтр комментов
// @namespace      habr_comments_filter
// @version        2.0.1
// @description    Hides comments with low rating.
// @description:ru Спрятать комменты с оценкой ниже выбранной.
// @author         Dystopian
// @license        WTFPL
// @match          https://habr.com/*
// @icon           https://habr.com/favicon.ico
// @grant          GM_log
// @run-at         document-end
// ==/UserScript==

(function() {
	'use strict';

	const COMMENT_HIGHLIGHT_LIGHT = '#fff7d7';
	const COMMENT_HIGHLIGHT_DARK = '#484028';

	let DEBUG = 0;
	let currentThreshold = null;
	let observer;
	let isCreatingButton = false;

	// custom log - useful for mobile version debug
	let isCustomLog = false;
	let isCustomLogCollapsed = true;
	const customLogBoxID = 'custom-log-box';
	const customLogBuffer = [];
	function getTimestamp() {
		const d = new Date();
		const pad = (n, z = 2) => ('00' + n).slice(-z);
		return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}.${pad(d.getMilliseconds(), 3)}`;
	}
	function formatElement(el) {
		if (!(el instanceof Element)) return String(el);
		let s = `<${el.tagName.toLowerCase()}`;
		if (el.id) s += `#${el.id}`;
		if (el.className) s += '.' + el.className.trim().replace(/\s+/g, '.');
		return s + '>';
	}
	function smartFormat(x) {
		if (x instanceof Event) return `[Event ${x.type} ${x.constructor.name}] target=${formatElement(x.target)}`;
		if (x instanceof Element) return formatElement(x);
		try {return JSON.stringify(x);}
		catch {return String(x);}
	}
	function customLog(...args) {
		const maxLines = 100;
		const msg = args.map(smartFormat).join(' ');
		customLogBuffer.push(`${getTimestamp()} ${msg}`);
		if (customLogBuffer.length > maxLines) customLogBuffer.shift();
		renderCustomLog();
	}
	function renderCustomLog() {
		let pre = document.getElementById(customLogBoxID);
		if (!pre) {
			const box = document.createElement('div');
			Object.assign(box.style, {
				position: 'fixed',
				bottom: '0',
				left: '0',
				width: '100%',
				maxHeight: '10em',
				overflowY: 'auto',
				color: 'lime',
				fontSize: '10px',
				fontFamily: 'monospace',
				zIndex: '999999',
				padding: '4px',
			});
			const btn = document.createElement('button');
			Object.assign(btn.style, {
				position: 'fixed',
				right: '4px',
				background: 'rgba(0,0,0,0.8)',
				border: '1px solid lime',
				color: 'inherit',
			});
			btn.onclick = () => {
				isCustomLogCollapsed = !isCustomLogCollapsed;
				if (isCustomLogCollapsed) {
					pre.style.display = 'none';
					box.style.height = '1.5em';
					box.style.background = '';
					btn.textContent = '+';
				} else {
					pre.style.display = '';
					box.style.height = '';
					box.style.background = 'rgba(0,0,0,0.8)';
					btn.textContent = '−';
					pre.textContent = customLogBuffer.join('\n');
					box.scrollTop = box.scrollHeight;
				}
			};
			box.appendChild(btn);
			pre = document.createElement('pre');
			pre.id = customLogBoxID;
			Object.assign(pre.style, {
				margin: '0',
				whiteSpace: 'pre-wrap',
				fontFamily: 'inherit',
				fontSize: 'inherit',
				color: 'inherit',
			});
			box.appendChild(pre);
			document.body.appendChild(box);
			isCustomLogCollapsed = !isCustomLogCollapsed;
			btn.click(); // init state
		}
		if (!isCustomLogCollapsed) {
			pre.textContent = customLogBuffer.join('\n');
			pre.parentElement.scrollTop = pre.parentElement.scrollHeight;
		}
	}
	function log(level, ...args) {
		if (DEBUG < level) return;
		if (isCustomLog) customLog(...args);
		console.log('[comments-filter]', ...args);
	}

	const cssVarName = '--good-comment-background';
	const cssColor = `var(${cssVarName})`;
	function isDarkTheme() {
		const darkLink = document.querySelector('#dark-colors');
		const lightLink = document.querySelector('#light-colors');
		if (darkLink?.media === 'all' && !darkLink.disabled) return true;
		if (lightLink?.media === 'all' && !lightLink.disabled) return false;
		return window.matchMedia('(prefers-color-scheme: dark)').matches;
	}
	function applyHighlightColor() {
		const newValue = isDarkTheme() ? COMMENT_HIGHLIGHT_DARK : COMMENT_HIGHLIGHT_LIGHT;
		const rootStyle = document.documentElement.style;
		const current = rootStyle.getPropertyValue(cssVarName).trim();
		if (current !== newValue) {
			log(1, "applyHighlightColor", current, newValue);
			rootStyle.setProperty(cssVarName, newValue);
		}
	}
	function initHighlightColors() {
		applyHighlightColor();
		const observer = new MutationObserver(applyHighlightColor);
		observer.observe(document.head, { attributes: true, subtree: true });
		const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
		mediaQuery.addEventListener('change', applyHighlightColor);
	}

	function findCommentsWrapper() {
		return document.querySelector('div.tm-comments-wrapper__wrapper');
	}
	function findCommentsTree(wrapper) {
		return wrapper.querySelector('div.tm-comments__tree');
	}
	function findCommentsHeader(wrapper) {
		return wrapper.querySelector('header.tm-comments-wrapper__header');
	}
	function getAllSections(tree) {
		return tree.querySelectorAll('section.tm-comment-thread');
	}
	 function getChildSections(section) {
		return section.querySelectorAll(':scope > div.tm-comment-thread__children > section.tm-comment-thread');
	}
   function getSectionChildrenBlock(section) {
		return section.querySelector(':scope > div.tm-comment-thread__children');
	}
	function getSectionHeader(section) {
		return section.querySelector(':scope > article > div > div.tm-comment > header.tm-comment__header');
	}
	function getSectionBody(section) {
		return section.querySelector(':scope > article > div, :scope > article > span.tm-comment-thread__ufo');
	}

	function extractCommentScore(section) {
		const span = section.querySelector(':scope > article span:is(.tm-votes-meter__value, .tm-votes-lever__score-counter)');
		if (!span) return 0;
		log(3, "extractCommentScore", span.textContent);
		return parseInt(span.textContent.trim(), 10) || 0;
	}

	function setFlag(el, key, value) {
		el.dataset[key] = value ? "1" : "";
	}
	function getFlag(el, key) {
		return el.dataset[key] === "1";
	}

	function resetCommentsFilter(tree) {
		log(1, 'resetCommentsFilter');
		tree.querySelectorAll('a.comment-placeholder').forEach(p => p.remove());
		getAllSections(tree).forEach(section => {
			section.style.display = '';
			getSectionBody(section)?.style?.setProperty('display', '');
			getSectionChildrenBlock(section)?.style?.setProperty('display', '');
			getSectionHeader(section)?.style?.setProperty('background-image', '');
			section.dataset.isGood = '';
			section.dataset.hasGood = '';
			section.dataset.hasGoodChild = '';
		});
	}

	function markComments(section, parentComment = null) {
		const score = extractCommentScore(section);
		section.dataset.score = score; // for debug
		const isGood = score >= currentThreshold;
		setFlag(section, "isGood", isGood);
		if (parentComment && isGood) setFlag(parentComment, "hasGoodChild", true);

		let hasGood = isGood;
		getChildSections(section).forEach(childSection => {
			if (markComments(childSection, section)) {
				hasGood = true;
			}
		});
		setFlag(section, "hasGood", hasGood);
		log(2, 'mark', {score, isGood, hasGood});
		return hasGood;
	}

	function collapseCommentWithPlaceholder(section, withChildren = true) {
		log(2, 'collapseCommentWithPlaceholder', section, withChildren);
		const article = section.querySelector(':scope > article');
		if (!article) return;

		const articleUfoSelector = ':scope > span.tm-comment-thread__ufo';
		const sectionChildrenBlock = getSectionChildrenBlock(section);

		// do not hide UFO without children
		if (!sectionChildrenBlock && article.querySelector(articleUfoSelector)) return;

		if (withChildren && sectionChildrenBlock) {
			sectionChildrenBlock.style.setProperty('display', 'none');
		}

		const placeholder = document.createElement('a');
		placeholder.textContent = 'раскрыть';
		placeholder.href = '#';
		placeholder.className = 'comment-placeholder';
		placeholder.style.textDecoration = 'none';
		const articleContent = article.querySelector(':scope > div, ' + articleUfoSelector);
		if (articleContent) {
			placeholder.className += ' ' + articleContent.className; // copy margin
			articleContent.style.display = 'none';
		}
		article.appendChild(placeholder);
	}

	function processCommentThread(section, isRoot = false) {
		log(2, 'processCommentThread', section, isRoot, {score: section.dataset.score, isGood: section.dataset.isGood, hasGood: section.dataset.hasGood, hasGoodChild: section.dataset.hasGoodChild});

		if (getFlag(section, "isGood") || getFlag(section, "hasGoodChild")) {
			log(2, 'isGood or hasGoodChild', section);
			if (getFlag(section, "isGood")) {
				const header = getSectionHeader(section);
				log(2, 'check header=', header);
				if (header) {
					// if header is already colored, blend it; else fill
					const headerCurrentBackgroundColor = getComputedStyle(header).backgroundColor;
					log(2, 'header color', headerCurrentBackgroundColor);
					const emptyColorComputedString = 'rgba(0, 0, 0, 0)'; // getComputedStyle returns exactly this
					// cssColor here handles cleared background right after resetCommentsFilter
					const firstGradientColor = [emptyColorComputedString, cssColor].includes(headerCurrentBackgroundColor) ? cssColor : emptyColorComputedString;
					header.style.backgroundImage = `linear-gradient(to right, ${firstGradientColor}, ${cssColor})`;
				}
			}
			getChildSections(section).forEach(childSection => {
				log(3, 'childSection', childSection, {score: childSection.dataset.score, isGood: childSection.dataset.isGood, hasGood: childSection.dataset.hasGood, hasGoodChild: childSection.dataset.hasGoodChild});
				if (getFlag(childSection, "hasGood")) {
					processCommentThread(childSection);
				} else {
					collapseCommentWithPlaceholder(childSection);
				}
			});
		} else if (getFlag(section, "hasGood")) {
			log(2, 'hasGood', section);
			collapseCommentWithPlaceholder(section, false);
			getChildSections(section).forEach(childSection => {
				if (getFlag(childSection, "hasGood")) {
					processCommentThread(childSection);
				} else {
					childSection.style.display = 'none';
				}
			});
		} else {
			if (isRoot) {
				log(2, 'bad root', section);
				section.style.display = 'none';
			} else {
				log(2, 'bad non-root', section);
				collapseCommentWithPlaceholder(section);
			}
		}
	}

	function applyCommentsFilter(tree) {
		log(0, 'applyCommentsFilter threshold=', currentThreshold);
		const roots = tree.querySelectorAll(':scope > section.tm-comment-thread');
		roots.forEach(root => {
			markComments(root);
			processCommentThread(root, true);
		});
	}

	function onPlaceholderClick(e) {
		const placeholder = e.target.closest('a.comment-placeholder');
		if (!placeholder) return;
		e.preventDefault();

		const section = placeholder.parentElement.parentElement;
		placeholder.remove();
		log(1, 'placeholder clicked', section);

		section.style.pointerEvents = 'none'; // remove pointerEvents to prevent hover popup
		section.style.display = '';
		getSectionBody(section)?.style?.setProperty('display', '');
		getSectionChildrenBlock(section)?.style?.setProperty('display', '');

		getChildSections(section).forEach(childSection => {
			if (!getFlag(childSection, "hasGood")) collapseCommentWithPlaceholder(childSection);
		});

		// get pointerEvents back
		const events = ['pointermove','mousemove','scroll'];
		const restore = (e) => {
			section.style.pointerEvents = '';
			log(1, 'event restore', e);
			events.forEach(evt => document.removeEventListener(evt, restore));
		};
		events.forEach(evt => {
			document.addEventListener(evt, restore, { passive: true });
		});
	}

	function onVotesClick(e) {
		const a = e.target.closest('a.votes-summary__item');
		if (!a) return;
		e.preventDefault();

		const score = parseInt(a.dataset.score, 10);
		log(0,'filter click score=', score, 'current=', currentThreshold);

		const wrapper = findCommentsWrapper();
		const tree = findCommentsTree(wrapper);
		if (currentThreshold === score) {
			resetCommentsFilter(tree);
			currentThreshold = null;
		} else {
			if (currentThreshold !== null) resetCommentsFilter(tree);
			currentThreshold = score;
			applyCommentsFilter(tree);
		}

		// (un)highlight summary votes
		wrapper.querySelectorAll('a.votes-summary__item').forEach(item => {
			const itemScore = parseInt(item.dataset.score, 10);
			if (currentThreshold !== null && itemScore >= currentThreshold) {
				item.style.background = cssColor;
			} else {
				item.style.background = '';
			}
		});
	}

	async function scrollAllComments() {
		log(1,"scrolling");
		const oldY = window.pageYOffset;
		const oldVis = document.body.style.visibility;
		// делаем невидимым, чтобы не мельтешило
		document.body.style.visibility = "hidden";
		for (let y = window.scrollY + window.innerHeight; y < document.scrollingElement.scrollHeight + window.innerHeight; y += window.innerHeight) {
			window.scrollTo(0, y);
			// await new Promise(r => setTimeout(r, 0)); // дать движку отработать
			await new Promise(r => requestAnimationFrame(r)); // дать движку отработать
		}
		window.scrollTo(0, oldY);
		document.body.style.visibility = oldVis;
	}

	async function buildVotesSummary(button) {
		if (observer) observer.disconnect();
		await scrollAllComments();

		const wrapper = findCommentsWrapper();
		const votes = {};
		const allSections = getAllSections(findCommentsTree(wrapper));
		const total = allSections.length;
		allSections.forEach(section => {
			const score = extractCommentScore(section);
			votes[score] = (votes[score] || 0) + 1;
			log(2, section, score);
		});

		const sorted = Object.entries(votes).sort((a,b)=>b[0]-a[0]);
		log(0, 'votes summary built', total, sorted);

		const frag = document.createDocumentFragment();
		const totalSpan = document.createElement('span');
		totalSpan.textContent = total + ': ';
		frag.appendChild(totalSpan);

		sorted.forEach(([score, count]) => {
			const a = document.createElement('a');
			a.href='#';
			a.textContent = score;
			a.className = 'votes-summary__item tm-votes-lever__score-counter';
			a.style.textDecoration = 'none';
			a.style.padding = '3px';
			if (score > 0) {
				a.classList.add('tm-votes-lever__score-counter_positive');
			} else if (score < 0) {
				a.classList.add('tm-votes-lever__score-counter_negative');
			}
			a.dataset.score = score;
			frag.appendChild(a);
			frag.append(count <= 1 ? ' ' : "(" + count + ") ");
		});

		wrapper.querySelector('#votes-summary')?.remove();
		const summary = document.createElement('div');
		summary.id = 'votes-summary';
		summary.style.color = 'var(--mine-shaft)'; // for dark theme
		summary.appendChild(frag);
		findCommentsHeader(wrapper).insertAdjacentElement('afterend', summary);
		button.disabled = false;
	}

	function createVotesButton(header) {
		log(0, 'createVotesButton', header);
		const button = document.createElement('button');
		button.id = 'comments-votes-button';
		button.textContent = 'Оценки';
		button.onclick = () => {
			button.disabled = true;
			// если есть кнопка "Показать все комментарии"
			document.querySelector('button.tm-height-limiter__expand-button')?.click();
			setTimeout(() => buildVotesSummary(button), 0); // wait for expand button
		};
		header.appendChild(button);
		isCreatingButton = false;
	}
	function ensureVotesButton(caller) {
		log(1, "ensureVotesButton", caller);
		// sometimes button disappears when comments load. We have to recreate it. We stop observer on button click
		if (isCreatingButton || document.getElementById('comments-votes-button')) return;
		const wrapper = findCommentsWrapper();
		if (!wrapper) return;
		if (!findCommentsTree(wrapper)) return;
		const header = findCommentsHeader(wrapper);
		if (!header) return;
		isCreatingButton = true;
		createVotesButton(header);
	}

	function init() {
		log(0, 'init start');
		if (!document.querySelector('div.tm-article-comments, div.tm-article-blocks')) return; // ignore pages without comments

		document.body.addEventListener('click', onVotesClick);
		document.body.addEventListener('click', onPlaceholderClick);

		ensureVotesButton(0);
		observer = new MutationObserver((mutations) => {
			for (const m of mutations) {if (m.target.closest('#' + customLogBoxID)) return;} // ignore custom log changes
			ensureVotesButton(1)
		});
		observer.observe(document.body, { childList: true, subtree: true });

		initHighlightColors();
	}

	window.addEventListener('load', init);
})();