Jetpack Boost: Image Guide compatibility improvements

projects/plugins/boost/app/features/image-guide/src/initialize.ts

@@ -18,7 +18,6 @@ function getClosestContainingAncestor( node: HTMLElement ): HTMLElement | null {
 
 	// Keep track of ancestor elements that do not have a "z-index" set
 	let elementsWithoutZIndex: HTMLElement[] = [];
-
 	while ( current && current instanceof HTMLElement ) {
 		// Don't go past the body element
 		if ( current === document.body ) {
@@ -31,8 +30,22 @@ function getClosestContainingAncestor( node: HTMLElement ): HTMLElement | null {
 			( style.position === 'static' || style.position === 'relative' )
 		) {
 			elementsWithoutZIndex.push( current );
+		}
+
+		// Ok. This works, but by sheer luck. Not a good solution.
+		else if ( style.position !== 'absolute' ) {
+			elementsWithoutZIndex = [ current ];
 		} else {
-			elementsWithoutZIndex = [];
+			// The idea here was to reset elementsWithoutZIndex array
+			// whenever we encounter an element that has a z-index set.
+			// But that breaks the portfolio in the portfolio plugin layout.
+			// By not resetting the array, we're keeping
+			// tracks of first static element in the tree.
+			// This seems to work out ok for now,
+			// But at this point, the logic here now
+			// has changed from "reset the array when we encounter a z-indexed element"
+			// to "reset when we encounter a non-static element that's absolutely positioned"
+			// elementsWithoutZIndex = [];
 		}
 
 		// Move on to the next parent element
@@ -98,10 +111,7 @@ function findContainer( image: MeasurableImage ): HTMLElement | undefined {
 		wrapper.classList.add( 'jetpack-boost-guide' );
 		wrapper.dataset.jetpackBoostGuideId = ( ++wrapperID ).toString();
 		if ( parentStyle.position === 'static' ) {
-			wrapper.classList.add( 'relative' );
-			Array.from( ancestor.children )
-				.reverse()
-				.forEach( child => wrapper.appendChild( child ) );
+			ancestor.style.position = 'relative';
 		}
 
 		ancestor.prepend( wrapper );

projects/plugins/boost/app/features/image-guide/src/ui/Bubble.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { createEventDispatcher } from 'svelte';
 	import { backOut } from 'svelte/easing';
 	import { fade, fly } from 'svelte/transition';
 	import Spinner from './Spinner.svelte';
@@ -19,9 +20,27 @@
 		y: 2,
 		easing: backOut,
 	};
+
+	let bubble: HTMLElement;
+	const dispatch = createEventDispatcher();
+	function onHover() {
+		const rect = bubble.getBoundingClientRect();
+		dispatch( 'hover', {
+			index,
+			position: {
+				top: rect.top + rect.height + 10,
+				left: rect.left,
+			},
+		} );
+	}
 </script>
 
-<div class="interaction-area {severity}" on:mouseenter transition:fly={scaleTransition}>
+<div
+	class="interaction-area {severity}"
+	bind:this={bubble}
+	on:mouseenter={onHover}
+	transition:fly={scaleTransition}
+>
 	<div class="bubble">
 		{#if false === $isLoading}
 			<div class="bubble-inner">

projects/plugins/boost/app/features/image-guide/src/ui/Main.svelte

@@ -17,7 +17,16 @@
 		stores.forEach( store => store.updateDimensions() );
 	} );
 
-	function onMouseLeave() {
+	function closeDetails( e ) {
+		// Don't exit when hovering the Portal
+		if (
+			e.relatedTarget &&
+			// Don't exit when hovering the Popup
+			e.relatedTarget.classList.contains( 'keep-guide-open' )
+		) {
+			return;
+		}
+
 		if ( $guideState !== 'always_on' ) {
 			show = false;
 		}
@@ -46,21 +55,35 @@
 
 	$: show = $guideState === 'always_on' ? 0 : false;
 	$: toggleBackdrop( show !== false );
+	let position = {
+		top: 0,
+		left: 0,
+	};
+
+	function hover( e: CustomEvent ) {
+		const detail = e.detail;
+		const index = detail.index;
+		position = detail.position;
+		show = index;
+	}
 </script>
 
 {#if $guideState === 'active' || $guideState === 'always_on'}
-	<div class="guide {size}" class:show={show !== false} on:mouseleave={onMouseLeave}>
+	<div class="guide {size}"
+	class:show={show !== false}
+	class:keep-guide-open={show !== false}
+	on:mouseleave={closeDetails}>
 		<div class="previews">
 			{#each stores as store, index}
-				<Bubble {index} {store} on:mouseenter={() => ( show = index )} />
+				<Bubble {index} {store} on:hover={hover} />
 			{/each}
 		</div>
 		{#if show !== false}
 			<!--
 				Intentionally using only a single component here.
 				See <Popup> component source for details.
 			 -->
-			<Popup store={stores[ show ]} {size} />
+			<Popup store={stores[ show ]} {size} {position} on:mouseleave={closeDetails} />
 		{/if}
 	</div>
 {/if}
@@ -88,10 +111,9 @@
 		height: 100%;
 		z-index: 8000;
 		line-height: 1.55;
-		padding: 15px;
+		padding: 20px;
 		&.small {
 			font-size: 13px;
-			padding: 15px;
 		}
 
 		&.micro {