Web Inspector: Styles: Command-click on a property name should jump to definition...
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 17 Oct 2017 18:39:47 +0000 (18:39 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 17 Oct 2017 18:39:47 +0000 (18:39 +0000)
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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@223561 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Base/Main.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js

index cd34bb9..00d7b2e 100644 (file)
@@ -1,3 +1,24 @@
+2017-10-17  Nikita Vasilyev  <nvasilyev@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  <nvasilyev@apple.com>
 
         Web Inspector: Styles Redesign: apply syntax highlighting to property values
index cb13144..4a070c2 100644 (file)
@@ -1451,10 +1451,14 @@ WI._windowResized = function(event)
 
 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);
 };
index 6cf83fd..8de4721 100644 (file)
 .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;
+}
index 6176f61..b25a0f1 100644 (file)
@@ -161,6 +161,11 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
             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 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
     {
         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;