• graouts@apple.com's avatar
    Web Inspector: allow editing of colors in CSS resources · ffc95ad7
    graouts@apple.com authored
    Reviewed by Timothy Hatcher.
    Identify colors in CSS and HTML resources so that hovering these colors shows a HoverMenu
    allowing a ColorPicker hosted in a Popover to be shown to edit the hovered color.
    * UserInterface/CSSStyleDeclarationTextEditor.js:
    Remove the code that goes through the lines of the CodeMirror editor to look for
    color strings and replace it with a call to the .createColorMarkers() CodeMirror
    extension in which the code was refactored. The callback passed to
    .createColorMarkers() handles the CSSStyleDeclarationTextEditor-specific creation
    of color swatches to show the popover, keeping the existing behavior of the Styles
    sidebar panel.
    * UserInterface/CodeMirrorAdditions.js:
    Refactor existing code into two new CodeMirror extensions: .boundsForRange(), which
    was previously defined on the CodeMirrorTokenTrackingController but was also needed
    in the new CodeMirrorColorEditingController, and .createColorMarkers(), discussed above.
    * UserInterface/CodeMirrorColorEditingController.js: Added.
    New class used by SourceCodeTextEditor to coordinate the editing of a color in a CodeMirror
    TextMarker by a ColorPicker hosted in a Popover shown by the activation of a HoverMenu. This
    controller automatically gets the color set by the user using the ColorPicker and updates
    the CodeMirror text editor with the new value. When the user presses the Esc. key while the
    popover is shown, it's automatically dismissed and the original color is reset in the editor.
    (WebInspector.CodeMirrorColorEditingController.prototype.get marker):
    (WebInspector.CodeMirrorColorEditingController.prototype.get range):
    (WebInspector.CodeMirrorColorEditingController.prototype.get delegate):
    (WebInspector.CodeMirrorColorEditingController.prototype.set delegate):
    Getters and setters for public properties.
    (WebInspector.CodeMirrorColorEditingController.prototype.get color):
    (WebInspector.CodeMirrorColorEditingController.prototype.set color):
    Get and set the color for the edited color marker, replacing the text in the marker's range
    upon setting.
    Public API allowing for a HoverMenu to be shown around the bounds of the TextMarker passed
    in the constructor. This method is called from SourceCodeTextEditor when the
    CodeMirrorTokenTrackingController identifies that a token that is part of a TextMarker is
    hovered and that token is a color.
    Public API allowing for the HoverMenu to be dismissed. This method is called when the
    CodeMirrorTokenTrackingController identifies that its "hoveredMarker" is no longer being
    hovered as well as when we identify that editing of the color has completed.
    Event handler for the "keydown" event that are being listened to when the HoverMenu
    is activated such that the Esc. key can be used to dimiss the popover and reset the
    original color before any edits.
    Implementation of the HoverMenu delegation method used to show a Popover containing a
    ColorPicker upon clicking on the color wheel attached to the HoverMenu. We also remember
    the color set on the marker so that it may be restored when Esc. is pressed and used to
    set the original state of the ColorPicker. The delegation method
    colorEditingControllerDidStartEditing() is also called at this point, which the
    SourceCodeTextEditor implements.
    Implementation of the Popover delegation method used to identify that color editing has
    completed. The delegation method colorEditingControllerDidFinishEditing() is called
    at this point, which the SourceCodeTextEditor implements.
    Apply the color set in the color picker to the CodeMirror text editor.
    * UserInterface/CodeMirrorTokenTrackingController.js:
    Add two new modes to CodeMirrorTokenTrackingController. The first mode is "None" and is
    the default, incurring no specific token handling behavior. The second mode is "MarkedTokens"
    which identifies hover of a token contained in a CodeMirror TextMarker range. The new
    "MarkedTokens" mode is used by SourceCodeTextEditor to identify when a marked color is being
    hovered to display a HoverMenu.
    (WebInspector.CodeMirrorTokenTrackingController.prototype.set mode):
    Make "None" the new default mode for CodeMirrorTokenTrackingController.
    (WebInspector.CodeMirrorTokenTrackingController.prototype.get hoveredMarker):
    (WebInspector.CodeMirrorTokenTrackingController.prototype.set hoveredMarker):
    Check, when we have a "hoveredMarker" set on the CodeMirrorTokenTrackingController,
    whether the "hoveredMarker" is still being hovered when there is no token at the current
    mouse position. We can then determine when we're mousing out of the "hoveredMarker" and
    notify the delegate via the new tokenTrackingControllerMouseOutOfHoveredMarker delegate
    method. The SourceCodeTextEditor uses this method to dismiss its CodeMirrorColorEditingController.
    Add support for the new "MarkedTokens" mode.
    For the moment, use the same behavior as the existing "MarkedTokens" mode.
    * UserInterface/Color.js:
    Add a new "valid" property to identify whether a color has any invalid (NaN) component. This property
    is used by SourceCodeTextEditor to establish whether a hovered color marker is indeed set to a
    valid color still.
    New method to create an exact copy of a Color instance, used by CodeMirrorColorEditingController
    to duplicate the edited color in case we need to revert it.
    * UserInterface/HoverMenu.js:
    Rename hoverMenuWasActivated to hoverMenuButtonWasPressed per review feedback.
    * UserInterface/Images/ColorIcon.png: Added.
    * UserInterface/Images/ColorIcon@2x.png: Added.
    New color wheel icon used to customize the HoverMenu shown by a CodeMirrorColorEditingController.
    * UserInterface/Main.html:
    Link to the new CodeMirrorColorEditingController.js file.
    * UserInterface/SourceCodeTextEditor.css:
    (.hover-menu.color > img):
    Customize the HoverMenu shown by a CodeMirrorColorEditingController to use the new ColorIcon asset.
    * UserInterface/SourceCodeTextEditor.js:
    Add a new "_ignoreContentDidChange" ivar that increments and decrements to track when handling
    of CodeMirror content changes should be disabled.
    Adopt the new ._updateTokenTrackingControllerState() method to update the state of the
    Override the new TextEditor public API called when content in the CodeMirror text editor is changed.
    We use this method to process any newly added line to create any newly added color marker.
    Adopt the new ._updateTokenTrackingControllerState() method to update the state of the
    New method acting as the only point where we check the state of the text editor and set the right
    mode and settings on the CodeMirrorTokenTrackingController, including setting the new "MarkedTokens"
    mode when we have color markers, as determined by ._hasColorMarkers().
    Check whether any of the TextMarkers set on the CodeMirror text editor were created for a color.
    Check the CodeMirrorTokenTrackingController mode rather than the removed "_jumpToSymbolTrackingModeEnabled"
    ivar to identify we're in the "NonSymbolTokens" mode.
    Refactor method to use the CodeMirrorTokenTrackingController mode to branch into mode-specific code
    and add a new branch for the new "MarkedTokens" mode where we check if the newly hovered token
    is part of a color TextMarker range.
    Implement this new CodeMirrorTokenTrackingController delegation method to dismiss the
    CodeMirrorColorEditingController as we identify we're no longer hovering over the TextMarker
    for which the CodeMirrorColorEditingController was created.
    Adopt the new TextEditor boundsForRange() method.
    Harness the new TextEditor createColorMarkers() method to create new TextMarkers for the provided
    line, or the entire text editor content if none provided. We then immediately call _updateTokenTrackingControllerState()
    so that the new "MarkedTokens" mode is entered in case color TextMarkers were created for the first
    time for this text editor.
    Called when we've identified the CodeMirrorTokenTrackingController highlighted a TextMarker. We check
    if any of the hovered TextMarkers are for a color, and in this case create a CodeMirrorColorEditingController
    to coordinate the display of a ColorPicker in a Popover to edit the hovered color token. We also check
    whether the hovered marker still contains a valid color, clearing the marker in case it was edited to
    no longer contain a color.
    Used to dismiss the CodeMirrorColorEditingController, if previously presented, and reset some internal state.
    Implement this CodeMirrorColorEditingController delegation method to temporarily disable the
    CodeMirrorTokenTrackingController while we edit the color with the ColorPicker, remove
    the TextMarker for the edited color and instruct that content changes should be ignored
    such that we act on the complete set of color edits upon completion.
    Update color markers for the edited line such that any color edits are correctly updated for
    the future and so that, as a side-effect, the CodeMirrorColorEditingController is reset to the
    appropriate mode depending on whether color TextMarkers are indeed available, resetting states
    that may have been altered by colorEditingControllerDidStartEditing().
    * UserInterface/TextEditor.js:
    New public method meant to be overriden by subclasses, added for the use of SourceCodeTextEditor, exposing
    the list of TextRanges affected by the content change, both in the context of the old content and new content.
    (WebInspector.TextEditor.prototype.get markers):
    New public methods calling into the CodeMirror private ivar for the benefit of SourceCodeTextEditor.
    Call the new contentDidChange() method.
    git-svn-id: http://svn.webkit.org/repository/webkit/trunk@160483 268f45cc-cd09-0410-ab3c-d52691b4dbfc
Main.html 21.6 KB