Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (153086 => 153087)
--- trunk/Source/WebInspectorUI/ChangeLog 2013-07-24 15:44:51 UTC (rev 153086)
+++ trunk/Source/WebInspectorUI/ChangeLog 2013-07-24 16:07:42 UTC (rev 153087)
@@ -1,3 +1,100 @@
+2013-07-24 Antoine Quint <[email protected]>
+
+ Web Inspector: support click-and-drag editing of CSS numeric values
+ https://bugs.webkit.org/show_bug.cgi?id=118896
+
+ Reviewed by Timothy Hatcher.
+
+ Add support for adjustment of numeric values in the various CodeMirror editors
+ by holding the option key and dragging the mouse. By default, dragging one pixel
+ changes the value by 1, but key modifiers allow to customize that behavior by using
+ the control key to change the value to 0.1 and the shift key to change the value to 10.
+
+ * UserInterface/CodeMirrorAdditions.js:
+ Split adjustNumber() into two methods such that we may use its logic from the
+ CodeMirrorDragToAlterNumberController. The new method, CodeMirror.prototype.alterNumberInRange()
+ allow to set begin and end CodeMirror positions such that the existing alterNumber()
+ can use information based on the current cursor position, and CodeMirrorDragToAlterNumberController
+ can use information based on the hovered token.
+
+ * UserInterface/CodeMirrorDragToAlterNumberController.css: Added.
+ (.CodeMirror.drag-to-adjust .CodeMirror-lines):
+ Set the cursor to "col-resize" when a number token is hovered and the option key
+ modifier is pressed.
+
+ * UserInterface/CodeMirrorDragToAlterNumberController.js: Added.
+ (WebInspector.CodeMirrorDragToAlterNumberController):
+ We define the new "dragToAdjustNumbers" CodeMirror option.
+
+ (WebInspector.CodeMirrorDragToAlterNumberController.prototype.set enabled):
+ The "enabled" property controls whether the associated CodeMirror instance
+ may act upon hovering numeric values to adjust them via a drag interaction.
+
+ (WebInspector.CodeMirrorDragToAlterNumberController.prototype.handleEvent):
+ Proxy for various event-specific methods to deal with mouse events. We also bind
+ the value of the "active" property to the "mouseenter" and "mouseleave" events
+ if we're not currently dragging-to-adjust.
+
+ (WebInspector.CodeMirrorDragToAlterNumberController.prototype._setActive):
+ The "active" property is set when the mouse is over the associated CodeMirror
+ editor and when it's on we track all "mousemove" events such that we may
+ identify tokens containing numeric values. We also start tracking changes to the
+ option modifier key press state such that we may change the cursor accordingly.
+ We ensure that the CodeMirror instance is not read-only such that we don't
+ allow adjustment of numeric values in places where they couldn't be committed.
+
+ (WebInspector.CodeMirrorDragToAlterNumberController.prototype._setDragging):
+ The "dragging" property reflects whether a dragging-to-adjust interaction
+ is underway. We call into WebInspector.elementDragStart() and WebInspector.elementDragEnd()
+ to set the cursor to "col-resize" for the whole document while tracking mousemove
+ and mouseup events at the window level such that we can drag-to-adjust even outside
+ of the inspector window.
+
+ (WebInspector.CodeMirrorDragToAlterNumberController.prototype._setTracksMouseClickAndDrag):
+ The "tracksMouseClickAndDrag" property is set to true whenever the controller
+ has detected that a token containing a numeric value is being hovered and the
+ option modifier key is pressed. This property controls the cursor value for the
+ hovered token to reflect that a drag-to-adjust interaction is allowed and tracks
+ "mousedown" events for when a dragging interaction may be initiated.
+
+ (WebInspector.CodeMirrorDragToAlterNumberController.prototype._modifiersDidChange):
+ Sets the "tracksMouseClickAndDrag" property depending on the availability of a hovered
+ token containing a numeric value and the pressed state of the option modified key.
+
+ (WebInspector.CodeMirrorDragToAlterNumberController.prototype._mouseMoved):
+ Handles "mousemove" events when we're not in the "dragging" state such that we
+ check the currently hovered token, if any, to see if it contains a number that
+ we may drag-to-adjust. Subsequently, we may enter the "tracksMouseClickAndDrag"
+ state.
+
+ (WebInspector.CodeMirrorDragToAlterNumberController.prototype._mouseWasPressed):
+ Handles "mousedown" events during a drag-to-adjust interaction. We simply track
+ the current mouse position in the x-axis and enter the "dragging" state.
+
+ (WebInspector.CodeMirrorDragToAlterNumberController.prototype._mouseWasDragged):
+ Handles "mousemove" events when we are in the "dragging" state. We compare the
+ current mouse position in the x-axis with the last recoreded value and determine
+ the amount by which we should adjust the value, taking into account the shift and
+ control modifier keys. We then call into WebInspector.alterNumberInRange() to
+ apply the change amount to the associated CodeMirror editor.
+
+ (WebInspector.CodeMirrorDragToAlterNumberController.prototype._mouseWasReleased):
+ Handles "mouseup" events, simply exiting the "dragging" state and resetting other
+ parameters we would have customized as a result of the drag-to-adjust interaction.
+
+ (WebInspector.CodeMirrorDragToAlterNumberController.prototype._reset):
+ Resetting some parameters we would have customized as a result of the drag-to-adjust
+ interaction.
+
+ * UserInterface/Main.html:
+ Include the new CodeMirrorDragToAlterNumberController.{js|css} files.
+
+ * UserInterface/Main.js:
+ (WebInspector.elementDragStart):
+ (WebInspector.elementDragEnd):
+ Add an extra parameter to elementDragStart() such that the caller may specify the event
+ target for the "mousemove" and "mouseup" events.
+
2013-07-23 Roland Takacs <[email protected]>
WebSocket initialization to use remote inspector
Modified: trunk/Source/WebInspectorUI/UserInterface/CodeMirrorAdditions.js (153086 => 153087)
--- trunk/Source/WebInspectorUI/UserInterface/CodeMirrorAdditions.js 2013-07-24 15:44:51 UTC (rev 153086)
+++ trunk/Source/WebInspectorUI/UserInterface/CodeMirrorAdditions.js 2013-07-24 16:07:42 UTC (rev 153087)
@@ -281,23 +281,19 @@
return true;
});
- function alterNumber(amount, codeMirror)
- {
- var selectionAnchor = codeMirror.getCursor("anchor");
- var selectionHead = codeMirror.getCursor("head");
-
+ CodeMirror.defineExtension("alterNumberInRange", function(amount, startPosition, endPosition, affectsSelection) {
// We don't try if the range is multiline, pass to another key handler.
- if (selectionAnchor.line !== selectionHead.line)
- return CodeMirror.Pass;
+ if (startPosition.line !== endPosition.line)
+ return false;
- var line = codeMirror.getLine(selectionAnchor.line);
+ var line = this.getLine(startPosition.line);
var foundPeriod = false;
var start = NaN;
var end = NaN;
- for (var i = selectionAnchor.ch; i >= 0; --i) {
+ for (var i = startPosition.ch; i >= 0; --i) {
var character = line.charAt(i);
if (character === ".") {
@@ -306,7 +302,7 @@
foundPeriod = true;
} else if (character !== "-" && character !== "+" && isNaN(parseInt(character))) {
// Found the end already, just scan backwards.
- if (i === selectionAnchor.ch) {
+ if (i === startPosition.ch) {
end = i;
continue;
}
@@ -318,7 +314,7 @@
}
if (isNaN(end)) {
- for (var i = selectionAnchor.ch + 1; i < line.length; ++i) {
+ for (var i = startPosition.ch + 1; i < line.length; ++i) {
var character = line.charAt(i);
if (character === ".") {
@@ -339,7 +335,7 @@
// No number range found, pass to another key handler.
if (isNaN(start) || isNaN(end))
- return CodeMirror.Pass;
+ return false;
var number = parseFloat(line.substring(start, end));
if (number < 1 && number >= -1 && amount === 1)
@@ -352,21 +348,35 @@
var alteredNumber = Number((number + amount).toFixed(6));
var alteredNumberString = alteredNumber.toString();
- var from = {line: selectionAnchor.line, ch: start};
- var to = {line: selectionAnchor.line, ch: end};
+ var from = {line: startPosition.line, ch: start};
+ var to = {line: startPosition.line, ch: end};
- codeMirror.replaceRange(alteredNumberString, from, to);
+ this.replaceRange(alteredNumberString, from, to);
- var newTo = {line: selectionAnchor.line, ch: from.ch + alteredNumberString.length};
+ if (affectsSelection) {
+ var newTo = {line: startPosition.line, ch: from.ch + alteredNumberString.length};
- // Fix up the selection so it follows the increase or decrease in the replacement length.
- if (selectionHead.ch >= to.ch)
- selectionHead = newTo;
+ // Fix up the selection so it follows the increase or decrease in the replacement length.
+ if (endPosition.ch >= to.ch)
+ endPosition = newTo;
- if (selectionAnchor.ch >= to.ch)
- selectionAnchor = newTo;
+ if (startPosition.ch >= to.ch)
+ startPosition = newTo;
- codeMirror.setSelection(selectionAnchor, selectionHead);
+ this.setSelection(startPosition, endPosition);
+ }
+
+ return true;
+ });
+
+ function alterNumber(amount, codeMirror)
+ {
+ var startPosition = codeMirror.getCursor("anchor");
+ var endPosition = codeMirror.getCursor("head");
+
+ var foundNumber = codeMirror.alterNumberInRange(amount, startPosition, endPosition, true);
+ if (!foundNumber)
+ return CodeMirror.Pass;
}
function ignoreKey(codeMirror)
@@ -410,6 +420,7 @@
extraJSONTypes.forEach(function(type) {
CodeMirror.defineMIME(type, {name: "_javascript_", json: true});
});
+
})();
WebInspector.compareCodeMirrorPositions = function(a, b)
Added: trunk/Source/WebInspectorUI/UserInterface/CodeMirrorDragToAlterNumberController.css (0 => 153087)
--- trunk/Source/WebInspectorUI/UserInterface/CodeMirrorDragToAlterNumberController.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/CodeMirrorDragToAlterNumberController.css 2013-07-24 16:07:42 UTC (rev 153087)
@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.CodeMirror.drag-to-adjust .CodeMirror-lines {
+ cursor: col-resize;
+}
Added: trunk/Source/WebInspectorUI/UserInterface/CodeMirrorDragToAlterNumberController.js (0 => 153087)
--- trunk/Source/WebInspectorUI/UserInterface/CodeMirrorDragToAlterNumberController.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/CodeMirrorDragToAlterNumberController.js 2013-07-24 16:07:42 UTC (rev 153087)
@@ -0,0 +1,229 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CodeMirrorDragToAlterNumberController = function(codeMirror)
+{
+ this._codeMirror = codeMirror;
+ this._active = false;
+ this._dragging = false;
+ this._enabled = false;
+ this._tracksMouseClickAndDrag = false;
+};
+
+WebInspector.CodeMirrorDragToAlterNumberController.StyleClassName = "drag-to-adjust";
+
+WebInspector.CodeMirrorDragToAlterNumberController.prototype = {
+ constructor: WebInspector.CodeMirrorDragToAlterNumberController,
+
+ // Public
+
+ set enabled(enabled)
+ {
+ if (this._enabled === enabled)
+ return;
+
+ this._element = this._codeMirror.getWrapperElement();
+
+ if (enabled) {
+ this._element.addEventListener("mouseenter", this);
+ this._element.addEventListener("mouseleave", this);
+ } else {
+ this._element.removeEventListener("mouseenter", this);
+ this._element.removeEventListener("mouseleave", this);
+ }
+ },
+
+ // Protected
+
+ handleEvent: function(event)
+ {
+ switch(event.type) {
+ case "mouseenter":
+ if (!this._dragging)
+ this._setActive(true);
+ break;
+ case "mouseleave":
+ if (!this._dragging)
+ this._setActive(false);
+ break;
+ case "mousemove":
+ if (this._dragging)
+ this._mouseWasDragged(event);
+ else
+ this._mouseMoved(event);
+ break;
+ case "mousedown":
+ this._mouseWasPressed(event);
+ break;
+ case "mouseup":
+ this._mouseWasReleased(event);
+ break;
+ }
+ },
+
+ // Private
+
+ _setActive: function(active)
+ {
+ if (this._active === active || this._codeMirror.getOption("readOnly"))
+ return;
+
+ if (active) {
+ WebInspector.notifications.addEventListener(WebInspector.Notification.GlobalModifierKeysDidChange, this._modifiersDidChange, this);
+ this._element.addEventListener("mousemove", this);
+ } else {
+ WebInspector.notifications.removeEventListener(WebInspector.Notification.GlobalModifierKeysDidChange, this._modifiersDidChange, this);
+ this._element.removeEventListener("mousemove", this);
+ this._hoveredTokenInfo = null;
+ this._setTracksMouseClickAndDrag(false);
+ }
+
+ this._active = active;
+ },
+
+ _setDragging: function(dragging)
+ {
+ if (this._dragging === dragging)
+ return;
+
+ console.assert(window.event);
+ if (dragging)
+ WebInspector.elementDragStart(this._element, this, this, window.event, "col-resize", window);
+ else
+ WebInspector.elementDragEnd(window.event);
+
+ this._dragging = dragging;
+ },
+
+ _setTracksMouseClickAndDrag: function(tracksMouseClickAndDrag)
+ {
+ if (this._tracksMouseClickAndDrag === tracksMouseClickAndDrag)
+ return;
+
+ if (tracksMouseClickAndDrag) {
+ this._element.classList.add(WebInspector.CodeMirrorDragToAlterNumberController.StyleClassName);
+ window.addEventListener("mousedown", this, true);
+ } else {
+ this._element.classList.remove(WebInspector.CodeMirrorDragToAlterNumberController.StyleClassName);
+ window.removeEventListener("mousedown", this, true);
+ this._setDragging(false);
+ }
+
+ this._tracksMouseClickAndDrag = tracksMouseClickAndDrag;
+ },
+
+ _modifiersDidChange: function(event)
+ {
+ this._setTracksMouseClickAndDrag(this._hoveredTokenInfo && this._hoveredTokenInfo.containsNumber && WebInspector.modifierKeys.altKey);
+ },
+
+ _mouseMoved: function(event)
+ {
+ var position = this._codeMirror.coordsChar({left: event.pageX, top: event.pageY});
+ var token = this._codeMirror.getTokenAt(position);
+
+ if (!token || !token.type || !token.string) {
+ if (this._hoveredTokenInfo)
+ this._reset();
+ return;
+ }
+
+ // Stop right here if we're hovering the same token as we were last time.
+ if (this._hoveredTokenInfo && this._hoveredTokenInfo.line === position.line &&
+ this._hoveredTokenInfo.token.start === token.start && this._hoveredTokenInfo.token.end === token.end)
+ return;
+
+ var containsNumber = token.type.indexOf("number") !== -1;
+ this._hoveredTokenInfo = {
+ token: token,
+ line: position.line,
+ containsNumber: containsNumber,
+ startPosition: {
+ ch: token.start,
+ line: position.line
+ },
+ endPosition: {
+ ch: token.end,
+ line: position.line
+ }
+ };
+
+ this._setTracksMouseClickAndDrag(containsNumber && event.altKey);
+ },
+
+ _mouseWasPressed: function(event)
+ {
+ this._lastX = event.screenX;
+
+ this._setDragging(true);
+
+ event.preventDefault();
+ event.stopPropagation();
+ },
+
+ _mouseWasDragged: function(event)
+ {
+ var x = event.screenX;
+ var amount = x - this._lastX;
+
+ if (Math.abs(amount) < 1)
+ return;
+
+ this._lastX = x;
+
+ if (event.ctrlKey)
+ amount /= 10;
+ else if (event.shiftKey)
+ amount *= 10;
+
+ this._codeMirror.alterNumberInRange(amount, this._hoveredTokenInfo.startPosition, this._hoveredTokenInfo.endPosition, false);
+
+ event.preventDefault();
+ event.stopPropagation();
+ },
+
+ _mouseWasReleased: function(event)
+ {
+ this._setDragging(false);
+
+ event.preventDefault();
+ event.stopPropagation();
+
+ this._reset();
+ },
+
+ _reset: function()
+ {
+ this._hoveredTokenInfo = null;
+ this._setTracksMouseClickAndDrag(false);
+ this._element.classList.remove(WebInspector.CodeMirrorDragToAlterNumberController.StyleClassName);
+ }
+};
+
+CodeMirror.defineOption("dragToAdjustNumbers", true, function(codeMirror, value, oldValue) {
+ if (!codeMirror.dragToAlterNumberController)
+ codeMirror.dragToAlterNumberController = new WebInspector.CodeMirrorDragToAlterNumberController(codeMirror);
+ codeMirror.dragToAlterNumberController.enabled = value;
+});
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (153086 => 153087)
--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2013-07-24 15:44:51 UTC (rev 153086)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2013-07-24 16:07:42 UTC (rev 153087)
@@ -116,6 +116,7 @@
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
+ <link rel="stylesheet" href=""
<script src=""
<script src=""
@@ -139,6 +140,7 @@
<script src=""
<script src=""
<script src=""
+ <script src=""
<script src=""
<script src=""
<script src=""
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.js (153086 => 153087)
--- trunk/Source/WebInspectorUI/UserInterface/Main.js 2013-07-24 15:44:51 UTC (rev 153086)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.js 2013-07-24 16:07:42 UTC (rev 153087)
@@ -1369,7 +1369,7 @@
generateColoredImagesForCSS("Images/DisclosureTriangleTinyClosed.pdf", specifications, 8, 8, "disclosure-triangle-tiny-closed-");
}
-WebInspector.elementDragStart = function(element, dividerDrag, elementDragEnd, event, cursor)
+WebInspector.elementDragStart = function(element, dividerDrag, elementDragEnd, event, cursor, eventTarget)
{
if (WebInspector._elementDraggingEventListener || WebInspector._elementEndDraggingEventListener)
WebInspector.elementDragEnd(event);
@@ -1390,8 +1390,10 @@
WebInspector._elementEndDraggingEventListener = elementDragEnd;
var targetDocument = event.target.ownerDocument;
- targetDocument.addEventListener("mousemove", dividerDrag, true);
- targetDocument.addEventListener("mouseup", elementDragEnd, true);
+
+ WebInspector._elementDraggingEventTarget = eventTarget || targetDocument;
+ WebInspector._elementDraggingEventTarget.addEventListener("mousemove", dividerDrag, true);
+ WebInspector._elementDraggingEventTarget.addEventListener("mouseup", elementDragEnd, true);
targetDocument.body.style.cursor = cursor;
@@ -1400,16 +1402,16 @@
WebInspector.elementDragEnd = function(event)
{
- var targetDocument = event.target.ownerDocument;
- targetDocument.removeEventListener("mousemove", WebInspector._elementDraggingEventListener, true);
- targetDocument.removeEventListener("mouseup", WebInspector._elementEndDraggingEventListener, true);
+ WebInspector._elementDraggingEventTarget.removeEventListener("mousemove", WebInspector._elementDraggingEventListener, true);
+ WebInspector._elementDraggingEventTarget.removeEventListener("mouseup", WebInspector._elementEndDraggingEventListener, true);
- targetDocument.body.style.removeProperty("cursor");
+ event.target.ownerDocument.body.style.removeProperty("cursor");
if (WebInspector._elementDraggingGlassPane)
WebInspector._elementDraggingGlassPane.parentElement.removeChild(WebInspector._elementDraggingGlassPane);
delete WebInspector._elementDraggingGlassPane;
+ delete WebInspector._elementDraggingEventTarget;
delete WebInspector._elementDraggingEventListener;
delete WebInspector._elementEndDraggingEventListener;
