Skip to content

Instantly share code, notes, and snippets.

@tinacious
Last active May 25, 2022 19:38
Show Gist options
  • Save tinacious/1656d44a390f1c75fa7ba4c87df4b84c to your computer and use it in GitHub Desktop.
Save tinacious/1656d44a390f1c75fa7ba4c87df4b84c to your computer and use it in GitHub Desktop.
/**
* 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();
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment