Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltip: render tooltip markup in the DOM only when open #54312

Merged
merged 5 commits into from
Sep 11, 2023

Conversation

ciampo
Copy link
Contributor

@ciampo ciampo commented Sep 8, 2023

What?

As per #48440 (comment), PR #48440 introduced a regression in rendering performance.

This PR experiments with rendering the Tooltip dynamically, in case this can help improving the rendering performance again.

How?

Using the open state from the Ariakit store to effectively render (or not) the tooltip in the DOM.

Unit tests were updated as necessary to reflect the fact that, when the tooltip isn't "open", tooltip-related markup is not rendered in the DOM. Changes to unit tests are mostly un-doing changes from #48440, including the ones to LinkControl

Testing Instructions

  • In Storybook and across the editor, make sure that tooltips continue to work as expected.
  • Check the performance CI check and make sure that block editor-related metrics are have improved are back to levels pre- ToolTip: refactor using ariakit  #48440

@ciampo ciampo self-assigned this Sep 8, 2023
@ciampo ciampo added [Type] Regression Related to a regression in the latest release [Type] Performance Related to performance efforts [Package] Components /packages/components and removed [Type] Regression Related to a regression in the latest release labels Sep 8, 2023
@diegohaz
Copy link
Member

diegohaz commented Sep 8, 2023

I'm not entirely certain I'm interpreting the performance results accurately, but it seems this gets the job done! 👍🏽

It's worth mentioning that the aria-describedby attribute is removed from tooltip anchors when the tooltip is unmounted. Otherwise, it would refer to a nonexistent element.

@ciampo ciampo marked this pull request as ready for review September 9, 2023 10:49
@github-actions
Copy link

github-actions bot commented Sep 9, 2023

Size Change: +2 B (0%)

Total Size: 1.52 MB

