new sandbox strategy

In this commit we switched the sandbox strategy to use iframe's
sandbox attribute. Indeed we do not need delegate event anymore,
but need to add some styles into the iframe.
The details were documented in the sandbox part of internal design.

src/replay/styles/inject-style.ts

@@ -0,0 +1,6 @@
+const rules: string[] = [
+  'iframe { background: #ccc }',
+  'noscript { display: none !important; }',
+];
+
+export default rules;

src/replay/styles/style.css

@@ -3,8 +3,12 @@
 }
 .replayer-mouse {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  width: 20px;
+  height: 20px;
+  background-size: contain;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDUwIDUwIiB4PSIwcHgiIHk9IjBweCI+PHRpdGxlPkRlc2lnbl90bnA8L3RpdGxlPjxwYXRoIGQ9Ik00OC43MSw0Mi45MUwzNC4wOCwyOC4yOSw0NC4zMywxOEExLDEsMCwwLDAsNDQsMTYuMzlMMi4zNSwxLjA2QTEsMSwwLDAsMCwxLjA2LDIuMzVMMTYuMzksNDRhMSwxLDAsMCwwLDEuNjUuMzZMMjguMjksMzQuMDgsNDIuOTEsNDguNzFhMSwxLDAsMCwwLDEuNDEsMGw0LjM4LTQuMzhBMSwxLDAsMCwwLDQ4LjcxLDQyLjkxWm0tNS4wOSwzLjY3TDI5LDMyYTEsMSwwLDAsMC0xLjQxLDBsLTkuODUsOS44NUwzLjY5LDMuNjlsMzguMTIsMTRMMzIsMjcuNThBMSwxLDAsMCwwLDMyLDI5TDQ2LjU5LDQzLjYyWiI+PC9wYXRoPjwvc3ZnPg==');
 }
 .replayer-mouse::after {
   content: '';
@@ -12,7 +16,27 @@
   width: 20px;
   height: 20px;
   border-radius: 10px;
-  background: thistle;
+  background: rgb(73, 80, 246);
   transform: translate(-10px, -10px);
-  opacity: 0.5;
+  opacity: 0.3;
+}
+.replayer-mouse.active::after {
+  animation: click 0.3s ease-in-out 1;
+}
+
+@keyframes click {
+  0% {
+    opacity: 0.3;
+    width: 20px;
+    height: 20px;
+    border-radius: 10px;
+    transform: translate(-10px, -10px);
+  }
+  50% {
+    opacity: 0.5;
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+    transform: translate(-5px, -5px);
+  }
 }