Merge pull request code-dot-org#865 from code-dot-org/webapp_changes

Webapp changes

Author: cpirich

blockly/i18n/common/en_us.json

@@ -76,8 +76,6 @@
   "saveToGallery": "Save to gallery",
   "savedToGallery": "Saved in gallery!",
   "shareFailure": "Sorry, we can't share this program.",
-  "typeFuncs": "Available functions:%1",
-  "typeHint": "Note that the parentheses and semicolons are required.",
   "workspaceHeader": "Assemble your blocks here: ",
   "workspaceHeaderJavaScript": "Type your JavaScript code here",
   "infinity": "Infinity",

blockly/lib/droplet/droplet-full.js

@@ -9957,10 +9957,10 @@ if(i=this.variable instanceof Z){if(this.variable.isArray()||this.variable.isObj
 
       Editor.prototype.resizeBlockMode = function() {
         this.resizeTextMode();
-        this.resizeGutter();
         this.dropletElement.style.left = "" + this.paletteElement.offsetWidth + "px";
         this.dropletElement.style.height = "" + this.wrapperElement.offsetHeight + "px";
         this.dropletElement.style.width = "" + (this.wrapperElement.offsetWidth - this.paletteWrapper.offsetWidth) + "px";
+        this.resizeGutter();
         this.mainCanvas.height = this.dropletElement.offsetHeight;
         this.mainCanvas.width = this.dropletElement.offsetWidth - this.gutter.offsetWidth;
         this.mainCanvas.style.height = "" + this.mainCanvas.height + "px";

blockly/lib/droplet/droplet-full.min.js

@@ -8294,10 +8294,10 @@ if(i=this.variable instanceof Z){if(this.variable.isArray()||this.variable.isObj
 
       Editor.prototype.resizeBlockMode = function() {
         this.resizeTextMode();
-        this.resizeGutter();
         this.dropletElement.style.left = "" + this.paletteElement.offsetWidth + "px";
         this.dropletElement.style.height = "" + this.wrapperElement.offsetHeight + "px";
         this.dropletElement.style.width = "" + (this.wrapperElement.offsetWidth - this.paletteWrapper.offsetWidth) + "px";
+        this.resizeGutter();
         this.mainCanvas.height = this.dropletElement.offsetHeight;
         this.mainCanvas.width = this.dropletElement.offsetWidth - this.gutter.offsetWidth;
         this.mainCanvas.style.height = "" + this.mainCanvas.height + "px";

blockly/lib/droplet/droplet-full.min.js.map

@@ -453,18 +453,6 @@ BlocklyApps.init = function(config) {
 
       if (config.level.startBlocks) {
         BlocklyApps.editor.setValue(config.level.startBlocks);
-      } else {
-        var startText = '// ' + msg.typeHint() + '\n';
-        var codeFunctions = config.level.codeFunctions;
-        // Insert hint text from level codeFunctions into editCode area
-        if (codeFunctions) {
-          var hintText = '';
-          for (var i = 0; i < codeFunctions.length; i++) {
-            hintText += " " + codeFunctions[i].func + "();";
-          }
-          startText += '// ' + msg.typeFuncs().replace('%1', hintText) + '\n';
-        }
-        BlocklyApps.editor.setValue(startText);
       }
     });
   }

blockly/lib/droplet/droplet.js

@@ -54,7 +54,7 @@ exports.workspaceCode = function(blockly) {
 exports.marshalNativeToInterpreter = function (interpreter, nativeVar, nativeParentObj, maxDepth) {
   var retVal;
   if (typeof maxDepth === "undefined") {
-    maxDepth = 4; // default to 4 levels of depth
+    maxDepth = Infinity; // default to inifinite levels of depth
   }
   if (maxDepth === 0) {
     return interpreter.createPrimitive(undefined);
@@ -102,11 +102,11 @@ exports.marshalNativeToInterpreter = function (interpreter, nativeVar, nativePar
 /**
  * Generate a native function wrapper for use with the JS interpreter.
  */
-exports.makeNativeMemberFunction = function (interpreter, nativeFunc, nativeParentObj) {
+exports.makeNativeMemberFunction = function (interpreter, nativeFunc, nativeParentObj, maxDepth) {
   return function() {
     // Call the native function:
     var nativeRetVal = nativeFunc.apply(nativeParentObj, arguments);
-    return exports.marshalNativeToInterpreter(interpreter, nativeRetVal, null);
+    return exports.marshalNativeToInterpreter(interpreter, nativeRetVal, null, maxDepth);
   };
 };
 

blockly/src/base.js

@@ -89,7 +89,7 @@ var helpArea = function(html) { -%>
     <div id="show-code-header" class="blockly-header"><span><%= msg.showCodeHeader() %></span></div>
   </div>
   <% if (data.editCode) { %>
-    <div id="codeTextbox" contenteditable spellcheck=false></div>
+    <div id="codeTextbox"></div>
   <% } %>
 </div>
 

blockly/src/codegen.js

@@ -819,13 +819,16 @@ Webapp.execute = function() {
                                           Webapp: api,
                                           console: consoleApi,
                                           JSON: JSONApi,
-                                          Globals: Webapp.Globals } );
-
+                                          Globals: Webapp.Globals });
 
         var getCallbackObj = interpreter.createObject(interpreter.FUNCTION);
+        // Only allow four levels of depth when marshalling the return value
+        // since we will occasionally return DOM Event objects which contain
+        // properties that recurse over and over...
         var wrapper = codegen.makeNativeMemberFunction(interpreter,
                                                        nativeGetCallback,
-                                                       null);
+                                                       null,
+                                                       4);
         interpreter.setProperty(scope,
                                 'getCallback',
                                 interpreter.createNativeFunction(wrapper));

blockly/src/templates/page.html.ejs

@@ -66,6 +66,31 @@ html[dir="RTL"] .farSide {
   margin-left: 415px;
 }
 
+div.droplet-palette-group-header {
+  @include font;
+}
+
+div.droplet-palette-group-header:active {
+  color: #000;
+}
+
+div.droplet-palette-group-header-selected {
+  font-weight: 400;
+  color: #000;
+}
+
+.droplet-palette-group-header.yellow {
+  border-left:10px solid #e0e053;
+}
+
+.droplet-palette-group-header-selected.yellow {
+  background-color: #e0e053;
+}
+
+.droplet-wrapper-div {
+  outline-style: none;
+}
+
 #show-code-button {
   @media screen and (max-device-width: 540px) {
     display: none;

blockly/src/webapp/webapp.js

@@ -1,12 +1,5 @@
 $root: '/blockly/media/webapp/'; //TODO: Parameterize for asset pipeline
 
-.droplet-palette-group-header.yellow {
-  border-left:10px solid #e0e053;
-}
-.droplet-palette-group-header-selected.yellow {
-  background-color: #e0e053;
-}
-
 #divWebapp {
   overflow: hidden;
   position: relative;