From ba15fa2c272a73a80a675bdd9f0f9cf4983da9a0 Mon Sep 17 00:00:00 2001 From: "pfeldman@chromium.org" Date: Thu, 2 Feb 2012 14:25:15 +0000 Subject: [PATCH] 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 --- Source/WebCore/ChangeLog | 17 ++++++ Source/WebCore/inspector/front-end/Settings.js | 1 + .../inspector/front-end/StylesSidebarPane.js | 60 ++++++++++++++++++---- 3 files changed, 69 insertions(+), 9 deletions(-) diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog index 05ec5dd..9e7181a 100644 --- a/Source/WebCore/ChangeLog +++ b/Source/WebCore/ChangeLog @@ -1,3 +1,20 @@ +2012-02-02 Pavel Feldman + + 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 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 --- 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 --- 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 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); -- 2.7.4