Filename Size Change
build/components/index.min.js 255 kB +2 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 955 B
build/annotations/index.min.js 2.69 kB
build/api-fetch/index.min.js 2.28 kB
build/autop/index.min.js 2.1 kB
build/blob/index.min.js 451 B
build/block-directory/index.min.js 7.01 kB
build/block-directory/style-rtl.css 1.02 kB
build/block-directory/style.css 1.02 kB
build/block-editor/content-rtl.css 4.25 kB
build/block-editor/content.css 4.24 kB
build/block-editor/default-editor-styles-rtl.css 381 B
build/block-editor/default-editor-styles.css 381 B
build/block-editor/index.min.js 216 kB
build/block-editor/style-rtl.css 15.3 kB
build/block-editor/style.css 15.3 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 90 B
build/block-library/blocks/archives/style.css 90 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/audio/theme-rtl.css 126 B
build/block-library/blocks/audio/theme.css 126 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 584 B
build/block-library/blocks/button/editor.css 582 B
build/block-library/blocks/button/style-rtl.css 629 B
build/block-library/blocks/button/style.css 628 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 113 B
build/block-library/blocks/categories/editor.css 112 B
build/block-library/blocks/categories/style-rtl.css 124 B
build/block-library/blocks/categories/style.css 124 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 421 B
build/block-library/blocks/columns/style.css 421 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 199 B
build/block-library/blocks/comment-template/style.css 198 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 647 B
build/block-library/blocks/cover/editor.css 650 B
build/block-library/blocks/cover/style-rtl.css 1.63 kB
build/block-library/blocks/cover/style.css 1.62 kB
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 98 B
build/block-library/blocks/details/style.css 98 B
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 126 B
build/block-library/blocks/embed/theme.css 126 B
build/block-library/blocks/file/editor-rtl.css 316 B
build/block-library/blocks/file/editor.css 316 B
build/block-library/blocks/file/style-rtl.css 280 B
build/block-library/blocks/file/style.css 281 B
build/block-library/blocks/file/view.min.js 312 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 B
build/block-library/blocks/freeform/editor-rtl.css 2.61 kB
build/block-library/blocks/freeform/editor.css 2.61 kB
build/block-library/blocks/gallery/editor-rtl.css 947 B
build/block-library/blocks/gallery/editor.css 952 B
build/block-library/blocks/gallery/style-rtl.css 1.53 kB
build/block-library/blocks/gallery/style.css 1.53 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 B
build/block-library/blocks/group/editor-rtl.css 654 B
build/block-library/blocks/group/editor.css 654 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 76 B
build/block-library/blocks/heading/style.css 76 B
build/block-library/blocks/html/editor-rtl.css 336 B
build/block-library/blocks/html/editor.css 337 B
build/block-library/blocks/image/editor-rtl.css 834 B
build/block-library/blocks/image/editor.css 833 B
build/block-library/blocks/image/style-rtl.css 1.42 kB
build/block-library/blocks/image/style.css 1.41 kB
build/block-library/blocks/image/theme-rtl.css 126 B
build/block-library/blocks/image/theme.css 126 B
build/block-library/blocks/image/view-interactivity.min.js 1.83 kB
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 478 B
build/block-library/blocks/latest-posts/style.css 478 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 505 B
build/block-library/blocks/media-text/style.css 503 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 712 B
build/block-library/blocks/navigation-link/editor.css 711 B
build/block-library/blocks/navigation-link/style-rtl.css 115 B
build/block-library/blocks/navigation-link/style.css 115 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 296 B
build/block-library/blocks/navigation-submenu/editor.css 295 B
build/block-library/blocks/navigation/editor-rtl.css 2.26 kB
build/block-library/blocks/navigation/editor.css 2.26 kB
build/block-library/blocks/navigation/style-rtl.css 2.23 kB
build/block-library/blocks/navigation/style.css 2.22 kB
build/block-library/blocks/navigation/view.min.js 984 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 401 B
build/block-library/blocks/page-list/editor.css 401 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 235 B
build/block-library/blocks/paragraph/editor.css 235 B
build/block-library/blocks/paragraph/style-rtl.css 335 B
build/block-library/blocks/paragraph/style.css 335 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 508 B
build/block-library/blocks/post-comments-form/style.css 508 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 B
build/block-library/blocks/post-excerpt/editor-rtl.css 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 588 B
build/block-library/blocks/post-featured-image/editor.css 586 B
build/block-library/blocks/post-featured-image/style-rtl.css 319 B
build/block-library/blocks/post-featured-image/style.css 319 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 314 B
build/block-library/blocks/post-template/style.css 314 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-time-to-read/style-rtl.css 69 B
build/block-library/blocks/post-time-to-read/style.css 69 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 125 B
build/block-library/blocks/preformatted/style.css 125 B
build/block-library/blocks/pullquote/editor-rtl.css 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 335 B
build/block-library/blocks/pullquote/style.css 335 B
build/block-library/blocks/pullquote/theme-rtl.css 168 B
build/block-library/blocks/pullquote/theme.css 168 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 302 B
build/block-library/blocks/query-pagination/style.css 299 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 450 B
build/block-library/blocks/query/editor.css 449 B
build/block-library/blocks/query/style-rtl.css 370 B
build/block-library/blocks/query/style.css 368 B
build/block-library/blocks/query/view.min.js 559 B
build/block-library/blocks/quote/style-rtl.css 222 B
build/block-library/blocks/quote/style.css 222 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 B
build/block-library/blocks/rss/editor-rtl.css 149 B
build/block-library/blocks/rss/editor.css 149 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 178 B
build/block-library/blocks/search/editor.css 178 B
build/block-library/blocks/search/style-rtl.css 607 B
build/block-library/blocks/search/style.css 607 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/search/view.min.js 631 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 234 B
build/block-library/blocks/separator/style.css 234 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 323 B
build/block-library/blocks/shortcode/editor.css 323 B
build/block-library/blocks/site-logo/editor-rtl.css 754 B
build/block-library/blocks/site-logo/editor.css 754 B
build/block-library/blocks/site-logo/style-rtl.css 204 B
build/block-library/blocks/site-logo/style.css 204 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/editor-rtl.css 682 B
build/block-library/blocks/social-links/editor.css 681 B
build/block-library/blocks/social-links/style-rtl.css 1.44 kB
build/block-library/blocks/social-links/style.css 1.43 kB
build/block-library/blocks/spacer/editor-rtl.css 348 B
build/block-library/blocks/spacer/editor.css 348 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 432 B
build/block-library/blocks/table/editor.css 432 B
build/block-library/blocks/table/style-rtl.css 639 B
build/block-library/blocks/table/style.css 639 B
build/block-library/blocks/table/theme-rtl.css 146 B
build/block-library/blocks/table/theme.css 146 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 403 B
build/block-library/blocks/template-part/editor.css 403 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/term-description/style-rtl.css 111 B
build/block-library/blocks/term-description/style.css 111 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 99 B
build/block-library/blocks/verse/style.css 99 B
build/block-library/blocks/video/editor-rtl.css 552 B
build/block-library/blocks/video/editor.css 555 B
build/block-library/blocks/video/style-rtl.css 185 B
build/block-library/blocks/video/style.css 185 B
build/block-library/blocks/video/theme-rtl.css 126 B
build/block-library/blocks/video/theme.css 126 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.1 kB
build/block-library/common.css 1.1 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 12.2 kB
build/block-library/editor.css 12.1 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/index.min.js 204 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 13.8 kB
build/block-library/style.css 13.8 kB
build/block-library/theme-rtl.css 688 B
build/block-library/theme.css 693 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 51.4 kB
build/commands/index.min.js 15.5 kB
build/commands/style-rtl.css 932 B
build/commands/style.css 929 B
build/components/style-rtl.css 11.7 kB
build/components/style.css 11.7 kB
build/compose/index.min.js 12.1 kB
build/core-commands/index.min.js 2.6 kB
build/core-data/index.min.js 16.8 kB
build/customize-widgets/index.min.js 12 kB
build/customize-widgets/style-rtl.css 1.48 kB
build/customize-widgets/style.css 1.48 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 8.84 kB
build/date/index.min.js 17.8 kB
build/deprecated/index.min.js 451 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.64 kB
build/edit-post/classic-rtl.css 544 B
build/edit-post/classic.css 545 B
build/edit-post/index.min.js 35.3 kB
build/edit-post/style-rtl.css 7.6 kB
build/edit-post/style.css 7.59 kB
build/edit-site/index.min.js 90.9 kB
build/edit-site/style-rtl.css 13.2 kB
build/edit-site/style.css 13.2 kB
build/edit-widgets/index.min.js 16.9 kB
build/edit-widgets/style-rtl.css 4.52 kB
build/edit-widgets/style.css 4.52 kB
build/editor/index.min.js 45.5 kB
build/editor/style-rtl.css 3.53 kB
build/editor/style.css 3.52 kB
build/element/index.min.js 4.82 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 7.71 kB
build/format-library/style-rtl.css 554 B
build/format-library/style.css 553 B
build/hooks/index.min.js 1.55 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.58 kB
build/interactivity/index.min.js 11.3 kB
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.72 kB
build/keycodes/index.min.js 1.87 kB
build/list-reusable-blocks/index.min.js 2.2 kB
build/list-reusable-blocks/style-rtl.css 836 B
build/list-reusable-blocks/style.css 836 B
build/media-utils/index.min.js 2.9 kB
build/notices/index.min.js 948 B
build/nux/index.min.js 1.99 kB
build/nux/style-rtl.css 735 B
build/nux/style.css 732 B
build/patterns/index.min.js 2.71 kB
build/patterns/style-rtl.css 240 B
build/patterns/style.css 240 B
build/plugins/index.min.js 1.79 kB
build/preferences-persistence/index.min.js 1.84 kB
build/preferences/index.min.js 1.24 kB
build/primitives/index.min.js 943 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 958 B
build/react-i18n/index.min.js 615 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.7 kB
build/reusable-blocks/index.min.js 2.7 kB
build/reusable-blocks/style-rtl.css 243 B
build/reusable-blocks/style.css 243 B
build/rich-text/index.min.js 11 kB
build/router/index.min.js 1.78 kB
build/server-side-render/index.min.js 1.94 kB
build/shortcode/index.min.js 1.39 kB
build/style-engine/index.min.js 1.97 kB
build/sync/index.min.js 53.8 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.73 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.8 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 958 B
build/warning/index.min.js 249 B
build/widgets/index.min.js 7.16 kB
build/widgets/style-rtl.css 1.15 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.02 kB

