chrome-devtools-frontend 1.0.1473514 → 1.0.1510180

package/front_end/ui/components/text_editor/TextEditor.ts

@@ -10,6 +10,7 @@ import * as CodeHighlighter from '../code_highlighter/code_highlighter.js';
 
 import {baseConfiguration, dummyDarkTheme, dynamicSetting, DynamicSetting, themeSelection} from './config.js';
 import {toLineColumn, toOffset} from './position.js';
+import textEditorStyles from './textEditor.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -41,6 +42,7 @@ export class TextEditor extends HTMLElement {
     super();
     this.#pendingState = pendingState;
     this.#shadow.createChild('style').textContent = CodeHighlighter.codeHighlighterStyles;
+    this.#shadow.createChild('style').textContent = textEditorStyles;
   }
 
   #createEditor(): CodeMirror.EditorView {

package/front_end/ui/components/text_editor/config.ts

@@ -4,6 +4,7 @@
 /* eslint-disable rulesdir/no-imperative-dom-api */
 
 import * as Common from '../../../core/common/common.js';
+import type * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as TextUtils from '../../../models/text_utils/text_utils.js';
 import * as WindowBoundsService from '../../../services/window_bounds/window_bounds.js';
@@ -20,14 +21,14 @@ const RECOMPUTE_INDENT_MAX_SIZE = 200;
 
 const UIStrings = {
   /**
-   *@description Label text for the editor
+   * @description Label text for the editor
    */
   codeEditor: 'Code editor',
   /**
-   *@description Aria alert to read the suggestion for the suggestion box when typing in text editor
-   *@example {name} PH1
-   *@example {2} PH2
-   *@example {5} PH3
+   * @description Aria alert to read the suggestion for the suggestion box when typing in text editor
+   * @example {name} PH1
+   * @example {2} PH2
+   * @example {5} PH3
    */
   sSuggestionSOfS: '{PH1}, suggestion {PH2} of {PH3}',
 } as const;
@@ -131,6 +132,7 @@ function moveCompletionSelectionIfNotConservative(
     if (CM.completionStatus(view.state) !== 'active') {
       return false;
     }
+    view.dispatch({effects: setAiAutoCompleteSuggestion.of(null)});
     if (view.state.field(conservativeCompletion, false)) {
       view.dispatch({effects: disableConservativeCompletion.of(null)});
       announceSelectedCompletionInfo(view);
@@ -147,6 +149,7 @@ function moveCompletionSelectionBackwardWrapper(): ((view: CM.EditorView) => boo
     if (CM.completionStatus(view.state) !== 'active') {
       return false;
     }
+    view.dispatch({effects: setAiAutoCompleteSuggestion.of(null)});
     CM.moveCompletionSelection(false)(view);
     announceSelectedCompletionInfo(view);
     return true;
@@ -160,7 +163,7 @@ function announceSelectedCompletionInfo(view: CM.EditorView): void {
     PH3: CM.currentCompletions(view.state).length,
   });
 
-  UI.ARIAUtils.alert(ariaMessage);
+  UI.ARIAUtils.LiveAnnouncer.alert(ariaMessage);
 }
 
 export const autocompletion = new DynamicSetting<boolean>(
@@ -199,12 +202,8 @@ export const codeFolding = DynamicSetting.bool('text-editor-code-folding', [
       const icon = new Icon.Icon.Icon();
       icon.setAttribute('class', open ? 'cm-foldGutterElement' : 'cm-foldGutterElement cm-foldGutterElement-folded');
       icon.setAttribute('jslog', `${VisualLogging.expand().track({click: true})}`);
-      icon.data = {
-        iconName,
-        color: 'var(--icon-fold-marker)',
-        width: '14px',
-        height: '14px',
-      };
+      icon.name = iconName;
+      icon.classList.add('small');
       return icon;
     },
   }),
@@ -481,3 +480,112 @@ export function contentIncludingHint(view: CM.EditorView): string {
   }
   return content;
 }
