Modified: trunk/Source/WebInspectorUI/ChangeLog (186211 => 186212)
--- trunk/Source/WebInspectorUI/ChangeLog 2015-07-02 00:40:04 UTC (rev 186211)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-07-02 00:47:52 UTC (rev 186212)
@@ -1,3 +1,22 @@
+2015-07-01 Devin Rousso <drou...@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 Timothy Hatcher.
+
+ * 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 <drou...@apple.com>
Web Inspector: add " = $0" hint after selected element in main DOMTreeOutline
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js (186211 => 186212)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js 2015-07-02 00:40:04 UTC (rev 186211)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js 2015-07-02 00:47:52 UTC (rev 186212)
@@ -33,7 +33,11 @@
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 = {};
this._filterResultPropertyNames = null;
@@ -58,6 +62,7 @@
});
this._codeMirror.addKeyMap({
+ "Enter": this._handleEnterKey.bind(this),
"Shift-Enter": this._insertNewlineAfterCurrentLine.bind(this),
"Shift-Tab": this._handleShiftTabKey.bind(this),
"Tab": this._handleTabKey.bind(this)
@@ -389,6 +394,68 @@
// 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();
@@ -459,16 +526,6 @@
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();
@@ -486,7 +543,7 @@
}
++cursor.line;
- highlightNextNameOrValue(nextLine);
+ this._highlightNextNameOrValue(codeMirror, cursor, nextLine);
return;
}
@@ -526,7 +583,7 @@
return;
}
- highlightNextNameOrValue(line);
+ this._highlightNextNameOrValue(codeMirror, cursor, line);
}
_clearRemoveEditingLineClassesTimeout()
