Title: [222547] trunk/Source/WebInspectorUI
- Revision
- 222547
- Author
- nvasil...@apple.com
- Date
- 2017-09-26 19:54:36 -0700 (Tue, 26 Sep 2017)
Log Message
Web Inspector: Styles Redesign: Style unused, overridden, and invalid properties differently
https://bugs.webkit.org/show_bug.cgi?id=177461
Reviewed by Matt Baker.
Style properties the same way as in the current styles sidebar with two minor changes:
- Commented out properties are never strikethrough.
- Non-inherited properties of inherited rules are no longer strikethrough (but still semi-transparent).
* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
(.spreadsheet-style-declaration-editor .property:matches(.invalid, .other-vendor, .overridden):not(.disabled)):
Use the same styles as in the old sidebar, with exception of `-webkit-text-stroke-width: 0.000000000000001px`
hack, which was replaced by -webkit-text-decoration-color.
(.spreadsheet-style-declaration-editor .property.invalid:not(.disabled)):
(.spreadsheet-style-declaration-editor .property.not-inherited):
* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
(WI.SpreadsheetStyleProperty):
(WI.SpreadsheetStyleProperty.prototype._update):
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (222546 => 222547)
--- trunk/Source/WebInspectorUI/ChangeLog 2017-09-27 02:54:16 UTC (rev 222546)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-09-27 02:54:36 UTC (rev 222547)
@@ -1,3 +1,25 @@
+2017-09-26 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: Styles Redesign: Style unused, overridden, and invalid properties differently
+ https://bugs.webkit.org/show_bug.cgi?id=177461
+
+ Reviewed by Matt Baker.
+
+ Style properties the same way as in the current styles sidebar with two minor changes:
+ - Commented out properties are never strikethrough.
+ - Non-inherited properties of inherited rules are no longer strikethrough (but still semi-transparent).
+
+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
+ (.spreadsheet-style-declaration-editor .property:matches(.invalid, .other-vendor, .overridden):not(.disabled)):
+ Use the same styles as in the old sidebar, with exception of `-webkit-text-stroke-width: 0.000000000000001px`
+ hack, which was replaced by -webkit-text-decoration-color.
+
+ (.spreadsheet-style-declaration-editor .property.invalid:not(.disabled)):
+ (.spreadsheet-style-declaration-editor .property.not-inherited):
+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
+ (WI.SpreadsheetStyleProperty):
+ (WI.SpreadsheetStyleProperty.prototype._update):
+
2017-09-26 Joseph Pecoraro <pecor...@apple.com>
Web Inspector: Improve Table scrolling performance
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css (222546 => 222547)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css 2017-09-27 02:54:16 UTC (rev 222546)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css 2017-09-27 02:54:36 UTC (rev 222547)
@@ -64,3 +64,16 @@
.spreadsheet-style-declaration-editor .property.disabled > * {
color: var(--syntax-highlight-comment-color) !important;
}
+
+.spreadsheet-style-declaration-editor .property:matches(.invalid, .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.not-inherited {
+ opacity: 0.5;
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js (222546 => 222547)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js 2017-09-27 02:54:16 UTC (rev 222546)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js 2017-09-27 02:54:36 UTC (rev 222547)
@@ -85,7 +85,6 @@
this._property = property;
this._element = document.createElement("div");
- this._element.classList.add("property");
this._update();
}
@@ -99,8 +98,48 @@
_update()
{
this.element.removeChildren();
- this.element.classList.toggle("disabled", !this._property.enabled);
+ this.element.className = "";
+ let duplicatePropertyExistsBelow = (cssProperty) => {
+ let propertyFound = false;
+
+ for (let property of this._property.ownerStyle.properties) {
+ if (property === cssProperty)
+ propertyFound = true;
+ else if (property.name === cssProperty.name && propertyFound)
+ return true;
+ }
+
+ return false;
+ };
+
+ let classNames = ["property"];
+
+ if (this._property.overridden)
+ classNames.push("overridden");
+
+ if (this._property.implicit)
+ classNames.push("implicit");
+
+ if (this._property.ownerStyle.inherited && !this._property.inherited)
+ classNames.push("not-inherited");
+
+ if (!this._property.valid && this._property.hasOtherVendorNameOrKeyword())
+ classNames.push("other-vendor");
+ else if (!this._property.valid) {
+ let propertyNameIsValid = false;
+ if (WI.CSSCompletions.cssNameCompletions)
+ propertyNameIsValid = WI.CSSCompletions.cssNameCompletions.isValidPropertyName(this._property.name);
+
+ if (!propertyNameIsValid || duplicatePropertyExistsBelow(this._property))
+ classNames.push("invalid");
+ }
+
+ if (!this._property.enabled)
+ classNames.push("disabled");
+
+ this._element.classList.add(...classNames);
+
if (this._property.editable) {
this._checkboxElement = this.element.appendChild(document.createElement("input"));
this._checkboxElement.classList.add("property-toggle");
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
