Title: [223561] trunk/Source/WebInspectorUI
- Revision
- 223561
- Author
- nvasil...@apple.com
- Date
- 2017-10-17 11:39:47 -0700 (Tue, 17 Oct 2017)
Log Message
Web Inspector: Styles: Command-click on a property name should jump to definition in Resources tab
https://bugs.webkit.org/show_bug.cgi?id=174329
<rdar://problem/33225564>
Reviewed by Joseph Pecoraro.
* UserInterface/Base/Main.js:
Add "meta-key-pressed" class to <body> when Command key is pressed.
* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
(.meta-key-pressed .spreadsheet-css-declaration:not(.locked) :matches(.name, .value):not(.editing):hover):
Use the same styles as in CodeMirrorTokenTrackingController.css.
* UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty.prototype._update):
(WI.SpreadsheetStyleProperty.prototype._setupJumpToSymbol):
This is very similar to WI.CSSStyleDeclarationTextEditor.prototype.tokenTrackingControllerHighlightedRangeWasClicked,
except it doesn't include special cases for CSS variables and links yet.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (223560 => 223561)
--- trunk/Source/WebInspectorUI/ChangeLog 2017-10-17 18:33:21 UTC (rev 223560)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-10-17 18:39:47 UTC (rev 223561)
@@ -1,3 +1,24 @@
+2017-10-17 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: Styles: Command-click on a property name should jump to definition in Resources tab
+ https://bugs.webkit.org/show_bug.cgi?id=174329
+ <rdar://problem/33225564>
+
+ Reviewed by Joseph Pecoraro.
+
+ * UserInterface/Base/Main.js:
+ Add "meta-key-pressed" class to <body> when Command key is pressed.
+
+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
+ (.meta-key-pressed .spreadsheet-css-declaration:not(.locked) :matches(.name, .value):not(.editing):hover):
+ Use the same styles as in CodeMirrorTokenTrackingController.css.
+
+ * UserInterface/Views/SpreadsheetStyleProperty.js:
+ (WI.SpreadsheetStyleProperty.prototype._update):
+ (WI.SpreadsheetStyleProperty.prototype._setupJumpToSymbol):
+ This is very similar to WI.CSSStyleDeclarationTextEditor.prototype.tokenTrackingControllerHighlightedRangeWasClicked,
+ except it doesn't include special cases for CSS variables and links yet.
+
2017-10-16 Nikita Vasilyev <nvasil...@apple.com>
Web Inspector: Styles Redesign: apply syntax highlighting to property values
Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Main.js (223560 => 223561)
--- trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2017-10-17 18:33:21 UTC (rev 223560)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2017-10-17 18:39:47 UTC (rev 223561)
@@ -1451,10 +1451,14 @@
WI._updateModifierKeys = function(event)
{
- var didChange = this.modifierKeys.altKey !== event.altKey || this.modifierKeys.metaKey !== event.metaKey || this.modifierKeys.shiftKey !== event.shiftKey;
+ let metaKeyDidChange = this.modifierKeys.metaKey !== event.metaKey;
+ let didChange = this.modifierKeys.altKey !== event.altKey || metaKeyDidChange || this.modifierKeys.shiftKey !== event.shiftKey;
this.modifierKeys = {altKey: event.altKey, metaKey: event.metaKey, shiftKey: event.shiftKey};
+ if (metaKeyDidChange)
+ document.body.classList.toggle("meta-key-pressed", this.modifierKeys.metaKey);
+
if (didChange)
this.notifications.dispatchEventToListeners(WI.Notification.GlobalModifierKeysDidChange, event);
};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css (223560 => 223561)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css 2017-10-17 18:33:21 UTC (rev 223560)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css 2017-10-17 18:39:47 UTC (rev 223561)
@@ -107,3 +107,10 @@
.spreadsheet-style-declaration-editor .property:not(.disabled) .token-string {
color: var(--syntax-highlight-string-color);
}
+
+.meta-key-pressed .spreadsheet-css-declaration:not(.locked) :matches(.name, .value):not(.editing):hover {
+ color: blue !important;
+ text-decoration: underline !important;
+ cursor: pointer !important;
+ -webkit-text-stroke-width: 0 !important;
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js (223560 => 223561)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2017-10-17 18:33:21 UTC (rev 223560)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2017-10-17 18:39:47 UTC (rev 223561)
@@ -161,6 +161,11 @@
this._valueTextField = new WI.SpreadsheetTextField(this, this._valueElement, this._valueCompletionDataProvider.bind(this));
}
+ if (this._property.editable) {
+ this._setupJumpToSymbol(this._nameElement);
+ this._setupJumpToSymbol(this._valueElement);
+ }
+
this.element.append(";");
if (!this._property.enabled)
@@ -282,6 +287,35 @@
{
return WI.CSSKeywordCompletions.forProperty(this._property.name).startsWith(prefix);
}
+
+ _setupJumpToSymbol(element)
+ {
+ element.addEventListener("mousedown", (event) => {
+ if (event.button !== 0)
+ return;
+
+ if (!WI.modifierKeys.metaKey)
+ return;
+
+ if (element.isContentEditable)
+ return;
+
+ let sourceCodeLocation = null;
+ if (this._property.ownerStyle.ownerRule)
+ sourceCodeLocation = this._property.ownerStyle.ownerRule.sourceCodeLocation;
+
+ if (!sourceCodeLocation)
+ return;
+
+ let range = this._property.styleSheetTextRange;
+ const options = {
+ ignoreNetworkTab: true,
+ ignoreSearchTab: true,
+ };
+ let sourceCode = sourceCodeLocation.sourceCode;
+ WI.showSourceCodeLocation(sourceCode.createSourceCodeLocation(range.startLine, range.startColumn), options);
+ });
+ }
};
WI.SpreadsheetStyleProperty.CommitCoalesceDelay = 250;
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
