Greasy Fork

Greasy Fork is available in English.

Yahoo Mail Beautification

Removes the top navigation bar, the frost on top of your theme's background, and automatically collapse the right rail

// ==UserScript==
// @name        Yahoo Mail Beautification
// @namespace   http://greasyfork.icu/en/users/34131-velc-gf
// @version     2.2.2
// @description Removes the top navigation bar, the frost on top of your theme's background, and automatically collapse the right rail
// @author      Velarde, Louie C.
// @match       https://mail.yahoo.com/*
// @icon        https://www.google.com/s2/favicons?domain=mail.yahoo.com&sz=64
// @license     LGPL-3.0
// @run-at      document-end
// @grant       GM_addStyle
// ==/UserScript==
GM_addStyle('[role="banner"] {height:60px !important}');
GM_addStyle('[role="navigation"] {display:none}');
GM_addStyle('[data-test-id="left-rail-scrolling-container"], [data-test-id="virtual-list"] {scrollbar-color:rgba(0,0,0,0.5) transparent; scrollbar-width:thin}');
GM_addStyle('[data-test-id="right-rail-hidead-btn"], [data-test-id="settings-link-label"] {display:none !important}');

let bg = '{background: url(https://s.yimg.com/nq/nr/img/yahoo_mail_global_english_white_1x.png) no-repeat center rgba(0,0,0,0.2); height: 64px !important; margin-top: 4px}';
GM_addStyle('[data-test-id="mail-reader"][data-test-preview="1"] [data-test-id="virtual-list"] li:not(:has([data-test-id="message-list-item"], [data-test-id="time-chunk-separator"], [data-test-id="loading_indicator"])) ' + bg);


let map = new WeakMap();

function setup() {
  let mainContainer = document.getElementById('mail-app-container');
  if (!map.has(mainContainer)) {
    let observer = new MutationObserver(setup);
    observer.observe(mainContainer, {childList: true});
    map.set(mainContainer, observer);
  }

  let tabContainer = mainContainer.querySelector('[data-test-id="content-below-tabs"]');
  if (!map.has(tabContainer)) {
    let observer = new MutationObserver(setup);
    observer.observe(tabContainer, {childList: true});
    map.set(tabContainer, observer);

    let messageToolbar = mainContainer.querySelector('[data-test-id="message-toolbar"]');
    if (getComputedStyle(messageToolbar).backgroundColor == "rgba(0, 0, 0, 0)") {
      clearBackground('content-area');
      clearBackground('mail-app-main-content');
      clearBackground('comms-properties-bar');
    }
  }

  let rightRail = tabContainer.querySelector('[data-test-id="mail-right-rail"]');
  if (!map.has(rightRail)) {
    let observer = new ResizeObserver(collapseRightRail);
    observer.observe(rightRail);
    map.set(rightRail, observer);
  }
}

function clearBackground(testId) {
  document.querySelector(`[data-test-id="${testId}"]`).style.backgroundColor = 'transparent';
}

function collapseRightRail(param1, param2) {
  let rightRail = document.querySelector('[data-test-id="mail-right-rail"]');
  let appsBar = rightRail.querySelector('[data-test-id="comms-properties-bar"]');
  let apps = appsBar.querySelector('[data-test-id="comms-properties"]');

  let observer = map.get(rightRail);
  if (observer instanceof ResizeObserver) {
    observer.disconnect();
    observer = new MutationObserver(collapseRightRail);
    observer.observe(rightRail, {childList: true, subtree: true});
    map.set(rightRail, observer);
  }

  if (rightRail.querySelector('[data-test-id="calendar-right-rail-pane"]') ||
      rightRail.querySelector('[data-test-id="contact-card"]') ||
      rightRail.querySelector('[data-test-id="contact-details"]') ||
      rightRail.querySelector('[data-test-id="contacts-pane-search"]')) {
    if (appsBar.firstChild != apps) {
      appsBar.insertBefore(apps, appsBar.firstChild);
    }
    appsBar.style.flexDirection = 'row';
    apps.style.flexDirection = 'row';
    apps.style.marginTop = '0';

    for (let app of apps.children) {
      app.style.margin = '0 14px 0 0';
    }
  } else {
    if (appsBar.lastChild != apps) {
      appsBar.appendChild(apps);
    }
    appsBar.style.flexDirection = 'column';
    apps.style.flexDirection = 'column';
    apps.style.marginTop = '14px';

    for (let app of apps.children) {
      app.style.margin = '14px 0 0 0';
    }
  }
}
addEventListener('load', setup);