chrome-devtools-frontend 1.0.1592129 → 1.0.1593518

package/front_end/panels/elements/ElementsPanel.ts

@@ -385,6 +385,9 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     const matchedCascade = await this.#computedStyleModel.fetchMatchedCascade();
     this.#computedStyleWidget.nodeStyle = computedStyle;
     this.#computedStyleWidget.matchedStyles = matchedCascade;
+    if (matchedCascade) {
+      this.#computedStyleWidget.propertyTraces = this.#computedStyleModel.computePropertyTraces(matchedCascade);
+    }
   }
 
   private handleElementExpanded(): void {
@@ -1224,6 +1227,10 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.splitWidget.setSidebarWidget(this.sidebarPaneView.tabbedPane());
   }
 
+  revealComputedStylesPane(): void {
+    this.sidebarPaneView?.tabbedPane().selectTab(SidebarPaneTabId.COMPUTED);
+  }
+
   private updateSidebarPosition(): void {
     if (this.sidebarPaneView?.tabbedPane().shouldHideOnDetach()) {
       return;
@@ -1471,11 +1478,23 @@ export class ContextMenuProvider implements
   }
 }
 
-export class DOMNodeRevealer implements Common.Revealer.Revealer<
-    SDK.DOMModel.DOMNode|SDK.DOMModel.DeferredDOMNode|SDK.RemoteObject.RemoteObject|SDK.DOMModel.AdoptedStyleSheet> {
+/**
+ * Wraps around the Node so we can pass it into the DOMNodeRevealer but
+ * distinguish that we want to reveal the computed styles panel.
+ */
+export class NodeComputedStyles {
+  readonly node: SDK.DOMModel.DOMNode;
+  constructor(node: SDK.DOMModel.DOMNode) {
+    this.node = node;
+  }
+}
+
+export class DOMNodeRevealer implements
+    Common.Revealer.Revealer<SDK.DOMModel.DOMNode|SDK.DOMModel.DeferredDOMNode|SDK.RemoteObject.RemoteObject|
+                             SDK.DOMModel.AdoptedStyleSheet|NodeComputedStyles> {
   reveal(
       node: SDK.DOMModel.DOMNode|SDK.DOMModel.DeferredDOMNode|SDK.RemoteObject.RemoteObject|
-      SDK.DOMModel.AdoptedStyleSheet,
+      SDK.DOMModel.AdoptedStyleSheet|NodeComputedStyles,
       omitFocus?: boolean): Promise<void> {
     const panel = ElementsPanel.instance();
     panel.pendingNodeReveal = true;
@@ -1501,6 +1520,10 @@ export class DOMNodeRevealer implements Common.Revealer.Revealer<
         onNodeResolved((node));
       } else if (node instanceof SDK.DOMModel.DeferredDOMNode) {
         (node).resolve(checkDeferredDOMNodeThenReveal);
+      } else if (node instanceof NodeComputedStyles) {
+        const elements = ElementsPanel.instance();
+        elements.revealComputedStylesPane();
+        onNodeResolved(node.node);
       } else {
         const domModel = node.runtimeModel().target().model(SDK.DOMModel.DOMModel);
         if (domModel) {

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -1120,6 +1120,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.listItemElement.setAttribute(
         'jslog', `${VisualLogging.treeItem().parent('elementsTreeOutline').track({
           keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Backspace|Delete|Enter|Space|Home|End',
+          resize: true,
           drag: true,
           click: true,
         })}`);

package/front_end/panels/elements/LayoutPane.ts

@@ -228,26 +228,27 @@ const DEFAULT_VIEW: View = (input, output, target) => {
       event.preventDefault();
     }
   };
+  // clang-format off
   const renderElement = (element: LayoutElement): Lit.LitTemplate => html`<div
           class="element"
-          jslog=${VisualLogging.item()}>
+          jslog=${VisualLogging.item().track({resize: true})}>
         <devtools-checkbox
           data-element="true"
           class="checkbox-label"
           .checked=${element.enabled}
           @change=${(e: Event) => input.onElementToggle(element, e)}
-          jslog=${VisualLogging.toggle().track({
-    click: true
-  })}>
+          jslog=${VisualLogging.toggle().track({click: true, resize: true })}>
           <span
               class="node-text-container"
               data-label="true"
               @mouseenter=${(e: MouseEvent) => input.onMouseEnter(element, e)}
               @mouseleave=${(e: MouseEvent) => input.onMouseLeave(element, e)}>
             <devtools-node-text .data=${{
-    nodeId: element.domId, nodeTitle: element.name, nodeClasses: element.domClasses,
-  }
-  }></devtools-node-text>
+                nodeId: element.domId,
+                nodeTitle: element.name,
+                nodeClasses: element.domClasses
+              }}>
+            </devtools-node-text>
           </span>
         </devtools-checkbox>
         <label

package/front_end/panels/elements/StandaloneStylesContainer.ts

@@ -0,0 +1,254 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Common from '../../core/common/common.js';
+import type * as SDK from '../../core/sdk/sdk.js';
+import * as ComputedStyle from '../../models/computed_style/computed_style.js';
+import type * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
+import * as Components from '../../ui/legacy/components/utils/utils.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import {html, render} from '../../ui/lit/lit.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+
+import * as ElementsComponents from './components/components.js';
+import {StylePropertiesSection} from './StylePropertiesSection.js';
+import type {StylePropertyTreeElement} from './StylePropertyTreeElement.js';
+import type {StylesContainer} from './StylesContainer.js';
+import stylesSidebarPaneStyles from './stylesSidebarPane.css.js';
+import {WebCustomData} from './WebCustomData.js';
+
+interface ViewInput {
+  sections: StylePropertiesSection[];
+}
+
+type View = (input: ViewInput, output_: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  render(
+      html`
+    <style>${stylesSidebarPaneStyles}</style>
+    <div class="style-panes-wrapper" jslog=${VisualLogging.section('standalone-styles').track({
+        resize: true
+      })}>
+      <div class="styles-pane">
+        ${input.sections.map(section => section.element)}
+      </div>
+    </div>
+  `,
+      target);
+};
+
+export class StandaloneStylesContainer extends UI.Widget.VBox implements StylesContainer {
+  activeCSSAngle: InlineEditor.CSSAngle.CSSAngle|null = null;
+  isEditingStyle = false;
+  readonly sectionByElement = new WeakMap<Node, StylePropertiesSection>();
+  // TODO: Reference the MAX_LINK_LENGTH from StylesSidebarPane at a later stage, when we have a reference to it.
+  readonly linkifier: Components.Linkifier.Linkifier =
+      new Components.Linkifier.Linkifier(23, /* useLinkDecorator */ true);
+
+  #webCustomData: WebCustomData|undefined;
+  #userOperation = false;
+  #sections: StylePropertiesSection[] = [];
+  #swatchPopoverHelper = new InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper();
+  #computedStyleModelInternal = new ComputedStyle.ComputedStyleModel.ComputedStyleModel();
+  #view: View;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
+
+  get userOperation(): boolean {
+    return this.#userOperation;
+  }
+
+  get webCustomData(): WebCustomData|undefined {
+    if (!this.#webCustomData &&
+        Common.Settings.Settings.instance().moduleSetting('show-css-property-documentation-on-hover').get()) {
+      this.#webCustomData = WebCustomData.create();
+    }
+    return this.#webCustomData;
+  }
+
+  async #updateSections(): Promise<void> {
+    const node = this.node();
+    if (!node) {
+      this.#sections = [];
+      this.requestUpdate();
+      return;
+    }
+
+    const cssModel = node.domModel().cssModel();
+    const matchedStyles = await cssModel.cachedMatchedCascadeForNode(node);
+    const parentNodeId = matchedStyles?.getParentLayoutNodeId();
+
+    const [parentStyles, computedStyles, extraStyles] = await Promise.all([
+      parentNodeId ? cssModel.getComputedStyle(parentNodeId) : null, cssModel.getComputedStyle(node.id),
+      cssModel.getComputedStyleExtraFields(node.id)
+    ]);
+
+    if (!matchedStyles) {
+      return;
+    }
+
+    const newSections: StylePropertiesSection[] = [];
+    let sectionIdx = 0;
+    for (const style of matchedStyles.nodeStyles()) {
+      const section = new StylePropertiesSection(
+          this, matchedStyles, style, sectionIdx++, computedStyles, parentStyles, extraStyles);
+      newSections.push(section);
+      this.sectionByElement.set(section.element, section);
+    }
+    this.#sections = newSections;
+    this.swatchPopoverHelper().reposition();
+  }
+
+  override async performUpdate(): Promise<void> {
+    if (this.isEditingStyle || this.#userOperation) {
+      return;
+    }
+
+    await this.#updateSections();
+
+    const viewInput: ViewInput = {
+      sections: this.#sections,
+    };
+    this.#view(viewInput, undefined, this.contentElement);
+  }
+
+  swatchPopoverHelper(): InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper {
+    return this.#swatchPopoverHelper;
+  }
+
+  // TODO: Refactor StylesContainer to use getter for node(), so that we can have a `node` setter here: set node().
+  set domNode(node: SDK.DOMModel.DOMNode|null) {
+    if (this.#computedStyleModelInternal.node === node) {
+      return;
+    }
+    this.#computedStyleModelInternal.node = node;
+    this.requestUpdate();
+  }
+
+  node(): SDK.DOMModel.DOMNode|null {
+    return this.#computedStyleModelInternal.node;
+  }
+
+  cssModel(): SDK.CSSModel.CSSModel|null {
+    return this.#computedStyleModelInternal.cssModel();
+  }
+
+  computedStyleModel(): ComputedStyle.ComputedStyleModel.ComputedStyleModel {
+    return this.#computedStyleModelInternal;
+  }
+
+  setActiveProperty(_treeElement: StylePropertyTreeElement|null): void {
+  }
+
+  refreshUpdate(editedSection: StylePropertiesSection, editedTreeElement?: StylePropertyTreeElement): void {
+    if (editedTreeElement) {
+      for (const section of this.#sections) {
+        section.updateVarFunctions(editedTreeElement);
+      }
+    }
+
+    if (this.isEditingStyle) {
+      return;
+    }
+
+    for (const section of this.#sections) {
+      section.update(section === editedSection);
+    }
+    this.swatchPopoverHelper().reposition();
+  }
+
+  filterRegex(): RegExp|null {
+    return null;
+  }
+
+  setEditingStyle(editing: boolean): void {
+    this.isEditingStyle = editing;
+  }
+
+  setUserOperation(userOperation: boolean): void {
+    this.#userOperation = userOperation;
+  }
+
+  forceUpdate(): void {
+    this.hideAllPopovers();
+    this.requestUpdate();
+  }
+
+  hideAllPopovers(): void {
+    this.#swatchPopoverHelper.hide();
+  }
+
+  allSections(): StylePropertiesSection[] {
+    return this.#sections;
+  }
+
+  getVariablePopoverContents(
+      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, variableName: string,
+      computedValue: string|null): ElementsComponents.CSSVariableValueView.CSSVariableValueView {
+    const registration = matchedStyles.getRegisteredProperty(variableName);
+    return new ElementsComponents.CSSVariableValueView.CSSVariableValueView({
+      variableName,
+      value: computedValue ?? undefined,
+      // TODO: provide a goToDefinition to jump to the StylesSidebarPane
+      details: registration ? {registration, goToDefinition: () => {}} : undefined,
+    });
+  }
+
+  getVariableParserError(_matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, _variableName: string):
+      ElementsComponents.CSSVariableValueView.CSSVariableParserError|null {
+    return null;
+  }
+
+  jumpToFunctionDefinition(_functionName: string): void {
+  }
+
+  continueEditingElement(_sectionIndex: number, _propertyIndex: number): void {
+  }
+
+  revealProperty(_cssProperty: SDK.CSSProperty.CSSProperty): void {
+  }
+
+  resetFocus(): void {
+    const firstVisibleSection = this.#sections[0]?.findCurrentOrNextVisible(true);
+    if (firstVisibleSection) {
+      firstVisibleSection.element.tabIndex = this.hasFocus() ? -1 : 0;
+    }
+  }
+
+  removeSection(_section: StylePropertiesSection): void {
+  }
+
+  focusedSectionIndex(): number {
+    return this.#sections.findIndex(section => section.element.hasFocus());
+  }
+
+  addBlankSection(
+      _insertAfterSection: StylePropertiesSection, _styleSheetHeader: SDK.CSSStyleSheetHeader.CSSStyleSheetHeader,
+      _ruleLocation: TextUtils.TextRange.TextRange): void {
+  }
+
+  jumpToProperty(_propertyName: string, _sectionName?: string, _blockName?: string): boolean {
+    return false;
+  }
+
+  jumpToSectionBlock(_section: string): void {
+  }
+
+  jumpToFontPaletteDefinition(_paletteName: string): void {
+  }
+
+  jumpToDeclaration(_valueSource: SDK.CSSMatchedStyles.CSSValueSource): void {
+  }
+
+  addStyleUpdateListener(_listener: () => void): void {
+  }
+
+  removeStyleUpdateListener(_listener: () => void): void {
+  }
+}

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -3543,6 +3543,39 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     return event.target === this.expandElement;
   }
 }
+
+export class GhostStylePropertyTreeElement extends StylePropertyTreeElement {
+  constructor(
+      stylesContainer: StylesContainer, section: StylePropertiesSection,
+      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, property: SDK.CSSProperty.CSSProperty) {
+    super({
+      stylesContainer,
+      section,
+      matchedStyles,
+      property,
+      isShorthand: false,
+      inherited: false,
+      overloaded: false,
+      newProperty: false,
+    });
+  }
+
+  override onattach(): void {
+    this.listItemElement.classList.add('ghost-row');
+    this.updateTitle();
+  }
+
+  override updateTitle(): void {
+    this.listItemElement.removeChildren();
+    this.nameElement = Renderer.renderNameElement(this.name);
+    this.listItemElement.appendChild(this.nameElement);
+    this.listItemElement.createChild('span', 'styles-name-value-separator').textContent = ': ';
+    this.valueElement = this.listItemElement.createChild('span');
+    this.valueElement.textContent = this.value;
+    this.listItemElement.createChild('span', 'styles-semicolon').textContent = ';';
+  }
+}
+
 export interface Context {
   expanded: boolean;
   hasChildren: boolean;

package/front_end/panels/elements/StylesAiCodeCompletionProvider.ts

@@ -5,8 +5,10 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import type * as SDK from '../../core/sdk/sdk.js';
 import * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
-import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
+import * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 
 export class StylesAiCodeCompletionProvider {
   #aidaClient: Host.AidaClient.AidaClient = new Host.AidaClient.AidaClient();
@@ -16,6 +18,11 @@ export class StylesAiCodeCompletionProvider {
 
   #boundOnUpdateAiCodeCompletionState = this.#updateAiCodeCompletionState.bind(this);
 
+  #debouncedRequestAidaSuggestion =
+      Common.Debouncer.debounce((prefix: string, suffix: string, cursorPositionAtRequest: number) => {
+        void this.#requestAidaSuggestion(prefix, suffix, cursorPositionAtRequest);
+      }, TextEditor.AiCodeCompletionProvider.AIDA_REQUEST_DEBOUNCE_TIMEOUT_MS);
+
   private constructor(aiCodeCompletionConfig: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig) {
     const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
     if (!AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionStylesEnabled(devtoolsLocale.locale)) {
@@ -66,4 +73,144 @@ export class StylesAiCodeCompletionProvider {
       this.#cleanupAiCodeCompletion();
     }
   }
+
+  async triggerAiCodeCompletion(
+      text: string, cursorPosition: number, isEditingName: boolean, cssProperty: SDK.CSSProperty.CSSProperty,
+      cssModel: SDK.CSSModel.CSSModel): Promise<void> {
+    const styleSheetId = cssProperty.ownerStyle.styleSheetId;
+    if (!styleSheetId) {
+      return;
+    }
+
+    const header = cssModel.styleSheetHeaderForId(styleSheetId);
+    if (!header) {
+      return;
+    }
+
+    const contentData = await header.requestContentData();
+    if (TextUtils.ContentData.ContentData.isError(contentData)) {
+      AiCodeCompletion.debugLog('Error while fetching content from stylesheet', contentData.error);
+      return;
+    }
+
+    const content = contentData.text;
+    const propertyRange = cssProperty.range;
+    if (!content || !propertyRange) {
+      return;
+    }
+
+    const contentText = new TextUtils.Text.Text(content);
+    const propertyStartOffset = contentText.offsetFromPosition(propertyRange.startLine, propertyRange.startColumn);
+    const propertyEndOffset = contentText.offsetFromPosition(propertyRange.endLine, propertyRange.endColumn);
+    let prefix = content.substring(0, propertyStartOffset);
+    if (!isEditingName) {
+      const nameRange = cssProperty.nameRange();
+      if (nameRange) {
+        const nameEndOffset = contentText.offsetFromPosition(nameRange.endLine, nameRange.endColumn);
+        prefix = prefix + content.substring(propertyStartOffset, nameEndOffset) + ': ';
+      }
+    }
+    prefix = prefix + text;
+    const suffix = content.substring(propertyEndOffset);
+    // TODO(b/476098133): Consider adjusting cursor position
+    this.#debouncedRequestAidaSuggestion(prefix, suffix, cursorPosition);
+  }
+
+  async #requestAidaSuggestion(prefix: string, suffix: string, cursorPositionAtRequest: number): Promise<void> {
+    if (!this.#aiCodeCompletion) {
+      AiCodeCompletion.debugLog('Ai Code Completion is not initialized');
+      this.#aiCodeCompletionConfig?.onResponseReceived();
+      Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionError);
+      return;
+    }
+
+    const startTime = performance.now();
+    this.#aiCodeCompletionConfig?.onRequestTriggered();
+    // Registering AiCodeCompletionRequestTriggered metric even if the request is served from cache
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionRequestTriggered);
+
+    try {
+      const completionResponse = await this.#aiCodeCompletion.completeCode(
+          prefix, suffix, cursorPositionAtRequest, Host.AidaClient.AidaInferenceLanguage.CSS);
+      this.#aiCodeCompletionConfig?.onResponseReceived();
+      if (!completionResponse) {
+        return;
+      }
+
+      const {response, fromCache} = completionResponse;
+      if (!response) {
+        return;
+      }
+
+      const sampleResponse = await this.#generateSampleForRequest(response, prefix, suffix);
+      if (!sampleResponse) {
+        return;
+      }
+      if (fromCache) {
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionResponseServedFromCache);
+      }
+      this.#aiCodeCompletionConfig?.setAiAutoCompletion?.({
+        text: sampleResponse.suggestionText,
+        from: cursorPositionAtRequest,
+        rpcGlobalId: sampleResponse.rpcGlobalId,
+        sampleId: sampleResponse.sampleId,
+        startTime,
+        clearCachedRequest: this.clearCache.bind(this),
+        onImpression: this.#aiCodeCompletion?.registerUserImpression.bind(this.#aiCodeCompletion),
+      });
+    } catch (e) {
+      AiCodeCompletion.debugLog('Error while fetching code completion suggestions from AIDA', e);
+      this.#aiCodeCompletionConfig?.onResponseReceived();
+      Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionError);
+    }
+  }
+
+  async #generateSampleForRequest(response: Host.AidaClient.CompletionResponse, prefix: string, suffix?: string):
+      Promise<{
+        suggestionText: string,
+        citations: Host.AidaClient.Citation[],
+        rpcGlobalId?: Host.AidaClient.RpcGlobalId,
+        sampleId?: number,
+      }|null> {
+    const suggestionSample = this.#pickSampleFromResponse(response);
+    if (!suggestionSample) {
+      return null;
+    }
+
+    const shouldBlock =
+        suggestionSample.attributionMetadata?.attributionAction === Host.AidaClient.RecitationAction.BLOCK;
+    if (shouldBlock) {
+      return null;
+    }
+
+    const suggestionText = TextEditor.AiCodeCompletionProvider.AiCodeCompletionProvider.trimSuggestionOverlap(
+        suggestionSample.generationString, suffix);
+    if (suggestionText.length === 0) {
+      return null;
+    }
+
+    return {
+      suggestionText,
+      sampleId: suggestionSample.sampleId,
+      citations: suggestionSample.attributionMetadata?.citations ?? [],
+      rpcGlobalId: response.metadata.rpcGlobalId,
+    };
+  }
+
+  #pickSampleFromResponse(response: Host.AidaClient.CompletionResponse): Host.AidaClient.GenerationSample|null {
+    if (!response.generatedSamples.length) {
+      return null;
+    }
+
+    const completionHint = this.#aiCodeCompletionConfig?.getCompletionHint?.();
+    if (!completionHint) {
+      return response.generatedSamples[0];
+    }
+    return response.generatedSamples.find(sample => sample.generationString.startsWith(completionHint)) ??
+        response.generatedSamples[0];
+  }
+
+  clearCache(): void {
+    this.#aiCodeCompletion?.clearCachedRequest();
+  }
 }

package/front_end/panels/elements/components/ComputedStyleTrace.ts

@@ -24,6 +24,10 @@ export class ComputedStyleTrace extends HTMLElement {
   #onNavigateToSource: ((event?: Event) => void) = () => {};
   #ruleOriginNode?: Node;
 
+  connectedCallback(): void {
+    this.#render();
+  }
+
   set data(data: ComputedStyleTraceData) {
     this.#selector = data.selector;
     this.#active = data.active;

package/front_end/panels/elements/components/ElementsBreadcrumbs.ts

@@ -303,7 +303,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
                   data-crumb="true"
                 >
                   <a href="#" draggable=false class="crumb-link"
-                    jslog=${VisualLogging.item().track({click:true})}
+                    jslog=${VisualLogging.item().track({click:true, resize:true})}
                     @click=${this.#onCrumbClick(crumb.node)}
                     @mousemove=${this.#onCrumbMouseMove(crumb.node)}
                     @mouseleave=${this.#onCrumbMouseLeave(crumb.node)}

package/front_end/panels/elements/components/StylePropertyEditor.ts

@@ -194,7 +194,8 @@ export class StylePropertyEditor extends HTMLElement {
     return html`
       <button title=${title}
               class=${classes}
-              jslog=${VisualLogging.item().track({click: true}).context(`${propertyName}-${propertyValue}`)}
+              jslog=${
+        VisualLogging.item().track({click: true, resize: true}).context(`${propertyName}-${propertyValue}`)}
               @click=${() => this.#onButtonClick(propertyName, propertyValue, selected)}>
         <devtools-icon style=${transform} name=${iconInfo.iconName}>
         </devtools-icon>

package/front_end/panels/elements/components/computedStyleProperty.css

@@ -19,7 +19,7 @@
   min-height: 16px;
   box-sizing: border-box;
   padding-top: 2px;
-  white-space: nowrap;
+  white-space: var(--override-computed-style-property-white-space, nowrap);
   user-select: text;
 }
 

package/front_end/panels/elements/elements-meta.ts

@@ -8,7 +8,7 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type * as Elements from './elements.js';
+import * as Elements from './elements.js';
 
 const UIStrings = {
   /**
@@ -614,10 +614,8 @@ UI.ViewManager.registerLocationResolver({
 Common.Revealer.registerRevealer({
   contextTypes() {
     return [
-      SDK.DOMModel.DOMNode,
-      SDK.DOMModel.DeferredDOMNode,
-      SDK.RemoteObject.RemoteObject,
-      SDK.DOMModel.AdoptedStyleSheet,
+      SDK.DOMModel.DOMNode, SDK.DOMModel.DeferredDOMNode, SDK.RemoteObject.RemoteObject, SDK.DOMModel.AdoptedStyleSheet,
+      Elements.ElementsPanel.NodeComputedStyles
     ];
   },
   destination: Common.Revealer.RevealerDestination.ELEMENTS_PANEL,

package/front_end/panels/elements/elements.ts

@@ -54,6 +54,7 @@ import * as NodeStackTraceWidget from './NodeStackTraceWidget.js';
 import * as PlatformFontsWidget from './PlatformFontsWidget.js';
 import * as PropertiesWidget from './PropertiesWidget.js';
 import * as PropertyRenderer from './PropertyRenderer.js';
+import * as StandaloneStylesContainer from './StandaloneStylesContainer.js';
 import * as StyleEditorWidget from './StyleEditorWidget.js';
 import * as StylePropertiesSection from './StylePropertiesSection.js';
 import * as StylePropertyHighlighter from './StylePropertyHighlighter.js';
@@ -90,6 +91,7 @@ export {
   PlatformFontsWidget,
   PropertiesWidget,
   PropertyRenderer,
+  StandaloneStylesContainer,
   StyleEditorWidget,
   StylePropertiesSection,
   StylePropertyHighlighter,

package/front_end/panels/elements/stylePropertiesTreeOutline.css

@@ -80,6 +80,12 @@
     padding-top: 4px;
     padding-bottom: 3px;
   }
+
+  &.ghost-row {
+    opacity: 50%;
+    font-style: italic;
+    pointer-events: none;
+  }
 }
 
 .tree-outline > li {

package/front_end/panels/lighthouse/LighthouseReportRenderer.ts

@@ -197,7 +197,7 @@ export class LighthouseReportRenderer {
         continue;
       }
 
-      auditEl.setAttribute('jslog', `${VisualLogging.item(`lighthouse.audit.${id}`)}`);
+      auditEl.setAttribute('jslog', `${VisualLogging.item(`lighthouse.audit.${id}`).track({resize: true})}`);
 
       let state: string|undefined;
       for (const className of auditEl.classList) {

package/front_end/panels/linear_memory_inspector/components/LinearMemoryValueInterpreter.ts

@@ -60,7 +60,7 @@ function renderEndiannessSetting(
         data-endianness="true" @change=${(e: Event) => onEndiannessChanged((e.target as HTMLSelectElement).value as Endianness)}>
         ${[Endianness.LITTLE, Endianness.BIG].map(endianness => {
             return html`<option value=${endianness} .selected=${currentEndiannes === endianness}
-            jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(endianness)).track({click: true})}>${
+            jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(endianness)).track({click: true, resize: true})}>${
                 i18n.i18n.lockedString(endianness)}</option>`;
         })}
       </select>