Title: [223333] trunk/Source/WebInspectorUI
- Revision
- 223333
- Author
- nvasil...@apple.com
- Date
- 2017-10-15 20:42:06 -0700 (Sun, 15 Oct 2017)
Log Message
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):
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (223332 => 223333)
--- trunk/Source/WebInspectorUI/ChangeLog 2017-10-16 02:59:07 UTC (rev 223332)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-10-16 03:42:06 UTC (rev 223333)
@@ -1,3 +1,44 @@
+2017-10-15 Nikita Vasilyev <nvasil...@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 <nvasil...@apple.com>
REGRESSION (r223310): Web Inspector: Class list container is transparent and unreadable
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css (223332 => 223333)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css 2017-10-16 02:59:07 UTC (rev 223332)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css 2017-10-16 03:42:06 UTC (rev 223333)
@@ -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; }
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js (223332 => 223333)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js 2017-10-16 02:59:07 UTC (rev 223332)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js 2017-10-16 03:42:06 UTC (rev 223333)
@@ -104,6 +104,47 @@
}
}
+ 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);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js (223332 => 223333)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js 2017-10-16 02:59:07 UTC (rev 223332)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js 2017-10-16 03:42:06 UTC (rev 223333)
@@ -104,6 +104,21 @@
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();
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js (223332 => 223333)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js 2017-10-16 02:59:07 UTC (rev 223332)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js 2017-10-16 03:42:06 UTC (rev 223333)
@@ -129,6 +129,29 @@
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);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js (223332 => 223333)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2017-10-16 02:59:07 UTC (rev 223332)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2017-10-16 03:42:06 UTC (rev 223333)
@@ -42,6 +42,8 @@
this._nameTextField = null;
this._valueTextField = null;
+ this._property.__propertyView = this;
+
this._update();
property.addEventListener(WI.CSSProperty.Event.OverriddenStatusChanged, this._update, this);
}
@@ -54,6 +56,8 @@
detached()
{
+ this._property.__propertyView = null;
+
if (this._nameTextField)
this._nameTextField.detached();
@@ -61,6 +65,11 @@
this._valueTextField.detached();
}
+ highlight()
+ {
+ this._element.classList.add("highlighted");
+ }
+
// Private
_remove()
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
