styles-analyzer.js

const pageInfo = Array
	.from(document.querySelectorAll('*'))
	.map(element => {
		const computedStyles = window.getComputedStyle(element);

		const styles = ['color', 'background-color'].reduce((result, name) => {
			result[name] = computedStyles.getPropertyValue(name);
			return result;
		}, {});

		styles.font = ['font-style', 'font-weight', 'font-size', 'font-family']
			.map(name => {
				const value = computedStyles.getPropertyValue(name);
				if (name === 'font-size') {
					return `${parseInt(value, 10)}px`;
				}
				return value;
			})
			.join(' ');

		return {
			element, 
			styles,
		}
	})
	.reduce((result, payload) => {
		Object
			.keys(payload.styles)
			.forEach(name => {
				if (!result[name]) result[name] = [];
				const target = result[name];
				const value = payload.styles[name];

				if (name === 'background-color' && value === 'rgba(0, 0, 0, 0)') {
					return
				}

				if (!~target.indexOf(value)) {
					target.push(value);
				}
			});

		return result;
	}, {});

const fontGroups = pageInfo.font.reduce((result, font) => {
	const family = font.split(' ').slice(3).join(' ');
	if (!result[family]) result[family] = [];
	result[family].push(font);
	return result;
}, {});

const styleDisplay = `
	<div class="analyzer">
		<div class="analyzer_content">
			<div class="analyzer-section analyzer-section--half">
				<h2 class="analyzer-section_title">Colors</h2>
				<div class="analyzer-section_content">
					${pageInfo.color.map(color => {
						return `
							<div class="analyzer-section_block">
								<i class="analyzer-section_color" style="background-color: ${color}"></i>
								<div class="analyzer-section_block_text">${color}</div>
							</div>
						`
					}).join('')}
				</div>
			</div>
			<div class="analyzer-section analyzer-section--half">
				<h2 class="analyzer-section_title">Background Colors</h2>
				<div class="analyzer-section_content">
					${pageInfo['background-color'].map(color => {
						return `
							<div class="analyzer-section_block">
								<i class="analyzer-section_color" style="background-color: ${color}"></i>
								<div class="analyzer-section_block_text">${color}</div>
							</div>
						`
					}).join('')}
				</div>
			</div>
			<div class="analyzer-section">
				<h2 class="analyzer-section_title">Fonts</h2>
				${pageInfo.font.map(font => {
					return font
						.split(' ')
						.map((part, i) => i === 2 ? '36px' : part)
						.join(' ');
				}).filter((font, i, arr) => {
					return arr.indexOf(font) === i
				}).map(font => {
					return `
						<div class="analyzer-section_content analyzer-section_content--font">
							<div class="analyzer-section_block">
								<div class="analyzer-section_block_caption" style="font: ${font}">Аа Бб Вв</div>
								<div class="analyzer-section_block_text">${
									font
										.split(' ')
										.filter((part, i) => i !== 2)
										.filter(part => part && part !== 'normal')
										.join(' ')
								}</div>
							</div>
						</div>
					`
				}).join('')}
			</div>
			<hr />
			<div class="analyzer-section">
				<h2 class="analyzer-section_title">Fonts sizes</h2>
				${Object.keys(fontGroups).map(name => {
					return `
						<div>
							<h3 class="analyzer-section_subtitle">${name}</h3>
							<div>
								${fontGroups[name].sort((a, b) => {
									return parseInt(a.replace(/\D+/g, ''), 10) - parseInt(b.replace(/\D+/g, ''), 10);
								}).map(font => {
									return `
										<div class="analyzer-section_content analyzer-section_content--restricted">
											<div class="analyzer-section_block">
												<div class="analyzer-section_block_caption" style="font: ${font}">Аа Бб Вв</div>
											</div>
										</div>
										<div class="analyzer-section_block analyzer-section_block--restricted">
											<div class="analyzer-section_block_text">${font}</div>
										</div>
									`
								}).join('')}
							</div>
						</div>
					`
				}).join('')}
			</div>
		</div>
	</div>
`

const style = document.createElement('style');
style.innerHTML = `
	.analyzer {
		top: 0;
		left: 0;
		right: 0;
		font-family: Arial;
		font-size: 0;
		min-height: 100%;
		background: #eee;
		padding: 20px;
		position: absolute;
		z-index: 10000;
	}

	.analyzer_content {
		max-width: 960px;
		margin: 0 auto;
	}

	.analyzer-section {
		width: 100%;
		padding: 20px;
		box-sizing: border-box;
		display: inline-block;
		vertical-align: top;
	}

	.analyzer-section--half {
		width: 50%;
	}

	.analyzer-section_title {
		font-size: 24px;
		margin: 0 3px 10px;
	}

	.analyzer-section_subtitle {
		font-size: 18px;
		font-weight: normal;
		color: #ccc;
		margin: 20px 3px 10px;
	}

	.analyzer-section_content {
		min-width: 200px;
		font-size: 14px;
		border: 1px solid #ddd;
		background: #fff;
		padding: 20px 10px 10px;
		box-sizing: border-box;
		border-radius: 6px;
		display: inline-block;
		margin: 3px;
	}

	.analyzer-section_content--font {
		min-width: 224px;
		min-height: 110px;
		text-align: center;
	}

	.analyzer-section_content--restricted {
		width: 60%;
		vertical-align: middle;
	}

	.analyzer-section_block {
		display: inline-block;
		vertical-align: top;
		margin: 0 10px 10px;
	}

	.analyzer-section_block--restricted {
		width: 39%;
		margin: 0;
		vertical-align: middle;
		box-sizing: border-box;
		padding: 0 10px;
	}

	.analyzer-section_block--restricted .analyzer-section_block_text {
		text-align: left;
	}

	.analyzer-section_color {
		width: 100px;
		height: 100px;
		display: inline-block;
		vertical-align: top;
		border: 1px solid #d2d2d2;
		border-radius: 4px;
		box-shadow: 0 5px 10px -3px rgba(0,0,0,.5);
	}

	.analyzer-section_block_text {
		color: #666;
		font-size: 10px;
		font-family: monospace;
		text-align: center;
		margin-top: 5px;
	}
`;

const container = document.createElement('div');
container.innerHTML = styleDisplay;

document.body.appendChild(style);
document.body.appendChild(container);