Inject constants CSS in createDom (#3502)

* Inject constants CSS in createDom instead. Use a random identifier to pre-emptively set CSS that uses the disabled pattern id.

core/renderers/common/constants.js

@@ -366,6 +366,14 @@ Blockly.blockRendering.ConstantProvider = function() {
    */
   this.FIELD_CHECKBOX_DEFAULT_WIDTH = 15;
 
+  /**
+   * A random identifier used to ensure a unique ID is used for each
+   * filter/pattern for the case of multiple Blockly instances on a page.
+   * @type {string}
+   * @protected
+   */
+  this.randomIdentifier_ = String(Math.random()).substring(2);
+
   /**
    * The ID of the emboss filter, or the empty string if no filter is set.
    * @type {string}
@@ -879,10 +887,6 @@ Blockly.blockRendering.ConstantProvider.prototype.createDom = function(svg) {
   </defs>
   */
   var defs = Blockly.utils.dom.createSvgElement('defs', {}, svg);
-  // Each filter/pattern needs a unique ID for the case of multiple Blockly
-  // instances on a page.  Browser behaviour becomes undefined otherwise.
-  // https://neil.fraser.name/news/2015/11/01/
-  var rnd = String(Math.random()).substring(2);
   /*
     <filter id="blocklyEmbossFilter837493">
       <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur" />
@@ -898,7 +902,7 @@ Blockly.blockRendering.ConstantProvider.prototype.createDom = function(svg) {
     </filter>
   */
   var embossFilter = Blockly.utils.dom.createSvgElement('filter',
-      {'id': 'blocklyEmbossFilter' + rnd}, defs);
+      {'id': 'blocklyEmbossFilter' + this.randomIdentifier_}, defs);
   Blockly.utils.dom.createSvgElement('feGaussianBlur',
       {'in': 'SourceAlpha', 'stdDeviation': 1, 'result': 'blur'}, embossFilter);
   var feSpecularLighting = Blockly.utils.dom.createSvgElement('feSpecularLighting',
@@ -942,7 +946,7 @@ Blockly.blockRendering.ConstantProvider.prototype.createDom = function(svg) {
   */
   var disabledPattern = Blockly.utils.dom.createSvgElement('pattern',
       {
-        'id': 'blocklyDisabledPattern' + rnd,
+        'id': 'blocklyDisabledPattern' + this.randomIdentifier_,
         'patternUnits': 'userSpaceOnUse',
         'width': 10,
         'height': 10
@@ -955,13 +959,35 @@ Blockly.blockRendering.ConstantProvider.prototype.createDom = function(svg) {
   this.disabledPattern_ = disabledPattern;
 };
 
+/**
+ * Inject renderer specific CSS into the page.
+ * @param {string} name Name of the renderer.
+ * @package
+ */
+Blockly.blockRendering.ConstantProvider.prototype.injectCSS = function(
+    name) {
+  var cssArray = this.getCSS_(name);
+  var cssNodeId = 'blockly-renderer-style-' + name;
+  if (document.getElementById(cssNodeId)) {
+    // Already injected.
+    return;
+  }
+  var text = cssArray.join('\n');
+  // Inject CSS tag at start of head.
+  var cssNode = document.createElement('style');
+  cssNode.id = cssNodeId;
+  var cssTextNode = document.createTextNode(text);
+  cssNode.appendChild(cssTextNode);
+  document.head.insertBefore(cssNode, document.head.firstChild);
+};
+
 /**
  * Get any renderer specific CSS to inject when the renderer is initialized.
  * @param {string} name Name of the renderer.
  * @return {!Array.<string>} Array of CSS strings.
- * @package
+ * @protected
  */
-Blockly.blockRendering.ConstantProvider.prototype.getCSS = function(name) {
+Blockly.blockRendering.ConstantProvider.prototype.getCSS_ = function(name) {
   var selector = '.' + name + '-renderer';
   return [
     /* eslint-disable indent */

core/renderers/common/renderer.js

@@ -63,7 +63,6 @@ Blockly.blockRendering.Renderer = function(name) {
 Blockly.blockRendering.Renderer.prototype.init = function() {
   this.constants_ = this.makeConstants_();
   this.constants_.init();
-  this.injectCSS_(this.constants_.getCSS(this.name));
 };
 
 /**
@@ -150,26 +149,6 @@ Blockly.blockRendering.Renderer.prototype.getConstants = function() {
     (this.constants_));
 };
 
-/**
- * Get any renderer specific CSS to inject when the renderer is initialized.
- * @param {!Array.<string>} cssArray Array of CSS strings.
- * @private
- */
-Blockly.blockRendering.Renderer.prototype.injectCSS_ = function(cssArray) {
-  var cssNodeId = 'blockly-renderer-style-' + this.name;
-  if (document.getElementById(cssNodeId)) {
-    // Already injected.
-    return;
-  }
-  var text = cssArray.join('\n');
-  // Inject CSS tag at start of head.
-  var cssNode = document.createElement('style');
-  cssNode.id = cssNodeId;
-  var cssTextNode = document.createTextNode(text);
-  cssNode.appendChild(cssTextNode);
-  document.head.insertBefore(cssNode, document.head.firstChild);
-};
-
 /**
  * Determine whether or not to highlight a connection.
  * @param {Blockly.Connection} _conn The connection to determine whether or not

core/renderers/zelos/constants.js

@@ -622,15 +622,11 @@ Blockly.zelos.ConstantProvider.prototype.createDom = function(svg) {
   </defs>
   */
   var defs = Blockly.utils.dom.createSvgElement('defs', {}, svg);
-  // Each filter/pattern needs a unique ID for the case of multiple Blockly
-  // instances on a page.  Browser behaviour becomes undefined otherwise.
-  // https://neil.fraser.name/news/2015/11/01/
-  var rnd = String(Math.random()).substring(2);
   // Using a dilate distorts the block shape.
   // Instead use a gaussian blur, and then set all alpha to 1 with a transfer.
   var highlightGlowFilter = Blockly.utils.dom.createSvgElement('filter',
       {
-        'id': 'blocklyHighlightGlowFilter' + rnd,
+        'id': 'blocklyHighlightGlowFilter' + this.randomIdentifier_,
         'height': '160%',
         'width': '180%',
         y: '-30%',
@@ -672,7 +668,7 @@ Blockly.zelos.ConstantProvider.prototype.createDom = function(svg) {
   // Instead use a gaussian blur, and then set all alpha to 1 with a transfer.
   var replacementGlowFilter = Blockly.utils.dom.createSvgElement('filter',
       {
-        'id': 'blocklyReplacementGlowFilter' + rnd,
+        'id': 'blocklyReplacementGlowFilter' + this.randomIdentifier_,
         'height': '160%',
         'width': '180%',
         y: '-30%',
@@ -720,7 +716,7 @@ Blockly.zelos.ConstantProvider.prototype.createDom = function(svg) {
 /**
  * @override
  */
-Blockly.zelos.ConstantProvider.prototype.getCSS = function(name) {
+Blockly.zelos.ConstantProvider.prototype.getCSS_ = function(name) {
   var selector = '.' + name + '-renderer';
   return [
     /* eslint-disable indent */
@@ -776,6 +772,11 @@ Blockly.zelos.ConstantProvider.prototype.getCSS = function(name) {
     selector + ' .blocklyHighlightedConnectionPath {',
       'stroke: #fff200;',
     '}',
+
+    // Disabled outline paths.
+    selector + ' .blocklyDisabled > .blocklyOutlinePath {',
+      'fill: url(#blocklyDisabledPattern' + this.randomIdentifier_ + ')',
+    '}',
     /* eslint-enable indent */
   ];
 };

core/renderers/zelos/path_object.js

@@ -118,23 +118,6 @@ Blockly.zelos.PathObject.prototype.flipRTL = function() {
   }
 };
 
-/**
- * @override
- */
-Blockly.zelos.PathObject.prototype.updateDisabled_ = function(
-    disabled) {
-  Blockly.zelos.PathObject.superClass_.updateDisabled_.call(this, disabled);
-  for (var i = 0, keys = Object.keys(this.outlines_),
-    key; (key = keys[i]); i++) {
-    if (disabled) {
-      this.outlines_[key].setAttribute('fill',
-          'url(#' + this.constants_.disabledPatternId + ')');
-    } else {
-      this.outlines_[key].setAttribute('fill', this.style.colourTertiary);
-    }
-  }
-};
-
 /**
  * @override
  */
@@ -229,6 +212,7 @@ 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);
 };
 
 /**

core/workspace_svg.js

@@ -744,7 +744,9 @@ Blockly.WorkspaceSvg.prototype.createDom = function(opt_backgroundClass) {
   this.markerManager_.registerMarker(Blockly.navigation.MARKER_NAME,
       new Blockly.Marker());
 
-  this.getRenderer().getConstants().createDom(this.svgGroup_);
+  var constants = this.getRenderer().getConstants();
+  constants.injectCSS(this.getRenderer().name);
+  constants.createDom(this.svgGroup_);
   return this.svgGroup_;
 };
 

tests/scripts/selenium-config.js

@@ -9,7 +9,7 @@ module.exports = {
     chrome: {
       // check for more recent versions of chrome driver here:
       // https://chromedriver.storage.googleapis.com/index.html
-      version: '77.0.3865.40',
+      version: '79.0.3945.36',
       arch: process.arch,
       baseURL: 'https://chromedriver.storage.googleapis.com'
     },