Mades interface "Google Mail" more simplier and more productive to focus on.

mail.google.com-helper.user.js

// ==UserScript==
// @name         webcloud.io - mail.google.com
// @namespace    https://bgbruno.com
// @version      1
// @description  
// @author       BG Bruno
// @match        https://mail.google.com/*
// @grant        none
// @updateURL    https://bgbruno.com/webwrap/google.com/mail.google.com/helper.user.js
// @downloadURL  https://bgbruno.com/webwrap/google.com/mail.google.com/helper.user.js
// ==/UserScript==

(function() {



    'use strict';

    console.log('bgbruno.com - tampermonkey - webcloud.io - mail.google.com');
    
    
    
    ////////////////////////////////////////////////////////////////////////////////
    // 
    // inject style
    // 
    
    var style__string = `


body .gh [role="menuitem"],
body .gh [role="menuitem"] > div {
    max-width: 100%;
}
body .gh,
body .J-M {
    max-width: 500px;
    min-width: 500px;
}


body .zA:hover {
    box-shadow: inset 0 -1px 0 0 rgba(100,121,143,0.122) ;
}

body .aRz.J-KU:hover {
    background: none ;
}

body .aRz.J-KU .aAy[aria-selected="true"] {
    background-color: rgba(32,33,36,0.059) ;
}

body .aRz.J-KU > .aAy:before {
    display: none ;
}

body .aAy .aKp,
body .aAy .aKz,
body .wT {
    filter: grayscale(1) ;
}

body .bAw {
    display: none ;
}

body .z0>.L3 {
    box-shadow: none ;
}

body .zw .qr {
    display: none ;
}

body .ya,
body .nH .ya .x8,
body .nH .ya .x2,
body .yW,
body .nM,
body .zA>.a4W {
    /*font-size: .83rem !important;*/
}

body .aqw>.xY>.T-Jo,
body .btb>.xY>.T-Jo,
body .xY>.T-Jo-Jp,
body .aqw>td.apU>.T-KT.aXw::before,
body .btb>td.apU>.T-KT.aXw::before {
    opacity: .16 ;
}

body .aqw>td.apU>.T-KT.T-KT-Jp::before,
body .btb>td.apU>.T-KT.T-KT-Jp::before {
    opacity: .7 ;
}

body .zA.aqw>.xW,
body .zA.aqw>.yf,
body .zA.buL>.xW,
body .zA.buL>.yf,
body .zA.cP>.xW,
body .zA.cP>.yf {
    display: flex ;
}

body .zA.aqw .aKS, .bq4.xY {
    display: none ;
}

body .aeG {
    display: none ;
}

body .aRz>.J-KU-JW.aAy .aKp,
body .aRz>.J-KU-KO.aAy>.aKp {
    opacity: .55 ;
}

body .J-KU-JW:not(.aDO) .aKz {
    color: #5f6368 ;
}

body .wT>.n3 .byl:first-child .aim:first-child .nZ {
    background: none ;
}

body .TO.NQ,
body .n6 .ah9:hover,
body .n6 .ah9.aiu:hover,
body .n6 .ah9:focus,
body .CL.NQ,
body .CL:hover,
body .CL:focus {
    background: none ;
}

body .aKB {
    display: none ;
}

body .x7 {
    color: #202124;
    background: #dee0e0 ;
}

body .ar {
    -webkit-border-radius: none ;
    border-radius: none ;
}

body .zw {
    margin: 1rem 0 1rem 13px;
}

body .n6 {
    margin-bottom: 1rem;
}

body .HwgYue {
    margin-bottom: 2rem;
}

body .nZ .nU,
body .nZ .n0,
body .J-Ke.n0 {
    font-weight: normal ;
}

body .bAp.b8.UC .vh {
    display: none ;
}

/* top alert */

body div.aF {
    display: none;
}

body td .y2,
body span.y2 {
    display: none;
}


body .aSt {
    width: 100vw !important;
    height: 100vh !important;
    left: 0 !important;
    top: 0 !important;
}
body .l.m {
    border-radius: 0;
}
body :ga > div {
    width: 100% !important;
    border-top: solid 1px #eceff1 !important;
}
body .aZ>.J-Z {
    box-shadow: none;
}

body .bq4.xY {
    display: none !important;
}
body .akc.aZ6.YX {
    display: none !important;
}
body td.apU>.T-KT::before {
    opacity: 1 !important;
}
body td.apU>.T-KT.aXw::before {
    opacity: 0.16 !important;
}
/*
body .T-KT::before {
    height: 12px !important;
    width: 12px !important;
    border-radius: 12px !important;
}
body [title="none-star"]:before,
body .T-KT.aXw:before {
    background: gray !important;
    background: #ced0d0 !important;
}
body [title="yellow-star"]:before,
body .T-KT.T-KT-Jp:before {
    background: yellow;
    background: #f8cb3e;
    background: hsla(60, 100%, 43%, 1);
}
body [title="orange-star"]:before,
body .T-KT.xl:before {
    background: orange;
}
body [title="red-star"]:before,
body .T-KT.xn:before {
    background: red;
}
body [title="blue-star"]:before,
body .T-KT.xj:before {
    background: blue;
}
body [title="purple-star"]:before,
body .T-KT.xm:before {
    background: magenta;
}
body [title="green-star"]:before,
body .T-KT.xk:before {
    background: green;
}
*/

[data-tooltip="Spam"]:not(.ol) .bsU,
[data-tooltip="Scheduled"]:not(.ol) .bsU,
[data-tooltip="Drafts"]:not(.ol) .bsU {
    display: none;
}
body form > .fX.aiL {
    display: initial !important;
    max-height: 254px !important;
}
body form > .fX.aiL td {
    padding-top: 10px;
}
body form > .aoD.hl {
    display: none !important;
}

body .az2 .J-JN-M-I-Jm {
    color: green  !important;
    color: magenta  !important;
    color: blue !important;
}


`;
    var style_element = document.createElement('style');
    style_element.innerText = style__string;
    document.head.appendChild(style_element);


    
    ////////////////////////////////////////////////////////////////////////////////
    // 
    // inject script
    // 
    
    function time_string__reformat(item_datetime_string, fullname) {
    
        let item_datetime = new Date( item_datetime_string );
        let item_datetime_string_custom = item_datetime.getFullYear() + '.' + item_datetime.getMonth().toString().padStart(2, '0') + '.' + item_datetime.getDay().toString().padStart(2, '0') + '.' + item_datetime.getHours().toString().padStart(2, '0') + '.' + item_datetime.getMinutes().toString().padStart(2, '0');

        let diff_time = Date.now() - new Date( item_datetime_string ).getTime();
        let diff_time_minutes = Math.round( diff_time / 1000 / 60 );
        let diff_time_string = diff_time_minutes + 'min';
        if ( diff_time_minutes > 60 ) {
            let diff_time_hours = Math.round( diff_time_minutes / 60 );
            diff_time_string = diff_time_hours + 'h';
            if ( diff_time_hours > 24 ) {
                let diff_time_days = Math.round( diff_time_hours / 24 );
                diff_time_string = diff_time_days + 'd';
                if ( diff_time_days > 7 ) {
                    let diff_time_weeks = Math.round( diff_time_days / 7 );
                    diff_time_string = diff_time_weeks + 'w';
                    if ( diff_time_days > 30 ) {
                        let diff_time_months = ( diff_time_days / 30 ).toFixed(1);
                        diff_time_string = diff_time_months + 'm';
                        if ( diff_time_days > 365 ) {
                            let diff_time_months = ( diff_time_days / 365 ).toFixed(1);
                            diff_time_string = diff_time_months + 'y';
                        }
                    }
                }
            }
        }
        
        return diff_time_string;
    
    }

    function list_times__reformat() {
        
        let elements = document.querySelectorAll( '.nH table td.xW.xY span[title]' );

        if (elements) {
            
            elements.forEach( element => {

                let item_datetime_string = element.title;
                let diff_time_string = time_string__reformat(item_datetime_string);
                element.innerHTML = `<span class="bq3">-${diff_time_string}</span>`;

            });

        }

    }

    function detail_times__reformat() {
        
        let elements = document.querySelectorAll( '.nH table .cf.gJ td.gH.bAk span.g3' );

        if (elements) {
            
            elements.forEach( element => {

                let item_datetime_string = element.title;
                let diff_time_string = time_string__reformat(item_datetime_string);
                element.innerHTML = `-${diff_time_string}`;

            });

        }

    }

    var observer = new MutationObserver(function(mutations, observer) {
        mutations.forEach(function(mutation) {
            // console.log('mutations');
            list_times__reformat();
            detail_times__reformat();
        });
    });
    var target = document.querySelector( 'body' );
    var config = {
        subtree: false,
        childList: true,
        characterData: true,
        attributes: true
    };
    observer.observe(target, config);



})();