Bug 178795 – Web Inspector: Styles Redesign: typing colon in property name should advance to value field

• Status: RESOLVED
• Resolution: FIXED
• Component: Web Inspector

[Blaze Burg]

Steps to Reproduce:
1. Open style rules for an element
2. Add a new property name, add trailing :
3. Tab to the next field
=> property has two colons, should just have one and advance

I don't think it's valid to have a colon in a property name, especially at the end, so the editor should be nice and ignore the keystroke while advancing to the next field. If you are used to typing out a complete property: value; string, then it will just do the right thing.

This is similar to https://bugs.webkit.org/show_bug.cgi?id=178498, but for properties.

[Radar WebKit Bug Importer]

<rdar://problem/35174674>

[Nikita Vasilyev]

Created attachment 326953 [details]
Patch

Typing colon ANYWHERE in the property name advances to value field. This matches Chrome and Firefox.

I could remove text on the right side of colon and prepend it to property value. I wasn't sure if it's useful, so I didn't do it in this patch.

[Devin Rousso]

Comment on attachment 326953 [details]
Patch

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

r=me

> Source/WebInspectorUI/ChangeLog:29
> +        (WI.SpreadsheetTextField):

NIT: this should be at the beginning of the WI.SpreadsheetTextField list.  This happens to me every once in a while for some reason ¯\_(ツ)_/¯

> Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js:177
> +            this._nameElement.addEventListener("beforeinput", (event) => {

Since you are adding the event listener to the element itself, I'd reorder these.

    this._nameElement.tabIndex = 0;
    this._nameElement.addEventListener("beforeinput", this._handleNameBeforeinput.bind(this));

    this._nameTextField = new WI.SpreadsheetTextField(this, this._nameElement, this._nameCompletionDataProvider.bind(this));

I'd also suggest moving the callback to be a member function.  I typically try to only use inline event listeners for extremely small (effectively one line) callbacks, or contextmenu stuff.

[Nikita Vasilyev]

Created attachment 327023 [details]
Patch

[WebKit Commit Bot]

The commit-queue encountered the following flaky tests while processing attachment 327023 [details]:

The commit-queue is continuing to process your patch.

[WebKit Commit Bot]

Comment on attachment 327023 [details]
Patch

Clearing flags on attachment: 327023

Committed r224906: <https://trac.webkit.org/changeset/224906>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.