From 63f7af115c0117651c3d165cfccdb77fc57268cf Mon Sep 17 00:00:00 2001
From: Sam El-Husseini <sam.elhusseini@gmail.com>
Date: Tue, 10 Dec 2019 08:31:43 -0800
Subject: [PATCH] [zelos] Set field rect background colour (#3500)

* More consistent field rect colour in zelos. Only overriding in full block fields. Fix disabled block colours.

* Use a better constant name and fix build.
---
 core/field.js                       | 3 ++-
 core/field_dropdown.js              | 6 ++++--
 core/field_textinput.js             | 6 +++---
 core/renderers/common/constants.js  | 9 ++++++++-
 core/renderers/zelos/constants.js   | 4 ++++
 core/renderers/zelos/path_object.js | 9 ++-------
 6 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/core/field.js b/core/field.js
index 3dc95a483..2d392f981 100644
--- a/core/field.js
+++ b/core/field.js
@@ -331,7 +331,8 @@ Blockly.Field.prototype.createBorderRect_ = function() {
             'x': 0,
             'y': 0,
             'height': this.size_.height,
-            'width': this.size_.width
+            'width': this.size_.width,
+            'class': 'blocklyFieldRect'
           }, this.fieldGroup_));
 };
 
diff --git a/core/field_dropdown.js b/core/field_dropdown.js
index e4bd3a317..97f6d6085 100644
--- a/core/field_dropdown.js
+++ b/core/field_dropdown.js
@@ -212,6 +212,9 @@ Blockly.FieldDropdown.prototype.initView = function() {
   } else {
     this.createTextArrow_();
   }
+
+  Blockly.utils.dom.addClass(/** @type {!SVGRectElement} */ (this.borderRect_),
+      'blocklyDropdownRect');
 };
 
 /**
@@ -515,8 +518,7 @@ Blockly.FieldDropdown.prototype.applyColour = function() {
       this.borderRect_.setAttribute('fill',
           this.sourceBlock_.style.colourTertiary);
     } else {
-      this.borderRect_.setAttribute('fill',
-          this.sourceBlock_.style.colourPrimary);
+      this.borderRect_.setAttribute('fill', 'transparent');
     }
   }
   // Update arrow's colour.
diff --git a/core/field_textinput.js b/core/field_textinput.js
index 23e958b16..aa6d0a7a6 100644
--- a/core/field_textinput.js
+++ b/core/field_textinput.js
@@ -238,9 +238,9 @@ Blockly.FieldTextInput.prototype.applyColour = function() {
     if (this.borderRect_) {
       this.borderRect_.setAttribute('stroke',
           this.sourceBlock_.style.colourTertiary);
-      this.borderRect_.setAttribute('fill', '#fff');
-    } else if (this.sourceBlock_.isShadow()) {
-      this.sourceBlock_.pathObject.svgPath.setAttribute('fill', '#fff');
+    } else {
+      this.sourceBlock_.pathObject.svgPath.setAttribute('fill',
+          this.constants_.FIELD_BORDER_RECT_COLOUR);
     }
   }
 };
diff --git a/core/renderers/common/constants.js b/core/renderers/common/constants.js
index a7736fc8d..4f3c2dcee 100644
--- a/core/renderers/common/constants.js
+++ b/core/renderers/common/constants.js
@@ -276,6 +276,13 @@ Blockly.blockRendering.ConstantProvider = function() {
    */
   this.FIELD_BORDER_RECT_Y_PADDING = 3;
 
+  /**
+   * The backing colour of a field's border rect.
+   * @type {string}
+   * @package
+   */
+  this.FIELD_BORDER_RECT_COLOUR = '#fff';
+
   /**
    * Field text baseline.
    * This is only used if `FIELD_TEXT_BASELINE_CENTER` is false.
@@ -962,7 +969,7 @@ Blockly.blockRendering.ConstantProvider.prototype.getCSS = function(name) {
     '}',
     selector + ' .blocklyNonEditableText>rect,',
     selector + ' .blocklyEditableText>rect {',
-      'fill: #fff;',
+      'fill: ' + this.FIELD_BORDER_RECT_COLOUR + ';',
       'fill-opacity: .6;',
       'stroke: none;',
     '}',
diff --git a/core/renderers/zelos/constants.js b/core/renderers/zelos/constants.js
index a46c6992a..fa33df775 100644
--- a/core/renderers/zelos/constants.js
+++ b/core/renderers/zelos/constants.js
@@ -717,6 +717,10 @@ Blockly.zelos.ConstantProvider.prototype.getCSS = function(name) {
       'font-size: ' + this.FIELD_TEXT_FONTSIZE + 'pt;',
       'font-weight: ' + this.FIELD_TEXT_FONTWEIGHT + ';',
     '}',
+    selector + ' .blocklyNonEditableText>rect:not(.blocklyDropdownRect),',
+    selector + ' .blocklyEditableText>rect:not(.blocklyDropdownRect) {',
+      'fill: ' + this.FIELD_BORDER_RECT_COLOUR + ';',
+    '}',
     selector + ' .blocklyNonEditableText>text,',
     selector + ' .blocklyEditableText>text,',
     selector + ' .blocklyNonEditableText>g>text,',
diff --git a/core/renderers/zelos/path_object.js b/core/renderers/zelos/path_object.js
index e3511d6f4..56d09cd72 100644
--- a/core/renderers/zelos/path_object.js
+++ b/core/renderers/zelos/path_object.js
@@ -104,12 +104,6 @@ Blockly.zelos.PathObject.prototype.applyColour = function(block) {
   if (block.isShadow() && block.getParent()) {
     this.svgPath.setAttribute('stroke', block.getParent().style.colourTertiary);
   }
-  
-  // Apply colour to outlines.
-  for (var i = 0, keys = Object.keys(this.outlines_),
-    key; (key = keys[i]); i++) {
-    this.outlines_[key].setAttribute('fill', this.style.colourTertiary);
-  }
 };
 
 /**
@@ -135,6 +129,8 @@ Blockly.zelos.PathObject.prototype.updateDisabled_ = function(
     if (disabled) {
       this.outlines_[key].setAttribute('fill',
           'url(#' + this.constants_.disabledPatternId + ')');
+    } else {
+      this.outlines_[key].setAttribute('fill', this.style.colourTertiary);
     }
   }
 };
@@ -233,7 +229,6 @@ Blockly.zelos.PathObject.prototype.endDrawing = function() {
 Blockly.zelos.PathObject.prototype.setOutlinePath = function(name, pathString) {
   var outline = this.getOutlinePath_(name);
   outline.setAttribute('d', pathString);
-  outline.setAttribute('fill', this.style.colourTertiary);
 };
 
 /**