Aligns columns in merge edit tables for easier comparison.
// ==UserScript==
// @name MusicBrainz: Align Columns in Merge Edits
// @namespace https://musicbrainz.org/user/chaban
// @version 2.2.1
// @tag ai-created
// @description Aligns columns in merge edit tables for easier comparison.
// @author chaban
// @license MIT
// @match *://*.musicbrainz.org/edit/*
// @match *://*.musicbrainz.org/search/edits*
// @match *://*.musicbrainz.org/*/*/edits
// @match *://*.musicbrainz.org/*/*/open_edits
// @match *://*.musicbrainz.org/user/*/edits*
// @grant GM.getValue
// @grant GM.setValue
// @grant GM.registerMenuCommand
// @grant GM.unregisterMenuCommand
// @run-at document-idle
// ==/UserScript==
(function() {
'use strict';
// --- CONFIGURATION ---
// Set to true to enable performance and status logging in the console.
const DEBUG = false;
// -------------------
const SCRIPT_NAME = GM.info.script.name;
const CONTEXT_SELECTOR = 'table[class^="details merge-"]';
const CONTENT_SIZED_COLUMNS = new Set([
'AcoustIDs', 'Attributes', 'Begin', 'Code', 'End', 'Gender', 'ISRCs',
'ISWC', 'Length', 'Lyrics languages', 'Releases', 'Type', 'Year',
'Ordering type', 'Date', 'Time'
]);
const MUTATION_OBSERVER_CONFIG = {
childList: true,
subtree: true,
characterData: true,
};
const COLLAPSE_EMPTY_COLUMNS_KEY = 'collapse-empty-columns';
const TOGGLE_COLLAPSE_COMMAND = 'Collapse Empty Columns';
/**
* Helper function for performance timing, respects the DEBUG flag.
*/
function time(name, func) {
if (DEBUG) console.time(`[${SCRIPT_NAME}] ${name}`);
const result = func();
if (DEBUG) console.timeEnd(`[${SCRIPT_NAME}] ${name}`);
return result;
}
class TableAligner {
#contextElement;
#tables;
#styleElement;
#observer;
#observedNodes;
#timeoutId = null;
#uniqueId;
#options;
constructor(contextElement, options) {
this.#contextElement = contextElement;
this.#tables = Array.from(contextElement.querySelectorAll('.tbl'));
this.#options = options;
if (this.#tables.length < 2) return;
this.#uniqueId = `mb-align-${Math.random().toString(36).substring(2, 9)}`;
this.#contextElement.dataset.alignId = this.#uniqueId;
this.#styleElement = document.createElement('style');
document.head.appendChild(this.#styleElement);
this.#widenTableContainer();
this.#setupObserver();
// Initial alignment
if (window.requestIdleCallback) {
requestIdleCallback(() => this.align(), { timeout: 500 });
} else {
setTimeout(() => this.align(), 200);
}
}
align() {
clearTimeout(this.#timeoutId);
this.#timeoutId = setTimeout(() => this.#runAlignment(), 150);
}
updateOptions(newOptions) {
this.#options = newOptions;
this.align();
}
#runAlignment() {
if (this.#tables.some(table => !document.body.contains(table))) {
console.warn(`[${SCRIPT_NAME}] Tables no longer in DOM. Disconnecting observer for ${this.#uniqueId}.`);
this.disconnect();
return;
}
if (DEBUG) console.log(`%c[${SCRIPT_NAME}] Running alignment for ${this.#uniqueId}...`, 'font-weight: bold; color: blue;');
this.#observer.disconnect();
try {
time('Total Alignment', () => {
this.#resetStyles();
const headerMaps = this.#getHeaderMaps();
if (headerMaps.some(headers => headers.length === 0)) return;
let collapsedColumns = new Set();
if (this.#options.collapseEmpty) {
collapsedColumns = this.#findCollapsedColumns(headerMaps);
}
const columnWidths = this.#calculateColumnWidths(headerMaps, collapsedColumns);
if (DEBUG) console.log(`[${SCRIPT_NAME}] Calculated column widths:`, columnWidths);
this.#applyColumnStyles(columnWidths, headerMaps, collapsedColumns);
});
} catch (error) {
console.error(`[${SCRIPT_NAME}] Error during alignment for ${this.#uniqueId}:`, error);
} finally {
this.#reconnectObserver();
}
if (DEBUG) console.log(`%c[${SCRIPT_NAME}] Alignment finished for ${this.#uniqueId}.`, 'font-weight: bold; color: blue;');
}
#widenTableContainer() {
this.#contextElement.querySelectorAll('tbody > tr').forEach(row => {
const header = row.querySelector('th');
if (header && ['Merge:', 'Into:'].includes(header.textContent.trim())) {
header.style.display = 'none';
const dataCell = row.querySelector('td');
if (dataCell) {
dataCell.colSpan = 2;
}
}
});
}
#resetStyles() {
this.#styleElement.textContent = '';
this.#tables.forEach(table => {
table.style.cssText = '';
Array.from(table.rows).forEach(row => row.style.height = '');
});
}
#getHeaderMaps() {
return this.#tables.map(table =>
Array.from(table.querySelectorAll('thead th')).map(th => th.textContent.trim())
);
}
/**
* Checks if a table cell is visually empty, ignoring script tags.
* @param {HTMLTableCellElement} cell The cell to check.
* @returns {boolean} True if the cell is visually empty.
*/
#isCellVisuallyEmpty(cell) {
const cellClone = cell.cloneNode(true);
cellClone.querySelectorAll('script').forEach(script => script.remove());
return cellClone.textContent.trim() === '';
}
#findCollapsedColumns(headerMaps) {
const collapsedColumns = new Set();
const allHeaderNames = [...new Set(headerMaps.flat())];
if (DEBUG) console.log(`[${SCRIPT_NAME}] All headers found for ${this.#uniqueId}:`, allHeaderNames);
for (const headerName of allHeaderNames) {
let isCompletelyEmpty = true;
for (const table of this.#tables) {
const tableIndex = this.#tables.indexOf(table);
const columnIndex = headerMaps[tableIndex].indexOf(headerName);
if (columnIndex === -1) continue;
const cells = table.querySelectorAll(`tbody td:nth-child(${columnIndex + 1})`);
if (Array.from(cells).some(cell => !this.#isCellVisuallyEmpty(cell))) {
isCompletelyEmpty = false;
if (DEBUG) {
const nonEmptyCell = Array.from(cells).find(cell => !this.#isCellVisuallyEmpty(cell));
console.log(`[${SCRIPT_NAME}] Found content in column "${headerName}":`, nonEmptyCell.textContent, nonEmptyCell);
}
break;
}
}
if (isCompletelyEmpty) {
if (DEBUG) console.log(`[${SCRIPT_NAME}] Column "${headerName}" is completely empty and will be collapsed.`);
collapsedColumns.add(headerName);
}
}
return collapsedColumns;
}
#calculateColumnWidths(headerMaps, collapsedColumns) {
const columnWidths = new Map();
// Store original styles to restore them later
const originalStyles = new Map();
// Temporarily reset table styles for accurate content measurement
this.#tables.forEach(table => {
originalStyles.set(table, table.style.cssText);
table.style.cssText = 'table-layout: auto; width: auto;';
});
// Measure header widths
this.#tables.forEach((table, tableIndex) => {
const currentHeaders = headerMaps[tableIndex];
table.querySelectorAll('thead th').forEach((th, thIndex) => {
const headerName = currentHeaders[thIndex];
if (!headerName || collapsedColumns.has(headerName)) return;
const headerWidth = th.scrollWidth;
columnWidths.set(headerName, Math.max(columnWidths.get(headerName) || 0, headerWidth));
});
});
// Measure cell content widths
this.#tables.forEach((table, tableIndex) => {
const currentHeaders = headerMaps[tableIndex];
Array.from(table.rows).forEach(row => {
Array.from(row.cells).forEach((cell, cellIndex) => {
const headerName = currentHeaders?.[cellIndex];
if (!headerName || collapsedColumns.has(headerName) || getComputedStyle(cell).display === 'none') {
return;
}
// Store original cell style to restore it later
const originalCellStyle = cell.style.cssText;
// Temporarily apply nowrap to measure content width accurately
cell.style.whiteSpace = 'nowrap';
cell.style.width = 'auto';
let cellWidth;
if (headerName === 'ISRCs') {
// Specifically for ISRC column, measure the longest visible part
const isrcElements = cell.querySelectorAll('.isrc > a > code');
const isrcWidths = Array.from(isrcElements).map(el => el.scrollWidth);
cellWidth = Math.max(...isrcWidths, 0);
} else {
cellWidth = cell.scrollWidth;
}
// Restore original cell style
cell.style.cssText = originalCellStyle;
const currentMaxWidth = columnWidths.get(headerName) || 0;
if (cellWidth > currentMaxWidth) {
columnWidths.set(headerName, cellWidth);
}
});
});
});
// Restore original table styles
this.#tables.forEach(table => {
table.style.cssText = originalStyles.get(table);
});
return columnWidths;
}
#applyColumnStyles(columnWidths, headerMaps, collapsedColumns) {
const containerWidth = this.#contextElement.clientWidth;
let rigidWidthTotal = 0;
let flexibleIdealTotal = 0;
const allVisibleHeaders = [...columnWidths.keys()].filter(name => !collapsedColumns.has(name));
for (const name of allVisibleHeaders) {
const idealWidth = columnWidths.get(name) || 0;
if (CONTENT_SIZED_COLUMNS.has(name)) {
rigidWidthTotal += idealWidth;
} else {
flexibleIdealTotal += idealWidth;
}
}
const useProportional = rigidWidthTotal >= containerWidth && flexibleIdealTotal > 0;
const cssRules = [];
const selectorPrefix = `[data-align-id="${this.#uniqueId}"] .tbl`;
for (const headerName of [...new Set(headerMaps.flat())]) {
const indices = [...new Set(headerMaps.flatMap((map, tableIndex) =>
map.reduce((acc, name, idx) => {
if (name === headerName && this.#tables[tableIndex].querySelector(`thead th:nth-child(${idx + 1})`)) {
acc.push(idx + 1);
}
return acc;
}, [])
))];
if (indices.length === 0) continue;
const columnSelectors = indices.map(i => `${selectorPrefix} th:nth-child(${i}), ${selectorPrefix} td:nth-child(${i})`).join(',\n');
if (collapsedColumns.has(headerName)) {
cssRules.push(`${columnSelectors} { display: none; }`);
} else {
const idealWidth = columnWidths.get(headerName) || 0;
let widthStyle;
if (useProportional) {
const grandTotalIdealWidth = rigidWidthTotal + flexibleIdealTotal;
const percentage = grandTotalIdealWidth > 0 ? (idealWidth / grandTotalIdealWidth) * 100 : 0;
widthStyle = `width: ${percentage}%;`;
} else if (CONTENT_SIZED_COLUMNS.has(headerName)) {
widthStyle = `width: ${idealWidth}px;`;
} else {
const percentageOfFlexible = flexibleIdealTotal > 0 ? (idealWidth / flexibleIdealTotal) * 100 : 0;
widthStyle = `width: calc((100% - ${rigidWidthTotal}px) * ${percentageOfFlexible / 100});`;
}
cssRules.push(`${columnSelectors} { ${widthStyle} }`);
}
}
cssRules.push(`${selectorPrefix} th { overflow: hidden; text-overflow: ellipsis; }`);
this.#styleElement.textContent = cssRules.join('\n');
this.#tables.forEach(table => {
table.style.tableLayout = 'fixed';
table.style.width = '100%';
});
}
#setupObserver() {
this.#observer = new MutationObserver(() => {
if (DEBUG) console.log(`[${SCRIPT_NAME}] Mutation detected, queueing realignment for ${this.#uniqueId}.`);
this.align();
});
this.#observedNodes = this.#tables.map(t => t.querySelector('tbody')).filter(Boolean);
this.#reconnectObserver();
}
#reconnectObserver() {
this.#observedNodes.forEach(tbody => {
if (document.body.contains(tbody)) {
this.#observer.observe(tbody, MUTATION_OBSERVER_CONFIG);
}
});
}
disconnect() {
this.#observer.disconnect();
clearTimeout(this.#timeoutId);
this.#styleElement.remove();
}
}
async function init() {
let collapseEmpty = await GM.getValue(COLLAPSE_EMPTY_COLUMNS_KEY, true);
const aligners = [];
let commandId;
const registerCommand = () => {
if (commandId) {
GM.unregisterMenuCommand(commandId);
}
const commandText = `${TOGGLE_COLLAPSE_COMMAND}: ${collapseEmpty ? 'ON' : 'OFF'}`;
commandId = GM.registerMenuCommand(commandText, async () => {
collapseEmpty = !collapseEmpty;
await GM.setValue(COLLAPSE_EMPTY_COLUMNS_KEY, collapseEmpty);
aligners.forEach(aligner => aligner.updateOptions({ collapseEmpty }));
registerCommand();
});
};
registerCommand();
document.querySelectorAll(CONTEXT_SELECTOR).forEach(context => {
aligners.push(new TableAligner(context, { collapseEmpty }));
});
}
init();
})();