Web Inspector: Add autocompletion suggestions for CSS attr based on the selected element's attributes

• Component: Web Inspector
• Status: RESOLVED FIXED

[Devin Rousso]

If the user is asking for completions inside a CSS `attr()`, we should add entries based on the existing dataset attributes of the corresponding node.

In the following example:

    <style>
        div {
            content: attr();
        }
    </style>
    <div data-test="test"></div>

If the user puts their cursor at `attr(|`, the completions list should contain "data-test".

[Devin Rousso]

Created attachment 321522 [details]
Patch

[Devin Rousso]

Created attachment 321523 [details]
[Image] After Patch is applied

[Joseph Pecoraro]

Comment on attachment 321522 [details]
Patch

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

We could use this as an opportunity to write a test for `DOMNode.prototype.attributes`, which this depends on and which we don't have any existing tests for! I suggest starting a new: LayoutTests/inspector/model/dom-node.html, then as we want to test different parts of DOMNode we just add a small method. A test for attributes can just have a few different nodes with different attributes and log their attributes + values.

> Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorCompletionController.js:589
> +            if (this._delegate && typeof this._delegate.completionControllerCSSFunctionValuesNeeded)
> +                functionCompletions = this._delegate.completionControllerCSSFunctionValuesNeeded(this, functionName, functionCompletions);

This feels a bit hacky, but its short and simple.

> Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js:402
> +                if (!attribute.name.startsWith("data-"))
> +                    continue;

attr() can be used with any attribute, not just "data-" prefixed attributes. A common usage may be `title` or `alt`:

    <style>p::before { color: blue; content: attr(title); }</style>
    <p title="Test">Hello</p>

So I think we should just push all attribute names.

I don't know how this would work with XML namespaced attributes. Maybe we should ignore those (they may also be unlikely).

[Devin Rousso]

Comment on attachment 321522 [details]
Patch

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

>> Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js:402
>> +                    continue;
> 
> attr() can be used with any attribute, not just "data-" prefixed attributes. A common usage may be `title` or `alt`:
> 
>     <style>p::before { color: blue; content: attr(title); }</style>
>     <p title="Test">Hello</p>
> 
> So I think we should just push all attribute names.
> 
> I don't know how this would work with XML namespaced attributes. Maybe we should ignore those (they may also be unlikely).

I don't know why, but I thought this was "data-*" only.  It's awesome to know otherwise :)

[Devin Rousso]

Created attachment 321616 [details]
Patch

[Devin Rousso]

Created attachment 321619 [details]
Patch

[Build Bot]

Comment on attachment 321619 [details]
Patch

Attachment 321619 [details] did not pass ios-sim-ews (ios-simulator-wk2):
Output: http://webkit-queues.webkit.org/results/4635202

New failing tests:
http/tests/cache-storage/cache-representation.https.html

[Build Bot]

Created attachment 321625 [details]
Archive of layout-test-results from ews125 for ios-simulator-wk2

The attached test failures were seen while running run-webkit-tests on the ios-sim-ews.
Bot: ews125  Port: ios-simulator-wk2  Platform: Mac OS X 10.12.6

[Devin Rousso]

Created attachment 321773 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 321773 [details]
Patch

Clearing flags on attachment: 321773

Committed r222483: <http://trac.webkit.org/changeset/222483>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Radar WebKit Bug Importer]

<rdar://problem/34693091>