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 '../../../sdk/lib/_internal/compiler/implementation/scanner/scannerlib.dart'
+import 'package: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
     currentTheme,
     hackDiv,
     inputPre,
     observer,
     outputDiv;
 
 import 'decoration.dart' show
+    CodeCompletionDecoration,
     Decoration,
     DiagnosticDecoration,
     error,
     info,
     warning;
 
 const String INDENT = '\u{a0}\u{a0}';
 
-onKeyUp(KeyboardEvent e) {
-  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);
+Set<String> seenIdentifiers;
+
+Element moveActive(int distance) {
+  List<Element> entries = document.querySelectorAll('.dart-static>.dart-entry');
+  int activeIndex = -1;
+  for (var i = 0; i < entries.length; i++) {
+    if (entries[i].classes.contains('activeEntry')) {
+      activeIndex = i;
+      break;
     }
   }
-  // This is a hack to get Safari to send mutation events on contenteditable.
-  var newDiv = new DivElement();
-  hackDiv.replaceWith(newDiv);
-  hackDiv = newDiv;
+  int newIndex = activeIndex + distance;
+  Element currentEntry;
+  if (0 <= newIndex && newIndex < entries.length) {
+    currentEntry = entries[newIndex];
+  }
+  if (currentEntry == null) return null;
+  if (0 <= newIndex && activeIndex != -1) {
+    entries[activeIndex].classes.remove('activeEntry');
+  }
+  Element staticNode = document.querySelector('.dart-static');
+  String visibility = computeVisibility(currentEntry, staticNode);
+  print(visibility);
+  var serverResults = document.querySelectorAll('.dart-server>.dart-entry');
+  var serverResultCount = serverResults.length;
+  if (serverResultCount > 0) {
+    switch (visibility) {
+      case obscured:
+      case hidden: {

[kasperl, 2014/03/24 10:32:51]

No need for { } in a case.

[ahe, 2014/03/24 15:20:23]

I like {} in this case.

+        Rectangle cr = currentEntry.getBoundingClientRect();
+        Rectangle sr = staticNode.getBoundingClientRect();
+        Element entry = serverResults[0];
+        entry.remove();
+        currentEntry.parentNode.insertBefore(entry, currentEntry);
+        currentEntry = entry;
+        serverResultCount--;
+
+        staticNode.style.maxHeight = '${sr.boundingBox(cr).height}px';
+      }
+    }
+  } else {
+    currentEntry.scrollIntoView(ScrollAlignment.BOTTOM);
+  }
+  if (serverResultCount == 0) {
+    document.querySelector('.dart-server').style.display = 'none';
+  }
+  if (currentEntry != null) {
+    currentEntry.classes.add('activeEntry');
+  }
+  // Discard mutations.
+  observer.takeRecords();
+  return currentEntry;
+}
+
+const visible = 'visible';
+const obscured = 'obscured';
+const hidden = 'hidden';
+
+String computeVisibility(Element node, [Element parent]) {
+  Rectangle nr = node.getBoundingClientRect();
+  if (parent == null) parent = node.parentNode;
+  Rectangle pr = parent.getBoundingClientRect();
+
+  if (pr.containsRectangle(nr)) return visible;
+
+  if (pr.intersects(nr)) return obscured;
+
+  return hidden;
+}
+
+var activeCompletion;
+num minSuggestionWidth = 0;
+
+/// Returns the [Element] which encloses the current collapsed selection, if it
+/// exists.
+Element getElementAtSelection() {
+  Selection selection = window.getSelection();
+  if (!selection.isCollapsed) return null;
+  var anchorNode = selection.anchorNode;
+  if (!inputPre.contains(anchorNode)) return null;
+  if (inputPre == anchorNode) return null;
+  int type = anchorNode.nodeType;
+  if (type != Node.TEXT_NODE) return null;
+  Text text = anchorNode;
+  var parent = text.parent;
+  if (parent is! Element) return null;
+  if (inputPre == parent) return null;
+  return parent;
 }
 
 bool isMalformedInput = false;
 String currentSource = "";
 
