chrome-devtools-frontend 1.0.1721762 → 1.0.1726686

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -56,7 +56,7 @@ import {getCssDeclarationAsJavascriptProperty} from './StylePropertyUtils.js';
 import type {StylesContainer} from './StylesContainer.js';
 import {CSSPropertyPrompt, REGISTERED_PROPERTY_SECTION_NAME} from './StylesSidebarPane.js';
 
-const {html, nothing, render, Directives: {classMap, ref}} = Lit;
+const {html, nothing, render, Directives: {classMap, ref, until}} = Lit;
 const ASTUtils = SDK.CSSPropertyParser.ASTUtils;
 const FlexboxEditor = ElementsComponents.StylePropertyEditor.FlexboxEditor;
 const GridEditor = ElementsComponents.StylePropertyEditor.GridEditor;
@@ -129,6 +129,11 @@ const UIStrings = {
    * @description Title of the button that opens the CSS position-area editor in the Styles tab of the Elements panel.
    */
   positionAreaEditorButton: 'Open `position-area` editor',
+  /**
+   * @description Tooltip text for an icon that opens the shadow editor. The shadow editor is a tool
+   * which allows the user to edit CSS shadow properties.
+   */
+  openShadowEditor: 'Open shadow editor',
   /**
    * @description A context menu item in the Styles tab of the Elements panel to copy CSS declaration as JavaScript property.
    */
@@ -205,33 +210,32 @@ export class EnvFunctionRenderer extends EnvFunctionRendererBase {
       readonly computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null) {
     super();
   }
-  override render(match: SDK.CSSPropertyParserMatchers.EnvFunctionMatch,
-                  context: RenderingContext): Node[]|Lit.LitTemplate {
+  override render(match: SDK.CSSPropertyParserMatchers.EnvFunctionMatch, context: RenderingContext): Lit.LitTemplate {
     const [, fallbackNodes] = ASTUtils.callArgs(match.node);
     if (match.value) {
       const substitution = context.tracing?.substitution();
       if (substitution) {
         if (match.varNameIsValid) {
-          return [document.createTextNode(match.value)];
+          return html`${match.value}`;
         }
         return Renderer.render(fallbackNodes, substitution.renderingContext(context)).nodes;
       }
     }
 
-    const span = document.createElement('span');
     const func =
         this.treeElement?.getTracingTooltip(
             'env', match.node, this.matchedStyles, this.computedStyles, this.computedStyleExtraFields, context) ??
         'env';
     const valueClass = classMap({'inactive-value': !match.varNameIsValid});
     const fallbackClass = classMap({'inactive-value': match.varNameIsValid});
-    render(
-        html`${func}(<span class=${valueClass}>${match.varName}</span>${
-            fallbackNodes ?
-                html`, <span class=${fallbackClass}>${Renderer.render(fallbackNodes, context).nodes}</span>` :
-                nothing})`,
-        span, {host: span});
-    return [span];
+    // clang-format off
+    return html`<span>${
+      func}(<span class=${valueClass}>${match.varName}</span>${
+      fallbackNodes
+        ? html`, <span class=${fallbackClass}>${Renderer.render(fallbackNodes, context).nodes}</span>`
+        : nothing
+    })</span>`;
+    // clang-format on
   }
 }
 const FlexGridRendererBase: RendererBase<SDK.CSSPropertyParserMatchers.FlexGridGridLanesMatch> =
@@ -254,7 +258,7 @@ export class FlexGridRenderer extends FlexGridRendererBase {
       return children;
     }
     const key =
-        `${this.#treeElement.section().getSectionIdx()}_${this.#treeElement.section().nextEditorTriggerButtonIdx}`;
+        `${this.#treeElement.section().getSectionIdx()}_${this.#treeElement.section().nextEditorTriggerButtonIdx++}`;
 
     function getEditorClass(layoutType: SDK.CSSPropertyParserMatchers.LayoutType): typeof FlexboxEditor|
         typeof GridEditor|typeof GridLanesEditor {
@@ -292,17 +296,9 @@ export class FlexGridRenderer extends FlexGridRendererBase {
 
     const button = StyleEditorWidget.createTriggerButton(
         this.#stylesContainer, this.#treeElement.section(), getEditorClass(match.layoutType),
-        getButtonTitle(match.layoutType), key);
-    button.tabIndex = -1;
-    button.setAttribute('jslog', `${VisualLogging.showStyleEditor().track({click: true}).context(match.layoutType)}`);
-    this.#treeElement.section().nextEditorTriggerButtonIdx++;
-    button.addEventListener('click', () => {
-      Host.userMetrics.swatchActivated(getSwatchType(match.layoutType));
-    });
-    const helper = this.#stylesContainer.swatchPopoverHelper();
-    if (helper.isShowing(StyleEditorWidget.instance()) && StyleEditorWidget.instance().getTriggerKey() === key) {
-      helper.setAnchorElement(button);
-    }
+        getButtonTitle(match.layoutType), key, match.layoutType, () => {
+          Host.userMetrics.swatchActivated(getSwatchType(match.layoutType));
+        });
     return html`${children}${button}`;
   }
 }
@@ -321,20 +317,20 @@ export class CSSWideKeywordRenderer extends CSSWideKeywordRendererBase {
   }
 
   override render(match: SDK.CSSPropertyParserMatchers.CSSWideKeywordMatch,
-                  context: RenderingContext): Node[]|Lit.LitTemplate {
+                  context: RenderingContext): Lit.LitTemplate {
     const resolvedProperty = match.resolveProperty();
     if (!resolvedProperty) {
-      return [document.createTextNode(match.text)];
+      return html`${match.text}`;
     }
 
-    const swatch = new InlineEditor.LinkSwatch.LinkSwatch();
-    swatch.data = {
+    const swatch = html`<devtools-link-swatch .data=${{
       text: match.text,
       tooltip: resolvedProperty ? undefined : {title: i18nString(UIStrings.sIsNotDefined, {PH1: match.text})},
       isDefined: Boolean(resolvedProperty),
       onLinkActivate: () => resolvedProperty && this.#stylesContainer.jumpToDeclaration(resolvedProperty),
       jslogContext: 'css-wide-keyword-link',
-    };
+    }
+    }></devtools-link-swatch>`;
 
     if (SDK.CSSMetadata.cssMetadata().isColorAwareProperty(resolvedProperty.name) ||
         SDK.CSSMetadata.cssMetadata().isCustomProperty(resolvedProperty.name)) {
@@ -344,11 +340,11 @@ export class CSSWideKeywordRenderer extends CSSWideKeywordRendererBase {
             new ColorRenderer(this.#stylesContainer, this.#treeElement).renderColorSwatch(color, match, context);
         return this.#treeElement?.editable() ?
             html`<devtools-widget ${widget(EditableContent)}>${colorSwatch}${swatch}</devtools-widget>` :
-            [colorSwatch, swatch];
+            html`${colorSwatch}${swatch}`;
       }
     }
 
-    return [swatch];
+    return swatch;
   }
 }
 
@@ -389,8 +385,7 @@ export class VariableRenderer extends VariableRendererBase {
     this.#computedStyleExtraFields = computedStyleExtraFields;
   }
 
-  override render(match: SDK.CSSPropertyParserMatchers.VariableMatch,
-                  context: RenderingContext): Node[]|Lit.LitTemplate {
+  override render(match: SDK.CSSPropertyParserMatchers.VariableMatch, context: RenderingContext): Lit.LitTemplate {
     if (this.#treeElement?.property.ownerStyle.parentRule instanceof SDK.CSSRule.CSSFunctionRule) {
       return Renderer.render(ASTUtils.children(match.node), context).nodes;
     }
@@ -400,7 +395,6 @@ export class VariableRenderer extends VariableRendererBase {
     const computedValue = variableValue ?? match.fallbackValue();
     const onLinkActivate = (name: string): void =>
         handleVarDefinitionActivate(declaration ?? name, this.#stylesContainer);
-    const varSwatch = document.createElement('span');
 
     const substitution = context.tracing?.substitution({match, context});
     if (substitution) {
@@ -429,34 +423,25 @@ export class VariableRenderer extends VariableRendererBase {
     const tooltipId = this.#treeElement?.getTooltipId('custom-property-var');
     const tooltip = tooltipId ? {tooltipId} : undefined;
     // clang-format off
-    render(html`
-        <span data-title=${computedValue || ''}
-              jslog=${VisualLogging.link('css-variable').track({click: true, hover: true})}>
-          ${varCall ?? 'var'}(
-          <devtools-link-swatch class=css-var-link .data=${{
-              tooltip,
-              text: match.name,
-              isDefined: computedValue !== null && !fromFallback,
-              onLinkActivate,
-            }}>
-           </devtools-link-swatch>
-           ${renderedFallback ? html`, ${renderedFallback.nodes}` : nothing})
-        </span>
-        ${tooltipId ? html`
-          <devtools-tooltip
+    const varSwatch = html`<span
+        data-title=${computedValue || ''}
+        jslog=${VisualLogging.link('css-variable').track({click: true, hover: true})}>${
+          varCall ?? 'var'}(<devtools-link-swatch class=css-var-link .data=${{
+            tooltip,
+            text: match.name,
+            isDefined: computedValue !== null && !fromFallback,
+            onLinkActivate,
+          }}></devtools-link-swatch>${
+          renderedFallback ? html`, ${renderedFallback.nodes}` : nothing})</span>${
+        tooltipId ? html`<devtools-tooltip
             id=${tooltipId}
             variant=rich
-            jslogContext=elements.css-var
-          >
-            ${tooltipContents}
-          </devtools-tooltip>
-        ` : ''}
-    `, varSwatch);
+            jslogContext=elements.css-var>${tooltipContents}</devtools-tooltip>` : nothing}`;
     // clang-format on
 
     const color = computedValue && Common.Color.parse(computedValue);
     if (!color) {
-      return [varSwatch];
+      return varSwatch;
     }
 
     const colorSwatch =
@@ -472,7 +457,7 @@ export class VariableRenderer extends VariableRendererBase {
 
     return this.#treeElement?.editable() ?
         html`<devtools-widget ${widget(EditableContent)}>${colorSwatch}${varSwatch}</devtools-widget>` :
-        [colorSwatch, varSwatch];
+        html`${colorSwatch}${varSwatch}`;
   }
 }
 
@@ -492,11 +477,9 @@ export class VariableNameRenderer extends VariableNameRendererBase {
     this.#matchedStyles = matchedStyles;
   }
 
-  override render(match: SDK.CSSPropertyParserMatchers.VariableNameMatch, _context: RenderingContext): Node[] {
-    const varSwatch = document.createElement('span');
+  override render(match: SDK.CSSPropertyParserMatchers.VariableNameMatch, _context: RenderingContext): Lit.LitTemplate {
     if (this.#treeElement?.property.ownerStyle.parentRule instanceof SDK.CSSRule.CSSFunctionRule) {
-      render(html`${match.text}`, varSwatch);
-      return [varSwatch];
+      return html`${match.text}`;
     }
 
     const {declaration, value: variableValue} = match.resolveVariable() ?? {};
@@ -509,27 +492,16 @@ export class VariableNameRenderer extends VariableNameRendererBase {
     const tooltipId = this.#treeElement?.getTooltipId('custom-property-var');
     const tooltip = tooltipId ? {tooltipId} : undefined;
     // clang-format off
-    render(html`
-        <devtools-link-swatch class=css-var-link .data=${{
-            tooltip,
-            text: match.text,
-            isDefined,
-            onLinkActivate,
-          }}>
-        </devtools-link-swatch>
-        ${tooltipId ? html`
-          <devtools-tooltip
-            id=${tooltipId}
-            variant=rich
-            jslogContext=elements.css-var
-          >
-            ${tooltipContents}
-          </devtools-tooltip>
-        ` : ''}
-    `, varSwatch);
+    return html`<devtools-link-swatch class=css-var-link .data=${{
+        tooltip,
+        text: match.text,
+        isDefined,
+        onLinkActivate,
+      }}></devtools-link-swatch>${tooltipId ? html`<devtools-tooltip
+        id=${tooltipId}
+        variant=rich
+        jslogContext=elements.css-var>${tooltipContents}</devtools-tooltip>` : nothing}`;
     // clang-format on
-
-    return [varSwatch];
   }
 }
 
@@ -555,8 +527,7 @@ export class AttributeRenderer extends AttributeRendererBase {
     this.#computedStyleExtraFields = computedStyleExtraFields;
   }
 
-  override render(match: SDK.CSSPropertyParserMatchers.AttributeMatch,
-                  context: RenderingContext): Node[]|Lit.LitTemplate {
+  override render(match: SDK.CSSPropertyParserMatchers.AttributeMatch, context: RenderingContext): Lit.LitTemplate {
     if (this.#treeElement?.property.ownerStyle.parentRule instanceof SDK.CSSRule.CSSFunctionRule) {
       return Renderer.render(ASTUtils.children(match.node), context).nodes;
     }
@@ -570,7 +541,6 @@ export class AttributeRenderer extends AttributeRendererBase {
     const typeClass = typeError ? 'inactive' : '';
     const fallbackClass = fromFallback ? '' : 'inactive';
     const computedValue = attributeValue ?? match.fallbackValue();
-    const varSwatch = document.createElement('span');
 
     const substitution = context.tracing?.substitution({match, context});
     if (substitution) {
@@ -606,28 +576,27 @@ export class AttributeRenderer extends AttributeRendererBase {
     const tooltipId = attributeMissing ? undefined : this.#treeElement?.getTooltipId('custom-attribute');
     const tooltip = tooltipId ? {tooltipId} : undefined;
     // clang-format off
-    render(html`
-        <span data-title=${computedValue || ''}
-              jslog=${VisualLogging.link('css-variable').track({click: true, hover: true})}
+    const varSwatch = html`<span
+        data-title=${computedValue || ''}
+        jslog=${VisualLogging.link('css-variable').track({click: true, hover: true})}
         >${attrCall ?? 'attr'}(<devtools-link-swatch class=${attributeClass} .data=${{
-              tooltip,
-              text: match.name,
-              isDefined: true,
-              onLinkActivate: () => this.#handleAttributeActivate(this.#matchedStyles.originatingNodeForStyle(match.style), match.name),
-            }}></devtools-link-swatch>${tooltipId ? html`
-          <devtools-tooltip
-            id=${tooltipId}
-            variant=rich
-            jslogContext=elements.css-var
-          >${JSON.stringify(rawValue)}</devtools-tooltip>` : nothing}${
-            match.type ? html` <span class=${typeClass}>${match.type}</span>` : nothing
+          tooltip,
+          text: match.name,
+          isDefined: true,
+          onLinkActivate: () => this.#handleAttributeActivate(this.#matchedStyles.originatingNodeForStyle(match.style), match.name),
+        }}></devtools-link-swatch>${tooltipId ? html`<devtools-tooltip
+          id=${tooltipId}
+          variant=rich
+          jslogContext=elements.css-var
+        >${JSON.stringify(rawValue)}</devtools-tooltip>` : nothing}${
+          match.type ? html` <span class=${typeClass}>${match.type}</span>` : nothing
         }${renderedFallback ? html`, <span class=${fallbackClass}>${renderedFallback.nodes}</span>` : nothing
-        })</span>`, varSwatch);
+        })</span>`;
     // clang-format on
 
     const color = computedValue && Common.Color.parse(computedValue);
     if (!color) {
-      return [varSwatch];
+      return varSwatch;
     }
 
     const colorSwatch =
@@ -643,7 +612,7 @@ export class AttributeRenderer extends AttributeRendererBase {
 
     return this.#treeElement?.editable() ?
         html`<devtools-widget ${widget(EditableContent)}>${colorSwatch}${varSwatch}</devtools-widget>` :
-        [colorSwatch, varSwatch];
+        html`${colorSwatch}${varSwatch}`;
   }
 
   #handleAttributeActivate(node: SDK.DOMModel.DOMNode|null, attribute: string): void {
@@ -695,40 +664,32 @@ export class RelativeColorChannelRenderer extends RelativeColorChannelRendererBa
     super();
     this.#treeElement = treeElement;
   }
-  override render(match: SDK.CSSPropertyParserMatchers.RelativeColorChannelMatch, context: RenderingContext): Node[] {
+  override render(match: SDK.CSSPropertyParserMatchers.RelativeColorChannelMatch,
+                  context: RenderingContext): Lit.LitTemplate {
     const color = context.findParent(match.node, SDK.CSSPropertyParserMatchers.ColorMatch);
     if (!color?.relativeColor) {
-      return [document.createTextNode(match.text)];
+      return html`${match.text}`;
     }
 
     const value = match.getColorChannelValue(color.relativeColor);
 
     if (value === null) {
-      return [document.createTextNode(match.text)];
+      return html`${match.text}`;
     }
 
-    const evaluation =
-        context.tracing?.applyEvaluation([], () => ({placeholder: [document.createTextNode(value.toFixed(3))]}));
+    const evaluation = context.tracing?.applyEvaluation([], () => ({placeholder: html`${value.toFixed(3)}`}));
     if (evaluation) {
       return evaluation;
     }
 
-    const span = document.createElement('span');
-    span.append(match.text);
     const tooltipId = this.#treeElement?.getTooltipId('relative-color-channel');
     if (!tooltipId) {
-      return [span];
+      return html`<span>${match.text}</span>`;
     }
-    span.setAttribute('aria-details', tooltipId);
-    const tooltip = new Tooltips.Tooltip.Tooltip({
-      id: tooltipId,
-      variant: 'rich',
-      anchor: span,
-      jslogContext: 'elements.relative-color-channel',
-    });
-    tooltip.append(value.toFixed(3));
-
-    return [span, tooltip];
+    return html`<span aria-details=${tooltipId}>${match.text}</span><devtools-tooltip
+        id=${tooltipId}
+        variant=rich
+        jslogContext=elements.relative-color-channel>${value.toFixed(3)}</devtools-tooltip>`;
   }
 }
 
@@ -916,25 +877,28 @@ export class LightDarkColorRenderer extends LightDarkColorRendererBase {
     this.#matchedStyles = matchedStyles;
   }
 
+  #renderContent(match: SDK.CSSPropertyParserMatchers.LightDarkColorMatch, light: Lit.LitTemplate,
+                 dark: Lit.LitTemplate, activeColor?: CodeMirror.SyntaxNode[]): Lit.LitTemplate {
+    const lightClasses = classMap({'inactive-value': activeColor === match.dark});
+    const darkClasses = classMap({'inactive-value': activeColor === match.light});
+    return html`<span>light-dark(<span class=${lightClasses}>${light}</span>, <span class=${darkClasses}>${
+        dark}</span>)</span>`;
+  }
+
   override render(match: SDK.CSSPropertyParserMatchers.LightDarkColorMatch,
-                  context: RenderingContext): Node[]|Lit.LitTemplate {
-    const content = document.createElement('span');
-    content.appendChild(document.createTextNode('light-dark('));
-    const light = content.appendChild(document.createElement('span'));
-    content.appendChild(document.createTextNode(', '));
-    const dark = content.appendChild(document.createElement('span'));
-    content.appendChild(document.createTextNode(')'));
-    const {cssControls: lightControls} = Renderer.renderInto(match.light, context, light);
-    const {cssControls: darkControls} = Renderer.renderInto(match.dark, context, dark);
+                  context: RenderingContext): Lit.LitTemplate {
+    const {nodes: light, cssControls: lightControls} = Renderer.render(match.light, context);
+    const {nodes: dark, cssControls: darkControls} = Renderer.render(match.dark, context);
+    const content = this.#renderContent(match, light, dark);
 
     if (context.matchedResult.hasUnresolvedSubstitutions(match.node)) {
-      return [content];
+      return content;
     }
 
     const color = Common.Color.parse(
         context.matchedResult.getComputedTextRange(match.light[0], match.light[match.light.length - 1]));
     if (!color) {
-      return [content];
+      return content;
     }
 
     // Pass an undefined color here to insert a placeholder swatch that will be filled in from the async
@@ -942,36 +906,33 @@ export class LightDarkColorRenderer extends LightDarkColorRendererBase {
     const colorSwatch =
         new ColorRenderer(this.#stylesContainer, this.#treeElement).renderColorSwatch(undefined, match, context);
     context.addControl('color', colorSwatch);
-    void this.applyColorScheme(match, context, colorSwatch, light, dark, lightControls, darkControls);
+    const styledContent =
+        until(this.applyColorScheme(match, context, colorSwatch, light, dark, lightControls, darkControls), content);
 
     return this.#treeElement?.editable() ?
-        html`<devtools-widget ${widget(EditableContent)}>${colorSwatch}${content}</devtools-widget>` :
-        [colorSwatch, content];
+        html`<devtools-widget ${widget(EditableContent)}>${colorSwatch}${styledContent}</devtools-widget>` :
+        html`${colorSwatch}${styledContent}`;
   }
 
   async applyColorScheme(match: SDK.CSSPropertyParserMatchers.LightDarkColorMatch, context: RenderingContext,
-                         colorSwatch: InlineEditor.ColorSwatch.ColorSwatch, light: HTMLSpanElement,
-                         dark: HTMLSpanElement, lightControls: CSSControlMap,
-                         darkControls: CSSControlMap): Promise<void> {
+                         colorSwatch: InlineEditor.ColorSwatch.ColorSwatch, light: Lit.LitTemplate,
+                         dark: Lit.LitTemplate, lightControls: CSSControlMap,
+                         darkControls: CSSControlMap): Promise<Lit.LitTemplate> {
     const activeColor = await this.#activeColor(match);
-    if (context.signal?.aborted) {
-      return;
-    }
-    if (!activeColor) {
-      return;
+    if (context.signal?.aborted || !activeColor) {
+      return this.#renderContent(match, light, dark);
     }
 
     const activeColorSwatches = (activeColor === match.light ? lightControls : darkControls).get('color');
     activeColorSwatches?.forEach(
         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.renderColor(color);
     }
+    return this.#renderContent(match, light, dark, activeColor);
   }
 
   // Returns the syntax node group corresponding the active color scheme:
@@ -1609,7 +1570,7 @@ export class ShadowModel implements InlineEditor.CSSShadowEditor.CSSShadowModel
     return parts;
   }
 
-  renderContents(span: HTMLSpanElement): void {
+  renderContents(): Lit.LitTemplate {
     const parts: Array<string|Lit.LitTemplate> = [];
     for (const part of this.#parts()) {
       if (parts.length > 0) {
@@ -1617,7 +1578,7 @@ export class ShadowModel implements InlineEditor.CSSShadowEditor.CSSShadowModel
       }
       parts.push(typeof part === 'string' ? part : Renderer.render(part.node, part.context).nodes);
     }
-    render(html`${parts}`, span);
+    return html`${parts}`;
   }
   // The text of the shadow as `renderContents` renders it, including the changes that renderers recorded for its parts.
   text(): string {
@@ -1632,6 +1593,85 @@ export class ShadowModel implements InlineEditor.CSSShadowEditor.CSSShadowModel
   }
 }
 
+interface ShadowWidgetViewInput {
+  model: ShadowModel;
+  showPopover: (swatch: InlineEditor.Swatches.CSSShadowSwatch) => void;
+}
+
+type ShadowWidgetView = (input: ShadowWidgetViewInput, output: undefined, target: HTMLElement) => void;
+
+const SHADOW_WIDGET_DEFAULT_VIEW: ShadowWidgetView = (input, _output, target) => {
+  // clang-format off
+  render(html`<css-shadow-swatch
+    role="button"
+    .cssShadowModel=${input.model}
+    title=${i18nString(UIStrings.openShadowEditor)}
+    jslog=${VisualLogging.showStyleEditor('css-shadow').track({click: true})}
+    @click=${function(this: InlineEditor.Swatches.CSSShadowSwatch, event: Event) {
+      event.consume(true);
+      input.showPopover(this);
+    }}
+    @keydown=${function(this: InlineEditor.Swatches.CSSShadowSwatch, event: KeyboardEvent) {
+      if (!event.isComposing && Platform.KeyboardUtilities.isEnterOrSpaceKey(event)) {
+        event.consume(true);
+        input.showPopover(this);
+      }
+    }}
+    @mousedown=${(event: Event) => event.consume()}
+  ></css-shadow-swatch>${input.model.renderContents()}`, target);
+  // clang-format on
+};
+
+class ShadowWidget extends UI.Widget.Widget {
+  readonly #view: ShadowWidgetView;
+  #model?: ShadowModel;
+  #treeElement?: StylePropertyTreeElement;
+  #popoverHelper?: ShadowSwatchPopoverHelper;
+
+  constructor(element?: HTMLElement, view: ShadowWidgetView = SHADOW_WIDGET_DEFAULT_VIEW) {
+    super(element);
+    this.element.classList.remove('vbox', 'flex-auto', 'widget');
+    this.#view = view;
+  }
+
+  set model(model: ShadowModel) {
+    if (this.#model === model) {
+      return;
+    }
+    this.#model = model;
+    this.performUpdate();
+  }
+
+  set treeElement(treeElement: StylePropertyTreeElement) {
+    if (this.#treeElement === treeElement) {
+      return;
+    }
+    this.#treeElement = treeElement;
+    this.#popoverHelper =
+        new ShadowSwatchPopoverHelper(treeElement, treeElement.stylesContainer().swatchPopoverHelper());
+    this.#popoverHelper.addEventListener(ShadowEvents.SHADOW_CHANGED, () => {
+      this.performUpdate();
+      void treeElement.applyStyleText(treeElement.renderedPropertyText(), false);
+    });
+    this.performUpdate();
+  }
+
+  override performUpdate(): void {
+    if (!this.#model || !this.#popoverHelper) {
+      return;
+    }
+    const popoverHelper = this.#popoverHelper;
+    this.#view({
+      model: this.#model,
+      showPopover: swatch => {
+        Host.userMetrics.swatchActivated(Host.UserMetrics.SwatchType.SHADOW);
+        popoverHelper.showPopover(swatch);
+      },
+    },
+               undefined, this.contentElement);
+  }
+}
+
 const ShadowRendererBase: RendererBase<SDK.CSSPropertyParserMatchers.ShadowMatch> =
     rendererBase(SDK.CSSPropertyParserMatchers.ShadowMatch);
 // clang-format off
@@ -1762,22 +1802,8 @@ export class ShadowRenderer extends ShadowRendererBase {
         continue;
       }
 
-      const swatch = new InlineEditor.Swatches.CSSShadowSwatch(model);
-      swatch.setAttribute('jslog', `${VisualLogging.showStyleEditor('css-shadow').track({click: true})}`);
-      swatch.iconElement().addEventListener('click', () => {
-        Host.userMetrics.swatchActivated(Host.UserMetrics.SwatchType.SHADOW);
-      });
-
-      const contents = document.createElement('span');
-      model.renderContents(contents);
-      const popoverHelper = new ShadowSwatchPopoverHelper(
-          this.#treeElement, this.#treeElement.stylesContainer().swatchPopoverHelper(), swatch);
-      const treeElement = this.#treeElement;
-      popoverHelper.addEventListener(ShadowEvents.SHADOW_CHANGED, () => {
-        model.renderContents(contents);
-        void treeElement.applyStyleText(treeElement.renderedPropertyText(), false);
-      });
-      result.push(swatch, contents);
+      result.push(
+          html`<devtools-widget ${widget(ShadowWidget, {model, treeElement: this.#treeElement})}></devtools-widget>`);
       texts.push(() =>
                      isImportant ? `${model.text()} ${nestedEdits.textRange(isImportant, isImportant)}` : model.text());
 
@@ -2178,6 +2204,7 @@ export class PositionAreaRenderer extends PositionAreaRendererBase {
     edit: (value: string) => void,
     key?: string,
   };
+  static readonly #EDITABLE_PROPERTIES: readonly string[] = ['align-self', 'justify-self'];
   readonly #treeElement: StylePropertyTreeElement|null;
   readonly #stylesContainer: StylesContainer;
   constructor(stylesContainer: StylesContainer, treeElement: StylePropertyTreeElement|null) {
@@ -2207,10 +2234,16 @@ export class PositionAreaRenderer extends PositionAreaRendererBase {
       }
     }
 
-    return activeSection?.propertiesTreeOutline?.rootElement().children().find(
+    return this.#findPropertyInSection(activeSection, propertyName);
+  }
+
+  #findPropertyInSection(section: StylePropertiesSection|undefined, propertyName: string): StylePropertyTreeElement
+      |undefined {
+    return section?.propertiesTreeOutline?.rootElement().children().find(
         (child): child is StylePropertyTreeElement =>
             child instanceof StylePropertyTreeElement && child.property.name === propertyName);
   }
+
   override render(match: SDK.CSSPropertyParserMatchers.PositionAreaMatch, context: RenderingContext): Lit.LitTemplate {
     const children = Renderer.render(ASTUtils.siblings(ASTUtils.declValue(match.node)), context).nodes;
     // The text of the match is the value as authored, which may contain comments or var()s that resolve to the area.
@@ -2234,6 +2267,7 @@ export class PositionAreaRenderer extends PositionAreaRendererBase {
         Boolean(PositionAreaRenderer.#active && popoverHelper.isShowing(PositionAreaRenderer.#active.editor) &&
                 key !== undefined && PositionAreaRenderer.#active.key === key);
     if (isActive && PositionAreaRenderer.#active) {
+      treeElement.carryOverCommittedProperty(PositionAreaRenderer.#active.treeElement);
       PositionAreaRenderer.#active.treeElement = treeElement;
       PositionAreaRenderer.#active.edit = edit;
     }
@@ -2249,6 +2283,17 @@ export class PositionAreaRenderer extends PositionAreaRendererBase {
       const valueText = context.edits?.getEdit(match) ?? context.matchedResult.getComputedPropertyValueText();
       editor.area = InlineEditor.PositionAreaEditor.parsePositionArea(valueText) ?? undefined;
 
+      const initialProperties = new Map<string, {value: string, section: StylePropertiesSection}>();
+      for (const propertyName of PositionAreaRenderer.#EDITABLE_PROPERTIES) {
+        const target = this.#findTreeElementForProperty(propertyName);
+        if (target) {
+          initialProperties.set(propertyName, {
+            value: target.property.value,
+            section: target.section(),
+          });
+        }
+      }
+
       const updateProperty = (propertyName: string, computedStyle: Map<string, string>|null): void => {
         const matchedStyles = active.treeElement.matchedStyles();
         const resolved = matchedStyles.resolveProperty(propertyName, active.treeElement.property.ownerStyle);
@@ -2319,6 +2364,22 @@ export class PositionAreaRenderer extends PositionAreaRendererBase {
         editor.removeEventListener(InlineEditor.PositionAreaEditor.Events.PROPERTY_CHANGED, onPropertyChanged);
         const propertyText = commitEdit ? active.treeElement.renderedPropertyText() : originalPropertyText || '';
         void active.treeElement.applyStyleText(propertyText, true);
+        const node = this.#stylesContainer.node() ?? active.treeElement.matchedStyles().node();
+        for (const propertyName of PositionAreaRenderer.#EDITABLE_PROPERTIES) {
+          const originalTarget = initialProperties.get(propertyName);
+          const targetSection = originalTarget?.section ?? active.treeElement.section();
+          const target = this.#findPropertyInSection(targetSection, propertyName);
+          const oldValue = originalTarget?.value ?? '';
+          const newValue = target?.property.value ?? '';
+          const ruleHeader = targetSection.headerText();
+          Elements.StyleChanges.trackStylePropertyEdit(this.#stylesContainer.changeTracker, node, {
+            ruleHeader,
+            oldName: oldValue ? propertyName : '',
+            oldValue,
+            newName: newValue ? propertyName : '',
+            newValue,
+          });
+        }
         if (PositionAreaRenderer.#active === active) {
           PositionAreaRenderer.#active = undefined;
         }
@@ -2545,6 +2606,10 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     super.onunbind();
   }
 
+  carryOverCommittedProperty(previous: StylePropertyTreeElement): void {
+    this.#lastCommittedProperty = previous.#lastCommittedProperty;
+  }
+
   async gridNames(): Promise<Set<string>> {
     if (!SDK.CSSMetadata.cssMetadata().isGridNameAwareProperty(this.name)) {
       return new Set();