Add basic value reporting that uses drop-down (#492)

* Add basic value reporting that uses drop-down

* Encode HTML entities for value reporting

core/colours.js

@@ -96,5 +96,7 @@ Blockly.Colours = {
   "numPadBackground": "#547AB2",
   "numPadBorder": "#435F91",
   "numPadActiveBackground": "#435F91",
-  "numPadText": "#FFFFFF"
+  "numPadText": "#FFFFFF",
+  "valueReportBackground": "#FFFFFF",
+  "valueReportBorder": "#AAAAAA"
 };

core/css.js

@@ -323,6 +323,16 @@ Blockly.Css.CONTENT = [
     'border-bottom-right-radius: 4px;',
   '}',
 
+  '.valueReportBox {',
+    'min-width: 50px;',
+    'max-width: 300px;',
+    'max-height: 200px;',
+    'overflow: auto;',
+    'word-wrap: break-word;',
+    'text-align: center;',
+    'font-size: .8em;',
+  '}',
+
   '.blocklyResizeSE {',
     'cursor: se-resize;',
     'fill: #aaa;',

core/utils.js

@@ -754,3 +754,15 @@ Blockly.measureText = function(fontSize, fontFamily, fontWeight, text) {
   return context.measureText(text).width;
 };
 
+/**
+ * Encode a string's HTML entities.
+ * E.g., <a> -> &lt;a&gt;
+ * @param {!string} rawStr Unencoded raw string to encode.
+ * @return {string} String with HTML entities encoded.
+ */
+Blockly.encodeEntities = function(rawStr) {
+  // CC-BY-SA https://stackoverflow.com/questions/18749591/encode-html-entities-in-javascript
+  return rawStr.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
+    return '&#' + i.charCodeAt(0) + ';';
+  });
+};

core/workspace_svg.js

@@ -28,7 +28,9 @@ goog.provide('Blockly.WorkspaceSvg');
 
 // TODO(scr): Fix circular dependencies
 //goog.require('Blockly.BlockSvg');
+goog.require('Blockly.Colours');
 goog.require('Blockly.ConnectionDB');
+goog.require('Blockly.DropDownDiv');
 goog.require('Blockly.Events');
 goog.require('Blockly.Options');
 goog.require('Blockly.ScrollbarPair');
@@ -581,6 +583,31 @@ Blockly.WorkspaceSvg.prototype.glowStack = function(id, isGlowingStack) {
   block.setGlowStack(isGlowingStack);
 };
 
+/**
+ * Visually report a value associated with a block.
+ * In Scratch, appears as a pop-up next to the block when a reporter block is clicked.
+ * @param {?string} id ID of block to report associated value.
+ * @param {?string} value String value to visually report.
+ */
+Blockly.WorkspaceSvg.prototype.reportValue = function(id, value) {
+  var block = this.getBlockById(id);
+  if (!block) {
+    throw 'Tried to report value on block that does not exist.';
+  }
+  Blockly.DropDownDiv.hideWithoutAnimation();
+  Blockly.DropDownDiv.clearContent();
+  var contentDiv = Blockly.DropDownDiv.getContentDiv();
+  var valueReportBox = goog.dom.createElement('div');
+  valueReportBox.setAttribute('class', 'valueReportBox');
+  valueReportBox.innerHTML = Blockly.encodeEntities(value);
+  contentDiv.appendChild(valueReportBox);
+  Blockly.DropDownDiv.setColour(
+    Blockly.Colours.valueReportBackground,
+    Blockly.Colours.valueReportBorder
+  );
+  Blockly.DropDownDiv.showPositionedByBlock(this, block);
+};
+
 /**
  * Paste the provided block onto the workspace.
  * @param {!Element} xmlBlock XML block element.

tests/vertical_playground.html

@@ -329,6 +329,15 @@
         }
         fakeDragWrapper();
       }
+
+      function reportDemo() {
+        if (Blockly.selected) {
+          workspace.reportValue(
+            Blockly.selected.id,
+            document.getElementById('reportValue').value
+          );
+        }
+      }
     </script>
 
     <style>
@@ -1307,5 +1316,11 @@
       <input type="button" value="Undo" onclick="workspace.undo()" />
       <input type="button" value="Redo" onclick="workspace.undo(true)" />
     </p>
+
+    <p>
+      Report:
+      <input id="reportValue" type="text" value="123" />
+      <input type="button" value="Report last clicked block" onclick="reportDemo()" />
+    </p>
   </body>
 </html>