Monitor current focused element

gistfile1.js

var current = null;
 
$('<div />', { 
  html: '<style>@-webkit-keyframes changeopacity { from { opacity: 1 } to { opacity: 0.2 } }\
.indicate { -webkit-animation-duration: 0.25s; -webkit-animation-name: changeopacity; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; }\
.focus-mark-container { outline: 1px dotted red; }\
.focus-target-log { position: absolute; left: 0; top: 30px; background: blue; color: white; z-index: 20000 }\
.tabindex-indicator { z-index: 100000; opacity: 0.3; position: absolute; left: 0; top: 0; background: blue; color: white }\
.tabindex-indicator-current { background: red; }\
</style>'
}).appendTo($('body'));

$('<div />', {
    class: 'focus-target-log',
    style: ''
}).appendTo($('body'));
 
setInterval(function(){
    var f = $(':focus');
    if (f.get(0) !== current) {
        $(current).removeClass('indicate');
        $('.focus-mark-container').removeClass('focus-mark-container');
        $('.tabindex-indicator-current').removeClass('tabindex-indicator-current');
        f.addClass('indicate');
        current = f.get(0);        
        $('.focus-target-log').text(f.wsControl().describe() + ' tabindex: ' + f.wsControl().getTabindex());
        $('.tabindex-indicator').remove();
        $ws.helpers.forEach(f.wsControl().getParent().getImmediateChildControls(), function(ctrl) {
          var ctr = ctrl.getContainer(),
          offset = ctr.offset();
          
          if (ctrl instanceof $ws.proto.AreaAbstract) {
                ctrl.getContainer().addClass('focus-mark-container');
            }
          
              $('body').append($('<i />', { 
                text: ctrl.getTabindex(), 
                'data-for': ctrl.getId(),
                class: 'tabindex-indicator'
              }).css(offset).toggleClass('tabindex-indicator-current', ctrl.getId() == f.wsControl().getId()));    
        });
    }
}, 42);