+
+export const setAiAutoCompleteSuggestion = CM.StateEffect.define<ActiveSuggestion|null>();
+
+interface ActiveSuggestion {
+  text: string;
+  from: number;
+  sampleId?: number;
+  rpcGlobalId?: Host.AidaClient.RpcGlobalId;
+}
+
+export const aiAutoCompleteSuggestionState = CM.StateField.define<ActiveSuggestion|null>({
+  create: () => null,
+  update(value, tr) {
+    for (const effect of tr.effects) {
+      if (effect.is(setAiAutoCompleteSuggestion)) {
+        if (effect.value) {
+          return effect.value;
+        }
+        return null;
+      }
+    }
+
+    if (!value) {
+      return value;
+    }
+
+    // A suggestion from an effect can be stale if the document was changed
+    // between when the request was sent and the response was received.
+    // We check if the position is still valid before trying to map it.
+    if (value.from > tr.startState.doc.length) {
+      return null;
+    }
+
+    // If deletion occurs, set to null. Otherwise, the mapping might fail if
+    // the position is inside the deleted range.
+    if (tr.docChanged && tr.state.doc.length < tr.startState.doc.length) {
+      return null;
+    }
+
+    const from = tr.changes.mapPos(value.from);
+    const {head} = tr.state.selection.main;
+
+    // If a change happened before the position from which suggestion was generated, set to null.
+    if (tr.changes.touchesRange(0, from - 1) || head < from) {
+      return null;
+    }
+
+    // Check if what's typed is a prefix of the suggestion.
+    const typedText = tr.state.doc.sliceString(from, head);
+    return value.text.startsWith(typedText) ? value : null;
+  },
+});
+
+export function hasActiveAiSuggestion(state: CM.EditorState): boolean {
+  return state.field(aiAutoCompleteSuggestionState) !== null;
+}
+
+export function acceptAiAutoCompleteSuggestion(view: CM.EditorView):
+    {accepted: boolean, suggestion?: ActiveSuggestion} {
+  const suggestion = view.state.field(aiAutoCompleteSuggestionState);
+  if (!suggestion) {
+    return {accepted: false};
+  }
+
+  const {text, from} = suggestion;
+  const {head} = view.state.selection.main;
+  const typedText = view.state.doc.sliceString(from, head);
+  if (!text.startsWith(typedText)) {
+    return {accepted: false};
+  }
+
+  const remainingText = text.slice(typedText.length);
+  view.dispatch({
+    changes: {from: head, insert: remainingText},
+    selection: {anchor: head + remainingText.length},
+    effects: setAiAutoCompleteSuggestion.of(null),
+    userEvent: 'input.complete',
+  });
+  return {accepted: true, suggestion};
+}
+
+export const aiAutoCompleteSuggestion: CM.Extension = [
+  aiAutoCompleteSuggestionState,
+  CM.ViewPlugin.fromClass(
+      class {
+        decorations: CM.DecorationSet = CM.Decoration.none;
+
+        update(update: CM.ViewUpdate): void {
+          const activeSuggestion = update.state.field(aiAutoCompleteSuggestionState);
+          const {head, empty} = update.state.selection.main;
+          let hint = '';
+          if (activeSuggestion && empty && head >= activeSuggestion.from) {
+            const {text, from} = activeSuggestion;
+            const typedText = update.state.doc.sliceString(from, head);
+            if (text.startsWith(typedText)) {
+              hint = text.slice(typedText.length);
+            }
+          }
+
+          if (!hint) {
+            this.decorations = CM.Decoration.none;
+          } else {
+            this.decorations =
+                CM.Decoration.set([CM.Decoration.widget({widget: new CompletionHint(hint), side: 1}).range(head)]);
+          }
+        }
+      },
+      {decorations: p => p.decorations}),
+];

package/front_end/ui/{legacy/components/inline_editor/bezierSwatch.css → components/text_editor/textEditor.css}

@@ -1,14 +1,10 @@
 /*
- * Copyright 2016 The Chromium Authors. All rights reserved.
+ * Copyright 2025 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
-:host {
-  white-space: nowrap;
-}
-
-devtools-icon {
+devtools-icon.bezier-swatch-icon {
   position: relative;
   transform: scale(0.7);
   margin: -5px -2px -3px -4px;

package/front_end/ui/components/text_editor/text_editor.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+export * as AiCodeCompletionTeaserPlaceholder from './AiCodeCompletionTeaserPlaceholder.js';
 export * as AutocompleteHistory from './AutocompleteHistory.js';
 export * as Config from './config.js';
 export * as ExecutionPositionHighlighter from './ExecutionPositionHighlighter.js';

package/front_end/ui/components/tooltips/Tooltip.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable rulesdir/no-lit-render-outside-of-view */
 
