From 046636547ef5e31ea7db352509248a9ccb500fc1 Mon Sep 17 00:00:00 2001
From: Rachel Fenichel <fenichel@google.com>
Date: Fri, 23 Jul 2021 14:26:11 -0700
Subject: [PATCH 1/6] Change how the debug filter is created

---
 core/renderers/common/constants.js | 56 ++++++++++++++++++------------
 1 file changed, 34 insertions(+), 22 deletions(-)

diff --git a/core/renderers/common/constants.js b/core/renderers/common/constants.js
index 5c73d0510..7508b6050 100644
--- a/core/renderers/common/constants.js
+++ b/core/renderers/common/constants.js
@@ -401,6 +401,14 @@ Blockly.blockRendering.ConstantProvider = function() {
    */
   this.randomIdentifier = String(Math.random()).substring(2);
 
+  /**
+   * The defs tag that contains all filters and patterns for this Blockly
+   * instance.
+   * @type {SVGElement}
+   * @private
+   */
+  this.defs = null;
+
   /**
    * The ID of the emboss filter, or the empty string if no filter is set.
    * @type {string}
@@ -1023,7 +1031,7 @@ Blockly.blockRendering.ConstantProvider.prototype.createDom = function(svg,
     ... filters go here ...
   </defs>
   */
-  var defs = Blockly.utils.dom.createSvgElement(
+  this.defs = Blockly.utils.dom.createSvgElement(
       Blockly.utils.Svg.DEFS, {}, svg);
   /*
     <filter id="blocklyEmbossFilter837493">
@@ -1041,7 +1049,7 @@ Blockly.blockRendering.ConstantProvider.prototype.createDom = function(svg,
   */
   var embossFilter = Blockly.utils.dom.createSvgElement(
       Blockly.utils.Svg.FILTER,
-      {'id': 'blocklyEmbossFilter' + this.randomIdentifier}, defs);
+      {'id': 'blocklyEmbossFilter' + this.randomIdentifier}, this.defs);
   Blockly.utils.dom.createSvgElement(
       Blockly.utils.Svg.FEGAUSSIANBLUR,
       {'in': 'SourceAlpha', 'stdDeviation': 1, 'result': 'blur'}, embossFilter);
@@ -1095,7 +1103,7 @@ Blockly.blockRendering.ConstantProvider.prototype.createDom = function(svg,
         'patternUnits': 'userSpaceOnUse',
         'width': 10,
         'height': 10
-      }, defs);
+      }, this.defs);
   Blockly.utils.dom.createSvgElement(
       Blockly.utils.Svg.RECT,
       {'width': 10, 'height': 10, 'fill': '#aaa'}, disabledPattern);
