Improve animation for details element

The change makes use of the fact that animating to `height: auto` is
possible now. And by using the `details-content` pseudo-element the
collapsing is animated as well and not only the expansion.

Screencast: https://imgur.com/a/F9zfvxz

References:
https://developer.chrome.com/docs/css-ui/animate-to-height-auto
https://developer.chrome.com/blog/styling-details

Bug: none
Change-Id: Ibf01944e5ffffcd39a99e819693a49d9fe8ee20d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6110473
Commit-Queue: Wolfgang Beyer <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>

Author: wolfib

front_end/panels/explain/components/ConsoleInsight.ts

@@ -587,7 +587,7 @@ export class ConsoleInsight extends HTMLElement {
               .data=${{tokens: this.#state.tokens, renderer: this.#renderer, animationEnabled: true} as MarkdownView.MarkdownView.MarkdownViewData}>
             </devtools-markdown-view>`: this.#state.explanation
           }
-          <details style="--list-height: ${(this.#state.sources.length + (this.#state.isPageReloadRecommended ? 1 : 0)) * 20}px;" jslog=${VisualLogging.expand('sources').track({click: true})}>
+          <details jslog=${VisualLogging.expand('sources').track({click: true})}>
             <summary>${i18nString(UIStrings.inputData)}</summary>
             <devtools-console-insight-sources-list .sources=${this.#state.sources} .isPageReloadRecommended=${this.#state.isPageReloadRecommended}>
             </devtools-console-insight-sources-list>

front_end/panels/explain/components/consoleInsight.css

@@ -276,16 +276,21 @@ summary {
 }
 
 details {
-  --collapsed-height: 20px;
-
   overflow: hidden;
-  height: var(--collapsed-height);
   margin-top: 10px;
 }
 
-details[open] {
-  height: calc(var(--list-height) + var(--collapsed-height) + /* margin */ 8px);
-  transition: height var(--sys-motion-duration-short4) var(--sys-motion-easing-emphasized);
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+::details-content {
+  height: 0;
+  transition:
+    height var(--sys-motion-duration-short4) var(--sys-motion-easing-emphasized),
+    content-visibility var(--sys-motion-duration-short4) var(--sys-motion-easing-emphasized) allow-discrete;
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+[open]::details-content {
+  height: auto;
 }
 
 h2 {