Commit c0736bac authored by graouts@apple.com's avatar graouts@apple.com

Web Inspector: Go to line keyboard command and dialog

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

Reviewed by Timothy Hatcher.

Add a text input over source code text editors, centered within the width of the editor
and towards the top of the editor, upon pressing Command+L or Control+G to match the
behavior in Chrome.

* Localizations/en.lproj/localizedStrings.js:
New localized string "Line Number".

* UserInterface/GoToLineDialog.css: Added.
Styling for the go-to-line dialog.

* UserInterface/GoToLineDialog.js: Added.
(WebInspector.GoToLineDialog):
Generate the DOM structure for the dialog.

(WebInspector.GoToLineDialog.prototype.present):
Present the dialog as a child of a parent element. The dialog's text field automatically
gets focus and resets to be empty.

(WebInspector.GoToLineDialog.prototype.dismiss):
Dismiss the dialog if visible, this triggers the goToLineDialogWasDismissed delegate method.

(WebInspector.GoToLineDialog.prototype.handleEvent):
Route the various events registered in the dialog's DOM tree: input, keydown, blur, mousedown
and click.

(WebInspector.GoToLineDialog.prototype._handleInputEvent):
Update the "non-empty" class on the dialog's element depending on the content of the dialog's
text field. If there is content in the text field, this will make the clear icon visible.

(WebInspector.GoToLineDialog.prototype._handleKeydownEvent):
If the Esc. key is pressed when there is text in the dialog's input field, clear the input field.
If no text is in the input field, dismiss the input field. When the Enter key is pressed, we call
the isGoToLineDialogValueValid() method on the delegate to figure out if the text field value is
valid. If it's not, we select the text field value so that it may be easily replaced and play
en error sound. If it's valid, we call the goToLineDialogValueWasValidated() delegate method
and dismiss the dialog.

(WebInspector.GoToLineDialog.prototype._handleBlurEvent):
Dismiss the dialog when its text field loses focus. This ensures that clicking anywhere outside
of the dialog removes it from display.

(WebInspector.GoToLineDialog.prototype._handleMousedownEvent):
Upon pressing the mouse down on the clear icon, select the entire text field content (matches
the behavior of Xcode) and prevent the default event action that would blur the text field
which would dismiss the dialog.

(WebInspector.GoToLineDialog.prototype._handleClickEvent):
Clear the content of the dialog's text field upon clicking on its clear button.

(WebInspector.GoToLineDialog.prototype._clear):
Reset the dialog's text field's value to an empty string and remove the "non-empty" CSS class name
controlling the display of the clear button.

* UserInterface/Images/CloseWhite.svg: Added.
Variation of the Close.svg icon with a white cross.

* UserInterface/Main.html:
Link to the newly added resources for GoToLineDialog.

* UserInterface/SourceCodeTextEditor.js:
(WebInspector.SourceCodeTextEditor):
Register the Command+L and Control+G keyboard shortcuts to bring up the go-to-line dialog.

(WebInspector.SourceCodeTextEditor.prototype.showGoToLineDialog):
Method called upon pressing the Command+L and Control+G keyboard shorcuts creating an instance
of a GoToDialog if necessary, becoming its delegate and presenting it in the context of the
editor's root element.

(WebInspector.SourceCodeTextEditor.prototype.isGoToLineDialogValueValid):
Delegate method called to validate the line number presently set in the go-to-dialog's text field,
checking it's a number between 1 and the number of lines in the source code.

(WebInspector.SourceCodeTextEditor.prototype.goToLineDialogValueWasValidated):
Delegate method called when the line number set in the go-to-dialog's text field has been validated.
We reveal and select the line at the number provided.

(WebInspector.SourceCodeTextEditor.prototype.goToLineDialogWasDismissed):
Ensure the source code editor regains focus upon dismissing the go-to-dialog.

* UserInterface/TextEditor.js:
(WebInspector.TextEditor.prototype.revealPosition):
Add a new opt-in option to not highlight the revealed position. The code in goToLineDialogValueWasValidated()
sets that new flag to true to avoid an unnecessary highlight on top of the selection.

(WebInspector.TextEditor.prototype.get lineCount):
Expose the lineCount() method on the private CodeMirror instance.

