Web Inspector: add experiment for single click styles editing.

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

Reviewed by Vsevolod Vlasov.

* inspector/front-end/Settings.js:
(WebInspector.ExperimentsSettings):
* inspector/front-end/StylesSidebarPane.js:
(WebInspector.StylePropertiesSection):
(WebInspector.StylePropertyTreeElement.prototype.onattach):
(WebInspector.StylePropertyTreeElement.prototype._mouseDown):
(WebInspector.StylePropertyTreeElement.prototype._resetMouseDownElement):
(WebInspector.StylePropertyTreeElement.prototype):
(WebInspector.StylePropertyTreeElement.prototype.selectElement.context):

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

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index 05ec5dd..9e7181a 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,20 @@
+2012-02-02  Pavel Feldman  <pfeldman@google.com>
+
+        Web Inspector: add experiment for single click styles editing.
+        https://bugs.webkit.org/show_bug.cgi?id=77624
+
+        Reviewed by Vsevolod Vlasov.
+
+        * inspector/front-end/Settings.js:
+        (WebInspector.ExperimentsSettings):
+        * inspector/front-end/StylesSidebarPane.js:
+        (WebInspector.StylePropertiesSection):
+        (WebInspector.StylePropertyTreeElement.prototype.onattach):
+        (WebInspector.StylePropertyTreeElement.prototype._mouseDown):
+        (WebInspector.StylePropertyTreeElement.prototype._resetMouseDownElement):
+        (WebInspector.StylePropertyTreeElement.prototype):
+        (WebInspector.StylePropertyTreeElement.prototype.selectElement.context):
+
 2012-02-02  Kenneth Rohde Christiansen  <kenneth@webkit.org>
 
         Make the tap highlighting work for all test cases

diff --git a/Source/WebCore/inspector/front-end/Settings.js b/Source/WebCore/inspector/front-end/Settings.js
index b0c5763..23f0cfa 100644 (file)
--- a/Source/WebCore/inspector/front-end/Settings.js
+++ b/Source/WebCore/inspector/front-end/Settings.js
@@ -172,6 +172,7 @@ WebInspector.ExperimentsSettings = function()
     this.sourceFrameAlwaysEditable = this._createExperiment("sourceFrameAlwaysEditable", "Make resources always editable");
     this.freeFlowDOMEditing = this._createExperiment("freeFlowDOMEditing", "Enable free flow DOM editing");
     this.showMemoryCounters = this._createExperiment("showMemoryCounters", "Show memory counters in Timeline panel");
+    this.singleClickEditing = this._createExperiment("singleClickEditing", "Single click CSS editing");
 
     this._cleanUpSetting();
 }

diff --git a/Source/WebCore/inspector/front-end/StylesSidebarPane.js b/Source/WebCore/inspector/front-end/StylesSidebarPane.js
index 59459e4..884f2fc 100644 (file)
--- a/Source/WebCore/inspector/front-end/StylesSidebarPane.js
+++ b/Source/WebCore/inspector/front-end/StylesSidebarPane.js
@@ -899,8 +899,9 @@ WebInspector.StylePropertiesSection = function(parentPane, styleRule, editable,
     closeBrace.textContent = "}";
     this.element.appendChild(closeBrace);
 
-    this._selectorElement.addEventListener("dblclick", this._handleSelectorDoubleClick.bind(this), false);
-    this.element.addEventListener("dblclick", this._handleEmptySpaceDoubleClick.bind(this), false);
+    var eventName = WebInspector.experimentsSettings.singleClickEditing.isEnabled() ? "click" : "dblclick";
+    this._selectorElement.addEventListener(eventName, this._handleSelectorDoubleClick.bind(this), false);
+    this.element.addEventListener(eventName, this._handleEmptySpaceDoubleClick.bind(this), false);
 
     this._parentPane = parentPane;
     this.styleRule = styleRule;
@@ -1522,6 +1523,28 @@ WebInspector.StylePropertyTreeElement.prototype = {
     onattach: function()
     {
         this.updateTitle();
+        var eventName;
+        if (WebInspector.experimentsSettings.singleClickEditing.isEnabled()) {
+            this.listItemElement.addEventListener("mousedown", this._mouseDown.bind(this));
+            this.listItemElement.addEventListener("mouseup", this._resetMouseDownElement.bind(this));
+            eventName = "click";
+        } else
+            eventName = "dblclick";
+        this.listItemElement.addEventListener(eventName, this._startEditing.bind(this));
+    },
+
+    _mouseDown: function(event)
+    {
+        this._parentPane._mouseDownTreeElement = this;
+        this._parentPane._mouseDownTreeElementIsName = this._isNameElement(event.target);
+        this._parentPane._mouseDownTreeElementIsValue = this._isValueElement(event.target);
+    },
+
+    _resetMouseDownElement: function()
+    {
+        delete this._parentPane._mouseDownTreeElement;
+        delete this._parentPane._mouseDownTreeElementIsName;
+        delete this._parentPane._mouseDownTreeElementIsValue;
     },
 
     updateTitle: function()
@@ -1809,12 +1832,6 @@ WebInspector.StylePropertyTreeElement.prototype = {
         }
     },
 
-    ondblclick: function(event)
-    {
-        this.startEditing(event.target);
-        event.stopPropagation();
-    },
-
     restoreNameElement: function()
     {
         // Restore <span class="webkit-css-property"> if it doesn't yet exist or was accidentally deleted.
@@ -1827,6 +1844,22 @@ WebInspector.StylePropertyTreeElement.prototype = {
         this.listItemElement.insertBefore(this.nameElement, this.listItemElement.firstChild);
     },
 
+    _startEditing: function(event)
+    {
+        this.startEditing(event.target);
+        event.stopPropagation();
+    },
+
+    _isNameElement: function(element)
+    {
+        return element.enclosingNodeOrSelfWithClass("webkit-css-property") === this.nameElement;
+    },
+
+    _isValueElement: function(element)
+    {
+        return !!element.enclosingNodeOrSelfWithClass("value");
+    },
+
     startEditing: function(selectElement)
     {
         // FIXME: we don't allow editing of longhand properties under a shorthand right now.
@@ -1892,7 +1925,15 @@ WebInspector.StylePropertyTreeElement.prototype = {
 
         function blurListener(context, event)
         {
-            this.editingCommitted(null, event.target.textContent, context.previousContent, context, "");
+            var treeElement = this._parentPane._mouseDownTreeElement;
+            var moveDirection = "";
+            if (treeElement === this) {
+                if (isEditingName && this._parentPane._mouseDownTreeElementIsValue)
+                    moveDirection = "forward";
+                if (!isEditingName && this._parentPane._mouseDownTreeElementIsName)
+                    moveDirection = "backward";
+            }
+            this.editingCommitted(null, event.target.textContent, context.previousContent, context, moveDirection);
         }
 
         delete this.originalPropertyText;
@@ -2004,6 +2045,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
 
     editingEnded: function(context)
     {
+        this._resetMouseDownElement();
         if (this._applyFreeFlowStyleTextEditTimer)
             clearTimeout(this._applyFreeFlowStyleTextEditTimer);