[zelos] Support dropdown fields with no border rect (#3547)

* Dropdown fields without a border rect.

core/field_dropdown.js

@@ -202,7 +202,12 @@ Blockly.FieldDropdown.prototype.CURSOR = 'default';
  * @package
  */
 Blockly.FieldDropdown.prototype.initView = function() {
-  Blockly.FieldDropdown.superClass_.initView.call(this);
+  if (this.shouldAddBorderRect_()) {
+    this.createBorderRect_();
+  } else {
+    this.clickTarget_ = this.sourceBlock_.getSvgRoot();
+  }
+  this.createTextElement_();
 
   this.imageElement_ = /** @type {!SVGImageElement} */
       (Blockly.utils.dom.createSvgElement('image', {}, this.fieldGroup_));
@@ -213,8 +218,20 @@ Blockly.FieldDropdown.prototype.initView = function() {
     this.createTextArrow_();
   }
 
-  Blockly.utils.dom.addClass(/** @type {!SVGRectElement} */ (this.borderRect_),
-      'blocklyDropdownRect');
+  if (this.borderRect_) {
+    Blockly.utils.dom.addClass(this.borderRect_, 'blocklyDropdownRect');
+  }
+};
+
+/**
+ * Whether or not the dropdown should add a border rect.
+ * @return {boolean} True if the dropdown field should add a border rect.
+ * @protected
+ */
+Blockly.FieldDropdown.prototype.shouldAddBorderRect_ = function() {
+  return !this.constants_.FIELD_DROPDOWN_NO_BORDER_RECT_SHADOW ||
+      (this.constants_.FIELD_DROPDOWN_NO_BORDER_RECT_SHADOW &&
+          !this.sourceBlock_.isShadow());
 };
 
 /**
@@ -549,8 +566,10 @@ Blockly.FieldDropdown.prototype.render_ = function() {
   } else {
     this.renderSelectedText_();
   }
-  this.borderRect_.setAttribute('height', this.size_.height);
-  this.borderRect_.setAttribute('width', this.size_.width);
+  if (this.borderRect_) {
+    this.borderRect_.setAttribute('height', this.size_.height);
+    this.borderRect_.setAttribute('width', this.size_.width);
+  }
 };
 
 /**
@@ -570,11 +589,12 @@ Blockly.FieldDropdown.prototype.renderSelectedImage_ = function(imageJson) {
   var imageWidth = Number(imageJson.width);
 
   // Height and width include the border rect.
+  var hasBorder = !!this.borderRect_;
   this.size_.height = Math.max(
-      this.constants_.FIELD_DROPDOWN_BORDER_RECT_HEIGHT,
+      hasBorder ? this.constants_.FIELD_DROPDOWN_BORDER_RECT_HEIGHT : 0,
       imageHeight + Blockly.FieldDropdown.IMAGE_Y_PADDING);
   var halfHeight = this.size_.height / 2;
-  var xPadding = this.constants_.FIELD_BORDER_RECT_X_PADDING;
+  var xPadding = hasBorder ? this.constants_.FIELD_BORDER_RECT_X_PADDING : 0;
   var arrowWidth = 0;
   if (this.svgArrow_) {
     arrowWidth = this.positionSVGArrow_(imageWidth + xPadding, halfHeight -
@@ -614,15 +634,16 @@ Blockly.FieldDropdown.prototype.renderSelectedText_ = function() {
   this.textElement_.setAttribute('text-anchor', 'start');
 
   // Height and width include the border rect.
+  var hasBorder = !!this.borderRect_;
   this.size_.height = Math.max(
-      this.constants_.FIELD_DROPDOWN_BORDER_RECT_HEIGHT,
+      hasBorder ? this.constants_.FIELD_DROPDOWN_BORDER_RECT_HEIGHT : 0,
       this.constants_.FIELD_TEXT_HEIGHT);
   var halfHeight = this.size_.height / 2;
   var textWidth = Blockly.utils.dom.getFastTextWidth(this.textElement_,
       this.constants_.FIELD_TEXT_FONTSIZE,
       this.constants_.FIELD_TEXT_FONTWEIGHT,
       this.constants_.FIELD_TEXT_FONTFAMILY);
-  var xPadding = this.constants_.FIELD_BORDER_RECT_X_PADDING;
+  var xPadding = hasBorder ? this.constants_.FIELD_BORDER_RECT_X_PADDING : 0;
   var arrowWidth = 0;
   if (this.svgArrow_) {
     arrowWidth = this.positionSVGArrow_(textWidth + xPadding, halfHeight -

core/field_variable.js

@@ -83,7 +83,7 @@ Blockly.FieldVariable = function(varName, opt_validator, opt_variableTypes,
    * @protected
    * @override
    */
-  this.size_ = new Blockly.utils.Size(0, Blockly.BlockSvg.MIN_BLOCK_Y);
+  this.size_ = new Blockly.utils.Size(0, 0);
 
   opt_config && this.configure_(opt_config);
   opt_validator && this.setValidator(opt_validator);
@@ -151,6 +151,15 @@ Blockly.FieldVariable.prototype.initModel = function() {
   this.doValueUpdate_(variable.getId());
 };
 
+/**
+ * @override
+ */
+Blockly.FieldVariable.prototype.shouldAddBorderRect_ = function() {
+  return Blockly.FieldVariable.superClass_.shouldAddBorderRect_.call(this) &&
+    (!this.constants_.FIELD_DROPDOWN_NO_BORDER_RECT_SHADOW ||
+        this.sourceBlock_.type != 'variables_get');
+};
+
 /**
  * Initialize this field based on the given XML.
  * @param {!Element} fieldElement The element containing information about the

core/renderers/common/constants.js

@@ -322,6 +322,13 @@ Blockly.blockRendering.ConstantProvider = function() {
    */
   this.FIELD_DROPDOWN_BORDER_RECT_HEIGHT = this.FIELD_BORDER_RECT_HEIGHT;
 
+  /**
+   * Whether or not a dropdown field should add a border rect when in a shadow
+   * block.
+   * @type {boolean}
+   */
+  this.FIELD_DROPDOWN_NO_BORDER_RECT_SHADOW = false;
+
   /**
    * Whether or not a dropdown field's div should be coloured to match the
    * block colours.

core/renderers/zelos/constants.js

@@ -288,6 +288,11 @@ Blockly.zelos.ConstantProvider = function() {
    */
   this.FIELD_DROPDOWN_BORDER_RECT_HEIGHT = 8 * this.GRID_UNIT;
 
+  /**
+   * @override
+   */
+  this.FIELD_DROPDOWN_NO_BORDER_RECT_SHADOW = true;
+
   /**
    * @override
    */