code: function StepEditor($parent, stepMatch, callback) {
          // Create the DOM structure, filling in localized strings via Mustache
          this.$element = $(Mustache.render(StepEditorTemplate, Strings));
          $parent.append(this.$element);
  
          this._callback = callback;
  
          // current step function params
          this._stepParams = this._getStepParams(stepMatch);
  
          this.hint = {};
          this.hint.elem = $(".hint", this.$element);
          // If function was auto-corrected, then originalString holds the original function,
          // and an informational message needs to be shown
          if (stepMatch.originalString) {
              TimingFunctionUtils.showHideHint(this.hint, true, stepMatch.originalString, "steps(" + this._stepParams.count.toString() + ", " + this._stepParams.timing + ")");
          } else {
              TimingFunctionUtils.showHideHint(this.hint, false);
          }
  
          this.canvas = this.$element.find(".steps")[0];
  
          this.canvas.stepEditor = this;
  
          // Padding (3rd param)is scaled, so 0.1 translates to 15px
          // Note that this is rendered inside canvas CSS "content"
          // (i.e. this does not map to CSS padding)
          this.stepCanvas = new StepCanvas(this.canvas, null, [0.1]);
  
          // redraw canvas
          this._updateCanvas();
  
          $(this.canvas).on("keydown", _canvasKeyDown);
      }
docs: Constructor for StepEditor Object. This control may be used standalone
  or within an InlineTimingFunctionEditor inline widget.
  
  @param {!jQuery} $parent  DOM node into which to append the root of the step editor UI
  @param {!RegExpMatch} stepMatch  RegExp match object of initially selected step function
  @param {!function(string)} callback  Called whenever selected step function changes