WebAPI/BrowserAPI/KeyboardEvent: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
Line 8: Line 8:
! Scenario !! Description !! Example Keys
! Scenario !! Description !! Example Keys
|-
|-
| SYSTEM-ONLY || For keys which should be handled by mozbrowser embedder iframe only. || 'Power', 'VolumeUp', 'VolumeDown', 'VolumeMute', 'DisplaySwap'
| SYSTEM-ONLY || For keys which should be handled by mozbrowser embedder iframe only. || 'Power', 'DisplaySwap'
|-
|-
| SYSTEM-FIRST || For keys which can be handled by mozbrowser embedder iframe first and can also be handled by mozbrowser embedded iframe then. || 'Info', 'Settings'
| SYSTEM-FIRST || For keys which can be handled by mozbrowser embedder iframe first and can also be handled by mozbrowser embedded iframe then. || 'Info', 'Settings'

Revision as of 04:15, 8 May 2014

Dispatch KeyboardEvent across BrowserElements

This is a proposal to enable applications to handle/override the behavior of certain KeyboardEvent.

There are four scenarios which should be fulfilled:

Scenario Description Example Keys
SYSTEM-ONLY For keys which should be handled by mozbrowser embedder iframe only. 'Power', 'DisplaySwap'
SYSTEM-FIRST For keys which can be handled by mozbrowser embedder iframe first and can also be handled by mozbrowser embedded iframe then. 'Info', 'Settings'
APP-ONLY For keys which should be handled by mozbrowser embedded iframe only. 'ColorF0Red', 'ColorF1Green', 'ColorF2Yellow', 'ColorF3Blue', 'ColorF4Grey'
APP-FIRST For keys which keys can be handled by mozbrowser embedded iframe first and can also be handled by mozbrowser embedder iframe then. 'Info', 'Settings'


Note that some keys could be either SYSTEM-FIRST or APP-FIRST. The behavior is decided by the author of applications.

Proposal Concept

Concept diagram

Four new events are proposed:

  • mozbrowserbeforekeydown
  • mozbrowserkeydown
  • mozbrowserbeforekeyup
  • mozbrowserkeyup


When a key is pressed down, the event sequence would be:

  1. 'mozbrowserbeforekeydown' is dispatched to mozbrowser-embedder iframe
  2. 'keydown' is dispatched to mozbrowser-embedded iframe
  3. 'mozbrowserkeydown' is dispatched to mozbrowser-embedder iframe


Similarly, when a key is released, the event sequence would be:

  1. 'mozbrowserbeforekeyup' is dispatched to mozbrowser-embedder iframe
  2. 'keyup' is dispatched to mozbrowser-embedded iframe
  3. 'mozbrowserkeyup' is dispatched to mozbrowser-embedder iframe


This proposal can be extended to nested mozbrowser iframes. The four new events will be dispatched to all mozbrowser-embedder iframes.

Concept diagram for nested mozbrowser iframes

How to Fulfill Scenarios?

Here are some examples for each scenario.

Let's define some functions first.

function handleEvent(event) {
  dump("Receive event \'" + event.type + "\'.");
};
function handleEventAndPreventDefault(event) {
  dump("Receive event \'" + event.type + "\'.");
  event.preventDefault();
};
function checkAttrAndHandleEvent(event) {
  if (!event.embeddedCancelled) {
    dump("Receive event \'" + event.type + "\'.");
  }
};

Scenario SYSTEM-ONLY

  • mozbrowser-embedder iframe
   window.addEventListener('mozbrowserbeforekeydown', handleEventAndPreventDefault);
   window.addEventListener('mozbrowserbeforekeyup', handleEventAndPreventDefault);
   window.addEventListener('mozbrowserkeydown', function() { });
   window.addEventListener('mozbrowserkeyup', function() { });
  • mozbrowser-embedded iframe
   window.addEventListener('keydown', handleEvent);
   window.addEventListener('keyup', handleEvent);
Order mozbrowser-embedder iframe mozbrowser-embedded iframe Output
1 mozbrowserbeforekeydown Receive event 'mozbrowserbeforekeydown'.
2 mozbrowserkeydown
3 mozbrowserbeforekeyup Receive event 'mozbrowserbeforekeyup'.
4 mozbrowserkeyup

