Use ShadowRoot to hide non-user content (for example, diagnostics).

dart/site/try/src/interaction_manager.dart

 // Copyright (c) 2014, 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.interaction_manager;
 
 import 'dart:html';
 
 import 'dart:convert' show
     JSON;
@@ skipping 46 matching lines @@
 import 'selection.dart' show
     TrySelection,
     isCollapsed;
 
 import 'editor.dart' as editor;
 
 import 'mock.dart' as mock;
 
 import 'settings.dart' as settings;
 
+import 'shadow_root.dart' show
+    getShadowRoot,
+    removeShadowRootPolyfill,
+    setShadowRoot;
+
 const String TRY_DART_NEW_DEFECT =
     'https://code.google.com/p/dart/issues/entry'
     '?template=Try+Dart+Internal+Error';
 
 /**
  * UI interaction manager for the entire application.
  */
 abstract class InteractionManager {
   // Design note: All UI interactions go through one instance of this
   // class. This is by design.
@@ skipping 173 matching lines @@
           } else {
             window.console
                 ..error('Unexpected node')
                 ..dir(node);
           }
         }
         break;
       }
     }
 
-    // editor.scheduleRemoveCodeCompletion();
-
     // This is a hack to get Safari (iOS) to send mutation events on
     // contenteditable.
     // TODO(ahe): Move to onInput?
     var newDiv = new DivElement();
     hackDiv.replaceWith(newDiv);
     hackDiv = newDiv;
   }
 
   void onMutation(List<MutationRecord> mutations, MutationObserver observer) {
     print('onMutation');
 
-    List<Node> highlighting = mainEditorPane.querySelectorAll(
-        'a.diagnostic>span, .dart-code-completion, .hazed-suggestion');
-    for (Element element in highlighting) {
-      element.remove();
-    }
+    removeCodeCompletion();
 
     Selection selection = window.getSelection();
     TrySelection trySelection = new TrySelection(mainEditorPane, selection);
 
     Set<Node> normalizedNodes = new Set<Node>();
     for (MutationRecord record in mutations) {
       normalizeMutationRecord(record, trySelection, normalizedNodes);
     }
 
     if (normalizedNodes.length == 1) {
       Node node = normalizedNodes.single;
       if (node is Element && node.classes.contains('lineNumber')) {
         print('Single line change: ${node.outerHtml}');
 
+        removeShadowRootPolyfill(node);
+
         String currentText = node.text;
 
         trySelection = new TrySelection(node, selection);
         trySelection.updateText(currentText);
 
         editor.isMalformedInput = false;
         int offset = 0;
         List<Node> nodes = <Node>[];
 
         String state = '';
@@ skipping 12 matching lines @@
         node.parent.insertAllBefore(nodes, node);
         node.remove();
         trySelection.adjust(selection);
 
         // Discard highlighting mutations.
         observer.takeRecords();
         return;
       }
     }
 
+    removeShadowRootPolyfill(mainEditorPane);
+
     String currentText = mainEditorPane.text;
     trySelection.updateText(currentText);
 
     context.currentCompilationUnit.content = currentText;
 
     editor.seenIdentifiers = new Set<String>.from(mock.identifiers);
 
     editor.isMalformedInput = false;
     int offset = 0;
     List<Node> nodes = <Node>[];
@@ skipping 194 matching lines @@
     event.preventDefault();
     move(1);
   }
 
   void moveUp(Event event) {
     event.preventDefault();
     move(-1);
   }
 
   void move(int direction) {
-    Element element = editor.moveActive(direction);
+    Element element = editor.moveActive(direction, ui);
     if (element == null) return;
     var text = activeCompletion.firstChild;
     String prefix = "";
     if (text is Text) prefix = text.data.trim();
     updateInlineSuggestion(prefix, element.text);
   }
 
   void endCompletion({bool acceptSuggestion: false}) {
     if (acceptSuggestion) {
       suggestionAccepted();
@@ skipping 45 matching lines @@
 
     int anchorOffset = selection.anchorOffset;
 
     String prefix = text.data.substring(0, anchorOffset).trim();
     if (prefix.isEmpty) {
       return endCompletion();
     }
 
     num height = activeCompletion.getBoundingClientRect().height;
     activeCompletion.classes.add('active');
-    ui.nodes.clear();
+    Node root = getShadowRoot(ui);
 
     inline = new SpanElement()
         ..classes.add('hazed-suggestion');
     Text rest = text.splitText(anchorOffset);
     text.parentNode.insertBefore(inline, text.nextNode);
     activeCompletion.parentNode.insertBefore(
         rest, activeCompletion.nextNode);
 
     staticResults = new DivElement()
         ..classes.addAll(['dart-static', 'dart-limited-height']);
     serverResults = new DivElement()
         ..style.display = 'none'
         ..classes.add('dart-server');
-    ui.nodes.addAll([staticResults, serverResults]);
+    root.nodes.addAll([staticResults, serverResults]);
     ui.style.top = '${height}px';
 
     staticResults.nodes.add(buildCompletionEntry(prefix));
 
     updateSuggestions(prefix);
   }
 
   void updateInlineSuggestion(String prefix, String suggestion) {
     inlineSuggestion = suggestion;
 
     minWidth = max(minWidth, activeCompletion.getBoundingClientRect().width);
 
     activeCompletion.style
         ..display = 'inline-block'
         ..minWidth = '${minWidth}px';
 
-    inline
-        ..nodes.clear()
-        ..appendText(suggestion.substring(prefix.length))
-        ..style.display = '';
+    setShadowRoot(inline, suggestion.substring(prefix.length));
+    inline.style.display = '';
 
     observer.takeRecords(); // Discard mutations.
   }
 
   void updateSuggestions(String prefix) {
     if (prefix.isEmpty) {
       return endCompletion();
     }
 
     Token first = tokenize(prefix);
@@ skipping 10 matching lines @@
     num height = ui.getBoundingClientRect().height - borderHeight;
     ui.style.minHeight = '${height}px';
 
     minWidth =
         max(minWidth, activeCompletion.getBoundingClientRect().width);
 
     staticResults.nodes.clear();
     serverResults.nodes.clear();
 
     if (inlineSuggestion != null && inlineSuggestion.startsWith(prefix)) {
-      inline
-          ..nodes.clear()
-          ..appendText(inlineSuggestion.substring(prefix.length));
+      setShadowRoot(inline, inlineSuggestion.substring(prefix.length));
     }
 
     List<String> results = editor.seenIdentifiers.where(
         (String identifier) {
           return identifier != prefix && identifier.startsWith(prefix);
         }).toList(growable: false);
     results.sort();
     if (results.isEmpty) results = <String>[prefix];
 
     results.forEach((String completion) {
@@ skipping 14 matching lines @@
           List<String> serverSuggestions = JSON.decode(responseText);
           if (!serverSuggestions.isEmpty) {
             updateInlineSuggestion(prefix, serverSuggestions.first);
           }
           for (int i = 1; i < serverSuggestions.length; i++) {
             String completion = serverSuggestions[i];
             DivElement where = staticResults;
             int index = results.indexOf(completion);
             if (index != -1) {
               List<Element> entries =
-                  document.querySelectorAll('.dart-static>.dart-entry');
+                  getShadowRoot(ui).querySelectorAll(

[kasperl, 2014/05/06 16:58:30]

Cache the shadowRoot in a local outside the loop?

[ahe, 2014/05/08 07:37:23]

Done.

+                      '.dart-static>.dart-entry');
               entries[index].classes.add('doubleplusgood');
             } else {
               if (results.length > 3) {
                 serverResults.style.display = 'block';
                 where = serverResults;
               }
               Element entry = buildCompletionEntry(completion);
               entry.classes.add('doubleplusgood');
               where.nodes.add(entry);
             }
@@ skipping 166 matching lines @@
   Node line = findLine(text);
   return
       line.nextNode == null &&
       text.parent.nextNode == null &&
       offset == text.length;
 }
 
 List<String> splitLines(String text) {
   return text.split(new RegExp('^', multiLine: true));
 }
+
+void removeCodeCompletion() {
+  List<Node> highlighting =
+      mainEditorPane.querySelectorAll('.dart-code-completion');
+  for (Element element in highlighting) {
+    element.remove();
+  }
+}