DevTools: [CodeMirror] autocompletion for CodeMirrorTextEditor

Source/devtools/front_end/CodeMirrorTextEditor.js

 /*
  * Copyright (C) 2012 Google 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:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 37 matching lines @@
 WebInspector.CodeMirrorTextEditor = function(url, delegate)
 {
     WebInspector.View.call(this);
     this._delegate = delegate;
     this._url = url;
 
     this.registerRequiredCSS("cm/codemirror.css");
     this.registerRequiredCSS("cm/showhint.css");
     this.registerRequiredCSS("cm/cmdevtools.css");
 
+    function autocompleteCommand()
+    {
+        if (!this._dictionary || this._codeMirror.somethingSelected())
+            return;
+        CodeMirror.showHint(this._codeMirror, this._autocomplete.bind(this));
+    }
+    CodeMirror.commands.autocomplete = autocompleteCommand.bind(this);
+
     this._codeMirror = window.CodeMirror(this.element, {
         lineNumbers: true,
         gutters: ["CodeMirror-linenumbers"],
         matchBrackets: true,
         smartIndent: false,
         styleSelectedText: true,
         electricChars: false,
         autoCloseBrackets: true
     });
 
-    var extraKeys = {};
+    var extraKeys = {"Ctrl-Space": "autocomplete"};
     var indent = WebInspector.settings.textEditorIndent.get();
     if (indent === WebInspector.TextUtils.Indent.TabCharacter) {
         this._codeMirror.setOption("indentWithTabs", true);
         this._codeMirror.setOption("indentUnit", 4);
     } else {
         this._codeMirror.setOption("indentWithTabs", false);
         this._codeMirror.setOption("indentUnit", indent.length);
         extraKeys.Tab = function(codeMirror)
         {
             if (codeMirror.somethingSelected())
                 return CodeMirror.Pass;
             codeMirror.replaceRange(indent, codeMirror.getCursor());
         }
     }
     this._codeMirror.setOption("extraKeys", extraKeys);
 
     this._tokenHighlighter = new WebInspector.CodeMirrorTextEditor.TokenHighlighter(this._codeMirror);
     this._blockIndentController = new WebInspector.CodeMirrorTextEditor.BlockIndentController(this._codeMirror);
     this._fixWordMovement = new WebInspector.CodeMirrorTextEditor.FixWordMovement(this._codeMirror);
 
     this._codeMirror.on("change", this._change.bind(this));
+    this._codeMirror.on("beforeChange", this._beforeChange.bind(this));
     this._codeMirror.on("gutterClick", this._gutterClick.bind(this));
     this._codeMirror.on("cursorActivity", this._cursorActivity.bind(this));
     this._codeMirror.on("scroll", this._scroll.bind(this));
     this.element.addEventListener("contextmenu", this._contextMenu.bind(this));
 
     this.element.firstChild.addStyleClass("source-code");
     this.element.firstChild.addStyleClass("fill");
     this._elementToWidget = new Map();
     this._nestedUpdatesCounter = 0;
 
     this.element.addEventListener("focus", this._handleElementFocus.bind(this), false);
+    this.element.addEventListener("keydown", this._handleKeyDown.bind(this), false);
     this.element.tabIndex = 0;
     this._setupSelectionColor();
 }
 
 WebInspector.CodeMirrorTextEditor.prototype = {
 
     undo: function()
     {
         this._codeMirror.undo();
     },
@@ skipping 13 matching lines @@
         var foregroundColor = WebInspector.getSelectionForegroundColor();
         var foregroundColorRule = foregroundColor ? ".CodeMirror .CodeMirror-selectedtext { color: " + foregroundColor + "!important;}" : "";
         if (!foregroundColorRule && !backgroundColorRule)
             return;
 
         var style = document.createElement("style");
         style.textContent = backgroundColorRule + foregroundColorRule;
         document.head.appendChild(style);
     },
 
+    _autocomplete: function(codeMirror)
+    {
+        var cursor = codeMirror.getCursor();
+        var prefixRange = this._wordRangeForCursorPosition(cursor.line, cursor.ch, true);
+        if (!prefixRange)
+            return null;
+        var prefix = this.copyRange(prefixRange);
+        this._dictionary.removeWord(prefix);
+        var wordsWithPrefix = this._dictionary.wordsWithPrefix(this.copyRange(prefixRange));
+        this._dictionary.addWord(prefix);
+
+        var data = {
+            list: wordsWithPrefix,
+            from: new CodeMirror.Pos(prefixRange.startLine, prefixRange.startColumn),
+            to: new CodeMirror.Pos(prefixRange.endLine, prefixRange.endColumn)
+        };
+        CodeMirror.on(data, "close", this._handleAutocompletionClose.bind(this));
+
+        return data;
+    },
+
+    _handleKeyDown: function(e)
+    {
+        if (!!this._consumeEsc && e.keyCode === WebInspector.KeyboardShortcut.Keys.Esc.code)
+            e.consume(true);
+        delete this._consumeEsc;
+    },
+
+    _handleAutocompletionClose: function()
+    {
+        this._consumeEsc = true;
+    },
+
+    /**
+     * @param {string} text
+     */
+    _addTextToCompletionDictionary: function(text)
+    {
+        var words = WebInspector.TextUtils.textToWords(text);
+        for(var i = 0; i < words.length; ++i) {
+            this._dictionary.addWord(words[i]);
+        }
+    },
+
+    /**
+     * @param {string} text
+     */
+    _removeTextFromCompletionDictionary: function(text)
+    {
+        var words = WebInspector.TextUtils.textToWords(text);
+        for(var i = 0; i < words.length; ++i) {
+            this._dictionary.removeWord(words[i]);
+        }
+    },
+
     /**
      * @param {WebInspector.CompletionDictionary} dictionary
      */
