chrome-devtools-frontend 1.0.1697595 → 1.0.1698733

package/front_end/panels/elements/EventListenersWidget.ts

@@ -125,7 +125,6 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         </devtools-checkbox>
       </devtools-toolbar>
       ${widget(EventListeners.EventListenersView.EventListenersView, {
-        changeCallback: input.onEventListenersViewChange,
         objects: input.eventListenerObjects,
         filter: input.filter,
       })}

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 {