chrome-devtools-frontend 1.0.1697998 → 1.0.1698733

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -354,6 +354,7 @@ export interface ViewInput {
   descendantDecorations: Decoration[];
   decorationsTooltip: string;
   indent: number;
+  renderSelection?: boolean;
 
   editorState: CodeMirror.EditorState|null;
   editorWidth: number|null;
@@ -906,7 +907,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
     input.onExpand,
     input.issues,
   )}</span>` : nothing}
-      <div class="selection fill ${input.editorState ? 'hidden' : ''}" style=${`margin-left: ${-input.indent}px`}></div>
+      ${input.renderSelection !== false ? html`<div class="selection fill ${input.editorState ? 'hidden' : ''}" style=${`margin-left: ${-input.indent}px`}></div>` : nothing}
       <div class=${classMap(gutterContainerClasses)}
            style="left: ${-input.indent}px"
            @click=${input.onGutterClick}>
@@ -1171,6 +1172,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
   isXMLMimeType = false;
   disableEdits = false;
   showAIButton = false;
+  renderSelection = true;
   isDOMNodeSelected = false;
   initialEdit?: InitialEditState|null;
   onInitialEditCompleted?: () => void;
@@ -1584,6 +1586,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       descendantDecorations: this.#expanded ? [] : this.#descendantDecorations,
       decorationsTooltip: this.#decorationsTooltip,
       indent: this.#getLeftIndent(),
+      renderSelection: this.renderSelection,
       showScrollSnapAdorner: Boolean(this.#layout?.hasScroll) && !isClosingTag,
       scrollSnapAdornerActive: this.#scrollSnapAdornerActive,
       showSlotAdorner: Boolean(this.node.assignedSlot) && !isClosingTag,

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -150,7 +150,7 @@ interface ViewInput {
   onClearMaxRows?: () => void;
   onHoverNode?: (node: SDK.DOMModel.DOMNode|null, showInfo?: boolean, isClosingTag?: boolean) => void;
   onLeave?: () => void;
-  onToggleHideElement?: (node: SDK.DOMModel.DOMNode) => void;
+  onToggleHideElement?: (node: SDK.DOMModel.DOMNode) => Promise<void>;
   onKeyDown?: (event: KeyboardEvent) => void;
   isToggledToHidden?: (node: SDK.DOMModel.DOMNode) => boolean;
   onDuplicateNode?: (node: SDK.DOMModel.DOMNode) => void;
@@ -523,6 +523,13 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
   }
 
   const on = Lit.Directive.directive(Lit.CustomDirectives.InterceptBindingDirective);
+  const treeItemJslog = (context?: string, drag?: boolean): ReturnType<typeof VisualLogging.treeItem> =>
+      VisualLogging.treeItem(context).parent('elementsTreeOutline').track({
+        keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Backspace|Delete|Enter|Space|Home|End',
+        resize: true,
+        ...(drag ? {drag: true} : {}),
+        click: true,
+      });
 
   const renderShortcut = (shortcut: SDK.DOMModel.DOMNodeShortcut, shortcutDepth: number): Lit.LitTemplate => {
     const hasShortcutChildren = shortcut.childShortcuts.length > 0;
@@ -558,12 +565,11 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
           ?open=${isShortcutExpanded}
           class="elements-tree-shortcut"
           style=${styleMap({'--indent': `${computeLeftIndent(shortcutDepth, hasShortcutChildren)}px`})}
-          @select=${onShortcutSelect}
-          @expand=${onShortcutExpand}
+          @select=${on(onShortcutSelect)}
+          @expand=${on(onShortcutExpand)}
           @mousemove=${on(onShortcutMouseMove)}
           @mouseleave=${on(onShortcutMouseLeave)}
-          jslog=${VisualLogging.treeItem().parent('elementsTreeOutline')}>
-        <div class="selection fill"></div>
+          jslog=${treeItemJslog()}>
         <span class="elements-tree-shortcut-title">\u21AA ${title}</span>
         <devtools-adorner
             .name=${ElementsComponents.AdornerManager.RegisteredAdorners.REVEAL}
@@ -583,9 +589,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
         </devtools-adorner>
         ${hasShortcutChildren ? html`
           <ul role="group">
-            ${UI.TreeOutline.ifExpanded(html`
-              ${shortcut.childShortcuts.map(child => renderShortcut(child, shortcutDepth + 1))}
-            `)}
+            ${shortcut.childShortcuts.map(child => renderShortcut(child, shortcutDepth + 1))}
           </ul>
         ` : nothing}
       </li>
@@ -613,15 +617,12 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
               ?open=${isTopLayerExpanded}
               class="elements-tree-top-layer-container"
               style=${styleMap({'--indent': `${computeLeftIndent(containerDepth, true)}px`})}
-              @select=${onTopLayerSelect}
-              @expand=${onTopLayerExpand}
-              jslog=${VisualLogging.treeItem().parent('elementsTreeOutline')}>
-            <div class="selection fill"></div>
+              @select=${on(onTopLayerSelect)}
+              @expand=${on(onTopLayerExpand)}
+              jslog=${treeItemJslog()}>
             <span class="elements-tree-shortcut-title">#top-layer</span>
             <ul role="group">
-              ${UI.TreeOutline.ifExpanded(html`
-                ${shortcuts.map(sc => renderShortcut(sc, containerDepth + 1))}
-              `)}
+              ${shortcuts.map(sc => renderShortcut(sc, containerDepth + 1))}
             </ul>
           </li>
         `;
@@ -647,10 +648,9 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
           ?open=${isExpanded}
           class="elements-tree-adopted-style-sheet"
           style=${styleMap({'--indent': `${computeLeftIndent(depth, true)}px`})}
-          @select=${onSelect}
-          @expand=${onExpand}
-          jslog=${VisualLogging.treeItem('adopted-style-sheet').parent('elementsTreeOutline')}>
-        <div class="selection fill"></div>
+          @select=${on(onSelect)}
+          @expand=${on(onExpand)}
+          jslog=${treeItemJslog('adopted-style-sheet')}>
         <span class="elements-tree-shortcut-title">#adopted-style-sheet${linkText ? html` (${UIComponentUtils.Linkifier.Linkifier.linkifyURL(linkText, {
           text: linkText,
           preventClick: true,
@@ -662,8 +662,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
               <li role="treeitem"
                   class="elements-tree-adopted-style-sheet-contents"
                   style=${styleMap({'--indent': `${computeLeftIndent(depth + 1, false)}px`})}
-                  jslog=${VisualLogging.treeItem('adopted-style-sheet-contents').parent('elementsTreeOutline')}>
-                <div class="selection fill"></div>
+                  jslog=${treeItemJslog('adopted-style-sheet-contents')}>
                 ${UI.Widget.widget(AdoptedStyleSheetContentsWidget, {styleSheetHeader: header})}
               </li>
             ` : nothing}
@@ -693,10 +692,9 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
           ?open=${isExpanded}
           class="elements-tree-adopted-style-sheets"
           style=${styleMap({'--indent': `${computeLeftIndent(depth, true)}px`})}
-          @select=${onSelect}
-          @expand=${onExpand}
-          jslog=${VisualLogging.treeItem('adopted-style-sheets').parent('elementsTreeOutline')}>
-        <div class="selection fill"></div>
+          @select=${on(onSelect)}
+          @expand=${on(onExpand)}
+          jslog=${treeItemJslog('adopted-style-sheets')}>
         <span class="elements-tree-shortcut-title">#adopted-style-sheets</span>
         <ul role="group">
           ${UI.TreeOutline.ifExpanded(html`
@@ -811,7 +809,8 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
   };
 
   const renderNode = (node: SDK.DOMModel.DOMNode, depth = 0): Lit.LitTemplate => {
-    const isSelected = input.selectedNode === node;
+    const isDOMNodeSelected = input.selectedNode === node;
+    const isSelected = Boolean(input.selectEnabled) && isDOMNodeSelected;
     const isOpeningHovered =
         (input.currentHighlightedNode === node) || (input.hoveredNode === node && !input.hoveredClosingTag);
     const isClosingHovered = input.hoveredNode === node && Boolean(input.hoveredClosingTag);
@@ -923,7 +922,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
           ?selected=${isSelected && !input.selectedClosingTag}
           class=${classes}
           style=${styleMap({'--indent': `${computeLeftIndent(depth, isExpandable)}px`})}
-          ?open=${isExpanded && !isEditingAsHTML}
+          ?open=${hasChildren && isExpanded && !isEditingAsHTML}
           draggable=${isDraggable ? 'true' : 'false'}
           @select=${on((event: UI.TreeOutline.TreeViewElement.SelectEvent) => onSelect(false, Boolean(event.detail?.selectedByUser)))}
           @expand=${on(onExpand)}
@@ -934,19 +933,15 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
           @dragleave=${on(onDragLeave)}
           @drop=${on(onDrop)}
           @dragend=${on(onDragEnd)}
-          jslog=${VisualLogging.treeItem().parent('elementsTreeOutline').track({
-            keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Backspace|Delete|Enter|Space|Home|End',
-            resize: true,
-            drag: true,
-            click: true,
-          })}>
+          jslog=${treeItemJslog(undefined, true)}>
         ${UI.Widget.widget(ElementsTreeWidget, {
           node,
           isClosingTag: false,
+          renderSelection: false,
           expanded: isExpanded && !isEditingAsHTML,
           isExpandable: hasChildren,
           selected: isSelected && !input.selectedClosingTag,
-          isDOMNodeSelected: isSelected,
+          isDOMNodeSelected,
           hovered: isOpeningHovered,
           searchQuery: input.searchMatchNode === node ? (input.searchMatchQuery ?? null) : null,
           inClipboard: input.isNodeInClipboard?.(node) ?? false,
@@ -972,8 +967,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
             input.onSelectNodeAfterEdit?.(wasExpanded, error, newNode, moveDirection);
           },
           toggleHideElement: (n: SDK.DOMModel.DOMNode) => {
-            input.onToggleHideElement?.(n);
-            return Promise.resolve();
+            return input.onToggleHideElement?.(n) ?? Promise.resolve();
           },
           isToggledToHidden: (n: SDK.DOMModel.DOMNode) => input.isToggledToHidden?.(n) ?? false,
           showContextMenu: (event: Event) => {
@@ -992,7 +986,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
                 <li role="treeitem"
                     class="elements-tree-expand-all"
                     style=${styleMap({'--indent': `${computeLeftIndent(depth + 1, false)}px`})}
-                    jslog=${VisualLogging.treeItem('show-all-nodes').parent('elementsTreeOutline')}>
+                    jslog=${treeItemJslog('show-all-nodes')}>
                   <devtools-button
                       .variant=${Buttons.Button.Variant.OUTLINED}
                       title=${i18nString(UIStrings.showAllNodesDMore, {PH1: remainingChildrenCount})}
@@ -1016,7 +1010,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
                     })}
                     style=${styleMap({'--indent': `${computeLeftIndent(depth + 1, false)}px`})}
                     draggable=${isDraggable ? 'true' : 'false'}
-                    jslog=${VisualLogging.treeItem().parent('elementsTreeOutline')}
+                    jslog=${treeItemJslog(undefined, true)}
                     @select=${on((event: UI.TreeOutline.TreeViewElement.SelectEvent) => onSelect(true, Boolean(event.detail?.selectedByUser)))}
                     @contextmenu=${on(onContextMenu)}
                     @mousemove=${on(onClosingMouseMove)}
@@ -1028,10 +1022,11 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
                   ${UI.Widget.widget(ElementsTreeWidget, {
                     node,
                     isClosingTag: true,
+                    renderSelection: false,
                     expanded: false,
                     isExpandable: false,
                     selected: isSelected && Boolean(input.selectedClosingTag),
-                    isDOMNodeSelected: isSelected,
+                    isDOMNodeSelected,
                     hovered: isClosingHovered,
                     computeLeftIndent: computeLeftIndent(depth + 1, false),
                     disableEdits: input.disableEdits ?? false,
@@ -1103,7 +1098,7 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
                 <li role="treeitem"
                     class="elements-tree-expand-all"
                     style=${styleMap({'--indent': `${computeLeftIndent(0, false)}px`})}
-                    jslog=${VisualLogging.treeItem('show-all-nodes').parent('elementsTreeOutline')}>
+                    jslog=${treeItemJslog('show-all-nodes')}>
                   <devtools-button
                     .variant=${Buttons.Button.Variant.OUTLINED}
                     title=${i18nString(UIStrings.showAllNodesDMore, {PH1: remaining})}
@@ -1728,6 +1723,12 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       }
       return;
     }
+    if (isClosingTag && node) {
+      const rootTreeElement = this.#viewOutput?.elementsTreeOutline?.findTreeElement(node);
+      const closingTreeElement = rootTreeElement?.childAt(rootTreeElement.childCount() - 1);
+      closingTreeElement?.select(!focus, true);
+      return;
+    }
     this.#viewOutput?.elementsTreeOutline?.selectDOMNode(node, focus);
   }
 
@@ -1826,16 +1827,19 @@ export class DOMTreeWidget extends UI.Widget.Widget {
 
   async expandRecursively(node: SDK.DOMModel.DOMNode, maxDepth: number = Number.MAX_VALUE): Promise<void> {
     if (this.#view === DECLARATIVE_VIEW) {
-      await node.getSubtree(100, true);
       const expand = async(n: SDK.DOMModel.DOMNode, depth: number): Promise<void> => {
         if (depth > maxDepth) {
           return;
         }
-        this.#expandedNodes.add(n);
-        if (!n.children() && (n.childNodeCount() || n.isIframe() || n.nodeType() === Node.DOCUMENT_NODE)) {
-          await new Promise<void>(resolve => {
-            void n.getChildNodes(() => resolve());
-          });
+        if (n.childDocumentPromiseForTesting) {
+          await n.childDocumentPromiseForTesting;
+        }
+        if (!n.children() && !n.contentDocument() &&
+            (n === node || n.childNodeCount() || n.isIframe() || n.nodeType() === Node.DOCUMENT_NODE)) {
+          await n.getSubtree(100, true);
+        }
+        if (nodeHasVisibleChildren(n, this.rootDOMNode, this.maxTreeDepth, this.omitRootDOMNode)) {
+          this.#expandedNodes.add(n);
         }
         const visibleChildren = getVisibleChildren(n, this.#showComments);
         if (visibleChildren.length) {
@@ -1957,7 +1961,10 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     if (this.#view === DECLARATIVE_VIEW) {
       this.performUpdate();
     } else {
-      const treeElement = node ? this.treeElementForNode(node) : null;
+      let treeElement = node ? this.treeElementForNode(node) : null;
+      if (isClosingTag && treeElement) {
+        treeElement = treeElement.childAt(treeElement.childCount() - 1) as ElementsTreeElement | null;
+      }
       this.#viewOutput.elementsTreeOutline?.setHoverEffect(treeElement);
     }
   }
@@ -2093,7 +2100,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
         void this.showContextMenu(node, event);
       },
       onToggleHideElement: (node: SDK.DOMModel.DOMNode) => {
-        this.toggleHideElement(node);
+        return this.toggleHideElement(node);
       },
       onKeyDown: (event: KeyboardEvent) => {
         this.onKeyDown(event);
@@ -2332,11 +2339,11 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     }
   }
 
-  toggleHideElement(node: SDK.DOMModel.DOMNode): void {
+  async toggleHideElement(node: SDK.DOMModel.DOMNode): Promise<void> {
     const changeTracker = this.changeTracker;
     Elements.DOMChanges.trackVisibilityToggle(changeTracker, node, buildChangeSelector(changeTracker, node),
                                               !this.isToggledToHidden(node));
-    void node.toggleHideElement();
+    await node.toggleHideElement();
   }
 
   async removeNode(node: SDK.DOMModel.DOMNode): Promise<void> {
@@ -2850,7 +2857,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     }
 
     if (event.key === 'h' || event.key === 'H') {
-      this.toggleHideElement(node);
+      void this.toggleHideElement(node);
       event.consume(true);
       return true;
     }

package/front_end/panels/elements/PropertiesWidget.ts

@@ -40,7 +40,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {Directives, html, nothing, render} from '../../ui/lit/lit.js';
+import {html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import propertiesWidgetStyles from './propertiesWidget.css.js';
@@ -48,7 +48,7 @@ import propertiesWidgetStyles from './propertiesWidget.css.js';
 const OBJECT_GROUP_NAME = 'properties-sidebar-pane';
 
 const {bindToSetting} = UI.UIUtils;
-const {repeat} = Directives;
+const {widget, widgetRef} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -104,14 +104,14 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         <div class="gray-info-message">${i18nString(UIStrings.noMatchingProperty)}</div>
       ` : nothing}
       <devtools-tree show-selection-on-keyboard-focus @treeelementexpand=${onExpand} .template=${html`
-        <ul role=tree class="source-code object-properties-section">
-          <style>${ObjectUI.ObjectPropertiesSection.objectValueStyles}</style>;
-          <style>${ObjectUI.ObjectPropertiesSection.objectPropertiesSectionStyles}</style>;
-          ${repeat(ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement.createPropertyNodes(
-                        input.objectTree?.children ?? {},
-                        true /* skipProto */,
-                        true /* skipGettersAndSetters */),
-                   node => html`<devtools-tree-wrapper .treeElement=${node}></devtools-tree-wrapper>`)}
+        <style>${ObjectUI.ObjectPropertiesSection.objectValueStyles}</style>
+        <style>${ObjectUI.ObjectPropertiesSection.objectPropertiesSectionStyles}</style>
+        <ul role=tree open class="source-code object-properties-section" ${
+            widget(ObjectUI.ObjectPropertiesSection.ObjectTreeWidget, {
+              objectTree: input.objectTree ?? undefined,
+              skipProto: true,
+              skipGettersAndSetters: true,
+            })} ${widgetRef(ObjectUI.ObjectPropertiesSection.ObjectTreeWidget, () => {})}>
         </ul>
       `}></devtools-tree>
     </div>`, target);
@@ -223,6 +223,7 @@ export class PropertiesWidget extends UI.Widget.VBox {
       propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
       readOnly: true,
     });
+    this.#objectTree.expanded = true;
     this.#updateFilter();
   }
 

package/front_end/panels/elements/PropertyRenderer.ts

@@ -348,14 +348,16 @@ export class TracingContext {
   }
 }
 
+export const CSSControlMap: MapConstructor = Map;
+export type CSSControlMap = Map<string, HTMLElement[]>;
+
 export class RenderingContext {
   constructor(readonly ast: SDK.CSSPropertyParser.SyntaxTree, readonly property: SDK.CSSProperty.CSSProperty|null,
               readonly renderers: Map<Platform.Constructor.Constructor<SDK.CSSPropertyParser.Match>,
                                       MatchRenderer<SDK.CSSPropertyParser.Match>>,
               readonly matchedResult: SDK.CSSPropertyParser.BottomUpTreeMatching,
-              readonly cssControls?: SDK.CSSPropertyParser.CSSControlMap|undefined,
-              readonly options: {readonly?: boolean} = {}, readonly tracing?: TracingContext|undefined,
-              readonly signal?: AbortSignal|undefined) {
+              readonly cssControls?: CSSControlMap|undefined, readonly options: {readonly?: boolean} = {},
+              readonly tracing?: TracingContext|undefined, readonly signal?: AbortSignal|undefined) {
   }
 
   addControl(cssType: string, control: HTMLElement): void {
@@ -406,11 +408,10 @@ export class Renderer extends SDK.CSSPropertyParser.TreeWalker {
   constructor(
       ast: SDK.CSSPropertyParser.SyntaxTree,
       property: SDK.CSSProperty.CSSProperty|null,
-      renderers:
-          Map<Platform.Constructor.Constructor<SDK.CSSPropertyParser.Match>,
-              MatchRenderer<SDK.CSSPropertyParser.Match>>,
+      renderers: Map<Platform.Constructor.Constructor<SDK.CSSPropertyParser.Match>,
+                     MatchRenderer<SDK.CSSPropertyParser.Match>>,
       matchedResult: SDK.CSSPropertyParser.BottomUpTreeMatching,
-      cssControls: SDK.CSSPropertyParser.CSSControlMap,
+      cssControls: CSSControlMap,
       options: {
         readonly?: boolean,
       },
@@ -423,12 +424,12 @@ export class Renderer extends SDK.CSSPropertyParser.TreeWalker {
         new RenderingContext(this.ast, property, renderers, this.#matchedResult, cssControls, options, tracing, signal);
   }
 
-  static render(nodeOrNodes: CodeMirror.SyntaxNode|CodeMirror.SyntaxNode[], context: RenderingContext):
-      {nodes: Node[], cssControls: SDK.CSSPropertyParser.CSSControlMap} {
+  static render(nodeOrNodes: CodeMirror.SyntaxNode|CodeMirror.SyntaxNode[],
+                context: RenderingContext): {nodes: Node[], cssControls: CSSControlMap} {
     if (!Array.isArray(nodeOrNodes)) {
       return this.render([nodeOrNodes], context);
     }
-    const cssControls = new SDK.CSSPropertyParser.CSSControlMap();
+    const cssControls = new CSSControlMap();
     const renderers = nodeOrNodes.map(
         node => this.walkExcludingSuccessors(
             context.ast.subtree(node), context.property, context.renderers, context.matchedResult, cssControls,
@@ -437,9 +438,8 @@ export class Renderer extends SDK.CSSPropertyParser.TreeWalker {
     return {nodes, cssControls};
   }
 
-  static renderInto(
-      nodeOrNodes: CodeMirror.SyntaxNode|CodeMirror.SyntaxNode[], context: RenderingContext,
-      parent: Node): {nodes: Node[], cssControls: SDK.CSSPropertyParser.CSSControlMap} {
+  static renderInto(nodeOrNodes: CodeMirror.SyntaxNode|CodeMirror.SyntaxNode[], context: RenderingContext,
+                    parent: Node): {nodes: Node[], cssControls: CSSControlMap} {
     const {nodes, cssControls} = this.render(nodeOrNodes, context);
     if (parent.lastChild && SDK.CSSPropertyParser.requiresSpace([parent.lastChild], nodes)) {
       parent.appendChild(document.createTextNode(' '));
@@ -456,8 +456,14 @@ export class Renderer extends SDK.CSSPropertyParser.TreeWalker {
     const renderer = match &&
         this.#context.renderers.get(match.constructor as Platform.Constructor.Constructor<SDK.CSSPropertyParser.Match>);
     if (renderer || match instanceof SDK.CSSPropertyParserMatchers.TextMatch) {
-      const output = renderer ? renderer.render(match, this.#context) :
-                                (match as SDK.CSSPropertyParserMatchers.TextMatch).render();
+      let output: Node[];
+      if (renderer) {
+        output = renderer.render(match, this.#context);
+      } else {
+        const span = document.createElement('span');
+        span.appendChild(document.createTextNode(match.text));
+        output = [span];
+      }
       this.#context.tracing?.highlighting.addMatch(match, output);
       this.renderedMatchForTest(output, match);
       this.#output = mergeWithSpacing(this.#output, output);
@@ -490,11 +496,10 @@ export class Renderer extends SDK.CSSPropertyParser.TreeWalker {
   //
   // More general, longer matches take precedence over shorter, more specific matches. Whitespaces are normalized, for
   // unmatched text and around rendered matching results.
-  static renderValueElement(
-      property: SDK.CSSProperty.CSSProperty|{name: string, value: string},
-      matchedResult: SDK.CSSPropertyParser.BottomUpTreeMatching|null,
-      renderers: Array<MatchRenderer<SDK.CSSPropertyParser.Match>>, tracing?: TracingContext,
-      signal?: AbortSignal): {valueElement: HTMLElement, cssControls: SDK.CSSPropertyParser.CSSControlMap} {
+  static renderValueElement(property: SDK.CSSProperty.CSSProperty|{name: string, value: string},
+                            matchedResult: SDK.CSSPropertyParser.BottomUpTreeMatching|null,
+                            renderers: Array<MatchRenderer<SDK.CSSPropertyParser.Match>>, tracing?: TracingContext,
+                            signal?: AbortSignal): {valueElement: HTMLElement, cssControls: CSSControlMap} {
     const valueElement = document.createElement('span');
     valueElement.setAttribute(
         'jslog', `${VisualLogging.value().track({
@@ -510,11 +515,10 @@ export class Renderer extends SDK.CSSPropertyParser.TreeWalker {
     return {valueElement, cssControls};
   }
 
-  static renderValueNodes(
-      property: SDK.CSSProperty.CSSProperty|{name: string, value: string},
-      matchedResult: SDK.CSSPropertyParser.BottomUpTreeMatching|null,
-      renderers: Array<MatchRenderer<SDK.CSSPropertyParser.Match>>, tracing?: TracingContext,
-      signal?: AbortSignal): {nodes: Node[], cssControls: SDK.CSSPropertyParser.CSSControlMap} {
+  static renderValueNodes(property: SDK.CSSProperty.CSSProperty|{name: string, value: string},
+                          matchedResult: SDK.CSSPropertyParser.BottomUpTreeMatching|null,
+                          renderers: Array<MatchRenderer<SDK.CSSPropertyParser.Match>>, tracing?: TracingContext,
+                          signal?: AbortSignal): {nodes: Node[], cssControls: CSSControlMap} {
     if (!matchedResult) {
       return {nodes: [document.createTextNode(property.value)], cssControls: new Map()};
     }

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -35,6 +35,7 @@ import {CSSValueTraceView} from './CSSValueTraceView.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import {
   BinOpRenderer,
+  type CSSControlMap,
   type MatchRenderer,
   Renderer,
   rendererBase,
@@ -713,7 +714,7 @@ export class ColorRenderer extends ColorRendererBase {
 
   #getValueChild(match: SDK.CSSPropertyParserMatchers.ColorMatch, context: RenderingContext): {
     valueChild: HTMLSpanElement,
-    cssControls?: SDK.CSSPropertyParser.CSSControlMap,
+    cssControls?: CSSControlMap,
     childTracingContexts?: TracingContext[],
   } {
     const valueChild = document.createElement('span');
@@ -906,11 +907,10 @@ export class LightDarkColorRenderer extends LightDarkColorRendererBase {
     return [colorSwatch, content];
   }
 
-  async applyColorScheme(
-      match: SDK.CSSPropertyParserMatchers.LightDarkColorMatch, context: RenderingContext,
-      colorSwatch: InlineEditor.ColorSwatch.ColorSwatch, light: HTMLSpanElement, dark: HTMLSpanElement,
-      lightControls: SDK.CSSPropertyParser.CSSControlMap,
-      darkControls: SDK.CSSPropertyParser.CSSControlMap): Promise<void> {
+  async applyColorScheme(match: SDK.CSSPropertyParserMatchers.LightDarkColorMatch, context: RenderingContext,
+                         colorSwatch: InlineEditor.ColorSwatch.ColorSwatch, light: HTMLSpanElement,
+                         dark: HTMLSpanElement, lightControls: CSSControlMap,
+                         darkControls: CSSControlMap): Promise<void> {
     const activeColor = await this.#activeColor(match);
     if (context.signal?.aborted) {
       return;

package/front_end/panels/elements/elementsTreeOutline.css

@@ -56,11 +56,13 @@
   line-height: normal;
 }
 
+:host(.elements-tree-outline),
 .elements-disclosure devtools-tree {
   width: 100%;
   min-width: 100%;
   min-height: 100%;
   display: inline-block;
+  padding: 0;
 }
 
 .elements-disclosure li {
@@ -570,7 +572,7 @@ li.hovered:not(.always-parent) + ol.children:not(.shadow-root) {
 .tree-outline-disclosure li .selection {
   display: none;
   z-index: -1;
-  margin-left: 0;
+  margin-left: calc(var(--indent, 0px) * -1);
 }
 
 .tree-outline-disclosure li.selected .selection {
@@ -605,6 +607,10 @@ li.hovered:not(.always-parent) + ol.children:not(.shadow-root) {
   background-color: var(--sys-color-tonal-container);
 }
 
+.tree-outline-disclosure .elements-tree-outline li:has(.elements-tree-editor) .selection {
+  display: none;
+}
+
 .tree-outline-disclosure ol {
   list-style-type: none;
   padding-inline-start: 12px;

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -842,9 +842,8 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
     if (!this.model) {
       return;
     }
-    const scale = this.autoAdjustScaleSetting.get() ? undefined : this.model.scaleSetting().get();
-    this.model.emulate(
-        EmulationModel.DeviceModeModel.Type.Device, device, this.lastMode.get(device) || device.modes[0], scale);
+    this.model.emulate(EmulationModel.DeviceModeModel.Type.Device, device,
+                       this.lastMode.get(device) || device.modes[0]);
   }
 
   private switchToResponsive(): void {