Skip to content

Instantly share code, notes, and snippets.

Avatar
👋

Patrick Brosset captainbrosset

👋
View GitHub Profile
@captainbrosset
captainbrosset / dom-mutation-logger.js
Last active Nov 14, 2022
Useful DevTools snippets
View dom-mutation-logger.js
function logMutation(mutation) {
console.log(mutation);
}
const mutationObserver = new MutationObserver((mutations) => {
for (const mutation of mutations) {
// Build a reason object that will let the user know what exactly happened
let details = null;
if (mutation.type === "attributes") {
details = {
@captainbrosset
captainbrosset / codeswing.json
Last active Sep 16, 2021
test gistpad codeswing
View codeswing.json
{
"scripts": [],
"styles": []
}
@captainbrosset
captainbrosset / badges.html
Created Apr 8, 2021
Color contrast improvement in DevTools
View badges.html
<!DOCTYPE html>
<meta charset="utf8">
<style>
html {
font-family: consolas, monospace;
font-size: 16px;
}
ul, li {
padding: 0;
@captainbrosset
captainbrosset / clip-mask.ts
Created Mar 5, 2021
Code snippets for the "How we built the DevTools Tooltips" article
View clip-mask.ts
// This is our mask element, a 100%/100% semi-transparent
// element sitting on the whole UI.
const mask = ...;
// Start defining a path used to clip the mask.
// First, go around the outer perimeter.
const polygon = ['0 0', '100% 0', '100% 100%', '0 100%', '0 0'];
// And then clip away the highlighted areas from the mask.
// To do this, we go around their shapes, in reverse direction.
@captainbrosset
captainbrosset / svg-clip.css
Created Mar 5, 2021
Code snippets for the "How we built the DevTools Tooltips" article
View svg-clip.css
svg {
clip-path: path("M100,100L200,100L200,150L250,150L250,250L150,250L150,200L100,200L100,100Z");
}
@captainbrosset
captainbrosset / position.css
Created Mar 5, 2021
Code snippets for the "How we built the DevTools Tooltips" article
View position.css
.tooltips-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@captainbrosset
captainbrosset / generate-path.ts
Created Mar 5, 2021
Code snippets for the "How we built the DevTools Tooltips" article
View generate-path.ts
// Get the first segment's start point.
const points = [segments[0].start];
// And append the end point of each segment, one by one, after that.
for (const segment of segments) {
if (!segment) {
continue;
}
points.push(segment.end);
}
@captainbrosset
captainbrosset / order-segments.ts
Created Mar 5, 2021
Code snippets for the "How we built the DevTools Tooltips" article
View order-segments.ts
// Our list of all segments. Each one being an object like
// {start: {x, y}, end: {x, y}}
const allSegments = [...];
// Start at the first segment.
const orderedSegments = [allSegments[0]];
while (true) {
// The previous segment.
const previous = orderedSegments[orderedSegments.length - 1];
@captainbrosset
captainbrosset / get-coordinates.ts
Created Mar 5, 2021
Code snippets for the "How we built the DevTools Tooltips" article
View get-coordinates.ts
// Get the coordinates of the element.
const rect = element.getBoundingClientRect();
// Apply any offset that might be configured for it.
for (const {direction, size} of offsets) {
if (direction === Direction.Top) {
rect.y -= size;
rect.height += size;
}
if (direction === Direction.Right) {
rect.width += size;
@captainbrosset
captainbrosset / queryselector-shadow.ts
Created Mar 5, 2021
Code snippets for the "How we built the DevTools Tooltips" article
View queryselector-shadow.ts
function querySelectorShadow(selector: string): Element|null {
let found: Element|null = null;
const search = (root: Element|ShadowRoot) => {
const iter = document.createTreeWalker(
root,
NodeFilter.SHOW_ELEMENT,
);
do {
const currentNode = iter.currentNode as HTMLElement;