Skip to content

Instantly share code, notes, and snippets.

Last active April 2, 2022 07:56
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
// ==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
//// The scope below only matches the second Gmail account (which is always my work one).
// @match*
// @grant none
// ==/UserScript==
// only run once for each page load:
if ( != window.self) //don't run on frames or iframes
//Optional: GM_log ('In frame');
// 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... 🚀");
// 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. 🏁");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment