chrome-devtools-frontend 1.0.1376716 → 1.0.1380117

package/front_end/panels/elements/ComputedStyleWidget.test.ts

@@ -0,0 +1,72 @@
+// Copyright 2023 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as SDK from '../../core/sdk/sdk.js';
+import {createTarget, stubNoopSettings} from '../../testing/EnvironmentHelpers.js';
+import {describeWithMockConnection} from '../../testing/MockConnection.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+import * as Elements from './elements.js';
+
+describeWithMockConnection('ComputedStyleWidget', () => {
+  let target: SDK.Target.Target;
+  let view: Elements.ComputedStyleWidget.ComputedStyleWidget;
+  let trackComputedStyleUpdatesForNodeSpy: sinon.SinonSpy;
+
+  beforeEach(() => {
+    stubNoopSettings();
+    target = createTarget();
+    UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, null);
+    trackComputedStyleUpdatesForNodeSpy =
+        sinon.spy(SDK.CSSModel.CSSModel.prototype, 'trackComputedStyleUpdatesForNode');
+
+    const cssModel = target.model(SDK.CSSModel.CSSModel);
+    sinon.stub(Elements.ComputedStyleModel.ComputedStyleModel.prototype, 'cssModel').returns(cssModel);
+  });
+
+  afterEach(() => {
+    view.detach();
+  });
+
+  it('tracks computed style updates for the node when the widget is shown', () => {
+    const model = target.model(SDK.DOMModel.DOMModel);
+    assert.exists(model);
+    const node = new SDK.DOMModel.DOMNode(model);
+    UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, node);
+    view = new Elements.ComputedStyleWidget.ComputedStyleWidget();
+    view.markAsRoot();
+    view.show(document.body);
+
+    sinon.assert.calledWith(trackComputedStyleUpdatesForNodeSpy, node.id);
+  });
+
+  it('tracks computed style updates for the node when the selected node is changed', () => {
+    const model = target.model(SDK.DOMModel.DOMModel);
+    assert.exists(model);
+    const node = new SDK.DOMModel.DOMNode(model);
+    UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, node);
+    view = new Elements.ComputedStyleWidget.ComputedStyleWidget();
+    view.markAsRoot();
+    view.show(document.body);
+
+    sinon.assert.calledWith(trackComputedStyleUpdatesForNodeSpy, node.id);
+    const newNode = new SDK.DOMModel.DOMNode(model);
+    UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, newNode);
+
+    sinon.assert.calledWith(trackComputedStyleUpdatesForNodeSpy, newNode.id);
+  });
+
+  it('removes tracking computed style updates for the node when the widget is hidden', () => {
+    const model = target.model(SDK.DOMModel.DOMModel);
+    assert.exists(model);
+    const node = new SDK.DOMModel.DOMNode(model);
+    UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, node);
+    view = new Elements.ComputedStyleWidget.ComputedStyleWidget();
+    view.markAsRoot();
+    view.show(document.body);
+    view.hideWidget();
+
+    sinon.assert.calledWith(trackComputedStyleUpdatesForNodeSpy, undefined);
+  });
+});

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -291,6 +291,10 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
     fontsWidget.show(this.contentElement);
   }
 
+  #handleNodeChange(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode|null>): void {
+    void this.computedStyleModel.cssModel()?.trackComputedStyleUpdatesForNode(event.data?.id);
+  }
+
   override onResize(): void {
     const isNarrow = this.contentElement.offsetWidth < 260;
     this.#computedStylesTree.classList.toggle('computed-narrow', isNarrow);
@@ -299,6 +303,14 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
   override wasShown(): void {
     super.wasShown();
     this.registerCSSFiles([computedStyleSidebarPaneStyles]);
+
+    void this.computedStyleModel.cssModel()?.trackComputedStyleUpdatesForNode(this.computedStyleModel.node()?.id);
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.#handleNodeChange, this);
+  }
+
+  override willHide(): void {
+    void this.computedStyleModel.cssModel()?.trackComputedStyleUpdatesForNode(undefined);
+    UI.Context.Context.instance().removeFlavorChangeListener(SDK.DOMModel.DOMNode, this.#handleNodeChange, this);
   }
 
   override async doUpdate(): Promise<void> {

package/front_end/panels/elements/ElementStatePaneWidget.test.ts

@@ -72,7 +72,9 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
     for (const pseudoClass of pseudoClasses) {
       const div = view.contentElement.querySelector(`#${pseudoClass}`);
       assert.instanceOf(div, HTMLDivElement);
-      assert.strictEqual(!div.hidden, expectedPseudoClasses.includes(div.id), `Wrong state for ${div.id}`);
+      const shouldShow = expectedPseudoClasses.includes(pseudoClass);
+      assert.strictEqual(
+          !div.hidden, shouldShow, `Checkbox for ${pseudoClass} should be ${shouldShow ? 'shown' : 'hidden'}`);
     }
   };
 
@@ -153,15 +155,13 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
     await assertExpectedPseudoClasses(
         'input',
         [
-          'enabled',
           'disabled',
           'valid',
           'invalid',
           'user-valid',
           'user-invalid',
           'required',
-          'optional',
-          'read-write',
+          'read-only',
           'placeholder-shown',
           'autofill',
         ],
@@ -171,14 +171,14 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
   it('Shows the specific pseudo-classes for button', async () => {
     await assertExpectedPseudoClasses(
         'button',
-        ['enabled', 'disabled', 'valid', 'invalid', 'read-only'],
+        ['disabled', 'valid', 'invalid', 'read-write'],
     );
   });
 
   it('Shows the specific pseudo-classes for fieldset', async () => {
     await assertExpectedPseudoClasses(
         'fieldset',
-        ['enabled', 'disabled', 'valid', 'invalid', 'read-only'],
+        ['disabled', 'valid', 'invalid', 'read-write'],
     );
   });
 
@@ -186,45 +186,82 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
     await assertExpectedPseudoClasses(
         'textarea',
         [
-          'enabled',
           'disabled',
           'valid',
           'invalid',
           'user-valid',
           'user-invalid',
           'required',
-          'optional',
-          'read-write',
+          'read-only',
           'placeholder-shown',
         ],
     );
+    await assertExpectedPseudoClasses(
+        'textarea',
+        [
+          'disabled',
+          'valid',
+          'invalid',
+          'user-valid',
+          'user-invalid',
+          'required',
+          'read-write',
+          'placeholder-shown',
+        ],
+        false, ['readonly', '']);
+    await assertExpectedPseudoClasses(
+        'textarea',
+        [
+          'enabled',
+          'valid',
+          'invalid',
+          'user-valid',
+          'user-invalid',
+          'required',
+          'read-write',
+          'placeholder-shown',
+        ],
+        false, ['disabled', '']);
+    await assertExpectedPseudoClasses(
+        'textarea',
+        [
+          'disabled',
+          'valid',
+          'invalid',
+          'user-valid',
+          'user-invalid',
+          'optional',
+          'read-only',
+          'placeholder-shown',
+        ],
+        false, ['required', '']);
   });
 
   it('Shows the specific pseudo-classes for select', async () => {
     await assertExpectedPseudoClasses(
         'select',
-        ['enabled', 'disabled', 'valid', 'invalid', 'user-valid', 'user-invalid', 'required', 'optional', 'read-only'],
+        ['disabled', 'valid', 'invalid', 'user-valid', 'user-invalid', 'required', 'read-write'],
     );
   });
 
   it('Shows the specific pseudo-classes for option', async () => {
     await assertExpectedPseudoClasses(
         'option',
-        ['enabled', 'disabled', 'checked', 'read-only'],
+        ['disabled', 'checked', 'read-write'],
     );
   });
 
   it('Shows the specific pseudo-classes for optgroup', async () => {
     await assertExpectedPseudoClasses(
         'optgroup',
-        ['enabled', 'disabled', 'read-only'],
+        ['disabled', 'read-write'],
     );
   });
 
   it('Shows the specific pseudo-classes for FormAssociated', async () => {
     await assertExpectedPseudoClasses(
         'CustomFormAssociatedElement',
-        ['enabled', 'disabled', 'valid', 'invalid'],
+        ['disabled', 'valid', 'invalid', 'read-write'],
         true,
     );
   });
@@ -232,55 +269,74 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
   it('Shows the specific pseudo-classes for object, output and img', async () => {
     await assertExpectedPseudoClasses(
         'object',
-        ['valid', 'invalid'],
+        ['valid', 'invalid', 'read-write'],
     );
 
     await assertExpectedPseudoClasses(
         'output',
-        ['valid', 'invalid', 'read-only'],
+        ['valid', 'invalid', 'read-write'],
     );
 
     await assertExpectedPseudoClasses(
         'img',
-        ['valid', 'invalid'],
+        ['valid', 'invalid', 'read-write'],
     );
   });
   it('Shows the specific pseudo-classes for progress', async () => {
     await assertExpectedPseudoClasses(
         'progress',
-        ['read-only', 'indeterminate'],
+        ['read-write', 'indeterminate'],
     );
   });
 
   it('Shows the specific pseudo-classes for a and area with href', async () => {
     await assertExpectedPseudoClasses(
         'a',
-        ['visited'],
+        ['visited', 'read-write'],
         false,
         ['href', 'www.google.com'],
     );
 
     await assertExpectedPseudoClasses(
-        'a',
-        ['visited'],
+        'area',
+        ['visited', 'read-write'],
         false,
         ['href', 'www.google.com'],
     );
   });
 
+  it('Shows the specific pseudo-classes for a and area without href', async () => {
+    await assertExpectedPseudoClasses(
+        'a',
+        ['read-write'],
+    );
+
+    await assertExpectedPseudoClasses(
+        'area',
+        ['read-write'],
+    );
+  });
+
+  it('Shows the specific pseudo-classes for contenteditable div', async () => {
+    await assertExpectedPseudoClasses(
+        'div',
+        ['read-only'],
+        false,
+        ['contenteditable', ''],
+    );
+  });
+
   it('Shows the specific pseudo-classes for radio or checkbox inputs', async () => {
     await assertExpectedPseudoClasses(
         'input',
         [
-          'enabled',
           'disabled',
           'valid',
           'invalid',
           'user-valid',
           'user-invalid',
           'required',
-          'optional',
-          'read-write',
+          'read-only',
           'placeholder-shown',
           'autofill',
           'checked',
@@ -292,15 +348,13 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
     await assertExpectedPseudoClasses(
         'input',
         [
-          'enabled',
           'disabled',
           'valid',
           'invalid',
           'user-valid',
           'user-invalid',
           'required',
-          'optional',
-          'read-write',
+          'read-only',
           'placeholder-shown',
           'autofill',
           'checked',
@@ -314,19 +368,19 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
   it('Shows the specific pseudo-classes for datalist, label, legend and meter', async () => {
     await assertExpectedPseudoClasses(
         'datalist',
-        ['read-only'],
+        ['read-write'],
     );
     await assertExpectedPseudoClasses(
         'label',
-        ['read-only'],
+        ['read-write'],
     );
     await assertExpectedPseudoClasses(
         'legend',
-        ['read-only'],
+        ['read-write'],
     );
     await assertExpectedPseudoClasses(
         'meter',
-        ['read-only'],
+        ['read-write'],
     );
   });
 });

package/front_end/panels/elements/ElementStatePaneWidget.ts

@@ -68,6 +68,7 @@ enum SpecificPseudoStates {
 export class ElementStatePaneWidget extends UI.Widget.Widget {
   private readonly inputs: HTMLInputElement[];
   private readonly inputStates: WeakMap<HTMLInputElement, string>;
+  private readonly duals: Map<SpecificPseudoStates, SpecificPseudoStates>;
   private cssModel?: SDK.CSSModel.CSSModel|null;
   private specificPseudoStateDivs: Map<SpecificPseudoStates, HTMLDivElement>;
   private specificHeader: HTMLDetailsElement;
@@ -80,6 +81,7 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
     const inputs: HTMLInputElement[] = [];
     this.inputs = inputs;
     this.inputStates = new WeakMap();
+    this.duals = new Map();
     const createSectionHeader = (title: string): HTMLDivElement => {
       const sectionHeaderContainer = document.createElement('div');
       sectionHeaderContainer.classList.add('section-header');
@@ -96,7 +98,12 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
       if (!state) {
         return;
       }
-      node.domModel().cssModel().forcePseudoState(node, state, event.target.checked);
+      const checked = event.target.checked;
+      const dual = this.duals.get(state as SpecificPseudoStates);
+      if (checked && dual) {
+        node.domModel().cssModel().forcePseudoState(node, dual, false);
+      }
+      node.domModel().cssModel().forcePseudoState(node, state, checked);
     };
     const createElementStateCheckbox = (state: string): HTMLDivElement => {
       const div = document.createElement('div');
@@ -110,7 +117,10 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
       div.appendChild(label);
       return div;
     };
-
+    const setDualStateCheckboxes = (first: SpecificPseudoStates, second: SpecificPseudoStates): void => {
+      this.duals.set(first, second);
+      this.duals.set(second, first);
+    };
     const createEmulateFocusedPageCheckbox = (): Element => {
       const div = document.createElement('div');
       div.classList.add('page-state-checkbox');
@@ -210,6 +220,12 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
       elementSpecificContainer.appendChild(div);
     });
 
+    setDualStateCheckboxes(SpecificPseudoStates.VALID, SpecificPseudoStates.INVALID);
+    setDualStateCheckboxes(SpecificPseudoStates.USER_VALID, SpecificPseudoStates.USER_INVALID);
+    setDualStateCheckboxes(SpecificPseudoStates.READ_ONLY, SpecificPseudoStates.READ_WRITE);
+    setDualStateCheckboxes(SpecificPseudoStates.IN_RANGE, SpecificPseudoStates.OUT_OF_RANGE);
+    setDualStateCheckboxes(SpecificPseudoStates.ENABLED, SpecificPseudoStates.DISABLED);
+
     this.specificHeader = document.createElement('details');
     this.specificHeader.classList.add('specific-details');
 
@@ -287,6 +303,19 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
       return isElementOfTypes(node, ['input']) &&
           (node.getAttribute('type') === 'checkbox' || node.getAttribute('type') === 'radio');
     };
+    const isContentEditable = (node: SDK.DOMModel.DOMNode): boolean => {
+      return node.getAttribute('contenteditable') !== undefined ||
+          Boolean(node.parentNode && isContentEditable(node.parentNode));
+    };
+    const isDisabled = (node: SDK.DOMModel.DOMNode): boolean => {
+      return node.getAttribute('disabled') !== undefined;
+    };
+    const isMutable = (node: SDK.DOMModel.DOMNode): boolean => {
+      if (isElementOfTypes(node, ['input', 'textarea'])) {
+        return node.getAttribute('readonly') === undefined && !isDisabled(node);
+      }
+      return isContentEditable(node);
+    };
     // An autonomous custom element is called a form-associated custom element if the element is associated with a custom element definition whose form-associated field is set to true.
     // https://html.spec.whatwg.org/multipage/custom-elements.html#form-associated-custom-element
     const isFormAssociatedCustomElement = async(node: SDK.DOMModel.DOMNode): Promise<boolean> => {
@@ -300,8 +329,8 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
 
     if (isElementOfTypes(node, ['button', 'input', 'select', 'textarea', 'optgroup', 'option', 'fieldset']) ||
         isFormAssociated) {
-      hideSpecificCheckbox(SpecificPseudoStates.ENABLED, false);
-      hideSpecificCheckbox(SpecificPseudoStates.DISABLED, false);
+      hideSpecificCheckbox(SpecificPseudoStates.ENABLED, !isDisabled(node));
+      hideSpecificCheckbox(SpecificPseudoStates.DISABLED, isDisabled(node));
     } else {
       hideSpecificCheckbox(SpecificPseudoStates.ENABLED, true);
       hideSpecificCheckbox(SpecificPseudoStates.DISABLED, true);
@@ -319,8 +348,13 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
     if (isElementOfTypes(node, ['input', 'select', 'textarea'])) {
       hideSpecificCheckbox(SpecificPseudoStates.USER_VALID, false);
       hideSpecificCheckbox(SpecificPseudoStates.USER_INVALID, false);
-      hideSpecificCheckbox(SpecificPseudoStates.REQUIRED, false);
-      hideSpecificCheckbox(SpecificPseudoStates.OPTIONAL, false);
+      if (node.getAttribute('required') === undefined) {
+        hideSpecificCheckbox(SpecificPseudoStates.REQUIRED, false);
+        hideSpecificCheckbox(SpecificPseudoStates.OPTIONAL, true);
+      } else {
+        hideSpecificCheckbox(SpecificPseudoStates.REQUIRED, true);
+        hideSpecificCheckbox(SpecificPseudoStates.OPTIONAL, false);
+      }
     } else {
       hideSpecificCheckbox(SpecificPseudoStates.USER_VALID, true);
       hideSpecificCheckbox(SpecificPseudoStates.USER_INVALID, true);
@@ -328,27 +362,11 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
       hideSpecificCheckbox(SpecificPseudoStates.OPTIONAL, true);
     }
 
-    if (isElementOfTypes(node, ['input', 'textarea'])) {
-      hideSpecificCheckbox(SpecificPseudoStates.READ_WRITE, false);
-    } else {
+    if (isMutable(node)) {
       hideSpecificCheckbox(SpecificPseudoStates.READ_WRITE, true);
-    }
-
-    if (isElementOfTypes(node, [
-          'button',
-          'datalist',
-          'fieldset',
-          'label',
-          'legend',
-          'meter',
-          'optgroup',
-          'option',
-          'output',
-          'progress',
-          'select',
-        ])) {
       hideSpecificCheckbox(SpecificPseudoStates.READ_ONLY, false);
     } else {
+      hideSpecificCheckbox(SpecificPseudoStates.READ_WRITE, false);
       hideSpecificCheckbox(SpecificPseudoStates.READ_ONLY, true);
     }
 

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -996,7 +996,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     removeZeroWidthSpaceRecursive(attribute);
 
     const config = new UI.InplaceEditor.Config(
-        this.attributeEditingCommitted.bind(this), this.editingCancelled.bind(this), attributeName || undefined);
+        this.attributeEditingCommitted.bind(this), this.editingCancelled.bind(this), attributeName);
 
     function postKeyDownFinishHandler(event: Event): string {
       UI.UIUtils.handleElementValueModifications(event, attribute);
@@ -1032,7 +1032,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       container.textContent = textNode.nodeValue();
     }  // Strip the CSS or JS highlighting if present.
     const config = new UI.InplaceEditor.Config(
-        this.textNodeEditingCommitted.bind(this, textNode), this.editingCancelled.bind(this));
+        this.textNodeEditingCommitted.bind(this, textNode), this.editingCancelled.bind(this), null);
     this.updateEditorHandles(textNodeElement, config);
     const componentSelection = this.listItemElement.getComponentSelection();
     componentSelection && componentSelection.selectAllChildren(textNodeElement);
@@ -1074,8 +1074,13 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     };
 
     function editingCommitted(
-        this: ElementsTreeElement, element: Element, newTagName: string, oldText: string, tagName: string|null,
-        moveDirection: string): void {
+        this: ElementsTreeElement,
+        element: Element,
+        newTagName: string,
+        oldText: string|null,
+        tagName: string|null,
+        moveDirection: string,
+        ): void {
       if (!tagNameElement) {
         return;
       }
@@ -1104,7 +1109,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     return true;
   }
 
-  private updateEditorHandles<T>(element: Element, config?: UI.InplaceEditor.Config<T>): void {
+  private updateEditorHandles<T>(element: Element, config: UI.InplaceEditor.Config<T>): void {
     const editorHandles = UI.InplaceEditor.InplaceEditor.startEditing(element, config);
     if (!editorHandles) {
       this.editing = null;
@@ -1241,7 +1246,12 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   private attributeEditingCommitted(
-      element: Element, newText: string, oldText: string, attributeName: string, moveDirection: string): void {
+      element: Element,
+      newText: string,
+      oldText: string|null,
+      attributeName: string|null,
+      moveDirection: string,
+      ): void {
     this.editing = null;
 
     const treeOutline = this.treeOutline;
@@ -1305,7 +1315,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       }
     }
 
-    if ((attributeName.trim() || newText.trim()) && oldText !== newText) {
+    if (attributeName !== null && (attributeName.trim() || newText.trim()) && oldText !== newText) {
       this.nodeInternal.setAttribute(attributeName, newText, moveToNextAttributeIfNeeded.bind(this));
       return;
     }
@@ -1315,7 +1325,12 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   private tagNameEditingCommitted(
-      element: Element, newText: string, oldText: string, tagName: string|null, moveDirection: string): void {
+      element: Element,
+      newText: string,
+      oldText: string|null,
+      tagName: string|null,
+      moveDirection: string,
+      ): void {
     this.editing = null;
     const self = this;
 
@@ -2267,9 +2282,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         false;
 
     const containerType = styles.get('container-type');
-    const contain = styles.get('contain');
-    const isContainer =
-        SDK.CSSContainerQuery.getQueryAxis(`${containerType} ${contain}`) !== SDK.CSSContainerQuery.QueryAxis.NONE;
+    const isContainer = containerType && containerType !== '' && containerType !== 'normal';
 
     if (isGrid) {
       this.pushGridAdorner(this.tagTypeContext, isSubgrid);

package/front_end/panels/elements/MetricsSidebarPane.ts

@@ -428,7 +428,7 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
   }
 
   private applyUserInput(
-      element: Element, userInput: string, previousContent: string, context: {
+      element: Element, userInput: string, previousContent: string|null, context: {
         box: string,
         styleProperty: string,
         computedStyle: Map<string, string>,
@@ -519,12 +519,17 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
     }
   }
 
-  private editingCommitted(element: Element, userInput: string, previousContent: string, context: {
-    box: string,
-    styleProperty: string,
-    computedStyle: Map<string, string>,
-    keyDownHandler: (arg0: Event) => void,
-  }): void {
+  private editingCommitted(
+      element: Element,
+      userInput: string,
+      previousContent: string|null,
+      context: {
+        box: string,
+        styleProperty: string,
+        computedStyle: Map<string, string>,
+        keyDownHandler: (arg0: Event) => void,
+      },
+      ): void {
     this.editingEnded(element, context);
     this.applyUserInput(element, userInput, previousContent, context, true);
   }

package/front_end/panels/elements/PropertyMatchers.ts

@@ -439,6 +439,9 @@ export class ShadowMatcher extends matcherBase(ShadowMatch) {
       return null;
     }
     const valueNodes = ASTUtils.siblings(ASTUtils.declValue(node));
+    if (valueNodes.length === 0) {
+      return null;
+    }
     const valueText = matching.ast.textRange(valueNodes[0], valueNodes[valueNodes.length - 1]);
     return new ShadowMatch(
         valueText, node, matching.ast.propertyName === 'text-shadow' ? ShadowType.TEXT_SHADOW : ShadowType.BOX_SHADOW);

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -1303,8 +1303,13 @@ export class StylePropertiesSection {
   }
 
   private async editingMediaCommitted(
-      query: SDK.CSSQuery.CSSQuery, element: Element, newContent: string, _oldContent: string,
-      _context: Context|undefined, _moveDirection: string): Promise<void> {
+      query: SDK.CSSQuery.CSSQuery,
+      element: Element,
+      newContent: string,
+      _oldContent: string|null,
+      _context: Context|undefined,
+      _moveDirection: string,
+      ): Promise<void> {
     this.parentPane.setEditingStyle(false);
     this.editingMediaFinished(element);
 
@@ -1446,8 +1451,8 @@ export class StylePropertiesSection {
       element.textContent = textContent.replace(/\s+/g, ' ').trim();
     }
 
-    const config =
-        new UI.InplaceEditor.Config(this.editingSelectorCommitted.bind(this), this.editingSelectorCancelled.bind(this));
+    const config = new UI.InplaceEditor.Config(
+        this.editingSelectorCommitted.bind(this), this.editingSelectorCancelled.bind(this), undefined);
     UI.InplaceEditor.InplaceEditor.startEditing(this.selectorElement, config);
 
     const selection = element.getComponentSelection();
@@ -1490,8 +1495,12 @@ export class StylePropertiesSection {
   }
 
   editingSelectorCommitted(
-      element: Element, newContent: string, oldContent: string, context: Context|undefined,
-      moveDirection: string): void {
+      element: Element,
+      newContent: string,
+      oldContent: string|null,
+      context: Context|undefined,
+      moveDirection: string,
+      ): void {
     this.editingSelectorEnded();
     if (newContent) {
       newContent = newContent.trim();