chrome-devtools-frontend 1.0.1587905 → 1.0.1589336

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -1217,7 +1217,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           onExpand: () => this.expand(),
 
           containerAdornerActive: this.#containerAdornerActive,
-          showAdAdorner: this.nodeInternal.isAdFrameNode(),
+          showAdAdorner: this.nodeInternal.isAdRelatedNode(),
           showContainerAdorner: Boolean(this.#layout?.containerType) && !this.isClosingTag(),
           containerType: this.#layout?.containerType,
           showFlexAdorner: Boolean(this.#layout?.isFlex) && !this.isClosingTag(),
@@ -1509,6 +1509,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           SDK.DOMModel.DOMNodeEvents.TOP_LAYER_INDEX_CHANGED, this.onTopLayerIndexChanged, this);
       this.nodeInternal.addEventListener(
           SDK.DOMModel.DOMNodeEvents.SCROLLABLE_FLAG_UPDATED, this.#onScrollableFlagUpdated, this);
+      this.nodeInternal.addEventListener(
+          SDK.DOMModel.DOMNodeEvents.AD_RELATED_STATE_UPDATED, this.#onAdRelatedStateUpdated, this);
       this.nodeInternal.addEventListener(
           SDK.DOMModel.DOMNodeEvents.CONTAINER_QUERY_OVERLAY_STATE_CHANGED,
           this.#onPersistentContainerQueryOverlayStateChanged, this);
@@ -1592,6 +1594,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         SDK.DOMModel.DOMNodeEvents.TOP_LAYER_INDEX_CHANGED, this.onTopLayerIndexChanged, this);
     this.nodeInternal.removeEventListener(
         SDK.DOMModel.DOMNodeEvents.SCROLLABLE_FLAG_UPDATED, this.#onScrollableFlagUpdated, this);
+    this.nodeInternal.removeEventListener(
+        SDK.DOMModel.DOMNodeEvents.AD_RELATED_STATE_UPDATED, this.#onAdRelatedStateUpdated, this);
     this.nodeInternal.removeEventListener(
         SDK.DOMModel.DOMNodeEvents.CONTAINER_QUERY_OVERLAY_STATE_CHANGED,
         this.#onPersistentContainerQueryOverlayStateChanged, this);
@@ -1609,6 +1613,10 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     void this.#updateAdorners();
   }
 
+  #onAdRelatedStateUpdated(): void {
+    void this.#updateAdorners();
+  }
+
   #onPersistentContainerQueryOverlayStateChanged(event: Common.EventTarget.EventTargetEvent<{enabled: boolean}>): void {
     this.#containerAdornerActive = event.data.enabled;
     this.performUpdate();

package/front_end/panels/elements/ImagePreviewPopover.ts

@@ -38,7 +38,6 @@ export class ImagePreviewPopover {
     }
     return {
       box: link.boxInWindow(),
-      hide: undefined,
       show: async (popover: UI.GlassPane.GlassPane) => {
         const node = this.getDOMNode((link));
         if (!node) {
@@ -46,7 +45,6 @@ export class ImagePreviewPopover {
         }
         const precomputedFeatures = await Components.ImagePreview.ImagePreview.loadDimensionsForNode(node);
         const preview = await Components.ImagePreview.ImagePreview.build(href, true, {
-          imageAltText: undefined,
           precomputedFeatures,
           align: Components.ImagePreview.Align.CENTER,
         });

package/front_end/panels/elements/MarkerDecorator.ts

@@ -77,8 +77,6 @@ export function getRegisteredDecorators(): MarkerDecoratorRegistration[] {
     {
       decorator: PseudoStateMarkerDecorator.instance,
       marker: 'pseudo-state-marker',
-      title: undefined,
-      color: undefined,
     },
   ];
 }

package/front_end/panels/elements/PropertiesWidget.ts

@@ -75,8 +75,9 @@ interface PropertiesWidgetInput {
   onFilterChanged: (e: CustomEvent<string>) => void;
   onRegexToggled: () => void;
   isRegex: boolean;
-  treeOutlineElement: HTMLElement;
-  displayNoMatchingPropertyMessage: boolean;
+  treeOutline: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeOutline;
+  objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree|null;
+  allChildrenFiltered: boolean;
 }
 
 type View = (input: PropertiesWidgetInput, output: object, target: HTMLElement) => void;
@@ -99,10 +100,10 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           </devtools-checkbox>
         </devtools-toolbar>
       </div>
-      ${input.displayNoMatchingPropertyMessage ? html`
+      ${input.objectTree && input.allChildrenFiltered ? html`
         <div class="gray-info-message">${i18nString(UIStrings.noMatchingProperty)}</div>
       ` : nothing}
-      ${input.treeOutlineElement}
+      ${input.treeOutline.element}
     </div>`, target);
   // clang-format on
 };
@@ -111,13 +112,13 @@ const getShowAllPropertiesSetting = (): Common.Settings.Setting<boolean> =>
     Common.Settings.Settings.instance().createSetting('show-all-properties', /* defaultValue */ false);
 
 export class PropertiesWidget extends UI.Widget.VBox {
-  private node: SDK.DOMModel.DOMNode|null;
   private readonly showAllPropertiesSetting: Common.Settings.Setting<boolean>;
   private filterRegex: RegExp|null = null;
   private readonly treeOutline: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeOutline;
-  private lastRequestedNode?: SDK.DOMModel.DOMNode;
+  #lastRequestedNode: SDK.DOMModel.DOMNode|null = null;
   readonly #view: View;
-  #displayNoMatchingPropertyMessage = false;
+  #pendingNodeUpdate = true;
+  #objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree|null = null;
   #isRegex = false;
   #filterText = '';
 
@@ -126,7 +127,7 @@ export class PropertiesWidget extends UI.Widget.VBox {
     this.registerRequiredCSS(propertiesWidgetStyles);
 
     this.showAllPropertiesSetting = getShowAllPropertiesSetting();
-    this.showAllPropertiesSetting.addChangeListener(this.filterAndScheduleUpdate.bind(this));
+    this.showAllPropertiesSetting.addChangeListener(this.onFilterChanged.bind(this));
 
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.DOMModel.DOMModel, SDK.DOMModel.Events.AttrModified, this.onNodeChange, this, {scoped: true});
@@ -137,7 +138,6 @@ export class PropertiesWidget extends UI.Widget.VBox {
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.DOMModel.DOMModel, SDK.DOMModel.Events.ChildNodeCountUpdated, this.onNodeChange, this, {scoped: true});
     UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.setNode, this);
-    this.node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
 
     this.#view = view;
     this.treeOutline = new ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeOutline({readOnly: true});
@@ -147,7 +147,7 @@ export class PropertiesWidget extends UI.Widget.VBox {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.DOMPropertiesExpanded);
     });
 
-    void this.performUpdate();
+    this.requestUpdate();
   }
 
   #buildFilterRegex(text: string): RegExp|null {
@@ -164,80 +164,80 @@ export class PropertiesWidget extends UI.Widget.VBox {
     return new RegExp(Platform.StringUtilities.escapeForRegExp(text), 'i');
   }
 
-  private onFilterChanged(event: CustomEvent<string>): void {
-    this.#filterText = event.detail;
-    this.filterRegex = this.#buildFilterRegex(event.detail);
-    this.filterAndScheduleUpdate();
+  private onFilterChanged(event: CustomEvent<string>|Common.EventTarget.EventTargetEvent<boolean>): void {
+    if ('detail' in event) {
+      this.#filterText = event.detail;
+      this.filterRegex = this.#buildFilterRegex(event.detail);
+    }
+    this.#updateFilter();
+    this.requestUpdate();
   }
 
   private onRegexToggled(): void {
     this.#isRegex = !this.#isRegex;
     this.filterRegex = this.#buildFilterRegex(this.#filterText);
-    this.internalFilterProperties();
-    this.#renderView();
-  }
-
-  private filterAndScheduleUpdate(): void {
-    const previousDisplay = this.#displayNoMatchingPropertyMessage;
-    this.internalFilterProperties();
-    if (previousDisplay !== this.#displayNoMatchingPropertyMessage) {
-      this.requestUpdate();
-    }
+    this.#updateFilter();
+    this.requestUpdate();
   }
 
-  private internalFilterProperties(): void {
-    this.#displayNoMatchingPropertyMessage = true;
-    for (const element of this.treeOutline.rootElement().children()) {
-      const {property} = element as ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement;
-      const hidden = !property?.property.match({
-        includeNullOrUndefinedValues: this.showAllPropertiesSetting.get(),
-        regex: this.filterRegex,
-      });
-      this.#displayNoMatchingPropertyMessage = this.#displayNoMatchingPropertyMessage && hidden;
-      element.hidden = hidden;
-    }
+  #updateFilter(): void {
+    this.#objectTree?.setFilter({
+      includeNullOrUndefinedValues: this.showAllPropertiesSetting.get(),
+      regex: this.filterRegex,
+    });
   }
 
-  private setNode(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode|null>): void {
-    this.node = event.data;
+  private setNode(): void {
+    this.#pendingNodeUpdate = true;
     this.requestUpdate();
   }
 
-  override async performUpdate(): Promise<void> {
-    if (this.lastRequestedNode) {
-      this.lastRequestedNode.domModel().runtimeModel().releaseObjectGroup(OBJECT_GROUP_NAME);
-      delete this.lastRequestedNode;
+  async #updateNodeIfRequired(): Promise<void> {
+    if (!this.#pendingNodeUpdate) {
+      return;
     }
+    this.#pendingNodeUpdate = false;
+    this.#lastRequestedNode?.domModel().runtimeModel().releaseObjectGroup(OBJECT_GROUP_NAME);
+    this.#lastRequestedNode = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
 
-    if (!this.node) {
+    if (!this.#lastRequestedNode) {
+      this.#objectTree = null;
+      return;
+    }
+    const object = await this.#lastRequestedNode.resolveToObject(OBJECT_GROUP_NAME);
+    if (!object) {
+      return;
+    }
+
+    this.#objectTree = new ObjectUI.ObjectPropertiesSection.ObjectTree(
+        object, ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED);
+    this.#updateFilter();
+  }
+
+  override async performUpdate(): Promise<void> {
+    await this.#updateNodeIfRequired();
+    if (!this.#objectTree) {
       this.treeOutline.removeChildren();
-      this.#displayNoMatchingPropertyMessage = false;
     } else {
-      this.lastRequestedNode = this.node;
-      const object = await this.node.resolveToObject(OBJECT_GROUP_NAME);
-      if (!object) {
-        return;
-      }
-
       const treeElement = this.treeOutline.rootElement();
       treeElement.removeChildren();
-      const root = new ObjectUI.ObjectPropertiesSection.ObjectTree(
-          object, ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED);
       ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement.populateWithProperties(
-          treeElement, await root.populateChildrenIfNeeded(), true /* skipProto */, true /* skipGettersAndSetters */);
-      this.internalFilterProperties();
+          treeElement, await this.#objectTree.populateChildrenIfNeeded(), true /* skipProto */,
+          true /* skipGettersAndSetters */);
     }
-    this.#renderView();
-  }
-
-  #renderView(): void {
+    const allChildrenFiltered =
+        !(this.#objectTree?.children?.accessors?.some(c => !c.isFiltered) ||
+          this.#objectTree?.children?.arrayRanges?.some(() => true) ||
+          this.#objectTree?.children?.internalProperties?.some(c => !c.isFiltered) ||
+          this.#objectTree?.children?.properties?.some(c => !c.isFiltered));
     this.#view(
         {
           onFilterChanged: this.onFilterChanged.bind(this),
           onRegexToggled: this.onRegexToggled.bind(this),
           isRegex: this.#isRegex,
-          treeOutlineElement: this.treeOutline.element,
-          displayNoMatchingPropertyMessage: this.#displayNoMatchingPropertyMessage,
+          treeOutline: this.treeOutline,
+          allChildrenFiltered,
+          objectTree: this.#objectTree,
         },
         {}, this.contentElement);
   }
@@ -245,14 +245,15 @@ export class PropertiesWidget extends UI.Widget.VBox {
   private onNodeChange(
       event: Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode, name: string}|SDK.DOMModel.DOMNode>,
       ): void {
-    if (!this.node) {
+    if (!this.#lastRequestedNode) {
       return;
     }
     const data = event.data;
     const node = (data instanceof SDK.DOMModel.DOMNode ? data : data.node);
-    if (this.node !== node) {
+    if (this.#lastRequestedNode !== node) {
       return;
     }
+    this.#pendingNodeUpdate = true;
     this.requestUpdate();
   }
 }

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -56,7 +56,7 @@ import * as ElementsComponents from './components/components.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import stylePropertiesTreeOutlineStyles from './stylePropertiesTreeOutline.css.js';
 import {type Context, StylePropertyTreeElement} from './StylePropertyTreeElement.js';
-import {StylesSidebarPane} from './StylesSidebarPane.js';
+import type {StylesSidebarPane} from './StylesSidebarPane.js';
 
 const UIStrings = {
   /**
@@ -1469,18 +1469,47 @@ export class StylePropertiesSection {
     }, {jslogContext: 'copy-selector'});
 
     contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copyRule), () => {
-      const ruleText = StylesSidebarPane.formatLeadingProperties(this).ruleText;
+      const ruleText = this.formatLeadingProperties().ruleText;
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(ruleText);
     }, {jslogContext: 'copy-rule'});
 
     contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copyAllDeclarations), () => {
-      const allDeclarationText = StylesSidebarPane.formatLeadingProperties(this).allDeclarationText;
+      const allDeclarationText = this.formatLeadingProperties().allDeclarationText;
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(allDeclarationText);
     }, {jslogContext: 'copy-all-declarations'});
 
     void contextMenu.show();
   }
 
+  formatLeadingProperties(): {
+    allDeclarationText: string,
+    ruleText: string,
+  } {
+    const selectorText = this.headerText();
+    const indent = Common.Settings.Settings.instance().moduleSetting('text-editor-indent').get();
+
+    const style = this.style();
+    const lines: string[] = [];
+
+    // Invalid property should also be copied.
+    // For example: *display: inline.
+    for (const property of style.leadingProperties()) {
+      if (property.disabled) {
+        lines.push(`${indent}/* ${property.name}: ${property.value}; */`);
+      } else {
+        lines.push(`${indent}${property.name}: ${property.value};`);
+      }
+    }
+
+    const allDeclarationText: string = lines.join('\n');
+    const ruleText = `${selectorText} {\n${allDeclarationText}\n}`;
+
+    return {
+      allDeclarationText,
+      ruleText,
+    };
+  }
+
   private navigateToSelectorSource(index: number, focus: boolean): void {
     const cssModel = this.parentPane.cssModel();
     if (!cssModel) {

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -47,11 +47,7 @@ import {
 import {StyleEditorWidget} from './StyleEditorWidget.js';
 import type {StylePropertiesSection} from './StylePropertiesSection.js';
 import {getCssDeclarationAsJavascriptProperty} from './StylePropertyUtils.js';
-import {
-  CSSPropertyPrompt,
-  REGISTERED_PROPERTY_SECTION_NAME,
-  StylesSidebarPane,
-} from './StylesSidebarPane.js';
+import {CSSPropertyPrompt, REGISTERED_PROPERTY_SECTION_NAME, type StylesSidebarPane} from './StylesSidebarPane.js';
 
 const {html, nothing, render, Directives: {classMap}} = Lit;
 const ASTUtils = SDK.CSSPropertyParser.ASTUtils;
@@ -413,7 +409,7 @@ export class VariableRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
     if (fromFallback) {
       renderedFallback?.cssControls.get('color')?.forEach(
           innerSwatch => innerSwatch.addEventListener(InlineEditor.ColorSwatch.ColorChangedEvent.eventName, ev => {
-            colorSwatch.color = ev.data.color;
+            colorSwatch.setColor(ev.data.color);
           }));
     }
 
@@ -535,7 +531,7 @@ export class AttributeRenderer extends rendererBase(SDK.CSSPropertyParserMatcher
     if (fromFallback) {
       renderedFallback?.cssControls.get('color')?.forEach(
           innerSwatch => innerSwatch.addEventListener(InlineEditor.ColorSwatch.ColorChangedEvent.eventName, ev => {
-            colorSwatch.color = ev.data.color;
+            colorSwatch.setColor(ev.data.color);
           }));
     }
 
@@ -718,9 +714,9 @@ export class ColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.Co
             return;
           }
           if (color.is(Common.Color.Format.HSL) || color.is(Common.Color.Format.HSLA)) {
-            swatch.color = new Common.Color.HSL(hue, color.s, color.l, color.alpha);
+            swatch.setColor(new Common.Color.HSL(hue, color.s, color.l, color.alpha));
           } else if (color.is(Common.Color.Format.HWB) || color.is(Common.Color.Format.HWBA)) {
-            swatch.color = new Common.Color.HWB(hue, color.w, color.b, color.alpha);
+            swatch.setColor(new Common.Color.HWB(hue, color.w, color.b, color.alpha));
           }
           angle.updateProperty(swatch.color?.asString() ?? '');
         });
@@ -735,9 +731,9 @@ export class ColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.Co
     const tooltip = editable ? i18nString(UIStrings.openColorPickerS, {PH1: shiftClickMessage}) : '';
 
     const swatch = new InlineEditor.ColorSwatch.ColorSwatch(tooltip);
-    swatch.readonly = !editable;
+    swatch.setReadonly(!editable);
     if (color) {
-      swatch.color = color;
+      swatch.renderColor(color);
     }
 
     if (this.#treeElement?.editable()) {
@@ -761,7 +757,7 @@ export class ColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.Co
           new ColorSwatchPopoverIcon(treeElement, treeElement.parentPane().swatchPopoverHelper(), swatch);
       swatchIcon.addEventListener(ColorSwatchPopoverIconEvents.COLOR_CHANGED, ev => {
         valueChild.textContent = ev.data.getAuthoredText() ?? ev.data.asString();
-        swatch.color = ev.data;
+        swatch.setColor(ev.data);
       });
       if (treeElement.property.name === 'color') {
         void this.#addColorContrastInfo(swatchIcon);
@@ -838,15 +834,14 @@ export class LightDarkColorRenderer extends rendererBase(SDK.CSSPropertyParserMa
 
     const activeColorSwatches = (activeColor === match.light ? lightControls : darkControls).get('color');
     activeColorSwatches?.forEach(
-        swatch => swatch.addEventListener(InlineEditor.ColorSwatch.ColorChangedEvent.eventName, ev => {
-          colorSwatch.color = ev.data.color;
-        }));
+        swatch => swatch.addEventListener(
+            InlineEditor.ColorSwatch.ColorChangedEvent.eventName, ev => colorSwatch.setColor(ev.data.color)));
     const inactiveColor = (activeColor === match.light) ? dark : light;
     const colorText = context.matchedResult.getComputedTextRange(activeColor[0], activeColor[activeColor.length - 1]);
     const color = colorText && Common.Color.parse(colorText);
     inactiveColor.classList.add('inactive-value');
     if (color) {
-      colorSwatch.color = color;
+      colorSwatch.renderColor(color);
     }
   }
 
@@ -972,7 +967,7 @@ export class ColorMixRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
           if (results) {
             const color = Common.Color.parse(results[0]);
             if (color) {
-              swatch.color = color.as(Common.Color.Format.HEXA);
+              swatch.setColor(color.as(Common.Color.Format.HEXA));
               return true;
             }
           }
@@ -2175,7 +2170,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       this.listItemElement.classList.remove('implicit');
     }
 
-    const hasIgnorableError = !this.property.parsedOk && StylesSidebarPane.ignoreErrorsForProperty(this.property);
+    const hasIgnorableError = !this.property.parsedOk && this.property.ignoreErrors();
     if (hasIgnorableError) {
       this.listItemElement.classList.add('has-ignorable-error');
     } else {
@@ -2858,7 +2853,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     }, {jslogContext: 'copy-value'});
 
     contextMenu.headerSection().appendItem(i18nString(UIStrings.copyRule), () => {
-      const ruleText = StylesSidebarPane.formatLeadingProperties(this.#parentSection).ruleText;
+      const ruleText = this.#parentSection.formatLeadingProperties().ruleText;
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(ruleText);
     }, {jslogContext: 'copy-rule'});
 
@@ -2867,7 +2862,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
         {jslogContext: 'copy-css-declaration-as-js'});
 
     contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copyAllDeclarations), () => {
-      const allDeclarationText = StylesSidebarPane.formatLeadingProperties(this.#parentSection).allDeclarationText;
+      const allDeclarationText = this.#parentSection.formatLeadingProperties().allDeclarationText;
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(allDeclarationText);
     }, {jslogContext: 'copy-all-declarations'});
 

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -268,73 +268,6 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.userOperation = userOperation;
   }
 
-  static ignoreErrorsForProperty(property: SDK.CSSProperty.CSSProperty): boolean {
-    function hasUnknownVendorPrefix(string: string): boolean {
-      return !string.startsWith('-webkit-') && /^[-_][\w\d]+-\w/.test(string);
-    }
-
-    const name = property.name.toLowerCase();
-
-    // IE hack.
-    if (name.charAt(0) === '_') {
-      return true;
-    }
-
-    // IE has a different format for this.
-    if (name === 'filter') {
-      return true;
-    }
-
-    // Common IE-specific property prefix.
-    if (name.startsWith('scrollbar-')) {
-      return true;
-    }
-    if (hasUnknownVendorPrefix(name)) {
-      return true;
-    }
-
-    const value = property.value.toLowerCase();
-
-    // IE hack.
-    if (value.endsWith('\\9')) {
-      return true;
-    }
-    if (hasUnknownVendorPrefix(value)) {
-      return true;
-    }
-
-    return false;
-  }
-
-  static formatLeadingProperties(section: StylePropertiesSection): {
-    allDeclarationText: string,
-    ruleText: string,
-  } {
-    const selectorText = section.headerText();
-    const indent = Common.Settings.Settings.instance().moduleSetting('text-editor-indent').get();
-
-    const style = section.style();
-    const lines: string[] = [];
-
-    // Invalid property should also be copied.
-    // For example: *display: inline.
-    for (const property of style.leadingProperties()) {
-      if (property.disabled) {
-        lines.push(`${indent}/* ${property.name}: ${property.value}; */`);
-      } else {
-        lines.push(`${indent}${property.name}: ${property.value};`);
-      }
-    }
-
-    const allDeclarationText: string = lines.join('\n');
-    const ruleText = `${selectorText} {\n${allDeclarationText}\n}`;
-
-    return {
-      allDeclarationText,
-      ruleText,
-    };
-  }
-
   revealProperty(cssProperty: SDK.CSSProperty.CSSProperty): void {
     void this.decorator.highlightProperty(cssProperty);
     this.lastRevealedProperty = cssProperty;
@@ -769,10 +702,6 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       return;
     }
 
-    if (!UI.ViewManager.ViewManager.instance().isViewVisible('animations')) {
-      return;
-    }
-
     void this.computedStyleUpdateThrottler.schedule(async () => {
       await this.#updateAnimatedStyles();
       this.handledComputedStyleChangedForTest();
@@ -795,6 +724,11 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   #scheduleResetUpdateIfNotEditing(): void {
     this.scheduleResetUpdateIfNotEditingCalledForTest();
 
+    // Don't schedule if editing; the edit completion will handle the update.
+    if (this.userOperation || this.isEditingStyle) {
+      return;
+    }
+
     void this.resetUpdateThrottler.schedule(async () => {
       this.#resetUpdateIfNotEditing();
     });
@@ -803,6 +737,13 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   scheduleResetUpdateIfNotEditingCalledForTest(): void {
   }
 
+  #hasAnimatedStyles(animatedStyles: Protocol.CSS.GetAnimatedStylesForNodeResponse): boolean {
+    return Boolean(
+        animatedStyles.animationStyles?.length || animatedStyles.transitionsStyle?.cssProperties.length ||
+        animatedStyles.inherited?.some(
+            inherited => inherited.animationStyles?.length || inherited.transitionsStyle?.cssProperties.length));
+  }
+
   async #updateAnimatedStyles(): Promise<void> {
     if (!this.matchedStyles) {
       return;
@@ -818,6 +759,18 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       return;
     }
 
+    if (!this.#hasAnimatedStyles(animatedStyles)) {
+      // A computed style change that doesn't correspond to any animation is
+      // likely to be a change in the matched styles. In this case, we should
+      // update the matched styles.
+      this.#scheduleResetUpdateIfNotEditing();
+      return;
+    }
+
+    if (!UI.ViewManager.ViewManager.instance().isViewVisible('animations')) {
+      return;
+    }
+
     const updateStyleSection =
         (currentStyle: SDK.CSSStyleDeclaration.CSSStyleDeclaration|null, newStyle: Protocol.CSS.CSSStyle|null):
             void => {
@@ -1619,7 +1572,6 @@ export class SectionBlock {
     UI.UIUtils.createTextChild(separatorElement, i18nString(UIStrings.inheritedFromSPseudoOf, {PH1: pseudoTypeString}));
     const link = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node, {
       preventKeyboardFocus: true,
-      tooltip: undefined,
     });
     separatorElement.appendChild(link);
     return new SectionBlock(separatorElement);
@@ -1672,7 +1624,6 @@ export class SectionBlock {
     UI.UIUtils.createTextChild(separatorElement, i18nString(UIStrings.inheritedFroms));
     const link = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node, {
       preventKeyboardFocus: true,
-      tooltip: undefined,
     });
     separatorElement.appendChild(link);
     return new SectionBlock(separatorElement);
@@ -1978,14 +1929,6 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
     if (!this.isEditingName && !results.length && query.length > 1 && '!important'.startsWith(lowerQuery)) {
       results.push({
         text: '!important',
-        title: undefined,
-        subtitle: undefined,
-        priority: undefined,
-        isSecondary: undefined,
-        subtitleRenderer: undefined,
-        selectionRange: undefined,
-        hideGhostText: undefined,
-        iconElement: undefined,
       });
     }
     const userEnteredText = query.replace('-', '');
@@ -2061,14 +2004,6 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
       const index = completion.toLowerCase().indexOf(lowerQuery);
       const result: CompletionResult = {
         text: completion,
-        title: undefined,
-        subtitle: undefined,
-        priority: undefined,
-        isSecondary: undefined,
-        subtitleRenderer: undefined,
-        selectionRange: undefined,
-        hideGhostText: undefined,
-        iconElement: undefined,
         isCSSVariableColor: false,
       };
       if (variable) {
@@ -2097,7 +2032,7 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
 
     function colorSwatchRenderer(color: Common.Color.Color): Element {
       const swatch = new InlineEditor.ColorSwatch.ColorSwatch();
-      swatch.color = color;
+      swatch.renderColor(color);
       swatch.style.pointerEvents = 'none';
       return swatch;
     }

package/front_end/panels/elements/elementsPanel.css

@@ -41,10 +41,10 @@
 .style-panes-wrapper {
   overflow: hidden scroll;
   background-color: var(--sys-color-cdt-base-container);
+}
 
-  & > div:not(:last-child) {
+.style-panes-wrapper:not(.computed-styles-pane-wrapper) > div:not(:last-child) {
     border-bottom: 1px solid var(--sys-color-divider);
-  }
 }
 
 #elements-content:not(.elements-wrap) > div {
@@ -81,3 +81,7 @@ devtools-tree-outline {
   border-radius: var(--sys-shape-corner-full);
   box-shadow: var(--sys-elevation-level1);
 }
+
+.computed-styles-wrapper {
+  flex-shrink: 0;
+}

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

@@ -188,8 +188,6 @@ UI.Toolbar.registerToolbarItem({
   condition: Root.Runtime.conditions.canDock,
   location: UI.Toolbar.ToolbarItemLocation.MAIN_TOOLBAR_LEFT,
   order: 1,
-  loadItem: undefined,
-  separator: undefined,
 });
 
 Common.AppProvider.registerAppProvider({

package/front_end/panels/event_listeners/EventListenersUtils.ts

@@ -263,7 +263,6 @@ export async function frameworkEventListeners(object: SDK.RemoteObject.RemoteObj
     } = {
       eventListeners,
       internalHandlers: internalHandlers.length ? internalHandlers : undefined,
-      errorString: undefined,
     };
 
     // The logic further up seems to expect that if the internalHandlers is set,