chrome-devtools-frontend 1.0.1721762 → 1.0.1726686

package/front_end/panels/elements/StyleEditorWidget.ts

@@ -3,14 +3,19 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
-import {createIcon} from '../../ui/kit/kit.js';
+import '../../ui/kit/kit.js';
+
+import * as Elements from '../../models/elements/elements.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, type LitTemplate} from '../../ui/lit/lit.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import type * as ElementsComponents from './components/components.js';
 import type {StylePropertiesSection} from './StylePropertiesSection.js';
 import {StylePropertyTreeElement} from './StylePropertyTreeElement.js';
 import type {StylesContainer} from './StylesContainer.js';
 
+const {ref} = Directives;
 type PropertySelectedEvent = ElementsComponents.StylePropertyEditor.PropertySelectedEvent;
 type PropertyDeselectedEvent = ElementsComponents.StylePropertyEditor.PropertyDeselectedEvent;
 
@@ -34,6 +39,7 @@ export class StyleEditorWidget extends UI.Widget.VBox {
   private editorContainer: HTMLElement;
 
   #triggerKey: string|undefined;
+  #initialProperties: Map<string, string>|null = null;
 
   constructor() {
     super({useShadowDom: true});
@@ -72,6 +78,10 @@ export class StyleEditorWidget extends UI.Widget.VBox {
   bindContext(stylesContainer: StylesContainer, section: StylePropertiesSection): void {
     this.stylesContainer = stylesContainer;
     this.section = section;
+    if (!this.#initialProperties) {
+      this.#initialProperties =
+          this.editor ? getAuthoredStyles(section, this.editor.getEditableProperties()) : new Map();
+    }
     this.editor?.addEventListener('propertyselected', this.onPropertySelected);
     this.editor?.addEventListener('propertydeselected', this.onPropertyDeselected);
   }
@@ -91,6 +101,27 @@ export class StyleEditorWidget extends UI.Widget.VBox {
     this.editor?.removeEventListener('propertydeselected', this.onPropertyDeselected);
   }
 
+  #trackChanges(): void {
+    const initialProperties = this.#initialProperties;
+    this.#initialProperties = null;
+    if (!this.editor || !this.section || !this.stylesContainer || !initialProperties) {
+      return;
+    }
+    const finalProperties = getAuthoredStyles(this.section, this.editor.getEditableProperties());
+    const node = this.stylesContainer.node() ?? this.section.matchedStyles.node();
+    const ruleHeader = this.section.headerText();
+    for (const {propertyName} of this.editor.getEditableProperties()) {
+      const oldValue = initialProperties.get(propertyName) ?? '';
+      const newValue = finalProperties.get(propertyName) ?? '';
+      Elements.StyleChanges.trackStylePropertyEdit(this.stylesContainer.changeTracker, node, {
+        ruleHeader,
+        oldName: oldValue ? propertyName : '',
+        oldValue,
+        newName: newValue ? propertyName : '',
+        newValue,
+      });
+    }
+  }
   async render(): Promise<void> {
     if (!this.editor) {
       return;
@@ -122,46 +153,63 @@ export class StyleEditorWidget extends UI.Widget.VBox {
     }
   }
 
-  static createTriggerButton(
-      stylesContainer: StylesContainer, section: StylePropertiesSection, editorClass: {new(): Editor},
-      buttonTitle: string, triggerKey: string): HTMLElement {
-    const triggerButton = createIcon('flex-wrap', 'styles-pane-button');
-    triggerButton.title = buttonTitle;
-    triggerButton.role = 'button';
-
-    triggerButton.onclick = async event => {
-      event.stopPropagation();
-      const popoverHelper = stylesContainer.swatchPopoverHelper();
-      const widget = StyleEditorWidget.instance();
-      widget.element.classList.toggle('with-padding', true);
-      widget.setEditor(editorClass);
-      widget.bindContext(stylesContainer, section);
-      widget.setTriggerKey(triggerKey);
-      await widget.render();
-      widget.focus();
-      const scrollerElement = triggerButton.enclosingNodeOrSelfWithClass('style-panes-wrapper');
-      const onScroll = (): void => {
-        popoverHelper.hide(true);
-      };
-      const onStylesUpdateCompleted = widget.requestUpdate.bind(widget);
-      stylesContainer.addStyleUpdateListener(onStylesUpdateCompleted);
-      popoverHelper.show(widget, triggerButton, () => {
-        widget.unbindContext();
+  static createTriggerButton(stylesContainer: StylesContainer, section: StylePropertiesSection,
+                             editorClass: {new(): Editor}, buttonTitle: string, triggerKey: string,
+                             jslogContext: string, onClick?: () => void): LitTemplate {
+    const popoverHelper = stylesContainer.swatchPopoverHelper();
+    let triggerButton: Element|undefined;
+    // clang-format off
+    return html`<devtools-icon
+      ${ref(e => {
+        triggerButton = e;
+        if (e && popoverHelper.isShowing(StyleEditorWidget.instance()) &&
+            StyleEditorWidget.instance().getTriggerKey() === triggerKey) {
+          popoverHelper.setAnchorElement(e);
+        }
+      })}
+      name="flex-wrap"
+      class="styles-pane-button"
+      title=${buttonTitle}
+      role="button"
+      tabindex="-1"
+      jslog=${VisualLogging.showStyleEditor(jslogContext).track({click: true})}
+      @click=${async (event: Event) => {
+        event.stopPropagation();
+        onClick?.();
+        if (!triggerButton) {
+          return;
+        }
+        const widget = StyleEditorWidget.instance();
+        widget.element.classList.toggle('with-padding', true);
+        widget.setEditor(editorClass);
+        widget.bindContext(stylesContainer, section);
+        widget.setTriggerKey(triggerKey);
+        await widget.render();
+        widget.focus();
+        const scrollerElement = triggerButton.enclosingNodeOrSelfWithClass('style-panes-wrapper');
+        const onScroll = (): void => {
+          popoverHelper.hide(true);
+        };
+        const onStylesUpdateCompleted = widget.requestUpdate.bind(widget);
+        stylesContainer.addStyleUpdateListener(onStylesUpdateCompleted);
+        popoverHelper.show(widget, triggerButton, () => {
+          widget.#trackChanges();
+          widget.unbindContext();
+          if (scrollerElement) {
+            scrollerElement.removeEventListener('scroll', onScroll);
+          }
+          stylesContainer.removeStyleUpdateListener(onStylesUpdateCompleted);
+        });
         if (scrollerElement) {
-          scrollerElement.removeEventListener('scroll', onScroll);
+          scrollerElement.addEventListener('scroll', onScroll);
         }
-        stylesContainer.removeStyleUpdateListener(onStylesUpdateCompleted);
-      });
-      if (scrollerElement) {
-        scrollerElement.addEventListener('scroll', onScroll);
-      }
-    };
-    triggerButton.onmouseup = event => {
-      // Stop propagation to prevent the property editor from being activated.
-      event.stopPropagation();
-    };
-
-    return triggerButton;
+      }}
+      @mouseup=${(event: Event) => {
+        // Stop propagation to prevent the property editor from being activated.
+        event.stopPropagation();
+      }}
+    ></devtools-icon>`;
+    // clang-format on
   }
 }
 

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 {