chrome-devtools-frontend 1.0.1724140 → 1.0.1726686

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -44,6 +44,7 @@ import * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Badges from '../../models/badges/badges.js';
 import * as Bindings from '../../models/bindings/bindings.js';
+import * as Elements from '../../models/elements/elements.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Tooltips from '../../ui/components/tooltips/tooltips.js';
 import {createIcon, type Icon} from '../../ui/kit/kit.js';
@@ -1993,12 +1994,18 @@ export class StylePropertiesSection {
   }
 
   setHeaderText(rule: SDK.CSSRule.CSSRule, newContent: string): Promise<void> {
-    function onSelectorsUpdated(
-        this: StylePropertiesSection, rule: SDK.CSSRule.CSSStyleRule, success: boolean): Promise<void> {
+    function onSelectorsUpdated(this: StylePropertiesSection, rule: SDK.CSSRule.CSSStyleRule, oldSelector: string,
+                                success: boolean): Promise<void> {
       if (!success) {
         return Promise.resolve();
       }
 
+      Elements.StyleChanges.trackStyleSelectorChange(
+          this.stylesContainer.changeTracker,
+          this.stylesContainer.node() ?? this.matchedStyles.node(),
+          oldSelector,
+          newContent,
+      );
       Badges.UserBadges.instance().recordAction(Badges.BadgeAction.CSS_RULE_MODIFIED);
       return this.matchedStyles.recomputeMatchingSelectors(rule).then(updateSourceRanges.bind(this, rule));
     }
@@ -2017,8 +2024,9 @@ export class StylePropertiesSection {
     if (!oldSelectorRange) {
       return Promise.resolve();
     }
+    const oldSelector = rule.selectorText();
     this.#customHeaderText = undefined;
-    return rule.setSelectorText(newContent).then(onSelectorsUpdated.bind(this, rule, Boolean(oldSelectorRange)));
+    return rule.setSelectorText(newContent).then(onSelectorsUpdated.bind(this, rule, oldSelector));
   }
 
   protected editingSelectorCommittedForTest(): void {
@@ -2117,6 +2125,11 @@ export class BlankStylePropertiesSection extends StylePropertiesSection {
     function onAddedToCascade(this: BlankStylePropertiesSection, newRule: SDK.CSSRule.CSSStyleRule): void {
       const doesSelectorAffectSelectedNode = this.matchedStyles.getMatchingSelectors(newRule).length > 0;
       this.makeNormal(newRule);
+      Elements.StyleChanges.trackStyleRuleAdded(
+          this.stylesContainer.changeTracker,
+          this.stylesContainer.node() ?? this.matchedStyles.node(),
+          newRule.selectorText(),
+      );
 
       if (!doesSelectorAffectSelectedNode) {
         this.propertiesTreeOutline.element.classList.add('no-affect');
@@ -2186,7 +2199,14 @@ export class RegisteredPropertiesSection extends StylePropertiesSection {
     if (!oldRange) {
       return;
     }
+    const oldName = rule.propertyName().text;
     if (await rule.setPropertyName(newContent)) {
+      Elements.StyleChanges.trackPropertyRuleNameChange(
+          this.stylesContainer.changeTracker,
+          this.stylesContainer.node() ?? this.matchedStyles.node(),
+          oldName,
+          newContent,
+      );
       this.stylesContainer.forceUpdate();
     }
   }
@@ -2335,10 +2355,16 @@ export class KeyframePropertiesSection extends StylePropertiesSection {
   }
 
   override setHeaderText(rule: SDK.CSSRule.CSSRule, newContent: string): Promise<void> {
-    function updateSourceRanges(this: KeyframePropertiesSection, success: boolean): void {
+    function updateSourceRanges(this: KeyframePropertiesSection, oldKey: string, success: boolean): void {
       if (!success) {
         return;
       }
+      Elements.StyleChanges.trackKeyframeKeyChange(
+          this.stylesContainer.changeTracker,
+          this.stylesContainer.node() ?? this.matchedStyles.node(),
+          oldKey,
+          newContent,
+      );
       this.stylesContainer.refreshUpdate(this);
     }
 
@@ -2349,7 +2375,8 @@ export class KeyframePropertiesSection extends StylePropertiesSection {
     if (!oldRange) {
       return Promise.resolve();
     }
-    return rule.setKeyText(newContent).then(updateSourceRanges.bind(this));
+    const oldKey = rule.key().text;
+    return rule.setKeyText(newContent).then(updateSourceRanges.bind(this, oldKey));
   }
 
   override isPropertyInherited(_propertyName: string): boolean {