[zelos] Set dropdown div colour to match block colour (#3462)

* Set dropdown div colour to match block colour

core/css.js

@@ -595,7 +595,8 @@ Blockly.Css.CONTENT = [
 
   '.blocklyWidgetDiv .goog-menuitem-content,',
   '.blocklyDropDownDiv .goog-menuitem-content {',
-    'font: normal 13px Arial, sans-serif;',
+    'font-family: Arial, sans-serif;',
+    'font-size: 13px;',
   '}',
 
   '.blocklyWidgetDiv .goog-menuitem-content {',

core/field_dropdown.js

@@ -256,6 +256,14 @@ Blockly.FieldDropdown.prototype.showEditor_ = function() {
   Blockly.utils.dom.addClass(
       /** @type {!Element} */ (this.menu_.getElement()), 'blocklyDropdownMenu');
 
+  if (this.constants_.FIELD_DROPDOWN_COLOURED_DIV) {
+    var primaryColour = (this.sourceBlock_.isShadow()) ?
+        this.sourceBlock_.getParent().getColour() :
+        this.sourceBlock_.getColour();
+    Blockly.DropDownDiv.setColour(primaryColour,
+        this.sourceBlock_.style.colourTertiary);
+  }
+
   Blockly.DropDownDiv.showPositionedByField(
       this, this.dropdownDispose_.bind(this));
 

core/renderers/common/constants.js

@@ -300,6 +300,13 @@ Blockly.blockRendering.ConstantProvider = function() {
    */
   this.FIELD_DROPDOWN_BORDER_RECT_HEIGHT = this.FIELD_BORDER_RECT_HEIGHT;
 
+  /**
+   * Whether or not a dropdown field's div should be coloured to match the
+   * block colours.
+   * @type {boolean}
+   */
+  this.FIELD_DROPDOWN_COLOURED_DIV = false;
+
   /**
    * Whether or not a dropdown field uses a text or SVG arrow.
    * @type {boolean}

core/renderers/zelos/constants.js

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

core/renderers/zelos/renderer.js

@@ -166,6 +166,14 @@ Blockly.zelos.Renderer.prototype.getCSS_ = function() {
     selector + ' .blocklyDropdownText {',
       'fill: #fff !important;',
     '}',
+    // Widget and Dropdown Div
+    selector + '.blocklyWidgetDiv .goog-menuitem,',
+    selector + '.blocklyDropDownDiv .goog-menuitem {',
+      'font-family: ' + constants.FIELD_TEXT_FONTFAMILY + ';',
+    '}',
+    selector + '.blocklyDropDownDiv .goog-menuitem-content {',
+      'color: #fff;',
+    '}',
 
     // Connection highlight.
     selector + ' .blocklyHighlightedConnectionPath {',