WIP - Remove canvas and use HTML/CSS

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;
     }
 
+    // Make it two times the padding because, half will be given on left and half on right
+    const requiredPadding = this.options.padding * 2;
+
     // Show the overlay
-    this.pageOverlay.style.display = 'block';
-    this.highlightStage.style.display = 'block';
+    this.pageOverlay.style.opacity = `${this.options.opacity}`;
 
-    const elementSize = this.highlightedElement.getSize();
+    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();

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 {