Bug 1938418 - [devtools] Immediately highlight the hovered previewed token. r=devtools-reviewers,nchevobbe

This helps see that computation may be ongoing, waiting for the file parsing.

Differential Revision: https://phabricator.services.mozilla.com/D237652

devtools/client/debugger/src/components/Editor/Preview/Popup.css

@@ -119,6 +119,33 @@
   cursor: default;
 }
 
+/**
+ * Use an animation in order to delay the preview-loading-token
+ * style 1/4s second after hovering a token.
+ *
+ * It avoids to render this intermediate style if the previews is ready
+ * right away.
+ */
+@keyframes animateLoading {
+  25% {
+    cursor: wait;
+    text-decoration: grey underline solid;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 2px;
+    text-decoration-skip-ink: none;
+  }
+  100% {
+    cursor: wait;
+    text-decoration: grey underline solid;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 2px;
+    text-decoration-skip-ink: none;
+  }
+}
+.preview-loading-token {
+  animation: animateLoading 1s forwards;
+}
+
 .preview-token,
 .debug-expression.preview-token {
   background-color: var(--theme-highlight-yellow);

devtools/client/debugger/src/components/Editor/Preview/index.js

@@ -17,11 +17,13 @@ import { features } from "../../../utils/prefs";
 
 const EXCEPTION_MARKER = "mark-text-exception";
 
+const LOADING_CLASS = "preview-loading-token";
+
 class Preview extends PureComponent {
   target = null;
   constructor(props) {
     super(props);
-    this.state = { selecting: false };
+    this.state = { selecting: false, loading: null };
   }
 
   static get propTypes() {
@@ -72,6 +74,18 @@ class Preview extends PureComponent {
     }
   }
 
+  componentDidUpdate(_prevProps, prevState) {
+    // Ensure that only one token is highlighted as "loading"
+    const previous = prevState.loading;
+    if (previous) {
+      previous.classList.remove(LOADING_CLASS);
+    }
+    const { loading } = this.state;
+    if (loading) {
+      loading.classList.add(LOADING_CLASS);
+    }
+  }
+
   // Note that these events are emitted by utils/editor/tokens.js
   onTokenEnter = async ({ target, tokenPos }) => {
     // Use a temporary object to uniquely identify the asynchronous processing of this user event
@@ -79,6 +93,9 @@ class Preview extends PureComponent {
     const tokenId = {};
     this.currentTokenId = tokenId;
 
+    // Immediately highlight the hovered token as "loading"
+    this.setState({ loading: target });
+
     const {
       editor,
       getPausedPreview,
@@ -90,24 +107,29 @@ class Preview extends PureComponent {
     const isTargetException = target.closest(`.${EXCEPTION_MARKER}`);
 
     let preview;
-    if (isTargetException) {
+    try {
-      preview = await getExceptionPreview(target, tokenPos, editor);
+      if (isTargetException) {
-    }
+        preview = await getExceptionPreview(target, tokenPos, editor);
+      }
 
-    if (!preview && (hasSelectedTrace || isPaused) && !this.state.selecting) {
+      if (!preview && (hasSelectedTrace || isPaused) && !this.state.selecting) {
-      if (hasSelectedTrace) {
+        if (hasSelectedTrace) {
-        preview = await getTracerPreview(target, tokenPos, editor);
+          preview = await getTracerPreview(target, tokenPos, editor);
-      }
+        }
-      if (!preview && isPaused) {
+        if (!preview && isPaused) {
-        preview = await getPausedPreview(target, tokenPos, editor);
+          preview = await getPausedPreview(target, tokenPos, editor);
+        }
       }
+    } catch (e) {
+      // Ignore any exception and dismiss the popup (as preview will be null)
     }
 
     // Prevent modifying state and showing this preview if we started hovering another token
-    if (!preview || this.currentTokenId !== tokenId) {
+    if (this.currentTokenId !== tokenId) {
       return;
     }
-    this.setState({ preview });
+
+    this.setState({ loading: null, preview });
   };
 
   onMouseUp = () => {
@@ -129,14 +151,19 @@ class Preview extends PureComponent {
   };
 
   clearPreview = () => {
-    this.setState({ preview: null });
+    this.setState({ loading: null, preview: null });
   };
 
   render() {
-    const { preview } = this.state;
+    if (this.state.selecting) {
-    if (!preview || this.state.selecting) {
       return null;
     }
+
+    const { preview } = this.state;
+    if (!preview) {
+      return null;
+    }
+
     return React.createElement(Popup, {
       preview,
       editor: this.props.editor,