(WebInspector.TextEditor.prototype.focus):
Expose the focus() method on the private CodeMirror instance.


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@157601 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent b7d805fb
2013-10-17 Antoine Quint <graouts@apple.com>
Web Inspector: Go to line keyboard command and dialog
https://bugs.webkit.org/show_bug.cgi?id=122893
Reviewed by Timothy Hatcher.
Add a text input over source code text editors, centered within the width of the editor
and towards the top of the editor, upon pressing Command+L or Control+G to match the
behavior in Chrome.
* Localizations/en.lproj/localizedStrings.js:
New localized string "Line Number".
* UserInterface/GoToLineDialog.css: Added.
Styling for the go-to-line dialog.
* UserInterface/GoToLineDialog.js: Added.
(WebInspector.GoToLineDialog):
Generate the DOM structure for the dialog.
(WebInspector.GoToLineDialog.prototype.present):
Present the dialog as a child of a parent element. The dialog's text field automatically
gets focus and resets to be empty.
(WebInspector.GoToLineDialog.prototype.dismiss):
Dismiss the dialog if visible, this triggers the goToLineDialogWasDismissed delegate method.
(WebInspector.GoToLineDialog.prototype.handleEvent):
Route the various events registered in the dialog's DOM tree: input, keydown, blur, mousedown
and click.
(WebInspector.GoToLineDialog.prototype._handleInputEvent):
Update the "non-empty" class on the dialog's element depending on the content of the dialog's
text field. If there is content in the text field, this will make the clear icon visible.
(WebInspector.GoToLineDialog.prototype._handleKeydownEvent):
If the Esc. key is pressed when there is text in the dialog's input field, clear the input field.
If no text is in the input field, dismiss the input field. When the Enter key is pressed, we call
the isGoToLineDialogValueValid() method on the delegate to figure out if the text field value is
valid. If it's not, we select the text field value so that it may be easily replaced and play
en error sound. If it's valid, we call the goToLineDialogValueWasValidated() delegate method
and dismiss the dialog.
(WebInspector.GoToLineDialog.prototype._handleBlurEvent):
Dismiss the dialog when its text field loses focus. This ensures that clicking anywhere outside
of the dialog removes it from display.
(WebInspector.GoToLineDialog.prototype._handleMousedownEvent):
Upon pressing the mouse down on the clear icon, select the entire text field content (matches
the behavior of Xcode) and prevent the default event action that would blur the text field
which would dismiss the dialog.
(WebInspector.GoToLineDialog.prototype._handleClickEvent):
Clear the content of the dialog's text field upon clicking on its clear button.
(WebInspector.GoToLineDialog.prototype._clear):
Reset the dialog's text field's value to an empty string and remove the "non-empty" CSS class name
controlling the display of the clear button.
* UserInterface/Images/CloseWhite.svg: Added.
Variation of the Close.svg icon with a white cross.
* UserInterface/Main.html:
Link to the newly added resources for GoToLineDialog.
* UserInterface/SourceCodeTextEditor.js:
(WebInspector.SourceCodeTextEditor):
Register the Command+L and Control+G keyboard shortcuts to bring up the go-to-line dialog.
(WebInspector.SourceCodeTextEditor.prototype.showGoToLineDialog):
Method called upon pressing the Command+L and Control+G keyboard shorcuts creating an instance
of a GoToDialog if necessary, becoming its delegate and presenting it in the context of the
editor's root element.
(WebInspector.SourceCodeTextEditor.prototype.isGoToLineDialogValueValid):
Delegate method called to validate the line number presently set in the go-to-dialog's text field,
checking it's a number between 1 and the number of lines in the source code.
(WebInspector.SourceCodeTextEditor.prototype.goToLineDialogValueWasValidated):
Delegate method called when the line number set in the go-to-dialog's text field has been validated.
We reveal and select the line at the number provided.
(WebInspector.SourceCodeTextEditor.prototype.goToLineDialogWasDismissed):
Ensure the source code editor regains focus upon dismissing the go-to-dialog.
* UserInterface/TextEditor.js:
(WebInspector.TextEditor.prototype.revealPosition):
Add a new opt-in option to not highlight the revealed position. The code in goToLineDialogValueWasValidated()
sets that new flag to true to avoid an unnecessary highlight on top of the selection.
(WebInspector.TextEditor.prototype.get lineCount):
Expose the lineCount() method on the private CodeMirror instance.
(WebInspector.TextEditor.prototype.focus):
Expose the focus() method on the private CodeMirror instance.
2013-10-17 Antoine Quint <graouts@apple.com>
Web Inspector: logged objects are highlighted in blue
......
/*
* 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.
*/
.go-to-line-dialog {
position: relative;
left: 50%;
top: 50px;
width: calc(100% - 40px);
max-width: 452px;
height: 38px;
-webkit-transform: translate(-50%, -50%);
padding: 3px;
border-radius: 5px;
background-color: rgba(232, 232, 232, 0.95);
border: 1px rgb(218, 218, 218) solid;
box-shadow: 1px 5px 20px 3px rgba(0, 0, 0, 0.33);
}
.go-to-line-dialog > div {
width: 100%;
height: 100%;
border-radius: 4px;
background-color: white;
border: 1px rgb(206, 206, 206) solid;
}
.go-to-line-dialog > div > input {
position: absolute;
left: 2px;
right: 36px;
border: none;
background-color: transparent;
font-family: "Lucida Grande", sans-serif;
font-size: 20px;
color: rgb(12, 12, 12);
padding: 0 0 1px 5px;
outline: none;
}
.go-to-line-dialog > div > input::-webkit-input-placeholder {
color: rgb(133, 133, 133);
}
.go-to-line-dialog > div > img {
position: absolute;
top: 9px;
right: 12px;
padding: 2px;
border-radius: 9px;
width: 18px;
height: 18px;
background-color: rgb(188, 188, 188);
display: none;
content: url(Images/CloseWhite.svg);
}
.go-to-line-dialog > div > img:active {
background-color: rgb(140, 140, 140);
}
.go-to-line-dialog.non-empty > div > img {
display: block;
}
/*
* 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.GoToLineDialog = function()
{
WebInspector.Object.call(this);
this._element = document.createElement("div");
this._element.className = WebInspector.GoToLineDialog.StyleClassName;
var field = this._element.appendChild(document.createElement("div"));
this._input = field.appendChild(document.createElement("input"));
this._input.type = "text";
this._input.placeholder = WebInspector.UIString("Line Number");
this._input.spellcheck = false;
this._clearIcon = field.appendChild(document.createElement("img"));
this._input.addEventListener("input", this);
this._input.addEventListener("keydown", this);
this._input.addEventListener("blur", this);
this._clearIcon.addEventListener("mousedown", this);
this._clearIcon.addEventListener("click", this);
}
WebInspector.GoToLineDialog.StyleClassName = "go-to-line-dialog";
WebInspector.GoToLineDialog.NonEmptyClassName = "non-empty";
WebInspector.GoToLineDialog.prototype = {
constructor: WebInspector.GoToLineDialog,
__proto__: WebInspector.Object.prototype,
// Public
present: function(parent)
{
parent.appendChild(this._element);
this._input.focus();
this._clear();
},
dismiss: function()
{
var parent = this._element.parentNode;
if (!parent)
return;
parent.removeChild(this._element);
if (this.delegate && typeof this.delegate.goToLineDialogWasDismissed === "function")
this.delegate.goToLineDialogWasDismissed(this);
},
// Protected
handleEvent: function(event)
{
switch (event.type) {
case "input":
this._handleInputEvent(event);
break;
case "keydown":
this._handleKeydownEvent(event);
break;
case "blur":
this._handleBlurEvent(event);
break;
case "mousedown":
this._handleMousedownEvent(event);
break;
case "click":
this._handleClickEvent(event);
break;
}
},
// Private
_handleInputEvent: function(event)
{
if (this._input.value === "")
this._element.classList.remove(WebInspector.GoToLineDialog.NonEmptyClassName);
else
this._element.classList.add(WebInspector.GoToLineDialog.NonEmptyClassName);
},
_handleKeydownEvent: function(event)
{
if (event.keyCode === WebInspector.KeyboardShortcut.Key.Escape.keyCode) {
if (this._input.value === "")
this.dismiss();
else
this._clear();
} else if (event.keyCode === WebInspector.KeyboardShortcut.Key.Enter.keyCode) {
var value = parseInt(this._input.value, 10);
var valueIsValid = false;
if (this.delegate && typeof this.delegate.isGoToLineDialogValueValid === "function")
valueIsValid = this.delegate.isGoToLineDialogValueValid(this, value);
if (valueIsValid && this.delegate && typeof this.delegate.goToLineDialogValueWasValidated === "function") {
this.delegate.goToLineDialogValueWasValidated(this, value);
this.dismiss();
return;
}
this._input.select();
InspectorFrontendHost.beep();
}
},
_handleBlurEvent: function(event)
{
this.dismiss();
},
_handleMousedownEvent: function(event)
{
this._input.select();
// This ensures we don't get a "blur" event triggered for the text field
// which would end up dimissing the dialog, which is not the intent.
event.preventDefault();
},
_handleClickEvent: function(event)
{
this._clear();
},
_clear: function()
{
this._input.value = "";
this._element.classList.remove(WebInspector.GoToLineDialog.NonEmptyClassName);
}
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 14">
<path d="M 12.949219 10.535156 L 11.535156 11.949219 L 8 8.414062 L 4.464844 11.949219 L 3.050781 10.535156 L 6.585938 7 L 3.050781 3.464844 L 4.464844 2.050781 L 8 5.585938 L 11.535156 2.050781 L 12.949219 3.464844 L 9.414062 7 Z" fill="white"/>
</svg>
......@@ -119,6 +119,7 @@
<link rel="stylesheet" href="ConsolePrompt.css">
<link rel="stylesheet" href="CSSColorPicker.css">
<link rel="stylesheet" href="CodeMirrorDragToAlterNumberController.css">
<link rel="stylesheet" href="GoToLineDialog.css">
<script src="External/CodeMirror/codemirror.js"></script>
<script src="External/CodeMirror/comment.js"></script>
......@@ -393,6 +394,7 @@
<script src="ConsolePrompt.js"></script>
<script src="MIMETypeUtilities.js"></script>
<script src="LoadLocalizedStrings.js"></script>
<script src="GoToLineDialog.js"></script>
<script src="Main.js"></script>
<script>
......
......@@ -66,6 +66,10 @@ WebInspector.SourceCodeTextEditor = function(sourceCode)
this._sourceCode.addEventListener(WebInspector.SourceCode.Event.SourceMapAdded, this._sourceCodeSourceMapAdded, this);
sourceCode.requestContent(this._contentAvailable.bind(this));
// FIXME: Cmd+L shorcut doesn't actually work.
new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, "L", this.showGoToLineDialog.bind(this), this.element);
new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control, "G", this.showGoToLineDialog.bind(this), this.element);
};
WebInspector.Object.addConstructorFunctions(WebInspector.SourceCodeTextEditor);
......@@ -186,6 +190,33 @@ WebInspector.SourceCodeTextEditor.prototype = {
return true;
},
showGoToLineDialog: function()
{
if (!this._goToLineDialog) {
this._goToLineDialog = new WebInspector.GoToLineDialog;
this._goToLineDialog.delegate = this;
}
this._goToLineDialog.present(this.element);
},
isGoToLineDialogValueValid: function(goToLineDialog, lineNumber)
{
return !isNaN(lineNumber) && lineNumber > 0 && lineNumber <= this.lineCount;
},
goToLineDialogValueWasValidated: function(goToLineDialog, lineNumber)
{
var position = new WebInspector.SourceCodePosition(lineNumber - 1, 0);
var range = new WebInspector.TextRange(lineNumber - 1, 0, lineNumber, 0);
this.revealPosition(position, range, false, true);
},
goToLineDialogWasDismissed: function()
{
this.focus();
},
// Private
_unformattedLineInfoForEditorLineInfo: function(lineInfo)
......
......@@ -444,7 +444,7 @@ WebInspector.TextEditor.prototype = {
return this._codeMirror.getLine(lineNumber);
},
revealPosition: function(position, textRangeToSelect, forceUnformatted)
revealPosition: function(position, textRangeToSelect, forceUnformatted, noHighlight)
{
console.assert(position === undefined || position instanceof WebInspector.SourceCodePosition, "revealPosition called without a SourceCodePosition");
if (!(position instanceof WebInspector.SourceCodePosition))
......@@ -489,6 +489,9 @@ WebInspector.TextEditor.prototype = {
this.selectedTextRange = textRangeToSelect;
if (noHighlight)
return;
this._codeMirror.addLineClass(lineHandle, "wrap", WebInspector.TextEditor.HighlightedStyleClassName);
// Use a timeout instead of a webkitAnimationEnd event listener because the line element might
......@@ -579,6 +582,16 @@ WebInspector.TextEditor.prototype = {
return this._codeMirror.toggleLineClass(lineHandle, "wrap", styleClassName);
},
get lineCount()
{
return this._codeMirror.lineCount();
},
focus: function()
{
this._codeMirror.focus();
},
// Private
_updateCodeMirrorReadOnly: function()
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment