Skip to content

Instantly share code, notes, and snippets.

@lucascosti
Last active April 2, 2022 07:56
Show Gist options
  • Save lucascosti/c9d2ff4c6cb0fc70df3f3cb4c3aee0b1 to your computer and use it in GitHub Desktop.
Save lucascosti/c9d2ff4c6cb0fc70df3f3cb4c3aee0b1 to your computer and use it in GitHub Desktop.
// ==UserScript==
// @name Work Gmail multi-line email list
// @description Makes sure that the new (late 2018) Gmail interface always shows the three-line previews of email lists (mainly for split-pane mode).
// The new Gmail behaviour changes this to one-line when the list pane is wide enough (but not wide enough for my liking).
// @author Lucas Costi
// @namespace https://lucascosti.com
//// The scope below only matches the second Gmail account (which is always my work one).
// @match https://mail.google.com/mail/u/1/*
// @grant none
// ==/UserScript==
//
//
// only run once for each page load:
if (window.top != window.self) //don't run on frames or iframes
{
//Optional: GM_log ('In frame');
return;
}
// Turn on/off console log debugging
DEBUG = false;
DEBUG && console.log("➡️ Starting to check for the div... ");
// start the check function and loop it every 200ms until it is cleared.
var myAwesomeGmailEmailListCheckScript = setInterval(fixEmailListDiv, 200);
// Check the div for the class we want, and add it if it isn't present.
function fixEmailListDiv() {
// Find the div that specifically has a class added/removed to control the Gmail behaviour.
// It doesn't have an ID or unique class. The only thing unique about it is the below Gmail jasaction attribute.
// The Gmail div jsaction attribute has changed over time.
// before 2020-09-27: [jsaction="Ic0gz:.CLIENT;oSin0b:.CLIENT"]
// after 2020-09-27: [jsaction="oehdpb:.CLIENT;UXdbee:.CLIENT"]
var emailListDiv = document.querySelector('[jsaction="oehdpb:.CLIENT;UXdbee:.CLIENT"]');
// If the div doesn't exist yet, we'll loop again.
if (emailListDiv == null) {
DEBUG && console.log("div not found... 🔎");
} else {
DEBUG && console.log("div FOUND!! 👏");
if (!emailListDiv.classList.contains("Zs")) {
DEBUG && console.log("Class not present on div. Adding now... 🚀");
emailListDiv.classList.add("Zs");
// Setup an observer if it doesn't exist
if (!observer) {
DEBUG && console.log("Starting observer...");
// Set up a mutation observer on the div to intercept any changes made to remove the class.
var observer = new MutationObserver(fixEmailListDiv);
// Options for the observer (which mutations to observe).
var observerOptions = {
attributes: true
}
// Start observing the div for mutations.
observer.observe(emailListDiv, observerOptions);
}
} else {
DEBUG && console.log("Class present on div. ✅");
}
// Clear the loop interval, because we have processed at least 1 div.
DEBUG && console.log("Clearing loop. 🏁");
clearInterval(myAwesomeGmailEmailListCheckScript);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment