diff --git a/docs/testing/regression-checklist/mapping.json b/docs/testing/regression-checklist/mapping.json index 42a2a78e4f52a..291b8ced3792d 100644 --- a/docs/testing/regression-checklist/mapping.json +++ b/docs/testing/regression-checklist/mapping.json @@ -30,7 +30,7 @@ "testFile": [ "extensions/blocks/checklist.md" ] }, { - "regex": "^projects\/plugins\/jetpack\/extensions\/(blocks\/(subscriptions|premium-content)\/|shared\/memberships\.js)", + "regex": "^projects/plugins/jetpack/extensions/(blocks/(subscriptions|premium-content)/|shared/memberships.js)", "testFile": [ "extensions/blocks/subscriptions.md" ] } ] diff --git a/projects/plugins/boost/app/features/image-guide/src/index.ts b/projects/plugins/boost/app/features/image-guide/src/index.ts index 13b94497bd388..962b26fe0771b 100644 --- a/projects/plugins/boost/app/features/image-guide/src/index.ts +++ b/projects/plugins/boost/app/features/image-guide/src/index.ts @@ -104,7 +104,9 @@ function initialize() { * we don't need the guides sooner because * images have likely not loaded yet. */ -window.addEventListener( 'load', () => { - initialize(); - window.addEventListener( 'resize', debounceDimensionUpdates() ); -} ); +if ( ! window.frameElement ) { + window.addEventListener( 'load', () => { + initialize(); + window.addEventListener( 'resize', debounceDimensionUpdates() ); + } ); +} diff --git a/projects/plugins/boost/app/features/image-guide/src/initialize.ts b/projects/plugins/boost/app/features/image-guide/src/initialize.ts index dee095c403cc9..8f765ef95c3d8 100644 --- a/projects/plugins/boost/app/features/image-guide/src/initialize.ts +++ b/projects/plugins/boost/app/features/image-guide/src/initialize.ts @@ -16,9 +16,8 @@ import type { MeasurableImage } from '@automattic/jetpack-image-guide'; function getClosestContainingAncestor( node: HTMLElement ): HTMLElement | null { let current: HTMLElement | null = node.parentElement; - // Keep track of ancestor elements that do not have a "z-index" set - let elementsWithoutZIndex: HTMLElement[] = []; - + // Keep track of target element + let target: HTMLElement; while ( current && current instanceof HTMLElement ) { // Don't go past the body element if ( current === document.body ) { @@ -26,26 +25,26 @@ function getClosestContainingAncestor( node: HTMLElement ): HTMLElement | null { } const style = getComputedStyle( current ); + + // Guide can't be correctly positioned inside inline elements + // because they don't have dimensions. + const canContainBlockElements = style.display !== 'inline'; + const isStatic = style.position === 'static'; + const isRelative = style.position === 'relative'; + const hasZIndex = style.zIndex !== 'auto'; + const isRelativeWithZIndex = isRelative && hasZIndex; + if ( - style.zIndex === 'auto' && - ( style.position === 'static' || style.position === 'relative' ) + canContainBlockElements && + ( ( ! target && ( isStatic || isRelative ) ) || isRelativeWithZIndex ) ) { - elementsWithoutZIndex.push( current ); - } else { - elementsWithoutZIndex = []; + target = current; } - // Move on to the next parent element current = current.parentElement; } - // Return the first ancestor element that isn't affected by z-index - if ( elementsWithoutZIndex.length > 0 ) { - return elementsWithoutZIndex[ 0 ]; - } - - // If no element was found, return the body element - return document.body; + return target; } /** @@ -98,10 +97,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 ); diff --git a/projects/plugins/boost/app/features/image-guide/src/ui/Bubble.svelte b/projects/plugins/boost/app/features/image-guide/src/ui/Bubble.svelte index 1b47d944c6030..1ad0a645cbc8d 100644 --- a/projects/plugins/boost/app/features/image-guide/src/ui/Bubble.svelte +++ b/projects/plugins/boost/app/features/image-guide/src/ui/Bubble.svelte @@ -1,4 +1,5 @@ -
+
{#if false === $isLoading}
diff --git a/projects/plugins/boost/app/features/image-guide/src/ui/Main.svelte b/projects/plugins/boost/app/features/image-guide/src/ui/Main.svelte index a5d9bac4bd891..7049cd5fd6e0c 100644 --- a/projects/plugins/boost/app/features/image-guide/src/ui/Main.svelte +++ b/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,13 +55,29 @@ $: 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; + } {#if $guideState === 'active' || $guideState === 'always_on'} -
+
{#each stores as store, index} - ( show = index )} /> + {/each}
{#if show !== false} @@ -60,7 +85,7 @@ Intentionally using only a single component here. See component source for details. --> - + {/if}
{/if} @@ -84,14 +109,11 @@ position: absolute; top: 0; left: 0; - width: 100%; - height: 100%; z-index: 8000; line-height: 1.55; - padding: 15px; + padding: 20px; &.small { font-size: 13px; - padding: 15px; } &.micro { diff --git a/projects/plugins/boost/app/features/image-guide/src/ui/Popup.svelte b/projects/plugins/boost/app/features/image-guide/src/ui/Popup.svelte index 226e46b1cf756..2bb00ca024444 100644 --- a/projects/plugins/boost/app/features/image-guide/src/ui/Popup.svelte +++ b/projects/plugins/boost/app/features/image-guide/src/ui/Popup.svelte @@ -1,14 +1,20 @@ -
- + + +
+ -
-
-
- {imageName} -
- {#if ratio >= 1.3} -
- The image loaded is {ratio}x larger than it appears in the browser. - {#if $fileSize.weight > 450} - Try using a smaller image or reduce the file size by compressing it. - {/if} -
- {:else if ratio === 1} -
The image is exactly the correct size for this screen.
- {:else if ratio >= 0.99 && ratio < 1.3} -
- The image size is very close to the size it appears in the browser. - {#if ratio > 1} - Because there are various screen sizes, it's okay for the image to be - {ratio}x than it appears on the page. - {/if} -
- {:else} - {@const stretchedBy = maybeDecimals( 1 / $oversizedRatio ) } -
- The image file is {stretchedBy}x smaller than expected on this screen. This might be fine, - but you may want to check if the image appears blurry. +
+
+
+ {imageName}
+ {#if ratio >= 1.3} +
+ The image loaded is {ratio}x larger than it appears in the browser. + {#if $fileSize.weight > 450} + Try using a smaller image or reduce the file size by compressing it. + {/if} +
+ {:else if ratio === 1} +
The image is exactly the correct size for this screen.
+ {:else if ratio >= 0.99 && ratio < 1.3} +
+ The image size is very close to the size it appears in the browser. + {#if ratio > 1} + Because there are various screen sizes, it's okay for the image to be + {ratio}x than it appears on the page. + {/if} +
+ {:else} + {@const stretchedBy = maybeDecimals( 1 / $oversizedRatio ) } +
+ The image file is {stretchedBy}x smaller than expected on this screen. This might be + fine, but you may want to check if the image appears blurry. +
+ {/if} +
+ {#if $imageURL} + {imageName} {/if}
- {#if $imageURL} - {imageName} - {/if} -
-
-
-
Image File Dimensions
- {#if $fileSize.width > 0 && $fileSize.height > 0} -
{$fileSize.width} x {$fileSize.height}
- {:else} +
+
+
Image File Dimensions
+ {#if $fileSize.width > 0 && $fileSize.height > 0} +
{$fileSize.width} x {$fileSize.height}
+ {:else} +
+ {#if $isLoading} + Loading... + {:else} + Unknown + {/if} +
+ {/if} +
+ +
+
Expected Dimensions
+
{$expectedSize.width} x {$expectedSize.height}
+
+ +
+
Size on screen
+
{$sizeOnPage.width} x {$sizeOnPage.height}
+
+ +
+
Image Size
- {#if $isLoading} + {#if $fileSize.weight > 0} + {Math.round( $fileSize.weight )} KB + {:else if $isLoading} Loading... {:else} Unknown {/if}
- {/if} -
- -
-
Expected Dimensions
-
{$expectedSize.width} x {$expectedSize.height}
-
- -
-
Size on screen
-
{$sizeOnPage.width} x {$sizeOnPage.height}
-
- -
-
Image Size
-
- {#if $fileSize.weight > 0} - {Math.round( $fileSize.weight )} KB - {:else if $isLoading} - Loading... - {:else} - Unknown - {/if}
-
-
-
Potential savings
-
- {#if $potentialSavings > 0} - {$potentialSavings} KB - {:else if $isLoading} - Loading... - {:else} - N/A - {/if} +
+
Potential savings
+
+ {#if $potentialSavings > 0} + {$potentialSavings} KB + {:else if $isLoading} + Loading... + {:else} + N/A + {/if} +
-
+ {#if imageOrigin !== origin} +
+ Unable to estimate file size savings because the image is hosted on a different domain. +
+ {/if} - {#if imageOrigin !== origin}
- Unable to estimate file size savings because the image is hosted on a different domain. + Learn how to improve site speed by optimizing images
- {/if} - -
- Learn how to improve site speed by optimizing images
-
+