Changeset 153087 in webkit


Ignore:
Timestamp:
Jul 24, 2013, 9:07:42 AM (12 years ago)
Author:
Antoine Quint
Message:

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.

Location:
trunk/Source/WebInspectorUI
Files:
2 added
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r153044 r153087  
     12013-07-24  Antoine Quint  <graouts@apple.com>
     2
     3        Web Inspector: support click-and-drag editing of CSS numeric values
     4        https://bugs.webkit.org/show_bug.cgi?id=118896
     5
     6        Reviewed by Timothy Hatcher.
     7
     8        Add support for adjustment of numeric values in the various CodeMirror editors
     9        by holding the option key and dragging the mouse. By default, dragging one pixel
     10        changes the value by 1, but key modifiers allow to customize that behavior by using
     11        the control key to change the value to 0.1 and the shift key to change the value to 10.
     12
     13        * UserInterface/CodeMirrorAdditions.js:
     14        Split adjustNumber() into two methods such that we may use its logic from the
     15        CodeMirrorDragToAlterNumberController. The new method, CodeMirror.prototype.alterNumberInRange()
     16        allow to set begin and end CodeMirror positions such that the existing alterNumber()
     17        can use information based on the current cursor position, and CodeMirrorDragToAlterNumberController
     18        can use information based on the hovered token.
     19
     20        * UserInterface/CodeMirrorDragToAlterNumberController.css: Added.
     21        (.CodeMirror.drag-to-adjust .CodeMirror-lines):
     22        Set the cursor to "col-resize" when a number token is hovered and the option key
     23        modifier is pressed.
     24
     25        * UserInterface/CodeMirrorDragToAlterNumberController.js: Added.
     26        (WebInspector.CodeMirrorDragToAlterNumberController):
     27        We define the new "dragToAdjustNumbers" CodeMirror option.
     28
     29        (WebInspector.CodeMirrorDragToAlterNumberController.prototype.set enabled):
     30        The "enabled" property controls whether the associated CodeMirror instance
     31        may act upon hovering numeric values to adjust them via a drag interaction.
     32
     33        (WebInspector.CodeMirrorDragToAlterNumberController.prototype.handleEvent):
     34        Proxy for various event-specific methods to deal with mouse events. We also bind
     35        the value of the "active" property to the "mouseenter" and "mouseleave" events
     36        if we're not currently dragging-to-adjust.
     37
     38        (WebInspector.CodeMirrorDragToAlterNumberController.prototype._setActive):
     39        The "active" property is set when the mouse is over the associated CodeMirror
     40        editor and when it's on we track all "mousemove" events such that we may
     41        identify tokens containing numeric values. We also start tracking changes to the
     42        option modifier key press state such that we may change the cursor accordingly.
     43        We ensure that the CodeMirror instance is not read-only such that we don't
     44        allow adjustment of numeric values in places where they couldn't be committed.
     45
     46        (WebInspector.CodeMirrorDragToAlterNumberController.prototype._setDragging):
     47        The "dragging" property reflects whether a dragging-to-adjust interaction
     48        is underway. We call into WebInspector.elementDragStart() and WebInspector.elementDragEnd()
     49        to set the cursor to "col-resize" for the whole document while tracking mousemove
     50        and mouseup events at the window level such that we can drag-to-adjust even outside
     51        of the inspector window.
     52
     53        (WebInspector.CodeMirrorDragToAlterNumberController.prototype._setTracksMouseClickAndDrag):
     54        The "tracksMouseClickAndDrag" property is set to true whenever the controller
     55        has detected that a token containing a numeric value is being hovered and the
     56        option modifier key is pressed. This property controls the cursor value for the
     57        hovered token to reflect that a drag-to-adjust interaction is allowed and tracks
     58        "mousedown" events for when a dragging interaction may be initiated.
     59
     60        (WebInspector.CodeMirrorDragToAlterNumberController.prototype._modifiersDidChange):
     61        Sets the "tracksMouseClickAndDrag" property depending on the availability of a hovered
     62        token containing a numeric value and the pressed state of the option modified key.
     63
     64        (WebInspector.CodeMirrorDragToAlterNumberController.prototype._mouseMoved):
     65        Handles "mousemove" events when we're not in the "dragging" state such that we
     66        check the currently hovered token, if any, to see if it contains a number that
     67        we may drag-to-adjust. Subsequently, we may enter the "tracksMouseClickAndDrag"
     68        state.
     69
     70        (WebInspector.CodeMirrorDragToAlterNumberController.prototype._mouseWasPressed):
     71        Handles "mousedown" events during a drag-to-adjust interaction. We simply track
     72        the current mouse position in the x-axis and enter the "dragging" state.
     73
     74        (WebInspector.CodeMirrorDragToAlterNumberController.prototype._mouseWasDragged):
     75        Handles "mousemove" events when we are in the "dragging" state. We compare the
     76        current mouse position in the x-axis with the last recoreded value and determine
     77        the amount by which we should adjust the value, taking into account the shift and
     78        control modifier keys. We then call into WebInspector.alterNumberInRange() to
     79        apply the change amount to the associated CodeMirror editor.
     80
     81        (WebInspector.CodeMirrorDragToAlterNumberController.prototype._mouseWasReleased):
     82        Handles "mouseup" events, simply exiting the "dragging" state and resetting other
     83        parameters we would have customized as a result of the drag-to-adjust interaction.
     84
     85        (WebInspector.CodeMirrorDragToAlterNumberController.prototype._reset):
     86        Resetting some parameters we would have customized as a result of the drag-to-adjust
     87        interaction.
     88
     89        * UserInterface/Main.html:
     90        Include the new CodeMirrorDragToAlterNumberController.{js|css} files.
     91
     92        * UserInterface/Main.js:
     93        (WebInspector.elementDragStart):
     94        (WebInspector.elementDragEnd):
     95        Add an extra parameter to elementDragStart() such that the caller may specify the event
     96        target for the "mousemove" and "mouseup" events.
     97
    1982013-07-23  Roland Takacs  <rtakacs@inf.u-szeged.hu>
    299

  • trunk/Source/WebInspectorUI/UserInterface/CodeMirrorAdditions.js

    r151453 r153087  
    282282    });
    283283
    284     function alterNumber(amount, codeMirror)
    285     {
    286         var selectionAnchor = codeMirror.getCursor("anchor");
    287         var selectionHead = codeMirror.getCursor("head");
    288 
     284    CodeMirror.defineExtension("alterNumberInRange", function(amount, startPosition, endPosition, affectsSelection) {
    289285        // We don't try if the range is multiline, pass to another key handler.
    290         if (selectionAnchor.line !== selectionHead.line)
    291             return CodeMirror.Pass;
    292 
    293         var line = codeMirror.getLine(selectionAnchor.line);
     286        if (startPosition.line !== endPosition.line)
     287            return false;
     288
     289        var line = this.getLine(startPosition.line);
    294290
    295291        var foundPeriod = false;
    … …  
    298294        var end = NaN;
    299295
    300         for (var i = selectionAnchor.ch; i >= 0; --i) {
     296        for (var i = startPosition.ch; i >= 0; --i) {
    301297            var character = line.charAt(i);
    302298
    … …  
    307303            } else if (character !== "-" && character !== "+" && isNaN(parseInt(character))) {
    308304                // Found the end already, just scan backwards.
    309                 if (i === selectionAnchor.ch) {
     305                if (i === startPosition.ch) {
    310306                    end = i;
    311307                    continue;
    … …  
    319315
    320316        if (isNaN(end)) {
    321             for (var i = selectionAnchor.ch + 1; i < line.length; ++i) {
     317            for (var i = startPosition.ch + 1; i < line.length; ++i) {
    322318                var character = line.charAt(i);
    323319
    … …  
    340336        // No number range found, pass to another key handler.
    341337        if (isNaN(start) || isNaN(end))
    342             return CodeMirror.Pass;
     338            return false;
    343339
    344340        var number = parseFloat(line.substring(start, end));
    … …  
    353349        var alteredNumberString = alteredNumber.toString();
    354350
    355         var from = {line: selectionAnchor.line, ch: start};
    356         var to = {line: selectionAnchor.line, ch: end};
    357 
    358         codeMirror.replaceRange(alteredNumberString, from, to);
    359 
    360         var newTo = {line: selectionAnchor.line, ch: from.ch + alteredNumberString.length};
    361 
    362         // Fix up the selection so it follows the increase or decrease in the replacement length.
    363         if (selectionHead.ch >= to.ch)
    364             selectionHead = newTo;
    365 
    366         if (selectionAnchor.ch >= to.ch)
    367             selectionAnchor = newTo;
    368 
    369         codeMirror.setSelection(selectionAnchor, selectionHead);
     351        var from = {line: startPosition.line, ch: start};
     352        var to = {line: startPosition.line, ch: end};
     353
     354        this.replaceRange(alteredNumberString, from, to);
     355
     356        if (affectsSelection) {
     357            var newTo = {line: startPosition.line, ch: from.ch + alteredNumberString.length};
     358
     359            // Fix up the selection so it follows the increase or decrease in the replacement length.
     360            if (endPosition.ch >= to.ch)
     361                endPosition = newTo;
     362
     363            if (startPosition.ch >= to.ch)
     364                startPosition = newTo;
     365
     366            this.setSelection(startPosition, endPosition);
     367        }
     368
     369        return true;
     370    });
     371
     372    function alterNumber(amount, codeMirror)
     373    {
     374        var startPosition = codeMirror.getCursor("anchor");
     375        var endPosition = codeMirror.getCursor("head");
     376
     377        var foundNumber = codeMirror.alterNumberInRange(amount, startPosition, endPosition, true);
     378        if (!foundNumber)
     379            return CodeMirror.Pass;
    370380    }
    371381
    … …  
    411421        CodeMirror.defineMIME(type, {name: "javascript", json: true});
    412422    });
     423
    413424})();
    414425

  • trunk/Source/WebInspectorUI/UserInterface/Main.html

    r153044 r153087  
    117117    <link rel="stylesheet" href="ConsolePrompt.css">
    118118    <link rel="stylesheet" href="CSSColorPicker.css">
     119    <link rel="stylesheet" href="CodeMirrorDragToAlterNumberController.css">
    119120
    120121    <script src="External/CodeMirror/codemirror.js"></script>
    … …  
    140141    <script src="WebInspector.js"></script>
    141142    <script src="Object.js"></script>
     143    <script src="CodeMirrorDragToAlterNumberController.js"></script>
    142144    <script src="CodeMirrorAdditions.js"></script>
    143145    <script src="Setting.js"></script>

  • trunk/Source/WebInspectorUI/UserInterface/Main.js

    r153044 r153087  
    13701370}
    13711371
    1372 WebInspector.elementDragStart = function(element, dividerDrag, elementDragEnd, event, cursor)
     1372WebInspector.elementDragStart = function(element, dividerDrag, elementDragEnd, event, cursor, eventTarget)
    13731373{
    13741374    if (WebInspector._elementDraggingEventListener || WebInspector._elementEndDraggingEventListener)
    … …  
    13911391   
    13921392    var targetDocument = event.target.ownerDocument;
    1393     targetDocument.addEventListener("mousemove", dividerDrag, true);
    1394     targetDocument.addEventListener("mouseup", elementDragEnd, true);
     1393
     1394    WebInspector._elementDraggingEventTarget = eventTarget || targetDocument;
     1395    WebInspector._elementDraggingEventTarget.addEventListener("mousemove", dividerDrag, true);
     1396    WebInspector._elementDraggingEventTarget.addEventListener("mouseup", elementDragEnd, true);
    13951397   
    13961398    targetDocument.body.style.cursor = cursor;
    … …  
    14011403WebInspector.elementDragEnd = function(event)
    14021404{
    1403     var targetDocument = event.target.ownerDocument;
    1404     targetDocument.removeEventListener("mousemove", WebInspector._elementDraggingEventListener, true);
    1405     targetDocument.removeEventListener("mouseup", WebInspector._elementEndDraggingEventListener, true);
     1405    WebInspector._elementDraggingEventTarget.removeEventListener("mousemove", WebInspector._elementDraggingEventListener, true);
     1406    WebInspector._elementDraggingEventTarget.removeEventListener("mouseup", WebInspector._elementEndDraggingEventListener, true);
    14061407   
    1407     targetDocument.body.style.removeProperty("cursor");
     1408    event.target.ownerDocument.body.style.removeProperty("cursor");
    14081409   
    14091410    if (WebInspector._elementDraggingGlassPane)
    … …  
    14111412   
    14121413    delete WebInspector._elementDraggingGlassPane;
     1414    delete WebInspector._elementDraggingEventTarget;
    14131415    delete WebInspector._elementDraggingEventListener;
    14141416    delete WebInspector._elementEndDraggingEventListener;
Note: See TracChangeset for help on using the changeset viewer.