Web Inspector: Styles Redesign: properties should never be semitransparent or crossed out while editing
https://bugs.webkit.org/show_bug.cgi?id=180793
<rdar://problem/36038813>
Reviewed by Devin Rousso.
* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
(.spreadsheet-style-declaration-editor .value.editing):
(.spreadsheet-style-declaration-editor .property:matches(.invalid-name, .other-vendor, .overridden):not(.disabled) .content > *):
(.spreadsheet-style-declaration-editor .property.invalid-name:not(.disabled) .content > *):
(.spreadsheet-style-declaration-editor .property.invalid-value:not(.disabled) .content .value):
(.spreadsheet-style-declaration-editor .property.not-inherited .content > *):
* UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty.prototype._update):
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@226939 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
index 62377c2..8ddf670 100644
--- a/Source/WebInspectorUI/ChangeLog
+++ b/Source/WebInspectorUI/ChangeLog
@@ -1,3 +1,20 @@
+2018-01-13 Nikita Vasilyev <nvasilyev@apple.com>
+
+ Web Inspector: Styles Redesign: properties should never be semitransparent or crossed out while editing
+ https://bugs.webkit.org/show_bug.cgi?id=180793
+ <rdar://problem/36038813>
+
+ Reviewed by Devin Rousso.
+
+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
+ (.spreadsheet-style-declaration-editor .value.editing):
+ (.spreadsheet-style-declaration-editor .property:matches(.invalid-name, .other-vendor, .overridden):not(.disabled) .content > *):
+ (.spreadsheet-style-declaration-editor .property.invalid-name:not(.disabled) .content > *):
+ (.spreadsheet-style-declaration-editor .property.invalid-value:not(.disabled) .content .value):
+ (.spreadsheet-style-declaration-editor .property.not-inherited .content > *):
+ * UserInterface/Views/SpreadsheetStyleProperty.js:
+ (WI.SpreadsheetStyleProperty.prototype._update):
+
2018-01-12 Joseph Pecoraro <pecoraro@apple.com>
Web Inspector: Drop support for iOS 7 targets
diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
index baad880..de02b57 100644
--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
@@ -50,7 +50,8 @@
.spreadsheet-style-declaration-editor .value.editing {
display: inline-block;
- margin-right: 3px;
+ position: relative;
+ z-index: 1;
}
.spreadsheet-style-declaration-editor.no-properties {
@@ -75,16 +76,16 @@
color: var(--syntax-highlight-comment-color) !important;
}
-.spreadsheet-style-declaration-editor .property:matches(.invalid-name, .other-vendor, .overridden):not(.disabled) {
+.spreadsheet-style-declaration-editor .property:matches(.invalid-name, .other-vendor, .overridden):not(.disabled) .content > * {
text-decoration: line-through;
-webkit-text-decoration-color: hsla(0, 0%, 0%, 0.6);
}
-.spreadsheet-style-declaration-editor .property.invalid-name:not(.disabled) {
+.spreadsheet-style-declaration-editor .property.invalid-name:not(.disabled) .content > * {
-webkit-text-decoration-color: hsla(0, 100%, 50%, 0.5);
}
-.spreadsheet-style-declaration-editor .property.invalid-value:not(.disabled) .value {
+.spreadsheet-style-declaration-editor .property.invalid-value:not(.disabled) .content .value {
text-decoration: line-through;
-webkit-text-decoration-color: hsla(0, 100%, 50%, 0.5);
}
@@ -114,7 +115,7 @@
-webkit-clip-path: polygon(0% 50%, 6px 0%, 100% 0%, 100% 100%, 6px 100%);
}
-.spreadsheet-style-declaration-editor .property.not-inherited {
+.spreadsheet-style-declaration-editor .property.not-inherited .content > * {
opacity: 0.5;
}
diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js
index c518b23..5112cf4 100644
--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js
+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js
@@ -172,6 +172,7 @@
}
this._contentElement = this.element.appendChild(document.createElement("span"));
+ this._contentElement.className = "content";
if (!this._property.enabled)
this._contentElement.append("/* ");
@@ -180,7 +181,8 @@
this._nameElement.classList.add("name");
this._nameElement.textContent = this._property.name;
- this._contentElement.append(": ");
+ let colonElement = this._contentElement.appendChild(document.createElement("span"));
+ colonElement.textContent = ": ";
this._valueElement = this._contentElement.appendChild(document.createElement("span"));
this._valueElement.classList.add("value");
@@ -203,7 +205,8 @@
this._setupJumpToSymbol(this._valueElement);
}
- this._contentElement.append(";");
+ let semicolonElement = this._contentElement.appendChild(document.createElement("span"));
+ semicolonElement.textContent = ";";
if (this._property.enabled) {
this._warningElement = this.element.appendChild(document.createElement("span"));
