- Revision
- 223970
- Author
- nvasil...@apple.com
- Date
- 2017-10-25 12:02:28 -0700 (Wed, 25 Oct 2017)
Log Message
Web Inspector: Styles Redesign: Newly added invalid property isn't immediately shown as invalid
https://bugs.webkit.org/show_bug.cgi?id=178488
Reviewed by Brian Burg.
* UserInterface/Models/CSSStyleDeclaration.js:
(WI.CSSStyleDeclaration.prototype.newBlankProperty):
Call this.update to update _properties, _allProperties, _visibleProperties, and _allVisibleProperties.
* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
(.spreadsheet-style-declaration-editor .property:matches(.invalid-name, .other-vendor, .overridden):not(.disabled)):
(.spreadsheet-style-declaration-editor .property.invalid-name:not(.disabled)):
(.spreadsheet-style-declaration-editor .property.invalid-value:not(.disabled) .value):
When the property name is valid, but the value isn't, display red line-through only for the value.
This is how it works in the old styles sidebar as well.
* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype._propertiesChanged):
(WI.SpreadsheetCSSStyleDeclarationEditor):
* UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty):
(WI.SpreadsheetStyleProperty.prototype.updateClassNames):
(WI.SpreadsheetStyleProperty.prototype._update):
Introduce updateClassNames method. Unlike _update, it doesn't change text selection or focus and
can be safely called on a property while it's being edited.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (223969 => 223970)
--- trunk/Source/WebInspectorUI/ChangeLog 2017-10-25 19:01:41 UTC (rev 223969)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-10-25 19:02:28 UTC (rev 223970)
@@ -1,3 +1,31 @@
+2017-10-25 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: Styles Redesign: Newly added invalid property isn't immediately shown as invalid
+ https://bugs.webkit.org/show_bug.cgi?id=178488
+
+ Reviewed by Brian Burg.
+
+ * UserInterface/Models/CSSStyleDeclaration.js:
+ (WI.CSSStyleDeclaration.prototype.newBlankProperty):
+ Call this.update to update _properties, _allProperties, _visibleProperties, and _allVisibleProperties.
+
+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
+ (.spreadsheet-style-declaration-editor .property:matches(.invalid-name, .other-vendor, .overridden):not(.disabled)):
+ (.spreadsheet-style-declaration-editor .property.invalid-name:not(.disabled)):
+ (.spreadsheet-style-declaration-editor .property.invalid-value:not(.disabled) .value):
+ When the property name is valid, but the value isn't, display red line-through only for the value.
+ This is how it works in the old styles sidebar as well.
+
+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype._propertiesChanged):
+ (WI.SpreadsheetCSSStyleDeclarationEditor):
+ * UserInterface/Views/SpreadsheetStyleProperty.js:
+ (WI.SpreadsheetStyleProperty):
+ (WI.SpreadsheetStyleProperty.prototype.updateClassNames):
+ (WI.SpreadsheetStyleProperty.prototype._update):
+ Introduce updateClassNames method. Unlike _update, it doesn't change text selection or focus and
+ can be safely called on a property while it's being edited.
+
2017-10-25 Devin Rousso <web...@devinrousso.com>
Web Inspector: preserve Recordings for each Canvas after closing the Canvas tab
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js (223969 => 223970)
--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js 2017-10-25 19:01:41 UTC (rev 223969)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js 2017-10-25 19:02:28 UTC (rev 223970)
@@ -361,11 +361,16 @@
{
let text, name, value, priority, overridden, implicit, anonymous;
let enabled = true;
- let valid = true;
+ let valid = false;
let styleSheetTextRange = this._rangeAfterPropertyAtIndex(insertAfterIndex);
- let property = new WI.CSSProperty(insertAfterIndex + 1, text, name, value, priority, enabled, overridden, implicit, anonymous, valid, styleSheetTextRange);
- property.ownerStyle = this;
+ let propertyIndex = insertAfterIndex + 1;
+ let property = new WI.CSSProperty(propertyIndex, text, name, value, priority, enabled, overridden, implicit, anonymous, valid, styleSheetTextRange);
+
+ this._allProperties.insertAtIndex(property, propertyIndex);
+ const suppressEvents = true;
+ this.update(this._text, this._allProperties, this._styleSheetTextRange, suppressEvents);
+
return property;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css (223969 => 223970)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css 2017-10-25 19:01:41 UTC (rev 223969)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css 2017-10-25 19:02:28 UTC (rev 223970)
@@ -75,15 +75,20 @@
color: var(--syntax-highlight-comment-color) !important;
}
-.spreadsheet-style-declaration-editor .property:matches(.invalid, .other-vendor, .overridden):not(.disabled) {
+.spreadsheet-style-declaration-editor .property:matches(.invalid-name, .other-vendor, .overridden):not(.disabled) {
text-decoration: line-through;
-webkit-text-decoration-color: hsla(0, 0%, 0%, 0.6);
}
-.spreadsheet-style-declaration-editor .property.invalid:not(.disabled) {
- -webkit-text-decoration-color: hsla(0, 100%, 50%, 0.6);
+.spreadsheet-style-declaration-editor .property.invalid-name:not(.disabled) {
+ -webkit-text-decoration-color: hsla(0, 100%, 50%, 0.5);
}
+.spreadsheet-style-declaration-editor .property.invalid-value:not(.disabled) .value {
+ text-decoration: line-through;
+ -webkit-text-decoration-color: hsla(0, 100%, 50%, 0.5);
+}
+
.spreadsheet-style-declaration-editor .property.not-inherited {
opacity: 0.5;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js (223969 => 223970)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js 2017-10-25 19:01:41 UTC (rev 223969)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js 2017-10-25 19:02:28 UTC (rev 223970)
@@ -221,7 +221,10 @@
_propertiesChanged(event)
{
- if (!this._isFocused())
+ if (this._isFocused()) {
+ for (let propertyView of this._propertyViews)
+ propertyView.updateClassNames();
+ } else
this.needsLayout();
}
};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js (223969 => 223970)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2017-10-25 19:01:41 UTC (rev 223969)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2017-10-25 19:02:28 UTC (rev 223970)
@@ -46,6 +46,7 @@
this._update();
property.addEventListener(WI.CSSProperty.Event.OverriddenStatusChanged, this._update, this);
+ property.addEventListener(WI.CSSProperty.Event.Changed, this.updateClassNames, this);
}
// Public
@@ -70,23 +71,8 @@
this._element.classList.add("highlighted");
}
- // Private
-
- _remove()
+ updateClassNames()
{
- this.element.remove();
- this._property.remove();
- this.detached();
-
- if (this._delegate && typeof this._delegate.spreadsheetStylePropertyRemoved === "function")
- this._delegate.spreadsheetStylePropertyRemoved(this);
- }
-
- _update()
- {
- this.element.removeChildren();
- this.element.className = "";
-
let duplicatePropertyExistsBelow = (cssProperty) => {
let propertyFound = false;
@@ -113,20 +99,40 @@
if (!this._property.valid && this._property.hasOtherVendorNameOrKeyword())
classNames.push("other-vendor");
- else if (!this._property.valid) {
+ else if (!this._property.valid && this._property.value !== "") {
let propertyNameIsValid = false;
if (WI.CSSCompletions.cssNameCompletions)
propertyNameIsValid = WI.CSSCompletions.cssNameCompletions.isValidPropertyName(this._property.name);
if (!propertyNameIsValid || duplicatePropertyExistsBelow(this._property))
- classNames.push("invalid");
+ classNames.push("invalid-name");
+ else
+ classNames.push("invalid-value");
}
if (!this._property.enabled)
classNames.push("disabled");
- this._element.classList.add(...classNames);
+ this._element.className = classNames.join(" ");
+ }
+ // Private
+
+ _remove()
+ {
+ this.element.remove();
+ this._property.remove();
+ this.detached();
+
+ if (this._delegate && typeof this._delegate.spreadsheetStylePropertyRemoved === "function")
+ this._delegate.spreadsheetStylePropertyRemoved(this);
+ }
+
+ _update()
+ {
+ this.element.removeChildren();
+ this.updateClassNames();
+
if (this._property.editable) {
this._checkboxElement = this.element.appendChild(document.createElement("input"));
this._checkboxElement.classList.add("property-toggle");
