☰

FPS Counter

FPS Counter (On greasy fork)

  1. /*
  2.   The purpose of this script is just to provide a simple FPS counter for those
  3.   wondering more about their browser's performance. This user script was made
  4.   with html5 canvas games in mind.
  5.  
  6.   Author: Jonathan Cooper (github.com/drowsysaturn)
  7. */
  8.  
  9. // ==UserScript==
  10. // @name         FPS Counter
  11. // @namespace    http://github.com/drowsysaturn
  12. // @version      0.1
  13. // @description  FPS Counter (On greasy fork)
  14. // @author       Jonathan Cooper
  15. // @include      http://*/*
  16. // @include      https://*/*
  17. // @grant        none
  18. // ==/UserScript==
  19.  
  20. (function() {
  21.   var UPDATE_DELAY = 700;
  22.  
  23.   var lastUpdate = 0;
  24.   var frames = 0;
  25.  
  26.   var displayElement = document.createElement("div");
  27.   displayElement.style.padding = "5px";
  28.   displayElement.style.font = "16px Arial";
  29.   displayElement.style.display = "block";
  30.   displayElement.style.position = "fixed";
  31.   displayElement.style.top = "0px";
  32.   displayElement.style.left = "0px";
  33.   displayElement.textContent = "Calculating...";
  34.   document.body.appendChild(displayElement);
  35.  
  36.   function cssColorToRGB(color) {
  37.     var values;
  38.  
  39.     if (color.startsWith("rgba")) {
  40.       values = color.substring(5, color.length - 1).split(",");
  41.     } else if (color.startsWith("rgb")) {
  42.       values = color.substring(4, color.length - 1).split(",");
  43.     } else if (color.startsWith("#") && color.length === 4) {
  44.       values = [];
  45.       values[0] = "" + parseInt("0x" + color.substr(1, 1));
  46.       values[1] = "" + parseInt("0x" + color.substr(2, 1));
  47.       values[2] = "" + parseInt("0x" + color.substr(3, 1));
  48.     } else if (color.startsWith("#") && color.length === 7) {
  49.       values = [];
  50.       values[0] = "" + parseInt("0x" + color.substr(1, 2));
  51.       values[1] = "" + parseInt("0x" + color.substr(3, 2));
  52.       values[2] = "" + parseInt("0x" + color.substr(5, 2));
  53.     } else {
  54.       return {r : 255, g : 255, b : 255};
  55.     }
  56.  
  57.     return {
  58.       r : Number(values[0]),
  59.       g : Number(values[1]),
  60.       b : Number(values[2])
  61.     };
  62.   }
  63.  
  64.   function getInvertedRGB(values) {
  65.     return "rgb(" + (255 - values.r) + "," + (255 - values.g) + ","
  66.       + (255 - values.b) + ")";
  67.   }
  68.  
  69.   function getOpaqueRGB(values) {
  70.     return "rgba(" + values.r + "," + values.g + "," + values.b + ",0.7)";
  71.   }
  72.  
  73.   function updateCounter() {
  74.     var bgColor = getComputedStyle(document.body, null).getPropertyValue(
  75.       "background-color");
  76.     var bgColorValues = cssColorToRGB(bgColor);
  77.     var textColor = getInvertedRGB(bgColorValues);
  78.     var displayBg = getOpaqueRGB(bgColorValues);
  79.     displayElement.style.color = textColor;
  80.     displayElement.style.background = displayBg;
  81.  
  82.     var now = Date.now();
  83.     var elapsed = now - lastUpdate;
  84.     if (elapsed < UPDATE_DELAY) {
  85.       ++frames;
  86.     } else {
  87.       var fps = Math.round(frames / (elapsed / 1000));
  88.       displayElement.textContent = fps + " FPS";
  89.       frames = 0;
  90.       lastUpdate = now;
  91.     }
  92.  
  93.     requestAnimationFrame(updateCounter);
  94.   }
  95.  
  96.   lastUpdate = Date.now();
  97.   requestAnimationFrame(updateCounter);
  98. })();