-    setCompletionDictionary: function(dictionary) { },
+    setCompletionDictionary: function(dictionary)
+    {
+        this._dictionary = dictionary;
+        this._addTextToCompletionDictionary(this.text());
+    },
 
     /**
      * @param {number} lineNumber
      * @param {number} column
      * @return {?{x: number, y: number, height: number}}
      */
     cursorPositionToCoordinates: function(lineNumber, column)
     {
         if (lineNumber >= this._codeMirror.lineCount || column > this._codeMirror.getLine(lineNumber).length || lineNumber < 0 || column < 0)
             return null;
@@ skipping 339 matching lines @@
      */
     editRange: function(range, text)
     {
         var pos = this._toPos(range);
         this._codeMirror.replaceRange(text, pos.start, pos.end);
         var newRange = this._toRange(pos.start, this._codeMirror.posFromIndex(this._codeMirror.indexFromPos(pos.start) + text.length));
         this._delegate.onTextChanged(range, newRange);
         return newRange;
     },
 
+    /**
+     * @param {number} lineNumber
+     * @param {number} column
+     * @param {boolean=} prefixOnly
+     * @return {?WebInspector.TextRange}
+     */
+    _wordRangeForCursorPosition: function(lineNumber, column, prefixOnly)
+    {
+        var line = this.line(lineNumber);
+        if (!WebInspector.TextUtils.isWordChar(line.charAt(column - 1)))
+            return null;
+        var wordStart = column - 1;
+        while(wordStart > 0 && WebInspector.TextUtils.isWordChar(line.charAt(wordStart - 1)))
+            --wordStart;
+        if (prefixOnly)
+            return new WebInspector.TextRange(lineNumber, wordStart, lineNumber, column);
+        var wordEnd = column;
+        while(wordEnd < line.length && WebInspector.TextUtils.isWordChar(line.charAt(wordEnd)))
+            ++wordEnd;
+        return new WebInspector.TextRange(lineNumber, wordStart, lineNumber, wordEnd);
+    },
+
+    _beforeChange: function(codeMirror, changeObject)
+    {
+        if (!this._dictionary)
+            return;
+        this._updatedLines = this._updatedLines || {};
+        for(var i = changeObject.from.line; i <= changeObject.to.line; ++i)
+            this._updatedLines[i] = this.line(i);
+    },
+
     _change: function(codeMirror, changeObject)
     {
         var widgets = this._elementToWidget.values();
         for (var i = 0; i < widgets.length; ++i)
             this._codeMirror.removeLineWidget(widgets[i]);
         this._elementToWidget.clear();
 
+        if (this._updatedLines) {
+            for(var lineNumber in this._updatedLines)
+                this._removeTextFromCompletionDictionary(this._updatedLines[lineNumber]);
+            delete this._updatedLines;
+        }
+
+        var linesToUpdate = {};
         do {
             var oldRange = this._toRange(changeObject.from, changeObject.to);
             var newRange = oldRange.clone();
             var linesAdded = changeObject.text.length;
             if (linesAdded === 0) {
                 newRange.endLine = newRange.startLine;
                 newRange.endColumn = newRange.startColumn;
             } else if (linesAdded === 1) {
                 newRange.endLine = newRange.startLine;
                 newRange.endColumn = newRange.startColumn + changeObject.text[0].length;
             } else {
                 newRange.endLine = newRange.startLine + linesAdded - 1;
                 newRange.endColumn = changeObject.text[linesAdded - 1].length;
             }
 
             if (!this._muteTextChangedEvent)
                 this._delegate.onTextChanged(oldRange, newRange);
 
+            for(var i = newRange.startLine; i <= newRange.endLine; ++i) {
+                linesToUpdate[i] = true;
+            }
+            if (this._dictionary) {
+                for(var i = newRange.startLine; i <= newRange.endLine; ++i)
+                    linesToUpdate[i] = this.line(i);
+            }
         } while (changeObject = changeObject.next);
+        if (this._dictionary) {
+            for(var lineNumber in linesToUpdate)
+                this._addTextToCompletionDictionary(linesToUpdate[lineNumber]);
+        }
     },
 
     _cursorActivity: function()
     {
         var start = this._codeMirror.getCursor("anchor");
         var end = this._codeMirror.getCursor("head");
         this._delegate.selectionChanged(this._toRange(start, end));
     },
 
     _coordsCharLocal: function(coords)
@@ skipping 341 matching lines @@
     var modifierKey = WebInspector.isMac() ? "Alt" : "Ctrl";
     var leftKey = modifierKey + "-Left";
     var rightKey = modifierKey + "-Right";
     var keyMap = {};
     keyMap[leftKey] = moveLeft.bind(this, false);
     keyMap[rightKey] = moveRight.bind(this, false);
     keyMap["Shift-" + leftKey] = moveLeft.bind(this, true);
     keyMap["Shift-" + rightKey] = moveRight.bind(this, true);
     codeMirror.addKeyMap(keyMap);
 }