Scenario SYSTEM-FIRST

  • mozbrowser-embedder iframe
   window.addEventListener('mozbrowserbeforekeydown', handleEvent);
   window.addEventListener('mozbrowserbeforekeyup', handleEvent);
   window.addEventListener('mozbrowserkeydown', function() { });
   window.addEventListener('mozbrowserkeyup', function() { });
  • mozbrowser-embedded iframe
   window.addEventListener('keydown', handleEvent);
   window.addEventListener('keyup', handleEvent);
Order mozbrowser-embedder iframe mozbrowser-embedded iframe Output
1 mozbrowserbeforekeydown Receive event 'mozbrowserbeforekeydown'.
2 keydown Receive event 'keydown'.
3 mozbrowserkeydown
4 mozbrowserbeforekeyup Receive event 'mozbrowserbeforekeyup'.
5 keyup Receive event 'keyup'.
6 mozbrowserkeyup

Scenario APP-ONLY

  • mozbrowser-embedder iframe
   window.addEventListener('mozbrowserbeforekeydown', function() { });
   window.addEventListener('mozbrowserbeforekeyup', function() { });
   window.addEventListener('mozbrowserkeydown', checkAttrAndHandleEvent);
   window.addEventListener('mozbrowserkeyup', checkAttrAndHandleEvent);
  • mozbrowser-embedded iframe
   window.addEventListener('keydown', handleEventAndPreventDefault);
   window.addEventListener('keyup', handleEventAndPreventDefault);
Order mozbrowser-embedder iframe mozbrowser-embedded iframe Output
1 mozbrowserbeforekeydown
2 keydown Receive event 'keydown'.
3 mozbrowserkeydown
4 mozbrowserbeforekeyup
5 keyup Receive event 'keyup'.
6 mozbrowserup

Scenario APP-FIRST

  • mozbrowser-embedder iframe
   window.addEventListener('mozbrowserbeforekeydown', function() { });
   window.addEventListener('mozbrowserbeforekeyup', function() { });
   window.addEventListener('mozbrowserkeydown', checkAttrAndHandleEvent);
   window.addEventListener('mozbrowserkeyup', checkAttrAndHandleEvent);
  • mozbrowser-embedded iframe
   window.addEventListener('keydown', handleEvent);
   window.addEventListener('keyup', handleEvent);
Order mozbrowser-embedder iframe mozbrowser-embedded iframe Output
1 mozbrowserbeforekeydown
2 keydown Receive event 'keydown'.
3 mozbrowserkeydown Receive event 'mozbrowserkeydown'.
4 mozbrowserbeforekeyup
5 keyup Receive event 'keyup'.
6 mozbrowserkeyup Receive event 'mozbrowserkeyup'.

Proposal Details

mozbrowserbeforekeydown

Type mozbrowserbeforekeydown
Interface KeyboardEvent
Sync/Async Sync
Bubbles Yes
Target Document, Element
Cancelable Yes
Default action keydown event

keydown

Type keydown
Interface KeyboardEvent
Sync/Async Sync
Bubbles Yes
Target Document, Element
Cancelable Yes
Default action Set mozbrowserkeydown.embeddedCancelled to false; others defined in http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keydown

mozbrowserkeydown

Type mozbrowserkeydown
Interface KeyboardEvent
Sync/Async Sync
Bubbles Yes
Target Document, Element
Cancelable Yes
Default action None

mozbrowserbeforekeyup

Type mozbrowserbeforekeyup
Interface KeyboardEvent
Sync/Async Sync
Bubbles Yes
Target Document, Element
Cancelable Yes
Default action keyup event

keyup

Type keyup
Interface KeyboardEvent
Sync/Async Sync
Bubbles Yes
Target Document, Element
Cancelable Yes
Default action Set mozbrowserkeyup.embeddedCancelled to false; others defined in http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keyup

mozbrowserkeyup

Type mozbrowserkeyup
Interface KeyboardEvent
Sync/Async Sync
Bubbles Yes
Target Document, Element
Cancelable Yes
Default action None