Option to align to top and repetition counter

[RVillani]

Add option to align input history to top

Default state is off to keep previous behavior. If on, new keys are added to the top, instead of bottom of the page.

CSS

• Move body position and bottom settings to body.bottom-align class, to apply it only when aligned to the bottom.
• Vertical margin is only applied to keys with another one before them.

Script

• Add HISTORY_TOP_ALIGN option.
• Add bottom-align style class to body when HISTORY_TOP_ALIGN is true.
• Refactored updateUI function:
  • To use HISTORY_TOP_ALIGN state and add/remove elements accordingly from the top or the bottom of the body.
  • Scroll is only applied if aligned to the bottom.
• startRemovingLast now takes a parameter to tell it which element to remove, so the correct element can be computed a single time inside updateUI.

Add libuihook arrow keycodes and fix mirrored side-scroll icons

• Add arrow keycodes that match libuihook values.
• Fix mirrored mouse side-scroll icons.
• Hide "arrow clear" keycodes.
• Prevent hidden/unknown keycodes from adding blank spaces to history or being handled at all.

Add repeated input count

Repeated key presses (optionally, held keys too) now generate a single input in the history, with a counter displaying how many times the key/combination was pressed.

There's a time to reset the counter, after which another repeated input is added as a new input, making it easier to distinguish quick consecutive inputs from slower ones.

CSS

• Add span.repeat selector to customize counter.
• Move background-color to shared span.key, span.repeat selector to have their background color defined a single time.

Script

• Add _historyLastPressed set to store previous keys. With this we're able to distinguish repeated key presses.
• Modify updateUI function to support repetition counting.
• Add logic to cancel/undo hiding of previous combination HTML elements, so we can add counters to them if they're repeated.
• Don't use parseInt for keycodes. They're already int in the JSON parsed from the websocket events.
• Replace function parameters for global variables where that's all they were.
• Remove variable _addNewCombination. Decide whether to add new elements from repetition and key-combination detection instead by comparing current and previous (new) set of pressed keys.

Update README with new features

• Add instructions for repeat counter and vertical alignment.
• Update instructions for key background styling, with addition of repeat counters CSS selector.

[univrsal]

Thanks again for the contribution, the changes seem to work fine for me. I did however notice that the mouse side buttons both result in the same icon. It seems like the data.mask value is 4096 for both of them for some reason, which is probably an issue in libuiohook. For now we could use a hack like this in line 894 since data.button always contains the correct mouse button id (4 for the first extra mouse button and 5 for the second one):

          // Fix the bit mask for the extra mouse buttons
          if (data.button === 4 && data.event_type === "mouse_pressed")
            data.mask = (data.mask ^ 4096) | 2048;