chrome-devtools-frontend 1.0.1569477 → 1.0.1570343

package/WATCHLISTS

@@ -26,7 +26,7 @@
 
   'WATCHLISTS': {
     'all': ['devtools-reviews+devtools@chromium.org'],
-    'chromedriver': ['johnchen+watch@chromium.org'],
+    'chromedriver': [],
     'lighthouse': ['lighthouse-eng+devtools-cl@google.com'],
     'third_party': ['devtools-reviews+third_party@chromium.org'],
   },

package/front_end/core/sdk/DOMModel.ts

@@ -882,7 +882,7 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
   }
 
   private toAdoptedStyleSheets(ids: Protocol.DOM.StyleSheetId[]): AdoptedStyleSheet[] {
-    return ids.map(id => (new AdoptedStyleSheet(id, this.#domModel.cssModel())));
+    return ids.map(id => (new AdoptedStyleSheet(id, this)));
   }
 
   setAdoptedStyleSheets(ids: Protocol.DOM.StyleSheetId[]): void {
@@ -1280,7 +1280,11 @@ export class DOMDocument extends DOMNode {
 }
 
 export class AdoptedStyleSheet {
-  constructor(readonly id: Protocol.DOM.StyleSheetId, readonly cssModel: CSSModel) {
+  constructor(readonly id: Protocol.DOM.StyleSheetId, readonly parent: DOMNode) {
+  }
+
+  get cssModel(): CSSModel {
+    return this.parent.domModel().cssModel();
   }
 }
 

package/front_end/panels/common/DOMLinkifier.ts

@@ -5,6 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -212,14 +213,16 @@ const DEFERRED_DEFAULT_VIEW: DeferredView = (input, _output, target: HTMLElement
 export class DeferredDOMNodeLink extends UI.Widget.Widget {
   #deferredNode: SDK.DOMModel.DeferredDOMNode|undefined = undefined;
   #options: Options|undefined = undefined;
+  #styleSheetId: Protocol.DOM.StyleSheetId|undefined = undefined;
   #view: DeferredView;
 
   constructor(
       element?: HTMLElement, deferredNode?: SDK.DOMModel.DeferredDOMNode, options?: Options,
-      view: DeferredView = DEFERRED_DEFAULT_VIEW) {
+      styleSheetId?: Protocol.DOM.StyleSheetId, view: DeferredView = DEFERRED_DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
     this.element.classList.remove('vbox');
     this.#deferredNode = deferredNode;
+    this.#styleSheetId = styleSheetId;
     this.#options = options;
     this.#view = view;
     this.performUpdate();
@@ -230,6 +233,14 @@ export class DeferredDOMNodeLink extends UI.Widget.Widget {
       preventKeyboardFocus: this.#options?.preventKeyboardFocus,
       onClick: () => {
         this.#deferredNode?.resolve?.(node => {
+          if (node && this.#styleSheetId) {
+            for (const adoptedStyle of node.adoptedStyleSheetsForNode) {
+              if (adoptedStyle.id === this.#styleSheetId) {
+                void Common.Revealer.reveal(adoptedStyle);
+                return;
+              }
+            }
+          }
           void Common.Revealer.reveal(node);
           void node?.scrollIntoView();
         });

package/front_end/panels/elements/AdoptedStyleSheetTreeElement.ts

@@ -9,11 +9,12 @@ import * as CodeHighlighter from '../../ui/components/code_highlighter/code_high
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import {PanelUtils} from '../utils/utils.js';
 
 export class AdoptedStyleSheetTreeElement extends UI.TreeOutline.TreeElement {
   private eventListener: Common.EventTarget.EventDescriptor|null = null;
 
-  constructor(private readonly adoptedStyleSheet: SDK.DOMModel.AdoptedStyleSheet) {
+  constructor(readonly adoptedStyleSheet: SDK.DOMModel.AdoptedStyleSheet) {
     super('');
     const header = adoptedStyleSheet.cssModel.styleSheetHeaderForId(adoptedStyleSheet.id);
     if (header) {
@@ -50,6 +51,10 @@ export class AdoptedStyleSheetTreeElement extends UI.TreeOutline.TreeElement {
     }
     treeElement.appendChild(new AdoptedStyleSheetContentsTreeElement(header));
   }
+
+  highlight(): void {
+    PanelUtils.highlightElement(this.listItemElement);
+  }
 }
 
 export class AdoptedStyleSheetContentsTreeElement extends UI.TreeOutline.TreeElement {

package/front_end/panels/elements/ElementsPanel.ts

@@ -795,7 +795,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     return this.#domTreeWidget.selectedDOMNode();
   }
 
-  selectDOMNode(node: SDK.DOMModel.DOMNode, focus?: boolean): void {
+  selectDOMNode(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet, focus?: boolean): void {
     this.#domTreeWidget.selectDOMNode(node, focus);
   }
 
@@ -899,6 +899,18 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.notFirstInspectElement = true;
   }
 
+  async revealAndSelectAdoptedStyleSheet(nodeToReveal: SDK.DOMModel.AdoptedStyleSheet, opts?: RevealAndSelectNodeOpts):
+      Promise<void> {
+    const {showPanel = true, focusNode = false} = opts ?? {};
+    this.omitDefaultSelection = true;
+
+    if (showPanel) {
+      await UI.ViewManager.ViewManager.instance().showView('elements', false, !focus);
+    }
+    this.selectDOMNode(nodeToReveal, focusNode);
+    delete this.omitDefaultSelection;
+  }
+
   private showUAShadowDOMChanged(): void {
     this.#domTreeWidget.reload();
   }
@@ -1309,10 +1321,12 @@ export class ContextMenuProvider implements
   }
 }
 
-export class DOMNodeRevealer implements
-    Common.Revealer.Revealer<SDK.DOMModel.DOMNode|SDK.DOMModel.DeferredDOMNode|SDK.RemoteObject.RemoteObject> {
-  reveal(node: SDK.DOMModel.DOMNode|SDK.DOMModel.DeferredDOMNode|SDK.RemoteObject.RemoteObject, omitFocus?: boolean):
-      Promise<void> {
+export class DOMNodeRevealer implements Common.Revealer.Revealer<
+    SDK.DOMModel.DOMNode|SDK.DOMModel.DeferredDOMNode|SDK.RemoteObject.RemoteObject|SDK.DOMModel.AdoptedStyleSheet> {
+  reveal(
+      node: SDK.DOMModel.DOMNode|SDK.DOMModel.DeferredDOMNode|SDK.RemoteObject.RemoteObject|
+      SDK.DOMModel.AdoptedStyleSheet,
+      omitFocus?: boolean): Promise<void> {
     const panel = ElementsPanel.instance();
     panel.pendingNodeReveal = true;
 
@@ -1332,7 +1346,7 @@ export class DOMNodeRevealer implements
 
     function revealPromise(
         resolve: () => void, reject: (arg0: Platform.UserVisibleError.UserVisibleError) => void): void {
-      if (node instanceof SDK.DOMModel.DOMNode) {
+      if (node instanceof SDK.DOMModel.DOMNode || node instanceof SDK.DOMModel.AdoptedStyleSheet) {
         onNodeResolved((node));
       } else if (node instanceof SDK.DOMModel.DeferredDOMNode) {
         (node).resolve(checkDeferredDOMNodeThenReveal);
@@ -1346,14 +1360,15 @@ export class DOMNodeRevealer implements
         }
       }
 
-      function onNodeResolved(resolvedNode: SDK.DOMModel.DOMNode): void {
+      function onNodeResolved(resolvedNode: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet): void {
         panel.pendingNodeReveal = false;
 
         // A detached node could still have a parent and ownerDocument
         // properties, which means stepping up through the hierarchy to ensure
         // that the root node is the document itself. Any break implies
         // detachment.
-        let currentNode: SDK.DOMModel.DOMNode = resolvedNode;
+        let currentNode: SDK.DOMModel.DOMNode =
+            resolvedNode instanceof SDK.DOMModel.AdoptedStyleSheet ? resolvedNode.parent : resolvedNode;
         while (currentNode.parentNode) {
           currentNode = currentNode.parentNode;
         }
@@ -1367,7 +1382,11 @@ export class DOMNodeRevealer implements
         }
 
         if (resolvedNode) {
-          void panel.revealAndSelectNode(resolvedNode, {showPanel: true, focusNode: !omitFocus}).then(resolve);
+          const opts: RevealAndSelectNodeOpts = {showPanel: true, focusNode: !omitFocus};
+          const promise = resolvedNode instanceof SDK.DOMModel.AdoptedStyleSheet ?
+              panel.revealAndSelectAdoptedStyleSheet(resolvedNode, opts) :
+              panel.revealAndSelectNode(resolvedNode, opts);
+          void promise.then(resolve);
           return;
         }
         const msg = i18nString(UIStrings.nodeCannotBeFoundInTheCurrent);

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -274,8 +274,12 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     this.performUpdate();
   }
 
-  selectDOMNode(node: SDK.DOMModel.DOMNode|null, focus?: boolean): void {
-    this.#viewOutput?.elementsTreeOutline?.selectDOMNode(node, focus);
+  selectDOMNode(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet|null, focus?: boolean): void {
+    if (node instanceof SDK.DOMModel.AdoptedStyleSheet) {
+      this.#viewOutput?.elementsTreeOutline?.highlightAdoptedStyleSheet(node);
+    } else {
+      this.#viewOutput?.elementsTreeOutline?.selectDOMNode(node, focus);
+    }
   }
 
   highlightNodeAttribute(node: SDK.DOMModel.DOMNode, attribute: string): void {
@@ -911,6 +915,22 @@ export class ElementsTreeOutline extends
     }
   }
 
+  highlightAdoptedStyleSheet(adoptedStyleSheet: SDK.DOMModel.AdoptedStyleSheet): void {
+    const parentNode = !this.includeRootDOMNode && adoptedStyleSheet.parent === this.rootDOMNode && this.rootDOMNode ?
+        this.rootElement() :
+        this.createTreeElementFor(adoptedStyleSheet.parent);
+    if (!parentNode) {
+      return;
+    }
+
+    for (const child of parentNode.children()) {
+      if (child instanceof AdoptedStyleSheetTreeElement && child.adoptedStyleSheet === adoptedStyleSheet) {
+        child.highlight();
+        return;
+      }
+    }
+  }
+
   editing(): boolean {
     const node = this.selectedDOMNode();
     if (!node) {

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -409,6 +409,16 @@ export class StylePropertiesSection {
         link.textContent = label;
         return link;
       }
+      if (rule && rule.style.styleSheetId && rule.treeScope) {
+        // Make link for adopted stylesheet.
+        const ownerNode = new SDK.DOMModel.DeferredDOMNode(rule.cssModelInternal.target(), rule.treeScope);
+        const link = document.createElement('devtools-widget') as
+            UI.Widget.WidgetElement<PanelsCommon.DOMLinkifier.DeferredDOMNodeLink>;
+        link.widgetConfig = UI.Widget.widgetConfig(
+            e => new PanelsCommon.DOMLinkifier.DeferredDOMNodeLink(e, ownerNode, undefined, rule.style.styleSheetId));
+        link.textContent = label;
+        return link;
+      }
       return null;
     }
 

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

@@ -617,6 +617,7 @@ Common.Revealer.registerRevealer({
       SDK.DOMModel.DOMNode,
       SDK.DOMModel.DeferredDOMNode,
       SDK.RemoteObject.RemoteObject,
+      SDK.DOMModel.AdoptedStyleSheet,
     ];
   },
   destination: Common.Revealer.RevealerDestination.ELEMENTS_PANEL,

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -239,39 +239,17 @@ export class DeviceModeToolbar {
         Common.Settings.Settings.instance().createSetting('emulation.auto-adjust-scale', true);
 
     this.lastMode = new Map();
-
-    this.#element = document.createElement('div');
-    this.#element.classList.add('device-mode-toolbar');
-    this.#element.setAttribute('jslog', `${VisualLogging.toolbar('device-mode').track({resize: true})}`);
-
-    const mainToolbar = this.#element.createChild('devtools-toolbar', 'main-toolbar');
-    this.appendDeviceSelectMenu(mainToolbar);
-
     this.widthInput = new EmulationComponents.DeviceSizeInputElement.SizeInputElement(
         i18nString(UIStrings.width), {jslogContext: 'width'});
-    this.widthInput.addEventListener('sizechanged', ({size: width}) => {
-      if (this.autoAdjustScaleSetting.get()) {
-        this.model.setWidthAndScaleToFit(width);
-      } else {
-        this.model.setWidth(width);
-      }
-    });
     this.heightInput = new EmulationComponents.DeviceSizeInputElement.SizeInputElement(
         i18nString(UIStrings.heightLeaveEmptyForFull), {jslogContext: 'height'});
-    this.heightInput.addEventListener('sizechanged', ({size: height}) => {
-      if (this.autoAdjustScaleSetting.get()) {
-        this.model.setHeightAndScaleToFit(height);
-      } else {
-        this.model.setHeight(height);
-      }
-    });
-    this.appendDimensionInputs(mainToolbar);
 
-    this.appendDisplaySettings(mainToolbar);
-    this.appendDevicePositionItems(mainToolbar);
-    const optionsToolbar = this.#element.createChild('devtools-toolbar', 'device-mode-toolbar-options');
-    optionsToolbar.wrappable = true;
-    this.fillOptionsToolbar(optionsToolbar);
+    this.#element = document.createElement('div');
+    this.#element.classList.add('device-mode-toolbar');
+    this.#element.setAttribute('jslog', `${VisualLogging.toolbar('device-mode').track({resize: true})}`);
+
+    const mainToolbar = this.createMainToolbar();
+    const optionsToolbar = this.createOptionsToolbar();
 
     this.emulatedDevicesList = EmulationModel.EmulatedDevices.EmulatedDevicesList.instance();
     this.emulatedDevicesList.addEventListener(
@@ -298,37 +276,46 @@ export class DeviceModeToolbar {
     return element;
   }
 
-  private appendDeviceSelectMenu(toolbar: UI.Toolbar.Toolbar): void {
-    toolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
+  private createMainToolbar(): UI.Toolbar.Toolbar {
+    const mainToolbar = this.#element.createChild('devtools-toolbar', 'main-toolbar');
+
+    mainToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
     this.deviceSelectItem =
         new UI.Toolbar.ToolbarMenuButton(this.appendDeviceMenuItems.bind(this), undefined, undefined, 'device');
     this.deviceSelectItem.turnShrinkable();
     this.deviceSelectItem.setDarkText();
-    toolbar.appendToolbarItem(this.deviceSelectItem);
-  }
-
-  private appendDimensionInputs(toolbar: UI.Toolbar.Toolbar): void {
-    toolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.widthInput));
+    mainToolbar.appendToolbarItem(this.deviceSelectItem);
 
+    this.widthInput.addEventListener('sizechanged', ({size: width}) => {
+      if (this.autoAdjustScaleSetting.get()) {
+        this.model.setWidthAndScaleToFit(width);
+      } else {
+        this.model.setWidth(width);
+      }
+    });
+    this.heightInput.addEventListener('sizechanged', ({size: height}) => {
+      if (this.autoAdjustScaleSetting.get()) {
+        this.model.setHeightAndScaleToFit(height);
+      } else {
+        this.model.setHeight(height);
+      }
+    });
+    mainToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.widthInput));
     const xElement = document.createElement('div');
     xElement.classList.add('device-mode-x');
     xElement.textContent = '×';
     this.xItem = new UI.Toolbar.ToolbarItem(xElement);
-    toolbar.appendToolbarItem(this.xItem);
-
-    toolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.heightInput));
-  }
+    mainToolbar.appendToolbarItem(this.xItem);
+    mainToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.heightInput));
 
-  private appendDisplaySettings(toolbar: UI.Toolbar.Toolbar): void {
-    toolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
+    mainToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
     this.scaleItem =
         new UI.Toolbar.ToolbarMenuButton(this.appendScaleMenuItems.bind(this), undefined, undefined, 'scale');
     setTitleForButton(this.scaleItem, i18nString(UIStrings.zoom));
     this.scaleItem.turnShrinkable();
     this.scaleItem.setDarkText();
-    toolbar.appendToolbarItem(this.scaleItem);
-
-    toolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
+    mainToolbar.appendToolbarItem(this.scaleItem);
+    mainToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
 
     this.deviceScaleItem = new UI.Toolbar.ToolbarMenuButton(
         this.appendDeviceScaleMenuItems.bind(this), undefined, undefined, 'device-pixel-ratio');
@@ -336,53 +323,55 @@ export class DeviceModeToolbar {
     this.deviceScaleItem.setVisible(this.showDeviceScaleFactorSetting.get());
     setTitleForButton(this.deviceScaleItem, i18nString(UIStrings.devicePixelRatio));
     this.deviceScaleItem.setDarkText();
-    toolbar.appendToolbarItem(this.deviceScaleItem);
-
-    toolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
+    mainToolbar.appendToolbarItem(this.deviceScaleItem);
+    mainToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
     this.uaItem =
         new UI.Toolbar.ToolbarMenuButton(this.appendUserAgentMenuItems.bind(this), undefined, undefined, 'device-type');
     this.uaItem.turnShrinkable();
     this.uaItem.setVisible(this.showUserAgentTypeSetting.get());
     setTitleForButton(this.uaItem, i18nString(UIStrings.deviceType));
     this.uaItem.setDarkText();
-    toolbar.appendToolbarItem(this.uaItem);
+    mainToolbar.appendToolbarItem(this.uaItem);
 
     this.throttlingConditionsItem =
         MobileThrottling.ThrottlingManager.throttlingManager().createMobileThrottlingButton();
     this.throttlingConditionsItem.turnShrinkable();
-    toolbar.appendToolbarItem(this.throttlingConditionsItem);
+    mainToolbar.appendToolbarItem(this.throttlingConditionsItem);
     const saveDataItem = MobileThrottling.ThrottlingManager.throttlingManager().createSaveDataOverrideSelector();
     saveDataItem.turnShrinkable();
-    toolbar.appendToolbarItem(saveDataItem);
-  }
+    mainToolbar.appendToolbarItem(saveDataItem);
 
-  private appendDevicePositionItems(toolbar: UI.Toolbar.Toolbar): void {
-    toolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
+    mainToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
     this.modeButton = new UI.Toolbar.ToolbarButton('', 'screen-rotation', undefined, 'screen-rotation');
     this.modeButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.modeMenuClicked, this);
-    toolbar.appendToolbarItem(this.modeButton);
+    mainToolbar.appendToolbarItem(this.modeButton);
 
     // Show dual screen toolbar.
     this.spanButton = new UI.Toolbar.ToolbarButton('', 'device-fold', undefined, 'device-fold');
     this.spanButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.spanClicked, this);
-    toolbar.appendToolbarItem(this.spanButton);
+    mainToolbar.appendToolbarItem(this.spanButton);
 
     // Show posture toolbar menu for foldable devices.
-    toolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
+    mainToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
     this.postureItem = new UI.Toolbar.ToolbarMenuButton(
         this.appendDevicePostureItems.bind(this), undefined, undefined, 'device-posture');
     this.postureItem.turnShrinkable();
     this.postureItem.setDarkText();
     setTitleForButton(this.postureItem, i18nString(UIStrings.devicePosture));
-    toolbar.appendToolbarItem(this.postureItem);
+    mainToolbar.appendToolbarItem(this.postureItem);
+
+    return mainToolbar;
   }
 
-  private fillOptionsToolbar(toolbar: UI.Toolbar.Toolbar): void {
-    toolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
+  private createOptionsToolbar(): UI.Toolbar.Toolbar {
+    const optionsToolbar = this.#element.createChild('devtools-toolbar', 'device-mode-toolbar-options');
+    optionsToolbar.wrappable = true;
+    optionsToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
     const moreOptionsButton = new UI.Toolbar.ToolbarMenuButton(
         this.appendOptionsMenuItems.bind(this), true, undefined, 'more-options', 'dots-vertical');
     moreOptionsButton.setTitle(i18nString(UIStrings.moreOptions));
-    toolbar.appendToolbarItem(moreOptionsButton);
+    optionsToolbar.appendToolbarItem(moreOptionsButton);
+    return optionsToolbar;
   }
 
   private appendDevicePostureItems(contextMenu: UI.ContextMenu.ContextMenu): void {

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -312,18 +312,10 @@ const UIStrings = {
    * @description Call site stack label in Timeline UIUtils of the Performance panel
    */
   idleCallbackRequested: 'Idle callback requested',
-  /**
-   * @description Stack label in Timeline UIUtils of the Performance panel
-   */
-  recalculationForced: 'Recalculation forced',
   /**
    * @description Call site stack label in Timeline UIUtils of the Performance panel
    */
   firstLayoutInvalidation: 'First layout invalidation',
-  /**
-   * @description Stack label in Timeline UIUtils of the Performance panel
-   */
-  layoutForced: 'Layout forced',
   /**
    * @description Label in front of CSS property (eg `opacity`) being animated or a CSS animation name (eg `layer-4-fade-in-out`)
    */
@@ -1725,20 +1717,8 @@ export class TimelineUIUtils {
       parsedTrace: Trace.TraceModel.ParsedTrace): Promise<void> {
     const {startTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(event);
     let initiatorStackLabel = i18nString(UIStrings.initiatorStackTrace);
-    let stackLabel = i18nString(UIStrings.functionStack);
-    const stackTraceForEvent = Trace.Extras.StackTraceForEvent.get(event, parsedTrace.data);
-    if (stackTraceForEvent?.callFrames.length || stackTraceForEvent?.description || stackTraceForEvent?.parent) {
-      contentHelper.addSection(i18nString(UIStrings.functionStack));
-      await contentHelper.createChildStackTraceElement(stackTraceForEvent);
-      // TODO(andoli): also build stack trace component for other events
-      // that have a stack trace using the StackTraceForEvent helper.
-    } else {
-      const stackTrace = Trace.Helpers.Trace.getZeroIndexedStackTraceInEventPayload(event);
-      if (stackTrace?.length) {
-        contentHelper.addSection(stackLabel);
-        await contentHelper.createChildStackTraceElement(TimelineUIUtils.stackTraceFromCallFrames(stackTrace));
-      }
-    }
+    await contentHelper.appendFunctionStackTraceSection(event, parsedTrace);
+
     switch (event.name) {
       case Trace.Types.Events.Name.TIMER_FIRE:
         initiatorStackLabel = i18nString(UIStrings.timerInstalled);
@@ -1751,11 +1731,9 @@ export class TimelineUIUtils {
         break;
       case Trace.Types.Events.Name.RECALC_STYLE:
         initiatorStackLabel = i18nString(UIStrings.firstInvalidated);
-        stackLabel = i18nString(UIStrings.recalculationForced);
         break;
       case Trace.Types.Events.Name.LAYOUT:
         initiatorStackLabel = i18nString(UIStrings.firstLayoutInvalidation);
-        stackLabel = i18nString(UIStrings.layoutForced);
         break;
     }
 
@@ -1768,8 +1746,9 @@ export class TimelineUIUtils {
       // and the time since the initiator (Pending For).
       const stackTrace = Trace.Helpers.Trace.getZeroIndexedStackTraceInEventPayload(initiator);
       if (stackTrace) {
-        contentHelper.addSection(initiatorStackLabel);
-        await contentHelper.createChildStackTraceElement(TimelineUIUtils.stackTraceFromCallFrames(stackTrace));
+        const traceElement =
+            await contentHelper.createChildStackTraceElement(TimelineUIUtils.stackTraceFromCallFrames(stackTrace));
+        contentHelper.appendSectionWithBodyIfExists(initiatorStackLabel, {body: traceElement});
       }
 
       const link = this.createEntryLink(initiator);
@@ -2414,6 +2393,39 @@ export class TimelineDetailsContentHelper {
     this.fragment.appendChild(this.element);
   }
 
+  /**
+   * Creates a new section, but only if the provided `body` element is present,
+   * otherwise it does nothing.
+   */
+  appendSectionWithBodyIfExists(title: string, options: {
+    body: HTMLElement|null,
+    swatchColor?: string,
+    event?: Trace.Types.Events.Event,
+  }): void {
+    if (!options.body) {
+      return;
+    }
+    this.addSection(title, options.swatchColor, options.event);
+    this.tableElement.appendChild(options.body);
+  }
+
+  /**
+   * Generates a stack trace for the given event. If there is no stack data,
+   * nothing is appended; you can safely call this without fearing that it will
+   * create an empty section.
+   */
+  async appendFunctionStackTraceSection(
+      event: Trace.Types.Events.Event,
+      parsedTrace: Trace.TraceModel.ParsedTrace,
+      ): Promise<void> {
+    const stackTraceForEvent = Trace.Extras.StackTraceForEvent.get(event, parsedTrace.data);
+    if (!stackTraceForEvent) {
+      return;
+    }
+    const traceElement = await this.createChildStackTraceElement(stackTraceForEvent);
+    this.appendSectionWithBodyIfExists(i18nString(UIStrings.functionStack), {body: traceElement});
+  }
+
   linkifier(): LegacyComponents.Linkifier.Linkifier|null {
     return this.#linkifier;
   }
@@ -2481,9 +2493,13 @@ export class TimelineDetailsContentHelper {
     this.appendElementRow(title, locationContent);
   }
 
-  async createChildStackTraceElement(runtimeStackTrace: Protocol.Runtime.StackTrace): Promise<void> {
+  /**
+   * Creates a stack trace element for the given trace, but checks if it
+   * contains any entries, and discards it if it's empty.
+   */
+  async createChildStackTraceElement(runtimeStackTrace: Protocol.Runtime.StackTrace): Promise<HTMLElement|null> {
     if (!this.#linkifier) {
-      return;
+      return null;
     }
 
     let callFrameContents;
@@ -2493,7 +2509,6 @@ export class TimelineDetailsContentHelper {
       callFrameContents = new LegacyComponents.JSPresentationUtils.StackTracePreviewContent(
           undefined, this.target ?? undefined, this.#linkifier, {tabStops: true, showColumnNumber: true});
       callFrameContents.stackTrace = stackTrace;
-      await callFrameContents.updateComplete;
     } else {
       // I _think_ this only happens during tests.
       // See "TimelineFlameChartView > shows the details for a selected main thread event".
@@ -2505,10 +2520,16 @@ export class TimelineDetailsContentHelper {
           {runtimeStackTrace, tabStops: true, showColumnNumber: true});
     }
 
-    const stackTraceElement =
-        this.tableElement.createChild('div', 'timeline-details-view-row timeline-details-stack-values');
+    await callFrameContents.updateComplete;
+    if (!callFrameContents.hasContent()) {
+      return null;
+    }
+
+    const stackTraceElement = document.createElement('div');
+    stackTraceElement.classList.add('timeline-details-view-row', 'timeline-details-stack-values');
     callFrameContents.markAsRoot();
     callFrameContents.show(stackTraceElement);
+    return stackTraceElement;
   }
 }
 

package/front_end/ui/legacy/components/utils/JSPresentationUtils.ts

@@ -324,6 +324,11 @@ export class StackTracePreviewContent extends UI.Widget.Widget {
   #links: HTMLElement[] = [];
 
   readonly #table: HTMLElement;
+  /**
+   * Updated when we update to define if we have any rows for the StackTrace;
+   * allowing the caller to know if this element is empty or not.
+   */
+  #hasRows = false;
 
   constructor(element?: HTMLElement, target?: SDK.Target.Target, linkifier?: Linkifier, options?: Options) {
     super(element, {useShadowDom: true});
@@ -353,6 +358,10 @@ export class StackTracePreviewContent extends UI.Widget.Widget {
     this.performUpdate();
   }
 
+  hasContent(): boolean {
+    return this.#hasRows;
+  }
+
   override performUpdate(): void {
     if (!this.#linkifier) {
       return;
@@ -363,6 +372,7 @@ export class StackTracePreviewContent extends UI.Widget.Widget {
     if (this.#stackTrace) {
       const stackTraceRows = buildStackTraceRows(
           this.#stackTrace, this.#target ?? null, this.#linkifier, tabStops, this.#options.showColumnNumber);
+      this.#hasRows = stackTraceRows.length > 0;
       this.#links = renderStackTraceTable(this.#table, this.element, this.#options.expandable ?? false, stackTraceRows);
       return;
     }
@@ -373,6 +383,7 @@ export class StackTracePreviewContent extends UI.Widget.Widget {
     const stackTraceRows = buildStackTraceRowsForLegacyRuntimeStackTrace(
         runtimeStackTrace ?? {callFrames: []}, this.#target ?? null, this.#linkifier, tabStops, updateCallback,
         this.#options.showColumnNumber);
+    this.#hasRows = stackTraceRows.length > 0;
     this.#links = renderStackTraceTable(this.#table, this.element, this.#options.expandable ?? false, stackTraceRows);
   }
 

package/front_end/ui/legacy/treeoutline.css

@@ -115,11 +115,11 @@ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus {
 
 .tree-outline li::before {
   user-select: none;
+  mask-position: left center;
   mask-image: var(--image-file-arrow-collapse);
   background-color: var(--icon-default);
   content: "\A0\A0";
   text-shadow: none;
-  margin-top: calc(-1 * var(--sys-size-2));
   height: var(--sys-size-8);
   width: var(--sys-size-8);
 }

package/package.json

@@ -104,5 +104,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1569477"
+  "version": "1.0.1570343"
 }