From 1f7826e53cae10aa28d51d7485e651ff82ca72a7 Mon Sep 17 00:00:00 2001
From: Viktor Borisov <vik-borisov@users.noreply.github.com>
Date: Fri, 24 Mar 2023 14:57:55 +0700
Subject: [PATCH 1/3] format code

---
 dimensions.safariextension/dimensions.js     | 134 +++++++++----------
 dimensions.safariextension/safari.js         |  62 ++++-----
 dimensions.safariextension/tooltip.css       | 118 ++++++++--------
 dimensions.safariextension/tooltip.safari.js | 100 +++++++-------
 extension/chrome.js                          |  74 +++++-----
 extension/dimensions.js                      | 134 +++++++++----------
 extension/manifest.json                      |  14 +-
 extension/tooltip.chrome.js                  | 104 +++++++-------
 extension/tooltip.css                        | 118 ++++++++--------
 js/worker.js                                 |  86 ++++++------
 10 files changed, 473 insertions(+), 471 deletions(-)

diff --git a/dimensions.safariextension/dimensions.js b/dimensions.safariextension/dimensions.js
index 3ca9ce7..5a31ce8 100644
--- a/dimensions.safariextension/dimensions.js
+++ b/dimensions.safariextension/dimensions.js
@@ -3,14 +3,14 @@ var dimensionsThreshold = 6;
 var debug;
 var map;
 
