/* ==UserStyle==
@name           Keyboard shortcut tooltips for messages.google.com
@namespace      github.com/acropup/acropup-UserStyle-CSS-Scripts
@homepageURL    https://github.com/acropup/acropup-UserStyle-CSS-Scripts
@version        1.2.0
@description    Within Google Messages for web (messages.google.com), display the most useful keyboard shortcuts next to their buttons.
@author         Shane Burgess
==/UserStyle== */

/* To see a full list of keyboard shortcuts in Google Messages for web, type a question mark while
   not in a text box.
*/
@-moz-document url-prefix("https://messages.google.com/web/conversations") {
    body {
       --kbd-tooltip-bg-color: #ccc;
       --kbd-tooltip-color: #5f6368;
    }
    body.dark-theme {
       --kbd-tooltip-bg-color: #555558;
       --kbd-tooltip-color: #bbbbc0;
    }
    /* Use margin instead of padding so background colour doesn't overlap tooltips */
    mws-autosize-textarea.input textarea.input {
        padding: 0;
        margin: 6px 0;
    }
    
    /* General formatting for all tooltips */
    mws-conversation-list-item > a.list-item.selected::before,
    mws-conversation-list-item:has(> a.list-item.selected) + mws-conversation-list-item > a.list-item::before,
    mw-main-nav > div.main-nav-header::before,
    mws-autosize-textarea.input:not(:focus-within)::before,
    .bottom-anchored-content > .content:not(:focus-within)::before,
    button[data-e2e-picker-button]:first-child::before,
    button[data-e2e-picker-button]::after,
    mw-fab-link.start-chat::before,
    button[data-e2e-details-button]::before,
    button[data-e2e-archive-button]::before,
    button[data-e2e-delete-button]::before,
    button[data-e2e-main-nav-menu="SETTINGS"]::before
    {
        position: absolute;
        font-family: monospace;
        font-size: 13px;
        line-height: initial;
        color: var(--kbd-tooltip-color);
        background-color: var(--kbd-tooltip-bg-color);
        padding: 1px 4px;
        border-radius: 4px;
        z-index: 1;
    }
    
    /* Previous / Next conversation */
    mws-conversation-list-item {
        position: relative;
    }
    mws-conversation-list-item > a.list-item.selected::before,
    mws-conversation-list-item:has(> a.list-item.selected) + mws-conversation-list-item > a.list-item::before {
        content: 'Ctrl + ,';
        top: -20px;
        right: 0px;
        white-space: nowrap;
    }
    mws-conversation-list-item:has(> a.list-item.selected) + mws-conversation-list-item > a.list-item::before {
        content: 'Ctrl + .';
        top: 1px;
    }
    
    /* Focus on conversation list */
    mw-main-nav > div.main-nav-header::before {
        content: 'Ctrl+Shift+K';
        top: 130px;
        right: 6px;
    }
    
    /* Focus on message textbox */
    mws-autosize-textarea.input:not(:focus-within)::before {
        content: 'R';
        top: -14px;
    }
    
    /* Focus on messages in conversation */
    .bottom-anchored-content {
        /* Having transforms breaks position:fixed; for children */
        transform: unset !important;
    }
    .bottom-anchored-content > .content:not(:focus-within)::before {
        content: 'Ctrl+J';
        position: fixed;
        top: 76px;
        left: 8px;
    }
    
    /* Insert images buttons */
    button[data-e2e-picker-button]:first-child::before,
    button[data-e2e-picker-button]::after {
        bottom: 46px;
        height: 15px;
        right: 12px;
    }
    button[data-e2e-picker-button]:first-child::before {
        content: 'Ctrl+Shift';
        right: 38px;
    }
    button[data-e2e-picker-button="EMOJI"]::after      { content: '+E'; }
    button[data-e2e-picker-button="STICKER"]::after    { content: '+S'; }
    button[data-e2e-picker-button="GIF"]::after        { content: '+G'; }
    button[data-e2e-picker-button="ATTACHMENT"]::after { content: '+A'; }
    
    /* Start new chat */
    mw-fab-link.start-chat {
        position: relative;
    }
    mw-fab-link.start-chat::before {
        content: 'Ctrl+K';
        top: -22px;
        left: 40px;
    }
  
    button[data-e2e-details-button]::before {
        content: 'Ctrl+Shift+O';
        left: 24px;
        bottom: 0px;
    }
    button[data-e2e-archive-button]::before {
        content: 'Ctrl+Alt+H';
        left: 24px;
        bottom: 0px;
    }
    button[data-e2e-delete-button]::before {
        content: 'Ctrl+D';
        left: 24px;
        bottom: 0px;
    }
    button[data-e2e-main-nav-menu="SETTINGS"]::before {
        content: 'Ctrl+S';
        left: 24px;
        bottom: 0px;
    }
}