Web Inspector: Don't use -webkit-user-modify CSS property

[Nikita Vasilyev]

Replace -webkit-user-modify CSS property with contentEditable HTML attribute.

According to rniwa, -webkit-user-modify CSS property is slow and shouldn't be used.

In addition to this, it has been deprecated in Chrome: https://www.chromestatus.com/feature/4725222129270784

[Nikita Vasilyev]

It is currently used in two places:

Editing.css:
.editing {
    -webkit-user-modify: read-write-plaintext-only;
}

VisualStyleSelectorTreeItem.css:
.item.visual-style-selector-item:not(.dom-element-icon).editable > .titles > .title {
    -webkit-user-modify: read-write-plaintext-only;
}

Both should use contenteditable="plaintext-only" HTML attribute instead.

[Nikita Vasilyev]

Created attachment 312697 [details]
Patch

[Devin Rousso]

Comment on attachment 312697 [details]
Patch

r=me

View in context: https://bugs.webkit.org/attachment.cgi?id=312697&action=review

> Source/WebInspectorUI/UserInterface/Views/EditingSupport.js:153
> +        element.contentEditable = false;

NIT: I think this should be `this.contentEditable = false;` to match the previous line.

> Source/WebInspectorUI/UserInterface/Views/EditingSupport.js:279
> +            if (container.parentNode.contentEditable) {

NIT: I think that using the `classList.contains("editing")` is more specific than just checking for "contentEditable".  I would leave this as it was.

> Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.js:242
> +        this._mainTitleElement.contentEditable = this.selected ? "plaintext-only" : false;

NIT: I think this should be moved after the next line to keep consistent ordering between `this._listItemNode` and `this._mainTitleElement`.

[Nikita Vasilyev]

Created attachment 312796 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 312796 [details]
Patch

Clearing flags on attachment: 312796

Committed r218202: <http://trac.webkit.org/changeset/218202>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.