Implement steps() timing function editor

[redmunds]

1. I added support for steps() timing function.
2. I refactored the existing inline timing function code for cubic-bezier().
3. I developed this using TDD, so this includes Unit Tests.

Support for:

• steps(<integer>[,[start|end]]) function
• step-start
• step-end

Keyboard Events

• up/down arrows control steps
• left/right arrows control start/end

Mouse support

• None. Doesn't seem like any natural gestures.

Issues?

• Edit controls?
  • count spin control
  • toggle switch for start/end
• More then ~25 steps is not usable
  • dynamically make lines thinner as number of steps grows?
  • increase size of editor?
  • rescale grid?
• Editing doc while editor open is unforgiving
  • e.g. While typing "start", editor closes due to intermediate updates
• Validation
• editor silently fails when invalid parameters
• Proposed Showing Errors for Inline Editors to help solve this issue. Note this also helps cubic-bezier() and all other Inline Editors.

[redmunds]

@larz0 Here is the steps() function code.

[JeffryBooher]

Nominating for Sprint 35

[redmunds]

@larz0 This pull request was nominated for Sprint 35. Can you take a look and respond with what you think needs to be done to this feature for it to get into master? Then we can figure out if we can get it done this sprint.

[larz0]

@redmunds ok I'll take a look this afternoon.

[redmunds]

@larz0 I added some info text for both the cubic-bezier and steps editors. Let me know what you think.

It's going to be a fair amount of work to display error messages (need separate test and string for every possible error), so I want to make sure this is on the right track before proceeding.

If it's OK, then feel free to tweak position, styles, text, etc.

[redmunds]

@larz0 I thought you asked me to add symbols for arrow keys to the info text (but I can't seem to find your comment), so I added those. I looked for unicode symbols for mouse click and drag operations, but couldn't find anything -- I suppose we could use images.

Let me know what else you think needs to be done to merge this into master. In the spirit of agile, maybe we should merge what we have and listen for feedback?

[larz0]

I'd like to make it more like the screenshot below. What do you think? I can push the changes to this PR.

[redmunds]

I like that! Is that format used anywhere else in Brackets so I could re-use the boxes and background-color?

I also added info text to cubic-bezier() editor, so that's why I was asking about mouse click and drag. Suggestions?

[larz0]

Awesome. I'll make those changes in cubic-bezier as well. I'm going to remove "Bezier curve endpoints can be dragged with mouse." because it's pretty clear that they can be dragged as they look like typical bezier curve handles.

[larz0]

@redmunds I've made the changes, might want to take a look just in case.

[redmunds]

Looks awesome! Let me know when you're happy with XD side, and I'll get a dev to give this a code review.

[larz0]

@redmunds I'm happy with XD side. Let's try and merge this :)

[redmunds]

XD review is complete. Ready for Dev code review.

[marcelgerber]

After steps there is a period, but in the other 3 cases of "end of line" there isn't.
These should be standardized.

[bchintx]

Done with code review. Looks and works great! merging.