/* ==UserStyle==
@name           Gmail Keyboard Shortcut Tooltips
@namespace      github.com/acropup/acropup-UserStyle-CSS-Scripts
@homepageURL    https://github.com/acropup/acropup-UserStyle-CSS-Scripts
@version        1.0.4
@description    Within Gmail, display Gmail's default keyboard shortcuts for most commands next to their buttons. ⇧ symbol denotes the Shift key.
@preprocessor   less
@author         Shane Burgess
==/UserStyle== */

/* Within Gmail, while no textbox is selected, type a question mark to get a shortcut list,
   or go to https://support.google.com/mail/answer/6594
   This style assumes you are using the default keyboard shortcuts.
   If you have customized them, you'll have to customize this script to match (it's not difficult).
   In this style, the upwards arrow symbol used is ⇧, a Unicode symbol called the Upwards Thick Arrow (U+21e7).
   If the ⇧ symbol doesn't look like an upwards facing arrow to you, then something (like your text editor, or
   the font you're using) doesn't understand Unicode and may have converted the up arrow into another character.
*/
@-moz-document url-prefix("https://mail.google.com/mail/u/") {
    :root {
        --kbd-tooltip-fg-color: #666;
        --kbd-tooltip-bg-color: #DDD;
        --kbd-tooltip-width: 1.25rem;
        --kbd-tooltip-height: 20px;
        --kbd-tooltip-font: Consolas, 'Courier New', Monaco, Monospace;
        --kbd-tooltip-box-shadow: initial;
    }
    
    .base-fmt() {
        content: 'xxx';
        position: absolute;
        text-align: center;
        width: var(--kbd-tooltip-width);
        height: var(--kbd-tooltip-height);
        font-size: .875rem;
        font-family: var(--kbd-tooltip-font);
        color: var(--kbd-tooltip-fg-color);
        background-color: var(--kbd-tooltip-bg-color);
        box-shadow: var(--kbd-tooltip-box-shadow);
        border-radius: 5px;
    }
    
    .flex-centered() {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .full-viz() {
        visibility: visible;
        transform: scale(1);
        opacity: 1;
        left: 0;
    }
    
    /* Remind user to enable advanced shortcuts
       This is the only change to the DOM when advanced shortcuts are enabled/disabled,
       but unfortunately this part of the DOM doesn't exist at all until after the user
       brings up the keyboard tips overlay with '?'. As a result, this notification is 
       mostly useless. */
    .wa.aou {
        visibility: hidden;
        display: unset;
    }
    .wa .aov::before {
        content: "Type '?' and enable all shortcuts";
        position: fixed;
        visibility: visible;
        top: 8px;
        right: 103px;
        width: 10rem;
        height: 36px;
        padding: 6px;
        color: var(--kbd-tooltip-fg-color);
        background-color: var(--kbd-tooltip-bg-color);
        border-radius: 5px;
        transition: opacity .5s ease-out, transform .4s cubic-bezier(0, 1, 0, 1)
    }
    .wa .aov.aox::before {
        opacity: 0;
        transform: scale(0);
        transition: opacity .5s ease, transform 1.5s ease-in;
    }
    
    /* Search box */
    button[aria-label="Search mail"]::after {
        .base-fmt();
        .flex-centered();
        content: '/';
        bottom: -15%;
        left: calc(50% - .75em);
    }
    
    /* Email folders list */
    .TK .aim > div::before, /*Email folders*/
    .T-I-KE::after,         /*Compose new email*/ 
    .aND.pp.aj3::before     /*Hangouts contacts list*/ {
        .base-fmt();
        visibility: hidden;
        top: 10%;
        left: 4px;
    }
	.TK .aim {
        position: relative;
        @folders: {
            gi: 'Inbox';
            gs: 'Starred';
            gb: 'Snoozed';
            gt: 'Sent';
            gd: 'Drafts';
            ga: 'All Mail';
        };
        each(@folders; {
            & > div[data-tooltip=@{value}]::before { content: '@{key}'; visibility: visible; }
        });
    }
    .T-I-KE::after { /*Compose new email*/ 
        content: 'c';
        visibility: visible;
        line-height: 1rem;
        top: 15px;
        left: 131px;
        width: calc(.8 * var(--kbd-tooltip-width));
        height: calc(.8 * var(--kbd-tooltip-height));
    }
    .aeN.bhZ .T-I-KE::after { /*Compose new email, when left pane is collapsed*/ 
        top: 28px;
        left: 40px;
    }
    .aND.pp.aj3::before { /*Hangouts contacts list*/
        content: 'hc';
        visibility: visible;
        position: relative;
        top: 84px;
        block-size: 20px;
        left: calc(100% - 45px);
        z-index: 1;
    }
    
    
    /* Toolbar Buttons */
    /* Note that most left-aligned toolbar buttons start with their name in the 'title' attribute, but as soon 
       as the user hovers or focuses on the toolbar, 'title' attribute is removed and 'aria-label' is added. */
    .T-I[title]::before,      /*All Left-aligned Toolbar Buttons, pre-focus */
    .T-I[aria-label]::before, /*All Left-aligned Toolbar Buttons, post-focus*/
    .adg.T-I-Js-IF:not([aria-disabled]) span::before, /*Newer conversation*/
    .adg.T-I-Js-Gs:not([aria-disabled]) span::before, /*Older conversation*/
    .amD.T-I-Js-IF:not([aria-disabled]) span::before, /*Go to prev page*/
    .amD.T-I-Js-Gs:not([aria-disabled]) span::before  /*Go to next page*/ {
        .base-fmt();
        visibility: hidden;
        top: 110%;
        height: calc(.85 * var(--kbd-tooltip-height));
    }
    .T-I[aria-label^='Back to ']::before,     .T-I[title^='Back to ']::before      { content:  'u'; visibility: visible; }
    .T-I[aria-label^='Remove label ']::before,.T-I[title^='Remove label ']::before { content:  'y'; visibility: visible; }
    .T-I[aria-label='Select']::before,        .T-I[title='Select']::before         { content:  ','; .full-viz(); }
    .T-I[aria-label='Archive']::before,       .T-I[title='Archive']::before        { content:  'e'; visibility: visible; }
    .T-I[aria-label='Report spam']::before,   .T-I[title='Report spam']::before    { content:  '!'; visibility: visible; }
    .T-I[aria-label='Delete']::before,        .T-I[title='Delete']::before         { content:  '#'; visibility: visible; }
    .T-I[aria-label='Mark as read']::before,  .T-I[title='Mark as read']::before   { content: '⇧I'; visibility: visible; }
    .T-I[aria-label='Mark as unread']::before,.T-I[title='Mark as unread']::before { content: '⇧U'; visibility: visible; }
    .T-I[aria-label='Snooze']::before,        .T-I[title='Snooze']::before         { content:  'b'; visibility: visible; }
    .T-I[aria-label='Add to tasks']::before,  .T-I[title='Add to tasks']::before   { content: '⇧T'; visibility: visible; }
    .T-I[aria-label='Move to']::before,       .T-I[title='Move to']::before        { content:  'v'; visibility: visible; }
    .T-I[aria-label='Labels']::before,        .T-I[title='Labels']::before         { content:  'l'; visibility: visible; }
    .T-I[aria-label='More'].mA::before,       .T-I[title='More'].mA::before        { content:  '.'; visibility: visible; }
    .adg.T-I-Js-IF:not([aria-disabled]) span::before /*Newer conversation*/        { content:  'k'; visibility: visible; }
    .adg.T-I-Js-Gs:not([aria-disabled]) span::before /*Older conversation*/        { content:  'j'; visibility: visible; }
    .amD.T-I-Js-IF:not([aria-disabled]) span::before /*Go to previous page*/       { content: 'gp'; visibility: visible; }
    .amD.T-I-Js-Gs:not([aria-disabled]) span::before /*Go to next page*/           { content: 'gn'; visibility: visible; }
    /* Conversation view right side buttons */
    .T-I[aria-label='Collapse all']::before   { content:  ':'; .full-viz(); }
    .T-I[aria-label='Expand all']::before     { content:  ';'; .full-viz(); }
    .T-I[aria-label='In new window']::before  { content: '⇧R'; .full-viz(); }
    .T-I[aria-label='Reply']::before       { content: 'r|a|f'; .full-viz(); left: -1.05em; width: 3.4em; }
    
    .adi, .amF /*Unhide parents of previous and next buttons*/ {
        display: unset;
        font-size: 0px;
        margin-right: unset;
    }
    
    /* Select menu */
    .G-tF .J-N {
		&::before {
			.base-fmt();
			top: 10%;
			left: 18px;
		}
		each('*a','*n','*r','*u','*s','*t'; {
			&:nth-child(@{index})::before { content: @value; }
		});
    }
    
    /* Select / Star on active mailbox row (Flag Important shortcut doesn't work here) */
    .zA.btb .oZ-x3::after,
    .zA.btb .apU::after,
    #link_undo::after {
        .base-fmt();
        .flex-centered();
        top: 50%;
        right: 4px;
        width: 1em;
        height: 1em;
        z-index: 1;
    }
    .zA.btb .oZ-x3::after { content: 'x'; }
    .zA.btb .apU::after   { content: 's'; }
    .zA.btb .apU { position: relative; }
    
    /* Undo action, such as sent email, deleted email, etc. */
    #link_undo::after {
        content: 'z';
        top: 10px;
        right: -8.6px;
    }
    
}