-onmessage = function(event){
-  switch(event.data.type){
+onmessage = function (event) {
+  switch (event.data.type) {
     case 'init':
       debug = event.data.debug;
       break;
     case 'imgData':
       imgData = new Uint8ClampedArray(event.data.imgData);
-      data = grayscale( imgData );
+      data = grayscale(imgData);
       width = event.data.width;
       height = event.data.height;
       postMessage({ type: "screenshot processed" });
@@ -38,7 +38,7 @@ onmessage = function(event){
 //
 
 function sendDebugScreen() {
-  postMessage({ 
+  postMessage({
     type: 'debug screen',
     map: map
   })
@@ -52,7 +52,7 @@ function sendDebugScreen() {
 // measures the area around pageX and pageY.
 //
 //
-function measureArea(pos){
+function measureArea(pos) {
   var x0, y0, startLightness;
 
   map = new Int16Array(data);
@@ -64,18 +64,18 @@ function measureArea(pos){
   pixelsInArea = [];
 
   measureAreaStopped = false;
-  
+
   setTimeout(nextTick, 0);
 }
 
-function nextTick(){
+function nextTick() {
   workOffStack();
 
-  if(debug)
+  if (debug)
     sendDebugScreen()
 
-  if(!measureAreaStopped){
-    if(stack.length){
+  if (!measureAreaStopped) {
+    if (stack.length) {
       setTimeout(nextTick, 0);
     } else {
       finishMeasureArea();
@@ -83,44 +83,44 @@ function nextTick(){
   }
 }
 
-function workOffStack(){
+function workOffStack() {
   var max = 500000;
   var count = 0;
 
-  while(count++ < max && stack.length){
+  while (count++ < max && stack.length) {
     floodFill();
   }
 }
 
-function floodFill(){
+function floodFill() {
   var xyl = stack.shift();
   var x = xyl[0];
   var y = xyl[1];
   var lastLightness = xyl[2];
   var currentLightness = getLightnessAt(map, x, y);
 
-  if(currentLightness > -1 && currentLightness < 256 && Math.abs(currentLightness - lastLightness) < areaThreshold){
+  if (currentLightness > -1 && currentLightness < 256 && Math.abs(currentLightness - lastLightness) < areaThreshold) {
     setLightnessAt(map, x, y, 256);
-    pixelsInArea.push([x,y]);
+    pixelsInArea.push([x, y]);
 
-    if(x < area.left)
+    if (x < area.left)
       area.left = x;
-    else if(x > area.right)
+    else if (x > area.right)
       area.right = x;
-    if(y < area.top)
+    if (y < area.top)
       area.top = y;
-    else if(y > area.bottom)
+    else if (y > area.bottom)
       area.bottom = y;
 
-    stack.push([x-1, y  , currentLightness]);
-    stack.push([x  , y+1, currentLightness]);
-    stack.push([x+1, y  , currentLightness]);
-    stack.push([x  , y-1, currentLightness]);
+    stack.push([x - 1, y, currentLightness]);
+    stack.push([x, y + 1, currentLightness]);
+    stack.push([x + 1, y, currentLightness]);
+    stack.push([x, y - 1, currentLightness]);
   }
 }
 
-function finishMeasureArea(){
-  var boundariePixels = { 
+function finishMeasureArea() {
+  var boundariePixels = {
     top: [],
     right: [],
     bottom: [],
@@ -132,18 +132,18 @@ function finishMeasureArea(){
 
   // find boundarie-pixels
 
-  for(var i=0, l=pixelsInArea.length; i<l; i++){
+  for (var i = 0, l = pixelsInArea.length; i < l; i++) {
     var x = pixelsInArea[i][0];
     var y = pixelsInArea[i][1];
 
-    if(x === area.left)
+    if (x === area.left)
       boundariePixels.left.push(y);
-    if(x === area.right)
+    if (x === area.right)
       boundariePixels.right.push(y);
 
-    if(y === area.top)
+    if (y === area.top)
       boundariePixels.top.push(x);
-    if(y === area.bottom)
+    if (y === area.bottom)
       boundariePixels.bottom.push(x);
   }
 
@@ -171,7 +171,7 @@ function finishMeasureArea(){
 }
 
 
-function getMaxSpread(sideA, sideB){
+function getMaxSpread(sideA, sideB) {
   var a = getDimensions(sideA);
   var b = getDimensions(sideB);
 
@@ -181,20 +181,20 @@ function getMaxSpread(sideA, sideB){
   return smallerSide.center;
 }
 
-function getDimensions(values){
+function getDimensions(values) {
   var min = Infinity;
   var max = 0;
 
-  for(var i=0, l=values.length; i<l; i++){
-    if(values[i] < min)
+  for (var i = 0, l = values.length; i < l; i++) {
+    if (values[i] < min)
       min = values[i]
-    if(values[i] > max)
+    if (values[i] > max)
       max = values[i]
   }
 
   return {
     min: min,
-    center: min + Math.floor((max - min)/2),
+    center: min + Math.floor((max - min) / 2),
     max: max,
     length: max - min
   }
@@ -208,7 +208,7 @@ function getDimensions(values){
 // around pageX and pageY.
 //
 
-function measureDistances(input){
+function measureDistances(input) {
   var distances = {
     top: 0,
     right: 0,
@@ -216,16 +216,16 @@ function measureDistances(input){
     left: 0
   };
   var directions = {
-    top:    { x:  0, y: -1 },
-    right:  { x:  1, y:  0 },
-    bottom: { x:  0, y:  1 },
-    left:   { x: -1, y:  0 }
+    top: { x: 0, y: -1 },
+    right: { x: 1, y: 0 },
+    bottom: { x: 0, y: 1 },
+    left: { x: -1, y: 0 }
   }
   var area = 0;
   var startLightness = getLightnessAt(data, input.x, input.y);
   var lastLightness;
 
-  for(var direction in distances){
+  for (var direction in distances) {
     var vector = directions[direction];
     var boundaryFound = false;
     var sx = input.x;
@@ -235,27 +235,27 @@ function measureDistances(input){
     // reset lightness to start lightness
     lastLightness = startLightness;
 
-    while(!boundaryFound){
+    while (!boundaryFound) {
       sx += vector.x;
       sy += vector.y;
       currentLightness = getLightnessAt(data, sx, sy);
 
-      if(currentLightness > -1 && Math.abs(currentLightness - lastLightness) < dimensionsThreshold){
+      if (currentLightness > -1 && Math.abs(currentLightness - lastLightness) < dimensionsThreshold) {
         distances[direction]++;
         lastLightness = currentLightness;
       } else {
         boundaryFound = true;
       }
     }
-    
+
     area += distances[direction];
   }
 
-  if(area <= 6){
+  if (area <= 6) {
     distances = { top: 0, right: 0, bottom: 0, left: 0 };
     var similarColorStreakThreshold = 8;
 
-    for(var direction in distances){
+    for (var direction in distances) {
       var vector = directions[direction];
       var boundaryFound = false;
       var sx = input.x;
@@ -265,18 +265,18 @@ function measureDistances(input){
 
       lastLightness = startLightness;
 
-      while(!boundaryFound){
+      while (!boundaryFound) {
         sx += vector.x;
         sy += vector.y;
         currentLightness = getLightnessAt(data, sx, sy);
 
-        if(currentLightness > -1){
+        if (currentLightness > -1) {
           distances[direction]++;
 
-          if(Math.abs(currentLightness - lastLightness) < dimensionsThreshold){
+          if (Math.abs(currentLightness - lastLightness) < dimensionsThreshold) {
             similarColorStreak++;
-            if(similarColorStreak === similarColorStreakThreshold){ 
-              distances[direction] -= (similarColorStreakThreshold+1);
+            if (similarColorStreak === similarColorStreakThreshold) {
+              distances[direction] -= (similarColorStreakThreshold + 1);
               boundaryFound = true;
             }
           } else {
@@ -300,8 +300,8 @@ function measureDistances(input){
   });
 }
 
-function getColorAt(x, y){
-  if(!inBoundaries(x, y))
+function getColorAt(x, y) {
+  if (!inBoundaries(x, y))
     return -1;
 
   var i = y * width * 4 + x * 4;
@@ -309,11 +309,11 @@ function getColorAt(x, y){
   return rgbToHsl(imgData[i], imgData[++i], imgData[++i]);
 }
 
-function getLightnessAt(data, x, y){
+function getLightnessAt(data, x, y) {
   return inBoundaries(x, y) ? data[y * width + x] : -1;
 }
 
-function setLightnessAt(data, x, y, value){
+function setLightnessAt(data, x, y, value) {
   return inBoundaries(x, y) ? data[y * width + x] = value : -1;
 }
 
@@ -324,8 +324,8 @@ function setLightnessAt(data, x, y, value){
 //  
 // checks if x and y are in the canvas boundaries
 //
-function inBoundaries(x, y){
-  if(x >= 0 && x < width && y >= 0 && y < height)
+function inBoundaries(x, y) {
+  if (x >= 0 && x < width && y >= 0 && y < height)
     return true;
   else
     return false;
@@ -338,13 +338,13 @@ function inBoundaries(x, y){
 // reduces the input image data to an array of gray shades.
 //
 
-function grayscale(imgData){
-  var gray = new Int16Array(imgData.length/4);
+function grayscale(imgData) {
+  var gray = new Int16Array(imgData.length / 4);
 
-  for(var i=0, n=0, l=imgData.length; i<l; i+=4, n++){
+  for (var i = 0, n = 0, l = imgData.length; i < l; i += 4, n++) {
     var r = imgData[i],
-        g = imgData[i+1],
-        b = imgData[i+2];
+      g = imgData[i + 1],
+      b = imgData[i + 2];
 
     // weighted grayscale algorithm
     gray[n] = Math.round(r * 0.3 + g * 0.59 + b * 0.11);
@@ -364,17 +364,17 @@ function grayscale(imgData){
  * @param   Number  b       The blue color value
  * @return  Array           The HSL representation
  */
-function rgbToHsl(r, g, b){
+function rgbToHsl(r, g, b) {
   r /= 255, g /= 255, b /= 255;
   var max = Math.max(r, g, b), min = Math.min(r, g, b);
   var h, s, l = (max + min) / 2;
 
-  if(max == min){
+  if (max == min) {
     h = s = 0; // achromatic
-  }else{
+  } else {
     var d = max - min;
     s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-    switch(max){
+    switch (max) {
       case r: h = (g - b) / d + (g < b ? 6 : 0); break;
       case g: h = (b - r) / d + 2; break;
       case b: h = (r - g) / d + 4; break;
diff --git a/dimensions.safariextension/safari.js b/dimensions.safariextension/safari.js
index a3962fc..b128032 100644
--- a/dimensions.safariextension/safari.js
+++ b/dimensions.safariextension/safari.js
@@ -1,41 +1,41 @@
 var debug = false;
 var tabs = [];
 
-function toggle(tab){
-  if(tabs.indexOf(tab) == -1)
+function toggle(tab) {
+  if (tabs.indexOf(tab) == -1)
     addTab(tab);
   else
     deactivateTab(tab);
 }
 
-function validateTab(tab){
-  
+function validateTab(tab) {
+
 }
 
-function addTab(tab){
+function addTab(tab) {
   var dimensions = Object.create(dimensions);
   dimensions.activate(tab);
   tabs.push(dimensions);
 }
 
-function deactivateTab(tab){
-  for(var i=0; i<tabs.length; i++){
-    if(tabs[i] === tab){
+function deactivateTab(tab) {
+  for (var i = 0; i < tabs.length; i++) {
+    if (tabs[i] === tab) {
       tab.deactivate();
       return;
     }
   }
 }
 
-function removeTab(tab){
+function removeTab(tab) {
   var pos = tabs.indexOf(tab);
-  tabs.splice(pos,1);
+  tabs.splice(pos, 1);
 }
 
-safari.application.addEventListener('command', function(event){
+safari.application.addEventListener('command', function (event) {
   toggle(event.target.browserWindow.activeTab);
 }, false);
-safari.application.addEventListener('validate', function(event){
+safari.application.addEventListener('validate', function (event) {
   validateTab(event.target.browserWindow.activeTab);
 }, false);
 
@@ -59,7 +59,7 @@ var dimensions = {
   canvas: document.createElement('canvas'),
   alive: true,
 
-  activate: function(tab){
+  activate: function (tab) {
     this.tab = tab;
 
     this.onBrowserDisconnectClosure = this.onBrowserDisconnect.bind(this);
@@ -75,16 +75,16 @@ var dimensions = {
 
     this.worker = new Worker("dimensions.js");
     this.worker.onmessage = this.receiveWorkerMessage.bind(this);
-    this.worker.postMessage({ 
+    this.worker.postMessage({
       type: 'init',
-      debug: debug 
+      debug: debug
     });
   },
 
-  deactivate: function(silent){
+  deactivate: function (silent) {
     // if(!silent)
     //   this.port.postMessage({ type: 'destroy' });
-    
+
     // this.port.onMessage.removeListener(this.receiveBrowserMessageClosure);
     // this.port.onDisconnect.removeListener(this.onBrowserDisconnectClosure);
 
@@ -99,11 +99,11 @@ var dimensions = {
     window.removeTab(this.tab.id);
   },
 
-  onBrowserDisconnect: function(){
+  onBrowserDisconnect: function () {
     this.deactivate(true);
   },
 
-  initialize: function(){
+  initialize: function () {
     // this.port.onMessage.addListener(this.receiveBrowserMessageClosure);
     // this.port.onDisconnect.addListener(this.onBrowserDisconnectClosure);
     // this.port.postMessage({
@@ -112,21 +112,21 @@ var dimensions = {
     // });
   },
 
-  receiveWorkerMessage: function(event){
+  receiveWorkerMessage: function (event) {
     var forward = ['debug screen', 'distances', 'screenshot processed'];
 
-    if(forward.indexOf(event.data.type) > -1){
+    if (forward.indexOf(event.data.type) > -1) {
       // this.port.postMessage(event.data)
     }
   },
 
-  receiveBrowserMessage: function(event){
+  receiveBrowserMessage: function (event) {
     var forward = ['position', 'area'];
 
-    if(forward.indexOf(event.type) > -1){
+    if (forward.indexOf(event.type) > -1) {
       this.worker.postMessage(event)
     } else {
-      switch(event.type){
+      switch (event.type) {
         case 'take screenshot':
           this.takeScreenshot();
           break;
@@ -134,11 +134,11 @@ var dimensions = {
     }
   },
 
-  takeScreenshot: function(){
+  takeScreenshot: function () {
     // chrome.tabs.captureVisibleTab({ format: "png" }, this.parseScreenshot.bind(this));
   },
 
-  parseScreenshot: function(dataUrl){
+  parseScreenshot: function (dataUrl) {
     this.image.onload = this.loadImage.bind(this);
     this.image.src = dataUrl;
   },
@@ -150,22 +150,22 @@ var dimensions = {
   // responsible to load a image and extract the image data
   //
 
-  loadImage: function(){
+  loadImage: function () {
     this.ctx = this.canvas.getContext('2d');
 
     // adjust the canvas size to the image size
     this.canvas.width = this.tab.width;
     this.canvas.height = this.tab.height;
-    
+
     // draw the image to the canvas
     this.ctx.drawImage(this.image, 0, 0, this.canvas.width, this.canvas.height);
-    
+
     // read out the image data from the canvas
     var imgData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height).data;
 
-    this.worker.postMessage({ 
+    this.worker.postMessage({
       type: 'imgData',
-      imgData: imgData.buffer,  
+      imgData: imgData.buffer,
       width: this.canvas.width,
       height: this.canvas.height
     }, [imgData.buffer]);
diff --git a/dimensions.safariextension/tooltip.css b/dimensions.safariextension/tooltip.css
index 1e6f0aa..775c97d 100644
--- a/dimensions.safariextension/tooltip.css
+++ b/dimensions.safariextension/tooltip.css
@@ -39,70 +39,70 @@
   line-height: 20px;
   font-family: sans-serif;
   border-radius: 3px;
-  background: hsla(205,100%,10%,.55);
+  background: hsla(205, 100%, 10%, .55);
   -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-  .altColor .fn-tooltip {
-    background: hsla(50,100%,10%,.55);
-  }
+.altColor .fn-tooltip {
+  background: hsla(50, 100%, 10%, .55);
+}
 
-  .fn-tooltip.left {
-    left: auto;
-    right: 5px;
-  }
+.fn-tooltip.left {
+  left: auto;
+  right: 5px;
+}
 
-  .fn-tooltip.bottom {
-    bottom: auto;
-    top: 5px;
-  }
+.fn-tooltip.bottom {
+  bottom: auto;
+  top: 5px;
+}
 
 .fn-axis {
   position: absolute;
-  background: hsla(205,100%,50%,.55);
-}
-
-  .altColor .fn-axis {
-    background: hsla(50,100%,50%,.55);
-  }
-
-  .fn-axis:before,
-  .fn-axis:after {
-    content: "";
-    position: absolute;
-    background: inherit;
-  }
-
-  .x.fn-axis:before,
-  .x.fn-axis:after {
-    left: 0;
-    height: 5px;
-    top: -2px;
-    width: 1px;
-  }
-
-  .x.fn-axis:after {
-    left: 100%;
-  }
-
-  .y.fn-axis:before,
-  .y.fn-axis:after {
-    left: -2px;
-    height: 1px;
-    top: 0;
-    width: 5px;
-  }
-
-  .y.fn-axis:after {
-    top: 100%;
-  }
-
-  .x.fn-axis {
-    height: 1px;
-  }
-
-  .y.fn-axis {
-    width: 1px;
-  }
\ No newline at end of file
+  background: hsla(205, 100%, 50%, .55);
+}
+
+.altColor .fn-axis {
+  background: hsla(50, 100%, 50%, .55);
+}
+
+.fn-axis:before,
+.fn-axis:after {
+  content: "";
+  position: absolute;
+  background: inherit;
+}
+
+.x.fn-axis:before,
+.x.fn-axis:after {
+  left: 0;
+  height: 5px;
+  top: -2px;
+  width: 1px;
+}
+
+.x.fn-axis:after {
+  left: 100%;
+}
+
+.y.fn-axis:before,
+.y.fn-axis:after {
+  left: -2px;
+  height: 1px;
+  top: 0;
+  width: 5px;
+}
+
+.y.fn-axis:after {
+  top: 100%;
+}
+
+.x.fn-axis {
+  height: 1px;
+}
+
+.y.fn-axis {
+  width: 1px;
+}
\ No newline at end of file
diff --git a/dimensions.safariextension/tooltip.safari.js b/dimensions.safariextension/tooltip.safari.js
index 9915ad9..e8a91d7 100644
--- a/dimensions.safariextension/tooltip.safari.js
+++ b/dimensions.safariextension/tooltip.safari.js
@@ -6,14 +6,14 @@ var inputX, inputY;
 var altKeyWasPressed = false;
 var connectionClosed = false;
 var lineColor = getLineColor();
-var colorThreshold = [0.2,0.5,0.2];
+var colorThreshold = [0.2, 0.5, 0.2];
 var overlay = document.createElement('div');
 overlay.className = 'fn-noCursor';
 var debug;
 
-function init(){
+function init() {
   // prevent running inside of frames
-  if(window.top === window)
+  if (window.top === window)
     return false;
 
   window.addEventListener('mousemove', onInputMove);
@@ -28,16 +28,16 @@ function init(){
   requestNewScreenshot();
 }
 
-safari.self.addEventListener('message', function(event){
-  if(connectionClosed)
+safari.self.addEventListener('message', function (event) {
+  if (connectionClosed)
     return;
 
-  switch(event.name){
+  switch (event.name) {
     case 'init':
       init();
       debug = event.message.debug;
 
-      if(debug)
+      if (debug)
         createDebugScreen();
       break;
     case 'distances':
@@ -55,7 +55,7 @@ safari.self.addEventListener('message', function(event){
   }
 });
 
-function onResizeWindow(){
+function onResizeWindow() {
   overlay.width = window.innerWidth;
   overlay.height = window.innerHeight;
   onVisibleAreaChange();
@@ -63,22 +63,22 @@ function onResizeWindow(){
 
 onResizeWindow();
 
-function createDebugScreen(){
+function createDebugScreen() {
   debugScreen = document.createElement('canvas');
   dsx = debugScreen.getContext('2d');
   debugScreen.className = 'fn-debugScreen';
   body.appendChild(debugScreen);
 }
 
-function removeDebugScreen(){
-  if(!debug || !debugScreen)
+function removeDebugScreen() {
+  if (!debug || !debugScreen)
     return;
 
   body.removeChild(debugScreen);
 }
 
-function hideDebugScreen(){
-  if(!debug || !debugScreen)
+function hideDebugScreen() {
+  if (!debug || !debugScreen)
     return;
 
   debugScreen.classList.add('is-hidden');
@@ -91,19 +91,19 @@ function renderDebugScreenshot(map) {
 
   var visualization = dsx.createImageData(window.innerWidth, window.innerHeight);
 
-  for(var i=0, n=0, l=visualization.data.length; i<l; i++, n+= 4){
-    if(map && map[i] === 256) {
+  for (var i = 0, n = 0, l = visualization.data.length; i < l; i++, n += 4) {
+    if (map && map[i] === 256) {
       visualization.data[n] = 255; // r
-      visualization.data[n+1] = 0; // g
-      visualization.data[n+2] = 0; // b
-      visualization.data[n+3] = 128; // a
+      visualization.data[n + 1] = 0; // g
+      visualization.data[n + 2] = 0; // b
+      visualization.data[n + 3] = 128; // a
     }
   }
 
   dsx.putImageData(visualization, 0, 0);
 }
 
-function destroy(){
+function destroy() {
   connectionClosed = true;
   window.removeEventListener('mousemove', onInputMove);
   window.removeEventListener('touchmove', onInputMove);
@@ -114,56 +114,56 @@ function destroy(){
   enableCursor();
 }
 
-function removeDimensions(){
+function removeDimensions() {
   var dimensions = body.querySelector('.fn-dimensions');
-  if(dimensions)
+  if (dimensions)
     body.removeChild(dimensions);
 }
 
-function onVisibleAreaChange(){
-  if(!paused)
+function onVisibleAreaChange() {
+  if (!paused)
     pause();
   else
     return;
 
-  if(changeTimeout)
+  if (changeTimeout)
     clearTimeout(changeTimeout);
 
   changeTimeout = setTimeout(requestNewScreenshot, changeDelay);
 }
 
-function requestNewScreenshot(){
+function requestNewScreenshot() {
   safari.self.tab.dispatchMessage('take screenshot');
 }
 
-function pause(){
+function pause() {
   paused = true;
   removeDimensions();
   enableCursor();
 }
 
-function resume(){
+function resume() {
   paused = false;
   disableCursor();
 }
 
-function disableCursor(){
+function disableCursor() {
   body.appendChild(overlay);
 }
 
-function enableCursor(){
+function enableCursor() {
   body.removeChild(overlay);
 }
 
-function detectAltKeyPress(event){
-  if(event.altKey && !altKeyWasPressed){
+function detectAltKeyPress(event) {
+  if (event.altKey && !altKeyWasPressed) {
     altKeyWasPressed = true;
     sendToWorker(event);
   }
 }
 
-function detectAltKeyRelease(event){
-  if(altKeyWasPressed){
+function detectAltKeyRelease(event) {
+  if (altKeyWasPressed) {
     altKeyWasPressed = false;
     sendToWorker(event);
     hideDebugScreen();
@@ -177,8 +177,8 @@ function detectAltKeyRelease(event){
 // detects the current pointer position and requests the dimensions at that position
 //
 
-function onInputMove(event){
-  if(event.touches){
+function onInputMove(event) {
+  if (event.touches) {
     inputX = event.touches[0].clientX;
     inputY = event.touches[0].clientY;
   } else {
@@ -189,8 +189,8 @@ function onInputMove(event){
   sendToWorker(event);
 }
 
-function sendToWorker(event){
-  if(paused)
+function sendToWorker(event) {
+  if (paused)
     return;
 
   var name = event.altKey ? 'area' : 'position';
@@ -204,13 +204,13 @@ function sendToWorker(event){
 // renders the visualisation of the measured dimensions
 //
 
-function showDimensions(dimensions){
-  if(paused)
+function showDimensions(dimensions) {
+  if (paused)
     return;
 
   removeDimensions();
 
-  if(!dimensions)
+  if (!dimensions)
     return;
 
   var newDimensions = document.createElement('div');
@@ -218,9 +218,9 @@ function showDimensions(dimensions){
   newDimensions.style.left = dimensions.x + "px";
   newDimensions.style.top = dimensions.y + "px";
 
-  if(Math.abs(dimensions.backgroundColor[0] - lineColor[0]) <= colorThreshold[0] &&
-      Math.abs(dimensions.backgroundColor[1] - lineColor[1]) <= colorThreshold[1] &&
-      Math.abs(dimensions.backgroundColor[2] - lineColor[2]) <= colorThreshold[2])
+  if (Math.abs(dimensions.backgroundColor[0] - lineColor[0]) <= colorThreshold[0] &&
+    Math.abs(dimensions.backgroundColor[1] - lineColor[1]) <= colorThreshold[1] &&
+    Math.abs(dimensions.backgroundColor[2] - lineColor[2]) <= colorThreshold[2])
     newDimensions.className += ' altColor';
 
   var measureWidth = dimensions.left + dimensions.right;
@@ -240,12 +240,12 @@ function showDimensions(dimensions){
   tooltip.className = 'fn-tooltip';
 
   // add +1 on both axis because of the pixel below the mouse pointer
-  tooltip.textContent = (measureWidth+1) +" x "+ (measureHeight+1) + " px";
+  tooltip.textContent = (measureWidth + 1) + " x " + (measureHeight + 1) + " px";
 
-  if(dimensions.y < 26)
+  if (dimensions.y < 26)
     tooltip.classList.add('bottom');
 
-  if(dimensions.x > window.innerWidth - 110)
+  if (dimensions.x > window.innerWidth - 110)
     tooltip.classList.add('left');
 
   newDimensions.appendChild(xAxis);
@@ -281,17 +281,17 @@ function getLineColor() {
  * @param   Number  b       The blue color value
  * @return  Array           The HSL representation
  */
-function rgbToHsl(r, g, b){
+function rgbToHsl(r, g, b) {
   r /= 255, g /= 255, b /= 255;
   var max = Math.max(r, g, b), min = Math.min(r, g, b);
   var h, s, l = (max + min) / 2;
 
-  if(max == min){
+  if (max == min) {
     h = s = 0; // achromatic
-  }else{
+  } else {
     var d = max - min;
     s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-    switch(max){
+    switch (max) {
       case r: h = (g - b) / d + (g < b ? 6 : 0); break;
       case g: h = (b - r) / d + 2; break;
       case b: h = (r - g) / d + 4; break;
diff --git a/extension/chrome.js b/extension/chrome.js
index 5ed89ac..41775b4 100644
--- a/extension/chrome.js
+++ b/extension/chrome.js
@@ -1,33 +1,33 @@
 var debug = false;
 var tabs = {};
 
-function toggle(tab){
-  if(!tabs[tab.id])
+function toggle(tab) {
+  if (!tabs[tab.id])
     addTab(tab);
   else
     deactivateTab(tab.id);
 }
 
-function addTab(tab){
+function addTab(tab) {
   tabs[tab.id] = Object.create(dimensions);
   tabs[tab.id].activate(tab);
 }
 
-function deactivateTab(id){
+function deactivateTab(id) {
   tabs[id].deactivate();
 }
 
-function removeTab(id){
-  for(var tabId in tabs){
-    if(tabId == id)
+function removeTab(id) {
+  for (var tabId in tabs) {
+    if (tabId == id)
       delete tabs[tabId];
   }
 }
 
 var lastBrowserAction = null;
 
-chrome.browserAction.onClicked.addListener(function(tab){
-  if(lastBrowserAction && Date.now() - lastBrowserAction < 10){
+chrome.browserAction.onClicked.addListener(function (tab) {
+  if (lastBrowserAction && Date.now() - lastBrowserAction < 10) {
     // fix bug in Chrome Version 49.0.2623.87
     // that triggers browserAction.onClicked twice 
     // when called from shortcut _execute_browser_action
@@ -37,12 +37,12 @@ chrome.browserAction.onClicked.addListener(function(tab){
   lastBrowserAction = Date.now();
 });
 
-chrome.runtime.onConnect.addListener(function(port) {
-  tabs[ port.sender.tab.id ].initialize(port);
+chrome.runtime.onConnect.addListener(function (port) {
+  tabs[port.sender.tab.id].initialize(port);
 });
 
-chrome.runtime.onSuspend.addListener(function() {
-  for(var tabId in tabs){
+chrome.runtime.onSuspend.addListener(function () {
+  for (var tabId in tabs) {
     tabs[tabId].deactivate(true);
   }
 });
@@ -52,7 +52,7 @@ var dimensions = {
   canvas: document.createElement('canvas'),
   alive: true,
 
-  activate: function(tab){
+  activate: function (tab) {
     this.tab = tab;
 
     this.onBrowserDisconnectClosure = this.onBrowserDisconnect.bind(this);
@@ -60,7 +60,7 @@ var dimensions = {
 
     chrome.tabs.insertCSS(this.tab.id, { file: 'tooltip.css' });
     chrome.tabs.executeScript(this.tab.id, { file: 'tooltip.chrome.js' });
-    chrome.browserAction.setIcon({ 
+    chrome.browserAction.setIcon({
       tabId: this.tab.id,
       path: {
         16: "images/icon16_active.png",
@@ -72,26 +72,26 @@ var dimensions = {
 
     this.worker = new Worker("dimensions.js");
     this.worker.onmessage = this.receiveWorkerMessage.bind(this);
-    this.worker.postMessage({ 
+    this.worker.postMessage({
       type: 'init',
-      debug: debug 
+      debug: debug
     });
   },
 
-  deactivate: function(silent){
-    if(!this.port){
+  deactivate: function (silent) {
+    if (!this.port) {
       // not yet initialized
       this.alive = false;
       return;
     }
 
-    if(!silent)
+    if (!silent)
       this.port.postMessage({ type: 'destroy' });
-    
+
     this.port.onMessage.removeListener(this.receiveBrowserMessageClosure);
     this.port.onDisconnect.removeListener(this.onBrowserDisconnectClosure);
 
-    chrome.browserAction.setIcon({  
+    chrome.browserAction.setIcon({
       tabId: this.tab.id,
       path: {
         16: "images/icon16.png",
@@ -104,14 +104,14 @@ var dimensions = {
     window.removeTab(this.tab.id);
   },
 
-  onBrowserDisconnect: function(){
+  onBrowserDisconnect: function () {
     this.deactivate(true);
   },
 
-  initialize: function(port){
+  initialize: function (port) {
     this.port = port;
 
-    if(!this.alive){
+    if (!this.alive) {
       // was deactivated whilest still booting up
       this.deactivate();
       return;
@@ -125,21 +125,21 @@ var dimensions = {
     });
   },
 
-  receiveWorkerMessage: function(event){
+  receiveWorkerMessage: function (event) {
     var forward = ['debug screen', 'distances', 'screenshot processed'];
 
-    if(forward.indexOf(event.data.type) > -1){
+    if (forward.indexOf(event.data.type) > -1) {
       this.port.postMessage(event.data)
     }
   },
 
-  receiveBrowserMessage: function(event){
+  receiveBrowserMessage: function (event) {
     var forward = ['position', 'area'];
 
-    if(forward.indexOf(event.type) > -1){
+    if (forward.indexOf(event.type) > -1) {
       this.worker.postMessage(event)
     } else {
-      switch(event.type){
+      switch (event.type) {
         case 'take screenshot':
           this.takeScreenshot();
           break;
@@ -150,11 +150,11 @@ var dimensions = {
     }
   },
 
-  takeScreenshot: function(){
+  takeScreenshot: function () {
     chrome.tabs.captureVisibleTab({ format: "png" }, this.parseScreenshot.bind(this));
   },
 
-  parseScreenshot: function(dataUrl){
+  parseScreenshot: function (dataUrl) {
     this.image.onload = this.loadImage.bind(this);
     this.image.src = dataUrl;
   },
@@ -166,22 +166,22 @@ var dimensions = {
   // responsible to load a image and extract the image data
   //
 
-  loadImage: function(){
+  loadImage: function () {
     this.ctx = this.canvas.getContext('2d');
 
     // adjust the canvas size to the image size
     this.canvas.width = this.tab.width;
     this.canvas.height = this.tab.height;
-    
+
     // draw the image to the canvas
     this.ctx.drawImage(this.image, 0, 0, this.canvas.width, this.canvas.height);
-    
+
     // read out the image data from the canvas
     var imgData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height).data;
 
-    this.worker.postMessage({ 
+    this.worker.postMessage({
       type: 'imgData',
-      imgData: imgData.buffer,  
+      imgData: imgData.buffer,
       width: this.canvas.width,
       height: this.canvas.height
     }, [imgData.buffer]);
diff --git a/extension/dimensions.js b/extension/dimensions.js
index 3ca9ce7..5a31ce8 100644
--- a/extension/dimensions.js
+++ b/extension/dimensions.js
@@ -3,14 +3,14 @@ var dimensionsThreshold = 6;
 var debug;
 var map;
 
-onmessage = function(event){
-  switch(event.data.type){
+onmessage = function (event) {
+  switch (event.data.type) {
     case 'init':
       debug = event.data.debug;
       break;
     case 'imgData':
       imgData = new Uint8ClampedArray(event.data.imgData);
-      data = grayscale( imgData );
+      data = grayscale(imgData);
       width = event.data.width;
       height = event.data.height;
       postMessage({ type: "screenshot processed" });
@@ -38,7 +38,7 @@ onmessage = function(event){
 //
 
 function sendDebugScreen() {
-  postMessage({ 
+  postMessage({
     type: 'debug screen',
     map: map
   })
@@ -52,7 +52,7 @@ function sendDebugScreen() {
 // measures the area around pageX and pageY.
 //
 //
-function measureArea(pos){
+function measureArea(pos) {
   var x0, y0, startLightness;
 
   map = new Int16Array(data);
@@ -64,18 +64,18 @@ function measureArea(pos){
   pixelsInArea = [];
 
   measureAreaStopped = false;
-  
+
   setTimeout(nextTick, 0);
 }
 
-function nextTick(){
+function nextTick() {
   workOffStack();
 
-  if(debug)
+  if (debug)
     sendDebugScreen()
 
-  if(!measureAreaStopped){
-    if(stack.length){
+  if (!measureAreaStopped) {
+    if (stack.length) {
       setTimeout(nextTick, 0);
     } else {
       finishMeasureArea();
@@ -83,44 +83,44 @@ function nextTick(){
   }
 }
 
-function workOffStack(){
+function workOffStack() {
   var max = 500000;
   var count = 0;
 
-  while(count++ < max && stack.length){
+  while (count++ < max && stack.length) {
     floodFill();
   }
 }
 
-function floodFill(){
+function floodFill() {
   var xyl = stack.shift();
   var x = xyl[0];
   var y = xyl[1];
   var lastLightness = xyl[2];
   var currentLightness = getLightnessAt(map, x, y);
 
-  if(currentLightness > -1 && currentLightness < 256 && Math.abs(currentLightness - lastLightness) < areaThreshold){
+  if (currentLightness > -1 && currentLightness < 256 && Math.abs(currentLightness - lastLightness) < areaThreshold) {
     setLightnessAt(map, x, y, 256);
-    pixelsInArea.push([x,y]);
+    pixelsInArea.push([x, y]);
 
-    if(x < area.left)
+    if (x < area.left)
       area.left = x;
-    else if(x > area.right)
+    else if (x > area.right)
       area.right = x;
-    if(y < area.top)
+    if (y < area.top)
       area.top = y;
-    else if(y > area.bottom)
+    else if (y > area.bottom)
       area.bottom = y;
 
-    stack.push([x-1, y  , currentLightness]);
-    stack.push([x  , y+1, currentLightness]);
-    stack.push([x+1, y  , currentLightness]);
-    stack.push([x  , y-1, currentLightness]);
+    stack.push([x - 1, y, currentLightness]);
+    stack.push([x, y + 1, currentLightness]);
+    stack.push([x + 1, y, currentLightness]);
+    stack.push([x, y - 1, currentLightness]);
   }
 }
 
-function finishMeasureArea(){
-  var boundariePixels = { 
+function finishMeasureArea() {
+  var boundariePixels = {
     top: [],
     right: [],
     bottom: [],
@@ -132,18 +132,18 @@ function finishMeasureArea(){
 
   // find boundarie-pixels
 
-  for(var i=0, l=pixelsInArea.length; i<l; i++){
+  for (var i = 0, l = pixelsInArea.length; i < l; i++) {
     var x = pixelsInArea[i][0];
     var y = pixelsInArea[i][1];
 
-    if(x === area.left)
+    if (x === area.left)
       boundariePixels.left.push(y);
-    if(x === area.right)
+    if (x === area.right)
       boundariePixels.right.push(y);
 
-    if(y === area.top)
+    if (y === area.top)
       boundariePixels.top.push(x);
-    if(y === area.bottom)
+    if (y === area.bottom)
       boundariePixels.bottom.push(x);
   }
 
@@ -171,7 +171,7 @@ function finishMeasureArea(){
 }
 
 
-function getMaxSpread(sideA, sideB){
+function getMaxSpread(sideA, sideB) {
   var a = getDimensions(sideA);
   var b = getDimensions(sideB);
 
@@ -181,20 +181,20 @@ function getMaxSpread(sideA, sideB){
   return smallerSide.center;
 }
 
-function getDimensions(values){
+function getDimensions(values) {
   var min = Infinity;
   var max = 0;
 
-  for(var i=0, l=values.length; i<l; i++){
-    if(values[i] < min)
+  for (var i = 0, l = values.length; i < l; i++) {
+    if (values[i] < min)
       min = values[i]
-    if(values[i] > max)
+    if (values[i] > max)
       max = values[i]
   }
 
   return {
     min: min,
-    center: min + Math.floor((max - min)/2),
+    center: min + Math.floor((max - min) / 2),
     max: max,
     length: max - min
   }
@@ -208,7 +208,7 @@ function getDimensions(values){
 // around pageX and pageY.
 //
 
-function measureDistances(input){
+function measureDistances(input) {
   var distances = {
     top: 0,
     right: 0,
@@ -216,16 +216,16 @@ function measureDistances(input){
     left: 0
   };
   var directions = {
-    top:    { x:  0, y: -1 },
-    right:  { x:  1, y:  0 },
-    bottom: { x:  0, y:  1 },
-    left:   { x: -1, y:  0 }
+    top: { x: 0, y: -1 },
+    right: { x: 1, y: 0 },
+    bottom: { x: 0, y: 1 },
+    left: { x: -1, y: 0 }
   }
   var area = 0;
   var startLightness = getLightnessAt(data, input.x, input.y);
   var lastLightness;
 
-  for(var direction in distances){
+  for (var direction in distances) {
     var vector = directions[direction];
     var boundaryFound = false;
     var sx = input.x;
@@ -235,27 +235,27 @@ function measureDistances(input){
     // reset lightness to start lightness
     lastLightness = startLightness;
 
-    while(!boundaryFound){
+    while (!boundaryFound) {
       sx += vector.x;
       sy += vector.y;
       currentLightness = getLightnessAt(data, sx, sy);
 
-      if(currentLightness > -1 && Math.abs(currentLightness - lastLightness) < dimensionsThreshold){
+      if (currentLightness > -1 && Math.abs(currentLightness - lastLightness) < dimensionsThreshold) {
         distances[direction]++;
         lastLightness = currentLightness;
       } else {
         boundaryFound = true;
       }
     }
-    
+
     area += distances[direction];
   }
 
-  if(area <= 6){
+  if (area <= 6) {
     distances = { top: 0, right: 0, bottom: 0, left: 0 };
     var similarColorStreakThreshold = 8;
 
-    for(var direction in distances){
+    for (var direction in distances) {
       var vector = directions[direction];
       var boundaryFound = false;
       var sx = input.x;
@@ -265,18 +265,18 @@ function measureDistances(input){
 
       lastLightness = startLightness;
 
-      while(!boundaryFound){
+      while (!boundaryFound) {
         sx += vector.x;
         sy += vector.y;
         currentLightness = getLightnessAt(data, sx, sy);
 
-        if(currentLightness > -1){
+        if (currentLightness > -1) {
           distances[direction]++;
 
-          if(Math.abs(currentLightness - lastLightness) < dimensionsThreshold){
+          if (Math.abs(currentLightness - lastLightness) < dimensionsThreshold) {
             similarColorStreak++;
-            if(similarColorStreak === similarColorStreakThreshold){ 
-              distances[direction] -= (similarColorStreakThreshold+1);
+            if (similarColorStreak === similarColorStreakThreshold) {
+              distances[direction] -= (similarColorStreakThreshold + 1);
               boundaryFound = true;
             }
           } else {
@@ -300,8 +300,8 @@ function measureDistances(input){
   });
 }
 
-function getColorAt(x, y){
-  if(!inBoundaries(x, y))
+function getColorAt(x, y) {
+  if (!inBoundaries(x, y))
     return -1;
 
   var i = y * width * 4 + x * 4;
@@ -309,11 +309,11 @@ function getColorAt(x, y){
   return rgbToHsl(imgData[i], imgData[++i], imgData[++i]);
 }
 
-function getLightnessAt(data, x, y){
+function getLightnessAt(data, x, y) {
   return inBoundaries(x, y) ? data[y * width + x] : -1;
 }
 
-function setLightnessAt(data, x, y, value){
+function setLightnessAt(data, x, y, value) {
   return inBoundaries(x, y) ? data[y * width + x] = value : -1;
 }
 
@@ -324,8 +324,8 @@ function setLightnessAt(data, x, y, value){
 //  
 // checks if x and y are in the canvas boundaries
 //
-function inBoundaries(x, y){
-  if(x >= 0 && x < width && y >= 0 && y < height)
+function inBoundaries(x, y) {
+  if (x >= 0 && x < width && y >= 0 && y < height)
     return true;
   else
     return false;
@@ -338,13 +338,13 @@ function inBoundaries(x, y){
 // reduces the input image data to an array of gray shades.
 //
 
-function grayscale(imgData){
-  var gray = new Int16Array(imgData.length/4);
+function grayscale(imgData) {
+  var gray = new Int16Array(imgData.length / 4);
 
-  for(var i=0, n=0, l=imgData.length; i<l; i+=4, n++){
+  for (var i = 0, n = 0, l = imgData.length; i < l; i += 4, n++) {
     var r = imgData[i],
-        g = imgData[i+1],
-        b = imgData[i+2];
+      g = imgData[i + 1],
+      b = imgData[i + 2];
 
     // weighted grayscale algorithm
     gray[n] = Math.round(r * 0.3 + g * 0.59 + b * 0.11);
@@ -364,17 +364,17 @@ function grayscale(imgData){
  * @param   Number  b       The blue color value
  * @return  Array           The HSL representation
  */
-function rgbToHsl(r, g, b){
+function rgbToHsl(r, g, b) {
   r /= 255, g /= 255, b /= 255;
   var max = Math.max(r, g, b), min = Math.min(r, g, b);
   var h, s, l = (max + min) / 2;
 
-  if(max == min){
+  if (max == min) {
     h = s = 0; // achromatic
-  }else{
+  } else {
     var d = max - min;
     s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-    switch(max){
+    switch (max) {
       case r: h = (g - b) / d + (g < b ? 6 : 0); break;
       case g: h = (b - r) / d + 2; break;
       case b: h = (r - g) / d + 4; break;
diff --git a/extension/manifest.json b/extension/manifest.json
index 242a3c4..94e85fa 100644
--- a/extension/manifest.json
+++ b/extension/manifest.json
@@ -4,14 +4,16 @@
   "version": "2.0.5",
   "manifest_version": 2,
   "author": "Felix Niklas",
-  "icons": { 
-    "16":  "images/icon16.png",
-    "32":  "images/icon16@2x.png",
-    "48":  "images/icon48.png",
-    "128": "images/icon128.png" 
+  "icons": {
+    "16": "images/icon16.png",
+    "32": "images/icon16@2x.png",
+    "48": "images/icon48.png",
+    "128": "images/icon128.png"
   },
   "background": {
-    "scripts": ["chrome.js"],
+    "scripts": [
+      "chrome.js"
+    ],
     "persistent": false
   },
   "commands": {
diff --git a/extension/tooltip.chrome.js b/extension/tooltip.chrome.js
index a192bfc..19d07c9 100644
--- a/extension/tooltip.chrome.js
+++ b/extension/tooltip.chrome.js
@@ -7,12 +7,12 @@ var inputX, inputY;
 var altKeyWasPressed = false;
 var connectionClosed = false;
 var lineColor = getLineColor();
-var colorThreshold = [0.2,0.5,0.2];
+var colorThreshold = [0.2, 0.5, 0.2];
 var overlay = document.createElement('div');
 overlay.className = 'fn-noCursor';
 var debug;
 
-function init(){
+function init() {
   window.addEventListener('mousemove', onInputMove);
   window.addEventListener('touchmove', onInputMove);
   window.addEventListener('scroll', onVisibleAreaChange);
@@ -26,15 +26,15 @@ function init(){
   requestNewScreenshot();
 }
 
-port.onMessage.addListener(function(event){
-  if(connectionClosed)
+port.onMessage.addListener(function (event) {
+  if (connectionClosed)
     return;
 
-  switch(event.type){
+  switch (event.type) {
     case 'init':
       debug = event.debug;
 
-      if(debug)
+      if (debug)
         createDebugScreen();
       break;
     case 'distances':
@@ -52,7 +52,7 @@ port.onMessage.addListener(function(event){
   }
 });
 
-function onResizeWindow(){
+function onResizeWindow() {
   overlay.width = window.innerWidth;
   overlay.height = window.innerHeight;
   onVisibleAreaChange();
@@ -60,22 +60,22 @@ function onResizeWindow(){
 
 onResizeWindow();
 
-function createDebugScreen(){
+function createDebugScreen() {
   debugScreen = document.createElement('canvas');
   dsx = debugScreen.getContext('2d');
   debugScreen.className = 'fn-debugScreen';
   body.appendChild(debugScreen);
 }
 
-function removeDebugScreen(){
-  if(!debug || !debugScreen)
+function removeDebugScreen() {
+  if (!debug || !debugScreen)
     return;
 
   body.removeChild(debugScreen);
 }
 
-function hideDebugScreen(){
-  if(!debug || !debugScreen)
+function hideDebugScreen() {
+  if (!debug || !debugScreen)
     return;
 
   debugScreen.classList.add('is-hidden');
@@ -88,19 +88,19 @@ function renderDebugScreenshot(map) {
 
   var visualization = dsx.createImageData(window.innerWidth, window.innerHeight);
 
-  for(var i=0, n=0, l=visualization.data.length; i<l; i++, n+= 4){
-    if(map && map[i] === 256) {
+  for (var i = 0, n = 0, l = visualization.data.length; i < l; i++, n += 4) {
+    if (map && map[i] === 256) {
       visualization.data[n] = 255; // r
-      visualization.data[n+1] = 0; // g
-      visualization.data[n+2] = 0; // b
-      visualization.data[n+3] = 128; // a
+      visualization.data[n + 1] = 0; // g
+      visualization.data[n + 2] = 0; // b
+      visualization.data[n + 3] = 128; // a
     }
   }
 
   dsx.putImageData(visualization, 0, 0);
 }
 
-function destroy(){
+function destroy() {
   connectionClosed = true;
   window.removeEventListener('mousemove', onInputMove);
   window.removeEventListener('touchmove', onInputMove);
@@ -111,56 +111,56 @@ function destroy(){
   enableCursor();
 }
 
-function removeDimensions(){
+function removeDimensions() {
   var dimensions = body.querySelector('.fn-dimensions');
-  if(dimensions)
+  if (dimensions)
     body.removeChild(dimensions);
 }
 
-function onVisibleAreaChange(){
-  if(!paused)
+function onVisibleAreaChange() {
+  if (!paused)
     pause();
   else
     return;
 
-  if(changeTimeout)
+  if (changeTimeout)
     clearTimeout(changeTimeout);
 
   changeTimeout = setTimeout(requestNewScreenshot, changeDelay);
 }
 
-function requestNewScreenshot(){
+function requestNewScreenshot() {
   port.postMessage({ type: 'take screenshot' });
 }
 
-function pause(){
+function pause() {
   paused = true;
   removeDimensions();
   enableCursor();
 }
 
-function resume(){
+function resume() {
   paused = false;
   disableCursor();
 }
 
-function disableCursor(){
+function disableCursor() {
   body.appendChild(overlay);
 }
 
-function enableCursor(){
+function enableCursor() {
   body.removeChild(overlay);
 }
 
-function detectAltKeyPress(event){
-  if(event.altKey && !altKeyWasPressed){
+function detectAltKeyPress(event) {
+  if (event.altKey && !altKeyWasPressed) {
     altKeyWasPressed = true;
     sendToWorker(event);
   }
 }
 
-function detectAltKeyRelease(event){
-  if(altKeyWasPressed){
+function detectAltKeyRelease(event) {
+  if (altKeyWasPressed) {
     altKeyWasPressed = false;
     sendToWorker(event);
     hideDebugScreen();
@@ -171,7 +171,7 @@ function onKeyRelease(event) {
   switch (event.code) {
     case 'Escape':
       port.postMessage({ type: 'close_overlay' });
-    break;
+      break;
   }
 }
 
@@ -182,8 +182,8 @@ function onKeyRelease(event) {
 // detects the current pointer position and requests the dimensions at that position
 //
 
-function onInputMove(event){
-  if(event.touches){
+function onInputMove(event) {
+  if (event.touches) {
     inputX = event.touches[0].clientX;
     inputY = event.touches[0].clientY;
   } else {
@@ -194,12 +194,12 @@ function onInputMove(event){
   sendToWorker(event);
 }
 
-function sendToWorker(event){
-  if(paused)
+function sendToWorker(event) {
+  if (paused)
     return;
 
-  port.postMessage({ 
-    type: event.altKey ? 'area' : 'position', 
+  port.postMessage({
+    type: event.altKey ? 'area' : 'position',
     data: { x: inputX, y: inputY }
   });
 }
@@ -211,13 +211,13 @@ function sendToWorker(event){
 // renders the visualisation of the measured dimensions
 //
 
-function showDimensions(dimensions){
-  if(paused)
+function showDimensions(dimensions) {
+  if (paused)
     return;
 
   removeDimensions();
 
-  if(!dimensions)
+  if (!dimensions)
     return;
 
   var newDimensions = document.createElement('div');
@@ -225,9 +225,9 @@ function showDimensions(dimensions){
   newDimensions.style.left = dimensions.x + "px";
   newDimensions.style.top = dimensions.y + "px";
 
-  if(Math.abs(dimensions.backgroundColor[0] - lineColor[0]) <= colorThreshold[0] &&
-      Math.abs(dimensions.backgroundColor[1] - lineColor[1]) <= colorThreshold[1] &&
-      Math.abs(dimensions.backgroundColor[2] - lineColor[2]) <= colorThreshold[2])
+  if (Math.abs(dimensions.backgroundColor[0] - lineColor[0]) <= colorThreshold[0] &&
+    Math.abs(dimensions.backgroundColor[1] - lineColor[1]) <= colorThreshold[1] &&
+    Math.abs(dimensions.backgroundColor[2] - lineColor[2]) <= colorThreshold[2])
     newDimensions.className += ' altColor';
 
   var measureWidth = dimensions.left + dimensions.right;
@@ -247,12 +247,12 @@ function showDimensions(dimensions){
   tooltip.className = 'fn-tooltip';
 
   // add +1 on both axis because of the pixel below the mouse pointer
-  tooltip.textContent = (measureWidth+1) +" x "+ (measureHeight+1) + " px";
+  tooltip.textContent = (measureWidth + 1) + " x " + (measureHeight + 1) + " px";
 
-  if(dimensions.y < 26)
+  if (dimensions.y < 26)
     tooltip.classList.add('bottom');
 
-  if(dimensions.x > window.innerWidth - 110)
+  if (dimensions.x > window.innerWidth - 110)
     tooltip.classList.add('left');
 
   newDimensions.appendChild(xAxis);
@@ -288,17 +288,17 @@ function getLineColor() {
  * @param   Number  b       The blue color value
  * @return  Array           The HSL representation
  */
-function rgbToHsl(r, g, b){
+function rgbToHsl(r, g, b) {
   r /= 255, g /= 255, b /= 255;
   var max = Math.max(r, g, b), min = Math.min(r, g, b);
   var h, s, l = (max + min) / 2;
 
-  if(max == min){
+  if (max == min) {
     h = s = 0; // achromatic
-  }else{
+  } else {
     var d = max - min;
     s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-    switch(max){
+    switch (max) {
       case r: h = (g - b) / d + (g < b ? 6 : 0); break;
       case g: h = (b - r) / d + 2; break;
       case b: h = (r - g) / d + 4; break;
diff --git a/extension/tooltip.css b/extension/tooltip.css
index edd3501..4be0a11 100644
--- a/extension/tooltip.css
+++ b/extension/tooltip.css
@@ -40,70 +40,70 @@
   font-family: sans-serif;
   direction: ltr;
   border-radius: 3px;
-  background: hsla(205,100%,10%,.55);
+  background: hsla(205, 100%, 10%, .55);
   -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-  .altColor .fn-tooltip {
-    background: hsla(50,100%,10%,.55);
-  }
+.altColor .fn-tooltip {
+  background: hsla(50, 100%, 10%, .55);
+}
 
-  .fn-tooltip.left {
-    left: auto;
-    right: 5px;
-  }
+.fn-tooltip.left {
+  left: auto;
+  right: 5px;
+}
 
-  .fn-tooltip.bottom {
-    bottom: auto;
-    top: 5px;
-  }
+.fn-tooltip.bottom {
+  bottom: auto;
+  top: 5px;
+}
 
 .fn-axis {
   position: absolute;
-  background: hsla(205,100%,50%,.55);
-}
-
-  .altColor .fn-axis {
-    background: hsla(50,100%,50%,.55);
-  }
-
-  .fn-axis:before,
-  .fn-axis:after {
-    content: "";
-    position: absolute;
-    background: inherit;
-  }
-
-  .x.fn-axis:before,
-  .x.fn-axis:after {
-    left: 0;
-    height: 5px;
-    top: -2px;
-    width: 1px;
-  }
-
-  .x.fn-axis:after {
-    left: 100%;
-  }
-
-  .y.fn-axis:before,
-  .y.fn-axis:after {
-    left: -2px;
-    height: 1px;
-    top: 0;
-    width: 5px;
-  }
-
-  .y.fn-axis:after {
-    top: 100%;
-  }
-
-  .x.fn-axis {
-    height: 1px;
-  }
-
-  .y.fn-axis {
-    width: 1px;
-  }
+  background: hsla(205, 100%, 50%, .55);
+}
+
+.altColor .fn-axis {
+  background: hsla(50, 100%, 50%, .55);
+}
+
+.fn-axis:before,
+.fn-axis:after {
+  content: "";
+  position: absolute;
+  background: inherit;
+}
+
+.x.fn-axis:before,
+.x.fn-axis:after {
+  left: 0;
+  height: 5px;
+  top: -2px;
+  width: 1px;
+}
+
+.x.fn-axis:after {
+  left: 100%;
+}
+
+.y.fn-axis:before,
+.y.fn-axis:after {
+  left: -2px;
+  height: 1px;
+  top: 0;
+  width: 5px;
+}
+
+.y.fn-axis:after {
+  top: 100%;
+}
+
+.x.fn-axis {
+  height: 1px;
+}
+
+.y.fn-axis {
+  width: 1px;
+}
\ No newline at end of file
diff --git a/js/worker.js b/js/worker.js
index 87f6917..794fffa 100644
--- a/js/worker.js
+++ b/js/worker.js
@@ -1,9 +1,9 @@
 var data, width, height, threshold, runMeasureAreaProcess;
 
-onmessage = function(event){
-  switch(event.data.type){
+onmessage = function (event) {
+  switch (event.data.type) {
     case "imgData":
-      data = grayscale( new Uint8ClampedArray(event.data.imgData) );
+      data = grayscale(new Uint8ClampedArray(event.data.imgData));
       width = event.data.width;
       height = event.data.height;
       threshold = event.data.threshold;
@@ -38,7 +38,7 @@ onmessage = function(event){
 //
 //
 
-function measureArea(x0, y0){
+function measureArea(x0, y0) {
   var map = new Int16Array(data);
   var area = { top: y0, right: x0, bottom: y0, left: x0 };
   var lightness = getLightnessAt(map, x0, y0);
@@ -49,8 +49,8 @@ function measureArea(x0, y0){
   var maxArea = 10000000;
   var i = 0;
 
-  while(runMeasureAreaProcess && stack.length){
-    if(++i > maxArea)
+  while (runMeasureAreaProcess && stack.length) {
+    if (++i > maxArea)
       return false;
 
     var xy = stack.shift();
@@ -58,33 +58,33 @@ function measureArea(x0, y0){
     var y = xy[1];
     var currentLightness = getLightnessAt(map, x, y);
 
-    if(currentLightness > -1 && Math.abs(currentLightness - lightness) < threshold){
+    if (currentLightness > -1 && Math.abs(currentLightness - lightness) < threshold) {
       setLightnessAt(map, x, y, 999);
-      pixelsInArea.push([x,y]);
+      pixelsInArea.push([x, y]);
 
-      if(x < area.left)
+      if (x < area.left)
         area.left = x;
-      else if(x > area.right)
+      else if (x > area.right)
         area.right = x;
-      if(y < area.top)
+      if (y < area.top)
         area.top = y;
-      else if(y > area.bottom)
+      else if (y > area.bottom)
         area.bottom = y;
 
-      stack.push([x-1, y  ]);
-      stack.push([x  , y+1]);
-      stack.push([x+1, y  ]);
-      stack.push([x  , y-1]);
+      stack.push([x - 1, y]);
+      stack.push([x, y + 1]);
+      stack.push([x + 1, y]);
+      stack.push([x, y - 1]);
     }
   }
 
-  for(var i=0, l=pixelsInArea.length; i<l; i++){
+  for (var i = 0, l = pixelsInArea.length; i < l; i++) {
     var x = pixelsInArea[i][0];
     var y = pixelsInArea[i][1];
 
-    if(x === area.left || x === area.right)
+    if (x === area.left || x === area.right)
       boundaries.vertical.push(y);
-    if(y === area.top || y === area.bottom)
+    if (y === area.top || y === area.bottom)
       boundaries.horizontal.push(x);
   }
 
@@ -100,14 +100,14 @@ function measureArea(x0, y0){
 }
 
 
-function getAverage(values){
+function getAverage(values) {
   var i = values.length,
     sum = 0;
   while (i--) {
     sum = sum + values[i];
   }
 
-  return Math.floor(sum/values.length);
+  return Math.floor(sum / values.length);
 }
 
 
@@ -119,8 +119,8 @@ function getAverage(values){
 // around pageX and pageY.
 //
 
-function measureDistances(x, y){
-  if(!inBoundaries(x, y))
+function measureDistances(x, y) {
+  if (!inBoundaries(x, y))
     return false;
 
   var area = 0;
@@ -133,10 +133,10 @@ function measureDistances(x, y){
   }
   var lightness = getLightnessAt(data, x, y);
 
-  if(lightness === 68)
+  if (lightness === 68)
     return false;
 
-  for(var direction in distances){
+  for (var direction in distances) {
     var vector = directions[direction];
     var boundaryFound = false;
     var sx = x;
@@ -144,12 +144,12 @@ function measureDistances(x, y){
     var color;
     var currentLightness;
 
-    while(!boundaryFound){
+    while (!boundaryFound) {
       sx += vector.x;
       sy += vector.y;
       currentLightness = getLightnessAt(data, sx, sy);
 
-      if(currentLightness && Math.abs(currentLightness - lightness) < threshold){
+      if (currentLightness && Math.abs(currentLightness - lightness) < threshold) {
         distances[direction]++;
       } else {
         area += distances[direction];
@@ -158,11 +158,11 @@ function measureDistances(x, y){
     }
   }
 
-  if(area <= 6){
+  if (area <= 6) {
     distances = { top: 0, right: 0, bottom: 0, left: 0 };
     var similarColorStreakThreshold = 10;
 
-    for(var direction in distances){
+    for (var direction in distances) {
       var vector = directions[direction];
       var boundaryFound = false;
       var sx = x;
@@ -171,18 +171,18 @@ function measureDistances(x, y){
       var lastLightness = lightness;
       var similarColorStreak = 0;
 
-      while(!boundaryFound){
+      while (!boundaryFound) {
         sx += vector.x;
         sy += vector.y;
         currentLightness = getLightnessAt(data, sx, sy);
 
-        if(currentLightness){
+        if (currentLightness) {
           distances[direction]++;
 
-          if(Math.abs(currentLightness - lastLightness) < threshold){
+          if (Math.abs(currentLightness - lastLightness) < threshold) {
             similarColorStreak++;
-            if(similarColorStreak === similarColorStreakThreshold){ 
-              distances[direction] -= (similarColorStreakThreshold+1);
+            if (similarColorStreak === similarColorStreakThreshold) {
+              distances[direction] -= (similarColorStreakThreshold + 1);
               boundaryFound = true;
             }
           } else {
@@ -202,11 +202,11 @@ function measureDistances(x, y){
   return distances;
 }
 
-function getLightnessAt(I, x, y){
+function getLightnessAt(I, x, y) {
   return inBoundaries(x, y) ? I[y * width + x] : -1;
 }
 
-function setLightnessAt(I, x, y, value){
+function setLightnessAt(I, x, y, value) {
   return inBoundaries(x, y) ? I[y * width + x] = value : -1;
 }
 
@@ -217,8 +217,8 @@ function setLightnessAt(I, x, y, value){
 // checks if x and y are in the canvas boundaries
 //
 
-function inBoundaries(x, y){
-  if(x > 0 && x < width && y > 0 && y < height)
+function inBoundaries(x, y) {
+  if (x > 0 && x < width && y > 0 && y < height)
     return true;
   else
     return false;
@@ -231,13 +231,13 @@ function inBoundaries(x, y){
 // reduces the input image data to an array of gray shades.
 //
 
-function grayscale(imgData){
-  var gray = new Int16Array(imgData.length/4);
+function grayscale(imgData) {
+  var gray = new Int16Array(imgData.length / 4);
 
-  for(var i=0, n=0, l=imgData.length; i<l; i+=4, n++){
+  for (var i = 0, n = 0, l = imgData.length; i < l; i += 4, n++) {
     var r = imgData[i],
-        g = imgData[i+1],
-        b = imgData[i+2];
+      g = imgData[i + 1],
+      b = imgData[i + 2];
 
     // weighted grayscale algorithm
     gray[n] = Math.round(r * 0.3 + g * 0.59 + b * 0.11);

From 20e10d6f330909d8aab01666fecb70d554016216 Mon Sep 17 00:00:00 2001
From: Viktor Borisov <vik-borisov@users.noreply.github.com>
Date: Fri, 24 Mar 2023 14:58:53 +0700
Subject: [PATCH 2/3] add willReadFrequently

---
 dimensions.safariextension/safari.js         | 2 +-
 dimensions.safariextension/tooltip.safari.js | 2 +-
 extension/chrome.js                          | 2 +-
 extension/tooltip.chrome.js                  | 2 +-
 index.html                                   | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/dimensions.safariextension/safari.js b/dimensions.safariextension/safari.js
index b128032..ce59d0c 100644
--- a/dimensions.safariextension/safari.js
+++ b/dimensions.safariextension/safari.js
@@ -151,7 +151,7 @@ var dimensions = {
   //
 
   loadImage: function () {
-    this.ctx = this.canvas.getContext('2d');
+    this.ctx = this.canvas.getContext('2d', { willReadFrequently: true });
 
     // adjust the canvas size to the image size
     this.canvas.width = this.tab.width;
diff --git a/dimensions.safariextension/tooltip.safari.js b/dimensions.safariextension/tooltip.safari.js
index e8a91d7..0a51746 100644
--- a/dimensions.safariextension/tooltip.safari.js
+++ b/dimensions.safariextension/tooltip.safari.js
@@ -65,7 +65,7 @@ onResizeWindow();
 
 function createDebugScreen() {
   debugScreen = document.createElement('canvas');
-  dsx = debugScreen.getContext('2d');
+  dsx = debugScreen.getContext('2d', { willReadFrequently: true });
   debugScreen.className = 'fn-debugScreen';
   body.appendChild(debugScreen);
 }
diff --git a/extension/chrome.js b/extension/chrome.js
index 41775b4..d44abec 100644
--- a/extension/chrome.js
+++ b/extension/chrome.js
@@ -167,7 +167,7 @@ var dimensions = {
   //
 
   loadImage: function () {
-    this.ctx = this.canvas.getContext('2d');
+    this.ctx = this.canvas.getContext('2d', { willReadFrequently: true });
 
     // adjust the canvas size to the image size
     this.canvas.width = this.tab.width;
diff --git a/extension/tooltip.chrome.js b/extension/tooltip.chrome.js
index 19d07c9..79d516c 100644
--- a/extension/tooltip.chrome.js
+++ b/extension/tooltip.chrome.js
@@ -62,7 +62,7 @@ onResizeWindow();
 
 function createDebugScreen() {
   debugScreen = document.createElement('canvas');
-  dsx = debugScreen.getContext('2d');
+  dsx = debugScreen.getContext('2d', { willReadFrequently: true });
   debugScreen.className = 'fn-debugScreen';
   body.appendChild(debugScreen);
 }
diff --git a/index.html b/index.html
index f4b7b9d..f548985 100644
--- a/index.html
+++ b/index.html
@@ -202,7 +202,7 @@ <h2>Open Source</h2>
 
 function drawCanvas(){
   canvas = document.createElement('canvas');
-  ctx = canvas.getContext('2d');
+  ctx = canvas.getContext('2d', { willReadFrequently: true });
 
   // adjust the canvas size to the image size
   width = canvas.width = holder.clientWidth;

From 74722a8a1536805c084720bf5bf8c9f66c975d2d Mon Sep 17 00:00:00 2001
From: Viktor Borisov <vik-borisov@users.noreply.github.com>
Date: Fri, 24 Mar 2023 20:33:56 +0700
Subject: [PATCH 3/3] reduce trashhold

---
 extension/dimensions.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/extension/dimensions.js b/extension/dimensions.js
index 5a31ce8..b5b1077 100644
--- a/extension/dimensions.js
+++ b/extension/dimensions.js
@@ -1,5 +1,5 @@
-var areaThreshold = 6;
-var dimensionsThreshold = 6;
+var areaThreshold = 4;
+var dimensionsThreshold = 4;
 var debug;
 var map;