compressed-size-action

@github-actions
Copy link

github-actions bot commented Sep 9, 2023

Flaky tests detected in 6f8310e.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6130467057
📝 Reported issues:

@ciampo
Copy link
Contributor Author

ciampo commented Sep 9, 2023

For ease of reading:

Performance check results from #48440 , where the regression was introduced
>> post-editor

┌──────────────────────┬──────────────────────────────────────────┬───────────────┐
│       (index)        │ b6d288491c9a58a9e05110eb9377edef38898a2f │     trunk     │
├──────────────────────┼──────────────────────────────────────────┼───────────────┤
│    serverResponse    │               '294.45 ms'                │  '288.65 ms'  │
│      firstPaint      │                '624.8 ms'                │  '560.65 ms'  │
│   domContentLoaded   │               '1223.35 ms'               │ '1217.25 ms'  │
│        loaded        │               '1223.95 ms'               │  '1218.2 ms'  │
│ firstContentfulPaint │               '2184.6 ms'                │  '2114.5 ms'  │
│      firstBlock      │              '13889.55 ms'               │ '13513.15 ms' │
│         type         │                '76.65 ms'                │  '71.34 ms'   │
│       minType        │                '68.37 ms'                │  '65.57 ms'   │
│       maxType        │               '102.59 ms'                │  '100.26 ms'  │
│    typeContainer     │                '24.24 ms'                │  '23.55 ms'   │
│   minTypeContainer   │                '21.45 ms'                │   '19.1 ms'   │
│   maxTypeContainer   │                '28.92 ms'                │   '32.7 ms'   │
│        focus         │               '118.94 ms'                │   '97.7 ms'   │
│       minFocus       │               '104.49 ms'                │  '75.17 ms'   │
│       maxFocus       │               '185.33 ms'                │  '171.44 ms'  │
│     inserterOpen     │                '49.61 ms'                │  '36.72 ms'   │
│   minInserterOpen    │                '43.94 ms'                │   '34.2 ms'   │
│   maxInserterOpen    │                '65.71 ms'                │  '39.85 ms'   │
│    inserterSearch    │                '13.12 ms'                │   '8.81 ms'   │
│  minInserterSearch   │                '11.98 ms'                │   '8.21 ms'   │
│  maxInserterSearch   │                '15.74 ms'                │   '9.35 ms'   │
│    inserterHover     │                '53.88 ms'                │  '57.08 ms'   │
│   minInserterHover   │                '47.72 ms'                │  '45.03 ms'   │
│   maxInserterHover   │                '60.25 ms'                │  '164.78 ms'  │
│     listViewOpen     │               '295.92 ms'                │  '157.99 ms'  │
│   minListViewOpen    │               '277.58 ms'                │  '140.84 ms'  │
│   maxListViewOpen    │               '322.45 ms'                │  '210.58 ms'  │
└──────────────────────┴──────────────────────────────────────────┴───────────────┘

