From 24dfcae28f3a18cf6eced0eac29b5e31255fa130 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 13 Mar 2018 00:48:19 +0100
Subject: [PATCH] WIP - Remove canvas and use HTML/CSS

---
 src/core/overlay.js | 23 ++++++++++++-----------
 src/driver.scss     | 14 ++++++++++++--
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/core/overlay.js b/src/core/overlay.js
index 91db094..95d91d0 100644
--- a/src/core/overlay.js
+++ b/src/core/overlay.js
@@ -102,10 +102,8 @@ export default class Overlay {
     this.highlightedElement = null;
     this.lastHighlightedElement = null;
 
-    this.pageOverlay.style.display = 'none';
+    this.pageOverlay.style.opacity = '0';
     this.highlightStage.style.display = 'none';
-
-    this.draw();
   }
 
   /**
@@ -118,19 +116,22 @@ export default class Overlay {
       return;
     }
 
-    // Show the overlay
-    this.pageOverlay.style.display = 'block';
-    this.highlightStage.style.display = 'block';
+    // Make it two times the padding because, half will be given on left and half on right
+    const requiredPadding = this.options.padding * 2;
 
-    const elementSize = this.highlightedElement.getSize();
+    // Show the overlay
+    this.pageOverlay.style.opacity = `${this.options.opacity}`;
+
+    const width = (this.positionToHighlight.right - this.positionToHighlight.left) + (requiredPadding);
+    const height = (this.positionToHighlight.bottom - this.positionToHighlight.top) + (requiredPadding);
 
     // Show the stage
     this.highlightStage.style.display = 'block';
     this.highlightStage.style.position = 'absolute';
-    this.highlightStage.style.width = `${elementSize.width + this.options.padding}px`;
-    this.highlightStage.style.height = `${elementSize.height + this.options.padding}px`;
-    this.highlightStage.style.top = `${this.positionToHighlight.top}px`;
-    this.highlightStage.style.left = `${this.positionToHighlight.left}px`;
+    this.highlightStage.style.width = `${width}px`;
+    this.highlightStage.style.height = `${height}px`;
+    this.highlightStage.style.top = `${this.positionToHighlight.top - (requiredPadding / 2)}px`;
+    this.highlightStage.style.left = `${this.positionToHighlight.left - (requiredPadding / 2)}px`;
 
     // Element has been highlighted
     this.highlightedElement.onHighlighted();
diff --git a/src/driver.scss b/src/driver.scss
index 9464499..ac8c233 100644
--- a/src/driver.scss
+++ b/src/driver.scss
@@ -108,16 +108,21 @@ div#driver-popover-item {
 }
 
 div#driver-page-overlay {
-  display: none;
+  display: block;
   width: 100%;
   height: 100%;
   background: black;
   top: 0;
   left: 0;
   position: fixed;
-  opacity: 0.7;
+  opacity: 0;
   pointer-events: none;
   z-index: 100002 !important;
+  -webkit-transition: all 0.2s;
+  -moz-transition: all 0.2s;
+  -ms-transition: all 0.2s;
+  -o-transition: all 0.2s;
+  transition: all 0.2s;
 }
 
 div#driver-highlighted-element-stage {
@@ -129,6 +134,11 @@ div#driver-highlighted-element-stage {
   background: white;
   z-index: 100003 !important;
   display: none;
+  -webkit-transition: all 0.2s;
+  -moz-transition: all 0.2s;
+  -ms-transition: all 0.2s;
+  -o-transition: all 0.2s;
+  transition: all 0.2s;
 }
 
 .driver-highlighted-element {