-// TODO(ahe): This method should be cleaned up. It is too large.
-onMutation(List<MutationRecord> mutations, MutationObserver observer) {
-  scheduleCompilation();
-
-  for (Element element in inputPre.queryAll('a[class="diagnostic"]>span')) {
-    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) {
-
-        case 'characterData':
-
-          bool hasSelection = false;
-          int offset = selection.anchorOffset;
-          if (selection.isCollapsed && selection.anchorNode == record.target) {
-            hasSelection = true;
-          }
-          var parent = record.target.parentNode;
-          if (parent != inputPre) {
-            inlineChildren(parent);
-          }
-          if (hasSelection) {
-            selection.collapse(record.target, offset);
-          }
-          break;
-
-        default:
-          if (!record.addedNodes.isEmpty) {
-            for (var node in record.addedNodes) {
-
-              if (node.nodeType != Node.ELEMENT_NODE) continue;
-
-              if (node is BRElement) {
-                if (selection.anchorNode != node) {
-                  node.replaceWith(new Text('\n'));
-                }
-              } else {
-                var parent = node.parentNode;
-                if (parent == null) continue;
-                var nodes = new List.from(node.nodes);
-                var style = node.getComputedStyle();
-                if (style.display != 'inline') {
-                  var previous = node.previousNode;
-                  if (previous is Text) {
-                    previous.appendData('\n');
-                  } else {
-                    parent.insertBefore(new Text('\n'), node);
-                  }
-                }
-                for (Node child in nodes) {
-                  child.remove();
-                  parent.insertBefore(child, node);
-                }
-                node.remove();
-              }
-            }
-          }
-      }
-    }
-    mutations = observer.takeRecords();
-  }
-
-  if (!inputPre.nodes.isEmpty && inputPre.nodes.last is Text) {
-    Text text = inputPre.nodes.last;
-    if (!text.text.endsWith('\n')) {
-      text.appendData('\n');
-    }
-  }
-
-  int offset = 0;
-  int anchorOffset = 0;
-  bool hasSelection = false;
-  Node anchorNode = selection.anchorNode;
-  // TODO(ahe): Try to share walk4 methods.
-  void walk4(Node node) {
-    // TODO(ahe): Use TreeWalker when that is exposed.
-    // function textNodesUnder(root){
-    //   var n, a=[], walk=document.createTreeWalker(
-    //       root,NodeFilter.SHOW_TEXT,null,false);
-    //   while(n=walk.nextNode()) a.push(n);
-    //   return a;
-    // }
-    int type = node.nodeType;
-    if (type == Node.TEXT_NODE || type == Node.CDATA_SECTION_NODE) {
-      CharacterData text = node;
-      if (anchorNode == node) {
-        hasSelection = true;
-        anchorOffset = selection.anchorOffset + offset;
-        return;
-      }
-      offset += text.length;
-    }
-
-    var child = node.firstChild;
-    while (child != null) {
-      walk4(child);
-      if (hasSelection) return;
-      child = child.nextNode;
-    }
-  }
-  if (selection.isCollapsed) {
-    walk4(inputPre);
-  }
-
-  currentSource = inputPre.text;
-  inputPre.nodes.clear();
-  inputPre.appendText(currentSource);
-  if (hasSelection) {
-    selection.collapse(inputPre.firstChild, anchorOffset);
-  }
-
-  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;
-    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;
-      }
-      int splitPoint = token.charOffset - offset;
-      Text str = node.splitText(splitPoint);
-      Text after = str.splitText(token.charCount);
-      offset += splitPoint + token.charCount;
-      inputPre.insertBefore(after, node.nextNode);
-      inputPre.insertBefore(decoration.applyTo(str), after);
-
-      if (hasSelection && selectionOffset > node.length) {
-        selectionOffset -= node.length;
-        if (selectionOffset > str.length) {
-          selectionOffset -= str.length;
-          selection.collapse(after, selectionOffset);
-        } else {
-          selection.collapse(str, selectionOffset);
-        }
-      }
-      node = after;
-    }
-  }
-
-  window.localStorage['currentSource'] = currentSource;
-
-  // 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;
   Node anchorNode = selection.anchorNode;
   bool foundNode = false;
   void walk4(Node node) {
     // TODO(ahe): Use TreeWalker when that is exposed.
@@ skipping 23 matching lines @@
         }
         if (hasSelection) {
           selection.collapse(node, anchorOffset);
         }
         foundNode = true;
         return;
       }
       offset = newOffset;
     } else if (type == Node.ELEMENT_NODE) {
       Element element = node;
-      if (element.classes.contains('alert')) return;
+      CssClassSet classes = element.classes;
+      if (classes.contains('alert') ||
+          classes.contains('dart-code-completion')) {
+        return;
+      }
     }
 
     var child = node.firstChild;
     while(child != null && !foundNode) {
       walk4(child);
       child = child.nextNode;
     }
   }
   walk4(inputPre);
 
@@ skipping 14 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);
+    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);
 }