Mock up code completion.

dart/site/try/src/editor.dart

 // Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
 library trydart.editor;
 
 import 'dart:html';
 
+import 'dart:async' show
+    Timer;
+
+import 'dart:convert' show
+    JSON;
+
 import '../../../sdk/lib/_internal/compiler/implementation/scanner/scannerlib.dart'
   show
     EOF_TOKEN,
     StringScanner,
     Token;
 
 import '../../../sdk/lib/_internal/compiler/implementation/source_file.dart' show
     StringSourceFile;
 
 import 'compilation.dart' show
     scheduleCompilation;
 
 import 'ui.dart' show
+    applyingSettings,
     currentTheme,
     hackDiv,
     inputPre,
     observer,
     outputDiv;
 
 import 'decoration.dart' show
+    CodeCompletionDecoration,
     Decoration,
     DiagnosticDecoration,
     error,
     info,
     warning;
 
 const String INDENT = '\u{a0}\u{a0}';
 
+Set<String> seenIdentifiers;
+
 onKeyUp(KeyboardEvent e) {
+  scheduleCodeCompletion();
+
+  if (e.keyCode == 40 && activeCompletion != null) {
+    e.preventDefault();
+    print('${e.keyCode}: ${e}');
+    return;
+  }
+
   if (e.keyCode == 13) {
     e.preventDefault();
     Selection selection = window.getSelection();
     if (selection.isCollapsed && selection.anchorNode is Text) {
       Text text = selection.anchorNode;
       int offset = selection.anchorOffset;
       text.insertData(offset, '\n');
       selection.collapse(text, offset + 1);
     }
   }
   // This is a hack to get Safari to send mutation events on contenteditable.
   var newDiv = new DivElement();
   hackDiv.replaceWith(newDiv);
   hackDiv = newDiv;
 }
 
+Timer codeCompletionTimer;
+
+void scheduleCodeCompletion() {
+  if (applyingSettings) return;
+  if (codeCompletionTimer != null) {
+    codeCompletionTimer.cancel();
+    codeCompletionTimer = null;
+  }
+  codeCompletionTimer =
+      new Timer(const Duration(milliseconds: 1), displayCodeCompletion);
+}
+
+var activeCompletion;
+
+void displayCodeCompletion() {
+  if (activeCompletion != null) {
+    activeCompletion.classes.remove('active');
+    activeCompletion = null;
+  }
+  Selection selection = window.getSelection();
+  if (!selection.isCollapsed) return;
+  var anchorNode = selection.anchorNode;
+  if (!inputPre.contains(anchorNode)) return;
+  int anchorOffset = selection.anchorOffset;
+  int type = anchorNode.nodeType;
+  if (type != Node.TEXT_NODE) return;
+  Text text = anchorNode;
+  var parent = text.parent;
+  if (parent is! Element) return;
+  parent.classes.add('active');
+  var ui = parent.query('.dart-code-completion');
+  if (ui == null) return;
+  activeCompletion = parent;
+  observer.disconnect();
+  ui.nodes.clear();
+  String prefix = text.data.substring(0, anchorOffset).trim();
+  if (!prefix.isEmpty) {
+    String encodedArg0 = Uri.encodeComponent('"$prefix"');
+    String mindQuery =
+        'http://dart-mind.appspot.com/rpc'
+        '?action=GetExportingPubCompletions'
+        '&arg0=$encodedArg0';
+    HttpRequest request = new HttpRequest();
+    request.open('GET', mindQuery, async: false);
+    try {
+      List<String> response = <String>[];
+      var sw = new Stopwatch();
+      if (false) {
+        sw.start();
+        request.send();
+        sw.stop();
+        if (request.status == 200) {
+          response = JSON.decode(request.responseText);
+        }
+      } else {
+        sw.start();
+        response =
+            seenIdentifiers.where(
+                (String identifier) => identifier != prefix && identifier.startsWith(prefix))

[kasperl, 2014/03/13 07:39:58]

Long line.

+            .toList(growable: false)
+            ..sort();

[kasperl, 2014/03/13 07:39:58]

I think I'd prefer to not use .. for this. It's a lot harder to understand than
a separate line with response.sort().

+        sw.stop();
+      }
+      response.forEach((String completion) {
+        ui.appendHtml('$completion<br>');
+      });
+      ui.appendHtml('${sw.elapsedMilliseconds}ms<br>');
+    } catch (e) {
+      window.console.dir(e);
+    }
+  }
+  observer.observe(inputPre, childList: true, characterData: true, subtree: true);

[kasperl, 2014/03/13 07:39:58]

Long line.

+}
+
 bool isMalformedInput = false;
 String currentSource = "";
 
 // TODO(ahe): This method should be cleaned up. It is too large.
 onMutation(List<MutationRecord> mutations, MutationObserver observer) {
-  scheduleCompilation();
+  // scheduleCompilation();
 
-  for (Element element in inputPre.queryAll('a[class="diagnostic"]>span')) {
+  for (Element element in inputPre.queryAll('a.diagnostic>span')) {
     element.remove();
   }
+  for (Element element in inputPre.queryAll('.dart-code-completion')) {
+    element.remove();
+  }
+
   // Discard clean-up mutations.
   observer.takeRecords();
 
   Selection selection = window.getSelection();
 
   while (!mutations.isEmpty) {
     for (MutationRecord record in mutations) {
       String type = record.type;
       switch (type) {
 
@@ skipping 100 matching lines @@
 
   isMalformedInput = false;
   for (var n in new List.from(inputPre.nodes)) {
     if (n is! Text) continue;
     Text node = n;
     String text = node.text;
 
     Token token = new StringScanner(
         new StringSourceFile('', text), includeComments: true).tokenize();
     int offset = 0;
+    seenIdentifiers = new Set<String>();
     for (;token.kind != EOF_TOKEN; token = token.next) {
       Decoration decoration = getDecoration(token);
       if (decoration == null) continue;
       bool hasSelection = false;
       int selectionOffset = selection.anchorOffset;
 
       if (selection.isCollapsed && selection.anchorNode == node) {
         hasSelection = true;
         selectionOffset = selection.anchorOffset;
       }
@@ skipping 12 matching lines @@
         } else {
           selection.collapse(str, selectionOffset);
         }
       }
       node = after;
     }
   }
 
   window.localStorage['currentSource'] = currentSource;
 
+  if (activeCompletion != null) {
+    if (codeCompletionTimer != null) {
+      codeCompletionTimer.cancel();
+      codeCompletionTimer = null;
+    }
+    displayCodeCompletion();
+  }
+
   // Discard highlighting mutations.
   observer.takeRecords();
 }
 
 addDiagnostic(String kind, String message, int begin, int end) {
   observer.disconnect();
   Selection selection = window.getSelection();
   int offset = 0;
   int anchorOffset = 0;
   bool hasSelection = false;
@@ skipping 62 matching lines @@
     child.remove();
     parent.insertBefore(child, element);
   }
   element.remove();
 }
 
 Decoration getDecoration(Token token) {
   String tokenValue = token.value;
   String tokenInfo = token.info.value;
   if (tokenInfo == 'string') return currentTheme.string;
-  // if (tokenInfo == 'identifier') return identifier;
+  if (tokenInfo == 'identifier') {
+    seenIdentifiers.add(tokenValue);
+
+    print(seenIdentifiers);
+    return CodeCompletionDecoration.from(currentTheme.foreground);
+  }
   if (tokenInfo == 'keyword') return currentTheme.keyword;
   if (tokenInfo == 'comment') return currentTheme.singleLineComment;
   if (tokenInfo == 'malformed input') {
     isMalformedInput = true;
     return new DiagnosticDecoration('error', tokenValue);
   }
   return currentTheme.foreground;
 }
 
 diagnostic(text, tip) {
   if (text is String) {
     text = new Text(text);
   }
   return new AnchorElement()
       ..classes.add('diagnostic')
       ..append(text)
       ..append(tip);
 }