chrome-devtools-frontend 1.0.1578486 → 1.0.1579812

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -38,7 +38,6 @@ 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 * as Platform from '../../core/platform/platform.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
@@ -47,7 +46,6 @@ import type * as IssuesManager from '../../models/issues_manager/issues_manager.
 import * as Logs from '../../models/logs/logs.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
-import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
 import * as Highlighting from '../../ui/components/highlighting/highlighting.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
@@ -61,7 +59,6 @@ import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
-import * as Security from '../security/security.js';
 
 import {format, updateStyle} from './ConsoleFormat.js';
 import {ConsoleInsightTeaser} from './ConsoleInsightTeaser.js';
@@ -220,10 +217,6 @@ const UIStrings = {
    * @description Message to offer insights for a console message
    */
   explainThisMessageWithAI: 'Understand this message. Powered by AI',
-  /**
-   * @description Tooltip shown when user hovers over the cookie icon to explain that the button will bring the user to the cookie report
-   */
-  SeeIssueInCookieReport: 'Click to open privacy and security panel and show third-party cookie report',
   /**
    * @description Element text content in Object Properties Section
    */
@@ -574,23 +567,6 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return elements;
   }
 
-  #appendCookieReportButtonToElem(elem: HTMLElement): void {
-    const button = new Buttons.Button.Button();
-    button.data = {
-      size: Buttons.Button.Size.SMALL,
-      variant: Buttons.Button.Variant.ICON,
-      iconName: 'cookie',
-      jslogContext: 'privacy',
-      title: i18nString(UIStrings.SeeIssueInCookieReport)
-    };
-
-    button.addEventListener('click', () => {
-      void Common.Revealer.reveal(new Security.CookieReportView.CookieReportView());
-    });
-
-    elem.appendChild(button);
-  }
-
   #getLinkifierMetric(): Host.UserMetrics.Action|undefined {
     const request = Logs.NetworkLog.NetworkLog.requestForConsoleMessage(this.message);
     if (request?.resourceType().isStyleSheet()) {
@@ -631,14 +607,6 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       return null;
     };
 
-    if (this.message.isCookieReportIssue && Root.Runtime.hostConfig.devToolsPrivacyUI?.enabled) {
-      const anchorWrapperElement = document.createElement('span');
-      anchorWrapperElement.classList.add('console-message-anchor', 'cookie-report-anchor');
-      this.#appendCookieReportButtonToElem(anchorWrapperElement);
-      UI.UIUtils.createTextChild(anchorWrapperElement, ' ');
-      return anchorWrapperElement;
-    }
-
     const anchorElement = linkify(this.message);
     // Append a space to prevent the anchor text from being glued to the console message when the user selects and copies the console messages.
     if (anchorElement) {
@@ -1457,6 +1425,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     this.elementInternal.className = 'console-message-wrapper';
     this.elementInternal.setAttribute('jslog', `${VisualLogging.item('console-message').track({
                                         click: true,
+                                        resize: true,
                                         keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter|Space|Home|End',
                                       })}`);
     this.elementInternal.removeChildren();

package/front_end/panels/console/consoleView.css

@@ -486,11 +486,6 @@
   margin-left: 4px;
 }
 
