Title: [222408] trunk/Source/WebInspectorUI
- Revision
- 222408
- Author
- [email protected]
- Date
- 2017-09-22 14:37:15 -0700 (Fri, 22 Sep 2017)
Log Message
Web Inspector: Styles Redesign: support toggling properties
https://bugs.webkit.org/show_bug.cgi?id=176643
Reviewed by Joseph Pecoraro.
Add a primitive UI to make CSS property names and values editable. Autocomplete, syntax highlighting,
and proper keyboard navigation will be added later.
Display !important when it's specified. Before this patch !important wasn't shown in the redesigned
styles sidebar.
* UserInterface/Models/CSSProperty.js:
(WI.CSSProperty.prototype.update):
(WI.CSSProperty.prototype.get name):
(WI.CSSProperty.prototype.set name):
(WI.CSSProperty.prototype.get value):
(WI.CSSProperty.prototype.get rawValue):
(WI.CSSProperty.prototype.set rawValue):
CSSProperty.prototype.value returns the same value as before. !important remains stripped.
CSSProperty.prototype.rawValue returns a raw value from the payload. It may include !important.
(WI.CSSProperty.prototype._updateStyle):
(WI.CSSProperty.prototype._updateOwnerStyleText):
(WI.CSSProperty):
* UserInterface/Models/DOMNodeStyles.js:
(WI.DOMNodeStyles.prototype._parseStylePropertyPayload):
* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
(.spreadsheet-style-declaration-editor :matches(.name, .value):focus):
* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
(WI.SpreadsheetStyleProperty.prototype._update):
(WI.SpreadsheetStyleProperty.prototype._handleNameChange):
(WI.SpreadsheetStyleProperty.prototype._handleValueChange):
(WI.SpreadsheetStyleProperty):
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (222407 => 222408)
--- trunk/Source/WebInspectorUI/ChangeLog 2017-09-22 21:29:06 UTC (rev 222407)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-09-22 21:37:15 UTC (rev 222408)
@@ -1,3 +1,39 @@
+2017-09-22 Nikita Vasilyev <[email protected]>
+
+ Web Inspector: Styles Redesign: support toggling properties
+ https://bugs.webkit.org/show_bug.cgi?id=176643
+
+ Reviewed by Joseph Pecoraro.
+
+ Add a primitive UI to make CSS property names and values editable. Autocomplete, syntax highlighting,
+ and proper keyboard navigation will be added later.
+
+ Display !important when it's specified. Before this patch !important wasn't shown in the redesigned
+ styles sidebar.
+
+ * UserInterface/Models/CSSProperty.js:
+ (WI.CSSProperty.prototype.update):
+ (WI.CSSProperty.prototype.get name):
+ (WI.CSSProperty.prototype.set name):
+ (WI.CSSProperty.prototype.get value):
+ (WI.CSSProperty.prototype.get rawValue):
+ (WI.CSSProperty.prototype.set rawValue):
+ CSSProperty.prototype.value returns the same value as before. !important remains stripped.
+ CSSProperty.prototype.rawValue returns a raw value from the payload. It may include !important.
+
+ (WI.CSSProperty.prototype._updateStyle):
+ (WI.CSSProperty.prototype._updateOwnerStyleText):
+ (WI.CSSProperty):
+ * UserInterface/Models/DOMNodeStyles.js:
+ (WI.DOMNodeStyles.prototype._parseStylePropertyPayload):
+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
+ (.spreadsheet-style-declaration-editor :matches(.name, .value):focus):
+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
+ (WI.SpreadsheetStyleProperty.prototype._update):
+ (WI.SpreadsheetStyleProperty.prototype._handleNameChange):
+ (WI.SpreadsheetStyleProperty.prototype._handleValueChange):
+ (WI.SpreadsheetStyleProperty):
+
2017-09-22 Matt Baker <[email protected]>
Web Inspector: NavigationBar should coalesce consecutive dividers when items are hidden
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js (222407 => 222408)
--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js 2017-09-22 21:29:06 UTC (rev 222407)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js 2017-09-22 21:37:15 UTC (rev 222408)
@@ -83,7 +83,7 @@
var changed = false;
if (!dontFireEvents) {
- changed = this._name !== name || this._value !== value || this._priority !== priority ||
+ changed = this._name !== name || this._rawValue !== value || this._priority !== priority ||
this._enabled !== enabled || this._implicit !== implicit || this._anonymous !== anonymous || this._valid !== valid;
}
@@ -96,7 +96,7 @@
this._text = text;
this._name = name;
- this._value = value;
+ this._rawValue = value;
this._priority = priority;
this._enabled = enabled;
this._implicit = implicit;
@@ -156,8 +156,20 @@
this._text = newText;
}
- get name() { return this._name; }
+ get name()
+ {
+ return this._name;
+ }
+ set name(name)
+ {
+ if (name === this._name)
+ return;
+
+ this._name = name;
+ this._updateStyle();
+ }
+
get canonicalName()
{
if (this._canonicalName)
@@ -168,8 +180,30 @@
return this._canonicalName;
}
- get value() { return this._value; }
+ // FIXME: Remove current value getter and rename rawValue to value once the old styles sidebar is removed.
+ get value()
+ {
+ if (!this._value)
+ this._value = this._rawValue.replace(/\s*!important\s*$/, "");
+ return this._value;
+ }
+
+ get rawValue()
+ {
+ return this._rawValue;
+ }
+
+ set rawValue(value)
+ {
+ if (value === this._rawValue)
+ return;
+
+ this._rawValue = value;
+ this._value = undefined;
+ this._updateStyle();
+ }
+
get important()
{
return this.priority === "important";
@@ -285,8 +319,18 @@
// Private
+ _updateStyle()
+ {
+ let text = this._name + ": " + this._rawValue + ";";
+ this._updateOwnerStyleText(this._text, text);
+ }
+
_updateOwnerStyleText(oldText, newText)
{
+ console.assert(oldText !== newText, `Style text did not change ${oldText}`);
+ if (oldText === newText)
+ return;
+
let styleText = this._ownerStyle.text || "";
// _styleSheetTextRange is the position of the property within the stylesheet.
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js (222407 => 222408)
--- trunk/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js 2017-09-22 21:29:06 UTC (rev 222407)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js 2017-09-22 21:37:15 UTC (rev 222408)
@@ -523,7 +523,7 @@
{
var text = payload.text || "";
var name = payload.name;
- var value = (payload.value || "").replace(/\s*!important\s*$/, "");
+ var value = payload.value || "";
var priority = payload.priority || "";
var enabled = true;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css (222407 => 222408)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css 2017-09-22 21:29:06 UTC (rev 222407)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css 2017-09-22 21:37:15 UTC (rev 222408)
@@ -37,6 +37,11 @@
color: black;
}
+.spreadsheet-style-declaration-editor :matches(.name, .value):focus {
+ outline: 1px solid white;
+ box-shadow: 0 1px 2px 1px hsla(0, 0%, 0%, 0.6);
+}
+
.spreadsheet-style-declaration-editor.no-properties {
display: none;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js (222407 => 222408)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js 2017-09-22 21:29:06 UTC (rev 222407)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js 2017-09-22 21:37:15 UTC (rev 222408)
@@ -116,19 +116,39 @@
if (!this._property.enabled)
this.element.append("/* ");
- let nameElement = this.element.appendChild(document.createElement("span"));
- nameElement.classList.add("name");
- nameElement.textContent = this._property.name;
+ this._nameElement = this.element.appendChild(document.createElement("span"));
+ this._nameElement.classList.add("name");
+ this._nameElement.textContent = this._property.name;
this.element.append(": ");
- let valueElement = this.element.appendChild(document.createElement("span"));
- valueElement.classList.add("value");
- valueElement.textContent = this._property.value;
+ this._valueElement = this.element.appendChild(document.createElement("span"));
+ this._valueElement.classList.add("value");
+ this._valueElement.textContent = this._property.rawValue;
+ if (this._property.editable && this._property.enabled) {
+ this._nameElement.contentEditable = "plaintext-only";
+ this._nameElement.addEventListener("input", this.debounce(WI.SpreadsheetStyleProperty.CommitCoalesceDelay)._handleNameChange);
+
+ this._valueElement.contentEditable = "plaintext-only";
+ this._valueElement.addEventListener("input", this.debounce(WI.SpreadsheetStyleProperty.CommitCoalesceDelay)._handleValueChange);
+ }
+
this.element.append(";");
if (!this._property.enabled)
this.element.append(" */");
}
+
+ _handleNameChange()
+ {
+ this._property.name = this._nameElement.textContent.trim();
+ }
+
+ _handleValueChange()
+ {
+ this._property.rawValue = this._valueElement.textContent.trim();
+ }
};
+
+WI.SpreadsheetStyleProperty.CommitCoalesceDelay = 250;
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
