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).
<rdar://problem/33225564>
Created attachment 323794 [details] Patch
Created attachment 323795 [details] [Animated GIF] With patch applied
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.
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.
(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.
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.
Comment on attachment 323794 [details] Patch Clearing flags on attachment: 323794 Committed r223561: <https://trac.webkit.org/changeset/223561>
All reviewed patches have been landed. Closing bug.