-.cookie-report-anchor {
-  margin-top: -3px;
-  margin-bottom: -5px;
-}
-
 .console-message-nowrap-below,
 .console-message-nowrap-below div,
 .console-message-nowrap-below span {

package/front_end/panels/elements/AdoptedStyleSheetTreeElement.ts

@@ -11,6 +11,8 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import {PanelUtils} from '../utils/utils.js';
 
+import type {EditorHandles} from './ElementsTreeElement.js';
+
 export class AdoptedStyleSheetTreeElement extends UI.TreeOutline.TreeElement {
   private eventListener: Common.EventTarget.EventDescriptor|null = null;
 
@@ -58,6 +60,8 @@ export class AdoptedStyleSheetTreeElement extends UI.TreeOutline.TreeElement {
 }
 
 export class AdoptedStyleSheetContentsTreeElement extends UI.TreeOutline.TreeElement {
+  private editing: EditorHandles|null = null;
+
   constructor(private readonly styleSheetHeader: SDK.CSSStyleSheetHeader.CSSStyleSheetHeader) {
     super('');
   }
@@ -69,6 +73,9 @@ export class AdoptedStyleSheetContentsTreeElement extends UI.TreeOutline.TreeEle
   }
 
   override onunbind(): void {
+    if (this.editing) {
+      this.editing.cancel();
+    }
     this.styleSheetHeader.cssModel().removeEventListener(
         SDK.CSSModel.Events.StyleSheetChanged, this.onStyleSheetChanged, this);
   }
@@ -91,4 +98,75 @@ export class AdoptedStyleSheetContentsTreeElement extends UI.TreeOutline.TreeEle
       void this.onpopulate();
     }
   }
+
+  override ondblclick(event: Event): boolean {
+    if (this.editing) {
+      return false;
+    }
+    void this.startEditing(event.target as Element);
+    return false;
+  }
+
+  override onenter(): boolean {
+    if (this.editing) {
+      return false;
+    }
+    const target = this.listItemElement.querySelector('.webkit-html-text-node');
+    if (target) {
+      void this.startEditing(target);
+      return true;
+    }
+    return false;
+  }
+
+  private async startEditing(target: Element): Promise<void> {
+    if (this.editing || UI.UIUtils.isBeingEdited(target)) {
+      return;
+    }
+
+    const textNode = target.enclosingNodeOrSelfWithClass('webkit-html-text-node');
+    if (!textNode) {
+      return;
+    }
+
+    const data = await this.styleSheetHeader.requestContentData();
+    textNode.textContent = (TextUtils.ContentData.ContentData.isError(data) || !data.isTextContent) ? '' : data.text;
+
+    const config =
+        new UI.InplaceEditor.Config(this.editingCommitted.bind(this), () => this.editingCancelled(), undefined);
+
+    const editorHandles = UI.InplaceEditor.InplaceEditor.startEditing(textNode, config);
+    if (!editorHandles) {
+      return;
+    }
+
+    this.editing = {
+      commit: editorHandles.commit,
+      cancel: editorHandles.cancel,
+      editor: undefined,
+      resize: () => {},
+    };
+
+    const componentSelection = this.listItemElement.getComponentSelection();
+    componentSelection?.selectAllChildren(textNode);
+  }
+
+  private async editingCommitted(element: Element, newText: string, oldText: string|null): Promise<void> {
+    this.editing = null;
+
+    if (newText !== oldText) {
+      await this.styleSheetHeader.cssModel().setStyleSheetText(this.styleSheetHeader.id, newText, false);
+    }
+
+    this.editingCancelled();
+  }
+
+  private editingCancelled(): void {
+    this.editing = null;
+    void this.onpopulate();
+  }
+
+  isEditing(): boolean {
+    return this.editing !== null;
+  }
 }

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -34,6 +34,7 @@
  */
 
 import '../../ui/components/adorners/adorners.js';
+import '../../ui/components/buttons/buttons.js';
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
@@ -50,7 +51,6 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import type * as Adorners from '../../ui/components/adorners/adorners.js';
-import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
 import * as Highlighting from '../../ui/components/highlighting/highlighting.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
@@ -417,11 +417,20 @@ export interface ViewInput {
   showStartingStyleAdorner: boolean;
   startingStyleAdornerActive: boolean;
   onStartingStyleAdornerClick: (e: Event) => void;
+
+  isHovered: boolean;
+  isSelected: boolean;
+  showAiButton: boolean;
+  aiButtonTitle?: string;
+  onAiButtonClick: (e: Event) => void;
+
+  decorations: Decoration[];
+  descendantDecorations: Decoration[];
+  decorationsTooltip: string;
+  indent: number;
 }
 
 export interface ViewOutput {
-  gutterContainer?: HTMLElement;
-  decorationsElement?: HTMLElement;
   contentElement?: HTMLElement;
 }
 
