Bug 174329 – Web Inspector: [PARITY] Styles: Command-click on a property name should jump to definition in Resources tab

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

[Nikita Vasilyev]

In Rules panel, clicking on a CSS property while holding Command key, should navigate to corresponding line number in Resources tab.
Currently, we use Option-click for that. Command-click inserts a second text caret (implemented by CodeMirror).

[Radar WebKit Bug Importer]

<rdar://problem/33225564>

[Nikita Vasilyev]

Created attachment 323794 [details]
Patch

[Nikita Vasilyev]

Created attachment 323795 [details]
[Animated GIF] With patch applied

[Joseph Pecoraro]

Comment on attachment 323794 [details]
Patch

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

> Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js:265
> +            let range = this._property.styleSheetTextRange;
> +            const options = {
> +                ignoreNetworkTab: true,
> +                ignoreSearchTab: true,
> +            };
> +            let sourceCode = sourceCodeLocation.sourceCode;
> +            WI.showSourceCodeLocation(sourceCode.createSourceCodeLocation(range.startLine, range.startColumn), options);

This looks like it would always take you to the styleSheetTextRange's start. But what would be more useful would be the key/value you clicked on's location. This is most useful when using Sass/Less with SourceMaps. Individual properties within a rule might come from a Mixin, and using the location of the property itself will get your to that Mixin's definition but other normal properties would take you to the rule's definition.

[Nikita Vasilyev]

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

>> Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js:265
>> +            WI.showSourceCodeLocation(sourceCode.createSourceCodeLocation(range.startLine, range.startColumn), options);
> 
> This looks like it would always take you to the styleSheetTextRange's start. But what would be more useful would be the key/value you clicked on's location. This is most useful when using Sass/Less with SourceMaps. Individual properties within a rule might come from a Mixin, and using the location of the property itself will get your to that Mixin's definition but other normal properties would take you to the rule's definition.

This takes you to the property start (e.g. property name). This is what the current styles sidebar does, I pretty much copy/pasted the code from WI.CSSStyleDeclarationTextEditor.prototype.tokenTrackingControllerHighlightedRangeWasClicked.

I agree this can be improved. Currently, there's CSSProperty.prototype._styleSheetTextRange, but no range for property value, AFAIK. I'd prefer to work on it later in a follow up issue.

[Joseph Pecoraro]

(In reply to Nikita Vasilyev from comment #5)
> This takes you to the property start (e.g. property name).

Ahh! I misread, I thought it was the rule's start. This should be good enough to get expected behavior.

[Joseph Pecoraro]

Comment on attachment 323794 [details]
Patch

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

r=me

> Source/WebInspectorUI/UserInterface/Base/Main.js:1460
> +    if (metaKeyDidChange)
> +        document.body.classList.toggle("meta-key-pressed", this.modifierKeys.metaKey);

I wonder how this will affect style recalculations changing a global property like this. Lets keep an eye out for any possible stutters after this lands.

[WebKit Commit Bot]

Comment on attachment 323794 [details]
Patch

Clearing flags on attachment: 323794

Committed r223561: <https://trac.webkit.org/changeset/223561>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.