Ticket #27650: dev_tool_window_size.php

<?php
/**
 * Plugin Name: Dev Tool Window Size Plugin
 * Plugin URI: 
 * Description: This plugin pastes a tiny fixed box on the screen that shows height x width of the browser window. Very handy tool during responsive web site development to ensure your CSS @media calls are performing correctly. By dragging the edge of your browser program narrow, you can quickly simulate your website's appearance on a smart phone or tablet device.  You get immediate feedback as to the size of the browser window.  Please remember to deactive this plugin before making your website visible to customers.
 * Version:  1.0
 * Author: Zip Zit
 * Author URI: mailto:zipzit@yahoo.com
 *  Copyright 2014  Zip Zit  (email : zipzit@yahoo.com)
 */

/*  This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License, version 2, as 
    published by the Free Software Foundation.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
*/

function dev_tool_window_size(){
?>
    <div id="dev_tool_window_size" style="position: fixed; top:33; right:0; min-width:50px; background-color: blue; color: white; z-index: 100000;">
    window size
    </div> 

    <script type="text/javascript">

    function checkScreenSize(){  
        var winW = 630, winH = 460;
        if (document.body && document.body.offsetWidth) {
         winW = document.body.offsetWidth;
         winH = document.body.offsetHeight;
        }
        if (document.compatMode=='CSS1Compat' &&
            document.documentElement &&
            document.documentElement.offsetWidth ) {
         winW = document.documentElement.offsetWidth;
         winH = document.documentElement.offsetHeight;
        }
        if (window.innerWidth && window.innerHeight) {
         winW = window.innerWidth;
         winH = window.innerHeight;
        }

        document.getElementById('dev_tool_window_size').innerHTML= 'window size: &nbsp;'+ winW +'x'+ winH +'px';
    } 

        //  ref:  http://stackoverflow.com/questions/8575772/how-to-detect-in-jquery-if-screen-resolution-changes  */
        // shim layer with setTimeout fallback
        window.requestAnimFrame = (function(){
          return  window.requestAnimationFrame       || 
                  window.webkitRequestAnimationFrame || 
                  window.mozRequestAnimationFrame    || 
                  window.oRequestAnimationFrame      || 
                  window.msRequestAnimationFrame     || 
                  function( callback ){
                    window.setTimeout(callback, 1000 / 4);  /* update 60 per second?  4 times per second is just fine.  */
                  };
        })();

        // usage: 
        // instead of setInterval(checkScreenSize, 50) ....
        (function loop(){
          requestAnimFrame(loop);
          checkScreenSize();
        })();


    </script>
<?php 
}

add_action('wp_loaded', 'dev_tool_window_size' );

?>