mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-09-25 03:08:42 +00:00
Merge "Add event logger to collect IME functionality info"
This commit is contained in:
jenkins-bot
Gerrit Code Review
commit
fb4ec5252f
212
demos/ve/eventLogger.html
Normal file
212
demos/ve/eventLogger.html
Normal file
|
|
@ -0,0 +1,212 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Keyboard Event Logger</title>
|
||||
<style>
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 1em;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#ve-demo-halo {
|
||||
width: 100%;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
#ve-demo-content {
|
||||
border: 1px solid gray;
|
||||
width: 100%;
|
||||
min-height: 2em;
|
||||
max-height: 15%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#ve-demo-log {
|
||||
margin-top: 1em;
|
||||
border: 1px solid gray;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
white-space: pre;
|
||||
font-family: monospace;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<form id="ve-demo-halo">
|
||||
IME identifier (name and version):
|
||||
<input type="text" name="identifier" autofocus>
|
||||
<input type="submit" value="Start Logging Keyboard Events">
|
||||
</form>
|
||||
<div id="ve-demo-content" contenteditable="true" style="display: none;"></div>
|
||||
<textarea id="ve-demo-log"></textarea>
|
||||
|
||||
<script src="../../modules/jquery/jquery.js"></script>
|
||||
<script src="../../modules/jquery/jquery.client.js"></script>
|
||||
<script src="../../modules/oojs/oo.js"></script>
|
||||
<script src="../../modules/rangy/rangy-core-1.3.js"></script>
|
||||
<script src="../../modules/rangy/rangy-position-1.3.js"></script>
|
||||
<script src="../../modules/unicodejs/unicodejs.js"></script>
|
||||
<script src="../../modules/unicodejs/unicodejs.graphemebreak.js"></script>
|
||||
<script src="../../modules/unicodejs/unicodejs.wordbreak.js"></script>
|
||||
<script src="../../modules/ve/ve.js"></script>
|
||||
<script src="../../modules/ve/ve.EventSequencer.js"></script>
|
||||
<script>
|
||||
( function () {
|
||||
var haloElement, contentElement, logElement, startTime, timeoutId,
|
||||
oldHtml = '',
|
||||
oldStartOffset = 0,
|
||||
oldEndOffset = 0,
|
||||
comments,
|
||||
log = [];
|
||||
|
||||
function makeEventHandler( eventName ) {
|
||||
return function ( e ) {
|
||||
logEvent( 'sendEvent', eventName, e );
|
||||
};
|
||||
}
|
||||
|
||||
function makeAfterLoopHandler () {
|
||||
return function () {
|
||||
logEvent( 'endLoop' );
|
||||
};
|
||||
}
|
||||
|
||||
function eventToObject( e ) {
|
||||
// TODO: flesh this out more
|
||||
if ( !e || e.keyCode === undefined ) {
|
||||
return {};
|
||||
} else {
|
||||
return { 'keyCode': e.keyCode };
|
||||
}
|
||||
}
|
||||
|
||||
function logEvent( methodName, eventName, e ) {
|
||||
var args = [],
|
||||
msUtc = (new Date().getTime() - startTime) / 1000,
|
||||
newHtml = contentElement.innerHTML,
|
||||
rangyRange = rangy.getSelection( document ).getRangeAt(0),
|
||||
newStartOffset = rangyRange.startOffset,
|
||||
newEndOffset = rangyRange.endOffset;
|
||||
|
||||
if ( oldHtml !== newHtml ) {
|
||||
logWrite( {
|
||||
'seq': log.length,
|
||||
'time': msUtc,
|
||||
'action': 'changeText',
|
||||
'args': [ newHtml ]
|
||||
} );
|
||||
oldHtml = newHtml;
|
||||
}
|
||||
if (
|
||||
oldStartOffset !== newStartOffset ||
|
||||
oldEndOffset !== newEndOffset
|
||||
) {
|
||||
logWrite( {
|
||||
'seq': log.length,
|
||||
'time': msUtc,
|
||||
'action': 'changeSel',
|
||||
'args': [
|
||||
newStartOffset,
|
||||
newEndOffset
|
||||
]
|
||||
} );
|
||||
oldStartOffset = newStartOffset;
|
||||
oldEndOffset = newEndOffset;
|
||||
}
|
||||
if ( eventName !== undefined ) {
|
||||
args.push( eventName );
|
||||
args.push( eventToObject( e ) );
|
||||
}
|
||||
|
||||
logWrite( {
|
||||
'seq': log.length,
|
||||
'time': msUtc,
|
||||
'action': methodName,
|
||||
'args': args
|
||||
} );
|
||||
}
|
||||
|
||||
function logWrite( val ) {
|
||||
log.push( val );
|
||||
showLog();
|
||||
}
|
||||
|
||||
function showLog() {
|
||||
var i, len, jsons = [];
|
||||
jsons.push( JSON.stringify( comments ) );
|
||||
for ( i = 0, len = log.length; i < len; i++ ) {
|
||||
jsons.push( JSON.stringify( log[i] ) );
|
||||
}
|
||||
logElement.value = '[\n\t'
|
||||
+ jsons.join(',\n\t') + '\n]';
|
||||
logElement.scrollTop = logElement.scrollHeight;
|
||||
}
|
||||
|
||||
/** @param {jQuery.Event} e Halo form submit event */
|
||||
function start( e ) {
|
||||
e.preventDefault();
|
||||
|
||||
comments = {
|
||||
'imeIdentifier': haloElement.identifier.value,
|
||||
'userAgent': navigator.userAgent,
|
||||
'startDom': contentElement.innerHTML
|
||||
};
|
||||
|
||||
haloElement.style.display = 'none';
|
||||
contentElement.style.display = 'block';
|
||||
contentElement.focus();
|
||||
}
|
||||
|
||||
function init() {
|
||||
var i, len, range, sel, eventSequencer, handlers = {},
|
||||
eventNames = [
|
||||
'compositionstart',
|
||||
'compositionend',
|
||||
'keydown',
|
||||
'keyup',
|
||||
'keypress',
|
||||
'input'
|
||||
];
|
||||
|
||||
haloElement = document.getElementById( 've-demo-halo' ),
|
||||
contentElement = document.getElementById( 've-demo-content' ),
|
||||
logElement = document.getElementById( 've-demo-log' );
|
||||
logElement.value = '';
|
||||
|
||||
eventSequencer = new ve.EventSequencer( eventNames );
|
||||
eventSequencer.attach( $( contentElement ) );
|
||||
|
||||
for ( i = 0, len = eventNames.length; i < len; i++ ) {
|
||||
handlers[ eventNames[i] ] =
|
||||
makeEventHandler( eventNames[i] );
|
||||
}
|
||||
eventSequencer.on( handlers );
|
||||
eventSequencer.afterLoop( [ makeAfterLoopHandler() ] );
|
||||
|
||||
startTime = new Date().getTime();
|
||||
|
||||
$( haloElement ).on( 'submit', start );
|
||||
|
||||
$( logElement ).on( 'click', function () {
|
||||
if ( this.select ) {
|
||||
this.select();
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
init();
|
||||
}() );
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue