- Revision
- 238813
- Author
- nvasil...@apple.com
- Date
- 2018-12-03 12:37:10 -0800 (Mon, 03 Dec 2018)
Log Message
Web Inspector: Styles: can't select properties of read-only rules
https://bugs.webkit.org/show_bug.cgi?id=192266
Reviewed by Devin Rousso.
Implement multiple properties selection for read-only rules (such as User Agent Stylesheets)
in the Styles panel.
* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.initialLayout):
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.layout):
Keep selection on layout.
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.startEditingFirstProperty):
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.startEditingLastProperty):
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetStylePropertyBlur):
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetStylePropertyMouseEnter):
SpreadsheetCSSStyleDeclarationEditor is used by ComputedStyleDetailsPanel, which doesn't have:
- spreadsheetCSSStyleDeclarationEditorPropertyBlur
- spreadsheetCSSStyleDeclarationEditorPropertyMouseEnter
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetStylePropertyFocusMoved):
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype._handleKeyDown):
* UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
(WI.SpreadsheetCSSStyleDeclarationSection.prototype.initialLayout):
* UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty.prototype.startEditingName):
(WI.SpreadsheetStyleProperty.prototype.startEditingValue):
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (238812 => 238813)
--- trunk/Source/WebInspectorUI/ChangeLog 2018-12-03 20:33:23 UTC (rev 238812)
+++ trunk/Source/WebInspectorUI/ChangeLog 2018-12-03 20:37:10 UTC (rev 238813)
@@ -1,3 +1,34 @@
+2018-12-03 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: Styles: can't select properties of read-only rules
+ https://bugs.webkit.org/show_bug.cgi?id=192266
+
+ Reviewed by Devin Rousso.
+
+ Implement multiple properties selection for read-only rules (such as User Agent Stylesheets)
+ in the Styles panel.
+
+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.initialLayout):
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.layout):
+ Keep selection on layout.
+
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.startEditingFirstProperty):
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.startEditingLastProperty):
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetStylePropertyBlur):
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetStylePropertyMouseEnter):
+ SpreadsheetCSSStyleDeclarationEditor is used by ComputedStyleDetailsPanel, which doesn't have:
+ - spreadsheetCSSStyleDeclarationEditorPropertyBlur
+ - spreadsheetCSSStyleDeclarationEditorPropertyMouseEnter
+
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetStylePropertyFocusMoved):
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype._handleKeyDown):
+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
+ (WI.SpreadsheetCSSStyleDeclarationSection.prototype.initialLayout):
+ * UserInterface/Views/SpreadsheetStyleProperty.js:
+ (WI.SpreadsheetStyleProperty.prototype.startEditingName):
+ (WI.SpreadsheetStyleProperty.prototype.startEditingValue):
+
2018-11-30 Brian Burg <bb...@apple.com>
Web Inspector: resource combining should be more robust against missing WebKitAdditions
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js (238812 => 238813)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js 2018-12-03 20:33:23 UTC (rev 238812)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js 2018-12-03 20:37:10 UTC (rev 238813)
@@ -56,7 +56,7 @@
initialLayout()
{
- if (!this._style || !this._style.editable)
+ if (!this._style)
return;
this.element.addEventListener("focus", () => { this.focused = true; }, true);
@@ -101,7 +101,7 @@
}
if (propertyViewPendingStartEditing) {
- propertyViewPendingStartEditing.nameTextField.startEditing();
+ propertyViewPendingStartEditing.startEditingName();
this._propertyPendingStartEditing = null;
}
@@ -110,6 +110,8 @@
if (!isNaN(this._pendingAddBlankPropertyIndexOffset))
this.addBlankProperty(this._propertyViews.length - 1 - this._pendingAddBlankPropertyIndexOffset);
+ else if (this.hasSelectedProperties())
+ this.selectProperties(this._anchorIndex, this._focusIndex);
}
detached()
@@ -247,7 +249,7 @@
{
let firstEditableProperty = this._editablePropertyAfter(-1);
if (firstEditableProperty)
- firstEditableProperty.nameTextField.startEditing();
+ firstEditableProperty.startEditingName();
else {
const appendAfterLast = -1;
this.addBlankProperty(appendAfterLast);
@@ -258,7 +260,7 @@
{
let lastEditableProperty = this._editablePropertyBefore(this._propertyViews.length);
if (lastEditableProperty)
- lastEditableProperty.valueTextField.startEditing();
+ lastEditableProperty.startEditingValue();
else {
const appendAfterLast = -1;
this.addBlankProperty(appendAfterLast);
@@ -389,12 +391,14 @@
if (this._suppressBlur)
return;
- this._delegate.spreadsheetCSSStyleDeclarationEditorPropertyBlur(event, property);
+ if (this._delegate.spreadsheetCSSStyleDeclarationEditorPropertyBlur)
+ this._delegate.spreadsheetCSSStyleDeclarationEditorPropertyBlur(event, property);
}
spreadsheetStylePropertyMouseEnter(event, property)
{
- this._delegate.spreadsheetCSSStyleDeclarationEditorPropertyMouseEnter(event, property);
+ if (this._delegate.spreadsheetCSSStyleDeclarationEditorPropertyMouseEnter)
+ this._delegate.spreadsheetCSSStyleDeclarationEditorPropertyMouseEnter(event, property);
}
spreadsheetStylePropertyFocusMoved(propertyView, {direction, willRemoveProperty})
@@ -417,7 +421,7 @@
// Move from the value to the next enabled property's name.
let propertyView = this._editablePropertyAfter(movedFromIndex);
if (propertyView)
- propertyView.nameTextField.startEditing();
+ propertyView.startEditingName();
else {
if (willRemoveProperty) {
const delta = 1;
@@ -431,7 +435,7 @@
let propertyView = this._editablePropertyBefore(movedFromIndex);
if (propertyView) {
// Move from the property's name to the previous enabled property's value.
- propertyView.valueTextField.startEditing();
+ propertyView.startEditingValue();
} else {
// Move from the first property's name to the rule's selector.
if (this._style.selectorEditable)
@@ -511,10 +515,13 @@
event.stop();
} else if (event.key === "Tab" || event.key === "Enter") {
+ if (!this.style.editable)
+ return;
+
let property = this._propertyViews[this._focusIndex];
if (property && property.enabled) {
event.stop();
- property.nameTextField.startEditing();
+ property.startEditingName();
}
} else if (event.key === "Backspace") {
let [startIndex, endIndex] = this.selectionRange;
@@ -536,6 +543,9 @@
event.stop();
} else if ((event.code === "Space" && !event.shiftKey && !event.metaKey && !event.ctrlKey) || (event.key === "/" && event.commandOrControlKey && !event.shiftKey)) {
+ if (!this.style.editable)
+ return;
+
let [startIndex, endIndex] = this.selectionRange;
// Toggle the first selected property and set this state to all selected properties.
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js (238812 => 238813)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js 2018-12-03 20:33:23 UTC (rev 238812)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js 2018-12-03 20:37:10 UTC (rev 238813)
@@ -102,9 +102,10 @@
else if (!this._style.ownerRule)
this._element.classList.add("selector-locked");
+ this.element.addEventListener("mousedown", this._handleMouseDown.bind(this));
+
if (this._style.editable) {
this.element.addEventListener("click", this._handleClick.bind(this));
- this.element.addEventListener("mousedown", this._handleMouseDown.bind(this));
new WI.KeyboardShortcut(WI.KeyboardShortcut.Modifier.CommandOrControl, "S", this._save.bind(this), this._element);
new WI.KeyboardShortcut(WI.KeyboardShortcut.Modifier.CommandOrControl | WI.KeyboardShortcut.Modifier.Shift, "S", this._save.bind(this), this._element);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js (238812 => 238813)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2018-12-03 20:33:23 UTC (rev 238812)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2018-12-03 20:37:10 UTC (rev 238813)
@@ -50,15 +50,17 @@
property.addEventListener(WI.CSSProperty.Event.OverriddenStatusChanged, this.updateStatus, this);
property.addEventListener(WI.CSSProperty.Event.Changed, this.updateStatus, this);
- if (this._isEditable()) {
+ if (!this._readOnly) {
this._element.tabIndex = -1;
this._element.addEventListener("blur", (event) => {
- this._delegate.spreadsheetStylePropertyBlur(event, this);
+ if (this._delegate.spreadsheetStylePropertyBlur)
+ this._delegate.spreadsheetStylePropertyBlur(event, this);
});
this._element.addEventListener("mouseenter", (event) => {
- this._delegate.spreadsheetStylePropertyMouseEnter(event, this);
+ if (this._delegate.spreadsheetStylePropertyMouseEnter)
+ this._delegate.spreadsheetStylePropertyMouseEnter(event, this);
});
this._element.copyHandler = this;
@@ -92,6 +94,22 @@
this.updateStatus();
}
+ startEditingName()
+ {
+ if (!this._nameTextField)
+ return;
+
+ this._nameTextField.startEditing();
+ }
+
+ startEditingValue()
+ {
+ if (!this._valueTextField)
+ return;
+
+ this._valueTextField.startEditing();
+ }
+
detached()
{
if (this._nameTextField)