+import * as UI from '../../legacy/legacy.js';
 import * as Lit from '../../lit/lit.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';
 
@@ -10,28 +11,166 @@ import tooltipStyles from './tooltip.css.js';
 
 const {html} = Lit;
 
+interface ProposedRect {
+  left: number;
+  top: number;
+}
+
+interface PositioningParams {
+  anchorRect: DOMRect;
+  currentPopoverRect: DOMRect;
+}
+
+const positioningUtils = {
+  bottomSpanRight: ({anchorRect}: PositioningParams): ProposedRect => {
+    return {
+      left: anchorRect.left,
+      top: anchorRect.bottom,
+    };
+  },
+  bottomSpanLeft: ({anchorRect, currentPopoverRect}: PositioningParams): ProposedRect => {
+    return {
+      left: anchorRect.right - currentPopoverRect.width,
+      top: anchorRect.bottom,
+    };
+  },
+  bottomCentered: ({anchorRect, currentPopoverRect}: PositioningParams): ProposedRect => {
+    return {
+      left: anchorRect.left + anchorRect.width / 2 - currentPopoverRect.width / 2,
+      top: anchorRect.bottom,
+    };
+  },
+  topCentered: ({anchorRect, currentPopoverRect}: PositioningParams): ProposedRect => {
+    return {
+      left: anchorRect.left + anchorRect.width / 2 - currentPopoverRect.width / 2,
+      top: anchorRect.top - currentPopoverRect.height,
+    };
+  },
+  topSpanRight: ({anchorRect, currentPopoverRect}: PositioningParams): ProposedRect => {
+    return {
+      left: anchorRect.left,
+      top: anchorRect.top - currentPopoverRect.height,
+    };
+  },
+  topSpanLeft: ({anchorRect, currentPopoverRect}: PositioningParams): ProposedRect => {
+    return {
+      left: anchorRect.right - currentPopoverRect.width,
+      top: anchorRect.top - currentPopoverRect.height,
+    };
+  },
+  // Adjusts proposed rect so that the resulting popover is always inside the inspector view bounds.
+  insetAdjustedRect:
+      ({inspectorViewRect, anchorRect, currentPopoverRect, proposedRect}:
+           {inspectorViewRect: DOMRect, anchorRect: DOMRect, currentPopoverRect: DOMRect, proposedRect: ProposedRect}):
+          ProposedRect => {
+            if (inspectorViewRect.left > proposedRect.left) {
+              proposedRect.left = inspectorViewRect.left;
+            }
+
+            if (inspectorViewRect.right < proposedRect.left + currentPopoverRect.width) {
+              proposedRect.left = inspectorViewRect.right - currentPopoverRect.width;
+            }
+
+            if (proposedRect.top + currentPopoverRect.height > inspectorViewRect.bottom) {
+              proposedRect.top = anchorRect.top - currentPopoverRect.height;
+            }
+            return proposedRect;
+          },
+  isInBounds: ({inspectorViewRect, currentPopoverRect, proposedRect}:
+                   {inspectorViewRect: DOMRect, currentPopoverRect: DOMRect, proposedRect: ProposedRect}): boolean => {
+    return inspectorViewRect.left < proposedRect.left &&
+        proposedRect.left + currentPopoverRect.width < inspectorViewRect.right &&
+        inspectorViewRect.top < proposedRect.top &&
+        proposedRect.top + currentPopoverRect.height < inspectorViewRect.bottom;
+  },
+  isSameRect: (rect1: DOMRect|null, rect2: DOMRect|null): boolean => {
+    if (!rect1 || !rect2) {
+      return false;
+    }
+
+    return rect1 && rect1.left === rect2.left && rect1.top === rect2.top && rect1.width === rect2.width &&
+        rect1.height === rect2.height;
+  }
+};
+
+const proposedRectForRichTooltip =
+    ({inspectorViewRect, anchorRect, currentPopoverRect}:
+         {inspectorViewRect: DOMRect, anchorRect: DOMRect, currentPopoverRect: DOMRect}): ProposedRect => {
+      // Tries the default positioning of bottom right, bottom left, top right and top left.
+      // If they don't work out, we default back to showing in bottom right and adjust its insets so that the popover is inside the inspector view bounds.
+      let proposedRect = positioningUtils.bottomSpanRight({anchorRect, currentPopoverRect});
+      if (positioningUtils.isInBounds({inspectorViewRect, currentPopoverRect, proposedRect})) {
+        return proposedRect;
+      }
+
+      proposedRect = positioningUtils.bottomSpanLeft({anchorRect, currentPopoverRect});
+      if (positioningUtils.isInBounds({inspectorViewRect, currentPopoverRect, proposedRect})) {
+        return proposedRect;
+      }
+
+      proposedRect = positioningUtils.topSpanRight({anchorRect, currentPopoverRect});
+      if (positioningUtils.isInBounds({inspectorViewRect, currentPopoverRect, proposedRect})) {
+        return proposedRect;
+      }
+
+      proposedRect = positioningUtils.topSpanLeft({anchorRect, currentPopoverRect});
+      if (positioningUtils.isInBounds({inspectorViewRect, currentPopoverRect, proposedRect})) {
+        return proposedRect;
+      }
+
+      // If none of the options work above, we position to bottom right
+      // and adjust the insets so that it does not go out of bounds.
+      proposedRect = positioningUtils.bottomSpanRight({anchorRect, currentPopoverRect});
+      return positioningUtils.insetAdjustedRect({anchorRect, currentPopoverRect, inspectorViewRect, proposedRect});
+    };
+
+const proposedRectForSimpleTooltip =
+    ({inspectorViewRect, anchorRect, currentPopoverRect}:
+         {inspectorViewRect: DOMRect, anchorRect: DOMRect, currentPopoverRect: DOMRect}): ProposedRect => {
+      // Default options are bottom centered & top centered.
+      let proposedRect = positioningUtils.bottomCentered({anchorRect, currentPopoverRect});
+      if (positioningUtils.isInBounds({inspectorViewRect, currentPopoverRect, proposedRect})) {
+        return proposedRect;
+      }
+
+      proposedRect = positioningUtils.topCentered({anchorRect, currentPopoverRect});
+      if (positioningUtils.isInBounds({inspectorViewRect, currentPopoverRect, proposedRect})) {
+        return proposedRect;
+      }
+
+      // The default options did not work out, so position it to bottom center
+      // and adjust the insets to make sure that it does not go out of bounds.
+      proposedRect = positioningUtils.bottomCentered({anchorRect, currentPopoverRect});
+      return positioningUtils.insetAdjustedRect({anchorRect, currentPopoverRect, inspectorViewRect, proposedRect});
+    };
+
 export type TooltipVariant = 'simple'|'rich';
