ChangeLog

2015-07-01  Devin Rousso  <drousso@apple.com>

        Make the first click on a rule section create a newline for easy property addition

        https://bugs.webkit.org/show_bug.cgi?id=146490

        Reviewed by NOBODY (OOPS!).

        * UserInterface/Views/CSSStyleDeclarationTextEditor.js:

        (WebInspector.CSSStyleDeclarationTextEditor):

        (WebInspector.CSSStyleDeclarationTextEditor.prototype._highlightNextNameOrValue):

        (WebInspector.CSSStyleDeclarationTextEditor.prototype._handleEnterKey): Inserts a semicolon if the line is missing one.

        (WebInspector.CSSStyleDeclarationTextEditor.prototype._handleMouseDown): If the user clicks on a property with the editor being

        unfocused, the name/value containing the cursor will be highlighted.  If instead the user clicks at the end of a line, the

        cursor's position is saved for mouseUp.

        (WebInspector.CSSStyleDeclarationTextEditor.prototype._handleMouseUp): If the mouseDown cursor position was saved and is equal

        to the current cursor's position (the user did not drag), add a newline after the current line and place the cursor on that line.

        (WebInspector.CSSStyleDeclarationTextEditor.prototype._handleTabKey):

        (WebInspector.CSSStyleDeclarationTextEditor.prototype._handleTabKey.highlightNextNameOrValue): Deleted.

2015-06-30  Devin Rousso  <drousso@apple.com>

        Web Inspector: add " = $0" hint after selected element in main DOMTreeOutline

Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js

@@WebInspector.CSSStyleDeclarationTextEditor = class CSSStyleDeclarationTextEditor

        this._element = element || document.createElement("div");

        this._element.classList.add(WebInspector.CSSStyleDeclarationTextEditor.StyleClassName);

        this._element.classList.add(WebInspector.SyntaxHighlightedStyleClassName);

        this._element.addEventListener("mousedown", this._handleMouseDown.bind(this));

        this._element.addEventListener("mouseup", this._handleMouseUp.bind(this));

        this._mouseDownCursorPosition = null;

        this._showsImplicitProperties = true;

        this._alwaysShowPropertyNames = {};

@@WebInspector.CSSStyleDeclarationTextEditor = class CSSStyleDeclarationTextEditor

        });

        this._codeMirror.addKeyMap({

65 "Enter": this._handleEnterKey.bind(this),

            "Shift-Enter": this._insertNewlineAfterCurrentLine.bind(this),

            "Shift-Tab": this._handleShiftTabKey.bind(this),

            "Tab": this._handleTabKey.bind(this)

@@WebInspector.CSSStyleDeclarationTextEditor = class CSSStyleDeclarationTextEditor

    // Private

    _highlightNextNameOrValue(codeMirror, cursor, text)

    {

        var match = text.match(/(?:[^:;\s]\s*)+/g);

        var firstMatch = text.indexOf(match[0]) + match[0].length;

        var nextHead = cursor.ch < firstMatch ? text.indexOf(match[0]) : text.indexOf(match[1]);

        var nextAnchor = cursor.ch < firstMatch ? firstMatch : text.indexOf(match[1]) + match[1].length;

        codeMirror.setSelection({line: cursor.line, ch: nextHead}, {line: cursor.line, ch: nextAnchor});

    }

    _handleMouseDown(event)

    {

        if (this._codeMirror.options.readOnly || this._codeMirror.state.focused)

            return;

        var cursor = this._codeMirror.coordsChar({left: event.x, top: event.y});

        var line = this._codeMirror.getLine(cursor.line);

        var trimmedLine = line.trimRight();

        if (!trimmedLine.trimLeft().length)

            return;

        if (cursor.ch !== trimmedLine.length) {

            this._highlightNextNameOrValue(this._codeMirror, cursor, line);

            return;

        }

        this._mouseDownCursorPosition = cursor;

    }

    _handleMouseUp(event)

    {

        if (this._codeMirror.options.readOnly || !this._mouseDownCursorPosition)

            return;

        var cursor = this._codeMirror.coordsChar({left: event.x, top: event.y});

        var line = this._codeMirror.getLine(cursor.line);

        if (this._mouseDownCursorPosition.line === cursor.line && this._mouseDownCursorPosition.ch === cursor.ch)

            this._codeMirror.replaceRange(line.trimRight().endsWith(";") ? "\n" : ";\n", cursor);

        this._mouseDownCursorPosition = null;

    }

    _handleEnterKey(codeMirror)

    {

        var cursor = codeMirror.getCursor();

        var line = codeMirror.getLine(cursor.line);

        var trimmedLine = line.trimRight();

        var hasEndingSemicolon = trimmedLine.endsWith(";");

        if (hasEndingSemicolon && cursor.ch === trimmedLine.length - 1)

            ++cursor.ch;

        if (cursor.ch === trimmedLine.length) {

            codeMirror.replaceRange(hasEndingSemicolon ? "\n" : ";\n", cursor);

            return;

        }

        return CodeMirror.Pass;

    }

    _insertNewlineAfterCurrentLine(codeMirror)

    {

        var cursor = codeMirror.getCursor();

@@WebInspector.CSSStyleDeclarationTextEditor = class CSSStyleDeclarationTextEditor

            return CodeMirror.Pass;

        }

        function highlightNextNameOrValue(text)

        {

            var match = text.match(/(?:[^:;\s]\s*)+/g);

            var firstMatch = text.indexOf(match[0]) + match[0].length;

            var nextHead = cursor.ch < firstMatch ? text.indexOf(match[0]) : text.indexOf(match[1]);

            var nextAnchor = cursor.ch < firstMatch ? firstMatch : text.indexOf(match[1]) + match[1].length;

            codeMirror.setSelection({line: cursor.line, ch: nextHead}, {line: cursor.line, ch: nextAnchor});

        }

        var cursor = codeMirror.getCursor();

        var line = codeMirror.getLine(cursor.line);

        var trimmedLine = line.trimRight();

@@WebInspector.CSSStyleDeclarationTextEditor = class CSSStyleDeclarationTextEditor

            }

            ++cursor.line;

489 highlightNextNameOrValue(nextLine);

546 this._highlightNextNameOrValue(codeMirror, cursor, nextLine);

            return;

        }

@@WebInspector.CSSStyleDeclarationTextEditor = class CSSStyleDeclarationTextEditor

            return;

        }

529 highlightNextNameOrValue(line);

586 this._highlightNextNameOrValue(codeMirror, cursor, line);

    }

    _clearRemoveEditingLineClassesTimeout()