Skip to content

Instantly share code, notes, and snippets.

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;
// Find the divs that specifically have a class added/removed to control the behaviour.
// It doesn't have an ID or unique class. The only thing unique about it is the below Gmail
// jasaction attribute. //
var emailListDiv;
function getEmailListDiv() {
// 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"]
emailListDiv = document.querySelectorAll('[jsaction="oehdpb:.CLIENT;UXdbee:.CLIENT"]');
// Check the div for the class we want, and add it if it isn't present.
function checkListDiv() {
DEBUG && console.log("Starting to check for div....");
// Loop this until the div(s) are found
var checkExist = setInterval(function() {
// Get all the relevant divs
// if it's empty, it will loop again.
if (emailListDiv == null) {
DEBUG && console.log("div not found");
} else {
// Go through each relevant div
emailListDiv.forEach(function(singleDiv, currentIndex, listObj) {
DEBUG && console.log("div FOUND!!!!");
if (!singleDiv.classList.contains("Zs")) {
DEBUG && console.log("class not present on div. Adding now...");
//only 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(checkListDiv);
// Options for the observer (which mutations to observe).
var observerOptions = {
attributes: true
// Start observing the div for mutations.
observer.observe(singleDiv, 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.");
}, 100); // loop the check every 200ms until it is cleared
//fire it once
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment