Web Inspector: Styles Redesign: clicking on inline swatches and property checkboxes...
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 9 Nov 2017 23:40:51 +0000 (23:40 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 9 Nov 2017 23:40:51 +0000 (23:40 +0000)
https://bugs.webkit.org/show_bug.cgi?id=179507
<rdar://problem/35452204>

Reviewed by Brian Burg.

* UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
(WI.SpreadsheetCSSStyleDeclarationSection.prototype.initialLayout):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype._handleClick):
Don't add new properties when clicking on selector fields, source links, and property checkboxes.

* UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty.prototype._update):
It is safe to replace "change" event with "click" since it fires even when pressing Space key when the checkbox is focused.

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

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

index 8aaf565..cc7dca2 100644 (file)
@@ -1,3 +1,20 @@
+2017-11-09  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Styles Redesign: clicking on inline swatches and property checkboxes should not add a new property
+        https://bugs.webkit.org/show_bug.cgi?id=179507
+        <rdar://problem/35452204>
+
+        Reviewed by Brian Burg.
+
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
+        (WI.SpreadsheetCSSStyleDeclarationSection.prototype.initialLayout):
+        (WI.SpreadsheetCSSStyleDeclarationSection.prototype._handleClick):
+        Don't add new properties when clicking on selector fields, source links, and property checkboxes.
+
+        * UserInterface/Views/SpreadsheetStyleProperty.js:
+        (WI.SpreadsheetStyleProperty.prototype._update):
+        It is safe to replace "change" event with "click" since it fires even when pressing Space key when the checkbox is focused.
+
 2017-11-09  Devin Rousso  <webkit@devinrousso.com>
 
         Web Inspector: support undo/redo of insertAdjacentHTML
index ff2e3da..dc3bf35 100644 (file)
@@ -68,10 +68,10 @@ WI.SpreadsheetCSSStyleDeclarationSection = class SpreadsheetCSSStyleDeclarationS
         this._selectorElement.addEventListener("mouseleave", this._hideDOMNodeHighlight.bind(this));
         this._headerElement.append(this._selectorElement);
 
-        let openBrace = document.createElement("span");
-        openBrace.classList.add("open-brace");
-        openBrace.textContent = " {";
-        this._headerElement.append(openBrace);
+        this._openBrace = document.createElement("span");
+        this._openBrace.classList.add("open-brace");
+        this._openBrace.textContent = " {";
+        this._headerElement.append(this._openBrace);
 
         if (this._style.selectorEditable) {
             this._selectorTextField = new WI.SpreadsheetSelectorField(this, this._selectorElement);
@@ -81,14 +81,14 @@ WI.SpreadsheetCSSStyleDeclarationSection = class SpreadsheetCSSStyleDeclarationS
         this._propertiesEditor = new WI.SpreadsheetCSSStyleDeclarationEditor(this, this._style);
         this._propertiesEditor.element.classList.add("properties");
 
-        let closeBrace = document.createElement("span");
-        closeBrace.classList.add("close-brace");
-        closeBrace.textContent = "}";
+        this._closeBrace = document.createElement("span");
+        this._closeBrace.classList.add("close-brace");
+        this._closeBrace.textContent = "}";
 
         this._element.append(this._createMediaHeader(), this._headerElement);
         this.addSubview(this._propertiesEditor);
         this._propertiesEditor.needsLayout();
-        this._element.append(closeBrace);
+        this._element.append(this._closeBrace);
 
         if (!this._style.editable)
             this._element.classList.add("locked");
@@ -363,13 +363,15 @@ WI.SpreadsheetCSSStyleDeclarationSection = class SpreadsheetCSSStyleDeclarationS
             return;
         }
 
-        if (event.target.isSelfOrDescendant(this._headerElement)) {
+        if (event.target === this._headerElement || event.target === this._openBrace) {
             this._propertiesEditor.addBlankProperty(0);
             return;
         }
 
-        const appendAfterLast = -1;
-        this._propertiesEditor.addBlankProperty(appendAfterLast);
+        if (event.target === this._element || event.target === this._closeBrace) {
+            const appendAfterLast = -1;
+            this._propertiesEditor.addBlankProperty(appendAfterLast);
+        }
     }
 
     _highlightNodesWithSelector()
index 97c26df..56f1707 100644 (file)
@@ -150,7 +150,8 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
             this._checkboxElement.type = "checkbox";
             this._checkboxElement.checked = this._property.enabled;
             this._checkboxElement.tabIndex = -1;
-            this._checkboxElement.addEventListener("change", () => {
+            this._checkboxElement.addEventListener("click", (event) => {
+                event.stopPropagation();
                 let disabled = !this._checkboxElement.checked;
                 this._property.commentOut(disabled);
                 this._update();