@@ -1105,42 +1113,46 @@ Blockly.blockRendering.ConstantProvider.prototype.createDom = function(svg,
   this.disabledPatternId = disabledPattern.id;
   this.disabledPattern_ = disabledPattern;
 
-  if (Blockly.blockRendering.Debug) {
+  this.createDebugFilter();
+};
+
+/**
+ * Create a filter for highlighting the currently rendering block during
+ * render debugging.
+ * @private
+ */
+Blockly.blockRendering.ConstantProvider.prototype.createDebugFilter =
+    function() {
+  // Only create the debug filter once.
+  if (!this.debugFilter_) {
     var debugFilter = Blockly.utils.dom.createSvgElement(
-        Blockly.utils.Svg.FILTER,
-        {
+        Blockly.utils.Svg.FILTER, {
           'id': 'blocklyDebugFilter' + this.randomIdentifier,
           'height': '160%',
           'width': '180%',
           y: '-30%',
           x: '-40%'
         },
-        defs);
+        this.defs);
     // Set all gaussian blur pixels to 1 opacity before applying flood
     var debugComponentTransfer = Blockly.utils.dom.createSvgElement(
-        Blockly.utils.Svg.FECOMPONENTTRANSFER, {
-          'result': 'outBlur'
-        }, debugFilter);
+        Blockly.utils.Svg.FECOMPONENTTRANSFER, {'result': 'outBlur'},
+        debugFilter);
     Blockly.utils.dom.createSvgElement(
         Blockly.utils.Svg.FEFUNCA,
-        {
-          'type': 'table', 'tableValues': '0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1'
-        },
+        {'type': 'table', 'tableValues': '0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1'},
         debugComponentTransfer);
     // Color the highlight
     Blockly.utils.dom.createSvgElement(
         Blockly.utils.Svg.FEFLOOD,
-        {
-          'flood-color': '#ff0000',
-          'flood-opacity': 0.5,
-          'result': 'outColor'
-        },
+        {'flood-color': '#ff0000', 'flood-opacity': 0.5, 'result': 'outColor'},
         debugFilter);
     Blockly.utils.dom.createSvgElement(
-        Blockly.utils.Svg.FECOMPOSITE,
-        {
-          'in': 'outColor', 'in2': 'outBlur',
-          'operator': 'in', 'result': 'outGlow'
+        Blockly.utils.Svg.FECOMPOSITE, {
+          'in': 'outColor',
+          'in2': 'outBlur',
+          'operator': 'in',
+          'result': 'outGlow'
         },
         debugFilter);
     this.debugFilterId = debugFilter.id;

From e9c1e67d17457111c02f3c1bc53681dafa540974 Mon Sep 17 00:00:00 2001
From: Rachel Fenichel <fenichel@google.com>
Date: Fri, 23 Jul 2021 14:38:20 -0700
Subject: [PATCH 2/6] Migrate core/renderers/common/constants.js to goog.module

---
 core/renderers/common/constants.js | 53 ++++++++++++++++--------------
 tests/deps.js                      |  2 +-
 2 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/core/renderers/common/constants.js b/core/renderers/common/constants.js
index 7508b6050..071b21e7d 100644
--- a/core/renderers/common/constants.js
+++ b/core/renderers/common/constants.js
@@ -10,7 +10,8 @@
  */
 'use strict';
 
-goog.provide('Blockly.blockRendering.ConstantProvider');
+goog.module('Blockly.blockRendering.ConstantProvider');
+goog.module.declareLegacyNamespace();
 
 goog.require('Blockly.connectionTypes');
 goog.require('Blockly.utils');
@@ -30,7 +31,7 @@ goog.requireType('Blockly.Theme');
  * @constructor
  * @package
  */
-Blockly.blockRendering.ConstantProvider = function() {
+const ConstantProvider = function() {
 
   /**
    * The size of an empty spacer.
@@ -543,7 +544,7 @@ Blockly.blockRendering.ConstantProvider = function() {
  * Initialize shape objects based on the constants set in the constructor.
  * @package
  */
-Blockly.blockRendering.ConstantProvider.prototype.init = function() {
+ConstantProvider.prototype.init = function() {
 
   /**
    * An object containing sizing and path information about collapsed block
@@ -588,7 +589,7 @@ Blockly.blockRendering.ConstantProvider.prototype.init = function() {
  * @param {!Blockly.Theme} theme The current workspace theme.
  * @package
  */
-Blockly.blockRendering.ConstantProvider.prototype.setTheme = function(
+ConstantProvider.prototype.setTheme = function(
     theme) {
 
   /**
@@ -611,7 +612,7 @@ Blockly.blockRendering.ConstantProvider.prototype.setTheme = function(
  * @param {!Blockly.Theme} theme The current workspace theme.
  * @protected
  */
-Blockly.blockRendering.ConstantProvider.prototype.setDynamicProperties_ =
+ConstantProvider.prototype.setDynamicProperties_ =
     function(theme) {
     /* eslint-disable indent */
   this.setFontConstants_(theme);
@@ -626,7 +627,7 @@ Blockly.blockRendering.ConstantProvider.prototype.setDynamicProperties_ =
  * @param {!Blockly.Theme} theme The current workspace theme.
  * @protected
  */
-Blockly.blockRendering.ConstantProvider.prototype.setFontConstants_ = function(
+ConstantProvider.prototype.setFontConstants_ = function(
     theme) {
   this.FIELD_TEXT_FONTFAMILY =
       theme.fontStyle && theme.fontStyle['family'] != undefined ?
@@ -652,7 +653,7 @@ Blockly.blockRendering.ConstantProvider.prototype.setFontConstants_ = function(
  * @param {!Blockly.Theme} theme The current workspace theme.
  * @protected
  */
-Blockly.blockRendering.ConstantProvider.prototype.setComponentConstants_ =
+ConstantProvider.prototype.setComponentConstants_ =
     function(theme) {
     /* eslint-disable indent */
   this.CURSOR_COLOUR = theme.getComponentStyle('cursorColour') ||
@@ -675,7 +676,7 @@ Blockly.blockRendering.ConstantProvider.prototype.setComponentConstants_ =
  *     containing the style and an autogenerated name for that style.
  * @package
  */
-Blockly.blockRendering.ConstantProvider.prototype.getBlockStyleForColour =
+ConstantProvider.prototype.getBlockStyleForColour =
     function(colour) {
     /* eslint-disable indent */
   var name = 'auto_' + colour;
@@ -691,7 +692,7 @@ Blockly.blockRendering.ConstantProvider.prototype.getBlockStyleForColour =
  * @return {!Blockly.Theme.BlockStyle} The named block style, or a default style
  *     if no style with the given name was found.
  */
-Blockly.blockRendering.ConstantProvider.prototype.getBlockStyle = function(
+ConstantProvider.prototype.getBlockStyle = function(
     blockStyleName) {
   return this.blockStyles[blockStyleName || ''] ||
       (blockStyleName && blockStyleName.indexOf('auto_') == 0 ?
@@ -706,7 +707,7 @@ Blockly.blockRendering.ConstantProvider.prototype.getBlockStyle = function(
  *     given colour.
  * @protected
  */
-Blockly.blockRendering.ConstantProvider.prototype.createBlockStyle_ = function(
+ConstantProvider.prototype.createBlockStyle_ = function(
     colour) {
   return this.validatedBlockStyle_({
     'colourPrimary': colour
@@ -727,7 +728,7 @@ Blockly.blockRendering.ConstantProvider.prototype.createBlockStyle_ = function(
  *     required properties populated.
  * @protected
  */
-Blockly.blockRendering.ConstantProvider.prototype.validatedBlockStyle_ =
+ConstantProvider.prototype.validatedBlockStyle_ =
     function(blockStyle) {
     /* eslint-disable indent */
   // Make a new object with all of the same properties.
@@ -756,7 +757,7 @@ Blockly.blockRendering.ConstantProvider.prototype.validatedBlockStyle_ =
  * @return {string} The generated secondary colour.
  * @protected
  */
-Blockly.blockRendering.ConstantProvider.prototype.generateSecondaryColour_ =
+ConstantProvider.prototype.generateSecondaryColour_ =
     function(colour) {
     /* eslint-disable indent */
   return Blockly.utils.colour.blend('#fff', colour, 0.6) || colour;
@@ -768,7 +769,7 @@ Blockly.blockRendering.ConstantProvider.prototype.generateSecondaryColour_ =
  * @return {string} The generated tertiary colour.
  * @protected
  */
-Blockly.blockRendering.ConstantProvider.prototype.generateTertiaryColour_ =
+ConstantProvider.prototype.generateTertiaryColour_ =
     function(colour) {
     /* eslint-disable indent */
   return Blockly.utils.colour.blend('#fff', colour, 0.3) || colour;
@@ -780,7 +781,7 @@ Blockly.blockRendering.ConstantProvider.prototype.generateTertiaryColour_ =
  * Delete all DOM elements that this provider created.
  * @package
  */
-Blockly.blockRendering.ConstantProvider.prototype.dispose = function() {
+ConstantProvider.prototype.dispose = function() {
   if (this.embossFilter_) {
     Blockly.utils.dom.removeNode(this.embossFilter_);
   }
@@ -798,7 +799,7 @@ Blockly.blockRendering.ConstantProvider.prototype.dispose = function() {
  *     collapsed block indicators.
  * @package
  */
-Blockly.blockRendering.ConstantProvider.prototype.makeJaggedTeeth = function() {
+ConstantProvider.prototype.makeJaggedTeeth = function() {
   var height = this.JAGGED_TEETH_HEIGHT;
   var width = this.JAGGED_TEETH_WIDTH;
 
@@ -821,7 +822,7 @@ Blockly.blockRendering.ConstantProvider.prototype.makeJaggedTeeth = function() {
  *     start hats.
  * @package
  */
-Blockly.blockRendering.ConstantProvider.prototype.makeStartHat = function() {
+ConstantProvider.prototype.makeStartHat = function() {
   var height = this.START_HAT_HEIGHT;
   var width = this.START_HAT_WIDTH;
 
@@ -844,7 +845,7 @@ Blockly.blockRendering.ConstantProvider.prototype.makeStartHat = function() {
  *     puzzle tabs.
  * @package
  */
-Blockly.blockRendering.ConstantProvider.prototype.makePuzzleTab = function() {
+ConstantProvider.prototype.makePuzzleTab = function() {
   var width = this.TAB_WIDTH;
   var height = this.TAB_HEIGHT;
 
@@ -898,7 +899,7 @@ Blockly.blockRendering.ConstantProvider.prototype.makePuzzleTab = function() {
  *     notches.
  * @package
  */
-Blockly.blockRendering.ConstantProvider.prototype.makeNotch = function() {
+ConstantProvider.prototype.makeNotch = function() {
   var width = this.NOTCH_WIDTH;
   var height = this.NOTCH_HEIGHT;
   var innerWidth = 3;
@@ -928,7 +929,7 @@ Blockly.blockRendering.ConstantProvider.prototype.makeNotch = function() {
  *     inside corners.
  * @package
  */
-Blockly.blockRendering.ConstantProvider.prototype.makeInsideCorners = function() {
+ConstantProvider.prototype.makeInsideCorners = function() {
   var radius = this.CORNER_RADIUS;
 
   var innerTopLeftCorner = Blockly.utils.svgPaths.arc('a', '0 0,0', radius,
@@ -950,7 +951,7 @@ Blockly.blockRendering.ConstantProvider.prototype.makeInsideCorners = function()
  *     outside corners.
  * @package
  */
-Blockly.blockRendering.ConstantProvider.prototype.makeOutsideCorners = function() {
+ConstantProvider.prototype.makeOutsideCorners = function() {
   var radius = this.CORNER_RADIUS;
   /**
    * SVG path for drawing the rounded top-left corner.
@@ -1000,7 +1001,7 @@ Blockly.blockRendering.ConstantProvider.prototype.makeOutsideCorners = function(
  * @return {!Object} The shape object for the connection.
  * @package
  */
-Blockly.blockRendering.ConstantProvider.prototype.shapeFor = function(
+ConstantProvider.prototype.shapeFor = function(
     connection) {
   switch (connection.type) {
     case Blockly.connectionTypes.INPUT_VALUE:
@@ -1022,7 +1023,7 @@ Blockly.blockRendering.ConstantProvider.prototype.shapeFor = function(
  * @suppress {strictModuleDepCheck} Debug renderer only included in playground.
  * @package
  */
-Blockly.blockRendering.ConstantProvider.prototype.createDom = function(svg,
+ConstantProvider.prototype.createDom = function(svg,
     tagName, selector) {
   this.injectCSS_(tagName, selector);
 
@@ -1121,7 +1122,7 @@ Blockly.blockRendering.ConstantProvider.prototype.createDom = function(svg,
  * render debugging.
  * @private
  */
-Blockly.blockRendering.ConstantProvider.prototype.createDebugFilter =
+ConstantProvider.prototype.createDebugFilter =
     function() {
   // Only create the debug filter once.
   if (!this.debugFilter_) {
@@ -1166,7 +1167,7 @@ Blockly.blockRendering.ConstantProvider.prototype.createDebugFilter =
  * @param {string} selector The CSS selector to use.
  * @protected
  */
-Blockly.blockRendering.ConstantProvider.prototype.injectCSS_ = function(
+ConstantProvider.prototype.injectCSS_ = function(
     tagName, selector) {
   var cssArray = this.getCSS_(selector);
   var cssNodeId = 'blockly-renderer-style-' + tagName;
@@ -1194,7 +1195,7 @@ Blockly.blockRendering.ConstantProvider.prototype.injectCSS_ = function(
  * @return {!Array<string>} Array of CSS strings.
  * @protected
  */
-Blockly.blockRendering.ConstantProvider.prototype.getCSS_ = function(selector) {
+ConstantProvider.prototype.getCSS_ = function(selector) {
   return [
     /* eslint-disable indent */
     // Text.
@@ -1269,3 +1270,5 @@ Blockly.blockRendering.ConstantProvider.prototype.getCSS_ = function(selector) {
     /* eslint-enable indent */
   ];
 };
+
+exports = ConstantProvider;
diff --git a/tests/deps.js b/tests/deps.js
index de575339f..14992f734 100644
--- a/tests/deps.js
+++ b/tests/deps.js
@@ -120,7 +120,7 @@ goog.addDependency('../../core/procedures.js', ['Blockly.Procedures'], ['Blockly
 goog.addDependency('../../core/registry.js', ['Blockly.registry'], []);
 goog.addDependency('../../core/rendered_connection.js', ['Blockly.RenderedConnection'], ['Blockly.Connection', 'Blockly.connectionTypes', 'Blockly.internalConstants', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.Svg', 'Blockly.utils.deprecation', 'Blockly.utils.dom', 'Blockly.utils.object']);
 goog.addDependency('../../core/renderers/common/block_rendering.js', ['Blockly.blockRendering'], ['Blockly.registry']);
-goog.addDependency('../../core/renderers/common/constants.js', ['Blockly.blockRendering.ConstantProvider'], ['Blockly.connectionTypes', 'Blockly.utils', 'Blockly.utils.Svg', 'Blockly.utils.colour', 'Blockly.utils.dom', 'Blockly.utils.svgPaths', 'Blockly.utils.userAgent'], {'lang': 'es5'});
+goog.addDependency('../../core/renderers/common/constants.js', ['Blockly.blockRendering.ConstantProvider'], ['Blockly.connectionTypes', 'Blockly.utils', 'Blockly.utils.Svg', 'Blockly.utils.colour', 'Blockly.utils.dom', 'Blockly.utils.svgPaths', 'Blockly.utils.userAgent'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/renderers/common/debugger.js', ['Blockly.blockRendering.Debug'], ['Blockly.blockRendering.Measurable', 'Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.Row', 'Blockly.blockRendering.Types', 'Blockly.connectionTypes', 'Blockly.utils.Svg', 'Blockly.utils.dom'], {'lang': 'es5'});
 goog.addDependency('../../core/renderers/common/drawer.js', ['Blockly.blockRendering.Drawer'], ['Blockly.blockRendering.Row', 'Blockly.blockRendering.Types', 'Blockly.utils.svgPaths'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/renderers/common/i_path_object.js', ['Blockly.blockRendering.IPathObject'], []);

From 82c1d8c47ad70327dde017dfd1a13142109e679a Mon Sep 17 00:00:00 2001
From: Rachel Fenichel <fenichel@google.com>
Date: Fri, 23 Jul 2021 14:48:55 -0700
Subject: [PATCH 3/6] Migrate core/renderers/common/constants.js named requires

---
 core/renderers/common/constants.js | 207 ++++++++++++++---------------
 1 file changed, 103 insertions(+), 104 deletions(-)

diff --git a/core/renderers/common/constants.js b/core/renderers/common/constants.js
index 071b21e7d..4f64223d7 100644
--- a/core/renderers/common/constants.js
+++ b/core/renderers/common/constants.js
@@ -13,17 +13,17 @@
 goog.module('Blockly.blockRendering.ConstantProvider');
 goog.module.declareLegacyNamespace();
 
-goog.require('Blockly.connectionTypes');
-goog.require('Blockly.utils');
-goog.require('Blockly.utils.colour');
-goog.require('Blockly.utils.dom');
-goog.require('Blockly.utils.Svg');
-goog.require('Blockly.utils.svgPaths');
-goog.require('Blockly.utils.userAgent');
-
-goog.requireType('Blockly.blockRendering.Debug');
-goog.requireType('Blockly.RenderedConnection');
-goog.requireType('Blockly.Theme');
+/* eslint-disable-next-line no-unused-vars */
+const RenderedConnection = goog.requireType('Blockly.RenderedConnection');
+const Svg = goog.require('Blockly.utils.Svg');
+/* eslint-disable-next-line no-unused-vars */
+const Theme = goog.requireType('Blockly.Theme');
+const colour = goog.require('Blockly.utils.colour');
+const connectionTypes = goog.require('Blockly.connectionTypes');
+const dom = goog.require('Blockly.utils.dom');
+const svgPaths = goog.require('Blockly.utils.svgPaths');
+const userAgent = goog.require('Blockly.utils.userAgent');
+const utils = goog.require('Blockly.utils');
 
 
 /**
@@ -223,7 +223,7 @@ const ConstantProvider = function() {
    */
   this.EMPTY_STATEMENT_INPUT_HEIGHT = this.MIN_BLOCK_HEIGHT;
 
-  this.START_POINT = Blockly.utils.svgPaths.moveBy(0, 0);
+  this.START_POINT = svgPaths.moveBy(0, 0);
 
   /**
    * Height of SVG path for jagged teeth at the end of collapsed blocks.
@@ -305,7 +305,7 @@ const ConstantProvider = function() {
    * @type {boolean}
    */
   this.FIELD_TEXT_BASELINE_CENTER =
-      !Blockly.utils.userAgent.IE && !Blockly.utils.userAgent.EDGE;
+      !userAgent.IE && !userAgent.EDGE;
 
   /**
    * A dropdown field's border rect height.
@@ -586,7 +586,7 @@ ConstantProvider.prototype.init = function() {
 
 /**
  * Refresh constants properties that depend on the theme.
- * @param {!Blockly.Theme} theme The current workspace theme.
+ * @param {!Theme} theme The current workspace theme.
  * @package
  */
 ConstantProvider.prototype.setTheme = function(
@@ -594,7 +594,7 @@ ConstantProvider.prototype.setTheme = function(
 
   /**
    * The block styles map.
-   * @type {Object<string, !Blockly.Theme.BlockStyle>}
+   * @type {Object<string, !Theme.BlockStyle>}
    * @package
    */
   this.blockStyles = Object.create(null);
@@ -609,7 +609,7 @@ ConstantProvider.prototype.setTheme = function(
 
 /**
  * Sets dynamic properties that depend on other values or theme properties.
- * @param {!Blockly.Theme} theme The current workspace theme.
+ * @param {!Theme} theme The current workspace theme.
  * @protected
  */
 ConstantProvider.prototype.setDynamicProperties_ =
@@ -624,7 +624,7 @@ ConstantProvider.prototype.setDynamicProperties_ =
 
 /**
  * Set constants related to fonts.
- * @param {!Blockly.Theme} theme The current workspace theme.
+ * @param {!Theme} theme The current workspace theme.
  * @protected
  */
 ConstantProvider.prototype.setFontConstants_ = function(
@@ -639,7 +639,7 @@ ConstantProvider.prototype.setFontConstants_ = function(
       theme.fontStyle && theme.fontStyle['size'] != undefined ?
       theme.fontStyle['size'] : this.FIELD_TEXT_FONTSIZE;
 
-  var fontMetrics = Blockly.utils.dom.measureFontMetrics('Hg',
+  var fontMetrics = dom.measureFontMetrics('Hg',
       this.FIELD_TEXT_FONTSIZE + 'pt',
       this.FIELD_TEXT_FONTWEIGHT,
       this.FIELD_TEXT_FONTFAMILY);
@@ -650,7 +650,7 @@ ConstantProvider.prototype.setFontConstants_ = function(
 
 /**
  * Set constants from a theme's component styles.
- * @param {!Blockly.Theme} theme The current workspace theme.
+ * @param {!Theme} theme The current workspace theme.
  * @protected
  */
 ConstantProvider.prototype.setComponentConstants_ =
@@ -672,7 +672,7 @@ ConstantProvider.prototype.setComponentConstants_ =
  * Get or create a block style based on a single colour value.  Generate a name
  * for the style based on the colour.
  * @param {string} colour #RRGGBB colour string.
- * @return {{style: !Blockly.Theme.BlockStyle, name: string}} An object
+ * @return {{style: !Theme.BlockStyle, name: string}} An object
  *     containing the style and an autogenerated name for that style.
  * @package
  */
@@ -689,7 +689,7 @@ ConstantProvider.prototype.getBlockStyleForColour =
 /**
  * Gets the BlockStyle for the given block style name.
  * @param {?string} blockStyleName The name of the block style.
- * @return {!Blockly.Theme.BlockStyle} The named block style, or a default style
+ * @return {!Theme.BlockStyle} The named block style, or a default style
  *     if no style with the given name was found.
  */
 ConstantProvider.prototype.getBlockStyle = function(
@@ -703,7 +703,7 @@ ConstantProvider.prototype.getBlockStyle = function(
 /**
  * Create a block style object based on the given colour.
  * @param {string} colour #RRGGBB colour string.
- * @return {!Blockly.Theme.BlockStyle} A populated block style based on the
+ * @return {!Theme.BlockStyle} A populated block style based on the
  *     given colour.
  * @protected
  */
@@ -724,7 +724,7 @@ ConstantProvider.prototype.createBlockStyle_ = function(
  *     hat:(string|undefined)
  * }} blockStyle A full or partial block style object.
 
- * @return {!Blockly.Theme.BlockStyle} A full block style object, with all
+ * @return {!Theme.BlockStyle} A full block style object, with all
  *     required properties populated.
  * @protected
  */
@@ -732,19 +732,19 @@ ConstantProvider.prototype.validatedBlockStyle_ =
     function(blockStyle) {
     /* eslint-disable indent */
   // Make a new object with all of the same properties.
-  var valid = /** @type {!Blockly.Theme.BlockStyle} */ ({});
+  var valid = /** @type {!Theme.BlockStyle} */ ({});
   if (blockStyle) {
-    Blockly.utils.object.mixin(valid, blockStyle);
+    utils.object.mixin(valid, blockStyle);
   }
   // Validate required properties.
-  var parsedColour = Blockly.utils.parseBlockColour(
+  var parsedColour = utils.parseBlockColour(
       valid['colourPrimary'] || '#000');
   valid.colourPrimary = parsedColour.hex;
   valid.colourSecondary = valid['colourSecondary'] ?
-      Blockly.utils.parseBlockColour(valid['colourSecondary']).hex :
+      utils.parseBlockColour(valid['colourSecondary']).hex :
       this.generateSecondaryColour_(valid.colourPrimary);
   valid.colourTertiary = valid['colourTertiary'] ?
-      Blockly.utils.parseBlockColour(valid['colourTertiary']).hex :
+      utils.parseBlockColour(valid['colourTertiary']).hex :
       this.generateTertiaryColour_(valid.colourPrimary);
 
   valid.hat = valid['hat'] || '';
@@ -758,9 +758,9 @@ ConstantProvider.prototype.validatedBlockStyle_ =
  * @protected
  */
 ConstantProvider.prototype.generateSecondaryColour_ =
-    function(colour) {
+    function(inputColour) {
     /* eslint-disable indent */
-  return Blockly.utils.colour.blend('#fff', colour, 0.6) || colour;
+    return colour.blend('#fff', inputColour, 0.6) || inputColour;
 }; /* eslint-enable indent */
 
 /**
@@ -769,10 +769,9 @@ ConstantProvider.prototype.generateSecondaryColour_ =
  * @return {string} The generated tertiary colour.
  * @protected
  */
-ConstantProvider.prototype.generateTertiaryColour_ =
-    function(colour) {
-    /* eslint-disable indent */
-  return Blockly.utils.colour.blend('#fff', colour, 0.3) || colour;
+ConstantProvider.prototype.generateTertiaryColour_ = function(inputColour) {
+  /* eslint-disable indent */
+  return colour.blend('#fff', inputColour, 0.3) || inputColour;
 }; /* eslint-enable indent */
 
 
@@ -783,13 +782,13 @@ ConstantProvider.prototype.generateTertiaryColour_ =
  */
 ConstantProvider.prototype.dispose = function() {
   if (this.embossFilter_) {
-    Blockly.utils.dom.removeNode(this.embossFilter_);
+    dom.removeNode(this.embossFilter_);
   }
   if (this.disabledPattern_) {
-    Blockly.utils.dom.removeNode(this.disabledPattern_);
+    dom.removeNode(this.disabledPattern_);
   }
   if (this.debugFilter_) {
-    Blockly.utils.dom.removeNode(this.debugFilter_);
+    dom.removeNode(this.debugFilter_);
   }
   this.cssNode_ = null;
 };
@@ -804,11 +803,11 @@ ConstantProvider.prototype.makeJaggedTeeth = function() {
   var width = this.JAGGED_TEETH_WIDTH;
 
   var mainPath =
-      Blockly.utils.svgPaths.line(
+      svgPaths.line(
           [
-            Blockly.utils.svgPaths.point(width, height / 4),
-            Blockly.utils.svgPaths.point(-width * 2, height / 2),
-            Blockly.utils.svgPaths.point(width, height / 4)
+            svgPaths.point(width, height / 4),
+            svgPaths.point(-width * 2, height / 2),
+            svgPaths.point(width, height / 4)
           ]);
   return {
     height: height,
@@ -827,11 +826,11 @@ ConstantProvider.prototype.makeStartHat = function() {
   var width = this.START_HAT_WIDTH;
 
   var mainPath =
-      Blockly.utils.svgPaths.curve('c',
+      svgPaths.curve('c',
           [
-            Blockly.utils.svgPaths.point(30, -height),
-            Blockly.utils.svgPaths.point(70, -height),
-            Blockly.utils.svgPaths.point(width, 0)
+            svgPaths.point(30, -height),
+            svgPaths.point(70, -height),
+            svgPaths.point(width, 0)
           ]);
   return {
     height: height,
@@ -864,18 +863,18 @@ ConstantProvider.prototype.makePuzzleTab = function() {
     var control2Y = halfHeight + 0.5;
     var control3Y = overlap;  // 2.5
 
-    var endPoint1 = Blockly.utils.svgPaths.point(-width, forward * halfHeight);
-    var endPoint2 = Blockly.utils.svgPaths.point(width, forward * halfHeight);
+    var endPoint1 = svgPaths.point(-width, forward * halfHeight);
+    var endPoint2 = svgPaths.point(width, forward * halfHeight);
 
-    return Blockly.utils.svgPaths.curve('c',
+    return svgPaths.curve('c',
         [
-          Blockly.utils.svgPaths.point(0, forward * control1Y),
-          Blockly.utils.svgPaths.point(-width, back * control2Y),
+          svgPaths.point(0, forward * control1Y),
+          svgPaths.point(-width, back * control2Y),
           endPoint1
         ]) +
-        Blockly.utils.svgPaths.curve('s',
+        svgPaths.curve('s',
             [
-              Blockly.utils.svgPaths.point(width, back * control3Y),
+              svgPaths.point(width, back * control3Y),
               endPoint2
             ]);
   }
@@ -905,11 +904,11 @@ ConstantProvider.prototype.makeNotch = function() {
   var innerWidth = 3;
   var outerWidth = (width - innerWidth) / 2;
   function makeMainPath(dir) {
-    return Blockly.utils.svgPaths.line(
+    return svgPaths.line(
         [
-          Blockly.utils.svgPaths.point(dir * outerWidth, height),
-          Blockly.utils.svgPaths.point(dir * innerWidth, 0),
-          Blockly.utils.svgPaths.point(dir * outerWidth, -height)
+          svgPaths.point(dir * outerWidth, height),
+          svgPaths.point(dir * innerWidth, 0),
+          svgPaths.point(dir * outerWidth, -height)
         ]);
   }
   var pathLeft = makeMainPath(1);
@@ -932,11 +931,11 @@ ConstantProvider.prototype.makeNotch = function() {
 ConstantProvider.prototype.makeInsideCorners = function() {
   var radius = this.CORNER_RADIUS;
 
-  var innerTopLeftCorner = Blockly.utils.svgPaths.arc('a', '0 0,0', radius,
-      Blockly.utils.svgPaths.point(-radius, radius));
+  var innerTopLeftCorner = svgPaths.arc('a', '0 0,0', radius,
+      svgPaths.point(-radius, radius));
 
-  var innerBottomLeftCorner = Blockly.utils.svgPaths.arc('a', '0 0,0', radius,
-      Blockly.utils.svgPaths.point(radius, radius));
+  var innerBottomLeftCorner = svgPaths.arc('a', '0 0,0', radius,
+      svgPaths.point(radius, radius));
 
   return {
     width: radius,
@@ -958,31 +957,31 @@ ConstantProvider.prototype.makeOutsideCorners = function() {
    * @const
    */
   var topLeft =
-      Blockly.utils.svgPaths.moveBy(0, radius) +
-      Blockly.utils.svgPaths.arc('a', '0 0,1', radius,
-          Blockly.utils.svgPaths.point(radius, -radius));
+      svgPaths.moveBy(0, radius) +
+      svgPaths.arc('a', '0 0,1', radius,
+          svgPaths.point(radius, -radius));
 
   /**
    * SVG path for drawing the rounded top-right corner.
    * @const
    */
   var topRight =
-      Blockly.utils.svgPaths.arc('a', '0 0,1', radius,
-          Blockly.utils.svgPaths.point(radius, radius));
+      svgPaths.arc('a', '0 0,1', radius,
+          svgPaths.point(radius, radius));
 
   /**
    * SVG path for drawing the rounded bottom-left corner.
    * @const
    */
-  var bottomLeft = Blockly.utils.svgPaths.arc('a', '0 0,1', radius,
-      Blockly.utils.svgPaths.point(-radius, -radius));
+  var bottomLeft = svgPaths.arc('a', '0 0,1', radius,
+      svgPaths.point(-radius, -radius));
 
   /**
    * SVG path for drawing the rounded bottom-right corner.
    * @const
    */
-  var bottomRight = Blockly.utils.svgPaths.arc('a', '0 0,1', radius,
-      Blockly.utils.svgPaths.point(-radius, radius));
+  var bottomRight = svgPaths.arc('a', '0 0,1', radius,
+      svgPaths.point(-radius, radius));
 
   return {
     topLeft: topLeft,
@@ -996,7 +995,7 @@ ConstantProvider.prototype.makeOutsideCorners = function() {
 /**
  * Get an object with connection shape and sizing information based on the type
  * of the connection.
- * @param {!Blockly.RenderedConnection} connection The connection to find a
+ * @param {!RenderedConnection} connection The connection to find a
  *     shape object for
  * @return {!Object} The shape object for the connection.
  * @package
@@ -1004,11 +1003,11 @@ ConstantProvider.prototype.makeOutsideCorners = function() {
 ConstantProvider.prototype.shapeFor = function(
     connection) {
   switch (connection.type) {
-    case Blockly.connectionTypes.INPUT_VALUE:
-    case Blockly.connectionTypes.OUTPUT_VALUE:
+    case connectionTypes.INPUT_VALUE:
+    case connectionTypes.OUTPUT_VALUE:
       return this.PUZZLE_TAB;
-    case Blockly.connectionTypes.PREVIOUS_STATEMENT:
-    case Blockly.connectionTypes.NEXT_STATEMENT:
+    case connectionTypes.PREVIOUS_STATEMENT:
+    case connectionTypes.NEXT_STATEMENT:
       return this.NOTCH;
     default:
       throw Error('Unknown connection type');
@@ -1032,8 +1031,8 @@ ConstantProvider.prototype.createDom = function(svg,
     ... filters go here ...
   </defs>
   */
-  this.defs = Blockly.utils.dom.createSvgElement(
-      Blockly.utils.Svg.DEFS, {}, svg);
+  this.defs = dom.createSvgElement(
+      Svg.DEFS, {}, svg);
   /*
     <filter id="blocklyEmbossFilter837493">
       <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur" />
@@ -1048,14 +1047,14 @@ ConstantProvider.prototype.createDom = function(svg,
                    k1="0" k2="1" k3="1" k4="0" />
     </filter>
   */
-  var embossFilter = Blockly.utils.dom.createSvgElement(
-      Blockly.utils.Svg.FILTER,
+  var embossFilter = dom.createSvgElement(
+      Svg.FILTER,
       {'id': 'blocklyEmbossFilter' + this.randomIdentifier}, this.defs);
-  Blockly.utils.dom.createSvgElement(
-      Blockly.utils.Svg.FEGAUSSIANBLUR,
+  dom.createSvgElement(
+      Svg.FEGAUSSIANBLUR,
       {'in': 'SourceAlpha', 'stdDeviation': 1, 'result': 'blur'}, embossFilter);
-  var feSpecularLighting = Blockly.utils.dom.createSvgElement(
-      Blockly.utils.Svg.FESPECULARLIGHTING,
+  var feSpecularLighting = dom.createSvgElement(
+      Svg.FESPECULARLIGHTING,
       {
         'in': 'blur',
         'surfaceScale': 1,
@@ -1065,19 +1064,19 @@ ConstantProvider.prototype.createDom = function(svg,
         'result': 'specOut'
       },
       embossFilter);
-  Blockly.utils.dom.createSvgElement(
-      Blockly.utils.Svg.FEPOINTLIGHT,
+  dom.createSvgElement(
+      Svg.FEPOINTLIGHT,
       {'x': -5000, 'y': -10000, 'z': 20000}, feSpecularLighting);
-  Blockly.utils.dom.createSvgElement(
-      Blockly.utils.Svg.FECOMPOSITE,
+  dom.createSvgElement(
+      Svg.FECOMPOSITE,
       {
         'in': 'specOut',
         'in2': 'SourceAlpha',
         'operator': 'in',
         'result': 'specOut'
       }, embossFilter);
-  Blockly.utils.dom.createSvgElement(
-      Blockly.utils.Svg.FECOMPOSITE,
+  dom.createSvgElement(
+      Svg.FECOMPOSITE,
       {
         'in': 'SourceGraphic',
         'in2': 'specOut',
@@ -1097,19 +1096,19 @@ ConstantProvider.prototype.createDom = function(svg,
       <path d="M 0 0 L 10 10 M 10 0 L 0 10" stroke="#cc0" />
     </pattern>
   */
-  var disabledPattern = Blockly.utils.dom.createSvgElement(
-      Blockly.utils.Svg.PATTERN,
+  var disabledPattern = dom.createSvgElement(
+      Svg.PATTERN,
       {
         'id': 'blocklyDisabledPattern' + this.randomIdentifier,
         'patternUnits': 'userSpaceOnUse',
         'width': 10,
         'height': 10
       }, this.defs);
-  Blockly.utils.dom.createSvgElement(
-      Blockly.utils.Svg.RECT,
+  dom.createSvgElement(
+      Svg.RECT,
       {'width': 10, 'height': 10, 'fill': '#aaa'}, disabledPattern);
-  Blockly.utils.dom.createSvgElement(
-      Blockly.utils.Svg.PATH,
+  dom.createSvgElement(
+      Svg.PATH,
       {'d': 'M 0 0 L 10 10 M 10 0 L 0 10', 'stroke': '#cc0'}, disabledPattern);
   this.disabledPatternId = disabledPattern.id;
   this.disabledPattern_ = disabledPattern;
@@ -1126,8 +1125,8 @@ ConstantProvider.prototype.createDebugFilter =
     function() {
   // Only create the debug filter once.
   if (!this.debugFilter_) {
-    var debugFilter = Blockly.utils.dom.createSvgElement(
-        Blockly.utils.Svg.FILTER, {
+    var debugFilter = dom.createSvgElement(
+        Svg.FILTER, {
           'id': 'blocklyDebugFilter' + this.randomIdentifier,
           'height': '160%',
           'width': '180%',
@@ -1136,20 +1135,20 @@ ConstantProvider.prototype.createDebugFilter =
         },
         this.defs);
     // Set all gaussian blur pixels to 1 opacity before applying flood
-    var debugComponentTransfer = Blockly.utils.dom.createSvgElement(
-        Blockly.utils.Svg.FECOMPONENTTRANSFER, {'result': 'outBlur'},
+    var debugComponentTransfer = dom.createSvgElement(
+        Svg.FECOMPONENTTRANSFER, {'result': 'outBlur'},
         debugFilter);
-    Blockly.utils.dom.createSvgElement(
-        Blockly.utils.Svg.FEFUNCA,
+    dom.createSvgElement(
+        Svg.FEFUNCA,
         {'type': 'table', 'tableValues': '0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1'},
         debugComponentTransfer);
     // Color the highlight
-    Blockly.utils.dom.createSvgElement(
-        Blockly.utils.Svg.FEFLOOD,
+    dom.createSvgElement(
+        Svg.FEFLOOD,
         {'flood-color': '#ff0000', 'flood-opacity': 0.5, 'result': 'outColor'},
         debugFilter);
-    Blockly.utils.dom.createSvgElement(
-        Blockly.utils.Svg.FECOMPOSITE, {
+    dom.createSvgElement(
+        Svg.FECOMPOSITE, {
           'in': 'outColor',
           'in2': 'outBlur',
           'operator': 'in',

From 4aef7e3bcdc78d8f09c44253d48a3a5cfcd238ef Mon Sep 17 00:00:00 2001
From: Rachel Fenichel <fenichel@google.com>
Date: Fri, 23 Jul 2021 15:00:14 -0700
Subject: [PATCH 4/6] clang-format core/renderers/common/constants.js

---
 core/renderers/common/constants.js | 286 ++++++++++++-----------------
 1 file changed, 118 insertions(+), 168 deletions(-)

diff --git a/core/renderers/common/constants.js b/core/renderers/common/constants.js
index 4f64223d7..5fdacc2ea 100644
--- a/core/renderers/common/constants.js
+++ b/core/renderers/common/constants.js
@@ -32,7 +32,6 @@ const utils = goog.require('Blockly.utils');
  * @package
  */
 const ConstantProvider = function() {
-
   /**
    * The size of an empty spacer.
    * @type {number}
@@ -215,10 +214,10 @@ const ConstantProvider = function() {
   this.EXTERNAL_VALUE_INPUT_PADDING = 2;
 
   /**
-   * The height of an empty statement input.  Note that in the old rendering this
-   * varies slightly depending on whether the block has external or inline inputs.
-   * In the new rendering this is consistent.  It seems unlikely that the old
-   * behaviour was intentional.
+   * The height of an empty statement input.  Note that in the old rendering
+   * this varies slightly depending on whether the block has external or inline
+   * inputs. In the new rendering this is consistent.  It seems unlikely that
+   * the old behaviour was intentional.
    * @type {number}
    */
   this.EMPTY_STATEMENT_INPUT_HEIGHT = this.MIN_BLOCK_HEIGHT;
@@ -304,8 +303,7 @@ const ConstantProvider = function() {
    * A field's text element's dominant baseline.
    * @type {boolean}
    */
-  this.FIELD_TEXT_BASELINE_CENTER =
-      !userAgent.IE && !userAgent.EDGE;
+  this.FIELD_TEXT_BASELINE_CENTER = !userAgent.IE && !userAgent.EDGE;
 
   /**
    * A dropdown field's border rect height.
@@ -350,17 +348,17 @@ const ConstantProvider = function() {
    * @type {string}
    */
   this.FIELD_DROPDOWN_SVG_ARROW_DATAURI =
-    'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllci' +
-    'AxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaG' +
-    'VpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLW' +
-    'Fycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuND' +
-    'EsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTD' +
-    'AuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNz' +
-    'FDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMC' +
-    'wxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNz' +
-    'lhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYz' +
-    'AuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMz' +
-    'dBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=';
+      'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllci' +
+      'AxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaG' +
+      'VpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLW' +
+      'Fycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuND' +
+      'EsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTD' +
+      'AuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNz' +
+      'FDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMC' +
+      'wxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNz' +
+      'lhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYz' +
+      'AuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMz' +
+      'dBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=';
 
   /**
    * Whether or not to show a box shadow around the widget div. This is only a
@@ -534,10 +532,7 @@ const ConstantProvider = function() {
    * Enum for connection shapes.
    * @enum {number}
    */
-  this.SHAPES = {
-    PUZZLE: 1,
-    NOTCH: 2
-  };
+  this.SHAPES = {PUZZLE: 1, NOTCH: 2};
 };
 
 /**
@@ -545,7 +540,6 @@ const ConstantProvider = function() {
  * @package
  */
 ConstantProvider.prototype.init = function() {
-
   /**
    * An object containing sizing and path information about collapsed block
    * indicators.
@@ -589,9 +583,7 @@ ConstantProvider.prototype.init = function() {
  * @param {!Theme} theme The current workspace theme.
  * @package
  */
-ConstantProvider.prototype.setTheme = function(
-    theme) {
-
+ConstantProvider.prototype.setTheme = function(theme) {
   /**
    * The block styles map.
    * @type {Object<string, !Theme.BlockStyle>}
@@ -612,36 +604,35 @@ ConstantProvider.prototype.setTheme = function(
  * @param {!Theme} theme The current workspace theme.
  * @protected
  */
-ConstantProvider.prototype.setDynamicProperties_ =
-    function(theme) {
-    /* eslint-disable indent */
+ConstantProvider.prototype.setDynamicProperties_ = function(theme) {
   this.setFontConstants_(theme);
   this.setComponentConstants_(theme);
 
-  this.ADD_START_HATS = theme.startHats != null ? theme.startHats :
-      this.ADD_START_HATS;
-}; /* eslint-enable indent */
+  this.ADD_START_HATS =
+      theme.startHats != null ? theme.startHats : this.ADD_START_HATS;
+};
 
 /**
  * Set constants related to fonts.
  * @param {!Theme} theme The current workspace theme.
  * @protected
  */
-ConstantProvider.prototype.setFontConstants_ = function(
-    theme) {
+ConstantProvider.prototype.setFontConstants_ = function(theme) {
   this.FIELD_TEXT_FONTFAMILY =
       theme.fontStyle && theme.fontStyle['family'] != undefined ?
-      theme.fontStyle['family'] : this.FIELD_TEXT_FONTFAMILY;
+      theme.fontStyle['family'] :
+      this.FIELD_TEXT_FONTFAMILY;
   this.FIELD_TEXT_FONTWEIGHT =
       theme.fontStyle && theme.fontStyle['weight'] != undefined ?
-      theme.fontStyle['weight'] : this.FIELD_TEXT_FONTWEIGHT;
+      theme.fontStyle['weight'] :
+      this.FIELD_TEXT_FONTWEIGHT;
   this.FIELD_TEXT_FONTSIZE =
       theme.fontStyle && theme.fontStyle['size'] != undefined ?
-      theme.fontStyle['size'] : this.FIELD_TEXT_FONTSIZE;
+      theme.fontStyle['size'] :
+      this.FIELD_TEXT_FONTSIZE;
 
-  var fontMetrics = dom.measureFontMetrics('Hg',
-      this.FIELD_TEXT_FONTSIZE + 'pt',
-      this.FIELD_TEXT_FONTWEIGHT,
+  var fontMetrics = dom.measureFontMetrics(
+      'Hg', this.FIELD_TEXT_FONTSIZE + 'pt', this.FIELD_TEXT_FONTWEIGHT,
       this.FIELD_TEXT_FONTFAMILY);
 
   this.FIELD_TEXT_HEIGHT = fontMetrics.height;
@@ -653,20 +644,18 @@ ConstantProvider.prototype.setFontConstants_ = function(
  * @param {!Theme} theme The current workspace theme.
  * @protected
  */
-ConstantProvider.prototype.setComponentConstants_ =
-    function(theme) {
-    /* eslint-disable indent */
-  this.CURSOR_COLOUR = theme.getComponentStyle('cursorColour') ||
-    this.CURSOR_COLOUR;
-  this.MARKER_COLOUR = theme.getComponentStyle('markerColour') ||
-    this.MARKER_COLOUR;
+ConstantProvider.prototype.setComponentConstants_ = function(theme) {
+  this.CURSOR_COLOUR =
+      theme.getComponentStyle('cursorColour') || this.CURSOR_COLOUR;
+  this.MARKER_COLOUR =
+      theme.getComponentStyle('markerColour') || this.MARKER_COLOUR;
   this.INSERTION_MARKER_COLOUR =
-    theme.getComponentStyle('insertionMarkerColour') ||
-    this.INSERTION_MARKER_COLOUR;
+      theme.getComponentStyle('insertionMarkerColour') ||
+      this.INSERTION_MARKER_COLOUR;
   this.INSERTION_MARKER_OPACITY =
-    Number(theme.getComponentStyle('insertionMarkerOpacity')) ||
-    this.INSERTION_MARKER_OPACITY;
-}; /* eslint-enable indent */
+      Number(theme.getComponentStyle('insertionMarkerOpacity')) ||
+      this.INSERTION_MARKER_OPACITY;
+};
 
 /**
  * Get or create a block style based on a single colour value.  Generate a name
@@ -676,15 +665,13 @@ ConstantProvider.prototype.setComponentConstants_ =
  *     containing the style and an autogenerated name for that style.
  * @package
  */
-ConstantProvider.prototype.getBlockStyleForColour =
-    function(colour) {
-    /* eslint-disable indent */
+ConstantProvider.prototype.getBlockStyleForColour = function(colour) {
   var name = 'auto_' + colour;
   if (!this.blockStyles[name]) {
     this.blockStyles[name] = this.createBlockStyle_(colour);
   }
   return {style: this.blockStyles[name], name: name};
-}; /* eslint-enable indent */
+};
 
 /**
  * Gets the BlockStyle for the given block style name.
@@ -692,12 +679,11 @@ ConstantProvider.prototype.getBlockStyleForColour =
  * @return {!Theme.BlockStyle} The named block style, or a default style
  *     if no style with the given name was found.
  */
-ConstantProvider.prototype.getBlockStyle = function(
-    blockStyleName) {
+ConstantProvider.prototype.getBlockStyle = function(blockStyleName) {
   return this.blockStyles[blockStyleName || ''] ||
       (blockStyleName && blockStyleName.indexOf('auto_') == 0 ?
-        this.getBlockStyleForColour(blockStyleName.substring(5)).style :
-        this.createBlockStyle_('#000000'));
+           this.getBlockStyleForColour(blockStyleName.substring(5)).style :
+           this.createBlockStyle_('#000000'));
 };
 
 /**
@@ -707,11 +693,8 @@ ConstantProvider.prototype.getBlockStyle = function(
  *     given colour.
  * @protected
  */
-ConstantProvider.prototype.createBlockStyle_ = function(
-    colour) {
-  return this.validatedBlockStyle_({
-    'colourPrimary': colour
-  });
+ConstantProvider.prototype.createBlockStyle_ = function(colour) {
+  return this.validatedBlockStyle_({'colourPrimary': colour});
 };
 
 /**
@@ -728,17 +711,14 @@ ConstantProvider.prototype.createBlockStyle_ = function(
  *     required properties populated.
  * @protected
  */
-ConstantProvider.prototype.validatedBlockStyle_ =
-    function(blockStyle) {
-    /* eslint-disable indent */
+ConstantProvider.prototype.validatedBlockStyle_ = function(blockStyle) {
   // Make a new object with all of the same properties.
   var valid = /** @type {!Theme.BlockStyle} */ ({});
   if (blockStyle) {
     utils.object.mixin(valid, blockStyle);
   }
   // Validate required properties.
-  var parsedColour = utils.parseBlockColour(
-      valid['colourPrimary'] || '#000');
+  var parsedColour = utils.parseBlockColour(valid['colourPrimary'] || '#000');
   valid.colourPrimary = parsedColour.hex;
   valid.colourSecondary = valid['colourSecondary'] ?
       utils.parseBlockColour(valid['colourSecondary']).hex :
@@ -749,30 +729,27 @@ ConstantProvider.prototype.validatedBlockStyle_ =
 
   valid.hat = valid['hat'] || '';
   return valid;
-}; /* eslint-enable indent */
+};
 
 /**
  * Generate a secondary colour from the passed in primary colour.
- * @param {string} colour Primary colour.
+ * @param {string} inputColour Primary colour.
  * @return {string} The generated secondary colour.
  * @protected
  */
-ConstantProvider.prototype.generateSecondaryColour_ =
-    function(inputColour) {
-    /* eslint-disable indent */
-    return colour.blend('#fff', inputColour, 0.6) || inputColour;
-}; /* eslint-enable indent */
+ConstantProvider.prototype.generateSecondaryColour_ = function(inputColour) {
+  return colour.blend('#fff', inputColour, 0.6) || inputColour;
+};
 
 /**
  * Generate a tertiary colour from the passed in primary colour.
- * @param {string} colour Primary colour.
+ * @param {string} inputColour Primary colour.
  * @return {string} The generated tertiary colour.
  * @protected
  */
 ConstantProvider.prototype.generateTertiaryColour_ = function(inputColour) {
-  /* eslint-disable indent */
   return colour.blend('#fff', inputColour, 0.3) || inputColour;
-}; /* eslint-enable indent */
+};
 
 
 /**
@@ -802,18 +779,11 @@ ConstantProvider.prototype.makeJaggedTeeth = function() {
   var height = this.JAGGED_TEETH_HEIGHT;
   var width = this.JAGGED_TEETH_WIDTH;
 
-  var mainPath =
-      svgPaths.line(
-          [
-            svgPaths.point(width, height / 4),
-            svgPaths.point(-width * 2, height / 2),
-            svgPaths.point(width, height / 4)
-          ]);
-  return {
-    height: height,
-    width: width,
-    path: mainPath
-  };
+  var mainPath = svgPaths.line([
+    svgPaths.point(width, height / 4), svgPaths.point(-width * 2, height / 2),
+    svgPaths.point(width, height / 4)
+  ]);
+  return {height: height, width: width, path: mainPath};
 };
 
 /**
@@ -825,18 +795,11 @@ ConstantProvider.prototype.makeStartHat = function() {
   var height = this.START_HAT_HEIGHT;
   var width = this.START_HAT_WIDTH;
 
-  var mainPath =
-      svgPaths.curve('c',
-          [
-            svgPaths.point(30, -height),
-            svgPaths.point(70, -height),
-            svgPaths.point(width, 0)
-          ]);
-  return {
-    height: height,
-    width: width,
-    path: mainPath
-  };
+  var mainPath = svgPaths.curve('c', [
+    svgPaths.point(30, -height), svgPaths.point(70, -height),
+    svgPaths.point(width, 0)
+  ]);
+  return {height: height, width: width, path: mainPath};
 };
 
 /**
@@ -866,17 +829,14 @@ ConstantProvider.prototype.makePuzzleTab = function() {
     var endPoint1 = svgPaths.point(-width, forward * halfHeight);
     var endPoint2 = svgPaths.point(width, forward * halfHeight);
 
-    return svgPaths.curve('c',
-        [
-          svgPaths.point(0, forward * control1Y),
-          svgPaths.point(-width, back * control2Y),
-          endPoint1
-        ]) +
-        svgPaths.curve('s',
-            [
-              svgPaths.point(width, back * control3Y),
-              endPoint2
-            ]);
+    return svgPaths.curve(
+               'c',
+               [
+                 svgPaths.point(0, forward * control1Y),
+                 svgPaths.point(-width, back * control2Y), endPoint1
+               ]) +
+        svgPaths.curve(
+            's', [svgPaths.point(width, back * control3Y), endPoint2]);
   }
 
   // c 0,-10  -8,8  -8,-7.5  s 8,2.5  8,-7.5
@@ -904,12 +864,11 @@ ConstantProvider.prototype.makeNotch = function() {
   var innerWidth = 3;
   var outerWidth = (width - innerWidth) / 2;
   function makeMainPath(dir) {
-    return svgPaths.line(
-        [
-          svgPaths.point(dir * outerWidth, height),
-          svgPaths.point(dir * innerWidth, 0),
-          svgPaths.point(dir * outerWidth, -height)
-        ]);
+    return svgPaths.line([
+      svgPaths.point(dir * outerWidth, height),
+      svgPaths.point(dir * innerWidth, 0),
+      svgPaths.point(dir * outerWidth, -height)
+    ]);
   }
   var pathLeft = makeMainPath(1);
   var pathRight = makeMainPath(-1);
@@ -931,11 +890,11 @@ ConstantProvider.prototype.makeNotch = function() {
 ConstantProvider.prototype.makeInsideCorners = function() {
   var radius = this.CORNER_RADIUS;
 
-  var innerTopLeftCorner = svgPaths.arc('a', '0 0,0', radius,
-      svgPaths.point(-radius, radius));
+  var innerTopLeftCorner =
+      svgPaths.arc('a', '0 0,0', radius, svgPaths.point(-radius, radius));
 
-  var innerBottomLeftCorner = svgPaths.arc('a', '0 0,0', radius,
-      svgPaths.point(radius, radius));
+  var innerBottomLeftCorner =
+      svgPaths.arc('a', '0 0,0', radius, svgPaths.point(radius, radius));
 
   return {
     width: radius,
@@ -956,32 +915,29 @@ ConstantProvider.prototype.makeOutsideCorners = function() {
    * SVG path for drawing the rounded top-left corner.
    * @const
    */
-  var topLeft =
-      svgPaths.moveBy(0, radius) +
-      svgPaths.arc('a', '0 0,1', radius,
-          svgPaths.point(radius, -radius));
+  var topLeft = svgPaths.moveBy(0, radius) +
+      svgPaths.arc('a', '0 0,1', radius, svgPaths.point(radius, -radius));
 
   /**
    * SVG path for drawing the rounded top-right corner.
    * @const
    */
   var topRight =
-      svgPaths.arc('a', '0 0,1', radius,
-          svgPaths.point(radius, radius));
+      svgPaths.arc('a', '0 0,1', radius, svgPaths.point(radius, radius));
 
   /**
    * SVG path for drawing the rounded bottom-left corner.
    * @const
    */
-  var bottomLeft = svgPaths.arc('a', '0 0,1', radius,
-      svgPaths.point(-radius, -radius));
+  var bottomLeft =
+      svgPaths.arc('a', '0 0,1', radius, svgPaths.point(-radius, -radius));
 
   /**
    * SVG path for drawing the rounded bottom-right corner.
    * @const
    */
-  var bottomRight = svgPaths.arc('a', '0 0,1', radius,
-      svgPaths.point(-radius, radius));
+  var bottomRight =
+      svgPaths.arc('a', '0 0,1', radius, svgPaths.point(-radius, radius));
 
   return {
     topLeft: topLeft,
@@ -1000,8 +956,7 @@ ConstantProvider.prototype.makeOutsideCorners = function() {
  * @return {!Object} The shape object for the connection.
  * @package
  */
-ConstantProvider.prototype.shapeFor = function(
-    connection) {
+ConstantProvider.prototype.shapeFor = function(connection) {
   switch (connection.type) {
     case connectionTypes.INPUT_VALUE:
     case connectionTypes.OUTPUT_VALUE:
@@ -1022,8 +977,7 @@ ConstantProvider.prototype.shapeFor = function(
  * @suppress {strictModuleDepCheck} Debug renderer only included in playground.
  * @package
  */
-ConstantProvider.prototype.createDom = function(svg,
-    tagName, selector) {
+ConstantProvider.prototype.createDom = function(svg, tagName, selector) {
   this.injectCSS_(tagName, selector);
 
   /*
@@ -1031,8 +985,7 @@ ConstantProvider.prototype.createDom = function(svg,
     ... filters go here ...
   </defs>
   */
-  this.defs = dom.createSvgElement(
-      Svg.DEFS, {}, svg);
+  this.defs = dom.createSvgElement(Svg.DEFS, {}, svg);
   /*
     <filter id="blocklyEmbossFilter837493">
       <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur" />
@@ -1048,14 +1001,13 @@ ConstantProvider.prototype.createDom = function(svg,
     </filter>
   */
   var embossFilter = dom.createSvgElement(
-      Svg.FILTER,
-      {'id': 'blocklyEmbossFilter' + this.randomIdentifier}, this.defs);
+      Svg.FILTER, {'id': 'blocklyEmbossFilter' + this.randomIdentifier},
+      this.defs);
   dom.createSvgElement(
       Svg.FEGAUSSIANBLUR,
       {'in': 'SourceAlpha', 'stdDeviation': 1, 'result': 'blur'}, embossFilter);
   var feSpecularLighting = dom.createSvgElement(
-      Svg.FESPECULARLIGHTING,
-      {
+      Svg.FESPECULARLIGHTING, {
         'in': 'blur',
         'surfaceScale': 1,
         'specularConstant': 0.5,
@@ -1065,19 +1017,18 @@ ConstantProvider.prototype.createDom = function(svg,
       },
       embossFilter);
   dom.createSvgElement(
-      Svg.FEPOINTLIGHT,
-      {'x': -5000, 'y': -10000, 'z': 20000}, feSpecularLighting);
+      Svg.FEPOINTLIGHT, {'x': -5000, 'y': -10000, 'z': 20000},
+      feSpecularLighting);
   dom.createSvgElement(
-      Svg.FECOMPOSITE,
-      {
+      Svg.FECOMPOSITE, {
         'in': 'specOut',
         'in2': 'SourceAlpha',
         'operator': 'in',
         'result': 'specOut'
-      }, embossFilter);
+      },
+      embossFilter);
   dom.createSvgElement(
-      Svg.FECOMPOSITE,
-      {
+      Svg.FECOMPOSITE, {
         'in': 'SourceGraphic',
         'in2': 'specOut',
         'operator': 'arithmetic',
@@ -1085,7 +1036,8 @@ ConstantProvider.prototype.createDom = function(svg,
         'k2': 1,
         'k3': 1,
         'k4': 0
-      }, embossFilter);
+      },
+      embossFilter);
   this.embossFilterId = embossFilter.id;
   this.embossFilter_ = embossFilter;
 
@@ -1097,19 +1049,18 @@ ConstantProvider.prototype.createDom = function(svg,
     </pattern>
   */
   var disabledPattern = dom.createSvgElement(
-      Svg.PATTERN,
-      {
+      Svg.PATTERN, {
         'id': 'blocklyDisabledPattern' + this.randomIdentifier,
         'patternUnits': 'userSpaceOnUse',
         'width': 10,
         'height': 10
-      }, this.defs);
+      },
+      this.defs);
   dom.createSvgElement(
-      Svg.RECT,
-      {'width': 10, 'height': 10, 'fill': '#aaa'}, disabledPattern);
+      Svg.RECT, {'width': 10, 'height': 10, 'fill': '#aaa'}, disabledPattern);
   dom.createSvgElement(
-      Svg.PATH,
-      {'d': 'M 0 0 L 10 10 M 10 0 L 0 10', 'stroke': '#cc0'}, disabledPattern);
+      Svg.PATH, {'d': 'M 0 0 L 10 10 M 10 0 L 0 10', 'stroke': '#cc0'},
+      disabledPattern);
   this.disabledPatternId = disabledPattern.id;
   this.disabledPattern_ = disabledPattern;
 
@@ -1121,8 +1072,7 @@ ConstantProvider.prototype.createDom = function(svg,
  * render debugging.
  * @private
  */
-ConstantProvider.prototype.createDebugFilter =
-    function() {
+ConstantProvider.prototype.createDebugFilter = function() {
   // Only create the debug filter once.
   if (!this.debugFilter_) {
     var debugFilter = dom.createSvgElement(
@@ -1136,8 +1086,7 @@ ConstantProvider.prototype.createDebugFilter =
         this.defs);
     // Set all gaussian blur pixels to 1 opacity before applying flood
     var debugComponentTransfer = dom.createSvgElement(
-        Svg.FECOMPONENTTRANSFER, {'result': 'outBlur'},
-        debugFilter);
+        Svg.FECOMPONENTTRANSFER, {'result': 'outBlur'}, debugFilter);
     dom.createSvgElement(
         Svg.FEFUNCA,
         {'type': 'table', 'tableValues': '0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1'},
@@ -1166,12 +1115,11 @@ ConstantProvider.prototype.createDebugFilter =
  * @param {string} selector The CSS selector to use.
  * @protected
  */
-ConstantProvider.prototype.injectCSS_ = function(
-    tagName, selector) {
+ConstantProvider.prototype.injectCSS_ = function(tagName, selector) {
   var cssArray = this.getCSS_(selector);
   var cssNodeId = 'blockly-renderer-style-' + tagName;
   this.cssNode_ =
-    /** @type {!HTMLStyleElement} */ (document.getElementById(cssNodeId));
+      /** @type {!HTMLStyleElement} */ (document.getElementById(cssNodeId));
   var text = cssArray.join('\n');
   if (this.cssNode_) {
     // Already injected, update if the theme changed.
@@ -1180,7 +1128,7 @@ ConstantProvider.prototype.injectCSS_ = function(
   }
   // Inject CSS tag at start of head.
   var cssNode =
-    /** @type {!HTMLStyleElement} */ (document.createElement('style'));
+      /** @type {!HTMLStyleElement} */ (document.createElement('style'));
   cssNode.id = cssNodeId;
   var cssTextNode = document.createTextNode(text);
   cssNode.appendChild(cssTextNode);
@@ -1197,6 +1145,7 @@ ConstantProvider.prototype.injectCSS_ = function(
 ConstantProvider.prototype.getCSS_ = function(selector) {
   return [
     /* eslint-disable indent */
+    /* clang-format off */
     // Text.
     selector + ' .blocklyText, ',
     selector + ' .blocklyFlyoutLabelText {',
@@ -1266,6 +1215,7 @@ ConstantProvider.prototype.getCSS_ = function(selector) {
       'fill-opacity: ' + this.INSERTION_MARKER_OPACITY + ';',
       'stroke: none;',
     '}',
+    /* clang-format on */
     /* eslint-enable indent */
   ];
 };

From a392696c7a633f0e4d88fa2db42977ca39ce413b Mon Sep 17 00:00:00 2001
From: Rachel Fenichel <fenichel@google.com>
Date: Fri, 23 Jul 2021 15:07:30 -0700
Subject: [PATCH 5/6] Convert core/renderers/common/constants.js to const/let

---
 core/renderers/common/constants.js | 98 +++++++++++++++---------------
 1 file changed, 49 insertions(+), 49 deletions(-)

diff --git a/core/renderers/common/constants.js b/core/renderers/common/constants.js
index 5fdacc2ea..6847aea22 100644
--- a/core/renderers/common/constants.js
+++ b/core/renderers/common/constants.js
@@ -591,8 +591,8 @@ ConstantProvider.prototype.setTheme = function(theme) {
    */
   this.blockStyles = Object.create(null);
 
-  var blockStyles = theme.blockStyles;
-  for (var key in blockStyles) {
+  const blockStyles = theme.blockStyles;
+  for (const key in blockStyles) {
     this.blockStyles[key] = this.validatedBlockStyle_(blockStyles[key]);
   }
 
@@ -631,7 +631,7 @@ ConstantProvider.prototype.setFontConstants_ = function(theme) {
       theme.fontStyle['size'] :
       this.FIELD_TEXT_FONTSIZE;
 
-  var fontMetrics = dom.measureFontMetrics(
+  const fontMetrics = dom.measureFontMetrics(
       'Hg', this.FIELD_TEXT_FONTSIZE + 'pt', this.FIELD_TEXT_FONTWEIGHT,
       this.FIELD_TEXT_FONTFAMILY);
 
@@ -666,7 +666,7 @@ ConstantProvider.prototype.setComponentConstants_ = function(theme) {
  * @package
  */
 ConstantProvider.prototype.getBlockStyleForColour = function(colour) {
-  var name = 'auto_' + colour;
+  const name = 'auto_' + colour;
   if (!this.blockStyles[name]) {
     this.blockStyles[name] = this.createBlockStyle_(colour);
   }
@@ -713,12 +713,12 @@ ConstantProvider.prototype.createBlockStyle_ = function(colour) {
  */
 ConstantProvider.prototype.validatedBlockStyle_ = function(blockStyle) {
   // Make a new object with all of the same properties.
-  var valid = /** @type {!Theme.BlockStyle} */ ({});
+  const valid = /** @type {!Theme.BlockStyle} */ ({});
   if (blockStyle) {
     utils.object.mixin(valid, blockStyle);
   }
   // Validate required properties.
-  var parsedColour = utils.parseBlockColour(valid['colourPrimary'] || '#000');
+  const parsedColour = utils.parseBlockColour(valid['colourPrimary'] || '#000');
   valid.colourPrimary = parsedColour.hex;
   valid.colourSecondary = valid['colourSecondary'] ?
       utils.parseBlockColour(valid['colourSecondary']).hex :
@@ -776,10 +776,10 @@ ConstantProvider.prototype.dispose = function() {
  * @package
  */
 ConstantProvider.prototype.makeJaggedTeeth = function() {
-  var height = this.JAGGED_TEETH_HEIGHT;
-  var width = this.JAGGED_TEETH_WIDTH;
+  const height = this.JAGGED_TEETH_HEIGHT;
+  const width = this.JAGGED_TEETH_WIDTH;
 
-  var mainPath = svgPaths.line([
+  const mainPath = svgPaths.line([
     svgPaths.point(width, height / 4), svgPaths.point(-width * 2, height / 2),
     svgPaths.point(width, height / 4)
   ]);
@@ -792,10 +792,10 @@ ConstantProvider.prototype.makeJaggedTeeth = function() {
  * @package
  */
 ConstantProvider.prototype.makeStartHat = function() {
-  var height = this.START_HAT_HEIGHT;
-  var width = this.START_HAT_WIDTH;
+  const height = this.START_HAT_HEIGHT;
+  const width = this.START_HAT_WIDTH;
 
-  var mainPath = svgPaths.curve('c', [
+  const mainPath = svgPaths.curve('c', [
     svgPaths.point(30, -height), svgPaths.point(70, -height),
     svgPaths.point(width, 0)
   ]);
@@ -808,8 +808,8 @@ ConstantProvider.prototype.makeStartHat = function() {
  * @package
  */
 ConstantProvider.prototype.makePuzzleTab = function() {
-  var width = this.TAB_WIDTH;
-  var height = this.TAB_HEIGHT;
+  const width = this.TAB_WIDTH;
+  const height = this.TAB_HEIGHT;
 
   // The main path for the puzzle tab is made out of a few curves (c and s).
   // Those curves are defined with relative positions.  The 'up' and 'down'
@@ -817,17 +817,17 @@ ConstantProvider.prototype.makePuzzleTab = function() {
   // are the signs to use to move the cursor in the direction that the path is
   // being drawn.
   function makeMainPath(up) {
-    var forward = up ? -1 : 1;
-    var back = -forward;
+    const forward = up ? -1 : 1;
+    const back = -forward;
 
-    var overlap = 2.5;
-    var halfHeight = height / 2;
-    var control1Y = halfHeight + overlap;
-    var control2Y = halfHeight + 0.5;
-    var control3Y = overlap;  // 2.5
+    const overlap = 2.5;
+    const halfHeight = height / 2;
+    const control1Y = halfHeight + overlap;
+    const control2Y = halfHeight + 0.5;
+    const control3Y = overlap;  // 2.5
 
-    var endPoint1 = svgPaths.point(-width, forward * halfHeight);
-    var endPoint2 = svgPaths.point(width, forward * halfHeight);
+    const endPoint1 = svgPaths.point(-width, forward * halfHeight);
+    const endPoint2 = svgPaths.point(width, forward * halfHeight);
 
     return svgPaths.curve(
                'c',
@@ -840,9 +840,9 @@ ConstantProvider.prototype.makePuzzleTab = function() {
   }
 
   // c 0,-10  -8,8  -8,-7.5  s 8,2.5  8,-7.5
-  var pathUp = makeMainPath(true);
+  const pathUp = makeMainPath(true);
   // c 0,10  -8,-8  -8,7.5  s 8,-2.5  8,7.5
-  var pathDown = makeMainPath(false);
+  const pathDown = makeMainPath(false);
 
   return {
     type: this.SHAPES.PUZZLE,
@@ -859,10 +859,10 @@ ConstantProvider.prototype.makePuzzleTab = function() {
  * @package
  */
 ConstantProvider.prototype.makeNotch = function() {
-  var width = this.NOTCH_WIDTH;
-  var height = this.NOTCH_HEIGHT;
-  var innerWidth = 3;
-  var outerWidth = (width - innerWidth) / 2;
+  const width = this.NOTCH_WIDTH;
+  const height = this.NOTCH_HEIGHT;
+  const innerWidth = 3;
+  const outerWidth = (width - innerWidth) / 2;
   function makeMainPath(dir) {
     return svgPaths.line([
       svgPaths.point(dir * outerWidth, height),
@@ -870,8 +870,8 @@ ConstantProvider.prototype.makeNotch = function() {
       svgPaths.point(dir * outerWidth, -height)
     ]);
   }
-  var pathLeft = makeMainPath(1);
-  var pathRight = makeMainPath(-1);
+  const pathLeft = makeMainPath(1);
+  const pathRight = makeMainPath(-1);
 
   return {
     type: this.SHAPES.NOTCH,
@@ -888,12 +888,12 @@ ConstantProvider.prototype.makeNotch = function() {
  * @package
  */
 ConstantProvider.prototype.makeInsideCorners = function() {
-  var radius = this.CORNER_RADIUS;
+  const radius = this.CORNER_RADIUS;
 
-  var innerTopLeftCorner =
+  const innerTopLeftCorner =
       svgPaths.arc('a', '0 0,0', radius, svgPaths.point(-radius, radius));
 
-  var innerBottomLeftCorner =
+  const innerBottomLeftCorner =
       svgPaths.arc('a', '0 0,0', radius, svgPaths.point(radius, radius));
 
   return {
@@ -910,33 +910,33 @@ ConstantProvider.prototype.makeInsideCorners = function() {
  * @package
  */
 ConstantProvider.prototype.makeOutsideCorners = function() {
-  var radius = this.CORNER_RADIUS;
+  const radius = this.CORNER_RADIUS;
   /**
    * SVG path for drawing the rounded top-left corner.
    * @const
    */
-  var topLeft = svgPaths.moveBy(0, radius) +
+  const topLeft = svgPaths.moveBy(0, radius) +
       svgPaths.arc('a', '0 0,1', radius, svgPaths.point(radius, -radius));
 
   /**
    * SVG path for drawing the rounded top-right corner.
    * @const
    */
-  var topRight =
+  const topRight =
       svgPaths.arc('a', '0 0,1', radius, svgPaths.point(radius, radius));
 
   /**
    * SVG path for drawing the rounded bottom-left corner.
    * @const
    */
-  var bottomLeft =
+  const bottomLeft =
       svgPaths.arc('a', '0 0,1', radius, svgPaths.point(-radius, -radius));
 
   /**
    * SVG path for drawing the rounded bottom-right corner.
    * @const
    */
-  var bottomRight =
+  const bottomRight =
       svgPaths.arc('a', '0 0,1', radius, svgPaths.point(-radius, radius));
 
   return {
@@ -1000,13 +1000,13 @@ ConstantProvider.prototype.createDom = function(svg, tagName, selector) {
                    k1="0" k2="1" k3="1" k4="0" />
     </filter>
   */
-  var embossFilter = dom.createSvgElement(
+  const embossFilter = dom.createSvgElement(
       Svg.FILTER, {'id': 'blocklyEmbossFilter' + this.randomIdentifier},
       this.defs);
   dom.createSvgElement(
       Svg.FEGAUSSIANBLUR,
       {'in': 'SourceAlpha', 'stdDeviation': 1, 'result': 'blur'}, embossFilter);
-  var feSpecularLighting = dom.createSvgElement(
+  const feSpecularLighting = dom.createSvgElement(
       Svg.FESPECULARLIGHTING, {
         'in': 'blur',
         'surfaceScale': 1,
@@ -1048,7 +1048,7 @@ ConstantProvider.prototype.createDom = function(svg, tagName, selector) {
       <path d="M 0 0 L 10 10 M 10 0 L 0 10" stroke="#cc0" />
     </pattern>
   */
-  var disabledPattern = dom.createSvgElement(
+  const disabledPattern = dom.createSvgElement(
       Svg.PATTERN, {
         'id': 'blocklyDisabledPattern' + this.randomIdentifier,
         'patternUnits': 'userSpaceOnUse',
@@ -1075,7 +1075,7 @@ ConstantProvider.prototype.createDom = function(svg, tagName, selector) {
 ConstantProvider.prototype.createDebugFilter = function() {
   // Only create the debug filter once.
   if (!this.debugFilter_) {
-    var debugFilter = dom.createSvgElement(
+    const debugFilter = dom.createSvgElement(
         Svg.FILTER, {
           'id': 'blocklyDebugFilter' + this.randomIdentifier,
           'height': '160%',
@@ -1085,7 +1085,7 @@ ConstantProvider.prototype.createDebugFilter = function() {
         },
         this.defs);
     // Set all gaussian blur pixels to 1 opacity before applying flood
-    var debugComponentTransfer = dom.createSvgElement(
+    const debugComponentTransfer = dom.createSvgElement(
         Svg.FECOMPONENTTRANSFER, {'result': 'outBlur'}, debugFilter);
     dom.createSvgElement(
         Svg.FEFUNCA,
@@ -1116,21 +1116,21 @@ ConstantProvider.prototype.createDebugFilter = function() {
  * @protected
  */
 ConstantProvider.prototype.injectCSS_ = function(tagName, selector) {
-  var cssArray = this.getCSS_(selector);
-  var cssNodeId = 'blockly-renderer-style-' + tagName;
+  const cssArray = this.getCSS_(selector);
+  const cssNodeId = 'blockly-renderer-style-' + tagName;
   this.cssNode_ =
       /** @type {!HTMLStyleElement} */ (document.getElementById(cssNodeId));
-  var text = cssArray.join('\n');
+  const text = cssArray.join('\n');
   if (this.cssNode_) {
     // Already injected, update if the theme changed.
     this.cssNode_.firstChild.textContent = text;
     return;
   }
   // Inject CSS tag at start of head.
-  var cssNode =
+  const cssNode =
       /** @type {!HTMLStyleElement} */ (document.createElement('style'));
   cssNode.id = cssNodeId;
-  var cssTextNode = document.createTextNode(text);
+  const cssTextNode = document.createTextNode(text);
   cssNode.appendChild(cssTextNode);
   document.head.insertBefore(cssNode, document.head.firstChild);
   this.cssNode_ = cssNode;

From 1dfee3a722a6f542700a5d980440e6c091418bcd Mon Sep 17 00:00:00 2001
From: Rachel Fenichel <fenichel@google.com>
Date: Fri, 23 Jul 2021 16:39:40 -0700
Subject: [PATCH 6/6] Make defs private and add nullability

---
 core/renderers/common/constants.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/core/renderers/common/constants.js b/core/renderers/common/constants.js
index 6847aea22..5e5ecb747 100644
--- a/core/renderers/common/constants.js
+++ b/core/renderers/common/constants.js
@@ -403,10 +403,10 @@ const ConstantProvider = function() {
   /**
    * The defs tag that contains all filters and patterns for this Blockly
    * instance.
-   * @type {SVGElement}
+   * @type {?SVGElement}
    * @private
    */
-  this.defs = null;
+  this.defs_ = null;
 
   /**
    * The ID of the emboss filter, or the empty string if no filter is set.
@@ -985,7 +985,7 @@ ConstantProvider.prototype.createDom = function(svg, tagName, selector) {
     ... filters go here ...
   </defs>
   */
-  this.defs = dom.createSvgElement(Svg.DEFS, {}, svg);
+  this.defs_ = dom.createSvgElement(Svg.DEFS, {}, svg);
   /*
     <filter id="blocklyEmbossFilter837493">
       <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur" />
@@ -1002,7 +1002,7 @@ ConstantProvider.prototype.createDom = function(svg, tagName, selector) {
   */
   const embossFilter = dom.createSvgElement(
       Svg.FILTER, {'id': 'blocklyEmbossFilter' + this.randomIdentifier},
-      this.defs);
+      this.defs_);
   dom.createSvgElement(
       Svg.FEGAUSSIANBLUR,
       {'in': 'SourceAlpha', 'stdDeviation': 1, 'result': 'blur'}, embossFilter);
@@ -1055,7 +1055,7 @@ ConstantProvider.prototype.createDom = function(svg, tagName, selector) {
         'width': 10,
         'height': 10
       },
-      this.defs);
+      this.defs_);
   dom.createSvgElement(
       Svg.RECT, {'width': 10, 'height': 10, 'fill': '#aaa'}, disabledPattern);
   dom.createSvgElement(
@@ -1083,7 +1083,7 @@ ConstantProvider.prototype.createDebugFilter = function() {
           y: '-30%',
           x: '-40%'
         },
-        this.defs);
+        this.defs_);
     // Set all gaussian blur pixels to 1 opacity before applying flood
     const debugComponentTransfer = dom.createSvgElement(
         Svg.FECOMPONENTTRANSFER, {'result': 'outBlur'}, debugFilter);