Diff
Modified: branches/safari-537.73-branch/Source/WebInspectorUI/ChangeLog (158588 => 158589)
--- branches/safari-537.73-branch/Source/WebInspectorUI/ChangeLog 2013-11-04 21:38:11 UTC (rev 158588)
+++ branches/safari-537.73-branch/Source/WebInspectorUI/ChangeLog 2013-11-04 21:41:46 UTC (rev 158589)
@@ -1,5 +1,106 @@
2013-11-04 Lucas Forschler <[email protected]>
+ Merge r153087
+
+ 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-11-04 Lucas Forschler <[email protected]>
+
Rollout r154897
2013-10-31 Lucas Forschler <[email protected]>
Copied: branches/safari-537.73-branch/Source/WebInspectorUI/UserInterface/CodeMirrorDragToAlterNumberController.css (from rev 153087, trunk/Source/WebInspectorUI/UserInterface/CodeMirrorDragToAlterNumberController.css) (0 => 158589)
--- branches/safari-537.73-branch/Source/WebInspectorUI/UserInterface/CodeMirrorDragToAlterNumberController.css (rev 0)
+++ branches/safari-537.73-branch/Source/WebInspectorUI/UserInterface/CodeMirrorDragToAlterNumberController.css 2013-11-04 21:41:46 UTC (rev 158589)
@@ -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;
+}
Copied: branches/safari-537.73-branch/Source/WebInspectorUI/UserInterface/CodeMirrorDragToAlterNumberController.js (from rev 153087, trunk/Source/WebInspectorUI/UserInterface/CodeMirrorDragToAlterNumberController.js) (0 => 158589)
--- branches/safari-537.73-branch/Source/WebInspectorUI/UserInterface/CodeMirrorDragToAlterNumberController.js (rev 0)
+++ branches/safari-537.73-branch/Source/WebInspectorUI/UserInterface/CodeMirrorDragToAlterNumberController.js 2013-11-04 21:41:46 UTC (rev 158589)
@@ -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: branches/safari-537.73-branch/Source/WebInspectorUI/UserInterface/Main.html (158588 => 158589)
--- branches/safari-537.73-branch/Source/WebInspectorUI/UserInterface/Main.html 2013-11-04 21:38:11 UTC (rev 158588)
+++ branches/safari-537.73-branch/Source/WebInspectorUI/UserInterface/Main.html 2013-11-04 21:41:46 UTC (rev 158589)
@@ -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: branches/safari-537.73-branch/Source/WebInspectorUI/UserInterface/Main.js (158588 => 158589)
--- branches/safari-537.73-branch/Source/WebInspectorUI/UserInterface/Main.js 2013-11-04 21:38:11 UTC (rev 158588)
+++ branches/safari-537.73-branch/Source/WebInspectorUI/UserInterface/Main.js 2013-11-04 21:41:46 UTC (rev 158589)
@@ -1339,7 +1339,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);
@@ -1360,8 +1360,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;
@@ -1370,16 +1372,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;
