13 files changed, 701 insertions, 123 deletions

diff --git a/js/code-editor/codemirror-ninja-lib/ninja-simple-hint.js b/js/code-editor/codemirror-ninja-lib/ninja-simple-hint.js
new file mode 100644
index 00000000..e2334a45
--- /dev/null
+++ b/js/code-editor/codemirror-ninja-lib/ninja-simple-hint.js
@@ -0,0 +1,72 @@
+(function() {
+  CodeMirror.simpleHint = function(editor, getHints) {
+    // We want a single cursor position.
+    if (editor.somethingSelected()) return;
+    var result = getHints(editor);
+    if (!result || !result.list.length) return;
+    var completions = result.list;
+    function insert(str) {
+      editor.replaceRange(str, result.from, result.to);
+    }
+    // Ninja override: don't autocomplete to reduce user's typing errors
+//    if (completions.length == 1) {insert(completions[0]); return true;}
+
+    // Build the select widget
+    var complete = document.createElement("div");
+    complete.className = "CodeMirror-completions";
+    var sel = complete.appendChild(document.createElement("select"));
+    // Opera doesn't move the selection when pressing up/down in a
+    // multi-select, but it does properly support the size property on
+    // single-selects, so no multi-select is necessary.
+    if (!window.opera) sel.multiple = true;
+    for (var i = 0; i < completions.length; ++i) {
+      var opt = sel.appendChild(document.createElement("option"));
+      opt.appendChild(document.createTextNode(completions[i]));
+    }
+    sel.firstChild.selected = true;
+    sel.size = Math.min(10, completions.length);
+    var pos = editor.cursorCoords();
+    complete.style.left = pos.x + "px";
+    complete.style.top = pos.yBot + "px";
+    document.body.appendChild(complete);
+    // If we're at the edge of the screen, then we want the menu to appear on the left of the cursor.
+    var winW = window.innerWidth || Math.max(document.body.offsetWidth, document.documentElement.offsetWidth);
+    if(winW - pos.x < sel.clientWidth)
+      complete.style.left = (pos.x - sel.clientWidth) + "px";
+    // Hack to hide the scrollbar.
+    if (completions.length <= 10)
+      complete.style.width = (sel.clientWidth - 1) + "px";
+
+    var done = false;
+    function close() {
+      if (done) return;
+      done = true;
+      complete.parentNode.removeChild(complete);
+    }
+    function pick() {
+      insert(completions[sel.selectedIndex]);
+      close();
+      setTimeout(function(){editor.focus();}, 50);
+    }
+    CodeMirror.connect(sel, "blur", close);
+    CodeMirror.connect(sel, "keydown", function(event) {
+      var code = event.keyCode;
+      // Enter
+      if (code == 13) {CodeMirror.e_stop(event); pick();}
+      // Escape
+      else if (code == 27) {CodeMirror.e_stop(event); close(); editor.focus();}
+      else if (code != 38 && code != 40) {
+        close(); editor.focus();
+        // Pass the event to the CodeMirror instance so that it can handle things like backspace properly.
+        editor.triggerOnKeyDown(event);
+        setTimeout(function(){CodeMirror.simpleHint(editor, getHints);}, 50);
+      }
+    });
+    CodeMirror.connect(sel, "dblclick", pick);
+
+    sel.focus();
+    // Opera sometimes ignores focusing a freshly created node
+    if (window.opera) setTimeout(function(){if (!done) sel.focus();}, 100);
+    return true;
+  };
+})();
diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css
new file mode 100644
index 00000000..442a5183
--- /dev/null
+++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css
@@ -0,0 +1,53 @@
+.viewOptions{
+    color:#F7F7F7;
+    font-size:12px;
+}
+
+.viewOptions div{
+    display:inline;
+}
+
+.viewOptions .autoCodeComplete{
+    float:left;
+    height: 20px;
+}
+
+.viewOptions .autoCodeComplete span{
+    vertical-align: middle;
+}
+
+.viewOptions .autoCodeComplete .disabled{
+    color:#515151;
+}
+
+.viewOptions .floatButtons{
+    float:left;
+    font-size:9px;
+    padding-left: 20px;
+}
+
+.viewOptions .format{
+    float:left;
+    margin-left:5px;
+    height: 20px;
+}
+
+.viewOptions .themeOptions{
+    float: right;
+    margin-right:5px;
+}
+
+.viewOptions .themeOptions select{
+    background-color: #616161;
+    color: white;
+    font-size:9px;
+    margin-top:2px;
+    border-color: #616161;
+}
+
+.viewOptions .themeOptions select option{
+    background-color: #616161;
+    color: white;
+    border-color: #616161;
+}
+
diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html
new file mode 100644
index 00000000..fadc4683
--- /dev/null
+++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html
@@ -0,0 +1,78 @@
+<!DOCTYPE HTML>
+<!-- <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> -->
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <link rel="stylesheet" type="text/css" href="code-editor-view-options.css">
+    <script type="text/montage-serialization">
+    {
+        "codeCompleteCheck":{
+            "prototype": "montage/ui/checkbox.reel",
+            "properties": {
+                "element": {"#": "codeComplete"}
+            }
+        },
+
+        "zoomHottext": {
+            "prototype": "js/components/hottextunit.reel[HotTextUnit]",
+            "properties": {
+                "element": {"#": "zoomFont"},
+                "minValue":100,
+                "maxValue" :200,
+                "stepSize" :10,
+                "acceptableUnits" : ["%"],
+                "units" : "%"
+            }
+        },
+
+        "owner":{
+            "prototype": "js/code-editor/ui/code-editor-view-options.reel[CodeEditorViewOptions]",
+            "properties": {
+                "element": {"#": "viewOptions"},
+                "codeCompleteCheck":{"@": "codeCompleteCheck"},
+                "zoomHottext":{"@":"zoomHottext"},
+                "format":{"#": "format"},
+                "comment":{"#":"comment"},
+                "uncomment":{"#":"uncomment"},
+                "themeSelect":{"#":"themeSelect"}
+            }
+        }
+    }
+    </script>
+</head>
+<body>
+<div id="viewOptions" class="viewOptions">
+    <div>
+        <input class="zoomFont" id="zoomFont"/>
+        <div class="autoCodeComplete" >
+            <input type="checkbox" id="codeComplete" />
+            <span>Automatic Completion</span>
+        </div>
+        <div class="floatButtons">
+            <button id="format" value="format" class="nj-skinned format">Format</button>
+            <button id="comment" value="comment" class="nj-skinned format">comment</button>
+            <button id="uncomment" value="uncomment" class="nj-skinned format">uncomment</button>
+        </div>