WebAPI/BrowserAPI/KeyboardEvent: Difference between revisions
< WebAPI | BrowserAPI
Jump to navigation
Jump to search
Line 12: | Line 12: | ||
| 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' | ||
|- | |- | ||
| APP- | | APP-CANCELLED || 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' | | 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' | ||
Line 61: | Line 61: | ||
function checkAttrAndHandleEvent(event) { | function checkAttrAndHandleEvent(event) { | ||
dump("Receive event \'" + event.type + "\' with embeddedCancelled equals to \'" + event.embeddedCancelled + "\'."); | |||
if (!event.embeddedCancelled) { | if (!event.embeddedCancelled) { | ||
// do something | |||
} | } | ||
}; | }; | ||
Line 114: | Line 115: | ||
|} | |} | ||
==== Scenario APP- | ==== Scenario APP-CANCELLED ==== | ||
* mozbrowser-embedder iframe | * mozbrowser-embedder iframe | ||
window.addEventListener('mozbrowserbeforekeydown', function() { }); | window.addEventListener('mozbrowserbeforekeydown', function() { }); | ||
Line 131: | Line 132: | ||
| 2 || || keydown || Receive event 'keydown'. | | 2 || || keydown || Receive event 'keydown'. | ||
|- | |- | ||
| 3 || mozbrowserkeydown || || | | 3 || mozbrowserkeydown || || Receive event 'mozbrowserkeydown' with embeddedCancelled equals to 'true'. | ||
|- | |- | ||
| 4 || mozbrowserbeforekeyup || || | | 4 || mozbrowserbeforekeyup || || | ||
Line 137: | Line 138: | ||
| 5 || || keyup || Receive event 'keyup'. | | 5 || || keyup || Receive event 'keyup'. | ||
|- | |- | ||
| 6 || mozbrowserup || || | | 6 || mozbrowserup || || Receive event 'mozbrowserkeyup' with embeddedCancelled equals to 'true'. | ||
|} | |} | ||
Line 157: | Line 158: | ||
| 2 || || keydown || Receive event 'keydown'. | | 2 || || keydown || Receive event 'keydown'. | ||
|- | |- | ||
| 3 || mozbrowserkeydown || || Receive event ' | | 3 || mozbrowserkeydown || || Receive event 'mozbrowserkeyup' with embeddedCancelled equals to 'false'. | ||
|- | |- | ||
| 4 || mozbrowserbeforekeyup || || | | 4 || mozbrowserbeforekeyup || || | ||
Line 163: | Line 164: | ||
| 5 || || keyup || Receive event 'keyup'. | | 5 || || keyup || Receive event 'keyup'. | ||
|- | |- | ||
| 6 || mozbrowserkeyup || || Receive event 'mozbrowserkeyup'. | | 6 || mozbrowserkeyup || || Receive event 'mozbrowserkeyup' with embeddedCancelled equals to 'false'. | ||
|} | |} | ||
Revision as of 03:25, 9 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-CANCELLED | 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
Four new events are proposed:
- mozbrowserbeforekeydown
- mozbrowserkeydown
- mozbrowserbeforekeyup
- mozbrowserkeyup
When a key is pressed down, the event sequence would be:
- 'mozbrowserbeforekeydown' is dispatched to mozbrowser-embedder iframe
- 'keydown' is dispatched to mozbrowser-embedded iframe
- 'mozbrowserkeydown' is dispatched to mozbrowser-embedder iframe
Similarly, when a key is released, the event sequence would be:
- 'mozbrowserbeforekeyup' is dispatched to mozbrowser-embedder iframe
- 'keyup' is dispatched to mozbrowser-embedded iframe
- '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.
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) { dump("Receive event \'" + event.type + "\' with embeddedCancelled equals to \'" + event.embeddedCancelled + "\'."); if (!event.embeddedCancelled) { // do something } };
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-CANCELLED
- 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 | Receive event 'mozbrowserkeydown' with embeddedCancelled equals to 'true'. | |
4 | mozbrowserbeforekeyup | ||
5 | keyup | Receive event 'keyup'. | |
6 | mozbrowserup | Receive event 'mozbrowserkeyup' with embeddedCancelled equals to 'true'. |
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 'mozbrowserkeyup' with embeddedCancelled equals to 'false'. | |
4 | mozbrowserbeforekeyup | ||
5 | keyup | Receive event 'keyup'. | |
6 | mozbrowserkeyup | Receive event 'mozbrowserkeyup' with embeddedCancelled equals to 'false'. |
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 |