// ==UserScript==
// @name         Yahoo Mail Fixer
// @namespace    https://github.com/def00111
// @version      1.0
// @description  Various improvements/fixes for Yahoo Mail
// @author       def00111
// @match        https://mail.yahoo.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=mail.yahoo.com
// @grant        none
// @noframes
// @run-at       document-start
// @license      MIT
// @downloadURL none
// ==/UserScript==

(function() {
  'use strict';

  const cssText = `
    #Atom .iy_FF {
      overflow-x: auto !important;
    }
    #Atom :is(.H_3DVPV, .H_tQ, .H_1HK53Y, .H_ZIFfAM) {
      height: auto !important;
    }
    #Atom :is(.W_3v3uk, .W_3nHoX, .W_7iGr) {
      width: auto !important;
    }
    div[class*="bg_png_mask"]:empty {
      min-height: auto !important;
    }
    #basic-mail-app-container {
      & td[class="V_GM W_3n93F p_R o_h G_e"]:has(> a[href^="/b/settings/"]) + td > #norrin-optin {
        display: inline-block !important;
      }
      & table:has(#messageListContainer > div > #gam-iframe-basic-mail > #gpt-iframe) {
        height: 100vh;
      }
      & td:has(> div > #gam-iframe-basic-mail > #gpt-iframe),
      & #messageListContainer > div:has(> #gam-iframe-basic-mail > #gpt-iframe),
      & #norrin-optin {
        display: none !important;
      }
    }
    #mail-app-container {
      & a[data-test-id="redirect-to-full-view-right-rail-btn"] {
        position: static !important;
      }
      & div[data-test-id="epoch-schedule-list-container"]:has(div[data-test-id="event-list-in-day-view-container"]) {
        overflow-y: auto !important;
      }
      & .message-view[data-test-expanded="true"] {
        overflow-x: auto;
      }
      & span[data-test-id="more-less-label"] {
        margin-right: 16px;
      }
      & div[data-test-id="mail-right-rail"]:has(div[data-test-id="gam-iframe"]:only-child) div:has(> div[data-test-id="gam-iframe"] > #gpt-iframe),
      & #mail-app-component div:has(> div[data-test-id="gam-iframe"] > #gpt-iframe),
      & div[data-test-id="mail-right-rail"] > div:has(> div[data-test-id="right-rail-hidead-btn"]),
      & span[data-test-id="settings-link-label"],
      & div:has(> article > a[data-test-id="bottom-sticky-pencil-ad"]),
      & div[data-test-id="contact-card"] + div[data-test-id="gam-iframe"] {
        display: none !important;
      }
      & #mail-app-component:has(div > div[data-test-id="gam-iframe"] > #gpt-iframe) div.H_74JI:has(> span > span.D_X) {
        height: 100% !important;
      }
      & div[data-test-id="mail-right-rail"]:has(div[data-test-id="gam-iframe"]:only-child) div[data-test-id="comms-properties-bar"] {
        border-left: 1px solid #e0e4e9;
        position: absolute;
        right: 0;
      }
      & #mail-app-component:has(+ div[data-test-id="mail-right-rail"] div[data-test-id="gam-iframe"]:only-child) div[data-test-id="search-header"] {
        box-sizing: border-box;
      }
      & div[data-test-id="search-header"] + div[data-test-id="mail-reader-toolbar"] > div[data-test-id="message-toolbar"] {
        max-width: none !important;
      }
      & #mail-app-component:has(+ div[data-test-id="mail-right-rail"] div[data-test-id="gam-iframe"]:only-child) div:is([data-test-id="message-toolbar"], [data-test-id="search-header"]),
      & #mail-app-component:has(+ div[data-test-id="mail-right-rail"] div[data-test-id="gam-iframe"]:only-child) > div > div > div > .compose-header div:is([data-test-id="compose-header-top-bar"], [data-test-id="container-from"]) {
        max-width: calc(100% - var(--ymf-comms-properties-bar-width));
      }
      @media only screen and (max-width: 1400px) {
        & div[data-test-id="message-toolbar"] button span.t_l {
          display: none !important;
        }
      }
    }
  `;

  const config = {
    childList: true,
    subtree: true
  };

  const sel = `div[data-test-id="mail-right-rail"]:has(div[data-test-id="gam-iframe"]:only-child) div[data-test-id="comms-properties-bar"]`;
  const sel2 = `div[data-test-id="mail-right-rail"] > div:has(> div[data-test-id="right-rail-hidead-btn"])`;

  let styleEl = null;
  const addStyle = el => {
    const style = window.getComputedStyle(el);
    if (!styleEl) {
      styleEl = document.createElement("style");
      document.head.append(styleEl);
    }
    styleEl.textContent = `:root { --ymf-comms-properties-bar-width: ${style.width}; }`;
  };

  document.addEventListener("DOMContentLoaded", () => {
    if (!observer1._disconnected) {
      observer1.disconnect();
      observer1._disconnected = true;
    }
    if (location.pathname.split("/", 2)[1] == "d") {
      const node = document.body.querySelector(sel);
      if (node) {
        const node2 = document.body.querySelector(sel2);
        if (node2) {
          const style = window.getComputedStyle(node2);
          if (style.display == "none") {
            addStyle(node);
          } else {
            resizeObserver.observe(node);
            // resizeObserver._observing = true;
          }
        }
      } else {
       observer2.observe(document.body, config);
      }
    }
  }, {
   once: true
  });

  window.onload = () => {
    if (resizeObserver._observing) {
      resizeObserver.disconnect();
      resizeObserver._observing = false;
    }
    if (location.pathname.split("/", 2)[1] == "d") {
      const node = document.body.querySelector(sel);
      if (node) {
        addStyle(node);
      }
    }
  };

  const resizeObserver = new ResizeObserver(([entry]) => {
    if (document.contains(entry.target)) {
      addStyle(entry.target);
    }
    resizeObserver.unobserve(entry.target);
    resizeObserver._observing = false;
  });
  resizeObserver._observing = false;

  const observer1 = new MutationObserver(() => {
    if (!document.body) return;
    const node = document.body.querySelector(sel);
    if (node) {
      observer1.disconnect();
      observer1._disconnected = true;
      resizeObserver.observe(node);
      resizeObserver._observing = true;
    }
  });
  observer1._disconnected = false;
  observer1.observe(document, config);

  const observer2 = new MutationObserver(() => {
    const node = document.body.querySelector(sel);
    if (node) {
       observer2.disconnect();
       addStyle(node);
    }
  });

  const observer3 = new MutationObserver(() => {
    if (document.head) {
      const style = document.createElement("style");
      style.textContent = cssText;
      document.head.append(style);
      observer3.disconnect();
    }
  });
  observer3.observe(document, config);
})();