From 179b75da59b91784c3d91726e7eadf992aa0b184 Mon Sep 17 00:00:00 2001
From: Tim Mickel <tim.mickel@gmail.com>
Date: Wed, 6 Jul 2016 20:38:05 -0400
Subject: [PATCH] Basic fixes for FieldColour (#482)

* Fix field_colour's borderRect_ problem

* Use actual width and height instead of NBSPs

* Get corner radius from BlockSvg

* Improve colour picker CSS to not have borders
---
 core/css.js          |  5 ++---
 core/field_colour.js | 28 +++++++++++++++++++---------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/core/css.js b/core/css.js
index d019b848..a84bda3c 100644
--- a/core/css.js
+++ b/core/css.js
@@ -677,7 +677,6 @@ Blockly.Css.CONTENT = [
   '}',
 
   '.blocklyWidgetDiv .goog-palette-table {',
-    'border: 1px solid #666;',
     'border-collapse: collapse;',
   '}',
 
@@ -688,7 +687,6 @@ Blockly.Css.CONTENT = [
     'border: 0;',
     'text-align: center;',
     'vertical-align: middle;',
-    'border-right: 1px solid #666;',
     'font-size: 1px;',
   '}',
 
@@ -696,15 +694,16 @@ Blockly.Css.CONTENT = [
     'position: relative;',
     'height: 13px;',
     'width: 15px;',
-    'border: 1px solid #666;',
   '}',
 
   '.blocklyWidgetDiv .goog-palette-cell-hover .goog-palette-colorswatch {',
     'border: 1px solid #FFF;',
+    'box-sizing: border-box;',
   '}',
 
   '.blocklyWidgetDiv .goog-palette-cell-selected .goog-palette-colorswatch {',
     'border: 1px solid #000;',
+    'box-sizing: border-box;',
     'color: #fff;',
   '}',
 
diff --git a/core/field_colour.js b/core/field_colour.js
index 96318b9e..3736c35e 100644
--- a/core/field_colour.js
+++ b/core/field_colour.js
@@ -46,7 +46,6 @@ goog.require('goog.ui.ColorPicker');
  */
 Blockly.FieldColour = function(colour, opt_validator) {
   Blockly.FieldColour.superClass_.constructor.call(this, colour, opt_validator);
-  this.setText(Blockly.Field.NBSP + Blockly.Field.NBSP + Blockly.Field.NBSP);
 };
 goog.inherits(Blockly.FieldColour, Blockly.Field);
 
@@ -70,12 +69,15 @@ Blockly.FieldColour.prototype.columns_ = 0;
  */
 Blockly.FieldColour.prototype.init = function(block) {
   Blockly.FieldColour.superClass_.init.call(this, block);
-  // TODO(#163): borderRect_ has been removed from the field.
-  // When fixing field_colour, we should re-color the shadow block instead,
-  // or re-implement a rectangle in the field.
-  if (this.borderRect_) {
-    this.borderRect_.style['fillOpacity'] = 1;
-  }
+  this.colourRect_ = Blockly.createSvgElement('rect',
+      {'rx': Blockly.BlockSvg.CORNER_RADIUS,
+       'ry': Blockly.BlockSvg.CORNER_RADIUS,
+       'x': 0,
+       'y': 0,
+       'width': Blockly.BlockSvg.FIELD_WIDTH,
+       'height': Blockly.BlockSvg.FIELD_HEIGHT
+      }, this.fieldGroup_, this.sourceBlock_.workspace);
+  this.colourRect_.style['fillOpacity'] = 1;
   this.setValue(this.getValue());
 };
 
@@ -111,8 +113,8 @@ Blockly.FieldColour.prototype.setValue = function(colour) {
         this.sourceBlock_, 'field', this.name, this.colour_, colour));
   }
   this.colour_ = colour;
-  if (this.borderRect_) {
-    this.borderRect_.style.fill = colour;
+  if (this.colourRect_) {
+    this.colourRect_.style.fill = colour;
   }
 };
 
@@ -130,6 +132,14 @@ Blockly.FieldColour.prototype.getText = function() {
   return colour;
 };
 
+/**
+ * Returns the fixed height and width.
+ * @return {!goog.math.Size} Height and width.
+ */
+Blockly.FieldColour.prototype.getSize = function() {
+  return new goog.math.Size(Blockly.BlockSvg.FIELD_WIDTH, Blockly.BlockSvg.FIELD_HEIGHT);
+};
+
 /**
  * An array of colour strings for the palette.
  * See bottom of this page for the default: