document-focus-marker.html

<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="document-focus-marker">

<style>
:host{
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
border: 20px solid rgba(255,0,0,0.2);
opacity: 0;
pointer-events: none;
};
</style>
<template></template>

<script>


Polymer({
    is: 'document-focus-marker',
    properties: {
        is_focused: {
            type: Boolean,
            value: true,
            notify: true,
            readOnly: true
        }
    }, created: function(){
        // bind these methods so we can add/remove easily
    
    }, attached: function(){
        var self = this;
        window.addEventListener('blur', function(e){
            if(e.target === window){
                self._setIs_focused(false);
                self.style.opacity = '1';               
            }
        }, true);
        window.addEventListener('focus', function(){
            self._setIs_focused(true);
            self.style.opacity = '0';
        }, true);   
        getComputedStyle(this).backgroundColor; // force original 0 opacity to take effect
        this.style.transition = 'opacity 2s';           
    }
});


</script>
</dom-module>