>> site-editor

┌──────────────────────┬──────────────────────────────────────────┬──────────────┐
│       (index)        │ b6d288491c9a58a9e05110eb9377edef38898a2f │    trunk     │
├──────────────────────┼──────────────────────────────────────────┼──────────────┤
│    serverResponse    │                 '133 ms'                 │  '144.7 ms'  │
│      firstPaint      │               '582.35 ms'                │  '611.1 ms'  │
│   domContentLoaded   │               '1193.75 ms'               │ '1197.8 ms'  │
│        loaded        │               '1194.7 ms'                │ '1198.45 ms' │
│ firstContentfulPaint │               '1410.4 ms'                │ '1400.25 ms' │
│      firstBlock      │               '11489.3 ms'               │ '11514.3 ms' │
│         type         │                '83.46 ms'                │  '81.34 ms'  │
│       minType        │                '77.25 ms'                │  '70.89 ms'  │
│       maxType        │               '113.39 ms'                │ '120.63 ms'  │
└──────────────────────┴──────────────────────────────────────────┴──────────────┘

Latest performance check results from this PR (numbers are back to pre- #48440 levels)
>> post-editor

┌──────────────────────┬──────────────────────────────────────────┬───────────────┐
│       (index)        │ 4d3812ac35908b6dcb047d472b0c6d347204033d │     trunk     │
├──────────────────────┼──────────────────────────────────────────┼───────────────┤
│    serverResponse    │               '368.95 ms'                │  '382.1 ms'   │
│      firstPaint      │                '688.6 ms'                │  '728.55 ms'  │
│   domContentLoaded   │               '1411.4 ms'                │ '1425.65 ms'  │
│        loaded        │               '1412.45 ms'               │ '1426.75 ms'  │
│ firstContentfulPaint │               '2648.8 ms'                │  '2739.5 ms'  │
│      firstBlock      │               '16504.6 ms'               │ '16737.35 ms' │
│         type         │                '74.06 ms'                │  '84.13 ms'   │
│       minType        │                '67.32 ms'                │  '73.45 ms'   │
│       maxType        │               '100.96 ms'                │  '110.4 ms'   │
│    typeContainer     │                '28.73 ms'                │  '28.18 ms'   │
│   minTypeContainer   │                '22.14 ms'                │  '22.77 ms'   │
│   maxTypeContainer   │                '38.6 ms'                 │  '39.54 ms'   │
│        focus         │               '101.73 ms'                │  '131.79 ms'  │
│       minFocus       │                '81.87 ms'                │  '116.68 ms'  │
│       maxFocus       │                 '166 ms'                 │  '216.57 ms'  │
│     inserterOpen     │                '45.57 ms'                │  '54.47 ms'   │
│   minInserterOpen    │                '39.72 ms'                │  '46.71 ms'   │
│   maxInserterOpen    │                '57.23 ms'                │  '61.13 ms'   │
│    inserterSearch    │                '10.12 ms'                │  '15.53 ms'   │
│  minInserterSearch   │                '8.89 ms'                 │  '12.12 ms'   │
│  maxInserterSearch   │                '11.39 ms'                │  '27.02 ms'   │
│    inserterHover     │                '44.52 ms'                │  '46.96 ms'   │
│   minInserterHover   │                '32.83 ms'                │  '39.25 ms'   │
│   maxInserterHover   │                '54.6 ms'                 │  '52.27 ms'   │
│     listViewOpen     │               '240.05 ms'                │  '369.43 ms'  │
│   minListViewOpen    │                '212.2 ms'                │  '341.33 ms'  │
│   maxListViewOpen    │               '287.37 ms'                │  '402.45 ms'  │
└──────────────────────┴──────────────────────────────────────────┴───────────────┘

>> site-editor

┌──────────────────────┬──────────────────────────────────────────┬──────────────┐
│       (index)        │ 4d3812ac35908b6dcb047d472b0c6d347204033d │    trunk     │
├──────────────────────┼──────────────────────────────────────────┼──────────────┤
│    serverResponse    │               '176.65 ms'                │ '177.95 ms'  │
│      firstPaint      │                '744.4 ms'                │ '675.05 ms'  │
│   domContentLoaded   │               '1406.3 ms'                │ '1428.1 ms'  │
│        loaded        │               '1406.85 ms'               │ '1428.7 ms'  │
│ firstContentfulPaint │               '1614.8 ms'                │ '1662.1 ms'  │
│      firstBlock      │               '4202.15 ms'               │ '3809.45 ms' │
│         type         │                '85.42 ms'                │  '87.85 ms'  │
│       minType        │                '78.98 ms'                │  '79.6 ms'   │
│       maxType        │               '102.26 ms'                │ '118.23 ms'  │
└──────────────────────┴──────────────────────────────────────────┴──────────────┘

@ciampo ciampo changed the title Tooltip: render dynamically Tooltip: render tooltip markup in the DOM only when open Sep 9, 2023
Copy link
Member

@diegohaz diegohaz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me! Thanks for working on this @ciampo

@ciampo ciampo merged commit bfe8550 into trunk Sep 11, 2023
52 checks passed
@ciampo ciampo deleted the feat/tooltip-dynamically-rendered branch September 11, 2023 07:16
@github-actions github-actions bot added this to the Gutenberg 16.7 milestone Sep 11, 2023
@youknowriad
Copy link
Contributor

Thanks for the fix here and the suggestion @diegohaz ❤️

brookewp added a commit that referenced this pull request Sep 12, 2023
* Button: Update test assertion to match test name

* Restore replaced assertion for button

* Update assertions after changes to tooltip in #54312
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components [Type] Performance Related to performance efforts
Projects
Status: Done 🎉
Development

Successfully merging this pull request may close these issues.

3 participants