Web Inspector: toggling style should not start property edit first.

https://bugs.webkit.org/show_bug.cgi?id=89834

Reviewed by Yury Semikhatsky.

Source/WebCore:

Otherwise property flickers upon toggling.

* inspector/front-end/StylesSidebarPane.js:
(WebInspector.StylePropertyTreeElement.prototype):

LayoutTests:

* http/tests/inspector/elements-test.js:
(initialize_ElementTest.InspectorTest.dumpSelectedElementStyles):
(initialize_ElementTest.InspectorTest.toggleStylePropertyEnabled):
* inspector/styles/styles-disable-inherited.html:
* inspector/styles/styles-disable-then-change.html:
* inspector/styles/styles-disable-then-delete.html:
* inspector/styles/styles-disable-then-enable.html:
* inspector/styles/undo-property-toggle.html:

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

diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index 39bc750..1754ce3 100644 (file)
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,19 @@
+2012-06-25  Pavel Feldman  <pfeldman@chromium.org>
+
+        Web Inspector: toggling style should not start property edit first.
+        https://bugs.webkit.org/show_bug.cgi?id=89834
+
+        Reviewed by Yury Semikhatsky.
+
+        * http/tests/inspector/elements-test.js:
+        (initialize_ElementTest.InspectorTest.dumpSelectedElementStyles):
+        (initialize_ElementTest.InspectorTest.toggleStylePropertyEnabled):
+        * inspector/styles/styles-disable-inherited.html:
+        * inspector/styles/styles-disable-then-change.html:
+        * inspector/styles/styles-disable-then-delete.html:
+        * inspector/styles/styles-disable-then-enable.html:
+        * inspector/styles/undo-property-toggle.html:
+
 2012-06-25  Philip Rogers  <pdr@google.com>
 
         Fix rewinding of SVG animations

diff --git a/LayoutTests/http/tests/inspector/elements-test.js b/LayoutTests/http/tests/inspector/elements-test.js
index 0c46213..2221daa 100644 (file)
--- a/LayoutTests/http/tests/inspector/elements-test.js
+++ b/LayoutTests/http/tests/inspector/elements-test.js
@@ -157,7 +157,13 @@ InspectorTest.dumpSelectedElementStyles = function(excludeComputed, excludeMatch
         }
         InspectorTest.addResult("");
     }
-};
+}
+
+InspectorTest.toggleStyleProperty = function(propertyName, checked)
+{
+    var treeItem = InspectorTest.getElementStylePropertyTreeItem(propertyName);
+    treeItem.toggleEnabled({ target: { checked: checked }, consume: function() { } });
+}
 
 InspectorTest.expandAndDumpSelectedElementEventListeners = function(callback)
 {

diff --git a/LayoutTests/inspector/styles/styles-disable-inherited.html b/LayoutTests/inspector/styles/styles-disable-inherited.html
index 44d55f3..762ec68 100644 (file)
--- a/LayoutTests/inspector/styles/styles-disable-inherited.html
+++ b/LayoutTests/inspector/styles/styles-disable-inherited.html
@@ -20,8 +20,7 @@ function test()
 
     function step2()
     {
-        var treeItem = InspectorTest.getElementStylePropertyTreeItem("font-weight");
-        treeItem.toggleEnabled({ target: { checked: false } });
+        InspectorTest.toggleStyleProperty("font-weight", false);
         InspectorTest.selectNodeAndWaitForStyles("nested", step3);
     }
 

diff --git a/LayoutTests/inspector/styles/styles-disable-then-change.html b/LayoutTests/inspector/styles/styles-disable-then-change.html
index 428ac9a..c5bbf79 100644 (file)
--- a/LayoutTests/inspector/styles/styles-disable-then-change.html
+++ b/LayoutTests/inspector/styles/styles-disable-then-change.html
@@ -13,8 +13,7 @@ function test()
         InspectorTest.addResult("Before disable");
         InspectorTest.dumpSelectedElementStyles(true, true);
 
-        var treeItem = InspectorTest.getElementStylePropertyTreeItem("font-weight");
-        treeItem.toggleEnabled({ target: { checked: false } });
+        InspectorTest.toggleStyleProperty("font-weight", false);
         InspectorTest.waitForStyles("container", step2);
     }
 

diff --git a/LayoutTests/inspector/styles/styles-disable-then-delete.html b/LayoutTests/inspector/styles/styles-disable-then-delete.html
index e6c890a..affa64a 100644 (file)
--- a/LayoutTests/inspector/styles/styles-disable-then-delete.html
+++ b/LayoutTests/inspector/styles/styles-disable-then-delete.html
@@ -13,10 +13,7 @@ function test()
         // Disable property
         InspectorTest.addResult("Before disable");
         InspectorTest.dumpSelectedElementStyles(true, true);
-
-        var treeItem = InspectorTest.getElementStylePropertyTreeItem("font-weight");
-        treeItem.toggleEnabled({ target: { checked: false } });
-
+        InspectorTest.toggleStyleProperty("font-weight", false);
         InspectorTest.runAfterPendingDispatches(step2);
     }
 

diff --git a/LayoutTests/inspector/styles/styles-disable-then-enable.html b/LayoutTests/inspector/styles/styles-disable-then-enable.html
index f0156e3..4cc00ee 100644 (file)
--- a/LayoutTests/inspector/styles/styles-disable-then-enable.html
+++ b/LayoutTests/inspector/styles/styles-disable-then-enable.html
@@ -14,7 +14,7 @@ function test()
         var treeItem = InspectorTest.getElementStylePropertyTreeItem("font-weight");
         InspectorTest.dumpStyleTreeItem(treeItem, "");
 
-        treeItem.toggleEnabled({ target: { checked: false } });
+        InspectorTest.toggleStyleProperty("font-weight", false);
         InspectorTest.waitForStyles("container", step2);
     }
 
@@ -24,7 +24,7 @@ function test()
         var treeItem = InspectorTest.getElementStylePropertyTreeItem("font-weight");
         InspectorTest.dumpStyleTreeItem(treeItem, "");
 
-        treeItem.toggleEnabled({ target: { checked: true } });
+        InspectorTest.toggleStyleProperty("font-weight", true);
         InspectorTest.waitForStyles("container", step3);
     }
 

diff --git a/LayoutTests/inspector/styles/undo-property-toggle.html b/LayoutTests/inspector/styles/undo-property-toggle.html
index 6d14101..fe8b69a 100644 (file)
--- a/LayoutTests/inspector/styles/undo-property-toggle.html
+++ b/LayoutTests/inspector/styles/undo-property-toggle.html
@@ -14,7 +14,7 @@ function test()
         var treeItem = InspectorTest.getElementStylePropertyTreeItem("font-weight");
         InspectorTest.dumpStyleTreeItem(treeItem, "");
 
-        treeItem.toggleEnabled({ target: { checked: false } });
+        InspectorTest.toggleStyleProperty("font-weight", false);
         InspectorTest.waitForStyles("container", step2);
     }
 

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index fdaa1a7..23f1514 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,15 @@
+2012-06-25  Pavel Feldman  <pfeldman@chromium.org>
+
+        Web Inspector: toggling style should not start property edit first.
+        https://bugs.webkit.org/show_bug.cgi?id=89834
+
+        Reviewed by Yury Semikhatsky.
+
+        Otherwise property flickers upon toggling.
+
+        * inspector/front-end/StylesSidebarPane.js:
+        (WebInspector.StylePropertyTreeElement.prototype):
+
 2012-06-25  Alexander Pavlov  <apavlov@chromium.org>
 
         Web Inspector: "Emulate Touch Events" breaks selecting elements with "touchstart" event listeners for inspection.

diff --git a/Source/WebCore/inspector/front-end/StylesSidebarPane.js b/Source/WebCore/inspector/front-end/StylesSidebarPane.js
index c9d4b9c..ef091cd 100644 (file)
--- a/Source/WebCore/inspector/front-end/StylesSidebarPane.js
+++ b/Source/WebCore/inspector/front-end/StylesSidebarPane.js
@@ -1693,7 +1693,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
             enabledCheckboxElement.className = "enabled-button";
             enabledCheckboxElement.type = "checkbox";
             enabledCheckboxElement.checked = !this.disabled;
-            enabledCheckboxElement.addEventListener("change", this.toggleEnabled.bind(this), false);
+            enabledCheckboxElement.addEventListener("click", this.toggleEnabled.bind(this), false);
         }
 
         var nameElement = document.createElement("span");
@@ -1986,6 +1986,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
 
         this._parentPane._userOperation = true;
         this.property.setDisabled(disabled, callback.bind(this));
+        event.consume();
     },
 
     updateState: function()