Bug 1614549 - Highlight DOM elements from instant evaluation. r=jlast.

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

--HG--
extra : moz-landing-system : lando

devtools/client/webconsole/components/App.js

@@ -337,11 +337,12 @@ class App extends Component {
   }
 
   renderEagerEvaluation() {
-    if (!this.props.eagerEvaluationEnabled) {
+    const { eagerEvaluationEnabled, serviceContainer } = this.props;
+    if (!eagerEvaluationEnabled) {
       return null;
     }
 
-    return EagerEvaluation();
+    return EagerEvaluation({ serviceContainer });
   }
 
   renderReverseSearch() {

devtools/client/webconsole/components/Input/EagerEvaluation.js

@@ -31,9 +31,31 @@ class EagerEvaluation extends Component {
   static get propTypes() {
     return {
       terminalEagerResult: PropTypes.any,
+      serviceContainer: PropTypes.object.isRequired,
     };
   }
 
+  componentDidUpdate(prevProps) {
+    const { serviceContainer, terminalEagerResult } = this.props;
+    const { highlightDomElement, unHighlightDomElement } = serviceContainer;
+
+    if (canHighlightObject(prevProps.terminalEagerResult)) {
+      unHighlightDomElement(prevProps.terminalEagerResult.getGrip());
+    }
+
+    if (canHighlightObject(terminalEagerResult)) {
+      highlightDomElement(terminalEagerResult.getGrip());
+    }
+  }
+
+  componentWillUnmount() {
+    const { serviceContainer, terminalEagerResult } = this.props;
+
+    if (canHighlightObject(terminalEagerResult)) {
+      serviceContainer.unHighlightDomElement(terminalEagerResult.getGrip());
+    }
+  }
+
   renderRepsResult() {
     const { terminalEagerResult } = this.props;
 
@@ -63,6 +85,16 @@ class EagerEvaluation extends Component {
   }
 }
 
+function canHighlightObject(obj) {
+  const grip = obj && obj.getGrip && obj.getGrip();
+  return (
+    grip &&
+    (REPS.ElementNode.supportsObject(grip) ||
+      REPS.TextNode.supportsObject(grip)) &&
+    grip.preview.isConnected
+  );
+}
+
 function mapStateToProps(state) {
   return {
     terminalEagerResult: getTerminalEagerResult(state),

devtools/client/webconsole/test/browser/_jsterm.ini

@@ -79,6 +79,7 @@ skip-if = (os == "win" && processor == "aarch64") # disabled on aarch64 due to 1
 [browser_jsterm_ctrl_key_nav.js]
 skip-if = os != 'mac' # The tested ctrl+key shortcuts are OSX only
 [browser_jsterm_document_no_xray.js]
+[browser_jsterm_eager_evaluation_element_highlight.js]
 [browser_jsterm_eager_evaluation_in_debugger_stackframe.js]
 [browser_jsterm_eager_evaluation.js]
 [browser_jsterm_editor.js]

devtools/client/webconsole/test/browser/browser_jsterm_eager_evaluation_element_highlight.js

@@ -0,0 +1,73 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const TEST_URI = `data:text/html;charset=utf8,
+<h1 class="title">hello</h1>
+<div id="mydiv">mydivtext</div>
+<script>
+  x = Object.create(null, Object.getOwnPropertyDescriptors({
+    a: document.querySelector("h1"),
+    b: document.querySelector("div"),
+    c: document.createElement("hr")
+  }));
+</script>`;
+
+// Test that when the eager evaluation result is an element, it gets highlighted.
+add_task(async function() {
+  await pushPref("devtools.webconsole.input.eagerEvaluation", true);
+  const hud = await openNewTabAndConsole(TEST_URI);
+  const { jsterm, toolbox } = hud;
+  const { autocompletePopup } = jsterm;
+
+  await registerTestActor(toolbox.target.client);
+  const testActor = await getTestActor(toolbox);
+  const inspectorFront = await toolbox.target.getFront("inspector");
+
+  ok(!autocompletePopup.isOpen, "popup is not open");
+  const onPopupOpen = autocompletePopup.once("popup-opened");
+  let onNodeHighlight = inspectorFront.highlighter.once("node-highlight");
+  EventUtils.sendString("x.");
+  await onPopupOpen;
+
+  await waitForEagerEvaluationResult(hud, `<h1 class="title">`);
+  await onNodeHighlight;
+  let nodeFront = await onNodeHighlight;
+  is(nodeFront.displayName, "h1", "The correct node was highlighted");
+  isVisible = await testActor.isHighlighting();
+  is(isVisible, true, "Highlighter is displayed");
+
+  onNodeHighlight = inspectorFront.highlighter.once("node-highlight");
+  EventUtils.synthesizeKey("KEY_ArrowDown");
+  await waitForEagerEvaluationResult(hud, `<div id="mydiv">`);
+  await onNodeHighlight;
+  nodeFront = await onNodeHighlight;
+  is(nodeFront.displayName, "div", "The correct node was highlighted");
+  isVisible = await testActor.isHighlighting();
+  is(isVisible, true, "Highlighter is displayed");
+
+  let onNodeUnhighlight = inspectorFront.highlighter.once("node-unhighlight");
+  EventUtils.synthesizeKey("KEY_ArrowDown");
+  await waitForEagerEvaluationResult(hud, `<hr>`);
+  await onNodeUnhighlight;
+  ok(true, "The highlighter isn't displayed on a non-connected element");
+
+  info("Test that text nodes are highlighted");
+  onNodeHighlight = inspectorFront.highlighter.once("node-highlight");
+  EventUtils.sendString("b.firstChild");
+  await waitForEagerEvaluationResult(hud, `#text "mydivtext"`);
+  await onNodeHighlight;
+  nodeFront = await onNodeHighlight;
+  is(nodeFront.displayName, "#text", "The correct text node was highlighted");
+  isVisible = await testActor.isHighlighting();
+  is(isVisible, true, "Highlighter is displayed");
+
+  onNodeUnhighlight = inspectorFront.highlighter.once("node-unhighlight");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await waitFor(() => findMessage(hud, `#text "mydivtext"`, ".result"));
+  await waitForNoEagerEvaluationResult(hud);
+  isVisible = await testActor.isHighlighting();
+  is(isVisible, false, "Highlighter is closed after evaluating the expression");
+});