Changeset 157601 in webkit


Ignore:
Timestamp:
Oct 17, 2013 2:38:21 PM (11 years ago)
Author:
Antoine Quint
Message:

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.

Location:
trunk/Source/WebInspectorUI
Files:
3 added
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r157600 r157601  
     12013-10-17  Antoine Quint  <graouts@apple.com>
     2
     3        Web Inspector: Go to line keyboard command and dialog
     4        https://bugs.webkit.org/show_bug.cgi?id=122893
     5
     6        Reviewed by Timothy Hatcher.
     7
     8        Add a text input over source code text editors, centered within the width of the editor
     9        and towards the top of the editor, upon pressing Command+L or Control+G to match the
     10        behavior in Chrome.
     11
     12        * Localizations/en.lproj/localizedStrings.js:
     13        New localized string "Line Number".
     14
     15        * UserInterface/GoToLineDialog.css: Added.
     16        Styling for the go-to-line dialog.
     17
     18        * UserInterface/GoToLineDialog.js: Added.
     19        (WebInspector.GoToLineDialog):
     20        Generate the DOM structure for the dialog.
     21
     22        (WebInspector.GoToLineDialog.prototype.present):
     23        Present the dialog as a child of a parent element. The dialog's text field automatically
     24        gets focus and resets to be empty.
     25
     26        (WebInspector.GoToLineDialog.prototype.dismiss):
     27        Dismiss the dialog if visible, this triggers the goToLineDialogWasDismissed delegate method.
     28
     29        (WebInspector.GoToLineDialog.prototype.handleEvent):
     30        Route the various events registered in the dialog's DOM tree: input, keydown, blur, mousedown
     31        and click.
     32
     33        (WebInspector.GoToLineDialog.prototype._handleInputEvent):
     34        Update the "non-empty" class on the dialog's element depending on the content of the dialog's
     35        text field. If there is content in the text field, this will make the clear icon visible.
     36
     37        (WebInspector.GoToLineDialog.prototype._handleKeydownEvent):
     38        If the Esc. key is pressed when there is text in the dialog's input field, clear the input field.
     39        If no text is in the input field, dismiss the input field. When the Enter key is pressed, we call
     40        the isGoToLineDialogValueValid() method on the delegate to figure out if the text field value is
     41        valid. If it's not, we select the text field value so that it may be easily replaced and play
     42        en error sound. If it's valid, we call the goToLineDialogValueWasValidated() delegate method
     43        and dismiss the dialog.
     44
     45        (WebInspector.GoToLineDialog.prototype._handleBlurEvent):
     46        Dismiss the dialog when its text field loses focus. This ensures that clicking anywhere outside
     47        of the dialog removes it from display.
     48
     49        (WebInspector.GoToLineDialog.prototype._handleMousedownEvent):
     50        Upon pressing the mouse down on the clear icon, select the entire text field content (matches
     51        the behavior of Xcode) and prevent the default event action that would blur the text field
     52        which would dismiss the dialog.
     53
     54        (WebInspector.GoToLineDialog.prototype._handleClickEvent):
     55        Clear the content of the dialog's text field upon clicking on its clear button.
     56
     57        (WebInspector.GoToLineDialog.prototype._clear):
     58        Reset the dialog's text field's value to an empty string and remove the "non-empty" CSS class name
     59        controlling the display of the clear button.
     60
     61        * UserInterface/Images/CloseWhite.svg: Added.
     62        Variation of the Close.svg icon with a white cross.
     63
     64        * UserInterface/Main.html:
     65        Link to the newly added resources for GoToLineDialog.
     66
     67        * UserInterface/SourceCodeTextEditor.js:
     68        (WebInspector.SourceCodeTextEditor):
     69        Register the Command+L and Control+G keyboard shortcuts to bring up the go-to-line dialog.
     70
     71        (WebInspector.SourceCodeTextEditor.prototype.showGoToLineDialog):
     72        Method called upon pressing the Command+L and Control+G keyboard shorcuts creating an instance
     73        of a GoToDialog if necessary, becoming its delegate and presenting it in the context of the
     74        editor's root element.
     75
     76        (WebInspector.SourceCodeTextEditor.prototype.isGoToLineDialogValueValid):
     77        Delegate method called to validate the line number presently set in the go-to-dialog's text field,
     78        checking it's a number between 1 and the number of lines in the source code.
     79
     80        (WebInspector.SourceCodeTextEditor.prototype.goToLineDialogValueWasValidated):
     81        Delegate method called when the line number set in the go-to-dialog's text field has been validated.
     82        We reveal and select the line at the number provided.
     83
     84        (WebInspector.SourceCodeTextEditor.prototype.goToLineDialogWasDismissed):
     85        Ensure the source code editor regains focus upon dismissing the go-to-dialog.
     86
     87        * UserInterface/TextEditor.js:
     88        (WebInspector.TextEditor.prototype.revealPosition):
     89        Add a new opt-in option to not highlight the revealed position. The code in goToLineDialogValueWasValidated()
     90        sets that new flag to true to avoid an unnecessary highlight on top of the selection.
     91
     92        (WebInspector.TextEditor.prototype.get lineCount):
     93        Expose the lineCount() method on the private CodeMirror instance.
     94
     95        (WebInspector.TextEditor.prototype.focus):
     96        Expose the focus() method on the private CodeMirror instance.
     97
    1982013-10-17  Antoine Quint  <graouts@apple.com>
    299

  • trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

    r155133 r157601  
    229229localizedStrings["Line %d"] = "Line %d";
    230230localizedStrings["Line %d:%d"] = "Line %d:%d";
     231localizedStrings["Line Number"] = "Line Number";
    231232localizedStrings["Load event fired at %s"] = "Load event fired at %s";
    232233localizedStrings["Local File"] = "Local File";

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

    r156809 r157601  
    120120    <link rel="stylesheet" href="CSSColorPicker.css">
    121121    <link rel="stylesheet" href="CodeMirrorDragToAlterNumberController.css">
     122    <link rel="stylesheet" href="GoToLineDialog.css">
    122123
    123124    <script src="External/CodeMirror/codemirror.js"></script>
    … …  
    394395    <script src="MIMETypeUtilities.js"></script>
    395396    <script src="LoadLocalizedStrings.js"></script>
     397    <script src="GoToLineDialog.js"></script>
    396398    <script src="Main.js"></script>
    397399

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

    r156923 r157601  
    6767
    6868    sourceCode.requestContent(this._contentAvailable.bind(this));
     69
     70    // FIXME: Cmd+L shorcut doesn't actually work.
     71    new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, "L", this.showGoToLineDialog.bind(this), this.element);
     72    new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control, "G", this.showGoToLineDialog.bind(this), this.element);
    6973};
    7074
    … …  
    185189            DebuggerAgent.searchInContent(this._sourceCode.id, query, false, false, searchResultCallback.bind(this));
    186190        return true;
     191    },
     192
     193    showGoToLineDialog: function()
     194    {
     195        if (!this._goToLineDialog) {
     196            this._goToLineDialog = new WebInspector.GoToLineDialog;
     197            this._goToLineDialog.delegate = this;
     198        }
     199
     200        this._goToLineDialog.present(this.element);
     201    },
     202
     203    isGoToLineDialogValueValid: function(goToLineDialog, lineNumber)
     204    {
     205        return !isNaN(lineNumber) && lineNumber > 0 && lineNumber <= this.lineCount;
     206    },
     207
     208    goToLineDialogValueWasValidated: function(goToLineDialog, lineNumber)
     209    {
     210        var position = new WebInspector.SourceCodePosition(lineNumber - 1, 0);
     211        var range = new WebInspector.TextRange(lineNumber - 1, 0, lineNumber, 0);
     212        this.revealPosition(position, range, false, true);
     213    },
     214
     215    goToLineDialogWasDismissed: function()
     216    {
     217        this.focus();
    187218    },
    188219

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

    r156209 r157601  
    445445    },
    446446
    447     revealPosition: function(position, textRangeToSelect, forceUnformatted)
     447    revealPosition: function(position, textRangeToSelect, forceUnformatted, noHighlight)
    448448    {
    449449        console.assert(position === undefined || position instanceof WebInspector.SourceCodePosition, "revealPosition called without a SourceCodePosition");
    … …  
    490490            this.selectedTextRange = textRangeToSelect;
    491491
     492            if (noHighlight)
     493                return;
     494
    492495            this._codeMirror.addLineClass(lineHandle, "wrap", WebInspector.TextEditor.HighlightedStyleClassName);
    493496
    … …  
    578581
    579582        return this._codeMirror.toggleLineClass(lineHandle, "wrap", styleClassName);
     583    },
     584
     585    get lineCount()
     586    {
     587        return this._codeMirror.lineCount();
     588    },
     589
     590    focus: function()
     591    {
     592        this._codeMirror.focus();
    580593    },
    581594
Note: See TracChangeset for help on using the changeset viewer.