// ==UserScript==
// @name Branding? What branding? Logo picker for twitter.com
// @namespace Itsnotlupus Industries
// @match https://twitter.com/*
// @version 1.3
// @author Itsnotlupus
// @license MIT
// @description Adds a drop down by the site logo to let you pick logo alternatives.
// @defaulticon https://abs.twimg.com/favicons/twitter.2.ico
// @require https://greatest.deepsurf.us/scripts/468394-itsnotlupus-tiny-utilities/code/utils.js
// @run-at document-start
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_addValueChangeListener
// ==/UserScript==
/* jshint esversion:11 */
let logo = GM_getValue("logo", {});
GM_addValueChangeListener("logo", () => {
logo = GM_getValue("logo");
document.body.classList.toggle('logoChanged');
});
const LOGOS = [
{
// new weird X logo
html: `<svg viewBox="0 0 24 24" aria-hidden="true" class="twitter-x"><g><path d=" M14.258 10.152L23.176 0h-2.113l-7.747 8.813L7.133 0H0l9.352 13.328L0 23.973h2.113l8.176-9.309 6.531 9.309h7.133zm-2.895 3.293l-.949-1.328L2.875 1.56h3.246l6.086 8.523.945 1.328 7.91 11.078h-3.246zm0 0"></path></g></svg>`,
favicon: "https://abs.twimg.com/favicons/twitter.3.ico"
},
{
// recent twitter bird logo
html: `<svg viewBox="0 0 24 24" aria-hidden="true" class="twitter-bird"><g><path d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z"></path></g></svg>`,
favicon: "https://abs.twimg.com/favicons/twitter.2.ico"
},
{ // CSP prevents us from linking to 3rd party servers for old images, so we inline them instead.
html: `<img class="twitter-classic" src="data:image/png;base64,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">`,
favicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAl5JREFUOE+lU11IU2EYfr4zt53WnEclNGvpRo3WEixoLahYCYkm1kVUgy5WgRddBdEuG0i/SEUUdFFkBLGQ0ShvUi9GSRQzwsCfNCqlDbdmnuPc9LCf88XmNjxkIPhdfd/H+zzv+7zv8xKs8ZA14rFqAs+HEecvPmEAJLhabO5C4hzBD56v5SgnVFSQuZUquujxd3lHpp06DRu/3bb7VvPOuqsygoGJYOupR296msx63xHz5teOfZanhQBPYMzp6h3rUqzncl+ZOI/nDqv94Db92+w7VwGltPb95O+Odu/giVg8odGSFH/OarrvarG6bXd7QmFSWsOwmmwcpEQMjdXKvidn7E1Fguxlaja2/6jnc388TViaFCEtzMNcVTo0Po8GRsuBMIpcBTSdhEYUFh627WoJzcwaik2klJaNRoQOR8+39ngarJQSgUwGRKkGKVECJB9KJUiLCWRif9DZXO+WTSEmiqZLfRO+QDRlnE9JLECXVBbAS3pRo2H4TWpJ2FOp7JcRUErVAI47Xn65HogmjSDMP0OhUgY3D2x5cdJS3QvgJ7nifXfH2Vh/z1hePlWIfhz47rn2KXqaKErkBNnsKokfOGs9TAgZyjVxODRz4fwzv0unVvA6Vil8DAp2ha4SilIOpEQlI9AykuhpNT2wbOQuF31AKa2eE5NOd//wMd9oxEaUKjAqdgnM5CVQiu2cKtxpr+veUaW7QQgJy4yU194cFBYPdY9HGwan4/qcQyhgrlgX2VujnWrausEP4NVysMwHeUOVAWgAYFhWezbbJCHk60o2X/Uy/W9r/wJ4A+ZqblW4GgAAAABJRU5ErkJggg=="
},
{
html: `<img class="twitter-classic" src="data:image/png;base64,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">`,
favicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAspJREFUOE+Fkl9IU2EYxp9zzv5omLE2mzkbgt12ISVhSjSKbchGhDjNjJa7SQrJcI1c4qIMB5qmQpAVJmxgGdZGN/111MptQRe2i0CoG7H90XJazW3nLL5N10KlBw4fvOf7ft/zPe9LYVX9/f1StVrZKhGJlAAVX1iMjNvt9lsWi2V5bc9GK0WKer0+50ZPz12RWNzwNQrwaUAmANxu9/WqqirzfwE2m+1gw/H6p1OLdN74LIscGtCXMNjFLc/23hxQm83mT36/XxAMBjmFQpHIBqYcOJ3OOpVKZX8Y4tNvwyxI8ehOGkoJxy0vRt4LhMIQyyV5KyvReCgYej3hcIyYTKYlcjYFcDgmdGpVtf3RvIBxh1nQFHBABFRsZwAa4DggCSCfD4h5gH96euhcS0vr5ORkYh3gXZiFgEYKwqT+psUlASEN1BQz2COMLVl7erXt7e2uTQEcAJZcm6VfCUCxg0G9lMXt4eHTzc3NIxsCSBfIbeRbYxAHOQyFmmIapXR0+eKl9mN9fX0vNs3gkISCQkwhsfp+YiSXR0HIxhJjY2P32ozGC4FA4GcK8NTh0B1RqVIhkgxIUVNIQVlArxuBNy7XY6PJdMbj8QQyXbDZbNV1tbUTzgW+4GUw3YXSLRR0RTREgnSARCRUhot/93h9lsrKyoEMwGg0lnZfu/rqc1wov/OFBQmQuNjGp5DHS+dAILk0oJXRkFOxb+fb2qoHBwc/Zhrl9XqHysvLz47PJeEKcykXRMmsTvzmgMMFDHTSBEbuj54yGAyjGYDBYNhttXY/EIklZc/DgGeeQyTx9zRxxaOAGhmD/Xnx+OXOK7VdXV1PskYFaGpq2tfZ0TEgLympWEoCc1EgxqafszaJciHg9XienWhsbJyZmQn9AyCWNRqNTKvVntxbVqYqKpRKt+aTFMhE09SPSCQ+5fV96LZarT6fz0/qfwAvrC4g/hpHHwAAAABJRU5ErkJggg=="
}
// moar later. probably.
];
document.head.prepend(crel('style', { textContent: `
header[role="banner"] h1[role="heading"] {
flex-direction: row;
}
header[role="banner"] h1[role="heading"]:hover .logo-dropdown-arrow {
opacity: 1;
}
body.logo-dropdown-open .logo-dropdown-arrow {
opacity: 1;
}
.logo-dropdown-arrow {
opacity: 0;
transition: all 250ms;
width: 20px;
height: 20px;
line-height: 22px;
margin-right: -20px;
text-align: center;
color: var(--twitter-icon-color);
border-radius: 9px;
background: var(--twitter-bg-color);
}
.logo-dropdown-arrow:hover {
background: var(--icon-hover-bg);
}
.logo-dropdown-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0);
}
.logo-dropdown {
position: fixed;
width: 3rem;
background: var(--twitter-bg-color);
padding: 0.5em;
border-radius: 5px;
box-shadow: var(--dropdown-box-1) 0px 0px 15px, var(--dropdown-box-2) 0px 0px 3px 1px;
}
.logo-dropdown-item {
cursor: pointer;
height: 2rem;
margin-top: 0.5em;
margin-bottom: 0.5em;
padding: 8px;
transition: all 250ms;
border-radius: 999px;
}
.logo-dropdown-item:hover {
background: var(--icon-hover-bg);
}
/* custom CSS for each logo */
.twitter-x {
height: 2rem;
-ms-flex-positive: 1;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
color: var(--twitter-icon-color);
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
vertical-align: text-bottom;
position: relative;
max-width: 100%;
fill: currentcolor;
display: inline-block;
}
.twitter-bird {
height: 2rem;
color: rgba(29,155,240,1.00) !important;
vertical-align: text-bottom;
position: relative;
max-width: 100%;
fill: currentcolor;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
display: inline-block;
}
.twitter-classic {
max-width: 2rem;
vertical-align: text-bottom;
position: relative;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
display: inline-block;
}
`}));
// 1. early run to replace placeholder logo on app start.
untilDOM("#placeholder").then(e=> {
// tweak the loading logo right quick.
if (logo.html) {
const classes = e.firstChild.getAttribute("class");
e.innerHTML = logo.html;
e.firstChild.setAttribute('class', e.firstChild.getAttribute('class') + ' ' + classes);
e.firstChild.setAttribute('style', "max-width: initial; height: initial");
}
});
// 2. watch for lightmode/darkmode changes and adjust (cheaply.)
(async()=> {
function getBgColor() {
try {
return getComputedStyle(document.body).backgroundColor;
} catch {
return document.body?.style.backgroundColor;
}
}
let prevBgColor = undefined;
while (true) {
const bgColor = getBgColor();
if (bgColor != prevBgColor) {
prevBgColor = bgColor;
const isDarkMode = bgColor.replace(/[rgb()]+/g,'').split(', ').reduce((v,a)=>+a+v, 0) < 255;
document.body.style.setProperty("--twitter-bg-color", bgColor);
document.body.style.setProperty("--twitter-icon-color", isDarkMode ? "rgba(214,217,219,1.00)" : "rgba(36,46,54,1.00)");
document.body.style.setProperty("--icon-hover-bg", isDarkMode ? "rgba(239, 243, 244, 0.1)" : "rgba(15, 20, 25, 0.1)");
document.body.style.setProperty("--dropdown-bg-color", isDarkMode ? "#111" : "#fff");
document.body.style.setProperty("--dropdown-box-1", isDarkMode ? "rgba(255, 255, 255, 0.2)" : "rgba(101, 119, 134, 0.2)")
document.body.style.setProperty("--dropdown-box-2", isDarkMode ? "rgba(255, 255, 255, 0.15)" : "rgba(101, 119, 134, 0.15)")
}
await sleep();
}
})();
// 3. inject our logo picker dropdown, potentially several times.
(async()=> {
while (true) {
const heading = await untilDOM(`header[role="banner"] h1[role="heading"]`);
heading.append(crel('a', {
className: "logo-dropdown-arrow",
textContent: '▾',
onclick() { openLogoDropDown(); }
}));
// await applyLogo();
// wait until our dropdown gets wiped, and reapply our tweaks
await untilDOM(()=>!$`.logo-dropdown-arrow`);
}
})();
// 3½. dropdown and logo selection logic
function openLogoDropDown() {
const { bottom, left } = $`.logo-dropdown-arrow`.getBoundingClientRect();
const backdrop = crel('div', {
className: "logo-dropdown-backdrop",
onclick() {
backdrop.remove();
dropdown.remove();
document.body.classList.remove('logo-dropdown-open');
}
});
const dropdown = crel('div', {
className: "logo-dropdown",
style: `top: ${bottom}px; left: ${left}px;`
}, ...LOGOS.map(l => crel('div', {
className: 'logo-dropdown-item',
innerHTML: l.html,
onclick() {
logo = l;
GM_setValue("logo", logo);
// applyLogo();
backdrop.click();
}
})));
document.body.append(backdrop, dropdown);
document.body.classList.add('logo-dropdown-open');
}
// 4. wait until the placeholder logo is out of the way, then replace the favicon and all logos aggressively.
(async function applyLogo() {
await untilDOM(()=>!$`#placeholder`);
observeDOM(async() => {
if (logo.favicon) {
const shortcutLink = $`link[rel="shortcut icon"]`;
if (shortcutLink && shortcutLink.href !== logo.favicon) {
shortcutLink.href = logo.favicon;
}
}
if (logo.html) {
$$`path[d="M14.258 10.152L23.176 0h-2.113l-7.747 8.813L7.133 0H0l9.352 13.328L0 23.973h2.113l8.176-9.309 6.531 9.309h7.133zm-2.895 3.293l-.949-1.328L2.875 1.56h3.246l6.086 8.523.945 1.328 7.91 11.078h-3.246zm0 0"]`.forEach(path=> {
const svg = path.closest`svg`;
const classes = svg.getAttribute("class");
const logoElt = crel('div', { innerHTML: logo.html}).firstChild;
svg.replaceWith(logoElt);
logoElt.setAttribute('class', logoElt.getAttribute('class') + ' ' + classes);
logoElt.setAttribute('style', "max-width: initial"); //; height: initial");
});
const logoParent = $`header[role="banner"] h1[role="heading"] a[href="/home"] > div`;
if (logoParent && logoParent.innerHTML !== logo.html) {
logoParent.innerHTML = logo.html;
}
}
});
})();
