chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

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

@@ -38,6 +38,10 @@ const UIStrings = {
    * @description Similar with forceElementState but allows users to force specific state of the selected element.
    */
   forceElementSpecificStates: 'Force specific element state',
+  /**
+   *@description Text that is usually a hyperlink to more documentation
+   */
+  learnMore: 'Learn more',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/elements/ElementStatePaneWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -64,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;
@@ -76,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');
@@ -92,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');
@@ -106,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');
@@ -125,6 +139,7 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
         iconName: 'help',
         size: Buttons.Button.Size.SMALL,
         jslogContext: 'learn-more',
+        title: i18nString(UIStrings.learnMore),
       };
       learnMoreButton.addEventListener(
           'click',
@@ -205,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');
 
@@ -282,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> => {
@@ -295,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);
@@ -314,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);
@@ -323,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/ElementsPanel.ts

@@ -110,7 +110,7 @@ const UIStrings = {
   /**
    * @description A context menu item to reveal a node in the DOM tree of the Elements Panel
    */
-  revealInElementsPanel: 'Reveal in Elements panel',
+  openInElementsPanel: 'Open in Elements panel',
   /**
    * @description Warning/error text displayed when a node cannot be found in the current page.
    */
@@ -1083,13 +1083,13 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     UI.ARIAUtils.setLabel(contentElement, i18nString(UIStrings.sidePanelContent));
 
     const stylesView = new UI.View.SimpleView(
-        i18nString(UIStrings.styles), /* isWebComponent */ undefined, SidebarPaneTabId.STYLES as Lowercase<string>);
+        i18nString(UIStrings.styles), /* useShadowDom */ undefined, SidebarPaneTabId.STYLES as Lowercase<string>);
     this.sidebarPaneView.appendView(stylesView);
     stylesView.element.classList.add('flex-auto');
     stylesSplitWidget.show(stylesView.element);
 
     const computedView = new UI.View.SimpleView(
-        i18nString(UIStrings.computed), /* isWebComponent */ undefined, SidebarPaneTabId.COMPUTED as Lowercase<string>);
+        i18nString(UIStrings.computed), /* useShadowDom */ undefined, SidebarPaneTabId.COMPUTED as Lowercase<string>);
     computedView.element.classList.add('composite', 'fill');
 
     tabbedPane.addEventListener(UI.TabbedPane.Events.TabSelected, tabSelected, this);
@@ -1293,7 +1293,7 @@ export class ContextMenuProvider implements
       return;
     }
     contextMenu.revealSection().appendItem(
-        i18nString(UIStrings.revealInElementsPanel), () => Common.Revealer.reveal(object),
+        i18nString(UIStrings.openInElementsPanel), () => Common.Revealer.reveal(object),
         {jslogContext: 'elements.reveal-node'});
   }
 }

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -797,7 +797,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     const isShadowRoot = this.nodeInternal.isShadowRoot();
 
     const createShortcut = UI.KeyboardShortcut.KeyboardShortcut.shortcutToString.bind(null);
-    const modifier = UI.KeyboardShortcut.Modifiers.CtrlOrMeta;
+    const modifier = UI.KeyboardShortcut.Modifiers.CtrlOrMeta.value;
     const treeOutline = this.treeOutline;
     if (!treeOutline) {
       return;
@@ -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();