feat: add support for user-event (#209)

Author: smeijer

devtools/src/content-script/highlighter/Overlay.js

@@ -228,7 +228,7 @@ export default class Overlay {
     const name = elements[0].nodeName.toLowerCase();
 
     const node = elements[0];
-    const hook = node.ownerDocument.defaultView.__TESTING_PLAYGROUND__;
+    const hook = node.ownerDocument.defaultView.__TESTING_PLAYGROUND__ || {};
 
     let tipData = {
       target: node,

devtools/src/content-script/highlighter/index.js

@@ -26,15 +26,23 @@ export default function setupHighlighter({
   onSelectNode = () => {},
 } = {}) {
   let isInspecting = false;
+  let stopOnClick = true;
+  let blockEvents = true;
 
   Bridge.onMessage('CLEAR_HIGHLIGHTS', withMessageData(clearHighlights));
   Bridge.onMessage('HIGHLIGHT_ELEMENTS', withMessageData(highlightElements));
   Bridge.onMessage('SHUTDOWN', withMessageData(stopInspecting));
   Bridge.onMessage('START_INSPECTING', withMessageData(startInspecting));
   Bridge.onMessage('STOP_INSPECTING', withMessageData(stopInspecting));
 
-  function startInspecting() {
+  function startInspecting(options) {
     isInspecting = true;
+
+    if (options) {
+      stopOnClick = options.stopOnClick ?? true;
+      blockEvents = options.blockEvents ?? true;
+    }
+
     addEventListeners(view);
   }
 
@@ -51,6 +59,13 @@ export default function setupHighlighter({
     }
   }
 
+  function stopPropagation(event) {
+    if (blockEvents) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+
   function stopInspecting() {
     hideOverlay();
     removeEventListeners(view);
@@ -99,30 +114,27 @@ export default function setupHighlighter({
   }
 
   function onClick(event) {
-    event.preventDefault();
-    event.stopPropagation();
+    stopPropagation(event);
 
-    stopInspecting();
+    if (isInspecting && stopOnClick) {
+      stopInspecting();
+    }
   }
 
   function onMouseEvent(event) {
-    event.preventDefault();
-    event.stopPropagation();
+    stopPropagation(event);
   }
 
   function onPointerDown(event) {
-    event.preventDefault();
-    event.stopPropagation();
+    stopPropagation(event);
 
-    selectNode(event.target);
+    selectNode(event.target, { origin: event.isTrusted ? 'click' : 'script' });
   }
 
   function onPointerOver(event) {
-    event.preventDefault();
-    event.stopPropagation();
+    stopPropagation(event);
 
     const target = event.target;
-
     if (target.tagName === 'IFRAME') {
       try {
         if (!iframesListeningTo.has(target)) {
@@ -136,12 +148,11 @@ export default function setupHighlighter({
     }
 
     showOverlay([target], false);
-    selectNode(target);
+    selectNode(target, { origin: event.isTrusted ? 'hover' : 'script' });
   }
 
   function onPointerUp(event) {
-    event.preventDefault();
-    event.stopPropagation();
+    stopPropagation(event);
   }
 
   const selectNode = throttle(

devtools/src/content-script/highlighter/utils.js

@@ -64,7 +64,8 @@ export function mergeRectOffsets(rects) {
 // taking into account any offsets caused by intermediate iframes.
 export function getNestedBoundingClientRect(node, boundaryWindow) {
   const ownerIframe = getOwnerIframe(node);
-  if (ownerIframe && ownerIframe !== boundaryWindow) {
+
+  if (ownerIframe && ownerIframe.contentWindow !== boundaryWindow) {
     const rects = [node.getBoundingClientRect()];
     let currentIframe = ownerIframe;
     let onlyOneMore = false;

devtools/src/devtools/panel.js

@@ -56,7 +56,12 @@ function Panel() {
       </div>
       <div className="grid relative p-2 gap-4 flex-auto grid-cols-1 md:grid-cols-2 grid-equal-cells overflow-hidden">
         <div className="relative">
-          <Query query={''} result={result} dispatch={dispatch} />
+          <Query
+            query={''}
+            result={result}
+            dispatch={dispatch}
+            variant="minimal"
+          />
         </div>
 
         <div className="overflow-hidden">

package-lock.json

@@ -38,7 +38,9 @@
     "postversion": "git push && git push --tags && git checkout master && git merge develop --ff && git push && git checkout -"
   },
   "dependencies": {
+    "@primer/octicons-react": "^10.0.0",
     "@testing-library/dom": "^7.15.0",
+    "@testing-library/user-event": "^12.0.2",
     "codemirror": "5.54.0",
     "crx-bridge": "^2.1.0",
     "deep-diff": "^1.0.2",
@@ -65,7 +67,6 @@
     "@babel/preset-react": "^7.10.1",
     "@testing-library/jest-dom": "^5.9.0",
     "@testing-library/react": "^10.2.0",
-    "@testing-library/user-event": "^11.4.2",
     "@types/fs-extra": "^9.0.1",
     "babel-eslint": "^10.1.0",
     "chrome-launch": "^1.1.4",

package.json

@@ -67,7 +67,7 @@ async function main() {
   const dest = resolve('dist/client');
   await remove(dest);
 
-  const entries = ['src/index.html', 'src/embed.js'];
+  const entries = ['src/index.html', 'src/embed.js', 'src/sandbox.html'];
 
   if (process.env.NODE_ENV === 'development') {
     entries.push('src/embed.html');

scripts/build-client.js

@@ -1,8 +1,7 @@
 /* global chrome */
 import React, { useState, useEffect } from 'react';
 import IconButton from './IconButton';
-import SuccessIcon from './icons/SuccessIcon';
-import CopyIcon from './icons/CopyIcon';
+import { CopyIcon, CheckIcon } from '@primer/octicons-react';
 
 const IS_DEVTOOL = !!(window.chrome && chrome.runtime && chrome.runtime.id);
 
@@ -75,7 +74,7 @@ function CopyButton({ text, title, className, variant }) {
       title={title}
       className={className}
     >
-      {copied ? <SuccessIcon /> : <CopyIcon />}
+      {copied ? <CheckIcon /> : <CopyIcon />}
     </IconButton>
   );
 }

src/components/CopyButton.js

@@ -1,15 +1,16 @@
 import React, { useRef, useCallback, useState } from 'react';
 
+import { eventMap } from '@testing-library/dom/dist/event-map';
+import throttle from 'lodash.throttle';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { TrashcanIcon } from '@primer/octicons-react';
+
 import Preview from './Preview';
 import MarkupEditor from './MarkupEditor';
 import usePlayground from '../hooks/usePlayground';
 import state from '../lib/state';
-import { eventMap } from '@testing-library/dom/dist/event-map';
 import { VirtualScrollable } from './Scrollable';
-import throttle from 'lodash.throttle';
-import AutoSizer from 'react-virtualized-auto-sizer';
 import IconButton from './IconButton';
-import TrashcanIcon from './icons/TrashcanIcon';
 import CopyButton from './CopyButton';
 import EmptyStreetImg from '../images/EmptyStreetImg';
 import StickyList from './StickyList';
@@ -158,7 +159,7 @@ function DomEvents() {
 
   return (
     <div className="flex flex-col h-auto md:h-full w-full">
-      <div className="editor markup-editor gap-4 md:gap-8 md:h-56 flex-auto grid-cols-1 md:grid-cols-2">
+      <div className="editor p-4 markup-editor gap-4 md:gap-8 md:h-56 flex-auto grid-cols-1 md:grid-cols-2">
         <div className="flex-auto relative h-56 md:h-full">
           <MarkupEditor markup={markup} dispatch={dispatch} />
         </div>
@@ -177,7 +178,7 @@ function DomEvents() {
 
       <div className="flex-none h-8" />
 
-      <div className="editor md:h-56 flex-auto overflow-hidden">
+      <div className="editor p-4 md:h-56 flex-auto overflow-hidden">
         <div className="h-56 md:h-full w-full flex flex-col">
           <div className="h-8 flex items-center w-full text-sm font-bold">
             <div className="p-2 w-16">#</div>