content-script.js

/**
 * Given a node element, generates a hopefully human-identifiable CSS selector.
 * @param {HTMLElement} element
 * @returns {string} CSS Selector
 */
function generateSelector( element ) {
	let selector, tag = element.nodeName.toLowerCase();
	if ( element.id ) {
		selector = '#' + element.getAttribute( 'id' );
	} else if ( element.getAttribute( 'class' ) ) {
		selector = '.' + element.getAttribute( 'class' ).split( ' ' ).join( '.' );
	}
	return selector ? tag + selector : tag;
}

/**
 * @typedef {Object} StackingContext
 *
 * @property {Element} node          A DOM Element
 * @property {string}  reason        Reason for why a stacking context was created
 */

/**
 * Recursive function that finds the closest parent stacking context.
 * See also https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
 *
 * @param {Element} node
 * @returns {StackingContext} The closest parent stacking context
 */
const getClosestStackingContext = function ( node ) {
	// the root element (HTML).
	if ( ! node || node.nodeName === 'HTML' ) {
		return { node: document.documentElement, reason: 'root' };
	}

	// handle shadow root elements.
	if ( node.nodeName === '#document-fragment' ) {
		return getClosestStackingContext( node.host );
	}

	const computedStyle = getComputedStyle( node );

	// position: fixed or sticky.
	if ( computedStyle.position === 'fixed' || computedStyle.position === 'sticky' ) {
		return { node: node, reason: `position: ${ computedStyle.position }` };
	}

	// container-type: size or inline-size
	if ( computedStyle.containerType === 'size' || computedStyle.containerType === 'inline-size' ) {
		return { node: node, reason: `container-type: ${computedStyle.containerType}`}
	}

	// positioned (absolutely or relatively) with a z-index value other than "auto".
	if ( computedStyle.zIndex !== 'auto' && computedStyle.position !== 'static' ) {
		return { node: node, reason: `position: ${ computedStyle.position }; z-index: ${ computedStyle.zIndex }` };
	}

	// elements with an opacity value less than 1.
	if ( computedStyle.opacity !== '1' ) {
		return { node: node, reason: `opacity: ${ computedStyle.opacity }` };
	}

	// elements with a transform value other than "none".
	if ( computedStyle.transform !== 'none' ) {
		return { node: node, reason: `transform: ${ computedStyle.transform }` };
	}

	// elements with a scale value other than "none"
	if ( computedStyle.scale !== 'none' ) {
		return { node: node, reason: `scale: ${ computedStyle.scale }` };
	}

	// elements with a rotate value other than "none"
	if ( computedStyle.rotate !== 'none' ) {
		return { node: node, reason: `rotate: ${ computedStyle.rotate }` };
	}

	// elements with a translate value other than "none"
	if ( computedStyle.translate !== 'none' ) {
		return { node: node, reason: `translate: ${ computedStyle.translate }` };
	}

	// elements with a mix-blend-mode value other than "normal".
	if ( computedStyle.mixBlendMode !== 'normal' ) {
		return { node: node, reason: `mixBlendMode: ${ computedStyle.mixBlendMode }` };
	}

	// elements with a filter value other than "none".
	if ( computedStyle.filter !== 'none' ) {
		return { node: node, reason: `filter: ${ computedStyle.filter }` };
	}

	// elements with a backdropFilter value other than "none".
	if ( computedStyle.backdropFilter !== 'none' ) {
		return { node: node, reason: `backdropFilter: ${ computedStyle.backdropFilter }` };
	}

	// elements with a perspective value other than "none".
	if ( computedStyle.perspective !== 'none' ) {
		return { node: node, reason: `perspective: ${ computedStyle.perspective }` };
	}

	// elements with a clip-path value other than "none".
	if ( computedStyle.clipPath !== 'none' ) {
		return { node: node, reason: `clip-path: ${ computedStyle.clipPath } ` };
	}

	// elements with a mask value other than "none".
	const mask = computedStyle.mask || computedStyle.webkitMask;
	if ( mask !== 'none' && mask !== undefined ) {
		return { node: node, reason: `mask:  ${ mask }` };
	}

	// elements with a mask-image value other than "none".
	const maskImage = computedStyle.maskImage || computedStyle.webkitMaskImage;
	if ( maskImage !== 'none' && maskImage !== undefined ) {
		return { node: node, reason: `mask-image: ${ maskImage }` };
	}

	// elements with a mask-border value other than "none".
	const maskBorder = computedStyle.maskBorder || computedStyle.webkitMaskBorder;
	if ( maskBorder !== 'none' && maskBorder !== undefined ) {
		return { node: node, reason: `mask-border: ${ maskBorder }` };
	}

	// elements with isolation set to "isolate".
	if ( computedStyle.isolation === 'isolate' ) {
		return { node: node, reason: `isolation: ${ computedStyle.isolation }` };
	}

	// transform or opacity in will-change even if you don't specify values for these attributes directly.
	if ( computedStyle.willChange === 'transform' || computedStyle.willChange === 'opacity' ) {
		return { node: node, reason: `willChange: ${ computedStyle.willChange }` };
	}

	// elements with -webkit-overflow-scrolling set to "touch".
	if ( computedStyle.webkitOverflowScrolling === 'touch' ) {
		return { node: node, reason: '-webkit-overflow-scrolling: touch' };
	}

	// an item with a z-index value other than "auto".
	if ( computedStyle.zIndex !== 'auto' ) {
		const parentStyle = getComputedStyle( node.parentNode );
		// with a flex|inline-flex parent.
		if ( parentStyle.display === 'flex' || parentStyle.display === 'inline-flex' ) {
			return {
				node: node,
				reason: `flex-item; z-index: ${ computedStyle.zIndex }`,
			};
			// with a grid parent.
		} else if ( parentStyle.grid !== 'none / none / none / row / auto / auto' ) {
			return {
				node: node,
				reason: `child of grid container; z-index: ${ computedStyle.zIndex }`,
			};
		}
	}

	// contain with a value of layout, or paint, or a composite value that includes either of them
	const contain = computedStyle.contain;
	if ( [ 'layout', 'paint', 'strict', 'content' ].indexOf( contain ) > -1 ||
		contain.indexOf( 'paint' ) > -1 ||
		contain.indexOf( 'layout' ) > -1
	) {
		return {
			node: node,
			reason: `contain: ${ contain }`,
		};
	}

	return getClosestStackingContext( node.parentNode );
};

