// ==UserScript==
// @name        Yahoo Mail Beautification
// @namespace   com.tipidpc.velc2009
// @description Removes the frost on top of your theme's background and expands the mail area to fill the space left by ad-blockers
// @icon        https://icons.duckduckgo.com/ip3/mail.yahoo.com.ico
// @include     https://mail.yahoo.com/*
// @grant       GM_addStyle
// @license     GNU LGPLv3
// @run-at      document-start
// @version     2.0.2
// @downloadURL none
// ==/UserScript==

GM_addStyle('[role="banner"] {height:60px !important}');
GM_addStyle('[role="navigation"] {display:none}');
GM_addStyle('[data-test-id="content-area"] {background-color: transparent !important}');
GM_addStyle('[data-test-id="mail-app-component"] {background-color: transparent !important}');
GM_addStyle('[data-test-id="comms-properties-bar"] {background-color: transparent !important}');


GM_addStyle('[data-test-id="left-rail-scrolling-container"]::-webkit-scrollbar {height: 8px; width: 8px}');
GM_addStyle('[data-test-id="left-rail-scrolling-container"]::-webkit-scrollbar-thumb {background-color: rgba(255,255,255,0.4)}');
GM_addStyle('[data-test-id="left-rail-scrolling-container"]::-webkit-scrollbar-thumb:hover {background-color: rgba(255,255,255,0.8)}');
GM_addStyle('[data-test-id="left-rail-scrolling-container"]::-webkit-scrollbar-thumb:active {background-color: rgb(255,255,255)}');

GM_addStyle('[data-test-id="virtual-list"]::-webkit-scrollbar {height: 8px; width: 8px}');
GM_addStyle('[data-test-id="virtual-list"]::-webkit-scrollbar-thumb {background-color: rgba(255,255,255,0.4)}');
GM_addStyle('[data-test-id="virtual-list"]::-webkit-scrollbar-thumb:hover {background-color: rgba(255,255,255,0.8)}');
GM_addStyle('[data-test-id="virtual-list"]::-webkit-scrollbar-thumb:active {background-color: rgb(255,255,255)}');


// GM_addStyle('[data-test-id="right-rail-ad"] {display: none}');
GM_addStyle('[data-test-id="right-rail-hidead-btn"] {display: none !important}');
// GM_addStyle('[data-test-id="settings-link-label"] {display: none !important}');



let map = new WeakMap();


function removeAntiAdBlock(mutationList, observer) {
  let body = document.getElementById('app');
  if (!body) {
    setTimeout(removeAntiAdBlock, 20);
    return;
  }
  if (!observer && !map.has(body)) {
    observer = new MutationObserver(removeAntiAdBlock);
    observer.observe(body, {childList: true});
    map.set(body, observer);
  }
  let modalContainer = body.querySelector('div > [aria-labelledby="adblock-whitelist-cue"]');
  if (modalContainer) modalContainer.parentNode.remove();
}
setTimeout(removeAntiAdBlock, 0);
window.addEventListener('load', removeAntiAdBlock);
window.addEventListener('popstate', removeAntiAdBlock);


function hasLeftoverSpace(list, ad) {
  return list.childElementCount > 3 && list.children[1].childElementCount == 0 || ad;
}

function isIterable(object) {
  return object && typeof object[Symbol.iterator] === 'function';
}

function shiftMailList(mutationList, observer) {
  let container = document.querySelector('[data-test-id="virtual-list-container"]');
  if (!container) {
    setTimeout(shiftMailList, 20);
    return;
  }
  if (!observer && !map.has(container)) {
    observer = new MutationObserver(shiftMailList);
    observer.observe(container, {childList: true, subtree: true});
    map.set(container, observer);
  }
  let list = container.querySelector('[data-test-id="virtual-list"] > ul');
  if (!list) return;

  let ad = list.querySelector('[data-test-id="pencil-ad-messageList"]');
  if (hasLeftoverSpace(list, ad)) {
    let items = list.children;
    let adItem = ad ? ad.parentNode.parentNode : null;

    let top = 0;
    for (let i = 1, count = items.length; i < count; ++i) {
      let item = items[i];
      if (item === adItem) continue;
      item.style.top = top + 'px';
      top += item.offsetHeight;
    }
  } else if (isIterable(mutationList)) {
    for (let mutation of mutationList) {
      for (let node of mutation.removedNodes) {
        if (node.tagName !== 'LI') continue;
        if (node.firstElementChild.getAttribute('data-test-id')) continue;
        if (node.querySelector('[data-test-id="loading_indicator"]')) {
          let items = list.children;
          let lastItem = mutation.previousSibling;
          let nextIndex = Array.prototype.indexOf.call(items, lastItem) + 1;
          let nextTop = lastItem.offsetTop + lastItem.offsetHeight;
          if (items[nextIndex].offsetTop > nextTop) {
            for (let i = nextIndex, count = items.length; i < count; ++i) {
              let item = items[i];
              item.style.top = nextTop + 'px';
              nextTop += item.offsetHeight;
            }
          }
        }
      }
    }
  }
}
setTimeout(shiftMailList, 0);
window.addEventListener('load', shiftMailList);
window.addEventListener('popstate', shiftMailList);


function collapseRightRail(entries, observer) {
  let rightRail = document.querySelector('[data-test-id="mail-right-rail"]')
  if (!rightRail) {
    setTimeout(collapseRightRail, 20);
    return;
  }
  if (!observer && !map.has(rightRail)) {
    let rightRailObserver = new MutationObserver(collapseRightRail);
    rightRailObserver.observe(rightRail, {childList: true, subtree: true});
    map.set(rightRail, rightRailObserver);
  }

  let apps = rightRail.querySelector('[data-test-id="comms-properties"]');
  let appsBar = apps.parentNode;

  /*if (!observer && !map.has(appsBar)) {
    observer = new IntersectionObserver(collapseRightRail, {root: appsBar});
    observer.observe(apps);
    map.set(appsBar, observer);
  }*/

  if (rightRail.querySelector('[data-test-id="right-rail-ad"]')) {
    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';
    }
  } else {
    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';
    }
  }
}
// setTimeout(collapseRightRail, 0);
// window.addEventListener('load', collapseRightRail);
// window.addEventListener('popstate', collapseRightRail);