@@ -443,6 +452,11 @@ export function adornerRef(): DirectiveResult<typeof Lit.Directives.RefDirective
   });
 }
 
+export interface Decoration {
+  title: string;
+  color: string;
+}
+
 function handleAdornerKeydown(cb: (event: Event) => void): (event: KeyboardEvent) => void {
   return (event: KeyboardEvent) => {
     if (event.code === 'Enter' || event.code === 'Space') {
@@ -458,13 +472,27 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
       input.showGridAdorner || input.showGridLanesAdorner || input.showMediaAdorner || input.showPopoverAdorner ||
       input.showTopLayerAdorner || input.showViewSourceAdorner || input.showScrollAdorner ||
       input.showScrollSnapAdorner || input.showSlotAdorner || input.showStartingStyleAdorner;
+  const gutterContainerClasses = {
+    'has-decorations': input.decorations.length || input.descendantDecorations.length,
+    'gutter-container': true,
+  };
   // clang-format off
   render(html`
     <div ${ref(el => { output.contentElement = el as HTMLElement; })}>
       ${input.nodeInfo ? html`<span class="highlight">${input.nodeInfo}</span>` : nothing}
-      <div class="gutter-container" @click=${input.onGutterClick} ${ref(el => { output.gutterContainer = el as HTMLElement; })}>
+      ${input.isHovered || input.isSelected ? html`
+        <div class="selection fill" style=${`margin-left: ${-input.indent}px`}></div>
+      ` : nothing}
+      <div class=${Lit.Directives.classMap(gutterContainerClasses)}
+           style="left: ${-input.indent}px"
+           @click=${input.onGutterClick}>
         <devtools-icon name="dots-horizontal"></devtools-icon>
-        <div class="hidden" ${ref(el => { output.decorationsElement = el as HTMLElement; })}></div>
+        ${input.decorations.length || input.descendantDecorations.length ? html`
+        <div class="elements-gutter-decoration-container"
+             title=${input.decorationsTooltip}>
+             ${input.decorations.map(d => html`<div class="elements-gutter-decoration" style="--decoration-color: ${d.color}"></div>`)}
+             ${input.descendantDecorations.map(d => html`<div class="elements-gutter-decoration elements-has-decorated-children" style="--decoration-color: ${d.color}"></div>`)}
+        </div>` : nothing}
       </div>
       ${hasAdorners ? html`<div class="adorner-container ${!hasAdorners ? 'hidden' : ''}">
         ${input.showAdAdorner ? html`<devtools-adorner
@@ -630,6 +658,20 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           <span>${ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL_SNAP}</span>
         </devtools-adorner>` : nothing}
       </div>`: nothing}
+      ${input.isSelected ? html`
+        <span class="selected-hint" title=${i18nString(UIStrings.useSInTheConsoleToReferToThis, {PH1: '$0'})} aria-hidden="true"></span>
+      ` : nothing}
+      ${input.showAiButton ? html`
+        <span class="ai-button-container">
+          <devtools-floating-button
+            icon-name=${AIAssistance.AiUtils.getIconName()}
+            title=${input.aiButtonTitle || ''}
+            jslogcontext="ask-ai"
+            @click=${input.onAiButtonClick}
+            @mousedown=${(e: Event) => e.stopPropagation()}>
+          </devtools-floating-button>
+        </span>
+      ` : nothing}
     </div>
   `, target);
   // clang-format on
@@ -640,8 +682,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   override treeOutline: ElementsTreeOutline|null;
 
   // Handled by the view output for now.
-  gutterContainer!: HTMLElement;
-  decorationsElement!: HTMLElement;
   contentElement!: HTMLElement;
 
   private searchQuery: string|null;
@@ -652,9 +692,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   private editing: EditorHandles|null;
   private htmlEditElement?: HTMLElement;
   expandAllButtonElement: UI.TreeOutline.TreeElement|null;
-  selectionElement?: HTMLDivElement;
-  private hintElement?: HTMLElement;
-  private aiButtonContainer?: HTMLElement;
   #elementIssues = new Map<string, IssuesManager.Issue.Issue>();
   #nodeElementToIssue = new Map<Element, IssuesManager.Issue.Issue[]>();
   #highlights: Range[] = [];
@@ -672,6 +709,10 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   #startingStyleAdornerActive = false;
   #layout: SDK.CSSModel.LayoutProperties|null = null;
 
+  #decorations: Decoration[] = [];
+  #descendantDecorations: Decoration[] = [];
+  #decorationsTooltip = '';
+
   constructor(node: SDK.DOMModel.DOMNode, isClosingTag?: boolean) {
     // The title will be updated in onattach.
     super();
@@ -680,6 +721,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,
         })}`);
@@ -797,6 +839,10 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           showScrollAdorner: ((this.node().nodeName() === 'HTML' && this.node().ownerDocument?.isScrollable()) ||
                               (this.node().nodeName() !== '#document' && this.node().isScrollable())) &&
               !this.isClosingTag(),
+          decorations: this.#decorations,
+          descendantDecorations: this.expanded ? [] : this.#descendantDecorations,
+          decorationsTooltip: this.#decorationsTooltip,
+          indent: this.computeLeftIndent(),
           showScrollSnapAdorner: Boolean(this.#layout?.hasScroll) && !this.isClosingTag(),
           scrollSnapAdornerActive: this.#scrollSnapAdornerActive,
           showSlotAdorner: Boolean(this.nodeInternal.assignedSlot) && !this.isClosingTag(),
@@ -827,6 +873,21 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
             }
             this.treeOutline.revealInTopLayer(this.node());
           },
+          isHovered: this.#hovered,
+          isSelected: this.selected,
+          showAiButton: Boolean(this.#hovered || this.selected) && this.node().nodeType() === Node.ELEMENT_NODE &&
+              UI.ActionRegistry.ActionRegistry.instance().hasAction('freestyler.elements-floating-button'),
+          aiButtonTitle: UI.ActionRegistry.ActionRegistry.instance().hasAction('freestyler.elements-floating-button') ?
+              UI.ActionRegistry.ActionRegistry.instance().getAction('freestyler.elements-floating-button').title() :
+              undefined,
+          onAiButtonClick: (ev: Event) => {
+            ev.stopPropagation();
+            this.select(true, false);
+            const action = UI.ActionRegistry.ActionRegistry.instance().getAction('freestyler.elements-floating-button');
+            if (action) {
+              void action.execute();
+            }
+          },
         },
         this, this.listItemElement);
   }
@@ -962,22 +1023,15 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
 
-    if (isHovered && !this.aiButtonContainer) {
-      this.createAiButton();
-    } else if (!isHovered && this.aiButtonContainer) {
-      this.aiButtonContainer.remove();
-      delete this.aiButtonContainer;
-    }
-
     this.#hovered = isHovered;
 
     if (this.listItemElement) {
       if (isHovered) {
-        this.createSelection();
         this.listItemElement.classList.add('hovered');
       } else {
         this.listItemElement.classList.remove('hovered');
       }
+      this.performUpdate();
     }
   }
 
@@ -1043,54 +1097,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.#expandedChildrenLimit = expandedChildrenLimit;
   }
 
-  private createSelection(): void {
-    const contentElement = this.contentElement;
-    if (!contentElement) {
-      return;
-    }
-
-    if (!this.selectionElement) {
-      this.selectionElement = document.createElement('div');
-      this.selectionElement.className = 'selection fill';
-      this.selectionElement.style.setProperty('margin-left', (-this.computeLeftIndent()) + 'px');
-      contentElement.prepend(this.selectionElement);
-    }
-  }
-
-  private createHint(): void {
-    if (this.contentElement && !this.hintElement) {
-      this.hintElement = this.contentElement.createChild('span', 'selected-hint');
-      const selectedElementCommand = '$0';
-      UI.Tooltip.Tooltip.install(
-          this.hintElement, i18nString(UIStrings.useSInTheConsoleToReferToThis, {PH1: selectedElementCommand}));
-      UI.ARIAUtils.setHidden(this.hintElement, true);
-    }
-  }
-
-  private createAiButton(): void {
-    const isElementNode = this.node().nodeType() === Node.ELEMENT_NODE;
-    if (!isElementNode ||
-        !UI.ActionRegistry.ActionRegistry.instance().hasAction('freestyler.elements-floating-button')) {
-      return;
-    }
-
-    const action = UI.ActionRegistry.ActionRegistry.instance().getAction('freestyler.elements-floating-button');
-    if (this.contentElement && !this.aiButtonContainer) {
-      this.aiButtonContainer = this.contentElement.createChild('span', 'ai-button-container');
-      const floatingButton =
-          Buttons.FloatingButton.create(AIAssistance.AiUtils.getIconName(), action.title(), 'ask-ai');
-      floatingButton.addEventListener('click', ev => {
-        ev.stopPropagation();
-        this.select(true, false);
-        void action.execute();
-      }, {capture: true});
-      floatingButton.addEventListener('mousedown', ev => {
-        ev.stopPropagation();
-      }, {capture: true});
-      this.aiButtonContainer.appendChild(floatingButton);
-    }
-  }
-
   override onbind(): void {
     this.performUpdate();
     if (this.treeOutline && !this.isClosingTag()) {
@@ -1156,6 +1162,14 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           onPopoverAdornerClick: () => {},
           onScrollSnapAdornerClick: () => {},
           onTopLayerAdornerClick: () => {},
+          isHovered: false,
+          isSelected: false,
+          showAiButton: false,
+          onAiButtonClick: () => {},
+          decorations: [],
+          descendantDecorations: [],
+          decorationsTooltip: '',
+          indent: 0,
         },
         this, this.listItemElement);
 
@@ -1219,8 +1233,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
 
   override onattach(): void {
     if (this.#hovered) {
-      this.createSelection();
       this.listItemElement.classList.add('hovered');
+      this.performUpdate();
     }
 
     this.updateTitle();
@@ -1278,8 +1292,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       this.nodeInternal.highlight();
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.ChangeInspectedNodeInElementsPanel);
     }
-    this.createSelection();
-    this.createHint();
+    this.performUpdate();
     this.treeOutline.suppressRevealAndSelect = false;
     return true;
   }
@@ -2252,10 +2265,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     // fixme: make it clear that `this.title = x` is a setter with significant side effects
     this.title = this.contentElement;
     this.updateDecorations();
-    if (this.selected) {
-      this.createSelection();
-      this.createHint();
-    }
 
     // If there is an issue with this node, make sure to update it.
     for (const issue of this.#elementIssues.values()) {
@@ -2278,10 +2287,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   updateDecorations(): void {
-    const indent = this.computeLeftIndent();
-    this.gutterContainer.style.left = (-indent) + 'px';
-    this.listItemElement.style.setProperty('--indent', indent + 'px');
-
     if (this.isClosingTag()) {
       return;
     }
@@ -2339,60 +2344,27 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     return Promise.all(promises).then(updateDecorationsUI.bind(this));
 
     function updateDecorationsUI(this: ElementsTreeElement): void {
-      this.decorationsElement.removeChildren();
-      this.decorationsElement.classList.add('hidden');
-      this.gutterContainer.classList.toggle(
-          'has-decorations', Boolean(decorations.length || descendantDecorations.length));
-      UI.ARIAUtils.setLabel(this.decorationsElement, '');
+      this.#decorations = decorations;
+      this.#descendantDecorations = descendantDecorations;
 
       if (!decorations.length && !descendantDecorations.length) {
+        this.#decorationsTooltip = '';
+        this.performUpdate();
         return;
       }
 
-      const colors = new Set<string>();
-      const titles = document.createElement('div');
-
+      const tooltip: string[] = [];
       for (const decoration of decorations) {
-        const titleElement = titles.createChild('div');
-        titleElement.textContent = decoration.title;
-        colors.add(decoration.color);
+        tooltip.push(decoration.title);
       }
-      if (this.expanded && !decorations.length) {
-        return;
-      }
-
-      const descendantColors = new Set<string>();
-      if (descendantDecorations.length) {
-        let element = titles.createChild('div');
-        element.textContent = i18nString(UIStrings.children);
+      if (!this.expanded && descendantDecorations.length) {
+        tooltip.push(i18nString(UIStrings.children));
         for (const decoration of descendantDecorations) {
-          element = titles.createChild('div');
-          element.style.marginLeft = '15px';
-          element.textContent = decoration.title;
-          descendantColors.add(decoration.color);
-        }
-      }
-
-      let offset = 0;
-      processColors.call(this, colors, 'elements-gutter-decoration');
-      if (!this.expanded) {
-        processColors.call(this, descendantColors, 'elements-gutter-decoration elements-has-decorated-children');
-      }
-      UI.Tooltip.Tooltip.install(this.decorationsElement, titles.textContent);
-      UI.ARIAUtils.setLabel(this.decorationsElement, titles.textContent || '');
-
-      function processColors(this: ElementsTreeElement, colors: Set<string>, className: string): void {
-        for (const color of colors) {
-          const child = this.decorationsElement.createChild('div', className);
-          this.decorationsElement.classList.remove('hidden');
-          child.style.backgroundColor = color;
-          child.style.borderColor = color;
-          if (offset) {
-            child.style.marginLeft = offset + 'px';
-          }
-          offset += 3;
+          tooltip.push(decoration.title);
         }
       }
+      this.#decorationsTooltip = tooltip.join('\n');
+      this.performUpdate();
     }
   }
 

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -83,6 +83,7 @@ const elementsTreeOutlineByDOMModel = new WeakMap<SDK.DOMModel.DOMModel, Element
 const populatedTreeElements = new WeakSet<ElementsTreeElement>();
 
 export type View = typeof DEFAULT_VIEW;
+export {elementsTreeOutlineStyles};
 
 interface ViewInput {
   omitRootDOMNode: boolean;

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/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/elements.ts

@@ -8,6 +8,7 @@ import './ComputedStyleModel.js';
 import './DOMPath.js';
 import './ElementsSidebarPane.js';
 import './ElementsTreeElement.js';
+import './AdoptedStyleSheetTreeElement.js';
 import './TopLayerContainer.js';
 import './ElementsTreeOutline.js';
 import './EventListenersWidget.js';
@@ -30,6 +31,7 @@ import './AccessibilityTreeView.js';
 
 import * as AccessibilityTreeUtils from './AccessibilityTreeUtils.js';
 import * as AccessibilityTreeView from './AccessibilityTreeView.js';
+import * as AdoptedStyleSheetTreeElement from './AdoptedStyleSheetTreeElement.js';
 import * as ClassesPaneWidget from './ClassesPaneWidget.js';
 import * as ColorSwatchPopoverIcon from './ColorSwatchPopoverIcon.js';
 import * as ComputedStyleModel from './ComputedStyleModel.js';
@@ -65,6 +67,7 @@ import * as WebCustomData from './WebCustomData.js';
 export {
   AccessibilityTreeUtils,
   AccessibilityTreeView,
+  AdoptedStyleSheetTreeElement,
   ClassesPaneWidget,
   ColorSwatchPopoverIcon,
   ComputedStyleModel,