Title: [237692] trunk/Source/WebInspectorUI
- Revision
- 237692
- Author
- nvasil...@apple.com
- Date
- 2018-11-01 11:57:27 -0700 (Thu, 01 Nov 2018)
Log Message
Web Inspector: Styles: Toggle selected properties by pressing Space or Command+/
https://bugs.webkit.org/show_bug.cgi?id=181145
<rdar://problem/36203388>
Reviewed by Brian Burg.
Pressing Space key or Command-/ toggles (comments out or uncomments) selected properties.
This patch only works with "Enable Selection of Multiple Properties" checked. It shouldn't introduce any
changes when this setting is unchecked.
* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.get selectionRange):
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.selectProperties):
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetStylePropertyCopy):
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype._handleKeyDown):
* UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty):
(WI.SpreadsheetStyleProperty.prototype.update): Renamed from _update.
(WI.SpreadsheetStyleProperty.prototype.updateStatus):
(WI.SpreadsheetStyleProperty.prototype.applyFilter):
(WI.SpreadsheetStyleProperty.prototype.handleCopyEvent):
Make `update` method public. No other changes were made.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (237691 => 237692)
--- trunk/Source/WebInspectorUI/ChangeLog 2018-11-01 18:49:13 UTC (rev 237691)
+++ trunk/Source/WebInspectorUI/ChangeLog 2018-11-01 18:57:27 UTC (rev 237692)
@@ -1,3 +1,29 @@
+2018-11-01 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: Styles: Toggle selected properties by pressing Space or Command+/
+ https://bugs.webkit.org/show_bug.cgi?id=181145
+ <rdar://problem/36203388>
+
+ Reviewed by Brian Burg.
+
+ Pressing Space key or Command-/ toggles (comments out or uncomments) selected properties.
+
+ This patch only works with "Enable Selection of Multiple Properties" checked. It shouldn't introduce any
+ changes when this setting is unchecked.
+
+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.get selectionRange):
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.selectProperties):
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetStylePropertyCopy):
+ (WI.SpreadsheetCSSStyleDeclarationEditor.prototype._handleKeyDown):
+ * UserInterface/Views/SpreadsheetStyleProperty.js:
+ (WI.SpreadsheetStyleProperty):
+ (WI.SpreadsheetStyleProperty.prototype.update): Renamed from _update.
+ (WI.SpreadsheetStyleProperty.prototype.updateStatus):
+ (WI.SpreadsheetStyleProperty.prototype.applyFilter):
+ (WI.SpreadsheetStyleProperty.prototype.handleCopyEvent):
+ Make `update` method public. No other changes were made.
+
2018-10-31 Devin Rousso <drou...@apple.com>
Web Inspector: Canvas: create a setting for auto-recording newly created contexts
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js (237691 => 237692)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js 2018-11-01 18:49:13 UTC (rev 237691)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js 2018-11-01 18:57:27 UTC (rev 237692)
@@ -237,6 +237,13 @@
});
}
+ get selectionRange()
+ {
+ let startIndex = Math.min(this._anchorIndex, this._focusIndex);
+ let endIndex = Math.max(this._anchorIndex, this._focusIndex);
+ return [startIndex, endIndex];
+ }
+
startEditingFirstProperty()
{
let firstEditableProperty = this._editablePropertyAfter(-1);
@@ -327,8 +334,7 @@
this._anchorIndex = anchorIndex;
this._focusIndex = focusIndex;
- let startIndex = Math.min(anchorIndex, focusIndex);
- let endIndex = Math.max(anchorIndex, focusIndex);
+ let [startIndex, endIndex] = this.selectionRange;
for (let i = 0; i < this._propertyViews.length; ++i) {
let propertyView = this._propertyViews[i];
@@ -451,8 +457,7 @@
return;
let formattedProperties = [];
- let startIndex = Math.min(this._anchorIndex, this._focusIndex);
- let endIndex = Math.max(this._anchorIndex, this._focusIndex);
+ let [startIndex, endIndex] = this.selectionRange;
for (let i = startIndex; i <= endIndex; ++i) {
let propertyView = this._propertyViews[i];
formattedProperties.push(propertyView.property.formattedText);
@@ -506,8 +511,7 @@
if (!this._hasSelectedProperties())
return;
- let startIndex = Math.min(this._anchorIndex, this._focusIndex);
- let endIndex = Math.max(this._anchorIndex, this._focusIndex);
+ let [startIndex, endIndex] = this.selectionRange;
let propertyIndexToSelect = NaN;
if (endIndex + 1 !== this._propertyViews.length)
@@ -528,6 +532,23 @@
event.stop();
+ } else if ((event.code === "Space" && !event.shiftKey && !event.metaKey && !event.ctrlKey) || (event.key === "/" && (event.metaKey || event.ctrlKey) && !event.shiftKey)) {
+ if (!this._hasSelectedProperties())
+ return;
+
+ let [startIndex, endIndex] = this.selectionRange;
+
+ // Toggle the first selected property and set this state to all selected properties.
+ let disabled = this._propertyViews[startIndex].property.enabled;
+
+ for (let i = endIndex; i >= startIndex; --i) {
+ let propertyView = this._propertyViews[i];
+ propertyView.property.commentOut(disabled);
+ propertyView.update();
+ }
+
+ event.preventDefault();
+
} else if (event.key === "Esc")
this.deselectProperties();
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js (237691 => 237692)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2018-11-01 18:49:13 UTC (rev 237691)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2018-11-01 18:57:27 UTC (rev 237692)
@@ -47,7 +47,7 @@
this._selected = false;
this._hasInvalidVariableValue = false;
- this._update();
+ this.update();
property.addEventListener(WI.CSSProperty.Event.OverriddenStatusChanged, this.updateStatus, this);
property.addEventListener(WI.CSSProperty.Event.Changed, this.updateStatus, this);
@@ -136,88 +136,8 @@
this._delegate.spreadsheetStylePropertyRemoved(this);
}
- updateStatus()
+ update()
{
- 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 = [WI.SpreadsheetStyleProperty.StyleClassName];
- let elementTitle = "";
-
- if (this._property.overridden) {
- classNames.push("overridden");
- if (duplicatePropertyExistsBelow(this._property)) {
- classNames.push("has-warning");
- elementTitle = WI.UIString("Duplicate property");
- }
- }
-
- 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._hasInvalidVariableValue || (!this._property.valid && this._property.value !== "")) {
- let propertyNameIsValid = false;
- if (WI.CSSCompletions.cssNameCompletions)
- propertyNameIsValid = WI.CSSCompletions.cssNameCompletions.isValidPropertyName(this._property.name);
-
- classNames.push("has-warning");
-
- if (!propertyNameIsValid) {
- classNames.push("invalid-name");
- elementTitle = WI.UIString("Unsupported property name");
- } else {
- classNames.push("invalid-value");
- elementTitle = WI.UIString("Unsupported property value");
- }
- }
-
- if (!this._property.enabled)
- classNames.push("disabled");
-
- if (this._selected)
- classNames.push("selected");
-
- this._element.className = classNames.join(" ");
- this._element.title = elementTitle;
- }
-
- applyFilter(filterText)
- {
- let matchesName = this._nameElement.textContent.includes(filterText);
- this._nameElement.classList.toggle(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName, !!matchesName);
-
- let matchesValue = this._valueElement.textContent.includes(filterText);
- this._valueElement.classList.toggle(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName, !!matchesValue);
-
- let matches = matchesName || matchesValue;
- this._contentElement.classList.toggle(WI.GeneralStyleDetailsSidebarPanel.NoFilterMatchInPropertyClassName, !matches);
- return matches;
- }
-
- handleCopyEvent(event)
- {
- this._delegate.spreadsheetStylePropertyCopy(event, this);
- }
-
- // Private
-
- _update()
- {
this.element.removeChildren();
if (this._property.editable) {
@@ -230,7 +150,7 @@
event.stopPropagation();
let disabled = !this._checkboxElement.checked;
this._property.commentOut(disabled);
- this._update();
+ this.update();
});
}
@@ -308,6 +228,84 @@
this.updateStatus();
}
+ updateStatus()
+ {
+ 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 = [WI.SpreadsheetStyleProperty.StyleClassName];
+ let elementTitle = "";
+
+ if (this._property.overridden) {
+ classNames.push("overridden");
+ if (duplicatePropertyExistsBelow(this._property)) {
+ classNames.push("has-warning");
+ elementTitle = WI.UIString("Duplicate property");
+ }
+ }
+
+ 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._hasInvalidVariableValue || (!this._property.valid && this._property.value !== "")) {
+ let propertyNameIsValid = false;
+ if (WI.CSSCompletions.cssNameCompletions)
+ propertyNameIsValid = WI.CSSCompletions.cssNameCompletions.isValidPropertyName(this._property.name);
+
+ classNames.push("has-warning");
+
+ if (!propertyNameIsValid) {
+ classNames.push("invalid-name");
+ elementTitle = WI.UIString("Unsupported property name");
+ } else {
+ classNames.push("invalid-value");
+ elementTitle = WI.UIString("Unsupported property value");
+ }
+ }
+
+ if (!this._property.enabled)
+ classNames.push("disabled");
+
+ if (this._selected)
+ classNames.push("selected");
+
+ this._element.className = classNames.join(" ");
+ this._element.title = elementTitle;
+ }
+
+ applyFilter(filterText)
+ {
+ let matchesName = this._nameElement.textContent.includes(filterText);
+ this._nameElement.classList.toggle(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName, !!matchesName);
+
+ let matchesValue = this._valueElement.textContent.includes(filterText);
+ this._valueElement.classList.toggle(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName, !!matchesValue);
+
+ let matches = matchesName || matchesValue;
+ this._contentElement.classList.toggle(WI.GeneralStyleDetailsSidebarPanel.NoFilterMatchInPropertyClassName, !matches);
+ return matches;
+ }
+
+ handleCopyEvent(event)
+ {
+ this._delegate.spreadsheetStylePropertyCopy(event, this);
+ }
+
// SpreadsheetTextField delegate
spreadsheetTextFieldWillStartEditing(textField)
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
