drawConnection(conn) {
    if (!DebugDrawer.config.connections) {
      return;
    }

    let colour;
    let size;
    let fill;
    if (conn.type == Blockly.INPUT_VALUE) {
      size = 4;
      colour = 'magenta';
      fill = 'none';
    } else if (conn.type == Blockly.OUTPUT_VALUE) {
      size = 2;
      colour = 'magenta';
      fill = colour;
    } else if (conn.type == Blockly.NEXT_STATEMENT) {
      size = 4;
      colour = 'goldenrod';
      fill = 'none';
    } else if (conn.type == Blockly.PREVIOUS_STATEMENT) {
      size = 2;
      colour = 'goldenrod';
      fill = colour;
    }
    // TODO(blockly/7227): This method is still internal, so we're going to
    //   have continual problems. We should consider making it public.
    const offset = conn.getOffsetInBlock();
    this.debugElements_.push(
      Blockly.utils.dom.createSvgElement(
        'circle',
        {
          class: 'blockRenderDebug',
          cx: offset.x,
          cy: offset.y,
          r: size,
          fill: fill,
          stroke: colour,
        },
        this.svgRoot_,
      ),
    );
  }
Draw a circle at the location of the given connection.  Inputs and outputs
share the same colours, as do previous and next.  When positioned correctly
a connected pair will look like a bullseye.
@param {Blockly.RenderedConnection} conn The connection to circle.
@protected