Sunday 24 February 2019

Firefox: trigger autoscroll programmatically

I want to listen for a middle-button press (mousedown event) and conditionally either take an action (not relevant what specifically) or revert to the default, which would be to enter "autoscroll mode" with the autoscroll icon displayed until the user releases the middle button.

My code listens for the mousedown event and checks whether the pressed button is the middle button. Then determines whether to take the default action, and if not, prevents the default action by calling event.preventDefault. The problem is that there is a delay between the actual mouse press and executing the action, so when the user presses the button and holds it, the action is not taken immediately. Instead, mouse movement is observed for a short amount of time, and based on this movement, either a custom action is taken after the button is released, or the default action for mousedown is taken immediately. In the case the default action is taken, I want Firefox to behave as if the user pressed the middle button, eg. to start autoscroll. This is not happening, since the browser chrome does not react to synthetic events (events produced programmatically).

How do I go about triggering autoscroll in Firefox programmatically? Is there a way to change the behavior (eg. to make autoscroll listen for synthetic events) using userChrome.css?

var elem = document.getElementById('watchedElement')
var active = false

elem.onmousedown = function(event) {
  if (event.button !== MIDDLE_BUTTON || active) { return }
  event.preventDefault()

  startParams = getStartParams()
  active = true
}

elem.onmousemove = function(event) {
  if (!active) { return }

  if (shouldTakeDefaultAction()) {
    elem.dispatchEvent(new MouseEvent('mousedown',
                           {'button': MIDDLE_BUTTON, 'which': MIDDLE_BUTTON}))
    active = false
  }
}

elem.onmouseup = function(event) {
  if (event.button !== MIDDLE_BUTTON || !active) { return }
  event.preventDefault()

  takeCustomAction()
  active = false
}


EDIT: More information

I have made a Greasemonkey plugin for YouTube, which does this:

  • when I click the middle button (without dragging), toggles fullscreen mode
  • when I drag left / right with the middle button pressed, it seeks in the video backward / forward
  • when I drag up / down, I want scrolling

So the default action has to be prevented, and when the mouse has been dragged over a certain distance, we can decide whether to seek or scroll. The angle of the trajectory is computed and evaluated once a certain amount of pixels has been "traveled" by the drag. If the drag is vertical, then I want to activate scrolling, otherwise wait for the button to be released and then seek. The video is sought only after the button is released, eg. no "live preview" while dragging.



from Firefox: trigger autoscroll programmatically

No comments:

Post a Comment