Toggle Element Outlines Bookmarklet.js

/**
 * Show background colours and borders for all elements
 */
(function () {
  const Outline = {
    id: 'td-outline-toggle',

    getStyleElement: () => {
      const styleElement = document.createElement('style');
      styleElement.id = Outline.id;
      styleElement.innerText = `* {
        background: rgba(255, 51, 153, 0.05) !important;
        outline: 1px solid rgba(255, 51, 153, 0.5) !important;
      }`;
      return styleElement;
    },

    show: () => {
      /* Do this for the main document */
      const styleElement = Outline.getStyleElement();
      document.head.appendChild(styleElement);

      /* Do this for all iframes too */
      const iframes = document.getElementsByTagName('iframe');

      Array.prototype.slice.call(iframes)
        .forEach((iframe, index) => {
          const styleElementForIframe = Outline.getStyleElement();
          iframe.contentDocument.head.appendChild(styleElementForIframe);
        });
    },

    hide: (styleElement) => {
      styleElement.remove();
    },

    toggle: () => {
      const styleElement = document.getElementById(Outline.id);

      /* Do this for the main document */
      Outline[ styleElement ? 'hide' : 'show' ](styleElement);

      /* Do this for all iframes too */
      const iframes = document.getElementsByTagName('iframe');

      Array.prototype.slice.call(iframes)
        .forEach((iframe) => {
          const styleElementInIframe = iframe.contentDocument.getElementById(Outline.id);
          Outline[ styleElementInIframe ? 'hide' : 'show' ](styleElementInIframe);
        });
    }
  };

  /* toggle it */
  Outline.toggle();
})();