Web Inspector: Styles: Toggle selected properties by pressing Space or Command+/
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 1 Nov 2018 18:57:27 +0000 (18:57 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 1 Nov 2018 18:57:27 +0000 (18:57 +0000)
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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@237692 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js

index ec5f30f..0e96bec 100644 (file)
@@ -1,3 +1,29 @@
+2018-11-01  Nikita Vasilyev  <nvasilyev@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  <drousso@apple.com>
 
         Web Inspector: Canvas: create a setting for auto-recording newly created contexts
index 20af6e9..b3ec0d3 100644 (file)
@@ -237,6 +237,13 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
         });
     }
 
+    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 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
         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 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
             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 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
             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 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
 
             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();
     }
index 1fd4667..f4b35cb 100644 (file)
@@ -47,7 +47,7 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
         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,87 +136,7 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
             this._delegate.spreadsheetStylePropertyRemoved(this);
     }
 
-    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);
-    }
-
-    // Private
-
-    _update()
+    update()
     {
         this.element.removeChildren();
 
@@ -230,7 +150,7 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
                 event.stopPropagation();
                 let disabled = !this._checkboxElement.checked;
                 this._property.commentOut(disabled);
-                this._update();
+                this.update();
             });
         }
 
@@ -308,6 +228,84 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
         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)