☰

GraphQL Playground Timed Autocomplete Hide

Hides GraphQL Playground autocomplete suggestions after a short delay

// ==UserScript==
// @name         GraphQL Playground Timed Autocomplete Hide
// @description  Hides GraphQL Playground autocomplete suggestions after a short delay
// @namespace    @lfernandezcall
// @version      2025-05-31
// @author       Alberto Fernandez
// @match        */graphql
// @icon         https://graphql.org/favicon.png
// @license      MIT
// @grant        none
// ==/UserScript==

let hintTimeout; // Global variable to store the timeout ID

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
      mutation.addedNodes.forEach(node => {
        if (node.nodeType === Node.ELEMENT_NODE) {
          if (node.classList.contains("CodeMirror-hints") || node.classList.contains("CodeMirror-hint-information")) {
            handleHintBoxVisibility();
          }
        }
      });
    } else if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
      if (mutation.target.classList.contains("CodeMirror-hints") || mutation.target.classList.contains("CodeMirror-hint-information")) {
        if (window.getComputedStyle(mutation.target).display !== 'none') {
          handleHintBoxVisibility();
        }
      }
    }
  });
});

// Function to manage the hint box visibility
function handleHintBoxVisibility() {
  if (hintTimeout) {
    clearTimeout(hintTimeout);
  }

  // Set a new timeout to hide/remove the hints after a delay
  // You can adjust the delay (in milliseconds) here
  const delay = 1500; // 1.5 seconds

  hintTimeout = setTimeout(() => {
    const hintWrappers = document.querySelectorAll(".CodeMirror-hints-wrapper, .CodeMirror-hints, .CodeMirror-hint-information");
    hintWrappers.forEach(element => {
      if (element.style.display !== 'none') {
        element.style.display = 'none';
      }
    });
    hintTimeout = null; // Reset timeout ID after execution
  }, delay);
}

// Start observing the body for child list changes and attribute changes on subtree elements
observer.observe(document.body, {
  subtree: true,
  childList: true,
  attributes: true,
  attributeFilter: ['style'] // Only observe 'style' attribute changes for performance
});

console.log("MutationObserver for GraphQL Playground initialized (timed hide).");