Web Inspector: [PARITY] Styles Redesign: clicking on the go-to arrow …

…in Computed tab should work https://bugs.webkit.org/show_bug.cgi?id=178286 <rdar://problem/34986379> Reviewed by Joseph Pecoraro. Highlight the matching property using a yellow background and focus on the property value if the property is editable (e.g., not a User Agent style). * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css: (.spreadsheet-style-declaration-editor): (.spreadsheet-style-declaration-editor .property): Move left padding to the property element so there's no awkward gap on the left side when the property is highlighted. (.spreadsheet-style-declaration-editor .property.highlighted): (@Keyframes style-property-highlight): Use the same animation duration as we used in `.text-editor > .CodeMirror .highlighted`. The highlight color was changed from light blue to yellow. * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js: (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.highlightProperty): Use the same logic as in WI.CSSStyleDeclarationTextEditor.prototype.highlightProperty to find matching style property to highlight. * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js: (WI.SpreadsheetCSSStyleDeclarationSection.prototype.highlightProperty): Use the same logic as in WI.CSSStyleDeclarationSection.prototype.highlightProperty. * UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js: (WI.SpreadsheetRulesStyleDetailsPanel.prototype.scrollToSectionAndHighlightProperty): (WI.SpreadsheetRulesStyleDetailsPanel.prototype.nodeStylesRefreshed): Copied from WI.RulesStyleDetailsPanel. * UserInterface/Views/SpreadsheetStyleProperty.js: (WI.SpreadsheetStyleProperty): (WI.SpreadsheetStyleProperty.prototype.detached): (WI.SpreadsheetStyleProperty.prototype.highlight): Canonical link: https://commits.webkit.org/194540@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@223333 268f45cc-cd09-0410-ab3c-d52691b4dbfc
WebKit · Oct 16, 2017 · 0cbf28c · 0cbf28c
1 parent 89f8886
commit 0cbf28c
Show file tree

Hide file tree

Showing 6 changed files with 141 additions and 1 deletion.
diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
@@ -1,3 +1,44 @@
+2017-10-15  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: [PARITY] Styles Redesign: clicking on the go-to arrow in Computed tab should work
+        https://bugs.webkit.org/show_bug.cgi?id=178286
+        <rdar://problem/34986379>
+
+        Reviewed by Joseph Pecoraro.
+
+        Highlight the matching property using a yellow background and focus on the property value
+        if the property is editable (e.g., not a User Agent style).
+
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
+        (.spreadsheet-style-declaration-editor):
+        (.spreadsheet-style-declaration-editor .property):
+        Move left padding to the property element so there's no awkward gap on the left side
+        when the property is highlighted.
+
+        (.spreadsheet-style-declaration-editor .property.highlighted):
+        (@keyframes style-property-highlight):
+        Use the same animation duration as we used in `.text-editor > .CodeMirror .highlighted`.
+        The highlight color was changed from light blue to yellow.
+
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.highlightProperty):
+        Use the same logic as in WI.CSSStyleDeclarationTextEditor.prototype.highlightProperty
+        to find matching style property to highlight.
+
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
+        (WI.SpreadsheetCSSStyleDeclarationSection.prototype.highlightProperty):
+        Use the same logic as in WI.CSSStyleDeclarationSection.prototype.highlightProperty.
+
+        * UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:
+        (WI.SpreadsheetRulesStyleDetailsPanel.prototype.scrollToSectionAndHighlightProperty):
+        (WI.SpreadsheetRulesStyleDetailsPanel.prototype.nodeStylesRefreshed):
+        Copied from WI.RulesStyleDetailsPanel.
+
+        * UserInterface/Views/SpreadsheetStyleProperty.js:
+        (WI.SpreadsheetStyleProperty):
+        (WI.SpreadsheetStyleProperty.prototype.detached):
+        (WI.SpreadsheetStyleProperty.prototype.highlight):
+
 2017-10-14  Nikita Vasilyev  <nvasilyev@apple.com>
 
         REGRESSION (r223310): Web Inspector: Class list container is transparent and unreadable

diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
@@ -25,10 +25,13 @@
 
 .spreadsheet-style-declaration-editor {
     position: relative;
-    padding-left: 17px;
     clear: both;
 }
 
