From 97eb86f9885ed8defb9440ee7ae1cb236de9192f Mon Sep 17 00:00:00 2001
From: Sam El-Husseini <sam.elhusseini@gmail.com>
Date: Tue, 25 Feb 2020 14:29:45 -0800
Subject: [PATCH] Configure zelos selected glow properties in theme (#3715)

* Configure selected and replacement glow size and colour in zelos from the theme.
---
 core/renderers/zelos/constants.js | 61 ++++++++++++++++++++++++++++---
 core/theme/highcontrast.js        |  4 ++
 2 files changed, 60 insertions(+), 5 deletions(-)

diff --git a/core/renderers/zelos/constants.js b/core/renderers/zelos/constants.js
index 52930aae4..cdd09750f 100644
--- a/core/renderers/zelos/constants.js
+++ b/core/renderers/zelos/constants.js
@@ -310,6 +310,30 @@ Blockly.zelos.ConstantProvider = function() {
    */
   this.MAX_DYNAMIC_CONNECTION_SHAPE_WIDTH = 12 * this.GRID_UNIT;
 
+  /**
+   * The selected glow colour.
+   * @type {string}
+   */
+  this.SELECTED_GLOW_COLOUR = '#fff200';
+
+  /**
+   * The size of the selected glow.
+   * @type {number}
+   */
+  this.SELECTED_GLOW_SIZE = 0.5;
+
+  /**
+   * The replacement glow colour.
+   * @type {string}
+   */
+  this.REPLACEMENT_GLOW_COLOUR = '#fff200';
+
+  /**
+   * The size of the selected glow.
+   * @type {number}
+   */
+  this.REPLACEMENT_GLOW_SIZE = 2;
+
   /**
    * The ID of the selected glow filter, or the empty string if no filter is
    * set.
@@ -380,6 +404,30 @@ Blockly.zelos.ConstantProvider.prototype.init = function() {
       this.INSIDE_CORNERS.rightWidth;
 };
 
+/**
+ * @override
+ */
+Blockly.zelos.ConstantProvider.prototype.setTheme = function(theme) {
+  Blockly.zelos.ConstantProvider.superClass_.setTheme.call(this, theme);
+
+  this.SELECTED_GLOW_COLOUR =
+      theme.getComponentStyle('selectedGlowColour') ||
+      this.SELECTED_GLOW_COLOUR;
+  var selectedGlowSize =
+      Number(theme.getComponentStyle('selectedGlowSize'));
+  this.SELECTED_GLOW_SIZE =
+      selectedGlowSize && !isNaN(selectedGlowSize) ?
+      selectedGlowSize : this.SELECTED_GLOW_SIZE;
+  this.REPLACEMENT_GLOW_COLOUR =
+      theme.getComponentStyle('replacementGlowColour') ||
+      this.REPLACEMENT_GLOW_COLOUR;
+  var replacementGlowSize =
+      Number(theme.getComponentStyle('replacementGlowSize'));
+  this.REPLACEMENT_GLOW_SIZE =
+      replacementGlowSize && !isNaN(replacementGlowSize) ?
+      replacementGlowSize : this.REPLACEMENT_GLOW_SIZE;
+};
+
 /**
  * @override
  */
@@ -388,6 +436,9 @@ Blockly.zelos.ConstantProvider.prototype.dispose = function() {
   if (this.selectedGlowFilter_) {
     Blockly.utils.dom.removeNode(this.selectedGlowFilter_);
   }
+  if (this.replacementGlowFilter_) {
+    Blockly.utils.dom.removeNode(this.replacementGlowFilter_);
+  }
 };
 
 /**
@@ -764,7 +815,7 @@ Blockly.zelos.ConstantProvider.prototype.createDom = function(svg,
   Blockly.utils.dom.createSvgElement('feGaussianBlur',
       {
         'in': 'SourceGraphic',
-        'stdDeviation': 0.5  // TODO: configure size in theme.
+        'stdDeviation': this.SELECTED_GLOW_SIZE
       },
       selectedGlowFilter);
   // Set all gaussian blur pixels to 1 opacity before applying flood
@@ -778,7 +829,7 @@ Blockly.zelos.ConstantProvider.prototype.createDom = function(svg,
   // Color the highlight
   Blockly.utils.dom.createSvgElement('feFlood',
       {
-        'flood-color': '#fff200', // TODO: configure colour in theme.
+        'flood-color': this.SELECTED_GLOW_COLOUR,
         'flood-opacity': 1,
         'result': 'outColor'
       },
@@ -806,7 +857,7 @@ Blockly.zelos.ConstantProvider.prototype.createDom = function(svg,
   Blockly.utils.dom.createSvgElement('feGaussianBlur',
       {
         'in': 'SourceGraphic',
-        'stdDeviation': 2  // TODO: configure size in theme.
+        'stdDeviation': this.REPLACEMENT_GLOW_SIZE
       },
       replacementGlowFilter);
   // Set all gaussian blur pixels to 1 opacity before applying flood
@@ -820,7 +871,7 @@ Blockly.zelos.ConstantProvider.prototype.createDom = function(svg,
   // Color the highlight
   Blockly.utils.dom.createSvgElement('feFlood',
       {
-        'flood-color': '#fff200', // TODO: configure colour in theme.
+        'flood-color': this.REPLACEMENT_GLOW_COLOUR,
         'flood-opacity': 1,
         'result': 'outColor'
       },
@@ -897,7 +948,7 @@ Blockly.zelos.ConstantProvider.prototype.getCSS_ = function(name) {
 
     // Connection highlight.
     selector + ' .blocklyHighlightedConnectionPath {',
-      'stroke: #fff200;',
+      'stroke: ' + this.SELECTED_GLOW_COLOUR + ';',
     '}',
 
     // Disabled outline paths.
diff --git a/core/theme/highcontrast.js b/core/theme/highcontrast.js
index c132e33b3..bd1084354 100644
--- a/core/theme/highcontrast.js
+++ b/core/theme/highcontrast.js
@@ -108,6 +108,10 @@ Blockly.Themes.HighContrast =
         Blockly.Themes.HighContrast.defaultBlockStyles,
         Blockly.Themes.HighContrast.categoryStyles);
 
+Blockly.Themes.HighContrast.setComponentStyle('selectedGlowColour', '#000000');
+Blockly.Themes.HighContrast.setComponentStyle('selectedGlowSize', 1);
+Blockly.Themes.HighContrast.setComponentStyle('replacementGlowColour', '#000000');
+
 Blockly.Themes.HighContrast.setFontStyle({
   'family': null, // Use default font-family
   'weight': null, // Use default font-weight