Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
[User script] StackExchange: Show revision diff color toggle
// ==UserScript==
// @id stackexchange-diff-color-toggle@poke
// @name StackExchange: Show revision diff color toggle
// @namespace poke
// @version 1.1.1
// @author Patrick Westerhoff
// @include *://*.stackexchange.com/*/revisions
// @include *://*.stackexchange.com/review/suggested-edits/*
// @include *://meta.serverfault.com/*/revisions
// @include *://meta.serverfault.com/review/suggested-edits/*
// @include *://meta.stackoverflow.com/*/revisions
// @include *://meta.stackoverflow.com/review/suggested-edits/*
// @include *://meta.superuser.com/*/revisions
// @include *://meta.superuser.com/review/suggested-edits/*
// @include *://serverfault.com/*/revisions
// @include *://serverfault.com/review/suggested-edits/*
// @include *://stackoverflow.com/*/revisions
// @include *://stackoverflow.com/review/suggested-edits/*
// @include *://superuser.com/*/revisions
// @include *://superuser.com/review/suggested-edits/*
// @homepageURL https://gist.github.com/poke/a065aa208e225894c3daf8408e69d448
// @updateURL https://gist.github.com/poke/a065aa208e225894c3daf8408e69d448/raw/stackexchange-diff-color-toggle.user.js
// @run-at document-end
// ==/UserScript==
const revisions = document.getElementById('revisions');
const reviewContent = document.querySelector('.review-content');
if (revisions) {
enableToggle(revisions);
}
else if (reviewContent) {
const reviewObserver = new MutationObserver(mutations => {
enableToggle(reviewContent.firstElementChild);
});
reviewObserver.observe(reviewContent, { childList: true });
}
else {
return;
}
function enableToggle(container) {
for (const diffChoices of container.querySelectorAll('.diff-choices')) {
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.checked = true;
checkbox.addEventListener('change', (evt) => {
diffChoices.parentNode.classList.toggle('no-diff-colors')
});
const toggleLabel = document.createElement('label');
toggleLabel.className = 'diff-color-toggle';
toggleLabel.appendChild(checkbox);
toggleLabel.appendChild(document.createTextNode('Toggle diff colors'));
diffChoices.insertBefore(toggleLabel, diffChoices.querySelector('br'));
}
}
const style = document.createElement('style');
style.textContent = `
.no-diff-colors .diff-add,
.no-diff-colors .diff-delete {
color: inherit;
background: inherit;
text-decoration: inherit;
}
.diff-color-toggle {
display: inline-block;
padding-top: 5px;
}
`;
document.getElementsByTagName('head')[0].appendChild(style);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.