+export type PaddingMode = 'small'|'large';
 
 export interface TooltipProperties {
   id: string;
   variant?: TooltipVariant;
+  padding?: PaddingMode;
   anchor?: HTMLElement;
   jslogContext?: string;
 }
 
 /**
- * @attr id - Id of the tooltip. Used for searching an anchor element with aria-describedby.
- * @attr hover-delay - Hover length in ms before the tooltip is shown and hidden.
- * @attr variant - Variant of the tooltip, `"simple"` for strings only, inverted background, `"rich"` for interactive
- *                 content, background according to theme's surface.
- * @attr use-click - If present, the tooltip will be shown on click instead of on hover.
- * @attr use-hotkey - If present, the tooltip will be shown on hover but not when receiving focus. Requires a hotkey to
- *                    open when fosed (Alt-down). When `"use-click"` is present as well, use-click takes precedence.
- * @prop {String} id - reflects the `"id"` attribute.
- * @prop {Number} hoverDelay - reflects the `"hover-delay"` attribute.
- * @prop {String} variant - reflects the `"variant"` attribute.
- * @prop {Boolean} useClick - reflects the `"click"` attribute.
- * @prop {Boolean} useHotkey - reflects the `"use-hotkey"` attribute.
+ * @property useHotkey - reflects the `"use-hotkey"` attribute.
+ * @property id - reflects the `"id"` attribute.
+ * @property hoverDelay - reflects the `"hover-delay"` attribute.
+ * @property variant - reflects the `"variant"` attribute.
+ * @property padding - reflects the `"padding"` attribute.
+ * @property useClick - reflects the `"click"` attribute.
+ * @attribute id - Id of the tooltip. Used for searching an anchor element with aria-describedby.
+ * @attribute hover-delay - Hover length in ms before the tooltip is shown and hidden.
+ * @attribute variant - Variant of the tooltip, `"simple"` for strings only, inverted background,
+ *                 `"rich"` for interactive content, background according to theme's surface.
+ * @attribute padding - Which padding to use, defaults to `"small"`. Use `"large"` for richer content.
+ * @attribute use-click - If present, the tooltip will be shown on click instead of on hover.
+ * @attribute use-hotkey - If present, the tooltip will be shown on hover but not when receiving focus.
+ *                    Requires a hotkey to open when fosed (Alt-down). When `"use-click"` is present
+ *                    as well, use-click takes precedence.
  */
 export class Tooltip extends HTMLElement {
   static readonly observedAttributes = ['id', 'variant', 'jslogcontext'];
@@ -43,6 +182,8 @@ export class Tooltip extends HTMLElement {
   #closing = false;
   #anchorObserver: MutationObserver|null = null;
   #openedViaHotkey = false;
+  #previousAnchorRect: DOMRect|null = null;
+  #previousPopoverRect: DOMRect|null = null;
 
   get openedViaHotkey(): boolean {
     return this.#openedViaHotkey;
@@ -75,7 +216,7 @@ export class Tooltip extends HTMLElement {
   }
 
   get hoverDelay(): number {
-    return this.hasAttribute('hover-delay') ? Number(this.getAttribute('hover-delay')) : 200;
+    return this.hasAttribute('hover-delay') ? Number(this.getAttribute('hover-delay')) : 300;
   }
   set hoverDelay(delay: number) {
     this.setAttribute('hover-delay', delay.toString());
@@ -88,6 +229,13 @@ export class Tooltip extends HTMLElement {
     this.setAttribute('variant', variant);
   }
 
+  get padding(): PaddingMode {
+    return this.getAttribute('padding') === 'large' ? 'large' : 'small';
+  }
+  set padding(padding: PaddingMode) {
+    this.setAttribute('padding', padding);
+  }
+
   get jslogContext(): string|null {
     return this.getAttribute('jslogcontext');
   }
@@ -102,21 +250,25 @@ export class Tooltip extends HTMLElement {
 
   constructor(properties?: TooltipProperties) {
     super();
-    if (properties) {
-      this.id = properties.id;
+    const {id, variant, padding, jslogContext, anchor} = properties ?? {};
+    if (id) {
+      this.id = id;
+    }
+    if (variant) {
+      this.variant = variant;
     }
-    if (properties?.variant) {
-      this.variant = properties.variant;
+    if (padding) {
+      this.padding = padding;
     }
-    if (properties?.jslogContext) {
-      this.jslogContext = properties.jslogContext;
+    if (jslogContext) {
+      this.jslogContext = jslogContext;
     }
-    if (properties?.anchor) {
-      const ref = properties.anchor.getAttribute('aria-details') ?? properties.anchor.getAttribute('aria-describedby');
-      if (ref !== properties.id) {
+    if (anchor) {
+      const ref = anchor.getAttribute('aria-details') ?? anchor.getAttribute('aria-describedby');
+      if (ref !== id) {
         throw new Error('aria-details or aria-describedby must be set on the anchor');
       }
-      this.#anchor = properties.anchor;
+      this.#anchor = anchor;
     }
   }
 
@@ -145,7 +297,7 @@ export class Tooltip extends HTMLElement {
     Lit.render(html`
       <style>${tooltipStyles}</style>
       <!-- Wrapping it into a container, so that the tooltip doesn't disappear when the mouse moves from the anchor to the tooltip. -->
-      <div class="container">
+      <div class="container ${this.padding === 'large' ? 'large-padding' : ''}">
         <slot></slot>
       </div>
     `, this.#shadow, {host: this});
@@ -211,6 +363,35 @@ export class Tooltip extends HTMLElement {
     }
   };
 
+  #positionPopover = (): void => {
+    if (!this.#anchor || !this.open) {
+      this.#previousAnchorRect = null;
+      this.#previousPopoverRect = null;
+      this.style.visibility = 'hidden';
+      return;
+    }
+
+    // If there is no change from the previous anchor rect, we don't need to recompute the position.
+    const anchorRect = this.#anchor.getBoundingClientRect();
+    const currentPopoverRect = this.getBoundingClientRect();
+    if (positioningUtils.isSameRect(this.#previousAnchorRect, anchorRect) &&
+        positioningUtils.isSameRect(this.#previousPopoverRect, currentPopoverRect)) {
+      requestAnimationFrame(this.#positionPopover);
+      return;
+    }
+    this.#previousAnchorRect = anchorRect;
+    this.#previousPopoverRect = currentPopoverRect;
+
+    const inspectorViewRect = UI.InspectorView.InspectorView.instance().element.getBoundingClientRect();
+    const proposedPopoverRect = this.variant === 'rich' ?
+        proposedRectForRichTooltip({inspectorViewRect, anchorRect, currentPopoverRect}) :
+        proposedRectForSimpleTooltip({inspectorViewRect, anchorRect, currentPopoverRect});
+    this.style.left = `${proposedPopoverRect.left}px`;
+    this.style.top = `${proposedPopoverRect.top}px`;
+    this.style.visibility = 'visible';
+    requestAnimationFrame(this.#positionPopover);
+  };
+
   #updateJslog(): void {
     if (this.jslogContext && this.#anchor) {
       VisualLogging.setMappedParent(this, this.#anchor);
@@ -267,6 +448,7 @@ export class Tooltip extends HTMLElement {
         this.#anchor.addEventListener('blur', this.hideTooltip);
         this.#anchor.addEventListener('mouseleave', this.hideTooltip);
         this.addEventListener('mouseleave', this.hideTooltip);
+        this.addEventListener('focusout', this.hideTooltip);
       }
     }
     // Prevent interaction with the parent element.
@@ -274,6 +456,7 @@ export class Tooltip extends HTMLElement {
     this.addEventListener('mouseup', this.#stopPropagation);
     this.addEventListener('beforetoggle', this.#setClosing);
     this.addEventListener('toggle', this.#resetClosing);
+    this.addEventListener('toggle', this.#positionPopover);
   }
 
   #removeEventListeners(): void {
@@ -293,6 +476,7 @@ export class Tooltip extends HTMLElement {
     this.removeEventListener('mouseup', this.#stopPropagation);
     this.removeEventListener('beforetoggle', this.#setClosing);
     this.removeEventListener('toggle', this.#resetClosing);
+    this.removeEventListener('toggle', this.#positionPopover);
   }
 
   #attachToAnchor(): void {
@@ -321,11 +505,7 @@ export class Tooltip extends HTMLElement {
       }
     }
 
-    const anchorName = `--devtools-tooltip-${this.id}-anchor`;
-    this.#anchor.style.anchorName = anchorName;
-    this.style.positionAnchor = anchorName;
     this.#observeAnchorRemoval(this.#anchor);
-
     this.#updateJslog();
   }
 
@@ -357,9 +537,4 @@ declare global {
   interface HTMLElementTagNameMap {
     'devtools-tooltip': Tooltip;
   }
-  // Remove this once the CSSStyleDeclaration interface is updated in the TypeScript standard library.
-  interface CSSStyleDeclaration {
-    anchorName: string;
-    positionAnchor: string;
-  }
 }

package/front_end/ui/components/tooltips/tooltip.css

@@ -6,20 +6,24 @@
 
 :host {
   --tooltip-viewport-distance: var(--sys-size-5);
+
   /* Reset the browser's default styles for [popover] elements. */
   margin: 0;
   background: none;
   border: none;
   padding: 0;
   overflow: visible;
-  position-area: bottom;
-  position-visibility: anchors-visible;
-  /* stylelint-disable-next-line declaration-property-value-no-unknown */
-  justify-self: anchor-center;
-  position-try-fallbacks: flip-block;
+  position: absolute;
+  max-width: var(--devtools-window-width);
+  max-height: var(--devtools-window-height);
+  visibility: hidden;
 
   & .container {
     width: max-content;
+    max-width: calc(var(--devtools-window-width) - 2 * (
+      /* host margin */ var(--tooltip-viewport-distance) +
+      /* container horizontal padding */ var(--sys-size-8) +
+      /* container margin */ var(--sys-size-3)));
     margin: var(--sys-size-2);
     font: var(--sys-typescale-body4-regular);
     color: var(--sys-color-inverse-on-surface);
@@ -34,85 +38,17 @@
   justify-self: unset;
   margin: 0 var(--tooltip-viewport-distance) var(--tooltip-viewport-distance) 0;
   position: absolute;
-  position-area: bottom span-right;
-  position-try-fallbacks: --bottom-left, --bottom-center, --top-right, --top-left, --top-center;
-  left: unset;
-  right: var(--devtools-window-right);
-  top: unset;
-  bottom: var(--devtools-window-bottom);
-  max-width: var(--devtools-window-width);
-  max-height: var(--devtools-window-height);
 
   & .container {
-    max-width: calc(var(--devtools-window-width) - 2 * (
-                                 /* host margin */ var(--tooltip-viewport-distance) +
-                                 /* container horizontal padding */ var(--sys-size-8) +
-                                 /* container margin */ var(--sys-size-3)));
     margin-inline: 0;
     margin-block: var(--sys-size-3);
     color: var(--sys-color-on-surface);
     background-color: var(--sys-color-base-container-elevated);
     border-radius: var(--sys-shape-corner-small);
-    padding: var(--sys-size-6) var(--sys-size-8);
     overflow: auto;
-  }
-}
 
-@position-try --bottom-left {
-  /* stylelint-disable-next-line at-rule-descriptor-no-unknown */
-  position-area: bottom span-left;
-  margin: 0 0 var(--tooltip-viewport-distance) var(--tooltip-viewport-distance);
-  left: var(--devtools-window-left);
-  /* stylelint-disable-next-line at-rule-descriptor-value-no-unknown */
-  right: unset;
-  /* stylelint-disable-next-line at-rule-descriptor-value-no-unknown */
-  top: unset;
-  bottom: var(--devtools-window-bottom);
-}
-
-@position-try --top-right {
-  /* stylelint-disable-next-line at-rule-descriptor-no-unknown */
-  position-area: top span-right;
-  margin: var(--tooltip-viewport-distance) var(--tooltip-viewport-distance) 0 0;
-  top: var(--devtools-window-top);
-  /* stylelint-disable-next-line at-rule-descriptor-value-no-unknown */
-  bottom: unset;
-}
-
-@position-try --top-left {
-  /* stylelint-disable-next-line at-rule-descriptor-no-unknown */
-  position-area: top span-left;
-  margin: var(--tooltip-viewport-distance) 0 0 var(--tooltip-viewport-distance);
-  left: var(--devtools-window-left);
-  /* stylelint-disable-next-line at-rule-descriptor-value-no-unknown */
-  right: unset;
-  top: var(--devtools-window-top);
-  /* stylelint-disable-next-line at-rule-descriptor-value-no-unknown */
-  bottom: unset;
-}
-
-@position-try --bottom-center {
-  justify-self: right;
-  /* stylelint-disable-next-line at-rule-descriptor-no-unknown */
-  position-area: bottom;
-  margin: 0 var(--tooltip-viewport-distance) var(--tooltip-viewport-distance)
-    var(--tooltip-viewport-distance);
-  left: if(style(--devtools-window-left: 0): unset; else: var(--devtools-window-left));
-  right: if(style(--devtools-window-right: 0): unset; else: var(--devtools-window-right));
-  /* stylelint-disable-next-line at-rule-descriptor-value-no-unknown */
-  top: unset;
-  bottom: var(--devtools-window-bottom);
-}
-
-@position-try --top-center {
-  justify-self: right;
-  /* stylelint-disable-next-line at-rule-descriptor-no-unknown */
-  position-area: top;
-  margin: var(--tooltip-viewport-distance) var(--tooltip-viewport-distance) 0
-    var(--tooltip-viewport-distance);
-  left: if(style(--devtools-window-left: 0): unset; else: var(--devtools-window-left));
-  right: if(style(--devtools-window-right: 0): unset; else: var(--devtools-window-right));
-  top: var(--devtools-window-top);
-  /* stylelint-disable-next-line at-rule-descriptor-value-no-unknown */
-  bottom: unset;
+    &.large-padding {
+      padding: var(--sys-size-6) var(--sys-size-8);
+    }
+  }
 }