Move Gmail reply buttons to top of conversation

Gmail puts the "reply", "reply all" and "forward" buttons at the bottom of the conversation. This script adds buttons for these actions to the toolbar at the top of the conversation alongside the "Archive" button.

  1. // ==UserScript==
  2. // @name Move Gmail reply buttons to top of conversation
  3. // @namespace https://www.taylrr.co.uk/
  4. // @version 0.1
  5. // @description Gmail puts the "reply", "reply all" and "forward" buttons at the bottom of the conversation. This script adds buttons for these actions to the toolbar at the top of the conversation alongside the "Archive" button.
  6. // @author taylor8294
  7. // @match https://mail.google.com/mail/*
  8. // @icon https://www.google.com/s2/favicons?domain=google.com
  9. // @grant none
  10. // @license GPLv3
  11. // @require https://cdn.jsdelivr.net/npm/arrive@2.4.1/minified/arrive.min.js
  12. // ==/UserScript==
  13.  
  14. (function() {
  15. 'use strict';
  16.  
  17. let addBtns = function(){
  18. console.log("[addBtns called]");
  19. let archiveBtn = document.querySelector('[gh="mtb"] [title="Archive"]'),
  20. replyClass = document.querySelector('[act="94"] img')?.classList.length ? document.querySelector('[act="94"] img').classList[0] : "mL",
  21. replyAllClass = document.querySelector('[act="24"] img')?.classList.length ? document.querySelector('[act="24"] img').classList[0] : "mK",
  22. forwardClass = document.querySelector('[act="25"] img')?.classList.length ? document.querySelector('[act="25"] img').classList[0] : "mI";
  23.  
  24. if(archiveBtn){
  25. if(archiveBtn.matches(':first-child')){
  26. let reply = document.createElement('DIV');
  27. reply.setAttribute('class',archiveBtn.className);
  28. reply.setAttribute('act','94');
  29. reply.setAttribute('role','button');
  30. reply.setAttribute('tabindex','0');
  31. reply.setAttribute('jslog','');
  32. reply.setAttribute('data-tooltip','Reply');
  33. reply.setAttribute('aria-label','Reply');
  34. reply.style.userSelect = 'none';
  35. reply.innerHTML = `<div class="${archiveBtn.firstElementChild.className}"><div class="${replyClass} ${Array.from(archiveBtn.firstElementChild.firstElementChild.classList).slice(1).join(' ')}"></div></div>`;
  36. reply.addEventListener("click", (e)=>{let btns = Array.from(document.querySelectorAll('[role="presentation"] [role="link"]')).filter(n => n.innerText.trim()=='Reply'); if(btns.length) btns[0].click()}, false);
  37.  
  38. let replyAll = document.createElement('DIV');
  39. replyAll.setAttribute('class',archiveBtn.className);
  40. replyAll.setAttribute('act','24');
  41. replyAll.setAttribute('role','button');
  42. replyAll.setAttribute('tabindex','0');
  43. replyAll.setAttribute('jslog','');
  44. replyAll.setAttribute('data-tooltip','Reply to all');
  45. replyAll.setAttribute('aria-label','Reply to all');
  46. replyAll.style.userSelect = 'none';
  47. replyAll.innerHTML = `<div class="${archiveBtn.firstElementChild.className}"><div class="${replyAllClass} ${Array.from(archiveBtn.firstElementChild.firstElementChild.classList).slice(1).join(' ')}"></div></div>`;
  48. replyAll.addEventListener("click", (e)=>{let btns = Array.from(document.querySelectorAll('[role="presentation"] [role="link"]')).filter(n => n.innerText.trim()=='Reply to all'); if(btns.length) btns[0].click()}, false);
  49.  
  50. let forward = document.createElement('DIV');
  51. forward.setAttribute('class',archiveBtn.className);
  52. forward.setAttribute('act','25');
  53. forward.setAttribute('role','button');
  54. forward.setAttribute('tabindex','0');
  55. forward.setAttribute('jslog','');
  56. forward.setAttribute('data-tooltip','Forward');
  57. forward.setAttribute('aria-label','Forward');
  58. forward.style.userSelect = 'none';
  59. forward.innerHTML = `<div class="${archiveBtn.firstElementChild.className}"><div class="${forwardClass} ${Array.from(archiveBtn.firstElementChild.firstElementChild.classList).slice(1).join(' ')}"></div></div>`;
  60. forward.addEventListener("click", (e)=>{let btns = Array.from(document.querySelectorAll('[role="presentation"] [role="link"]')).filter(n => n.innerText.trim()=='Forward'); if(btns.length) btns[0].click()}, false);
  61.  
  62. archiveBtn.parentElement.prepend(forward);
  63. archiveBtn.parentElement.prepend(replyAll);
  64. archiveBtn.parentElement.prepend(reply);
  65. console.log("[addBtns added ",reply,replyAll,forward,"]");
  66. } else {
  67. console.log("[Buttons already present? Did not add]");
  68. }
  69. } else {
  70. console.log('[archiveBtn not found]');
  71. }
  72. }
  73.  
  74. if( document.readyState !== 'loading' ) {
  75. setTimeout(addBtns,2000)
  76. } else {
  77. document.addEventListener('DOMContentLoaded', (e)=>{
  78. setTimeout(addBtns,2000)
  79. });
  80. }
  81. document.arrive('[gh="mtb"] [title="Archive"]', function () {
  82. console.log("[Archive button spotted]");
  83. addBtns();
  84. });
  85.  
  86. })();