+.spreadsheet-style-declaration-editor .property {
+    padding-left: 17px;
+}
+
 .spreadsheet-style-declaration-editor .name {
     color: var(--syntax-highlight-boolean-color);
 }
@@ -88,3 +91,11 @@
 .spreadsheet-style-declaration-editor .completion-hint {
     color: hsl(0, 0%, 50%) !important;
 }
+
+.spreadsheet-style-declaration-editor .property.highlighted {
+    animation: style-property-highlight 2s;
+}
+
+@keyframes style-property-highlight {
+    from { background-color: yellow; }
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js
@@ -104,6 +104,47 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
         }
     }
 
+    highlightProperty(property)
+    {
+        let propertiesMatch = (cssProperty) => {
+            if (cssProperty.attached && !cssProperty.overridden) {
+                if (cssProperty.canonicalName === property.canonicalName || hasMatchingLonghandProperty(cssProperty))
+                    return true;
+            }
+
+            return false;
+        };
+
+        let hasMatchingLonghandProperty = (cssProperty) => {
+            let cssProperties = cssProperty.relatedLonghandProperties;
+
+            if (!cssProperties.length)
+                return false;
+
+            for (let property of cssProperties) {
+                if (propertiesMatch(property))
+                    return true;
+            }
+
+            return false;
+        };
+
+        for (let cssProperty of this.style.properties) {
+            if (propertiesMatch(cssProperty)) {
+                let propertyView = cssProperty.__propertyView;
+                if (propertyView) {
+                    propertyView.highlight();
+
+                    if (cssProperty.editable)
+                        propertyView.valueTextField.startEditing();
+                }
+                return true;
+            }
+        }
+
+        return false;
+    }
+
     spreadsheetCSSStyleDeclarationEditorFocusMoved({direction, movedFromProperty, willRemoveProperty})
     {
         let movedFromIndex = this._propertyViews.indexOf(movedFromProperty);

diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js
@@ -104,6 +104,21 @@ WI.SpreadsheetCSSStyleDeclarationSection = class SpreadsheetCSSStyleDeclarationS
         this._selectorElement.focus();
     }
 
+    highlightProperty(property)
+    {
+        // When navigating from the Computed panel to the Styles panel, the latter
+        // could be empty. Layout all properties so they can be highlighted.
+        if (!this.didInitialLayout)
+            this.updateLayout();
+
+        if (this._propertiesEditor.highlightProperty(property)) {
+            this._element.scrollIntoView();
+            return true;
+        }
+
+        return false;
+    }
+
     cssStyleDeclarationTextEditorStartEditingRuleSelector()
     {
         this.startEditingRuleSelector();

diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js
@@ -129,6 +129,29 @@ WI.SpreadsheetRulesStyleDetailsPanel = class SpreadsheetRulesStyleDetailsPanel e
         super.refresh(significantChange);
     }
 
+    scrollToSectionAndHighlightProperty(property)
+    {
+        if (!this._visible) {
+            this._propertyToSelectAndHighlight = property;
+            return;
+        }
+
+        for (let section of this._sections) {
+            if (section.highlightProperty(property))
+                return;
+        }
+    }
+
+    nodeStylesRefreshed(event)
+    {
+        super.nodeStylesRefreshed(event);
+
+        if (this._propertyToSelectAndHighlight) {
+            this.scrollToSectionAndHighlightProperty(this._propertyToSelectAndHighlight);
+            this._propertyToSelectAndHighlight = null;
+        }
+    }
+
     cssStyleDeclarationSectionStartEditingNextRule(currentSection)
     {
         let currentIndex = this._sections.indexOf(currentSection);

diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js
@@ -42,6 +42,8 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
         this._nameTextField = null;
         this._valueTextField = null;
 
+        this._property.__propertyView = this;
+
         this._update();
         property.addEventListener(WI.CSSProperty.Event.OverriddenStatusChanged, this._update, this);
     }
@@ -54,13 +56,20 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
 
     detached()
     {
+        this._property.__propertyView = null;
+
         if (this._nameTextField)
             this._nameTextField.detached();
 
         if (this._valueTextField)
             this._valueTextField.detached();
     }
 
+    highlight()
+    {
+        this._element.classList.add("highlighted");
+    }
+
     // Private
 
     _remove()