/**
 * @typedef {Object} ZContextSidebarContents
 *
 * @property {boolean} [createsStackingContext]        True if element creates a stacking context.
 * @property {string}  [createsStackingContextReason]  Reason for why a stacking context is created.
 * @property {string}  [parentStackingContext]         Human readable CSS selector of the parent stacking context.
 * @property {number}  [z-index]                       The current z-index value
 */

/**
 * @typedef {Object} ZContextUpdateSidebarAction
 *
 * @property {string}                  type     The action name
 * @property {ZContextSidebarContents} sidebar  Contents to update the z-index pane with
 */

/**
 * Given an element, looks up the related z-index and stacking context information and returns a ZContextUpdateSidebarAction
 *
 * @param {Element} element
 * @returns {ZContextUpdateSidebarAction}
 */
function zContext( element ) {
	if ( ! element || element.nodeType !== 1 ) {
		return { type: 'Z_CONTEXT_UPDATE_SIDEBAR', sidebar: {} };
	}
	if ( element && element.nodeType === 1 ) {
		const closest = getClosestStackingContext( element );
		const createsStackingContext = element === closest.node;
		const reason = createsStackingContext ? closest.reason : 'not a stacking context';
		let parentContext = closest.node;
		const computedStyle = getComputedStyle( element );
		if ( createsStackingContext && element.nodeName !== 'HTML' ) {
			parentContext = getClosestStackingContext( $0.parentNode ).node;
		}
		return {
			type: 'Z_CONTEXT_UPDATE_SIDEBAR',
			sidebar: {
				createsStackingContext,
				createsStackingContextReason: reason,
				parentStackingContext: generateSelector( parentContext ),
				currentNode: generateSelector( element ),
				'z-index': computedStyle.zIndex !== 'auto' ? parseInt( computedStyle.zIndex, 10 ) : computedStyle.zIndex
			},
		};
	}
}

/**
 * Stores the last selected element $0 in this frame.
 */
let _lastElement;

/**
 * Invoked by the devtools panel when a new element is selected. This function sends a new message to update the
 * z-index pane with the z-index stacking context information if we detect that an element has been selected
 * in this frame.
 *
 * @param {node} element
 * @returns void
 */
function setSelectedElement( element ) {
	// If the selected element is the same, let handlers in other iframe contexts handle it instead.
	if ( element !== undefined && element !== _lastElement ) {
		_lastElement = element;
		chrome.runtime.sendMessage( zContext( element ) );
	}
}

/**
 * Listen for the z-index devtools panel to be created, before registering the frame.
 */
chrome.runtime.onMessage.addListener( function ( message ) {
	if ( message.type === 'Z_CONTEXT_SIDEBAR_INIT' ) {
		chrome.runtime.sendMessage( { type: 'Z_CONTEXT_REGISTER_FRAME', url: window.location.href } );
	}
} );

/**
 * Reconnect to the z-index devtools panel when we navigate to another page
 */
function addLocationObserver(callback) {
	const config = { attributes: false, childList: true, subtree: false }
	const observer = new MutationObserver(callback)
	observer.observe(document.body, config)
}
const reregisterOnNavigation = () => {
	chrome.runtime.sendMessage( { type: 'Z_CONTEXT_NAVIGATION' } );
}
addLocationObserver(reregisterOnNavigation)