// ==UserScript==
// @name            Google Search Sidebar
// @namespace       jmln.tw
// @version         0.4.2
// @description     A user script and user style to move Google search tools to sidebar.
// @author          Jimmy Lin
// @license         MIT
// @homepageURL     https://github.com/jmlntw/google-search-sidebar
// @supportURL      https://github.com/jmlntw/google-search-sidebar/issues
// @include         /^https:\/\/(?:ipv4|ipv6|www)\.google\.(?:[a-z\.]+)\/search\?(?:.+&)?q=[^&]+(?:&.+)?$/
// @exclude         /^https:\/\/(?:ipv4|ipv6|www)\.google\.(?:[a-z\.]+)\/search\?(?:.+&)?tbm=lcl(?:&.+)?$/
// @compatible      firefox
// @compatible      chrome
// @compatible      edge
// @compatible      opera
// @run-at          document-end
// @grant           none
// ==/UserScript==

function GM_addStyle (css) {
  const style = document.createElement('style')
  style.type = 'text/css'
  style.textContent = css
  document.head.appendChild(style)
  return style
}

GM_addStyle(`
  /** CSS Variables **/

  :root {
    --user-sidebar-width: 180px;
    --user-sidebar-spacer: 20px;
    --user-sidebar-primary-color: #dd4b39;
    --user-action-menu-spacer: 2px;
    --user-action-menu-background: rgba(0, 0, 0, 0.1);
    --user-action-menu-font-size: 85%;
  }

  /** Navigation Bar **/

  /**
   * 1. Hide "Tools" toggle button on the navigation bar.
   */
  #hdtb-tls {
    display: none !important; /* 1. */
  }

  /** Search Menu **/

  /**
   * 1. Reset all CSS properties of the search menu wrapper.
   * 2. Show the search menu wrapper in the proper position.
   */
  #hdtbMenus {
    all: unset !important; /* 1. */
    display: block !important; /* 2. */
    position: absolute !important; /* 2. */
  }

  /**
   * 1. Reset all CSS properties of the search menu parent.
   * 2. Place search menus vertically.
   * 3. Set the gap space between each search menu.
   */
  #hdtbMenus #tn_1 {
    all: unset !important; /* 1. */
    display: flex !important; /* 2. */
    flex-direction: column !important; /* 2. */
    gap: var(--user-sidebar-spacer) !important; /* 3. */
  }

  /**
   * 1. Remove the leading space of the search menu wrapper.
   */
  #hdtbMenus #tn_1 > div:nth-child(1) {
    display: none !important; /* 1. */
  }

  /**
   * 1. Hide the menu toggle button.
   * 2. Reset all CSS properties of the dropdown menu.
   * 3. Show the dropdown menu in the proper position.
   * 4. Set the sidebar width with paddings.
   */
  #hdtbMenus #tn_1 g-popup > div:nth-child(1) {
    display: none !important; /* 1. */
  }
  #hdtbMenus #tn_1 g-popup > div:nth-child(2) {
    all: unset !important; /* 2. */
    display: block !important; /* 3. */
    position: static !important; /* 3. */
    width: calc(var(--user-sidebar-width) - 20px) !important; /* 4. */
    max-width: calc(var(--user-sidebar-width) - 20px) !important; /* 4. */
  }

  /**
   * 1. Remove the check image on the active menu item.
   * 2. Set the styles of the active menu item.
   */
  #hdtbMenus #tn_1 g-menu-item.nvELY {
    background-image: unset !important; /* 1. */
    color: var(--user-sidebar-primary-color) !important; /* 2. */
    font-weight: bolder !important; /* 2. */
  }

  /**
   * 1. Set the styles of "Clear" menu item on the sidebar.
   */
  #hdtbMenus #tn_1 > a.hdtb-mn-hd {
    padding: 4px 32px !important; /* 1. */
  }
  #hdtbMenus #tn_1 > a.hdtb-mn-hd:hover {
    background-color: rgba(0, 0, 0, 0.1) !important; /* 1. */
    text-decoration: unset !important; /* 1. */
  }

  /**
   * 1. Fix the position of the label showing "About ***,*** results...".
   */
  #appbar div.LHJvCe {
    top: unset !important; /* 1. */
    opacity: unset !important; /* 1. */
  }

  /** Main Page Content **/

  /**
   * 1. Set the proper position of the main page content.
   *    (No "!important" here to make Shopping search display correctly.)
   */
  #appbar,
  #center_col,
  #rcnt div.M8OgIe {
    margin-left: var(--user-sidebar-width); /* 1. */
  }

  /**
   * 1. Set the proper position of the right information block.
   *    ("--rhs-margin" is the CSS variable defined by Google.)
   */
  #rhs {
    margin-left: var(--rhs-margin); /* 1. */
  }

  /**
   * Do not move the right block to the bottom of the page if there's not enough
   * space.
   */
  @supports (selector(:has(p))) {
    #rcnt:has(#center_col:first-child + #rhs) {
      flex-wrap: nowrap !important;
    }
  }

  /** Action Menu **/

  /**
   * 1. Hide the dropdown arrow.
   */
  div.g g-popup > div {
    display: none !important; /* 1. */
  }

  /**
   * 1. Reset all CSS properties of the dropdown menu.
   * 2. Show the dropdown menu in the proper position.
   */
  div.g div.pkWBse {
    all: unset !important; /* 1. */
    display: inline-block !important; /* 2. */
  }

  /**
   * 1. Reset all CSS properties of the dropdown menu.
   * 2. Place the menu item horizontally.
   * 3. Set the gap space between each menu item.
   */
  div.g div.pkWBse g-menu {
    all: unset !important; /* 1. */
    display: flex !important; /* 2. */
    flex-direction: row !important; /* 2. */
    gap: var(--user-action-menu-spacer) !important; /* 3. */
  }
  div.g div.pkWBse g-menu-item {
    all: unset !important; /* 1. */
  }
  div.g div.pkWBse g-menu-item > div {
    all: unset !important; /* 1. */
  }

  /**
   * 1. Set the styles of the dropdown menu item.
   */
  div.g div.pkWBse g-menu-item a {
    padding: 0 5px !important; /* 1. */
    background-color: var(--user-action-menu-background) !important; /* 1. */
    font-size: var(--user-action-menu-font-size) !important; /* 1. */
  }
`)